/* A cabinet around the original, uncropped 16:9 scene. The approved atlas supplies
   the wood and brass corners; the console uses small native pixel controls. */
:root{--status-height:0px;--tv-side:14px;--tv-top:14px;--tv-console:72px;--scene-width:min(calc(var(--scene-base-width) + 30px * 16 / 9),calc((100vh - var(--hud-height) - var(--tv-top) - var(--tv-console) - 24px) * 16 / 9),calc(100vw - 344px))}
.tv-cabinet{position:relative;flex:none;width:calc(var(--scene-width) + var(--tv-side) * 2 + 2px);padding:var(--tv-top) var(--tv-side) 0;--ng-edge:20px;border:1px solid #17130f;outline:1px solid #785630;box-shadow:0 3px 0 #0b100d,0 6px 0 #100e0b,0 16px 22px #0008}
.tv-cabinet:before,.tv-cabinet:after{content:"";position:absolute;bottom:-8px;width:62px;height:6px;background:#241b13;border:1px solid #60462b;box-shadow:inset 0 -2px #100f0a;z-index:-2}
.tv-cabinet:before{left:28px}.tv-cabinet:after{right:28px}
.tv-cabinet>.stage{width:var(--scene-width);max-height:none;max-width:none;box-shadow:0 0 0 2px #100e0b,0 0 0 4px #b58b4c,0 0 0 5px #392819,0 0 0 7px #170f0d;isolation:auto}
.tv-console{position:relative;height:var(--tv-console);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 8px 10px;color:#dfbe7e;font-family:RobotoCondensed,sans-serif}
.tv-console:before{content:"";position:absolute;left:5px;right:5px;top:6px;height:1px;background:#0e0908;box-shadow:0 1px #9b6b3047}
.tv-left-controls,.tv-right-controls,.tv-transport,.tv-audio{display:flex;align-items:center;gap:12px}
.tv-console button{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;min-height:0;margin:0;padding:0;position:relative;font:14px Tiny5,monospace;letter-spacing:1px;transition:filter .15s,box-shadow .15s;touch-action:manipulation}
.tv-console button:hover{filter:brightness(1.22);transform:none}.tv-console button:active{translate:0 1px}.tv-console button:focus-visible,.tv-dial:focus-within{outline:2px solid #8edbd6;outline-offset:4px}
.tv-console button:disabled{opacity:.4;cursor:default;filter:none}
.tv-console svg{width:19px;height:19px;fill:currentColor;shape-rendering:crispEdges;flex:none}
.tv-console .tv-power{width:39px;height:39px;border-radius:50%;color:#f4d298;border:2px solid #ad8045;background:radial-gradient(circle at 42% 30%,#705439,#31271c 75%);box-shadow:0 0 0 2px #170f0b,inset 0 2px #d3a66388,inset 0 -3px #140f0b,0 3px 0 #100e0a}
.tv-signal{display:grid;place-items:center;width:10px;height:30px}.tv-signal i{width:5px;height:5px;border-radius:50%;background:#c7954c;box-shadow:0 0 0 2px #19130e,0 0 8px #d99f4133}.tv-signal[data-state=connected] i{background:#d2e8a4;box-shadow:0 0 0 2px #19130e,0 0 7px #adcb55aa}.tv-signal[data-state=lost] i,.tv-signal[data-state=unavailable] i{background:#ed8861}
.tv-speaker{width:78px;height:24px;border:1px solid #160e0a;border-radius:2px;background:repeating-linear-gradient(0deg,#160e0a 0 2px,#805738 2px 3px,#3b281a 3px 5px);box-shadow:0 1px #b7844e55,inset 3px 0 0 #1b120c,inset -3px 0 0 #1b120c;opacity:.8}
.tv-maker{display:flex;align-items:center;justify-content:center;gap:10px;min-width:0;user-select:none;opacity:.95}
.tv-maker-crest{display:grid;place-items:center;flex:none;width:34px;height:34px}.tv-maker-crest .ng-art{width:34px;height:30px}
.tv-maker b{display:block;font:clamp(15px,1.3vw,20px)/1.1 Tiny5,monospace;color:#e6c48d;letter-spacing:2px;text-shadow:0 2px #1b120c;white-space:nowrap}
.tv-maker div>span{display:block;font-size:8px;line-height:1.6;letter-spacing:1.5px;color:#ae8c61;white-space:nowrap}
.tv-transport{padding:4px;border:1px solid #140e0b;background:#291c14;box-shadow:0 1px #aa76455c;border-radius:3px;gap:4px}
.tv-console .tv-transport button{height:30px;border:1px solid #9e794b;color:#d8c19a;background:linear-gradient(#6b5136,#3d2d20);box-shadow:inset 0 1px #d9b77b66,inset 0 -2px #21180e,0 1px #0e0b08;border-radius:2px}
.tv-console #tv-record{width:67px}.tv-console #tv-snapshot{width:36px}.tv-rec-dot{width:7px;height:7px;border:1px solid #d28a6c;background:#ad4c34;box-shadow:0 1px #2d1810}.tv-is-recording .tv-rec-dot{background:#ff8864;box-shadow:0 0 8px #ff6c41}.tv-is-recording #tv-record{color:#ffe2b0}
.tv-audio{gap:6px;border-left:1px solid #110d09;padding-left:9px;box-shadow:-1px 0 #a7793b30}
.tv-console #tv-music{width:24px;height:32px;background:none;border:0;box-shadow:none;color:#c6a570}.tv-console #tv-music[aria-pressed=false]{color:#846f53}
.tv-dial{position:relative;width:38px;height:38px;border-radius:50%;background:conic-gradient(from 225deg,#926c3e 0 1deg,#2d2117 1deg 18deg,#926c3e 18deg 19deg,#2d2117 19deg 36deg,#926c3e 36deg 37deg,#2d2117 37deg 54deg,#926c3e 54deg 55deg,#2d2117 55deg 72deg,#926c3e 72deg 73deg,#2d2117 73deg 288deg,#23180f 288deg);border:1px solid #191009;box-shadow:0 1px #ba8a4f66;cursor:ew-resize}
.tv-dial-face{position:absolute;inset:4px;border-radius:50%;background:radial-gradient(circle at 40% 30%,#ae8a56,#66492e 65%,#37291c);border:1px solid #d1aa69;box-shadow:0 2px 3px #080704,inset 0 -2px #3c2818;transform:rotate(var(--dial-angle,-52deg));pointer-events:none}
.tv-dial-face:after{content:"";position:absolute;width:2px;height:9px;top:2px;left:calc(50% - 1px);background:#f9db9e;box-shadow:1px 0 #5b3b20}
.tv-dial input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:none;user-select:none}
.tv-dial.is-dragging .tv-dial-face{filter:brightness(1.12)}
.tv-dial:after{content:attr(data-volume);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);padding:4px 7px;background:#2d2017;border:1px solid #a17b4b;box-shadow:0 2px 4px #0008;color:#f8d99e;font:14px/1.2 RobotoCondensed,sans-serif;white-space:nowrap;pointer-events:none;z-index:6;opacity:0}
.tv-dial.is-dragging:after,.tv-dial:has(input:focus-visible):after{opacity:1}
.tv-record-status{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);padding:6px 10px;background:#231811eb;border:1px solid #a17b4b;color:#f8d99e;z-index:6;font-size:12px;white-space:nowrap;pointer-events:none}.tv-record-status:empty{display:none}
.tv-shutter{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;padding:15px;background:radial-gradient(ellipse at 50% 45%,#172019,#050907 78%);box-shadow:inset 0 0 50px #0008;color:#ae9f7c;text-align:center}
.tv-shutter[hidden],.tv-crt[hidden]{display:none}
.tv-off-controls{display:flex;flex-direction:column;align-items:center;gap:7px}.tv-off-controls>b{font:26px/1 var(--ng-title);letter-spacing:3px;color:#d8ba7e}
.tv-off-crest .ng-art{width:44px;height:38px;filter:sepia(.3);opacity:.8}
.tv-shutter button{margin:3px 0 0;border:1px solid #aa814b;background:linear-gradient(#554029,#302418);box-shadow:inset 0 1px #d2ae6c55,0 3px #010403;color:#f1d496;padding:8px 24px;font:19px/1 var(--ng-title);cursor:pointer}
.tv-shutter button:hover{filter:brightness(1.2)}.tv-shutter button:focus-visible{outline:2px solid #8edbd6;outline-offset:4px}
.tv-royal-notice{position:relative;isolation:isolate;--ng-edge:17px;width:min(440px,100%);padding:18px 27px 15px;color:#f2dba9;box-shadow:0 5px 0 #020503,0 8px 16px #0008}
.tv-royal-notice:before,.tv-royal-notice:after{content:"";position:absolute;top:11px;width:6px;height:6px;z-index:1;background:linear-gradient(135deg,#dec38c 0 35%,#59482f 36% 60%,#aa8b54 61%);border:1px solid #181209;box-shadow:1px 2px 0 #130e0c}.tv-royal-notice:before{left:12px}.tv-royal-notice:after{right:12px}
.tv-notice-byline{display:block;font:10px/1.4 var(--ng-body);letter-spacing:2px;color:#bd9b60;text-shadow:0 1px #140d08}
.tv-king-protest{margin:7px 0;font:19px/1.25 var(--ng-body);text-wrap:balance;text-shadow:0 2px #21160e}.tv-king-protest:before{content:'“'}.tv-king-protest:after{content:'”'}
.tv-season-note{display:block;font:11px/1.4 var(--ng-body);color:#b29c79}
/* A single captured frame keeps the map, avatar and NPCs in the same CRT image. */
.tv-crt{position:absolute;inset:0;z-index:6;overflow:hidden;pointer-events:none;background:#020403}
.tv-crt-picture{display:block;width:100%;height:100%;image-rendering:pixelated;transform-origin:50% 50%}
.tv-crt-beam{position:absolute;left:0;right:0;top:calc(50% - 1px);height:2px;opacity:0;transform-origin:center;background:linear-gradient(90deg,transparent,#a9d8c7 9%,#fff4d5 45% 55%,#a9d8c7 91%,transparent);box-shadow:0 0 7px 2px #a2d6ba8c,0 0 19px #c1ead68c}
.tv-crt-dot{position:absolute;left:calc(50% - 3px);top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;opacity:0;background:#fff8df;box-shadow:0 0 8px 3px #d7f4d9aa,0 0 22px 7px #badfcd55}
.tv-crt:not([hidden]) .tv-crt-picture,.tv-crt:not([hidden]) .tv-crt-beam{will-change:transform,opacity}
.tv-is-off #actors,.tv-is-off .npc-source-layer,.tv-is-off .scene{visibility:hidden}.is-joining .tv-console{visibility:hidden}
@media(max-width:1220px){.tv-console{gap:8px;padding-inline:3px}.tv-speaker{width:32px}.tv-left-controls,.tv-right-controls{gap:8px}.tv-maker{gap:6px}.tv-maker b{font-size:16px;letter-spacing:1.5px}.tv-maker div>span{font-size:7px;letter-spacing:.8px}}
@media(max-height:780px){:root{--status-height:0px;--tv-top:12px;--tv-console:62px}.tv-console{padding-block:9px 7px}.tv-maker-crest{width:29px}.tv-maker-crest .ng-art{width:29px;height:26px}}
@media(max-height:780px){.tv-shutter{gap:11px;padding:12px}.tv-off-controls{gap:5px}.tv-off-controls>b{font-size:23px}.tv-off-crest .ng-art{width:34px;height:29px}.tv-shutter button{font-size:17px;padding:7px 21px}.tv-royal-notice{width:min(410px,100%);padding:14px 25px 12px}.tv-king-protest{font-size:17px;margin:5px 0}.tv-notice-byline{font-size:9px;letter-spacing:1.6px}}
@media(max-width:1120px) and (max-height:690px){.tv-maker-crest{display:none}.tv-maker b{font-size:15px}.tv-maker div>span{font-size:7px;letter-spacing:.4px}}
@media(prefers-reduced-motion:reduce){.tv-console button{transition:none}}
.reduce-motion .tv-console button{transition:none}
/* Transient game notices sit above the cabinet controls, including on short screens. */
#toast{bottom:calc((100vh - var(--hud-height) - var(--scene-width) * 9 / 16 - var(--tv-top) - var(--tv-console)) / 2 + var(--tv-console) + 14px);max-width:min(520px,calc(var(--scene-width) - 32px))}
@media(max-width:1120px) and (max-height:700px){.control-dossier .wheel-invite small{display:none}}