/* v110: charcoal surfaces, clear type hierarchy and restrained brass accents. */
:root{--ui-surface:#101820;--ui-edge:#d2b47638;--ui-text:#eee9de;--ui-muted:#a5afb6}
.overlay{background:linear-gradient(145deg,#081018f2,#0e1721ed);color:var(--ui-text)}
.overlay .eyebrow{color:#cbb17c;letter-spacing:.16em;font-size:12px}
.overlay h2{font-weight:600;letter-spacing:-.02em;color:#f1eadc}
.overlay button{border-radius:5px;transition:background .18s,border-color .18s,box-shadow .18s}
.overlay .primary{background:linear-gradient(135deg,#ead5a6,#bd9458);color:#201a12;border:1px solid #ead5a6;box-shadow:0 4px 16px #0005;font-weight:650;min-height:44px}
.overlay .primary:hover:not(:disabled){background:linear-gradient(135deg,#f3e2bb,#d0a96b);box-shadow:0 4px 22px #ba94582b}
.overlay .primary:disabled{opacity:.5;box-shadow:none}
.overlay .secondary{background:#16212bbf;border:1px solid #a7b8c33d;color:#d7dfe1;box-shadow:none;min-height:44px}
.overlay button:focus-visible{outline:2px solid #e4c78f;outline-offset:3px}
.start-screen:not(.lobby-screen){width:min(620px,92%);padding:24px;border:1px solid var(--ui-edge);border-radius:8px;background:linear-gradient(145deg,#18222bf2,#0c131bea);box-shadow:0 20px 70px #0007;max-height:calc(100% - 24px);overflow:auto}
.start-screen:not(.lobby-screen) p{display:block;color:#b9c3c8;line-height:1.6;font-size:14px;margin:12px 0 20px}
.start-screen:not(.lobby-screen) h2{font-size:clamp(19px,2vw,27px);margin:10px 0}
.start-screen:not(.lobby-screen) .primary{padding:10px 24px}
.guide-scroll{padding-right:8px;scrollbar-width:thin}.guide-scroll section{border-bottom:1px solid #b7a47725;padding-bottom:12px;margin-bottom:14px}.guide-scroll h3{color:#dbc598;font-size:16px}
.choice-screen,.shop-screen,.library-screen{padding:20px;color:var(--ui-text);scrollbar-width:thin;overscroll-behavior:contain}
.choice,.shop-card,.library-skill,.relic-vault-card{border:1px solid #8395a332;background:linear-gradient(150deg,#1c2832df,#101922f2);border-radius:7px;box-shadow:0 3px 10px #0003}
.choice:hover:not(:disabled),.shop-card:hover:not(:disabled),.library-skill:hover:not(:disabled),.relic-vault-card:hover:not(:disabled){background:linear-gradient(150deg,#293946,#18232de8);border-color:#c9b37f88}
.choice.reward-selected{border-color:#e4c78f;box-shadow:inset 0 0 0 1px #e4c78f55,0 5px 18px #0005;background:linear-gradient(150deg,#303329,#151f28)}
.choice>b,.shop-card>b,.library-skill>b,.relic-vault-card b{font-weight:650;letter-spacing:-.02em}
.choice small,.shop-card small,.library-skill p,.relic-vault-card p{line-height:1.55;color:#bcc7ce}
.library-top,.shop-head{padding-bottom:14px;border-bottom:1px solid var(--ui-edge);margin-bottom:16px}
.library-top h2,.shop-head h2{margin:3px 0 7px}.library-top p,.shop-head p{color:var(--ui-muted);line-height:1.5}
.active-section>h3,.passive-section>h3,.relic-loadout>h3{font-size:16px;color:#deca9f;letter-spacing:.02em}
.relic-slot{border-radius:6px;background:#0d1720;border-color:#8395a335}.relic-slot.filled{background:#1c2931}.relic-vault-card.active{border-color:#b8c99a88;box-shadow:inset 0 0 0 1px #b8c99a22}
.reward-controls{background:#101923f5;border-top:1px solid var(--ui-edge);box-shadow:0 -8px 22px #08101880;border-radius:6px;padding:10px;gap:12px}
.shop-wallet{border:1px solid #c7aa7133;border-radius:6px;background:#bd94580b;padding:10px 16px}.shop-route{border-radius:6px;background:#14222e;border-color:#8395a330}.shop-card.sold{opacity:.5;filter:saturate(.45)}
.side-tabs button{border-radius:4px 4px 0 0}.side-tabs .selected{background:#c9ad7914;border-bottom:2px solid #c9ad79}.side-panel .aside-heading{color:#dac49a}
#toast{font-size:14px;line-height:1.45;background:#0c141eea;border:1px solid #b89d6844;border-radius:6px;padding:9px 15px;box-shadow:0 5px 22px #0006;max-width:min(620px,90%);overflow-wrap:anywhere;white-space:normal}
#tutorialHint{border-radius:7px;border-color:#bca77866;background:linear-gradient(135deg,#192631b8,#101a24b8);box-shadow:0 6px 25px #0005}#tutorialHint small{letter-spacing:.06em}#tutorialHint h3{color:#ebd6ac}
.overlay.lobby-overlay{padding:0;background:#091018}
.lobby-screen{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 280px;align-items:center;gap:42px;width:100%;height:100%;padding:clamp(24px,5vw,70px);overflow:auto;background:#091018}
.lobby-backdrop,.lobby-shade{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.lobby-backdrop{object-fit:cover;object-position:58% 50%;filter:saturate(.65) brightness(.68)}
.lobby-shade{background:linear-gradient(90deg,#08111aeb 0,#0910196b 55%,#091019e6),linear-gradient(0deg,#080e16c9,transparent 50%)}
.lobby-brand{min-width:0}.lobby-kicker{display:inline-block;padding:0 0 12px;border-bottom:1px solid #d3b17770;font-size:14px;color:#d0b682;letter-spacing:.4em}
.lobby-brand h1{font:700 clamp(40px,5.6vw,82px)/.92 Cinzel,Georgia,serif;letter-spacing:.035em;color:#f4e6c8;text-shadow:0 3px 30px #000b;margin:23px 0 22px;background:none;-webkit-text-fill-color:initial}
.lobby-brand p{font-size:15px;line-height:1.7;color:#b9c5cb;margin:0;letter-spacing:.025em}
.lobby-menu{display:flex;flex-direction:column;gap:10px;margin:0;padding:22px 0 22px 24px;border-left:1px solid #d0b2784d;min-width:0}
.lobby-menu button{width:100%;padding:13px 18px;text-align:left;font-size:15px;min-height:48px;margin:0;border-radius:5px}
.lobby-menu .lobby-start{font-size:18px;letter-spacing:.03em;margin-bottom:8px;min-height:58px}
.lobby-menu .lobby-records{border:0;border-top:1px solid #bec8ca2b;border-radius:0;color:#aebec7;background:transparent;margin-top:7px;font-size:13px;box-shadow:none}
.lobby-menu .lobby-records:hover{color:#ead8af;background:#d0b2780a}
.lobby-mobile-note{font-size:12px;line-height:1.4;color:#a6b5bc;padding:0 3px}.lobby-mobile-note[hidden]{display:none}
.lobby-menu #tutorialReplay{display:block;margin:0;min-height:48px;padding:13px 18px}
@media (max-width:800px){.choice-screen,.shop-screen,.library-screen{padding:12px}.start-screen:not(.lobby-screen){padding:18px}.lobby-screen{grid-template-columns:1fr;gap:24px;padding:30px 26px;align-content:center}.lobby-brand h1{font-size:54px}.lobby-menu{width:100%;max-width:380px;border-left:0;border-top:1px solid #d0b2784d;padding:18px 0 0}.lobby-brand p{font-size:14px}.choice small,.shop-card small,.library-skill p,.relic-vault-card p{font-size:12px}.reward-controls{padding:7px;gap:8px}}
@media (max-height:500px){.lobby-screen{grid-template-columns:minmax(0,1fr) minmax(210px,260px);gap:28px;padding:18px 30px;align-content:center}.lobby-brand h1{font-size:clamp(34px,6vw,52px);margin:14px 0}.lobby-kicker{font-size:12px;padding-bottom:8px}.lobby-brand p{font-size:13px;line-height:1.5}.lobby-menu{border-left:1px solid #d0b2784d;border-top:0;padding:0 0 0 20px;gap:7px}.lobby-menu button,.lobby-menu #tutorialReplay{min-height:40px;padding:8px 13px;font-size:14px}.lobby-menu .lobby-start{min-height:46px;font-size:16px;margin-bottom:3px}.lobby-menu .lobby-records{margin-top:3px;min-height:32px;font-size:12px}.lobby-mobile-note{font-size:11px}.start-screen:not(.lobby-screen){padding:15px;max-height:calc(100% - 16px)}.start-screen:not(.lobby-screen) p{font-size:13px;margin:8px 0 14px}.start-screen:not(.lobby-screen) h2{font-size:19px}.choice-screen,.shop-screen,.library-screen{padding:10px}.library-top,.shop-head{padding-bottom:8px;margin-bottom:10px}.reward-controls{padding:5px}}
@media (max-width:560px) and (max-height:500px){.lobby-screen{grid-template-columns:minmax(0,1fr) minmax(170px,210px);gap:18px;padding:16px}.lobby-menu{padding-left:14px}.lobby-brand h1{font-size:36px}.lobby-brand p{font-size:12px}}
@media (prefers-reduced-motion:reduce){.overlay button{transition:none}}
/* Match permanent HUD and equipment controls to the modal surfaces. */
.workspace{border-color:#8395a333}.loadout{border-color:#8395a333;background:linear-gradient(180deg,#111c24,#0e161d)}
header nav button{border-radius:5px;color:#b9c5cc}header nav button:hover{background:#d0b2780d;color:#ead8af}
#inspector{background:linear-gradient(160deg,#17212a,#101920);border-left-color:#8395a333}.progress>div.current{background:#d0b2780a;border-color:#b99a5d66}.progress>div.current>span{color:#dcc18e}
.weapon,.skill,.specials>button{border-radius:5px;background:linear-gradient(150deg,#1b2730,#111a22);border-color:#8395a335}.weapon.active{border-color:#c7aa7188;box-shadow:inset 0 -2px #c8ac69}.skill:not(.locked):hover{border-color:#d5ba82;box-shadow:0 3px 12px #0004}.specials>button small{color:#aebcc4}
.mobile-tools button,.touch-actions button{border-radius:7px;background:linear-gradient(145deg,#22313cbb,#101d27dd);border-color:#b7c6ce55}.touch-actions button.pressed{background:#384737dc;border-color:#e2c997}.touch-actions .touch-basic button{box-shadow:0 3px 12px #0005}
.pause-tools{gap:10px}.pause-tools button{flex:1;min-height:44px}

/* Tutorial-only desktop layout keeps instructions above the practice area. */
body[data-tutorial-platform="pc"] #tutorialHint{max-width:640px;max-height:140px;padding:10px 18px;text-align:left;transform:translateX(-50%)}
body[data-tutorial-platform="pc"] #tutorialHint h3{font-size:18px}
body[data-tutorial-platform="pc"] #tutorialHint p{font-size:15px;line-height:1.5}
body[data-tutorial-platform="pc"] #tutorialExit{transform:none;min-height:40px;padding:8px 16px}
body.tutorial-active[data-tutorial-platform="pc"] .overlay{padding-top:150px;padding-bottom:12px}
body.tutorial-active[data-tutorial-platform="pc"] .choice-screen,body.tutorial-active[data-tutorial-platform="pc"] .library-screen,body.tutorial-active[data-tutorial-platform="pc"] .start-screen{max-height:100%;overflow:auto}
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 .hud .vitals{position:relative;transform:translateY(-45px)}
 .mobile-route{top:76px;height:32px}
}
@media (pointer:coarse) and (orientation:landscape),(max-width:800px) and (orientation:landscape),(max-width:1000px) and (max-height:500px){
 .hud .vitals{transform:translateY(-32px);left:env(safe-area-inset-left)}
 .mobile-route{top:0}
}
.comic-mobile-landscape .prologue-panel{display:grid;grid-template-columns:var(--comic-art-width) minmax(0,1fr);align-items:center}
.comic-mobile-landscape .prologue-panel[hidden]{display:none!important}
.comic-mobile-landscape .prologue-panel figcaption{font-size:14px;line-height:1.5;padding:10px 12px;min-height:0;overflow-wrap:normal;word-break:keep-all;border-left:2px solid #ccb87e}
.comic-mobile-landscape .prologue-number{right:auto;left:10px}

#endingComic #nextCycle[hidden]{display:inline-block;visibility:hidden}

.comic-mobile-landscape .prologue-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 10px;align-items:center}
.comic-mobile-landscape .prologue-footer p{margin:0;font-size:12px}
.comic-mobile-landscape .prologue-footer button{margin:0;min-height:38px;padding:6px 14px}
.comic-mobile-landscape .comic-landscape-note,.comic-mobile-landscape .asset-progress-track{grid-column:1/-1}

/* Keep the build header flush with its scrolling window, with no exposed strip. */
.library-screen{padding-top:0}
.library-screen .library-top{top:0;margin-top:0;background:#112026;z-index:3}
.library-screen .library-top h2 small{display:inline-block;white-space:nowrap}

/* Stat labels and their values each remain on one line. */
#panel3{overflow-x:auto}
#panel3 dl{grid-template-columns:max-content minmax(max-content,1fr);column-gap:12px}
#panel3 dt,#panel3 dd{white-space:nowrap}
#panel3 dd{text-align:right}

/* Mobile combat HUD: the radar belongs to vitals, not the toolbar. */
.hud .vitals #mobileRadar{display:none}
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 .hud .vitals #mobileRadar{display:block;position:static;width:102px;height:40px;margin-top:6px;opacity:.72;pointer-events:none;background:transparent}
 .hud .vitals #mobileRadar[hidden]{display:none}
 #toast{top:57%;bottom:auto;font-size:12px;line-height:1.4;max-width:min(72vw,320px);padding:3px 6px;background:transparent;border:0;box-shadow:none;backdrop-filter:none;text-shadow:0 1px 3px #000,0 0 5px #000;transform:translate(-50%,-50%)}
 #bossHUD{top:calc(env(safe-area-inset-top) + 82px);left:28%;right:28%;font-size:11px;line-height:1.3;pointer-events:none;text-shadow:0 1px 3px #000;background:transparent}
 #bossHUD>div{height:5px;margin-top:4px}
 .mobile-route{top:98px;right:auto;width:min(210px,55vw);height:auto;gap:3px;background:transparent;text-shadow:0 1px 3px #000}
 #combatBuff{top:calc(env(safe-area-inset-top) + 141px);left:calc(env(safe-area-inset-left) + 9px);max-width:min(250px,60%);font-size:11px;line-height:1.4;background:transparent}
 #mechanicHint{top:calc(env(safe-area-inset-top) + 173px);bottom:auto;left:calc(env(safe-area-inset-left) + 9px);max-width:min(280px,65%);font-size:12px;line-height:1.4;padding:2px 0;background:transparent;border:0;text-shadow:0 1px 3px #000,0 0 5px #000}
 #tutorialHint{background:rgba(12,22,30,.28);box-shadow:none;border-color:#bca77833}
}
@media (pointer:coarse) and (orientation:landscape),(max-width:800px) and (orientation:landscape),(max-width:1000px) and (max-height:500px){
 .hud .vitals #mobileRadar{width:84px;height:34px}
 .hud .wave-label{transform:translateY(-32px)}
 #bossHUD{top:calc(env(safe-area-inset-top) + 42px);left:29%;right:29%}
 .mobile-route{top:0;width:auto;right:205px}
 #combatBuff{top:calc(env(safe-area-inset-top) + 96px);max-width:160px}
 #mechanicHint{top:calc(env(safe-area-inset-top) + 126px);max-width:min(300px,48%)}
}

/* Mobile notices are distinct from persistent combat labels. */
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 #toast{font-family:'Cinzel','Noto Sans KR',sans-serif;font-size:13px;font-weight:700;letter-spacing:.055em;color:#ffe5a8;text-shadow:0 2px 3px #000,0 0 7px #000;line-height:1.45}
 .hud .wave-label{position:relative;top:8px}
 #bossHUD{top:calc(env(safe-area-inset-top) + 98px)}
}
@media (pointer:coarse) and (orientation:landscape),(max-width:800px) and (orientation:landscape),(max-width:1000px) and (max-height:500px){
 .hud .wave-label{top:0;transform:translateY(0)}
 #bossHUD{top:calc(env(safe-area-inset-top) + 86px)}
}

/* Desktop contain gutters keep the sanctuary material without cropping play. */
@media (pointer:fine) and (min-width:801px){
 .game-wrap{background-color:#091319;background-image:linear-gradient(#07111955,#07111955),url('letterbox-stone-v124.webp');background-size:auto,512px 512px;background-position:center}
 #game{background:transparent}
}

/* PC HUD follows the actual 16:9 image, never its letterbox container. */
.game-wrap{--hud-safe-left:env(safe-area-inset-left,0px);--hud-safe-right:env(safe-area-inset-right,0px);--hud-safe-top:env(safe-area-inset-top,0px);--hud-safe-bottom:env(safe-area-inset-bottom,0px)}
.combat-hud-desktop .hud{top:calc(var(--play-top,0px) + 14px);left:calc(var(--play-left,0px) + 16px);right:calc(var(--play-right,0px) + 16px);height:126px;display:block;gap:0}
.combat-hud-desktop .hud .vitals{position:absolute;left:0;top:0;width:clamp(140px,calc(var(--play-width,1280px) * .22),210px)}
.combat-hud-desktop .player-title{gap:8px}.combat-hud-desktop .player-title b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.combat-hud-desktop .player-title>span{flex-shrink:0}
.combat-hud-desktop .hud .run-stats{position:absolute;right:0;top:0;width:142px;line-height:1.45;text-align:right}
.combat-hud-desktop .hud .run-stats b{font-size:20px;line-height:1.25}
.combat-hud-desktop .hud .wave-label{position:absolute;right:0;top:80px;margin:0;text-align:right;transform:none;max-width:220px}
.combat-hud-desktop .hud .wave-label span{font:600 13px 'Noto Sans KR',sans-serif;letter-spacing:.06em}
.combat-hud-desktop .hud .wave-label b{display:block!important;font-size:12px;line-height:1.4;margin-top:3px}
.combat-hud-desktop #bossHUD{top:calc(var(--play-top,0px) + 14px);left:calc(var(--play-left,0px) + var(--play-width,1280px) * .33);right:calc(var(--play-right,0px) + var(--play-width,1280px) * .33);width:auto;transform:none;font-size:12px;line-height:1.5;pointer-events:none;text-shadow:0 2px 4px #000}
.combat-hud-desktop #bossHUD>div{height:6px;margin-top:6px}
.combat-hud-desktop #combatBuff{top:calc(var(--play-top,0px) + 90px);left:calc(var(--play-left,0px) + 16px);max-width:calc(var(--play-width,1280px) * .3);font-size:12px;line-height:1.5}
.combat-hud-desktop #mechanicHint{top:auto;bottom:calc(var(--play-bottom,0px) + 16px);left:calc(var(--play-left,0px) + 16px);max-width:calc(var(--play-width,1280px) * .6);font-size:12px;line-height:1.5;padding:0;background:transparent;border:0}
.combat-hud-desktop #toast{top:calc(var(--play-top,0px) + var(--play-height,720px) * .5);left:calc(var(--play-left,0px) + var(--play-width,1280px) * .5);bottom:auto;max-width:calc(var(--play-width,1280px) - 40px);transform:translate(-50%,-50%)}
.combat-hud-desktop .zone-stamp{left:calc(var(--play-left,0px) + 16px);bottom:calc(var(--play-bottom,0px) + 16px)}
#comboHUD{position:absolute;z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:flex-end;line-height:1;text-shadow:0 2px 4px #000,0 0 8px #000;color:#d9e5c5}
#comboHUD[hidden]{display:none!important}
#comboHUD strong{font:italic 34px Georgia,serif}
#comboHUD span{font:600 10px 'Noto Sans KR',sans-serif;letter-spacing:.09em;margin-top:4px}
#comboHUD.combo-hot{color:#f5d083}
.combat-hud-desktop #comboHUD{right:calc(var(--play-right,0px) + 16px);top:calc(var(--play-top,0px) + 142px)}
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 #comboHUD{right:calc(env(safe-area-inset-right) + 12px);top:calc(env(safe-area-inset-top) + 110px);max-width:120px}
 #comboHUD{width:80px;height:48px}#comboHUD strong{font-size:27px}#comboHUD span{font-size:9px;letter-spacing:.025em}
}
@media (pointer:coarse) and (orientation:landscape),(max-width:800px) and (orientation:landscape),(max-width:1000px) and (max-height:500px){
 #comboHUD{top:calc(env(safe-area-inset-top) + 104px);right:calc(env(safe-area-inset-right) + 12px)}
}

/* Compact, translucent PC notices leave the battle visible. */
.combat-hud-desktop #toast{font-size:12px;line-height:1.45;padding:6px 11px;max-width:min(380px,calc(var(--play-width,1280px) - 40px));white-space:normal;background:rgba(8,17,23,.30);border:1px solid #bca77833;border-radius:4px;box-shadow:none;backdrop-filter:none;text-shadow:0 1px 3px #000,0 0 5px #000}
/* Only active relic names and artwork, in the formerly empty passive row. */
#equippedRelics{display:none}
.loadout .section-label{font-family:'Noto Sans KR',sans-serif;font-size:11px;font-weight:500;line-height:1.4;letter-spacing:.02em;color:#a5afb6}
.loadout .weapons>.section-label kbd{font:500 10px 'Noto Sans KR',sans-serif;padding:1px 4px;min-width:0;line-height:1.3;margin-left:4px}
.equipped-relic-list{display:flex;flex:1;min-width:0;align-items:center;justify-content:center;gap:clamp(8px,1vw,18px);overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.relic-heading{flex:0 0 auto;white-space:nowrap;margin:0}
.equipped-relic-empty{font:500 11px 'Noto Sans KR',sans-serif;color:#849390;margin:auto;white-space:nowrap}
@media (pointer:fine) and (min-width:801px){
 #equippedRelics:not([hidden]){display:flex;flex:1;min-width:0;justify-content:flex-start;align-items:center;gap:12px;margin:0 20px;padding:3px 12px;border-left:1px solid #bca77826;border-right:1px solid #bca77826}
 .equipped-relic{display:flex;align-items:center;gap:7px;min-width:0;max-width:140px;color:#c9c9b9}
 .equipped-relic .painted-icon{display:block;flex:0 0 24px;width:24px;height:26px;object-fit:contain}
 .equipped-relic>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:1.4}
 .specials{min-width:0}.specials .basic-keys{margin-left:auto;flex-shrink:0}
}
@media (pointer:fine) and (min-width:801px) and (max-width:1200px){
 #equippedRelics:not([hidden]){margin:0 10px;padding:3px 8px;gap:8px;justify-content:flex-start}
 .equipped-relic-list{justify-content:flex-start;gap:8px}
 .equipped-relic{flex:0 0 105px;max-width:105px}.equipped-relic .painted-icon{width:20px;height:22px;flex-basis:20px}.equipped-relic>span{font-size:10px}
}

/* Local calligraphy face for the English combo badge and numerals only. */
@font-face{font-family:'Ashen Flourish';src:url('fonts/ashen-flourish.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
#comboHUD strong{font:400 38px 'Ashen Flourish',Georgia,serif}
#comboHUD span{font:400 14px 'Ashen Flourish',Georgia,serif;letter-spacing:.04em;margin-top:3px}
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 #comboHUD{width:100px;height:58px}#comboHUD strong{font-size:30px}#comboHUD span{font-size:12px;letter-spacing:.025em}
}

/* Moderately tighter information windows, retaining readable text and touch targets. */
.start-screen:not(.lobby-screen){width:min(540px,calc(100% - 24px));min-height:0;padding:18px 22px}
.start-screen:not(.lobby-screen) .eyebrow{margin-bottom:8px}
.start-screen:not(.lobby-screen) h2{font-size:clamp(19px,2vw,24px);margin:6px 0 8px}
.start-screen:not(.lobby-screen) p{margin:8px 0 14px;line-height:1.5}
.start-screen:not(.lobby-screen) .primary{min-height:44px;padding:8px 20px;margin-top:4px}
.start-screen:not(.lobby-screen) .pause-tools{gap:8px;margin-top:10px}
.pause-tools button{padding:8px 14px}
.start-screen .help-grid{gap:8px;margin:12px 0}
.guide-scroll section{padding:8px 0 10px;margin-bottom:8px}
.start-screen.guide-screen .guide-scroll p{margin:5px 0 8px;line-height:1.6}
.tutorial-decisions{gap:10px;margin:14px 0 8px}
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 .start-screen:not(.lobby-screen){width:min(480px,calc(100% - 20px));padding:14px 18px;max-height:calc(100% - 16px)}
 .start-screen:not(.lobby-screen) h2{font-size:20px}
 .start-screen:not(.lobby-screen) p{margin:7px 0 12px}
 .start-screen .help-grid{gap:7px;margin:10px 0}
}

/* Notices sit below combat focus on both platforms. Existing compact style stays. */
.combat-hud-desktop #toast{top:calc(var(--play-top,0px) + var(--play-height,720px) * .76)}
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 #toast{top:76%;max-width:min(56vw,380px)}
 .touch-basic{position:relative;left:-6px;top:calc(-5px - var(--basic-extra-lift,0px));align-items:center!important}
 .touch-basic #touchAttack,.touch-basic #touchDodge{position:relative;top:-15px}
}

/* Active class duration has a restrained class-colored edge, not cooldown shade. */
#classArt.class-active,#touchClass.class-active{opacity:1;border-color:var(--class-active-color);background:linear-gradient(145deg,#293a37,#15252c);box-shadow:inset 0 0 0 1px #ffffff12}
#classArt.class-active small,#touchClass.class-active small{color:var(--class-active-color);font-weight:700}
#touchClass.class-active .touch-art{filter:brightness(1.15)}

/* Mobile choice footer: only the buttons cover the scrolling cards. */
@media (pointer:coarse),(max-width:800px),(max-width:1000px) and (max-height:500px){
 .game-wrap:not(.combat-hud-desktop) #bossHUD{top:calc(env(safe-area-inset-top) + 78px)}
 .reward-controls{background:none;border:0;box-shadow:none;backdrop-filter:none;pointer-events:none}
 .reward-controls button{pointer-events:auto;background:rgba(18,31,40,.65)}
 .reward-controls .primary{background:linear-gradient(135deg,rgba(223,199,142,.74),rgba(184,142,86,.74));border-color:rgba(236,214,161,.68);box-shadow:none}
}
@media (pointer:coarse) and (orientation:landscape),(max-width:800px) and (orientation:landscape),(max-width:1000px) and (max-height:500px){
 .game-wrap:not(.combat-hud-desktop) #bossHUD{top:calc(env(safe-area-inset-top) + 66px)}
}