/* Interface composition v3: one frame per surface, parchment for decisions.
   Textures remain exact slices of the approved Night Guild artwork. */
:root{
  --hud-height:84px;--status-height:28px;--scene-gap:44px;--rail-space:480px;
  --scene-base-width:min(1280px,calc((100vh - var(--hud-height) - var(--status-height) - var(--scene-gap))*16/9),calc(100vw - var(--rail-space)));
  /* Add 15px above and below without stretching the 16:9 artwork.
     Retain frame clearance and usable side menus in smaller desktop windows. */
  --scene-width:min(calc(var(--scene-base-width) + 30px*16/9),calc((100vh - var(--hud-height) - var(--status-height) - 16px)*16/9),calc(100vw - 344px));
  --scene-inset:calc((100vw - var(--scene-width))/2);
  --ink:#49351f;--muted-ink:#755b38;--ui-gold:#dfc28b;--ui-muted:#b4bba4;
}
button,input{touch-action:manipulation}
button.ng-skinned:hover:not(:disabled){filter:brightness(1.12)}
button:focus-visible,input:focus-visible,summary:focus-visible,[role=option]:focus-visible{outline:2px solid #cce8c1;outline-offset:3px}
button:disabled{opacity:.54}
.hud{gap:18px;padding-inline:24px}
.hud .vitals{gap:7px}.hud .coins{margin-right:14px;min-width:106px}.hud .vital{width:110px}
.hud .vital-label>span{font-size:11px}.hud .vital-label b{font-size:16px}
.hud-right .round-clock{padding-left:16px;min-width:158px}.round-clock strong{font-size:26px}
.hud-profile .brand-name{font-size:13px;letter-spacing:1.1px;color:#ceb47d}
.hud .identity b{font-size:18px}.hud .identity small{font-size:12px;color:#bdc0a5}
main{background:radial-gradient(ellipse at 1% 22%,#b375282b,transparent 29%),radial-gradient(ellipse at 99% 78%,#ad6c2a25,transparent 30%),radial-gradient(ellipse at 50% 50%,#31413630,transparent 68%),linear-gradient(90deg,#111c18,#0d1716 31%,#0d1716 69%,#111c18)}
main:before{background:repeating-linear-gradient(90deg,transparent 0,transparent 47px,#ba9c4f09 48px,#0002 49px,transparent 50px);mask-image:linear-gradient(90deg,#000,transparent 26%,transparent 74%,#000)}
.stage-wrap{gap:6px}.stage{box-shadow:0 0 0 2px #94713d,0 0 0 5px #071210,0 0 0 6px #3d4938,0 18px 55px #0009}
.scene-rail{min-width:0;padding:18px 3px;gap:12px;align-self:stretch;justify-content:safe center}
.scene-rail>*{max-width:224px}.scene-rail-left .broadcast{padding:0 6px 8px;flex-wrap:nowrap;font-size:13px;letter-spacing:1px}.scene-rail-left .broadcast span{display:block;font-size:12px}
.run-dossier,.control-dossier{position:relative;isolation:isolate;padding:16px;background:#19251d;box-shadow:0 10px 24px #0004}
.dossier-heading{margin:1px 0 12px;text-align:center}.dossier-heading span{font-size:10px;letter-spacing:1.8px;color:#a3b093}.dossier-heading b{display:block;font:400 25px/1.05 var(--ng-title);margin-top:5px;color:#e7d1a0}
.rail-card{padding:0;background:none;box-shadow:none}.rail-card h3{font-size:23px;line-height:25px;margin:0 0 7px}.rail-card p{font-size:12px;line-height:17px}.rail-eyebrow{font-size:10px;letter-spacing:1.2px;line-height:15px}
.next-act{padding:12px;margin-bottom:16px;background:#dfc18d;color:var(--ink)}
.next-act .rail-eyebrow{font-size:9px;color:var(--muted-ink);letter-spacing:.8px}.next-act-clock{font-size:31px;line-height:34px;color:#533a20;margin:4px 0}.next-act-clock.clock-message{font-size:22px;line-height:25px}
.next-act p{font-size:12px;line-height:16px;color:#775a35;margin:0 0 4px}.next-act .rail-link{color:#584425;border-top:1px solid #83643540;font-size:12px;padding-top:7px;margin-top:7px}.next-act .rail-link span{color:#675129}.next-act .rail-link:hover:not(:disabled){background:#8e673a12;color:#49351f}
.rail-section-heading{display:flex;align-items:baseline;justify-content:space-between;gap:5px}.rail-section-heading h3{font-size:21px}.rail-section-heading small{font-size:8px;color:#a2ae94;letter-spacing:1px}
.rail-stat{font-size:13px;line-height:18px;gap:7px;padding:7px 0}.rail-stat .ng-art{width:20px}.rail-stat b{font:400 21px/22px var(--ng-title)}
.rail-link{font-size:13px;min-height:30px}.bag-summary{display:block;width:100%;text-align:left;padding:10px 0 0;margin:3px 0 0;background:none;border:0;border-top:1px solid #82734350;font:400 12px/16px var(--ng-body);text-shadow:none}.bag-summary small{font-size:11px;line-height:16px}.bag-summary:hover:not(:disabled){background:#9dbb8410}.bag-meter{height:5px;margin:7px 0}
.first-steps{border-top:1px solid #8b795b50;margin-top:15px;padding-top:12px}.first-steps>.rail-eyebrow{font-size:9px;margin-bottom:4px}.first-steps h3{font-size:22px;line-height:24px;margin-bottom:6px}.step-link{padding:7px 0;min-height:46px;gap:8px}.step-link b{font-size:13px;line-height:17px}.step-link small{font-size:11px;line-height:15px}.step-number{width:20px;height:23px;font-size:16px}.step-done{opacity:.7}.step-done:hover{opacity:1}
.control-dossier{padding:15px 14px}.menu-heading{padding:1px 7px 10px;font-size:10px;color:#b9a778;letter-spacing:1.8px}
.scene-rail .stage-tools{gap:6px;max-width:none}.scene-rail .stage-tools button{gap:9px;min-height:42px;padding:9px 12px}.scene-rail .stage-tools button .ng-art{width:24px;max-height:28px}.scene-rail .stage-tools button .tool-label,.scene-rail .stage-tools button [data-duel-label]{font-size:15px}
.stage-tools button kbd{margin-left:auto;flex:none;font:10px/17px var(--ng-body);min-width:18px;height:18px;text-align:center;color:#bbaa87;border:1px solid #8e754c58;background:#151c1440;box-shadow:0 1px #161509}.stage-tools button[aria-pressed=true] kbd{color:#143a38;background:#e9ffe226;border-color:#19444055}.scene-rail .stage-tools .personal-start{margin-top:10px}
.set-board{padding:12px;margin-top:16px;background:#dec18c;color:var(--ink)}.set-board .rail-eyebrow{font-size:9px;color:#765735}.set-count{margin:7px 0 9px;gap:9px}.set-count>strong{color:#593c20;font-size:29px;line-height:30px}.set-count>span{font-size:13px;color:#584329}.set-count small{font-size:11px;line-height:15px;color:#7a603b}
.market-pulse{padding-top:9px;border-color:#82643840}.market-pulse>span{font-size:12px;color:#6a4f2d}.market-pulse b{color:#4b361e}.set-board .rail-link{font-size:12px;color:#5c4829}.set-board .rail-link span{color:#6a5634}.set-board .rail-link:hover:not(:disabled){background:#8a623b10;color:#49351f}.wheel-invite{padding:10px;margin-top:7px;gap:7px}.wheel-invite>.ng-art{width:27px}.wheel-invite>span:not(.ng-art):not(.ng-skin){font-size:13px;line-height:17px}.wheel-invite small{font-size:10px;line-height:15px;color:#c1bd9d}.rail-signature{margin-top:1px;font-size:17px;line-height:20px;padding-top:1px}.rail-signature small{font-size:8px;letter-spacing:1px}
/* Natural window height; Market uses the full guide/duel envelope on every tab. */
#panel{--panel-available-height:calc(100vh - var(--hud-height) - var(--status-height) - 32px);width:570px;right:var(--scene-inset);top:calc(var(--hud-height) + 16px);bottom:auto;height:auto;max-height:var(--panel-available-height);padding:10px;box-shadow:0 16px 52px #000a,0 0 0 1px #9b794348}
#panel[data-view=market]{height:var(--panel-available-height)}
#panel[data-view=market] .panel-body{flex:1;overflow-y:auto;scrollbar-gutter:stable}
#panel[data-view=inventory],#panel[data-view=equipment]{width:600px}
.panel-head{height:58px;min-height:58px;padding:10px 15px}.panel-title{gap:10px}.panel h2{font:400 28px/1.1 var(--ng-title);letter-spacing:0}.panel .close{height:33px;width:33px;min-height:33px;font-size:24px}.panel-body{padding:16px;flex:0 1 auto;min-height:0}.panel-body>*:last-child{margin-bottom:0}
.npc-intro{gap:14px;margin-bottom:14px;padding-bottom:13px}.npc-portrait{width:76px;height:76px}.npc-speech h3{font:400 26px/1.05 var(--ng-title);margin-bottom:7px}.npc-speech p{font-size:14px;line-height:19px;max-width:360px}
.panel-body>h3{font:400 23px/1.1 var(--ng-title);margin:17px 0 10px;color:#e6d3a9}.gather-hero{padding:12px 14px}.gather-hero p{font-size:14px}.panel[data-kind=gather] .actions-row button{min-height:44px}.chance{padding:9px 4px}.chance .ng-art{width:25px;max-height:26px}.chance+.subtle{font-size:12px;line-height:17px;margin-top:12px}
.journal-intro{border-bottom:1px solid #7d805b44;padding-bottom:13px;margin-bottom:18px}.journal-intro h3{font:400 28px var(--ng-title);margin:5px 0 7px}.journal-intro p{font-size:13px;line-height:18px;margin:0}.timeline{margin-left:6px;padding-left:18px;border-color:#7b7e504d}.event{padding:0 0 15px;margin-bottom:16px;border-bottom:1px solid #8a906528}.event:before{left:-22px;top:4px;width:6px;height:6px;background:#b5b780;box-shadow:0 0 0 3px #273624}.event small{font-size:11px;color:#c2ad7b;margin-bottom:5px}.event p{font-size:14px;line-height:20px}.event:last-child{margin-bottom:0;padding-bottom:2px;border:0}
.empty-state{padding:24px 22px}.empty-state h3{font:400 28px/1.05 var(--ng-title);margin:8px 0}.empty-state p{font-size:14px;line-height:20px;max-width:330px;margin:0 auto}.empty-state .large-icon{font-size:34px;color:#bdad7d}
.confirm-dialog{padding:25px}.confirm-dialog .actions-row button{min-height:42px}.confirm-dialog h2{font-size:29px}#toast{padding:13px 19px;font-size:14px;line-height:19px;max-width:520px}
/* The first visit shows the world before asking for a profession. */
.join-shade{background:#08120fa3;padding:20px;overflow:auto}.join-card{width:min(1000px,calc(100vw - 72px));grid-template-columns:1.08fr 1fr;padding:12px;max-height:100%;overflow:auto}
.welcome-story{padding:22px 24px 20px;border-right:1px solid #a28c5740;background:linear-gradient(150deg,#30432860,#12201820)}
.welcome-topline{margin-bottom:16px}.welcome-topline .eyebrow{font-size:10px;letter-spacing:1.2px}.live-ticket{font-size:9px;letter-spacing:.6px}
.welcome-village{height:172px;position:relative;overflow:hidden;isolation:isolate;border:1px solid #9f804a;box-shadow:0 0 0 3px #09170f,0 4px 12px #0004;background:#243b2b url('/assets/village-living-plate.png') center/cover no-repeat;image-rendering:pixelated;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:15px;margin-bottom:18px}
.welcome-village:before{content:'';position:absolute;inset:0;background:linear-gradient(transparent 12%,#091b1260 45%,#08140ee8);z-index:-1}.welcome-village>span{font:400 31px/1 var(--ng-title);letter-spacing:1px;color:#ffe0a0;text-shadow:0 2px #122410}.welcome-village>i{font:400 12px/17px var(--ng-body);color:#dbdec4;margin-top:3px}
.welcome-crown{height:49px;margin:0 0 10px}.welcome-crown .ng-art{width:57px}.welcome-crown:before{left:calc(50% - 57px);top:15px}.welcome-crown:after{left:calc(50% + 50px);top:29px}
.join-card h1{font-size:36px;line-height:1.02;letter-spacing:0;margin:0 0 10px}.join-card .welcome-lead{font-size:14px;line-height:19px;margin:0 0 14px;color:#bdc7ad}.show-facts{padding:10px 0}.show-facts b{font-size:28px;line-height:28px}.show-facts span{font-size:11px;letter-spacing:0}.welcome-loop{margin:15px 0 12px;font-size:12px;gap:5px}.welcome-loop .ng-art{width:23px}.join-card .welcome-fine{font-size:11px;line-height:16px;color:#a5b39b;margin:0}
.welcome-registration{padding:24px}.welcome-registration>.eyebrow{font-size:10px;letter-spacing:1.4px}.welcome-registration h2{font-size:29px;line-height:31px;margin:7px 0 22px}.join-card label{font-size:13px;line-height:17px;color:#d5c8ac;margin-bottom:14px}.join-card input{font-size:17px;min-height:44px;padding:10px 12px;margin-top:7px}.join-card .guild-select{min-height:64px;padding:12px 14px;margin-top:7px}.choice-copy b{font-size:16px}.choice-copy small{font-size:12px}.guild-select[aria-expanded=true]{outline-color:#c4dca6}.join-card .join-note{font-size:12px;line-height:17px;min-height:52px;padding:9px 11px;margin:3px 0 11px}.join-card .profession-lock{font-size:11px;line-height:16px;margin:0 0 14px;color:#b9ae8b}.join-card .gold{min-height:47px;font-size:17px;padding:12px 15px}.local-disclaimer{font-size:11px;margin-top:12px;line-height:16px}.local-disclaimer span{font-size:9px}.welcome-hud-note{font-size:14px;color:#d7bd86;letter-spacing:.8px}
.profession-preview{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:center;gap:8px;flex:1;min-width:0}.profession-preview>span{display:flex;justify-content:center;align-items:center;min-width:0}.profession-preview .choice-icon{width:30px;height:30px;max-width:100%;max-height:30px}
@media(min-width:1700px){:root{--rail-space:530px}.scene-rail>*{max-width:238px}.run-dossier,.control-dossier{padding:18px}.scene-rail{padding-inline:20px}}
@media(max-width:1350px){:root{--rail-space:412px}.hud{gap:12px;padding-inline:18px}.hud .vital{width:98px}.hud .coins{min-width:88px;margin-right:10px}.hud-right{gap:10px}.hud-right .round-clock{min-width:133px;padding-left:10px}.round-clock strong{font-size:24px}.hud .identity b{font-size:17px}.hud .identity small{font-size:11px}.scene-rail{padding-inline:3px}.run-dossier,.control-dossier{padding:13px}.rail-stat{font-size:12px;gap:6px}.rail-section-heading small{font-size:7px}.step-link{gap:6px}.step-link small{font-size:10px}.scene-rail .stage-tools button{padding-inline:10px;gap:7px}.scene-rail .stage-tools button .tool-label,.scene-rail .stage-tools button [data-duel-label]{font-size:14px}.stage-tools button kbd{min-width:15px}.set-board{padding:11px}.set-count small{font-size:10px}#panel{width:530px}#panel[data-view=inventory],#panel[data-view=equipment]{width:560px}}
@media(max-width:1120px){:root{--rail-space:372px}.hud{gap:8px;padding-inline:14px}.hud .vital{width:88px}.hud .vitals{gap:5px}.hud .coins{min-width:80px;margin-right:8px}.hud .vital-label>span{font-size:10px}.hud .vital-label b{font-size:14px}.hud-profile{gap:7px}.hud-profile .brand-name{font-size:11px}.hud .identity b{font-size:16px}.hud .identity small{font-size:10px}.hud-right{gap:7px}.hud-right .round-clock{min-width:119px;padding-left:8px}.round-clock strong{font-size:21px}.music-controls{min-width:73px;width:73px}.scene-rail{padding-inline:3px}.scene-rail-left .broadcast{font-size:12px;padding-inline:2px}.scene-rail-left .broadcast span{font-size:10px}.run-dossier,.control-dossier{padding:12px}.dossier-heading b{font-size:22px}.dossier-heading span{font-size:8px;letter-spacing:1.1px}.next-act{padding:10px}.next-act-clock{font-size:27px;line-height:29px}.next-act p{font-size:11px;line-height:15px}.next-act .rail-eyebrow{font-size:8px;letter-spacing:.5px}.rail-section-heading h3{font-size:20px}.rail-section-heading small{display:none}.rail-stat{font-size:12px;gap:5px}.rail-stat .ng-art{width:17px}.rail-stat b{font-size:19px}.step-link b{font-size:12px}.step-link small{display:none}.step-link{min-height:35px;padding:6px 0}.step-number{width:18px;height:20px}.first-steps h3{font-size:20px;line-height:22px}.scene-rail .stage-tools button .ng-art{width:21px}.scene-rail .stage-tools button{gap:7px;padding-inline:9px}.stage-tools button kbd{display:inline-block}.menu-heading{font-size:9px;letter-spacing:1.2px;padding-inline:2px}.set-board{padding:10px}.set-count{gap:6px}.set-count>span{font-size:12px}.set-count small{font-size:10px}.wheel-invite{gap:5px;padding:9px}.wheel-invite>span:not(.ng-art):not(.ng-skin){font-size:12px}.wheel-invite>.ng-art{width:22px}.wheel-invite small{font-size:9px}.rail-signature small{font-size:7px;letter-spacing:.7px}#panel{width:490px}#panel[data-view=inventory],#panel[data-view=equipment]{width:520px}.panel-body{padding:13px}.welcome-story,.welcome-registration{padding-inline:21px}}
@media(max-height:780px){.dossier-heading b{display:none}.dossier-heading span{font-size:9px;line-height:14px}.run-dossier .dossier-heading{margin-bottom:10px}:root{--hud-height:76px;--status-height:26px;--scene-gap:32px}.scene-rail{padding-block:12px;gap:9px}.dossier-heading{margin:0 0 10px}.dossier-heading b{font-size:23px}.next-act{margin-bottom:12px;padding:11px}.next-act-clock{font-size:28px;line-height:30px}.rail-stat{padding-block:5px}.first-steps{margin-top:11px;padding-top:10px}.step-link{min-height:38px;padding-block:5px}.step-link small{font-size:10px;line-height:13px}.bag-summary{padding-top:8px}.scene-rail .stage-tools button{min-height:39px;padding-block:8px}.set-board{margin-top:12px}.rail-signature{display:none}#panel{--panel-available-height:calc(100vh - var(--hud-height) - var(--status-height) - 24px);top:calc(var(--hud-height) + 12px);max-height:var(--panel-available-height)}.panel-head{height:53px;min-height:53px}.panel-body{padding:14px}.join-shade{padding:14px}.welcome-story,.welcome-registration{padding:18px 23px}.welcome-topline{margin-bottom:12px}.welcome-village{height:132px;margin-bottom:14px;padding-bottom:12px}.welcome-village>span{font-size:28px}.welcome-crown{height:40px;margin-bottom:7px}.welcome-crown .ng-art{width:46px}.join-card h1{font-size:33px}.join-card .welcome-lead{font-size:13px;line-height:18px;margin-bottom:11px}.show-facts{padding:8px 0}.show-facts b{font-size:26px;line-height:27px}.welcome-loop{margin:13px 0 10px}.welcome-registration h2{font-size:27px;line-height:29px;margin-bottom:15px}.join-card label{margin-bottom:11px}.join-card input{min-height:40px;padding-block:8px}.join-card .guild-select{min-height:59px;padding-block:10px}.join-card .join-note{min-height:48px;padding-block:7px;margin-bottom:9px}.join-card .profession-lock{margin-bottom:11px}.join-card .gold{min-height:43px;padding-block:10px}.local-disclaimer{margin-top:10px}}
@media(max-height:700px){.scene-rail{padding-block:10px;gap:7px}.scene-rail-left .broadcast{padding-bottom:5px}.dossier-heading{margin-bottom:8px}.dossier-heading span{font-size:8px}.dossier-heading b{font-size:20px;margin-top:3px}.next-act{padding:9px 11px;margin-bottom:10px}.next-act-clock{font-size:25px;line-height:27px;margin:3px 0}.next-act p{font-size:11px;line-height:14px}.next-act .rail-link{margin-top:5px;padding-top:4px;min-height:24px}.rail-stat{padding-block:4px}.rail-stat b{font-size:19px}.rail-link{min-height:25px;padding-block:3px}.bag-summary small{display:none}.bag-summary{padding-top:6px}.first-steps{padding-top:8px;margin-top:9px}.first-steps h3{font-size:20px;line-height:22px;margin-bottom:4px}.step-link{min-height:30px;padding-block:4px}.step-link small{display:none}.step-number{height:20px;width:18px}.scene-rail .stage-tools{gap:5px}.scene-rail .stage-tools button{min-height:36px;padding-block:7px}.scene-rail .stage-tools .personal-start{margin-top:6px}.menu-heading{padding-bottom:8px}.set-board{padding:10px;margin-top:10px}.set-count{margin-block:5px 7px}.market-pulse{padding-top:6px}.wheel-invite{margin-top:5px;padding-block:8px}.join-shade{padding:9px}.join-card{padding:10px}.welcome-story,.welcome-registration{padding:16px 21px}.welcome-village{height:108px;margin-bottom:12px}.welcome-topline{margin-bottom:10px}.welcome-village>i{display:none}.welcome-crown{height:36px;margin-bottom:5px}.welcome-crown .ng-art{width:41px}.welcome-village>span{font-size:26px}.join-card h1{font-size:30px;margin-bottom:9px}.welcome-loop{margin:11px 0 9px}.join-card .welcome-fine{font-size:10px;line-height:14px}.welcome-registration h2{font-size:25px;line-height:27px;margin-bottom:12px}.join-card label{font-size:12px;margin-bottom:9px}.join-card input{min-height:36px;padding-block:6px;margin-top:5px}.join-card .guild-select{min-height:53px;padding-block:8px;margin-top:5px}.join-card .join-note{font-size:11px;line-height:15px;min-height:43px;padding:7px 9px;margin-bottom:7px}.join-card .profession-lock{font-size:10px;line-height:14px;margin-bottom:9px}.local-disclaimer{margin-top:8px;font-size:10px}.join-card .gold{min-height:39px;padding-block:8px}.panel-body{padding:12px}}
@media(max-height:650px){.run-dossier .dossier-heading{display:none}}
@media(prefers-reduced-motion:reduce){.join-card,.welcome-crown .ng-art,.welcome-crown:before,.welcome-crown:after,.broadcast i,.live-ticket i{animation:none}}
.reduce-motion .join-card,.reduce-motion .welcome-crown .ng-art,.reduce-motion .welcome-crown:before,.reduce-motion .welcome-crown:after,.reduce-motion .broadcast i,.reduce-motion .live-ticket i{animation:none}

/* Compact five-block HUD: identity | coins, vitals, music | shared run clock. */
.hud-cluster{grid-column:2;justify-self:center;display:flex;align-items:center;gap:12px;min-width:0}
.hud .vitals{gap:6px;grid-column:auto}
.hud .coins,.hud .vital,.hud .music-controls{height:48px;padding:6px 10px}
.hud .coins{min-width:92px;margin-right:10px}
.hud .coins b{font-size:21px;line-height:22px}.hud .coins small{font-size:9px;line-height:11px}
.hud .coins .coin-art{width:19px}
.hud .vital{width:94px}.hud .vital-label{padding-left:21px;margin-bottom:3px}
.hud .vital-label>span{font-size:10px;line-height:10px}.hud .vital-label b{font-size:14px;line-height:14px}
.hud .vital-label .ng-art{width:17px;top:4px}.hud .meter{height:4px}
.hud .music-controls{width:86px;min-width:86px;gap:0;padding:5px 9px}
.hud .music-controls button{height:23px;min-height:23px;font-size:12px;padding:3px 0}
.hud .music-controls input{width:58px;height:13px;min-height:13px}
.hud-right .round-clock{border-left:0;padding-left:0}
.is-joining .hud-cluster .music-controls{display:none}
/* The left frame determines both boundaries; On Air remains above it. */
.scene-rail-right{justify-content:flex-start;padding-top:0}
.control-dossier{margin-top:var(--dossier-offset,40px);height:var(--dossier-height,auto);display:flex;flex-direction:column;min-height:0}
.control-dossier .stage-tools{flex:none}.control-dossier .set-board{margin-top:auto}
.control-dossier .menu-heading{flex:none}
.scene-rail-right .rail-signature{display:none}
.stage-tools button.guide-unread{box-shadow:0 0 0 1px #d5b76f,0 0 15px #d1a64455;animation:guide-beacon 2.6s ease-in-out infinite}
.stage-tools button.guide-unread .tool-label{color:#ffe1a0}
.stage-tools button.guide-unread:after{content:'';width:5px;height:5px;flex:none;background:#f8d47b;box-shadow:0 0 7px #f5c461;order:1;margin-left:1px}
@keyframes guide-beacon{0%,100%{box-shadow:0 0 0 1px #b29558,0 0 9px #d1a64430}50%{box-shadow:0 0 0 1px #ffe4a0,0 0 17px #d1a64470}}
@media(max-width:1120px){.hud-cluster{gap:10px}.hud .coins{min-width:76px;margin-right:8px}.hud .vital{width:80px}.hud .coins,.hud .vital{padding-inline:8px}.hud .vital-label{padding-left:18px}.hud .vital-label .ng-art{width:15px}.hud .vital-label .subtle{font-size:10px}.hud .music-controls{width:70px;min-width:70px;padding-inline:7px}.hud .music-controls input{width:48px}}
@media(prefers-reduced-motion:reduce){.stage-tools button.guide-unread{animation:none}}
.reduce-motion .stage-tools button.guide-unread{animation:none}
@media(max-height:650px){
  .control-dossier .menu-heading{display:none}
  .control-dossier .stage-tools button{min-height:35px;padding-block:6px}
  .control-dossier .wheel-invite{padding-block:6px}
}

.rail-link kbd{font:10px/16px var(--ng-body);padding:0 3px;border:1px solid currentColor;border-radius:1px;opacity:.75}

/* The server season sits beside the clock; the central HUD keeps its axis. */
.season-label{flex:none;text-align:left;padding-right:13px;border-right:1px solid #b9985b55;white-space:nowrap}
.season-label[hidden]{display:none}
.season-label>span{display:block;font:10px/14px var(--ng-body);letter-spacing:.7px;text-transform:uppercase;color:#cbb58c}
.season-label>b{display:block;font:400 21px/25px var(--ng-title);color:#ecd5a5}
@media(max-width:1350px){.season-label{padding-right:8px}.season-label>span{font-size:9px;letter-spacing:.4px}.season-label>b{font-size:19px;line-height:23px}}
@media(max-width:1180px){.season-label{padding-right:6px}.season-label>span{font-size:8px;letter-spacing:.3px}.season-label>b{font-size:17px;line-height:21px}}

/* Keep every control inside the matching wooden frame as the menu grows. */
.control-scroll{display:flex;flex-direction:column;flex:1;min-height:0;overflow:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#8b7548 #19251d;padding:2px 3px}
.control-scroll>*{flex-shrink:0}
.control-scroll .set-board{margin-top:10px}
/* Let the main buttons use the rail's spare height, instead of leaving a void
   below the guide controls. The short-screen minimum still fits small laptops. */
.run-dossier,.control-dossier{padding-top:18px}
.run-dossier{min-height:min(720px,calc(100dvh - var(--hud-height) - 66px));display:flex;flex-direction:column}
.run-dossier>.rail-card{flex-shrink:0}
.run-dossier #personal-board{flex:1;display:flex;flex-direction:column}
.run-dossier #personal-board .rail-stat{flex:1}
.control-scroll{padding-top:0}
.control-scroll .stage-tools{flex:1 0 auto}
.control-scroll .stage-tools button{flex:1 0 0;max-height:64px}
.control-scroll .stage-tools .personal-start{margin-top:4px}
@media(max-height:780px){
 .control-scroll .stage-tools{gap:4px}
 .control-scroll .stage-tools button{min-height:29px;padding-block:4px;flex-basis:auto}
 .control-scroll .stage-tools button .ng-art{width:20px;max-height:23px}
 .control-scroll .stage-tools .personal-start{margin-top:4px}
 .control-scroll .journey-controls{padding-block:6px}
 .control-scroll .journey-controls button{padding:5px 3px;font-size:12px}
 .control-scroll .set-count{margin-block:3px}
 .control-scroll .set-count>strong{font-size:23px;line-height:25px}
 .control-scroll .set-board{padding:9px;margin-top:0}
 .control-scroll .market-pulse{padding-top:4px}
 .control-scroll .wheel-invite{padding:6px;margin-top:4px}
 .control-scroll .wheel-invite small{display:none}
}