/* Front-face dimensions follow shared-computer.mjs. The dial uses its exact art crop. */
.tv .cabinet,.tv[data-gauge="off"] .cabinet,.tv[data-mode="game"] .cabinet{
  position:relative;display:block;width:100%;height:100%;padding:0;overflow:hidden;
  background:repeating-linear-gradient(108deg,#fff3 0 1px,transparent 1px 4px),linear-gradient(90deg,#8e6939 0%,#e5c77d 8%,#c9a45f 50%,#dbb86c 92%,#94703e 100%);
  box-shadow:inset 0 2px 2px #fff6,inset 0 -5px 8px #3d230e;
}
.tv .cabinet > .gauge,.tv .panel #pictureKey,.tv .panel #soundKey,.tv .panel .pilot,.tv .panel .ambience-toggle,.tv .panel .model,.tv .panel .legend,.tv .panel .dial-ring{display:none}

/* Upper curved channel glass: 78.8% wide, 22.5% tall, 81.5% from the base. */
.tv .cabinet > .channel-crt,.tv[data-mode="game"] .cabinet > .channel-crt{
  position:absolute;top:7.25%;left:10.6%;width:78.8%;height:22.5%;min-width:0;min-height:0;
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:3px;padding:clamp(5px,1vh,10px);overflow:hidden;
  border:clamp(5px,.7vw,9px) solid #1b1510;border-radius:12% 12% 7% 7% / 16% 16% 9% 9%;
  background:radial-gradient(ellipse at 50% 5%,#302618,#090b0e 74%);
  box-shadow:0 0 0 2px #654922,inset 0 6px 20px #000d,0 4px 9px #3b260e8c;
}
.channel-crt .vfd{display:flex;align-items:baseline;gap:clamp(4px,1vw,10px);min-width:0;padding:1px 2px 3px;white-space:nowrap}
.tv[data-mode="game"] .channel-crt .vfd{display:flex}
.channel-crt .vfd-ch{flex:none}
.channel-crt .vfd-name{min-width:0;font-size:clamp(14px,2.1vw,25px);text-overflow:ellipsis}
.channel-crt .vfd-show{font-size:clamp(9px,1.15vw,12px);text-overflow:ellipsis}
.tv[data-mode="game"] .channel-crt .vfd-show{display:none}
.channel-crt .lcd-list{display:flex;flex-wrap:wrap;align-content:start;gap:4px;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#aa8047 #1c150d}
.channel-crt .lcd-card,.channel-crt .lcd-card.half,.channel-crt .lcd-card.head{flex:0 0 auto;grid-column:auto;grid-template-columns:auto;min-height:clamp(28px,4.4vh,36px);margin:0;padding:4px 8px;align-content:center;white-space:nowrap}
.channel-crt .lcd-card .lcd-ch{display:none}
.channel-crt .lcd-card .lcd-name,.channel-crt .lcd-card.half .lcd-name,.channel-crt .lcd-card.head .lcd-name{font-size:clamp(12px,1.3vw,16px)}
.channel-crt .lcd-card.head{border-width:2px}

/* The picture plane occupies the model's 90.6% by 42% opening. */
.tv .cabinet > .bezel,.tv[data-mode="game"] .cabinet > .bezel{
  position:absolute;top:35.25%;left:4.7%;width:90.6%;height:42%;min-width:0;min-height:0;
  padding:clamp(4px,.7vw,9px);border:clamp(3px,.5vw,6px) solid #171310;border-radius:clamp(12px,2vw,24px);
  background:linear-gradient(125deg,#815c30,#e0bf75 8%,#87602e 50%,#d8b267 92%,#60401d);
  box-shadow:0 0 0 2px #76542a,inset 0 2px 3px #fff8,0 5px 10px #0008;
}
.cabinet .bezel::after{display:none}
.cabinet .glass{border-radius:clamp(10px,1.7vw,22px);box-shadow:inset 0 0 0 3px #070708,inset 0 0 38px #000d}
.tv[data-mode="game"] .cabinet .glass{border-radius:clamp(10px,1.7vw,22px);box-shadow:inset 0 0 0 3px #070708,inset 0 0 38px #000d}

/* Transparent layout layer lets the working controls sit on the same face. */
.tv .cabinet > .panel,.tv[data-mode="game"] .cabinet > .panel{
  position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;pointer-events:none;
}
.tv .panel .maker,.tv[data-mode="game"] .panel .maker{
  position:absolute;left:7.5%;bottom:17.65%;width:85%;height:4.7%;min-height:25px;
  display:flex;align-items:center;justify-content:center;gap:.3em;margin:0;border:1px solid #9a7138;
  background:linear-gradient(180deg,#e4c57d,#cba65f 55%,#ad8040);
  box-shadow:inset 0 1px 1px #fff8,inset 0 -2px 2px #65421d,0 2px 3px #39230f5c;pointer-events:none;
}
.tv .panel .maker .emboss,.tv .panel .maker .engrave{
  font:700 clamp(16px,3.4vw,35px)/1 Georgia,serif;letter-spacing:.035em;color:#65441d;
  text-shadow:1px 1px #f9e1a8,-1px -1px #8a652e;
}
.tv .panel #ctlrow,.tv[data-mode="game"] .panel #ctlrow{position:absolute;inset:0;display:block;padding:0;pointer-events:none}
.tv .panel .dial-block,.tv[data-mode="game"] .panel .dial-block{
  position:absolute;left:26.5%;bottom:7.8%;transform:translate(-50%,50%);display:grid;justify-items:center;
  width:max(44px,min(36.5%,14.5dvh,160px));height:max(44px,min(36.5vw,14.5dvh,160px));margin:0;gap:0;pointer-events:auto;
}
.tv .panel .dial{
  width:100%;height:100%;margin:0;border:0;border-radius:50%;
  background-image:url("assets/armie-intro/website-bezel.png");
  background-size:1049.18% 590.16%;background-position:96.03% 2.84%;box-shadow:0 4px 8px #0009;
}
.tv .panel .dial-grip,.tv .panel .dial-pointer{display:none}
.tv .panel .keys,.tv[data-mode="game"] .panel .keys{
  position:absolute;left:73.5%;bottom:7.8%;transform:translate(-50%,50%);display:block;
  width:min(27%,130px);margin:0;pointer-events:auto;
}
.tv .panel .key-item{display:block;width:auto;margin:0}
.tv .panel .key.power{
  width:100%;height:min(9dvh,78px);min-height:44px;border-radius:7px;
  background:linear-gradient(180deg,#090908,#211b17 85%,#070606);
  box-shadow:inset 0 2px 5px #000,0 1px 1px #f1d28d;
}
.tv .panel .key.power::before{inset:9% 7% 12%;border-radius:5px;background:linear-gradient(180deg,#9b5bd4,#7a2fc4 48%,#4a1a86);box-shadow:inset 0 1px 2px #dbb9f1,0 3px 4px #0008}
.tv .panel .key.power svg{width:30%;height:42%;margin:0;stroke:#ffd36e}
.tv .panel .key.power:active::before,.tv .panel .key.power.pressed::before{top:15%;bottom:7%}

.cabinet-side-brand{
  position:absolute;z-index:4;top:33.6%;height:34.4%;width:clamp(10px,2.4vw,20px);overflow:hidden;pointer-events:none;
  font:700 clamp(9px,1.4vw,17px)/1 Georgia,serif;letter-spacing:.13em;writing-mode:vertical-rl;text-align:center;
  color:#65441d;text-shadow:1px 1px #f9e1a8;
}
.cabinet-side-brand--left{left:1%;transform:rotate(180deg)}
.cabinet-side-brand--right{right:1%}

/* Game exit is a link in the upper glass; the chin still has only dial and power. */
#gameKey[hidden]{display:none}
.tv #gameKey{display:none}
.tv[data-mode="game"] #gameKey:not([hidden]){display:block;flex:none;margin-left:auto}
.tv #gameKey .key.game{
  display:block;width:auto;height:auto;min-height:44px;padding:4px 6px;border:0;border-radius:0;
  background:none;box-shadow:none;color:#ffd36e;font:700 clamp(10px,1.5vw,14px)/1 var(--system);
  letter-spacing:.04em;white-space:nowrap;
}
.tv #gameKey .key.game::before,.tv #gameKey .key.game svg{display:none}
.tv #gameKey .key.game::after{content:"BACK TO TV"}
.tv #gameKey .legend{display:none}
.tv #gameKey .key.game:focus-visible{outline:2px solid #ffd36e;outline-offset:2px}

.tv[data-mode="game"] .channel-crt .lcd-list{flex-wrap:wrap;align-items:flex-start;align-content:flex-start;overflow:auto}
.tv[data-mode="game"] .channel-crt .lcd-card,.tv[data-mode="game"] .channel-crt .lcd-card.half,.tv[data-mode="game"] .channel-crt .lcd-card.head{flex:0 0 auto;height:auto;min-height:28px;margin:0;padding:4px 6px}

@media(max-width:640px){
  .tv .cabinet > .channel-crt{padding:4px;border-width:5px}
  .channel-crt .vfd{gap:4px}
  .channel-crt .vfd-ch{font-size:10px}
  .channel-crt .vfd-name{font-size:14px}
  .channel-crt .vfd-show{font-size:9px}
  .channel-crt .lcd-card,.channel-crt .lcd-card.half,.channel-crt .lcd-card.head{min-height:28px;padding:4px 6px}
  .channel-crt .lcd-card .lcd-name,.channel-crt .lcd-card.half .lcd-name,.channel-crt .lcd-card.head .lcd-name{font-size:12px}
  .tv .cabinet > .bezel{padding:4px;border-width:3px}
  .cabinet-side-brand{letter-spacing:.05em}
}
.tv[data-state="off"] .channel-crt{visibility:hidden}

/* Powered TV: less empty gold around the channel menu and more room for the picture.
   Off-state projection keeps the shared 3D computer's original apertures. */
.tv{--tv-menu-height:clamp(132px,17.5%,150px)}
@media(min-width:1100px){.tv{--tv-menu-height:96px}}
.tv:not([data-state="off"]):not([data-mode="game"]) .cabinet > .channel-crt{
  top:2%;left:3%;width:94%;height:var(--tv-menu-height);
  padding:5px;border-width:3px;border-radius:18px;
}
.tv:not([data-state="off"]):not([data-mode="game"]) .cabinet > .bezel{
  top:calc(2% + var(--tv-menu-height) + 10px);bottom:22.75%;height:auto;
  left:2%;width:96%;padding:3px;border-width:2px;
}
.tv:not([data-state="off"]) .cabinet-side-brand{width:8px;font-size:8px;left:auto;right:.1%}
.tv:not([data-state="off"]) .cabinet-side-brand--left{left:.1%;right:auto}

/* Game mode wins over every cabinet selector above. Only a safe-area-aware return
   bar remains; the game/menu/loading page gets the rest of the viewport. */
.tv[data-mode="game"] .cabinet{display:block;background:#09080c;box-shadow:none}
.tv[data-mode="game"] .cabinet > .channel-crt{
  position:absolute;inset:0 0 auto;width:100%;height:calc(44px + env(safe-area-inset-top));
  min-height:0;display:block;padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(8px,env(safe-area-inset-left));
  border:0;border-radius:0;background:#09080c;box-shadow:none;visibility:visible;
}
.tv[data-mode="game"] .channel-crt .vfd{height:44px;padding:0;align-items:center}
.tv[data-mode="game"] .channel-crt .vfd-ch,
.tv[data-mode="game"] .channel-crt .vfd-show,
.tv[data-mode="game"] .channel-crt .lcd-list,
.tv[data-mode="game"] .cabinet > .panel,
.tv[data-mode="game"] .cabinet-side-brand{display:none}
.tv[data-mode="game"] .channel-crt .vfd-name{font-size:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tv[data-mode="game"] .cabinet > .bezel{
  position:absolute;inset:calc(44px + env(safe-area-inset-top)) 0 0;
  width:100%;height:auto;padding:0;border:0;border-radius:0;background:#000;box-shadow:none;
}
.tv[data-mode="game"] .cabinet .glass{border-radius:0;box-shadow:none}
.tv[data-mode="game"] #gameKey:not([hidden]){display:block}
.tv[data-mode="game"] #gameKey .key.game{min-height:44px;padding:8px}
.tv:not([data-mode="game"]) #gameKey:not([hidden]){display:block;flex:none;margin-left:auto}
.tv:not([data-mode="game"]) #gameKey .key.game::after{content:"PLAY FULL SCREEN"}

/* The sponsor's playable arcade also leaves the tube; its existing close timer
   and return lifecycle stay with the arcade. Ordinary sponsor cards stay in the TV. */
#tv .tv-ad-layer:has(.tv-ad-overlay){position:fixed;inset:0;z-index:10000;border-radius:0}
#tv .tv-ad-layer .tv-ad-overlay{padding:0;background:#09080c}
#tv .tv-ad-layer .sponsor-arcade{width:100%;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none}
#tv .tv-ad-layer .sponsor-arcade > .sponsor-cap{min-height:44px;padding-top:env(safe-area-inset-top)}
#tv .tv-ad-layer .sponsor-arcade > .sponsor-cap button{width:auto;min-height:44px;padding:0 12px;font-size:0}
#tv .tv-ad-layer .sponsor-arcade > .sponsor-cap button::after{content:"BACK TO TV";font:700 14px/1 var(--system)}
#tv .tv-ad-layer .sponsor-arcade > [data-arcade]{display:flex;flex:1}