/* Moon Guild: shared materials for every screen; no web fonts or bitmap UI. */
.hero-power-wrap .hero-power-btn.mode-heal .hp-icon{color:#a9eac4}.hero-power-wrap .hero-power-btn.mode-shot .hp-icon{color:#f6c58a}
@media(min-width:901px){:root #screenGame{--hero-side-width:176px}:root #screenGame .hero-zone .hero-power-wrap{width:176px;flex-shrink:0}:root #screenGame .hero-zone .hero-power-btn{flex-shrink:0}}
@media(min-width:901px) and (max-height:1000px){:root #screenGame{--hero-side-width:140px}:root #screenGame .hero-zone .hero-power-wrap{width:140px}}
:root{--bg-deep:#080d1c;--bg-room:#10182d;--wood:#1a2540;--wood-mid:#25334c;--wood-light:#c5b58e;--cream:#eee7d7;--cream-dark:#c7bda7;--accent:#b9a375;--accent-bright:#e6d7b4;--moon-muted:#a3aec3;--moon-line:#c9b78b38;--font-display:Georgia,"Palatino Linotype",serif;--glow-gold:0 0 24px #e1d0a92b}
body{background:#080d1c;color:var(--cream)}
.bg-layer{background:linear-gradient(90deg,#050a1726,#050a170a),url('assets/ui/moon-guild.webp') center top/cover no-repeat!important}
button:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid #eadab2;outline-offset:4px}
.panel,.overlay-content,.settings-panel,.reward-panel,.overlay-card{background:linear-gradient(145deg,#18233bf5,#0b1225f7)!important;border:1px solid var(--moon-line)!important;color:var(--cream)!important;box-shadow:0 28px 80px #0009,inset 0 1px #f4e5bc16!important;backdrop-filter:blur(18px);border-radius:20px}
.panel-title,.overlay-card h2{font-family:var(--font-display);font-weight:400;letter-spacing:.015em;color:#f1e7ce}
.panel-sub,.howto-hint{color:#b7bfd0;line-height:1.6}
.menu-btn,.menu-btn-secondary,.shop-buy,.quest-claim-btn{background:linear-gradient(145deg,#24314d,#131d34)!important;color:#e9dfc7!important;border:1px solid #c4af7b50!important;box-shadow:0 3px 12px #0003!important;border-radius:9px;transition:background .18s,border-color .18s,transform .18s}
.menu-btn:hover,.menu-btn-secondary:hover,.shop-buy:hover:not(:disabled),.quest-claim-btn:hover:not(:disabled){background:linear-gradient(145deg,#34425d,#1d2b46)!important;border-color:#ddc795a3!important}
.menu-btn-primary,.restart-btn,#tutorialCoach .tutorial-next{background:linear-gradient(130deg,#f0e7ce,#d8c59b)!important;color:#182138!important;border:1px solid #fbefcc!important;box-shadow:0 5px 24px #0004!important;border-radius:9px}
.menu-btn-primary:hover,.restart-btn:hover,#tutorialCoach .tutorial-next:hover{filter:brightness(1.07)}
.panel-back,.settings-gear-btn,.lang-toggle-btn,.btn-icon{background:#111b30b8!important;border:1px solid var(--moon-line)!important;color:#dfcfaa!important}
input,select,textarea,.message-input{color:#e8e2d4!important;background:#0a1325!important;border-color:#bda77c4d!important;accent-color:#d9c598}
.howto-card,.tut-card,.challenge-card,.history-card,.achievement-card,.skill-node,.deck-slot,.pack-buy-row,.iap-section,.shop-card,.skill-branch,.deck-col{border-color:var(--moon-line)!important;background-color:#111c32c7!important;color:#e8e3d7}
.skill-node.can{border-color:#d6bf8e!important;box-shadow:0 0 18px #d6bf8e1c}
.skill-node.unlocked,.achievement-card.unlocked{background:#29413780!important;border-color:#81ae9a66!important}
.campaign-node{background:linear-gradient(145deg,#26344f,#101a30)!important;border-color:#bda77c5c!important;color:#e8dfc9}
.campaign-node.current{border-color:#eddbac!important;box-shadow:0 0 22px #e7d0a12b!important}
.campaign-node.cleared{background:linear-gradient(145deg,#3b4c53,#172e38)!important}
.deck-row{background:#19253b;border-color:#c2b08722;color:#e8dfcd}
.deck-row:hover{background:#26354d}
.deck-filter,.campaign-diff-btn,.history-filter-row select{background:#0d172b;color:#e3dbc8;border-color:#c6b2824a}
.campaign-progress-fill,.quest-progress-fill{background:linear-gradient(90deg,#9e8a63,#e1d1a9)!important}
.overlay{background:#040916b8;backdrop-filter:blur(8px)}
.overlay-card p{color:#bcc6d7;font-weight:450;opacity:1}
.overlay-result .result-emoji{color:#e3d1a7;animation:none}
.message-input-label{color:#c8bd9f}
.game-toast{background:linear-gradient(145deg,#26334df7,#10192ff7)!important;border-color:#c9b78b70!important;color:#e8ddc4!important;box-shadow:0 12px 36px #0008!important}
.quest-claimable-badge{background:#dfcda6;color:#1c2336;animation:none;box-shadow:0 0 14px #d8c39526}
.campaign-map,.collection-grid,.deck-pool,.deck-list,.panel,.game-log{scrollbar-width:thin;scrollbar-color:#a79570 #10192e}
#btnPendingReward.hidden{display:none!important}
#screenShop #shopGold{position:sticky;top:0;z-index:12;display:block;width:fit-content;max-width:100%;margin:12px 0;padding:11px 18px;background:#111c32f5;border:1px solid #c9b78b66;border-radius:10px;box-shadow:0 5px 16px #0005;color:#f0e2bd;font-size:17px;font-weight:650;backdrop-filter:blur(12px)}
#packGold{color:#e8d4a8;font-size:17px;font-weight:650}
.ach-card,.challenge-entry,.deck-themes,.setting-row,.iap-card,.lb-row{background:#152139c2;border-color:#c9b78b33;color:#e7dfcd}
.ach-card.unlocked{background:linear-gradient(145deg,#41475b80,#18243ae0);border-color:#c9b78b66;box-shadow:0 0 16px #c9b78b12}
.ach-toast{background:linear-gradient(145deg,#26334df7,#10192ff7);border-color:#c9b78b70;box-shadow:0 12px 36px #0008}
.deck-header-actions .menu-btn-secondary,.deck-header-actions .menu-btn-secondary:hover{background:linear-gradient(145deg,#26334d,#152139)!important;color:#e9dfc7!important;border-color:#c9b78b66!important;text-shadow:none}
.setting-row input:checked+.toggle{background:linear-gradient(90deg,#8c7d5e,#c5b58e)}
.setting-row input:checked+.toggle::after{background:#f0e8d3}
.setting-row input:focus-visible+.toggle{outline:2px solid #eadab2;outline-offset:4px}
.lb-tab.active{background:#c9b78b1a;color:#e8d9b6;border-color:#c9b78b88}
.chip.active,.diff-chip.active{background:linear-gradient(135deg,#655c48,#36394a);border-color:#c9b78b88;color:#f0e6ce}
.iap-title,.iap-price,.quest-reward{color:#ddcba0}
.quest-card-icon,.ach-icon,.sk-icon{color:#cbb991}
.quest-card.can-claim{box-shadow:0 0 14px #d8c39516;border-color:#cbb99188!important}
.quest-card-title{font-weight:650;color:#f0e6cf}
.quest-card-desc{color:#b9c0cf;line-height:1.5}
.quest-card-meta{font-weight:550}
.quest-progress{color:#b7c8db}
.quest-claim-btn{font-weight:600}
#screenMenu #btnOpenQuests .icon-wrap{color:#d4c197}
/* Main menu follows the selected composition: a quiet left side, art on the right. */
#screenMenu.active{display:block!important;padding:0!important;overflow:auto;isolation:isolate}
#screenMenu::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,#040917b8,transparent 65%),linear-gradient(0deg,#050b1ac2,transparent 26%)}
#screenMenu .menu-shell{position:relative;width:100%!important;max-width:none!important;min-height:100dvh;margin:0;padding:clamp(26px,4vw,70px)!important;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;backdrop-filter:none!important;display:flex;flex-direction:column;text-align:left}
.moon-menu-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
#screenMenu .menu-logo-wrap{display:block;padding:0;margin:0;text-align:left}
#screenMenu .menu-title{font:400 clamp(42px,5.4vw,88px)/1 var(--font-display);font-variant:small-caps;letter-spacing:-.055em;color:#efe2bf;margin:0;background:none;-webkit-text-fill-color:currentColor;text-shadow:0 3px 24px #0008}
#screenMenu .menu-tagline{display:block;margin:16px 0 0 5px;padding-top:12px;border-top:1px solid #d5c19766;letter-spacing:.38em;font-size:clamp(9px,.8vw,13px);color:#d8cbaa;opacity:1}
.moon-tools{display:flex;align-items:center;gap:14px}
#screenMenu .menu-top-right-btns{position:static;display:flex;gap:8px}
.moon-quest-toggle{cursor: var(--cursor-action, pointer);display:flex;gap:18px;align-items:center;padding:13px 22px;border:1px solid #c8b17e73;background:#0b1226cc;color:#e9dcb9;font:400 15px var(--font-display);letter-spacing:.08em;border-radius:4px}
.moon-star{font-size:22px;color:#d2bd8e}
.moon-menu-body{display:grid;grid-template-columns:110px minmax(250px,390px);gap:clamp(25px,4vw,75px);align-items:start;margin-top:clamp(62px,10vh,120px);margin-bottom:60px}
.moon-rail{display:flex;flex-direction:column;gap:10px;border-right:1px solid #d9c3964d;padding-right:24px;position:relative}
#screenMenu .moon-rail .menu-btn{display:flex;flex-direction:column;gap:7px;min-height:72px;width:100%;padding:8px 0!important;background:transparent!important;border:0!important;box-shadow:none!important;text-align:center;border-radius:6px}
#screenMenu .moon-rail .menu-btn:hover{background:#e1c9950c!important;transform:none}
#screenMenu .moon-rail .menu-btn-text{font:400 11px var(--font-display);text-align:center!important;letter-spacing:.07em;text-transform:uppercase}
#screenMenu .moon-rail .menu-btn-icon{font-size:28px;color:#d6c398;width:auto}
#screenMenu .moon-rail .menu-btn-sub{display:none}
.moon-progress{position:relative;font-size:11px;color:#baac90;text-align:center}
.moon-progress summary{cursor: var(--cursor-action, pointer);padding:14px 0}
.moon-progress>div{position:absolute;left:100%;bottom:0;z-index:10;padding:10px;width:210px;border:1px solid var(--moon-line);background:#0c1629fa;border-radius:10px;box-shadow:0 10px 25px #0008}
#screenMenu .moon-progress>div .menu-btn{flex-direction:row;text-align:left;min-height:48px;padding:10px!important;font-size:12px!important}
.moon-play{text-align:center;min-width:0}
.moon-eyebrow{color:#c7b992;font-size:10px;letter-spacing:.17em;text-transform:uppercase;margin:0 0 18px;line-height:1.6}
#screenMenu .moon-play>#btnCampaign{display:flex;align-items:center;justify-content:center;width:100%;min-height:95px;padding:18px!important;background:linear-gradient(125deg,#f3ead1,#dcc79c)!important;border:1px solid #faf0d2!important;box-shadow:0 5px 30px #0005,inset 0 0 0 4px #bea67780!important;border-radius:3px;color:#111b31!important}
#screenMenu .moon-play>#btnCampaign .menu-btn-text{font:400 clamp(28px,3vw,45px) var(--font-display);text-transform:uppercase;letter-spacing:.09em;text-align:center!important}
#screenMenu .moon-play>#btnCampaign .menu-btn-icon{display:none}
.moon-secondary{display:flex;flex-direction:column;gap:0;margin-top:22px}
#screenMenu .moon-secondary .menu-btn{display:flex;align-items:center;justify-content:center;gap:12px;grid-column:auto!important;grid-row:auto!important;width:100%;min-height:62px;padding:12px!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0}
#screenMenu .moon-secondary .menu-btn-text{font:400 20px var(--font-display);text-transform:uppercase;letter-spacing:.08em;text-align:center!important}
#screenMenu .moon-secondary .menu-btn-icon{display:none}
#screenMenu .moon-secondary .menu-btn:first-child{border-bottom:1px solid #d5c09833!important}
#screenMenu .moon-secondary .menu-btn:hover{color:#fff4d4!important;transform:none;text-shadow:0 0 24px #d9c39380}
#screenMenu .moon-secondary #btnCampaign,#screenMenu .moon-secondary #btnTutorial{background:none!important;min-height:62px;border:0!important;color:#e8ddc4!important}
#screenMenu .moon-secondary #btnCampaign{border-bottom:1px solid #d5c09833!important}
#screenMenu .moon-play>#btnCampaign{height:100px}
#screenMenu .moon-menu-bottom .menu-footer{flex-direction:row!important;align-items:center;padding:0;letter-spacing:0}
#screenMenu .menu-extra{position:relative;border:0;background:none;border-top:1px solid #d5c09833;border-radius:0;margin:2px 0 12px}
#screenMenu .menu-extra>summary{font:400 12px var(--font);letter-spacing:.05em;color:#b2b6c3;padding:18px;cursor:pointer}
#screenMenu .menu-extra-grid{position:absolute;left:0;bottom:100%;width:100%;z-index:15;display:grid;grid-template-columns:1fr;padding:10px;gap:7px;background:#0e182bf7;border:1px solid var(--moon-line);border-radius:10px;box-shadow:0 14px 35px #0009;max-height:min(340px,55dvh);overflow:auto}
#screenMenu .menu-extra-grid .menu-btn{width:100%;min-height:45px;padding:10px 14px!important;flex-direction:row;justify-content:flex-start;gap:12px}
#screenMenu .menu-extra-grid .menu-btn-text{font:500 13px var(--font)}
#screenMenu .menu-extra-grid .menu-btn-icon{color:#c8b68d;font-size:19px}
#screenMenu .menu-extra-grid #btnRanked{color:#e9dfc7!important;border-color:#c4af7b50!important}
#screenMenu #btnMenuReward:not(.hidden){width:100%;font-size:12px!important;padding:12px}
.moon-menu-bottom{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:20px}
#screenMenu .menu-footer{margin:0;gap:18px;color:#c0b59d;font-size:11px}
#screenMenu .menu-footer>span{padding:0;background:none;color:#c9bb98;font-weight:500}
#screenMenu #btnExit{width:auto;min-height:32px;padding:6px 9px;background:none!important;border:0!important;box-shadow:none!important;opacity:.7;font-size:11px!important}
#screenMenu #btnExit .menu-btn-icon{font-size:17px}
/* Quest drawer stays outside menu layout; native modal supports touch and keyboard. */
#questDrawer{position:fixed;inset:20px 20px 20px auto;margin:0;padding:0;width:min(390px,calc(100vw - 32px));height:calc(100dvh - 40px);max-height:none;max-width:none;border:1px solid #c6b48b66;border-radius:16px;background:#0d172bf7;color:#e8dfca;box-shadow:0 20px 80px #0009;overflow:hidden}
#questDrawer::backdrop{background:#02071799;backdrop-filter:blur(5px)}
#screenMenu #questDrawer .quest-panel{position:static;display:flex;flex-direction:column;width:100%;height:100%;max-height:none!important;min-height:0;padding:24px;margin:0!important;background:transparent;border:0;border-radius:0;backdrop-filter:none;box-shadow:none}
#screenMenu #questDrawer .quest-panel-head{gap:10px;margin-bottom:18px}
#screenMenu #questDrawer .quest-panel-title{font:400 24px var(--font-display);color:#e7d8b5}
.moon-close{margin-left:auto;order:3;border:1px solid #c6b48b38;background:#d4bc8a0d;color:#e5d6b6;width:34px;height:34px;border-radius:8px;font-size:23px;cursor: var(--cursor-action, pointer);flex-shrink:0}
#screenMenu #questDrawer .quest-list{max-height:none;scrollbar-color:#9e8e6b #10182b}
#screenMenu #questDrawer .quest-list::-webkit-scrollbar-thumb{background:#a2916b}
.quest-item,.quest-card{background:#d4bd8c08!important;border-color:#c1ac7a2e!important}
/* Battle uses the same hall and navy enamel, with a legible pale moon sigil. */
#screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{background:linear-gradient(150deg,#152039e8,#080f23ef 55%,#19243be6)!important;border-color:#c5b18452;box-shadow:0 20px 70px #0009,inset 0 1px #f5e4b720;backdrop-filter:blur(12px)}
#screenGame .arena-surface{background:radial-gradient(ellipse at 48% 50%,#68789428,transparent 68%),repeating-linear-gradient(140deg,#e9dab302 0 1px,transparent 1px 9px),linear-gradient(135deg,#293951d9,#1b2942e6 65%,#36415acc)!important;border-color:#c9b78e66;box-shadow:inset 0 0 0 6px #d2bd8908,inset 0 0 65px #060f2390,0 10px 25px #0005}
#screenGame .arena-surface::before{border-color:#d8c79d24}
#screenGame .arena-surface::after{width:156px;height:156px;opacity:.22;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23e6d6ad' stroke-width='1'%3E%3Cpath d='M79 10A49 49 0 1 0 100 85 43 43 0 0 1 79 10Z'/%3E%3Cpath d='m53 65-3-18 14 9h13l14-9-3 18c8 28-43 28-35 0ZM64 68h2m11 0h2m-11 9 4 3 4-3M25 24v12m-6-6h12M102 35v10m-5-5h10'/%3E%3C/svg%3E") center/contain no-repeat}
#screenGame .logo{font-family:var(--font-display);font-weight:400;letter-spacing:.08em;color:#e8dab8}
#screenGame .logo-mark,#screenGame .battle-log-mark{color:#d4c197}
#screenGame .turn-info,#screenGame .battle-info{background:#0d162bc9;border-color:#c6b18533;color:#d6c7a6}
#screenGame #turnLabel.player-turn{color:#f0e2bc!important;text-shadow:0 0 14px #d4c28a66}
#screenGame .hero-zone #playerHero,#screenGame .hero-zone #enemyHero{background:linear-gradient(160deg,#3f4a65,#10192f 78%)!important;border-color:#c3b0829c!important}
#screenGame .hero-zone .hero-avatar-image{border-color:#cbb991;box-shadow:0 0 0 2px #121a2d,0 3px 12px #0007}
#screenGame .hero-portrait.hero-turn-active{box-shadow:0 0 0 2px #e2c99778,0 0 24px #cdb78559,inset 0 0 18px #e4d1a31a!important;border-color:#efdbac!important}
#screenGame #playerHero.hero-turn-active:not(.targetable):not(.battle-attack-target),#screenGame #enemyHero.hero-turn-active:not(.targetable):not(.battle-attack-target){box-shadow:0 0 0 2px #e2c99778,0 0 24px #cdb78559,0 7px 18px #0007!important;border-color:#efdbac!important}
#screenGame .hero-turn-active .hero-avatar-image{border-color:#efdbac}
#screenGame .hero-zone .hero-power-btn,#screenGame .mana-bar{background:linear-gradient(145deg,#25334f,#0e192e)!important;border-color:#c4b08066;color:#ddd0b1}
#screenGame #endTurnBtn{background:linear-gradient(140deg,#f0e7cd,#cfbb91)!important;color:#1a2237!important;border-color:#f1e4c5;box-shadow:0 4px 15px #0005,0 0 18px #c2ab7326}
#screenGame #endTurnBtn:disabled{background:#253149!important;color:#91a0b6!important;border-color:#71809b33;box-shadow:none}
#screenGame .deck-stack .card-back{background:url('assets/ui/card-back.svg?v=1.14.0') center/100% 100% no-repeat!important;border:0!important;border-radius:5px}
#screenGame .deck-stack .card-back::before,#screenGame .deck-stack .card-back::after{display:none}
#screenGame #turnBanner{background:linear-gradient(145deg,#26334cf7,#10192ff7)!important;border-color:#d9c69b!important;color:#efe4c8;box-shadow:0 12px 35px #0008,0 0 30px #d9c69b20!important}
#screenGame #turnBanner .turn-banner-text{font-family:var(--font-display);font-weight:400;letter-spacing:.06em}
#screenGame .battle-log{background:#0d172bf2;border-color:#c7b38640;color:#e4dbc8}
#screenGame .log-event.turn .log-event-icon{color:#dbc89e;background:#dbc89e13}
#screenGame .log-event.play .log-event-icon{color:#b3c4e1;background:#b3c4e113}
#screenGame #battleLogCount{background:#c6b18515;color:#c5b48e}
.weather-badge{color:#c8c5d3;border-color:#c6b18533}
#tutorialCoach .tutorial-coach-bubble{background:linear-gradient(145deg,#202d46fc,#0c162afa)!important;border-color:#d2bf8c88!important;color:#e9dfc9!important;box-shadow:0 18px 65px #0009,0 0 32px #d2bf8c16!important}
#tutorialCoach .tutorial-step-label,#tutorialCoach .tutorial-coach-icon{color:#ddcda5!important}
#tutorialSpotlight,.tutorial-extra-spotlight{border-color:#f0ddb0!important;box-shadow:0 0 22px #d6c09166,inset 0 0 14px #d6c09111!important}
.card.card-illustrated,.card.card-illustrated.rarity-divine{background:#121b30!important;box-shadow:0 7px 15px #0009,0 0 0 1px #8e8164!important}
.card.card-illustrated.rarity-divine{box-shadow:0 7px 18px #0009,0 0 17px #e9d9a880!important}
.card.card-illustrated .card-name,.card.card-illustrated.rarity-divine .card-name{color:#22263a!important;text-shadow:0 1px #f8efd7!important}
.card.card-illustrated .card-desc,.card.card-illustrated .card-kw-line{color:#242b3b!important;font-weight:650!important}
.card.card-illustrated .card-cost,.card.card-illustrated .stat,.card.card-illustrated .spell-amount-badge{border-color:#d8c8a4!important}
.card.card-illustrated.can-play,.card.card-illustrated.can-attack{outline-color:#bcd8cd}
.card.card-illustrated.attacker{outline-color:#f0d9a5;box-shadow:0 0 20px #dcc48a80,0 12px 24px #0008!important}
@media(max-width:900px){#screenMenu .menu-shell{padding:26px!important}.moon-menu-body{grid-template-columns:90px minmax(240px,330px);gap:28px;margin-top:70px}.moon-tools{gap:8px}.moon-quest-toggle{padding:10px 13px;font-size:13px}.moon-star{display:none}#screenMenu .menu-title{font-size:55px}.moon-rail{padding-right:16px}}
@media(max-width:640px){#screenMenu::before{background:linear-gradient(90deg,#040917e0,#04091773),linear-gradient(0deg,#050b1ae6,transparent)}#screenMenu .menu-shell{padding:22px 18px!important}.moon-menu-header{gap:14px;flex-wrap:wrap}#screenMenu .menu-title{font-size:49px}#screenMenu .menu-tagline{font-size:9px;letter-spacing:.27em;margin-top:11px}.moon-tools{width:100%;justify-content:space-between;margin-top:14px}.moon-menu-body{grid-template-columns:68px minmax(0,1fr);gap:20px;margin:40px 0}.moon-rail{padding-right:12px;gap:6px}#screenMenu .moon-rail .menu-btn-text{font-size:9px;letter-spacing:0}#screenMenu .moon-rail .menu-btn-icon{font-size:24px}#screenMenu .moon-rail .menu-btn{min-height:65px}.moon-eyebrow{font-size:8px;letter-spacing:.07em}#screenMenu .moon-play>#btnCampaign{min-height:76px}#screenMenu .moon-play>#btnCampaign .menu-btn-text{font-size:28px}#screenMenu .moon-secondary .menu-btn-text{font-size:16px}#screenMenu .moon-secondary .menu-btn{min-height:57px}.moon-menu-bottom{gap:12px}#screenMenu .menu-footer{font-size:10px;gap:9px}.moon-progress>div{left:calc(100% + 12px);width:200px}#questDrawer{inset:12px 12px 12px auto;height:calc(100dvh - 24px)}#screenMenu #questDrawer .quest-panel{padding:18px}}
@media(prefers-reduced-motion:reduce){.menu-btn,.menu-btn-secondary{transition:none!important}}

/* Readable cards: larger rows, a modest hero footprint and no overlap at full capacity. */
#screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{min-height:920px;height:max(100%,920px)!important;grid-template-rows:minmax(48px,auto) 88px minmax(196px,1fr) 36px minmax(196px,1fr) 88px minmax(206px,1.05fr)}
#screenGame.active .game-wrapper.with-tutorial-info{min-height:988px;height:max(100%,988px)!important;grid-template-rows:minmax(48px,auto) 68px 88px minmax(196px,1fr) 36px minmax(196px,1fr) 88px minmax(206px,1.05fr)}
#screenGame .hero-zone{grid-template-rows:88px}
#screenGame .hero-zone #playerHero,#screenGame .hero-zone #enemyHero{width:96px;max-width:96px;height:86px;grid-template-rows:60px 12px;gap:2px;border-radius:38px 38px 15px 15px!important}
#screenGame .hero-zone .hero-avatar-image{width:60px;height:60px;border-radius:30px 30px 12px 12px}
#screenGame .hero-zone .hero-hp{width:27px;height:28px;font-size:15px;bottom:8px}
#screenGame .hero-zone .hero-name{font-size:8px;max-width:78px}
.collection-grid,.reward-cards,.mulligan-cards,.arena-options,.boss-reward-choices{--card-w:154px;--card-h:212.33px}
.collection-grid{grid-template-columns:repeat(auto-fill,minmax(162px,1fr));gap:18px;padding:14px}
.mulligan-cards{gap:18px;flex-wrap:wrap}
.card.card-illustrated .card-badges{inset:9% 8% auto auto!important;max-width:66%;max-height:35%;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:3px;overflow:hidden}
.card.card-illustrated .kw-badge{display:grid;place-items:center;width:clamp(19px,calc(var(--card-w) * .17),27px);height:clamp(19px,calc(var(--card-w) * .17),27px);border-radius:6px;border:1px solid #e1d1a6;background:#17213af2;color:#dfd6bf;box-shadow:0 2px 5px #000b}
.card.card-illustrated .kw-badge .ui-icon{width:76%;height:76%;vertical-align:0}
.card.card-illustrated .card-name,.card.card-illustrated.rarity-divine .card-name{top:51.5%!important;height:12.5%!important;line-height:1!important}
.card.card-illustrated.has-taunt{outline:2px solid #bdd7ef;outline-offset:3px;animation:none!important}
#screenGame .board .card.card-illustrated.has-taunt.targetable{outline:3px solid #ff7d7d!important;box-shadow:0 0 18px #ff505099!important}
.card.card-illustrated .kw-shield{background:#223f61f5;color:#d2ecff;border-color:#b7ddff}
.card.card-illustrated .kw-charge,.card.card-illustrated .kw-battlecry{background:#58452bf5;color:#fff0ba;border-color:#edd08e}
.card.card-illustrated .kw-lifesteal{background:#542a40f5;color:#ffcfdf;border-color:#ed9db9}
.card.card-illustrated .kw-windfury,.card.card-illustrated .kw-spell{background:#392f5cf5;color:#e8d5ff;border-color:#c2a5ea}
.card.card-illustrated .kw-freeze{background:#1f4c5af5;color:#d9fbff;border-color:#b6ecf9}
.card.card-illustrated .kw-deathrattle{background:#303746f5;color:#eef1f6;border-color:#b4becf}
.card.card-illustrated.has-abilities .card-art{box-shadow:inset 0 0 0 1px #c5bcf1a6,0 0 10px #bba8e52e!important}
.card.card-illustrated.has-divine-shield .card-art{box-shadow:inset 0 0 0 2px #e3f6ff,0 0 13px #9dd9ff88!important}
.card.card-illustrated.has-taunt .taunt-frame{display:block!important;position:absolute;inset:-5px;border:3px solid #bdd7ef;border-radius:10px 10px 16px 16px;z-index:3;box-shadow:0 0 0 1px #43627f,inset 0 0 0 2px #162944,0 0 14px #8ec4ef5c;pointer-events:none;background:none;animation:none!important;transform:none!important}
.card.card-illustrated.has-taunt .taunt-banner{display:flex!important;align-items:center;justify-content:center;gap:3px;left:8%!important;right:8%!important;top:44%!important;height:8%!important;padding:1px 3px;background:linear-gradient(135deg,#385c7c,#172e4c);color:#eef8ff;border:1px solid #c6e3ff;border-radius:4px;font-size:clamp(7px,calc(var(--card-w) * .063),11px)!important;font-weight:750;letter-spacing:.015em;text-transform:uppercase;filter:none!important;pointer-events:none}
.card.card-illustrated.has-taunt .taunt-banner>.ui-icon{width:1.3em;height:1.3em;flex-shrink:0}
.card.card-illustrated.has-taunt .taunt-banner>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#screenMenu .moon-play>#btnRanked{display:grid;grid-template-columns:minmax(44px,1fr) auto minmax(44px,1fr);align-items:center;gap:12px;width:100%;min-height:52px;padding:12px 17px!important;margin-top:14px;background:linear-gradient(130deg,#28344bbb,#101b30d9)!important;border:1px solid #cfbb8d99!important;color:#eddfbc!important;border-radius:5px;box-shadow:0 4px 16px #0005!important}
#screenMenu #btnRanked .menu-btn-icon{justify-self:start;font-size:23px;color:#e2cca0}
#screenMenu #btnRanked .menu-btn-text{justify-self:center;text-align:center!important;font:400 18px/1.2 var(--font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
#screenMenu #btnRanked .menu-btn-sub{display:inline-block;justify-self:end;max-width:none;margin-left:0;font:600 13px var(--font);padding:4px 8px;border:1px solid #cbb78a55;border-radius:6px;color:#d8c59f;opacity:1}
@media(max-width:640px){#screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{min-height:980px;height:max(100%,980px)!important;grid-template-rows:minmax(86px,auto) 88px minmax(196px,1fr) 44px minmax(196px,1fr) 88px minmax(206px,1.05fr)}#screenGame.active .game-wrapper.with-tutorial-info{min-height:1048px;height:max(100%,1048px)!important;grid-template-rows:minmax(86px,auto) 68px 88px minmax(196px,1fr) 44px minmax(196px,1fr) 88px minmax(206px,1.05fr)}#screenGame .hero-zone #playerHero,#screenGame .hero-zone #enemyHero{width:84px;max-width:84px}.collection-grid,.reward-cards,.mulligan-cards,.arena-options,.boss-reward-choices{--card-w:138px;--card-h:190.27px}.collection-grid{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:14px;padding:9px}#screenMenu .moon-play>#btnRanked{gap:8px;padding:10px!important}#screenMenu #btnRanked .menu-btn-text{font-size:15px}#screenMenu #btnRanked .menu-btn-sub{font-size:11px;padding:3px 5px}}

/* Public opponent hand: decorative backs and a real count, never card identities. */
#screenGame .enemy-hand-display{--hand-back-width:34px;--hand-back-height:50px;--hand-step:16px;grid-column:4 / 6;grid-row:1;justify-self:center;align-self:center;display:flex;flex-direction:column;align-items:center;gap:5px;width:220px;max-width:100%;pointer-events:none}
#screenGame .enemy-hand-cards{position:relative;flex-shrink:0;width:calc(var(--hand-back-width) + (var(--hand-count,1) - 1) * var(--hand-step));max-width:100%;height:var(--hand-back-height);isolation:isolate}
#screenGame .enemy-hand-back{position:absolute;top:0;left:calc(var(--hand-index) * var(--hand-step));width:var(--hand-back-width);height:var(--hand-back-height);background:url('assets/ui/card-back.svg?v=1.14.0') center/100% 100% no-repeat;border-radius:4px;box-shadow:0 3px 8px #0008;transform:rotate(var(--hand-angle));transform-origin:50% 100%;z-index:var(--hand-index)}
#screenGame .enemy-hand-label{display:flex;align-items:center;gap:7px;color:#bcb6a8;font-size:10px;font-weight:500;white-space:nowrap}
#screenGame #enemyHandCount{min-width:22px;padding:2px 6px;text-align:center;font:650 12px var(--font);font-variant-numeric:tabular-nums;color:#e8d9b4;border:1px solid #c9b78b55;border-radius:6px;background:#101a2ee8;box-shadow:0 2px 6px #0003}
#screenGame .enemy-hand-display.is-empty .enemy-hand-cards{opacity:.25}
@media(max-width:900px){#screenGame .enemy-hand-display{grid-column:4;width:80px;--hand-back-width:30px;--hand-back-height:44px;--hand-step:4px}}
@media(max-width:640px){#screenGame .enemy-hand-display{width:50px;--hand-back-width:26px;--hand-back-height:38px;--hand-step:2px;gap:4px}#screenGame .enemy-hand-label{gap:3px;font-size:8px}#screenGame #enemyHandCount{font-size:10px;min-width:16px;padding:1px 3px}}

/* Campaign medallions: portraits, lunar metalwork and explicit progress badges. */
#campaignMap{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-height:56vh;padding:8px 6px 16px}
#campaignMap .campaign-node{aspect-ratio:auto;min-height:142px;padding:13px 8px 10px;gap:8px;border-width:1px;border-radius:14px;overflow:hidden;isolation:isolate;animation:none;box-shadow:inset 0 1px #ede1ba12,0 5px 14px #0003}
#campaignMap .campaign-node::before{content:"";position:absolute;width:116px;height:116px;top:-12px;left:50%;transform:translateX(-50%);border:1px solid #c5b58e14;border-radius:50%;z-index:-1;background:radial-gradient(circle,#96acc912,transparent 68%)}
#campaignMap .campaign-node-av{position:relative;display:block;width:72px;height:72px;flex-shrink:0;border:2px solid #b8a783;border-radius:50%;padding:3px;background:#0b1425;box-shadow:0 0 0 3px #c6b48c16,0 5px 12px #0007;line-height:0}
#campaignMap .campaign-portrait{display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:50%;filter:saturate(.88);transition:filter .2s,transform .2s}
#campaignMap .campaign-node-num{position:absolute;top:67px;left:calc(50% - 13px);display:grid;place-items:center;width:26px;height:26px;border-radius:9px;border:1px solid #cbb789;background:linear-gradient(145deg,#32405c,#111b30);color:#f4e7c4;font-size:12px;font-weight:700;opacity:1;box-shadow:0 3px 6px #0006;z-index:2}
#campaignMap .campaign-node-name{display:flex;align-items:center;justify-content:center;min-height:32px;margin-top:5px;max-width:100%;font-size:11px;line-height:1.35;font-weight:550;overflow-wrap:anywhere;color:#e4dfd1;text-align:center}
#campaignMap .campaign-node-star,#campaignMap .campaign-node-check,#campaignMap .campaign-node-lock{position:absolute;top:9px;right:8px;bottom:auto;display:grid;place-items:center;width:23px;height:23px;border-radius:7px;border:1px solid #ccb88966;background:#101a2ff2;color:#e3cb90;z-index:3}
#campaignMap .campaign-node-star .ui-icon,#campaignMap .campaign-node-check .ui-icon,#campaignMap .campaign-node-lock svg{width:15px;height:15px}
#campaignMap .campaign-node-check{top:auto;bottom:9px;right:7px;width:18px;height:18px;color:#a9dbcc;border-color:#8ac7b866;background:#173b38}
#campaignMap .campaign-node-check .ui-icon{width:12px;height:12px}
#campaignMap .campaign-node.boss{background:linear-gradient(145deg,#3a344c,#151a32)!important;border-color:#d6bc7c99!important}
#campaignMap .campaign-node.boss .campaign-node-av{border-color:#edcf84;box-shadow:0 0 0 3px #c5a25a2b,0 0 18px #bb9a4c28,0 5px 12px #0007}
#campaignMap .campaign-node.boss .campaign-node-name{color:#efdbad}
#campaignMap .campaign-node.locked{opacity:.78;filter:none;pointer-events:auto;cursor:not-allowed}
#campaignMap .campaign-node.locked .campaign-portrait{filter:saturate(.35) brightness(.72)}
#campaignMap .campaign-node.locked .campaign-node-lock{color:#abb7cc;border-color:#8593ad55}
#campaignMap .campaign-node.boss.locked .campaign-node-lock{right:auto;left:8px}
#campaignMap .campaign-node.current{border-color:#ead7a7!important;box-shadow:0 0 0 2px #ead7a722,0 0 24px #e7d0a120!important}
#campaignMap .campaign-node.current .campaign-node-av{border-color:#fae6b1}
#campaignMap .campaign-node.current .campaign-node-num{background:linear-gradient(145deg,#efe2bc,#c6af7b);color:#172039}
#campaignMap .campaign-node.cleared{border-color:#83b9aa70!important}
#campaignMap .campaign-node:hover:not(.locked) .campaign-portrait{filter:saturate(1.1);transform:scale(1.04)}
#campaignMap .campaign-node:focus-visible{outline:2px solid #f3dfad;outline-offset:2px}
@media(max-width:600px){#campaignMap{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}#campaignMap .campaign-node{min-height:136px;padding-inline:5px}#campaignMap .campaign-node-av{width:66px;height:66px}#campaignMap .campaign-node-num{top:61px}#campaignMap .campaign-node-name{font-size:10px}#campaignMap .campaign-node-star,#campaignMap .campaign-node-lock{right:4px;width:20px;height:20px}}

/* Laptop and windowed desktop: keep both boards and the hand in one view. */
@media(min-width:901px) and (max-height:1000px){
 #screenGame.active{padding:8px 0!important}
 #screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{min-height:660px;height:calc(100dvh - 16px)!important;padding:8px 18px 10px!important;grid-template-rows:40px 64px minmax(120px,1fr) 28px minmax(120px,1fr) 64px minmax(152px,1.05fr)}
 #screenGame.active .game-wrapper.with-tutorial-info{min-height:710px;height:calc(100dvh - 16px)!important;grid-template-rows:40px 50px 64px minmax(114px,1fr) 28px minmax(114px,1fr) 64px minmax(144px,1.05fr)}
 #screenGame .hero-zone{grid-template-rows:64px}
 #screenGame .hero-zone #playerHero,#screenGame .hero-zone #enemyHero{width:84px;max-width:84px;height:62px;padding:3px 6px;grid-template-rows:42px 10px;gap:1px;border-radius:30px 30px 11px 11px!important}
 #screenGame .hero-zone .hero-avatar-image{width:42px;height:42px;border-radius:22px 22px 9px 9px}
 #screenGame .hero-zone .hero-name{font-size:8px;max-width:72px}
 #screenGame .hero-zone .hero-hp{width:25px;height:25px;font-size:13px;bottom:7px;right:-7px}
 #screenGame .hero-zone .hero-power-btn{width:50px;height:50px}
 #screenGame .hero-zone .hero-power-btn .hp-icon{font-size:18px}
 #screenGame .hero-zone .hero-power-btn .hp-label{font-size:7px}
 #screenGame .deck-stack{width:29px;height:39px}
 #screenGame .deck-label{font-size:8px;line-height:1.1}
 #screenGame .enemy-hand-display{--hand-back-width:28px;--hand-back-height:39px;gap:3px}
 #screenGame .game-header{padding-bottom:4px;gap:8px}
 #screenGame .logo{font-size:14px}
 #screenGame .turn-info{padding:4px 8px}
}
@media(min-width:901px) and (max-height:720px){
 #screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{min-height:620px;padding:6px 16px 8px!important;grid-template-rows:36px 56px minmax(106px,1fr) 24px minmax(106px,1fr) 56px minmax(132px,1.05fr)}
 #screenGame.active .game-wrapper.with-tutorial-info{min-height:668px;grid-template-rows:36px 48px 56px minmax(106px,1fr) 24px minmax(106px,1fr) 56px minmax(132px,1.05fr)}
 #screenGame .hero-zone{grid-template-rows:56px}
 #screenGame .hero-zone #playerHero,#screenGame .hero-zone #enemyHero{height:55px;grid-template-rows:36px 10px;padding-block:2px}
 #screenGame .hero-zone .hero-avatar-image{width:36px;height:36px}
 #screenGame .hero-zone .hero-power-btn{width:44px;height:44px}
 #screenMenu .menu-shell{padding:24px 36px!important}
 .moon-menu-body{margin-top:34px;margin-bottom:26px}
 #screenMenu .moon-rail .menu-btn{min-height:62px}
 #screenMenu .moon-play>#btnCampaign{min-height:78px}
 #screenMenu .moon-secondary .menu-btn{min-height:50px}
}

/* Wide hero medallions share the same axis and leave their power button separate. */
@media(min-width:901px){
 #screenGame{--hero-face-size:80px;--hero-panel-width:240px;--hero-panel-height:96px;--hero-side-width:124px;--hero-health-height:40px;--hero-health-font:24px;--hero-label-font:12px;--hero-row-height:104px;--deck-width:56px;--deck-height:76px}
 #screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{min-height:952px;height:max(100%,952px)!important;grid-template-rows:minmax(48px,auto) var(--hero-row-height) minmax(196px,1fr) 36px minmax(196px,1fr) var(--hero-row-height) minmax(206px,1.05fr)}
 #screenGame.active .game-wrapper.with-tutorial-info{min-height:1020px;height:max(100%,1020px)!important;grid-template-rows:minmax(48px,auto) 68px var(--hero-row-height) minmax(196px,1fr) 36px minmax(196px,1fr) var(--hero-row-height) minmax(206px,1.05fr)}
 #screenGame .hero-zone{grid-template-columns:minmax(0,1fr) var(--hero-side-width) var(--hero-panel-width) var(--hero-side-width) minmax(0,1fr);grid-template-rows:var(--hero-row-height)}
 #screenGame .hero-zone #playerHero,#screenGame .hero-zone #enemyHero{display:grid;grid-template-columns:var(--hero-face-size) minmax(0,1fr);grid-template-rows:minmax(22px,auto) minmax(0,1fr);column-gap:12px;row-gap:2px;width:var(--hero-panel-width);max-width:var(--hero-panel-width);height:var(--hero-panel-height);padding:7px 10px;align-items:center;justify-items:start;border-radius:22px!important}
 #screenGame .hero-zone .hero-avatar{grid-column:1;grid-row:1 / 3;width:var(--hero-face-size);height:var(--hero-face-size);align-self:center;line-height:0}
 #screenGame .hero-zone .hero-avatar-image{width:var(--hero-face-size);height:var(--hero-face-size);border-radius:17px;object-fit:cover}
 #screenGame .hero-zone .hero-name{grid-column:2;grid-row:1;width:100%;max-width:100%;align-self:end;text-align:left;white-space:normal;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:var(--hero-label-font);line-height:1.15;font-weight:600;color:#e6dfcd}
 #screenGame .hero-zone .hero-hp{grid-column:2;grid-row:2;position:static;inset:auto;justify-self:start;align-self:start;width:54px;height:var(--hero-health-height);min-height:var(--hero-health-height);margin:0;font-size:var(--hero-health-font);line-height:1;border-radius:12px;border-width:1px;box-shadow:0 3px 9px #0006!important}
 #screenGame .hero-zone .hero-power-wrap{width:var(--hero-side-width);justify-content:flex-start}
 #screenGame .enemy-hand-display{grid-column:4;grid-row:1;width:var(--hero-side-width);--hand-back-width:34px;--hand-back-height:48px;--hand-step:10px}
 #screenGame .deck-stack{width:var(--deck-width);height:var(--deck-height)}
 #screenGame .deck-zone{gap:5px;padding:3px 4px 0;min-width:72px}
 #screenGame .deck-count{min-width:32px;right:-8px;bottom:-2px;padding:3px 7px;font:750 18px/1.1 var(--font);font-variant-numeric:tabular-nums;background:linear-gradient(145deg,#e4d5af,#c5ad78);color:#172039;border:1px solid #f1e1b8;border-radius:8px;box-shadow:0 3px 8px #0009}
 #screenGame .deck-label{font-size:11px;line-height:1.1;color:#c9c1ae;white-space:nowrap}
}
@media(min-width:901px) and (max-height:1000px){
 #screenGame{--hero-face-size:64px;--hero-panel-width:208px;--hero-panel-height:78px;--hero-side-width:104px;--hero-health-height:34px;--hero-health-font:22px;--hero-label-font:11px;--hero-row-height:80px;--deck-width:46px;--deck-height:62px}
 #screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{min-height:684px;height:calc(100dvh - 16px)!important;grid-template-rows:40px var(--hero-row-height) minmax(112px,1fr) 28px minmax(112px,1fr) var(--hero-row-height) minmax(144px,1.05fr)}
 #screenGame.active .game-wrapper.with-tutorial-info{min-height:734px;height:calc(100dvh - 16px)!important;grid-template-rows:40px 50px var(--hero-row-height) minmax(106px,1fr) 28px minmax(106px,1fr) var(--hero-row-height) minmax(136px,1.05fr)}
 #screenGame .hero-zone #playerHero,#screenGame .hero-zone #enemyHero{padding:5px 10px;grid-template-rows:minmax(20px,auto) minmax(0,1fr)}
 #screenGame .hero-zone .hero-avatar-image{border-radius:14px}
 #screenGame .hero-zone .hero-hp{width:48px;border-radius:10px}
 #screenGame .enemy-hand-display{--hand-back-width:28px;--hand-back-height:40px;--hand-step:8px}
 #screenGame .deck-zone{gap:3px;padding-top:1px}
 #screenGame .deck-count{font-size:16px;min-width:30px;padding:3px 6px}
 #screenGame .deck-label{font-size:10px}
}
@media(min-width:901px) and (max-height:720px){
 #screenGame{--hero-panel-height:72px;--hero-row-height:74px;--hero-label-font:10px;--hero-health-height:30px;--hero-health-font:21px;--deck-width:43px;--deck-height:58px}
 #screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{min-height:620px;grid-template-rows:36px var(--hero-row-height) minmax(98px,1fr) 24px minmax(98px,1fr) var(--hero-row-height) minmax(120px,1.05fr)}
 #screenGame.active .game-wrapper.with-tutorial-info{min-height:668px;grid-template-rows:36px 48px var(--hero-row-height) minmax(98px,1fr) 24px minmax(98px,1fr) var(--hero-row-height) minmax(120px,1.05fr)}
 #screenGame .hero-zone #playerHero,#screenGame .hero-zone #enemyHero{padding-block:3px;grid-template-rows:minmax(18px,auto) minmax(0,1fr)}
}

/* Modes are always visible; the campaign is the main entry point. */
#screenMenu .menu-extra{margin-top:18px;text-align:left;border-top:1px solid #d5c09855}
#screenMenu .menu-extra>h2{font:600 13px var(--font);letter-spacing:.06em;color:#e3d7bb;margin:14px 0 10px}
#screenMenu .menu-extra-grid{position:static;width:100%;grid-template-columns:1fr 1fr;padding:0;gap:8px;background:none;border:0;box-shadow:none;max-height:none;overflow:visible}
#screenMenu .menu-extra-grid .menu-btn{min-height:54px;padding:10px!important;justify-content:flex-start;border-color:#c7b58b66!important;background:#142039d9!important}
#screenMenu .menu-extra-grid .menu-btn-text{font-size:14px;color:#f0e5cc;text-align:left!important}
#screenMenu .menu-extra-grid .menu-btn-icon{font-size:22px;flex-shrink:0;width:26px}
#screenMenu .moon-secondary{margin-top:12px;gap:8px}
#screenMenu .moon-secondary #btnPlay,#screenMenu .moon-secondary #btnTutorial{border:1px solid #c7b58b66!important;background:#142039b8!important;border-radius:5px;min-height:54px}
#screenMenu .moon-secondary .menu-btn-text{font-size:18px}
#screenMenu .moon-menu-body{margin-top:clamp(28px,5vh,64px);margin-bottom:24px}

/* The chat occupies its own left rail. Expanding it never changes board width. */
#screenGame .social-panel{background:linear-gradient(145deg,#18243df5,#0b1428f7);border-color:#c9b78b66;color:#e6dfcd;box-shadow:0 12px 36px #0008;border-radius:14px}
#screenGame .social-header{background:#26334e88;border-color:#c9b78b33;font-weight:600}
#screenGame .chat-messages{font-size:13px;line-height:1.5;max-height:none;min-height:80px;overflow-wrap:anywhere}
#screenGame .emote-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:10px;background:#0c152aaa;max-height:none;overflow:visible;flex-shrink:0}
#screenGame .emote-bar::after{display:none}
#screenGame .emote-btn{width:100%;height:38px;min-width:0;background:#273650;border:1px solid #c9b78b33;color:#e8d6aa;font-size:23px}
#screenGame .emote-btn .ui-icon{width:24px;height:24px}
#screenGame .chat-emote-big .ui-icon{width:26px;height:26px;vertical-align:middle;color:#eddbad}
#screenGame .chat-msg.emote-msg{text-align:left;font-size:12px}
#screenGame .chat-msg.me .chat-name{color:#b1dbc8}
#screenGame .chat-form{background:#121e33;border-top:1px solid #c9b78b33;padding:10px;gap:6px}
#screenGame .chat-form input{min-width:0;width:100%;font-size:13px}
#screenGame .chat-send{background:#d5c39b;color:#172039;flex-shrink:0}
#screenGame .float-emote{color:#efdcac}
#screenGame .float-emote .ui-icon{width:1em;height:1em;filter:drop-shadow(0 0 10px #e4ca8680)}
@media(min-width:901px){
 #screenGame{--chat-width:clamp(200px,16vw,240px)}
 #screenGame.has-social.active .game-wrapper{width:min(var(--battle-width),calc(100vw - var(--chat-width) - 44px))!important;max-width:min(var(--battle-width),calc(100vw - var(--chat-width) - 44px))!important;margin-left:max(calc(var(--chat-width) + 28px),calc((100vw - var(--battle-width)) / 2))!important;margin-right:16px!important}
 #screenGame .social-panel{position:fixed;left:max(16px,calc((100vw - var(--battle-width)) / 2 - var(--chat-width) - 12px));top:112px;bottom:auto;width:var(--chat-width);max-width:var(--chat-width);height:500px;max-height:calc(100dvh - 140px)}
 #screenGame .social-panel.collapsed{height:auto}
 #screenGame.has-social .battle-log{position:static;margin:12px 16px 12px auto}
}
@media(max-width:900px){#screenGame .social-panel{position:relative;left:auto;bottom:auto;width:calc(100% - 32px);max-width:600px;margin:16px auto;height:340px;max-height:none}}

/* Larger hero controls stay inside the existing side column. */
@media(min-width:901px){
 #screenGame .hero-zone .hero-power-wrap{flex-direction:row;align-items:center;gap:8px}
 #screenGame .hero-zone .hero-power-btn{width:80px;height:80px;flex:0 0 80px;padding:4px}
 #screenGame .hero-zone .hero-power-btn .hp-icon{font-size:30px}
 #screenGame .hero-zone .hero-power-btn .hp-icon .ui-icon{width:1em;height:1em}
 #screenGame .hero-zone .hero-power-btn .hp-label{font-size:11px;line-height:1.2;margin-top:3px}
 #screenGame .hero-zone .hero-power-btn .hp-cost{width:26px;height:26px;font-size:15px}
}
@media(min-width:901px) and (max-height:1000px){
 #screenGame .hero-zone .hero-power-wrap{gap:6px}
 #screenGame .hero-zone .hero-power-btn{width:64px;height:64px;flex-basis:64px}
 #screenGame .hero-zone .hero-power-btn .hp-icon{font-size:26px}
 #screenGame .hero-zone .hero-power-btn .hp-label{font-size:10px;margin-top:2px}
 #screenGame .hero-zone .hero-power-btn .hp-cost{width:24px;height:24px;font-size:14px}
}
@media(min-width:901px) and (max-height:720px){
 #screenGame .hero-zone .hero-power-btn{width:60px;height:60px;flex-basis:60px}
 #screenGame .hero-zone .hero-power-btn .hp-icon{font-size:24px}
}

/* A little more room for hands and mana while keeping the hero medallions clear. */
@media(min-width:901px){
 #screenGame.active .hand-zone{margin-inline:12px}
 #screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{min-height:976px;height:max(100%,976px)!important;grid-template-rows:minmax(48px,auto) var(--hero-row-height) minmax(196px,1fr) 36px minmax(196px,1fr) var(--hero-row-height) minmax(240px,1.22fr)}
 #screenGame.active .game-wrapper.with-tutorial-info{min-height:1048px;height:max(100%,1048px)!important;grid-template-rows:minmax(48px,auto) 68px var(--hero-row-height) minmax(196px,1fr) 36px minmax(196px,1fr) var(--hero-row-height) minmax(240px,1.22fr)}
 #screenGame .mana-bar{padding:10px 12px;gap:9px}
 #screenGame .mana-crystals{max-width:176px;gap:4px}
 #screenGame .crystal{width:12px;height:17px}
 #screenGame .mana-text{min-width:34px;font-size:14px}
 #screenGame .enemy-hand-display{--hand-back-width:42px;--hand-back-height:60px;--hand-step:9px;gap:4px}
 #screenGame .enemy-hand-label{font-size:11px}
 #screenGame #enemyHandCount{font-size:14px}
}
@media(min-width:901px) and (max-height:1000px){
 #screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{min-height:684px;height:calc(100dvh - 16px)!important;grid-template-rows:40px var(--hero-row-height) minmax(112px,1fr) 28px minmax(112px,1fr) var(--hero-row-height) minmax(160px,1.22fr)}
 #screenGame.active .game-wrapper.with-tutorial-info{min-height:734px;height:calc(100dvh - 16px)!important;grid-template-rows:40px 50px var(--hero-row-height) minmax(106px,1fr) 28px minmax(106px,1fr) var(--hero-row-height) minmax(152px,1.22fr)}
 #screenGame .enemy-hand-display{--hand-back-width:34px;--hand-back-height:48px;--hand-step:7px;gap:3px}
}
@media(min-width:901px) and (max-height:720px){
 #screenGame.active .game-wrapper,#screenGame.active .game-wrapper.with-mechanics{min-height:620px;grid-template-rows:36px var(--hero-row-height) minmax(98px,1fr) 24px minmax(98px,1fr) var(--hero-row-height) minmax(132px,1.22fr)}
 #screenGame.active .game-wrapper.with-tutorial-info{min-height:668px;grid-template-rows:36px 48px var(--hero-row-height) minmax(98px,1fr) 24px minmax(98px,1fr) var(--hero-row-height) minmax(132px,1.22fr)}
}

/* Card resources: red Attack, green Health in every card view. */
.card .stat.attack,.card.card-illustrated .stat.attack{background:radial-gradient(circle at 32% 25%,#ffb5aa,#c8343c 55%,#721c2b 92%)!important;color:#fff!important}
.card .stat.health,.card.card-illustrated .stat.health{background:radial-gradient(circle at 32% 25%,#b0f0b7,#238b57 55%,#104b35 92%)!important;color:#fff!important}
.card .stat.health.hurt,.card.card-illustrated .stat.health.hurt{border-style:dashed!important;box-shadow:0 0 0 2px #e6ffc0,0 2px 6px #0009!important}
.campaign-readiness{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;margin:12px 0;border:1px solid #a6c9df44;border-radius:14px;background:linear-gradient(120deg,#213249bd,#142038c9);color:#e9e8dc}
.campaign-readiness.hidden{display:none}
.campaign-readiness strong{font-size:15px;color:#e1d2a5}
.campaign-readiness p{margin:5px 0 0;font:13px/1.5 var(--font-ui,Arial,sans-serif);color:#c4d1df;max-width:690px}
.campaign-readiness button{flex-shrink:0;white-space:normal;max-width:210px}
.deck-assistance{display:flex;align-items:center;gap:10px;margin:12px 0 5px;color:#dfdfd6;font-size:14px;cursor:var(--cursor-action,pointer)}
.deck-assistance input{width:18px;height:18px;accent-color:#89cbb5}
.deck-assistance-help{margin:5px 0 16px;color:#adbdcf;font-size:13px;line-height:1.5}
.enemy-tactic-label{display:block;color:#9bd6c5;font-size:10px;line-height:1.2;letter-spacing:.025em;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enemy-tactic-label.hidden{display:none}
@media(max-width:1100px){.campaign-readiness{gap:10px;padding:10px 12px}.campaign-readiness p{font-size:12px}.campaign-readiness button{max-width:170px}}
.deck-resource-attack{color:#ff969c}.deck-resource-health{color:#91e1b0}
.deck-resource-attack,.deck-resource-health{display:inline-flex;align-items:center;gap:2px;font-weight:800;white-space:nowrap}
.deck-row-meta .ui-icon{width:12px;height:12px}
#screenGame .hero-zone .enemy-tactic-label:not(.hidden){grid-column:2;grid-row:2;justify-self:end;align-self:center;width:62px;max-width:62px;white-space:normal;font-size:9px;line-height:1.2;text-align:right;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}

/* Seasonal adventure */
.halloween-banner{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;margin:0 0 14px;text-align:left;border:1px solid #eaa15f75;border-radius:12px;background:linear-gradient(110deg,#633c2cd9,#281c39ed);color:#ffe2af;box-shadow:0 8px 32px #05081880;cursor:pointer}
.halloween-banner:hover{border-color:#ffcb83;filter:brightness(1.12)}
.halloween-portrait{position:absolute;right:22px;top:20px;width:68px;height:68px;object-fit:cover;border-radius:50%;border:1px solid #edbc7a80;box-shadow:0 0 25px #e9a04522}
@media(min-width:901px) and (max-height:900px){#screenMenu.halloween-season .menu-shell{padding:28px!important}#screenMenu.halloween-season .menu-title{font-size:64px}#screenMenu.halloween-season .menu-tagline{margin-top:10px;padding-top:8px}#screenMenu.halloween-season .moon-menu-body{margin-top:20px;margin-bottom:20px}#screenMenu.halloween-season .moon-secondary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}#screenMenu.halloween-season .moon-secondary .menu-btn-text{font-size:14px;letter-spacing:.03em}}
.halloween-banner>.ui-icon{width:32px;height:32px;flex:none;color:#ffb660;filter:drop-shadow(0 0 8px #ff983863)}
.halloween-banner span{display:grid;gap:4px}.halloween-banner strong{font:400 21px var(--font-display)}.halloween-banner small{font-size:11px;color:#d7bda5}
#screenHalloween{overflow-y:auto;padding:28px 22px;align-items:flex-start}
#screenHalloween .halloween-panel{width:min(1060px,100%);margin:auto;max-height:none;padding:28px 36px 36px;background:radial-gradient(ellipse at 50% 0,#633b4180,transparent 60%),linear-gradient(140deg,#192039f7,#0b1225fa)!important;border-color:#d9975f55!important}
.halloween-intro{text-align:center;max-width:800px;margin:8px auto 26px}.halloween-intro>.ui-icon{width:66px;height:66px;color:#ffbe76;filter:drop-shadow(0 0 20px #fc9f4a66)}
.halloween-intro h2{font:400 clamp(30px,4vw,48px) var(--font-display);color:#ffe2b4;margin:10px 0 15px}.halloween-intro p{color:#c6c5d3;line-height:1.6;margin:10px 0;font-size:14px}.halloween-intro .halloween-eyebrow{font-size:10px;letter-spacing:.16em;color:#e6b184}.halloween-rule{padding:12px 18px;border:1px solid #ad8ac445;border-radius:12px;background:#73658612}.halloween-rule .ui-icon{vertical-align:middle;margin-right:8px;color:#d2b4ed}
.halloween-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.halloween-stage{position:relative;display:flex;flex-direction:column;gap:15px;min-width:0;padding:26px 22px;background:linear-gradient(145deg,#34304bba,#141c32db);border:1px solid #c4a88045;border-radius:16px;overflow:hidden}.halloween-stage.cleared{border-color:#b4c99577}.halloween-number{font:400 48px var(--font-display);color:#e9ab72;opacity:.65}.halloween-stage h3{font:400 23px var(--font-display);color:#ffe1b8;margin:0}.halloween-stage p{font-size:13px;line-height:1.65;color:#c6c5d3;margin:0}.halloween-stage .halloween-reward{color:#e9c591;margin-top:auto;min-height:44px}.halloween-reward .ui-icon{vertical-align:middle;margin-right:7px}.halloween-stage button{padding:13px 9px;border-radius:8px;border:1px solid #e8bd82;background:linear-gradient(130deg,#e9cda4,#c68c5c);color:#211c2d;font-weight:700;cursor:pointer}.halloween-stage button:disabled{background:#252c40;color:#99a2b6;border-color:#65708b55;cursor:default}
body.halloween-battle #screenGame .game-wrapper{border-color:#e1a06466!important;box-shadow:0 0 70px #d7792620,inset 0 0 80px #b2752710!important}
body.halloween-battle #weatherLayer{filter:sepia(.65) hue-rotate(330deg)}
body.halloween-battle .board-zone{background:radial-gradient(ellipse at center,#dd9c3410,transparent 70%)}
@media(max-width:800px){.halloween-stages{grid-template-columns:1fr}.halloween-stage{gap:10px}.halloween-number{font-size:30px}#screenHalloween .halloween-panel{padding:24px}.halloween-banner strong{font-size:18px}}

@media(min-width:901px) and (max-height:800px){#screenHalloween{padding:18px}#screenHalloween .halloween-panel{padding:20px 30px}.halloween-intro{margin:0 auto 16px}.halloween-intro>.ui-icon{width:48px;height:48px}.halloween-intro h2{font-size:38px;margin:8px 0 10px}.halloween-intro p{font-size:13px;margin:8px 0}.halloween-stage{padding:20px;gap:12px}}
/* Lunar leaderboards: persistent personal result and scrollable public standings. */
#screenLeaders .panel{width:min(820px,calc(100vw - 40px));max-height:calc(100dvh - 40px);display:flex;flex-direction:column;overflow-y:auto;padding:28px}
#screenLeaders .panel-title{margin:12px 0 6px;font-size:32px}
#screenLeaders .panel-sub{margin:0 0 8px}
#screenLeaders .lb-tabs{flex-shrink:0;margin:12px 0}
#screenLeaders .lb-tab{font:600 15px var(--font);background:#0d1729;border-color:#bda77840}
#screenLeaders .lb-tab.active{background:#c4ac7922;box-shadow:inset 0 -2px #d2b879}
.lb-personal{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 20px;border:1px solid #cdbb8866;border-radius:14px;background:linear-gradient(115deg,#24324b,#161e32);flex-shrink:0}
.lb-personal>div{display:flex;align-items:baseline;gap:16px}.lb-kicker{font-size:13px;color:#c5bba4}.lb-personal strong{font:600 27px var(--font);color:#f3dfaf;font-variant-numeric:tabular-nums;white-space:nowrap}.lb-personal p{margin:0;font-size:13px;line-height:1.5;color:#cbd4e4;text-align:right}
.lb-description{font-size:13px;line-height:1.5;color:#b7c0d2;margin:14px 0 10px;flex-shrink:0}
#screenLeaders .lb-list{max-height:46vh;min-height:110px;flex:1 1 auto;padding-right:6px;scrollbar-gutter:stable}
#screenLeaders .lb-row{grid-template-columns:42px minmax(0,1fr) auto;min-height:58px;padding:12px 16px;border-radius:11px;background:#152139b3;border:1px solid #c9b78b22;flex-shrink:0}
#screenLeaders .lb-row.me{border-color:#cdbb88aa;background:#b9a16d1f;box-shadow:inset 3px 0 #d8bf83}.lb-podium .lb-rank{display:grid;place-items:center;width:30px;height:30px;border:1px solid #d4b77866;border-radius:50%;background:#d4b77814;color:#f0d6a0}
.lb-player{display:flex;flex-direction:column;min-width:0;gap:5px}.lb-name{display:block;font-size:15px;color:#e6e2da}.lb-detail{font-size:12px;line-height:1.4;color:#aebbd3}.lb-you{display:inline-block;margin-left:10px;font-size:10px;padding:2px 6px;border-radius:5px;background:#d8bf8322;color:#ead6a5}.lb-score{font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap}.lb-gap{text-align:center;color:#b2a17a;letter-spacing:5px}.lb-empty{padding:24px 16px;margin:0;text-align:center;font-size:15px;line-height:1.6;color:#bdc8db;border:1px dashed #c9b78b40;border-radius:12px}
#screenLeaders .lb-hint{font-size:12px;line-height:1.5;margin:12px 0 0;flex-shrink:0;color:#b7c0d2;opacity:1}
@media(max-height:800px){#screenLeaders .panel{padding:18px 24px}#screenLeaders .panel-title{font-size:27px}#screenLeaders .lb-list{max-height:39vh}}
@media(max-width:640px){.lb-personal{align-items:flex-start;flex-direction:column;gap:8px}.lb-personal p{text-align:left}#screenLeaders .panel{padding:16px}#screenLeaders .lb-row{padding:10px;gap:8px;grid-template-columns:30px minmax(0,1fr) auto}}