:root{--gold:#d8bd82;--ink:#101724;--muted:#a9acb9}body{font-family:"Noto Sans KR","Malgun Gothic",system-ui,sans-serif}button{border:1px solid #c9b48538;border-radius:7px;background:linear-gradient(180deg,#30374a,#1c2435);min-height:44px}button:focus-visible,select:focus-visible{outline:2px solid #ffe0a0;outline-offset:3px}.glass{background:linear-gradient(135deg,#111a2bf5,#111525ee);border:1px solid #bda57668;backdrop-filter:blur(12px);box-shadow:0 8px 32px #0005}.primary{background:linear-gradient(135deg,#edd39c,#ad8050);color:#251f18;box-shadow:0 4px 24px #c5a16535;border-color:#f2dca3}.screen{background:linear-gradient(90deg,#060b15eb 0%,#091223b5 45%,#0b102126 100%),url('../assets/backgrounds/stage_citadel.webp') center/cover}.screen:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#050914 0%,transparent 25%,transparent 80%,#05091488)}#menuScreen{place-items:center start;padding-left:8vw}.menu-card{position:relative;z-index:2;text-align:left;width:min(490px,44vw);padding:28px 0;border:0;background:none;backdrop-filter:none;box-shadow:none;border-radius:0}.eyebrow{color:var(--gold);font-size:11px;letter-spacing:.3em}.menu-card h1{font-family:Georgia,"Batang",serif;font-weight:700;letter-spacing:-.07em;line-height:1.15;font-size:clamp(44px,5vw,76px);margin:22px 0 12px;color:#f6edda}.menu-card h1 em{display:block;font-style:normal;color:var(--gold);font-size:.45em;letter-spacing:.18em;margin-top:12px}.menu-card p{color:#c1c3cc;line-height:1.8;font-size:14px;max-width:360px}.menu-card .menu-buttons{display:flex;gap:8px}.menu-card button{padding:12px;margin-top:10px;font-size:13px}.menu-card #startBtn{min-height:58px;font-size:17px;letter-spacing:.08em}.field{margin-top:20px}.field select{border-radius:6px;border-color:#c5ae7644;background:#111b2bcc;color:#e5dac2;padding:11px}.best{font-size:11px}.menu-hero{position:absolute;width:46vw;height:87vh;right:6vw;bottom:0;object-fit:contain;filter:drop-shadow(0 18px 24px #000a);z-index:1;animation:heroFloat 7s ease-in-out infinite}.hero-caption{position:absolute;right:11%;bottom:8%;z-index:3;text-shadow:0 2px 8px #000}.hero-caption small{font-size:10px;letter-spacing:.3em;color:var(--gold)}.hero-caption b{display:block;font-size:27px;margin-top:8px}.hero-caption p{color:#d6deec;font-size:12px}.build-tag{position:absolute;right:24px;top:22px;z-index:4;color:#e9dbc2a8;letter-spacing:.14em;font-size:10px}.loading-card{z-index:3}.loading-card h1{font-size:28px}.sigil{color:var(--gold);text-shadow:0 0 40px #efdaab55}.progress>div{background:linear-gradient(90deg,#82684d,#ead19b)}.topbar{top:12px;left:18px;right:18px;transform:none;width:auto;max-width:none;height:72px;border-radius:8px;padding:12px 22px}.topbar small{color:var(--gold);font-size:9px}.topbar strong{font-size:23px;font-family:Georgia,serif;color:#f6ead3}.battle-brand{display:flex!important;flex-direction:row;align-items:center;gap:13px!important}.battle-brand .crest{font-size:32px;color:var(--gold)}.battle-brand b{font-size:16px}.battle-brand span{font-size:11px;color:#a8afbc;display:block;margin-top:4px}.wave-block{text-align:center}.base-block{text-align:right}.resource{top:100px;left:22px;border-radius:6px;height:45px;font-size:18px;padding:7px 13px}.resource img{width:28px;height:28px}.battle-meta{position:absolute;top:105px;right:23px;text-align:right;font-size:12px;line-height:1.8;color:#f1e2c8;text-shadow:0 2px 5px #000}.battle-meta span{display:block;color:#c1d0dd;font-size:11px}.actions{left:auto;right:18px;bottom:16px;border-radius:8px;padding:8px}.actions .summon{background:linear-gradient(135deg,#e6cca1,#ad8152);color:#251d17;min-width:210px;border:1px solid #ead7ac}.actions .summon span{color:#453827}.actions button{min-width:46px;min-height:52px}.actions .summon b{font-size:16px}.selected{left:18px;bottom:16px;border-radius:8px;max-width:calc(100vw - 465px);grid-template-columns:62px minmax(140px,1fr) auto auto auto;padding:8px;min-height:70px}.selected img{border:1px solid #b69b6544;border-radius:4px;background:#223149}.sel-info b{font-size:15px;color:#f6e2bd}.sel-info span,.sel-info small{font-size:10px;line-height:1.5}.selected button{font-size:12px;padding:8px}.boss-wrap{position:absolute!important;left:50%;top:78px;transform:translateX(-50%);width:36vw!important;background:#171321ed;border:1px solid #ba5b7266;border-radius:6px;padding:8px 14px}.boss-hp{height:7px}.toast{top:160px;background:#171d2ded;border:1px solid #c8af7e7d;border-radius:6px;font-size:13px}.cinematic{overflow:hidden;background:radial-gradient(ellipse,#283f6599,#050813f5 65%)}.cinematic:before{content:'';position:absolute;inset:12% -10%;border-top:1px solid #d4b47e88;border-bottom:1px solid #d4b47e88;background:linear-gradient(100deg,#577eac22,#0a1229cc);transform:rotate(-6deg)}.cinematic img{position:absolute;right:10%;height:94%;width:52%;max-height:none;object-fit:contain;box-shadow:none;filter:drop-shadow(0 0 35px #8ec8ff33);animation:cutin .45s ease-out}.cine-copy{position:absolute;left:13%;top:42%;z-index:2}.cine-copy small{letter-spacing:.35em;color:var(--gold);font-size:12px}.cine-copy h2{font-size:clamp(28px,4vw,64px);color:#fff0d0;font-family:Georgia,"Batang",serif;margin:16px 0}.cine-copy p{color:#b9d1e5}.modal-card{border-radius:9px}.modal-card h2{color:#eddbb4}.gallery-modal .modal-card{width:min(1140px,95vw);max-height:90vh;overflow:auto}.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.hero-card{position:relative;overflow:hidden;text-align:left;min-height:172px;padding:9px;background:linear-gradient(165deg,#33455e,#131b2c);border:1px solid var(--rarity)}.hero-card img{width:100%;height:122px;object-fit:contain;filter:drop-shadow(0 5px 5px #0007);transition:transform .2s}.hero-card:hover img{transform:scale(1.08)}.hero-card b{display:block;font-size:13px;color:#f4e8d0}.hero-card small{display:block;color:var(--rarity);font-size:9px;margin-top:3px}.detail-art{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:center}.detail-art img{width:100%;height:48vh;object-fit:contain;background:radial-gradient(ellipse,#33435b77,transparent 65%)}.detail-art h3{font-size:28px;color:#f1dbaf}.pose-buttons{display:flex;gap:6px}.pose-buttons button{padding:9px 14px}.portrait-help{display:none}.battle-help{position:absolute;bottom:112px;left:24px;color:#ebe4d1b0;font-size:11px;letter-spacing:.02em;text-shadow:0 2px 6px #000}.gallery-note{font-size:12px;color:#b3bace}.camera-tools{position:absolute;right:20px;top:165px;display:flex;gap:6px;pointer-events:auto}.camera-tools button{font-size:12px;padding:7px 12px;min-height:38px;background:#152136db}.screen.active{animation:fade .3s}.stage-preview{height:68px;border:1px solid #c6ad7766;border-radius:6px;background:url('../assets/backgrounds/stage_citadel.webp') center 55%/cover;position:relative;overflow:hidden}.stage-preview:after{content:'20 WAVES  /  12 GUARDIANS  /  3 BOSSES';position:absolute;bottom:0;left:0;right:0;font-size:8px;letter-spacing:.13em;padding:7px;background:#0c1522b8;color:#f3e0b5}.boss-preview{margin-top:18px}.boss-preview .gallery-grid{grid-template-columns:repeat(3,1fr)}.boss-preview .hero-card img{height:150px}@keyframes heroFloat{50%{transform:translateY(-9px)}}@keyframes cutin{from{transform:translateX(100px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes fade{from{opacity:0}to{opacity:1}}
@media(max-width:1100px){.battle-brand b{font-size:13px}.selected{max-width:calc(100vw - 400px);grid-template-columns:48px 1fr auto auto auto}.selected img{width:46px;height:46px}.sel-info small{display:none}.actions .summon{min-width:160px}.gallery-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-height:620px) and (orientation:landscape){#menuScreen{padding-left:5vw}.menu-card{width:43vw;padding:10px 0}.menu-card h1{font-size:36px;margin:10px 0}.menu-card h1 em{font-size:16px}.menu-card p{font-size:11px;margin:5px 0}.field{margin-top:8px}.field select{padding:7px}.stage-preview{display:none}.menu-card #startBtn{min-height:44px;padding:8px}.menu-card button{padding:7px;margin-top:6px;min-height:36px}.best{margin-top:9px}.topbar{height:54px;top:6px;left:8px;right:8px;padding:5px 12px}.topbar strong{font-size:18px}.resource{top:68px;left:10px;height:36px}.battle-meta{top:65px;right:10px}.actions{bottom:6px;right:8px;padding:5px}.actions button{min-height:44px}.selected{left:8px;bottom:6px;min-height:56px}.boss-wrap{top:55px}.battle-help{display:none}.camera-tools{top:117px;right:10px}.toast{top:112px}}
@media(orientation:portrait){#menuScreen{place-items:end center;padding:0 20px 24px;background:linear-gradient(0deg,#050914 9%,#081220d9 48%,#111e3533),url('../assets/backgrounds/stage_citadel.webp') center/cover}.menu-card{width:100%;padding:0}.menu-card h1{font-size:40px;margin:10px 0}.menu-card h1 em{display:inline;font-size:17px;margin-left:10px}.menu-card p{font-size:12px;margin:8px 0}.menu-hero{width:90vw;height:58vh;right:-12vw;top:-2vh;bottom:auto}.hero-caption{display:none}.eyebrow{font-size:9px}.field{margin-top:10px}.stage-preview{height:42px}.menu-card #startBtn{min-height:52px}.menu-card button{margin-top:7px}.best{margin-top:12px}.topbar{top:8px;left:8px;right:8px;height:63px;padding:8px 12px}.battle-brand .crest{font-size:24px}.battle-brand b{font-size:12px}.battle-brand span{font-size:9px}.topbar strong{font-size:18px}.topbar small{font-size:8px}.resource{top:82px;left:8px;height:38px;font-size:16px}.battle-meta{top:83px;right:10px;font-size:11px}.camera-tools{top:133px;right:8px}.boss-wrap{top:158px;width:75vw!important}.actions{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));padding:7px}.actions .summon{min-width:140px;flex:1}.actions button{min-height:52px}.selected{left:8px;right:8px;bottom:86px;max-width:none;grid-template-columns:40px 1fr auto auto auto;gap:5px;min-height:65px}.selected img{width:38px;height:45px}.selected #moveBtn{display:block}.selected button{font-size:10px;padding:7px;min-height:44px}.sel-info b{font-size:12px}.sel-info span{font-size:9px}.battle-help{left:0;right:0;text-align:center;bottom:164px;font-size:10px}.gallery-grid{grid-template-columns:repeat(3,1fr);gap:7px}.hero-card{min-height:140px;padding:6px}.hero-card img{height:100px}.hero-card b{font-size:11px}.hero-card small{font-size:8px}.modal-card{padding:16px}.detail-art{grid-template-columns:1fr;gap:0}.detail-art img{height:32vh}.detail-art h3{font-size:20px;margin:3px 0}.detail-art p{font-size:12px;margin:6px 0}.boss-preview .hero-card img{height:95px}.cine-copy{left:7%;top:63%}.cine-copy h2{font-size:30px}.cinematic img{width:100%;height:65%;right:0;top:0}.toast{top:188px;font-size:12px}.portrait-help{display:block;color:#babccc;font-size:10px;margin-top:8px}.build-tag{font-size:8px;top:12px;right:12px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* v3 functional UI additions: graphics assets remain unchanged. */
#gameCanvas{touch-action:none;overscroll-behavior:none}
.boss-phase{display:block!important;color:#eec7ff!important;font-size:8px!important;letter-spacing:.14em;margin:2px 0 4px}
.synergy-panel{position:absolute;right:20px;top:216px;pointer-events:none;min-width:170px;max-width:250px;padding:8px 10px;border-radius:7px;font-size:10px;color:#dbe7f2;line-height:1.55}
.synergy-panel b{display:block;color:#f2dfb6;font-size:10px;letter-spacing:.05em;margin-bottom:3px}
.synergy-chip{display:inline-flex;align-items:center;gap:4px;margin:2px 3px 2px 0;padding:3px 6px;border-radius:999px;background:#101928cc;border:1px solid var(--c,#7edfff55);color:var(--c,#dceaff);white-space:nowrap}
.reward-screen{position:absolute;inset:0;z-index:70;background:#02050bd9;display:grid;place-items:center;padding:18px}
.reward-card{width:min(920px,95vw);border-radius:10px;padding:26px;text-align:center;border-color:#cbae7666}
.reward-card>small{color:#d7bd86;letter-spacing:.24em;font-size:10px}.reward-card h2{font-family:Georgia,"Batang",serif;color:#f6e9cc;font-size:30px;margin:9px 0}.reward-card p{color:#aeb9c9;margin:0 0 18px}.reward-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.reward-choice{min-height:150px;padding:20px 16px;text-align:left;border:1px solid #d7bc7e55;background:linear-gradient(160deg,#1e2b43,#111727);position:relative;overflow:hidden}.reward-choice:before{content:'✦';position:absolute;right:10px;top:0;font-size:70px;color:#dcc38c13}.reward-choice b{display:block;font-size:18px;color:#f3dfb8;margin-bottom:10px}.reward-choice span{display:block;color:#b8c5d7;line-height:1.55;font-size:13px}.reward-choice:hover{border-color:#eed294aa;transform:translateY(-2px)}
@media(orientation:portrait){.synergy-panel{right:8px;top:202px;min-width:0;max-width:55vw;padding:6px 8px}.synergy-panel b{display:none}.synergy-chip{font-size:8px;padding:2px 5px}.reward-card{padding:18px 12px}.reward-card h2{font-size:24px}.reward-choices{grid-template-columns:1fr}.reward-choice{min-height:86px;padding:13px 14px}.reward-choice b{font-size:15px;margin-bottom:5px}.reward-choice span{font-size:11px}}
@media(max-height:620px) and (orientation:landscape){.synergy-panel{top:160px;right:10px}.reward-card{padding:15px}.reward-choice{min-height:105px;padding:12px}.reward-card h2{font-size:22px;margin:4px 0}.reward-card p{margin-bottom:9px}}
/* SYSTEM 3.2 gameplay-only UI additions */
.menu-select-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.menu-select-grid .field{margin-top:16px}.stage-rule-text{min-height:32px;margin:8px 0 4px;padding:7px 9px;border-left:2px solid #d3b77d66;color:#c8ced9;font-size:10px;line-height:1.55;background:#0b14218a}.difficulty-badge{display:block;color:#d7bd86;font-size:9px;letter-spacing:.04em;margin-top:2px}.relic-panel{position:absolute;right:20px;top:302px;pointer-events:none;min-width:170px;max-width:260px;padding:8px 10px;border-radius:7px;font-size:10px;color:#dbe7f2;line-height:1.55}.relic-panel b{display:block;color:#f2dfb6;font-size:10px;margin-bottom:3px}.relic-chip{display:inline-flex;margin:2px 3px 2px 0;padding:3px 6px;border-radius:999px;background:#211b2ccc;border:1px solid #d3b77d55;color:#efd9a8;white-space:nowrap}.actions .quick-merge{min-width:88px;font-size:11px}.actions .quick-merge:not(:disabled){border-color:#c68bff77;color:#eddcff}.relic-choice:before{content:'◆'!important;color:#ebd39a1f!important}
@media(orientation:portrait){.menu-select-grid{gap:6px}.menu-select-grid .field{margin-top:8px}.stage-rule-text{font-size:9px;min-height:28px;margin:5px 0}.relic-panel{right:8px;top:258px;max-width:58vw;padding:6px 8px}.relic-panel b{display:none}.relic-chip{font-size:8px;padding:2px 5px}.actions .quick-merge{min-width:74px;padding-left:7px;padding-right:7px}}
@media(max-height:620px) and (orientation:landscape){.relic-panel{right:10px;top:208px}.stage-rule-text{display:none}}


/* SYSTEM 3.9 clarity and layout pass */
.side-info-stack{position:absolute;right:20px;top:216px;width:min(285px,26vw);display:grid;gap:8px;z-index:4;pointer-events:none;max-height:calc(100vh - 355px);overflow:auto;scrollbar-width:thin}
.side-info-stack .synergy-panel,.side-info-stack .relic-panel{position:static!important;right:auto!important;top:auto!important;min-width:0!important;max-width:none!important;width:100%;margin:0;padding:9px 10px;border-radius:7px;line-height:1.45}
.panel-heading{display:grid;gap:2px;margin-bottom:6px}.panel-heading b{display:block!important;color:#f2dfb6!important;font-size:11px!important;margin:0!important}.panel-heading small{color:#aeb9ca;font-size:9px;line-height:1.35}
.panel-empty{padding:7px 8px;border:1px dashed #7edffb42;border-radius:6px;color:#a9bed0;font-size:9px;background:#0b1625a8}
.bonus-list,.relic-list{display:grid;gap:5px}.synergy-chip,.relic-item{display:grid!important;grid-template-columns:auto 1fr;align-items:center;gap:8px;margin:0!important;padding:6px 7px!important;border-radius:6px!important;white-space:normal!important;background:#101a2acc!important;border:1px solid color-mix(in srgb,var(--c,#d3b77d) 55%,transparent)!important}
.synergy-chip strong,.relic-item strong{font-size:9px;color:var(--c,#efd9a8);white-space:nowrap}.synergy-chip em,.relic-item em{font-style:normal;font-size:9px;color:#e2e8f2;text-align:right;line-height:1.25}.relic-item{--c:#d3b77d;grid-template-columns:1fr}.relic-item strong{font-size:10px}.relic-item em{text-align:left;color:#bfc8d6}
.actions{display:grid!important;grid-template-columns:auto auto;align-items:stretch;gap:7px!important;max-width:min(860px,calc(100vw - 36px))}.economy-row{display:flex;gap:6px;min-width:0}.utility-row{display:flex;gap:6px;align-items:stretch}.actions .economy-row button{display:grid;text-align:left;align-content:center;gap:1px;min-width:150px;min-height:54px;padding:8px 12px}.actions .economy-row button b{font-size:13px}.actions .economy-row button span{font-size:9px;color:#d6dfed}.actions .economy-row button i{font-style:normal;color:#ffe49b}.actions .summon{min-width:180px!important;margin:0!important}.actions .premium-summon{background:linear-gradient(135deg,#4b3c68,#6f456c);border-color:#d8a6ff72}.actions .premium-summon span{color:#ead7ff}.actions .ether-boost{background:linear-gradient(135deg,#5c4728,#49314e);border-color:#f1c36d68}.actions .ether-boost span{color:#f1ddba}.actions .utility-row button{min-width:48px;min-height:54px}.actions .quick-merge{min-width:92px!important}
.ether-tools{display:none!important}.global-tactics{top:150px}
.battle-help{max-width:760px}
@media(orientation:portrait){.side-info-stack{right:8px;top:220px;width:min(230px,62vw);max-height:260px;gap:5px}.side-info-stack .synergy-panel,.side-info-stack .relic-panel{padding:6px 7px}.panel-heading small{font-size:8px}.synergy-chip,.relic-item{padding:4px 5px!important;gap:5px}.synergy-chip strong,.synergy-chip em,.relic-item strong,.relic-item em{font-size:8px}.actions{left:8px!important;right:8px!important;grid-template-columns:1fr;gap:5px!important;padding:6px!important}.economy-row{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:4px}.actions .economy-row button{min-width:0!important;min-height:48px;padding:6px 7px}.actions .economy-row button b{font-size:10px}.actions .economy-row button span{font-size:7.5px;line-height:1.25}.utility-row{justify-content:flex-end;gap:4px}.actions .utility-row button{min-height:38px!important;min-width:42px!important;font-size:10px}.actions .quick-merge{min-width:74px!important}.selected{bottom:132px!important}.battle-help{bottom:220px!important;font-size:9px}.global-tactics{top:132px!important}.camera-tools{top:133px}}
@media(max-height:620px) and (orientation:landscape){.side-info-stack{right:10px;top:158px;width:240px;max-height:165px}.actions{bottom:6px!important}.global-tactics{top:108px!important}.actions .economy-row button{min-height:44px;padding:5px 8px}.actions .utility-row button{min-height:44px!important}.selected{max-width:calc(100vw - 760px)}}

/* SYSTEM 3.10 mobile clarity */
@media(orientation:portrait){.global-tactics #autoAllBtn{min-width:132px;font-size:9px}.selected .unit-tactics .reroll-unit{flex-basis:calc(50% - 4px)}}

/* SYSTEM 3.11 clear report */
.result-modal{background:radial-gradient(circle at 50% 28%,#3c2d1455,#03060de8 58%,#02040afb)}
.result-modal .modal-card{width:min(94vw,680px);max-height:92vh;overflow:auto;border:1px solid #e3c47a88;background:linear-gradient(155deg,#171a28f7,#0d1322f7 58%,#21170ef2);box-shadow:0 22px 80px #000c,0 0 60px #d9b56120}
.result-modal .modal-card h2{text-align:center;font-size:clamp(26px,4vw,42px);margin:0 0 12px;color:#ffe7aa;text-shadow:0 2px 18px #ffc96844}
.result-modal.defeat .modal-card{border-color:#9f657188;background:linear-gradient(155deg,#1c1721f7,#0d1322f7 62%,#29141af2)}
.result-modal.defeat .modal-card h2{color:#ffc2cb}
.clear-emblem{width:118px;height:118px;margin:4px auto 10px;border-radius:50%;display:grid;place-items:center;align-content:center;border:2px solid #ffe1a0;background:radial-gradient(circle,#513f1d,#161728 72%);box-shadow:0 0 40px #ffd86b38,inset 0 0 30px #f6ce6640;animation:clearPulse 1.8s ease-in-out infinite}
.clear-emblem span{font-family:Georgia,"Batang",serif;font-size:54px;line-height:.9;color:#fff1b7;font-weight:800}.clear-emblem small{font-size:10px;letter-spacing:.22em;color:#e4c77f;margin-top:8px}.clear-emblem.defeat{border-color:#b56f7d;background:radial-gradient(circle,#4b2531,#171522 72%);box-shadow:0 0 32px #c85e7730}.clear-emblem.defeat span{font-size:44px;color:#ffd0d5}.clear-emblem.defeat small{color:#ce8794}
.result-stage{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:16px;color:#d8dce7}.result-stage b{color:#fff0cc}.result-stage span{font-size:11px;color:#9ea9bb}.result-best{font-size:10px!important;color:#211c12!important;background:linear-gradient(90deg,#ffe198,#dba752);padding:4px 7px;border-radius:999px;font-weight:900;letter-spacing:.06em}.result-best.muted{background:#273044;color:#bfc8d8!important}
.result-main-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:10px 0 13px}.result-main-stats>div{padding:12px 8px;border:1px solid #d7bc7d24;background:#0d1423a8;border-radius:8px;text-align:center;min-width:0}.result-main-stats small{display:block;font-size:9px;color:#98a7bd;margin-bottom:5px}.result-main-stats strong{display:block;color:#f5e7c7;font-size:19px;white-space:nowrap}.result-main-stats .result-time{background:linear-gradient(150deg,#3e311866,#0d1423a8);border-color:#e8c46e55}.result-main-stats .result-time strong{font-family:Georgia,serif;color:#ffe28c;font-size:27px}
.result-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.result-detail-grid span{display:flex;align-items:baseline;justify-content:center;gap:4px;padding:9px 5px;border-radius:6px;background:#101827;border:1px solid #ffffff0c;color:#9daabc;font-size:10px}.result-detail-grid b{font-size:14px;color:#f1e2bd}.result-modal .modal-actions{justify-content:center}.result-modal .modal-actions button{min-width:130px}
.victory-confetti-layer{position:fixed;inset:0;z-index:65;pointer-events:none;overflow:hidden}.victory-confetti-layer i{position:absolute;left:var(--x);top:-8%;font-style:normal;color:#f6d77d;text-shadow:0 0 10px #fff1a8;animation:confettiDrop 2.5s cubic-bezier(.25,.65,.35,1) var(--d) forwards;transform:rotate(var(--r)) scale(var(--s));opacity:0}.victory-confetti-layer i:nth-child(3n){color:#70e7ff}.victory-confetti-layer i:nth-child(4n){color:#d899ff}.victory-confetti-layer i:nth-child(5n){color:#ff8d9b}
@keyframes confettiDrop{0%{top:-8%;opacity:0;transform:translateX(0) rotate(var(--r)) scale(var(--s))}12%{opacity:1}100%{top:108%;opacity:0;transform:translateX(70px) rotate(calc(var(--r) + 520deg)) scale(var(--s))}}
@keyframes clearPulse{50%{transform:scale(1.035);box-shadow:0 0 58px #ffd86b55,inset 0 0 36px #f6ce6650}}
@media(max-width:720px){.result-modal .modal-card{width:calc(100vw - 18px);padding:14px;max-height:94vh}.result-modal .modal-card h2{font-size:25px}.clear-emblem{width:88px;height:88px}.clear-emblem span{font-size:41px}.clear-emblem.defeat span{font-size:34px}.result-main-stats{grid-template-columns:repeat(2,1fr);gap:6px}.result-main-stats>div{padding:8px 5px}.result-main-stats strong{font-size:15px}.result-main-stats .result-time strong{font-size:22px}.result-detail-grid{grid-template-columns:repeat(2,1fr);gap:5px}.result-detail-grid span{padding:7px 4px}.result-modal .modal-actions{margin-top:12px}.result-modal .modal-actions button{min-width:110px}}

.menu-card #continueBtn{min-height:52px;background:linear-gradient(135deg,#253a50,#1b2737);border-color:#7cc9db88;display:flex;align-items:center;justify-content:space-between;padding:11px 16px}.menu-card #continueBtn b{font-size:15px;color:#dff8ff}.menu-card #continueBtn span{font-size:10px;color:#8fdae8;font-weight:600}.menu-card #continueBtn:not(.hidden){display:flex}.checkpoint-note{color:#8fd7e6!important;font-size:10px!important;margin:5px 0 0!important}

/* SYSTEM 3.16 mobile landscape HUD reflow */
.top-controls{position:absolute;right:20px;top:150px;display:flex;gap:6px;padding:6px;pointer-events:auto;border-radius:8px;z-index:8}
.top-controls button{min-height:34px;padding:7px 10px;font-size:10px;border-radius:7px;background:linear-gradient(180deg,#273248,#171f31);border:1px solid #d8c18b38;white-space:nowrap}
.top-controls #bossFocusBtn.is-active{border-color:#ffb3cf;background:linear-gradient(180deg,#593044,#2d1b29);color:#ffd9e7;box-shadow:0 0 14px #ff5f9a2c}
.top-controls #autoAllBtn{font-weight:800;transition:.16s background,.16s border-color,.16s color,.16s box-shadow}
.top-controls #autoAllBtn.is-on{background:linear-gradient(180deg,#195948,#12382f);border-color:#5df0b2;color:#d8fff0;box-shadow:0 0 16px #43e9a72b}
.top-controls #autoAllBtn.is-off{background:linear-gradient(180deg,#363d4c,#202633);border-color:#8c97aa;color:#d0d5de;box-shadow:none}
.top-controls #autoAllBtn.is-mixed{background:linear-gradient(180deg,#675126,#382c1b);border-color:#ffc968;color:#ffe6ab;box-shadow:0 0 14px #ffbb4730}
.actions{grid-template-columns:1fr!important}.actions .economy-row{display:grid;grid-template-columns:1.2fr 1fr 1fr .78fr;gap:6px}.actions .quick-merge{min-width:0!important;text-align:center!important;align-content:center!important}

@media(max-height:620px) and (orientation:landscape){
  .topbar{height:54px;top:6px;left:8px;right:8px;padding:5px 12px}
  .resource{top:64px;left:8px;height:36px;padding:5px 9px;font-size:15px}
  .resource img{width:24px;height:24px}
  .battle-meta{top:64px;left:118px;right:auto;text-align:left;font-size:9px;line-height:1.35;max-width:230px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .battle-meta span{display:inline;margin-left:7px;font-size:8px}.battle-meta .difficulty-badge{display:none}
  .top-controls{right:8px;top:64px;padding:4px;gap:4px;background:linear-gradient(135deg,#111a2be8,#111525e8)}
  .top-controls button{min-height:34px;padding:5px 7px;font-size:8.5px;min-width:42px}
  .top-controls #bossFocusBtn{min-width:72px}.top-controls #autoAllBtn{min-width:82px}
  .camera-tools{right:8px;top:105px;gap:4px}.camera-tools button{min-height:32px;padding:5px 8px;font-size:8.5px}
  .boss-wrap{top:55px;width:34vw!important;max-width:300px;padding:5px 9px}

  .side-info-stack{right:8px;top:144px;width:178px;max-height:84px;gap:4px;overflow:auto;pointer-events:auto;background:transparent}
  .side-info-stack .synergy-panel,.side-info-stack .relic-panel{padding:5px 6px!important;background:linear-gradient(135deg,#101827e8,#0d1220e8)!important;box-shadow:0 4px 14px #0007}
  .panel-heading{display:flex!important;align-items:center;justify-content:space-between;gap:6px;margin-bottom:3px!important}.panel-heading b{font-size:8.5px!important}.panel-heading small{display:none!important}
  .bonus-list{display:grid!important;grid-template-columns:1fr 1fr;gap:3px!important}.synergy-chip{display:grid!important;grid-template-columns:1fr!important;gap:0!important;padding:3px 4px!important;min-width:0}.synergy-chip strong,.synergy-chip em{font-size:7px!important;line-height:1.2!important;text-align:left!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
  .panel-empty{padding:4px 5px;font-size:7.5px;line-height:1.25}.relic-list{gap:3px}.relic-item{padding:3px 4px!important}.relic-item strong,.relic-item em{font-size:7px!important;line-height:1.2}

  .selected{left:8px!important;right:auto!important;bottom:6px!important;width:42vw!important;max-width:none!important;min-height:0!important;padding:5px!important;gap:4px!important;grid-template-columns:38px minmax(105px,1fr) repeat(3,42px)!important;border-radius:7px}
  .selected img{width:36px!important;height:44px!important}.sel-info{min-width:0}.sel-info b{font-size:10px}.sel-info span{font-size:7.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sel-info small{display:none!important}
  .selected>button{min-height:34px!important;padding:4px!important;font-size:8px!important}
  .selected .unit-tactics{gap:3px!important;padding-top:3px!important;flex-wrap:nowrap!important;overflow-x:auto;scrollbar-width:none}.selected .unit-tactics::-webkit-scrollbar{display:none}.selected .unit-tactics button{flex:1 0 auto!important;min-width:55px!important;min-height:29px!important;padding:4px 5px!important;font-size:7.5px!important;white-space:nowrap}

  .actions{left:auto!important;right:8px!important;bottom:6px!important;width:54vw!important;max-width:none!important;padding:5px!important;gap:4px!important;border-radius:7px}
  .actions .economy-row{grid-template-columns:1.18fr 1fr 1fr .72fr!important;gap:4px!important}
  .actions .economy-row button{min-width:0!important;min-height:50px!important;padding:4px 6px!important;gap:0!important}
  .actions .economy-row button b{font-size:9px!important;white-space:nowrap}.actions .economy-row button span{font-size:6.8px!important;line-height:1.15!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actions .quick-merge{font-size:8px!important;white-space:normal!important;line-height:1.15!important}
  .battle-help{display:none!important}
}
@media(max-height:620px) and (orientation:landscape){.camera-tools{top:112px!important}.side-info-stack{top:151px!important}}


/* SYSTEM 3.17 mobile landscape layout refinement */
@media(max-height:620px) and (orientation:landscape){
  /* Selected guardian: vertical left card, controls arranged in compact rows */
  .selected{
    left:8px!important;
    right:auto!important;
    top:112px!important;
    bottom:8px!important;
    width:230px!important;
    max-width:230px!important;
    min-height:0!important;
    padding:7px!important;
    gap:5px!important;
    overflow:auto!important;
    align-content:start!important;
    grid-template-columns:48px 1fr 1fr!important;
    grid-template-rows:auto auto auto!important;
    border-radius:8px!important;
  }
  .selected img{
    grid-column:1!important;
    grid-row:1!important;
    width:46px!important;
    height:56px!important;
    align-self:start!important;
  }
  .selected .sel-info{
    grid-column:2 / 4!important;
    grid-row:1!important;
    min-width:0!important;
    padding:1px 2px!important;
  }
  .selected .sel-info b{font-size:11px!important;line-height:1.25!important}
  .selected .sel-info span{font-size:8px!important;line-height:1.35!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
  .selected .sel-info small{display:block!important;font-size:7.5px!important;line-height:1.35!important;max-height:31px;overflow:hidden;color:#aebbc9}
  .selected #moveBtn,.selected #mergeBtn,.selected #sellBtn{
    min-height:34px!important;
    padding:4px 6px!important;
    font-size:8.5px!important;
  }
  .selected #moveBtn{grid-column:1 / 2!important;grid-row:2!important}
  .selected #mergeBtn{grid-column:2 / 3!important;grid-row:2!important}
  .selected #sellBtn{grid-column:3 / 4!important;grid-row:2!important}
  .selected .unit-tactics{
    grid-column:1 / 4!important;
    grid-row:3!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
    padding-top:1px!important;
    overflow:visible!important;
  }
  .selected .unit-tactics button{
    min-width:0!important;
    width:100%!important;
    min-height:31px!important;
    padding:4px 5px!important;
    font-size:8px!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .selected .unit-tactics .reroll-unit{grid-column:1 / 3!important}

  /* Right bonus panel: one bonus per row */
  .side-info-stack{
    right:8px!important;
    top:151px!important;
    width:166px!important;
    max-height:160px!important;
    gap:4px!important;
    overflow:auto!important;
  }
  .side-info-stack .synergy-panel,.side-info-stack .relic-panel{padding:5px 6px!important}
  .bonus-list{display:grid!important;grid-template-columns:1fr!important;gap:4px!important}
  .synergy-chip{
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    align-items:center!important;
    gap:6px!important;
    padding:4px 5px!important;
  }
  .synergy-chip strong{font-size:8px!important;line-height:1.2!important;white-space:nowrap!important;overflow:visible!important}
  .synergy-chip em{font-size:8px!important;line-height:1.2!important;text-align:right!important;white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important}

  /* Economy buttons: narrower block, larger labels */
  .actions{
    left:auto!important;
    right:8px!important;
    bottom:6px!important;
    width:47vw!important;
    max-width:410px!important;
    min-width:360px!important;
    padding:5px!important;
  }
  .actions .economy-row{
    grid-template-columns:1.17fr 1fr 1fr .76fr!important;
    gap:4px!important;
  }
  .actions .economy-row button{
    min-width:0!important;
    min-height:52px!important;
    padding:5px 6px!important;
  }
  .actions .economy-row button b{font-size:10.5px!important;line-height:1.15!important;white-space:nowrap!important}
  .actions .economy-row button span{font-size:8px!important;line-height:1.2!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .actions .quick-merge{font-size:9px!important;line-height:1.15!important}
}

@media(max-width:700px) and (max-height:420px) and (orientation:landscape){
  .selected{width:218px!important;max-width:218px!important}
  .actions{width:46vw!important;min-width:330px!important}
  .actions .economy-row button b{font-size:9.5px!important}
  .actions .economy-row button span{font-size:7.5px!important}
  .side-info-stack{width:156px!important}
}

/* SYSTEM 3.17 compact left guardian card */
@media(max-height:620px) and (orientation:landscape){
  .selected{bottom:auto!important;max-height:calc(100vh - 120px)!important}
}

/* SYSTEM 3.18 mobile landscape compact control rail */
@media(max-height:620px) and (orientation:landscape){
  /* Selected guardian: narrow left rail, no move/merge buttons. Drag/touch handles movement. */
  .selected{
    left:8px!important;
    right:auto!important;
    top:112px!important;
    bottom:auto!important;
    width:184px!important;
    max-width:184px!important;
    min-height:0!important;
    max-height:calc(100vh - 122px)!important;
    padding:6px!important;
    gap:4px!important;
    overflow:auto!important;
    align-content:start!important;
    grid-template-columns:42px 1fr!important;
    grid-template-rows:auto auto!important;
    border-radius:8px!important;
    background:linear-gradient(145deg,#0d1728ee,#101525e8)!important;
  }
  .selected img{
    grid-column:1!important;
    grid-row:1!important;
    width:40px!important;
    height:50px!important;
    align-self:start!important;
  }
  .selected .sel-info{
    grid-column:2!important;
    grid-row:1!important;
    min-width:0!important;
    padding:0 1px!important;
  }
  .selected .sel-info b{font-size:10.5px!important;line-height:1.22!important}
  .selected .sel-info span{font-size:7.8px!important;line-height:1.28!important;white-space:normal!important}
  .selected .sel-info small{display:none!important}
  .selected .unit-tactics{
    grid-column:1 / 3!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
    padding-top:1px!important;
    overflow:visible!important;
  }
  .selected .unit-tactics button{
    min-width:0!important;
    width:100%!important;
    min-height:29px!important;
    padding:4px!important;
    font-size:7.8px!important;
    line-height:1.12!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .selected .unit-tactics #sellBtn{color:#ffd9c9!important;border-color:#c786705d!important}
  .selected .unit-tactics .reroll-unit{grid-column:auto!important;color:#aef2f3!important;border-color:#6fdadd77!important}

  /* Economy: five compact actions. Selected merge sits immediately right of quick merge. */
  .actions{
    left:auto!important;
    right:8px!important;
    bottom:6px!important;
    width:42vw!important;
    max-width:356px!important;
    min-width:320px!important;
    padding:4px!important;
    border-radius:7px!important;
  }
  .actions .economy-row{
    display:grid!important;
    grid-template-columns:1.18fr 1fr 1fr .72fr .72fr!important;
    gap:3px!important;
  }
  .actions .economy-row button{
    min-width:0!important;
    min-height:48px!important;
    padding:5px 5px!important;
    gap:1px!important;
    border-radius:6px!important;
    text-align:center!important;
    align-content:center!important;
  }
  .actions .economy-row button b{
    font-size:10.6px!important;
    line-height:1.12!important;
    font-weight:800!important;
    white-space:nowrap!important;
    letter-spacing:-.02em!important;
  }
  .actions .economy-row button span{
    font-size:7.8px!important;
    line-height:1.15!important;
    font-weight:700!important;
    white-space:nowrap!important;
    overflow:visible!important;
    text-overflow:clip!important;
  }
  .actions .economy-row button span i{
    font-size:10px!important;
    font-weight:900!important;
    text-shadow:0 1px 4px #0008!important;
  }
  .actions .summon b{color:#281d0e!important}.actions .summon span{color:#5d401b!important}.actions .summon span i{color:#0e5080!important;text-shadow:none!important}
  .actions .premium-summon b{color:#f5e9ff!important}.actions .premium-summon span{color:#d8c1f0!important}.actions .premium-summon span i{color:#fff2a8!important}
  .actions .ether-boost b{color:#ffe6b0!important}.actions .ether-boost span{color:#e7cfa9!important}.actions .ether-boost span i{color:#ffd76b!important}
  .actions .quick-merge,.actions .merge-selected{
    min-width:0!important;
    font-size:8.7px!important;
    line-height:1.15!important;
    white-space:normal!important;
    color:#eee4ff!important;
    border-color:#b68ae977!important;
  }
  .actions .merge-selected:not(:disabled){color:#b9fbff!important;border-color:#70e3e888!important;background:linear-gradient(180deg,#234150,#172c3a)!important}

  /* Bonus list stays narrow and vertical. */
  .side-info-stack{width:158px!important}
  .bonus-list{grid-template-columns:1fr!important}
  .synergy-chip{grid-template-columns:auto 1fr!important}
}

@media(max-width:700px) and (max-height:420px) and (orientation:landscape){
  .selected{width:174px!important;max-width:174px!important}
  .actions{width:41vw!important;min-width:300px!important;max-width:340px!important}
  .actions .economy-row button b{font-size:9.8px!important}
  .actions .economy-row button span{font-size:7.3px!important}
  .actions .economy-row button span i{font-size:9.3px!important}
  .side-info-stack{width:150px!important}
}

/* SYSTEM 3.18 five-action economy row on larger screens too */
.actions .economy-row{grid-template-columns:1.2fr 1fr 1fr .78fr .78fr}
.actions .merge-selected{min-width:78px;text-align:center;align-content:center}
@media(max-height:620px) and (orientation:landscape){
  .selected .unit-tactics #sellBtn{grid-column:auto!important;grid-row:auto!important}
}


/* SYSTEM 3.19 mobile-only ultra-compact selected guardian panel */
@media(max-height:620px) and (orientation:landscape){
  /* Keep desktop/PC target controls intact, but hide target mode on mobile landscape. */
  .selected{
    left:8px!important;
    top:112px!important;
    bottom:auto!important;
    width:132px!important;
    max-width:132px!important;
    min-height:0!important;
    max-height:none!important;
    padding:6px!important;
    gap:4px!important;
    overflow:visible!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:auto auto!important;
    align-content:start!important;
  }
  .selected img{display:none!important}
  .selected .sel-info{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    padding:0 2px 3px!important;
    border-bottom:1px solid #7f98ad30!important;
  }
  .selected .sel-info b{
    display:block!important;
    font-size:11px!important;
    line-height:1.2!important;
    color:#f7e7c2!important;
    margin-bottom:3px!important;
    white-space:nowrap!important;
  }
  .selected #selectedStats{
    display:block!important;
    font-size:0!important;
    line-height:1.25!important;
    white-space:nowrap!important;
  }
  .selected #selectedStats::after{
    content:attr(data-mobile)!important;
    font-size:8.2px!important;
    color:#b9c9d9!important;
    letter-spacing:-.02em!important;
  }
  .selected .sel-info small{display:none!important}
  .selected .unit-tactics{
    grid-column:1!important;
    grid-row:2!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:4px!important;
    padding:0!important;
    overflow:visible!important;
  }
  .selected .unit-tactics #targetModeBtn{display:none!important}
  .selected .unit-tactics button{
    min-width:0!important;
    width:100%!important;
    min-height:29px!important;
    padding:4px 3px!important;
    font-size:8px!important;
    line-height:1.1!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  /* User-requested order:
     스킬자동 / 자동사용중 / 판매+잠금 / 재소환 */
  .selected .unit-tactics #skillModeBtn{
    grid-column:1 / 3!important;
    grid-row:1!important;
    font-size:0!important;
  }
  .selected .unit-tactics #skillModeBtn::after{
    content:attr(data-mobile)!important;
    font-size:8.5px!important;
  }
  .selected .unit-tactics #manualSkillBtn{
    grid-column:1 / 3!important;
    grid-row:2!important;
  }
  .selected .unit-tactics #sellBtn{
    grid-column:1!important;
    grid-row:3!important;
  }
  .selected .unit-tactics #unitLockBtn{
    grid-column:2!important;
    grid-row:3!important;
  }
  .selected .unit-tactics .reroll-unit{
    grid-column:1 / 3!important;
    grid-row:4!important;
    min-height:31px!important;
  }
}
@media(max-width:700px) and (max-height:420px) and (orientation:landscape){
  .selected{width:124px!important;max-width:124px!important}
  .selected .sel-info b{font-size:10.5px!important}
  .selected #selectedStats::after{font-size:7.8px!important}
  .selected .unit-tactics button{font-size:7.7px!important}
}

/* SYSTEM 3.20: dedicated mobile-only selected guardian rail.
   The desktop selected panel remains untouched; mobile no longer depends on pseudo-content/data-* text. */
#mobileSelectedPanel{display:none!important}
@media(max-height:620px) and (orientation:landscape){
  /* Never render the desktop selected card on mobile landscape. */
  #selectedPanel{display:none!important}

  #mobileSelectedPanel:not(.hidden){
    position:absolute!important;
    left:8px!important;
    top:112px!important;
    width:128px!important;
    max-width:128px!important;
    padding:6px!important;
    display:flex!important;
    flex-direction:column!important;
    gap:4px!important;
    border-radius:7px!important;
    z-index:24!important;
    overflow:hidden!important;
    background:linear-gradient(180deg,#111a2bf5,#0c1322f2)!important;
    border:1px solid #bda57668!important;
  }
  #mobileSelectedPanel .mobile-selected-info{
    display:block!important;
    padding:2px 3px 5px!important;
    border-bottom:1px solid #8096aa35!important;
    min-height:34px!important;
  }
  #mobileSelectedPanel .mobile-selected-info b{
    display:block!important;
    color:#f7e7c2!important;
    font-size:10.5px!important;
    line-height:1.2!important;
    font-weight:800!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  #mobileSelectedPanel .mobile-selected-info span{
    display:block!important;
    margin-top:3px!important;
    color:#bfd0e0!important;
    font-size:8.2px!important;
    line-height:1.2!important;
    white-space:nowrap!important;
  }
  #mobileSelectedPanel button{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    height:30px!important;
    min-height:30px!important;
    padding:4px 5px!important;
    margin:0!important;
    font-size:8.7px!important;
    line-height:1!important;
    font-weight:700!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    border-radius:6px!important;
  }
  #mobileSelectedPanel .mobile-skill-mode{
    border-color:#6fddea88!important;
    color:#d5fbff!important;
    background:linear-gradient(180deg,#20384a,#16293a)!important;
  }
  #mobileSelectedPanel .mobile-skill-mode.is-auto{
    border-color:#72d9c999!important;
    color:#d8fff1!important;
    background:linear-gradient(180deg,#194339,#163129)!important;
  }
  #mobileSelectedPanel .mobile-manual-skill:disabled{
    opacity:.72!important;
    color:#c1cad4!important;
    background:linear-gradient(180deg,#252d3d,#1a2231)!important;
  }
  #mobileSelectedPanel .mobile-sell{
    color:#ffd9c9!important;
    border-color:#c786705d!important;
  }
  #mobileSelectedPanel .mobile-lock.is-active{
    color:#ffe1a6!important;
    border-color:#d1ad6088!important;
    background:linear-gradient(180deg,#4a3920,#2b251a)!important;
  }
  #mobileSelectedPanel .mobile-reroll{
    color:#aef2f3!important;
    border-color:#6fdadd77!important;
    background:linear-gradient(180deg,#1d4045,#173035)!important;
  }
  #mobileSelectedPanel .mobile-reroll:disabled{opacity:.48!important}
}
@media(max-width:700px) and (max-height:420px) and (orientation:landscape){
  #mobileSelectedPanel:not(.hidden){width:122px!important;max-width:122px!important}
  #mobileSelectedPanel .mobile-selected-info b{font-size:10px!important}
  #mobileSelectedPanel .mobile-selected-info span{font-size:7.8px!important}
  #mobileSelectedPanel button{font-size:8.2px!important;height:29px!important;min-height:29px!important}
}

/* SYSTEM 3.21: robust mobile selected rail.
   Use runtime mobile-game-active class instead of viewport-height media queries,
   so real devices with unusual CSS viewport/DPR still render the selected unit panel. */
body.mobile-game-active #selectedPanel{display:none!important}
body.mobile-game-active #mobileSelectedPanel.hidden{display:none!important}
body.mobile-game-active #mobileSelectedPanel:not(.hidden){
  position:absolute!important;
  left:8px!important;
  top:112px!important;
  width:128px!important;
  max-width:128px!important;
  padding:6px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:4px!important;
  border-radius:7px!important;
  z-index:24!important;
  overflow:hidden!important;
  background:linear-gradient(180deg,#111a2bf5,#0c1322f2)!important;
  border:1px solid #bda57668!important;
}
body.mobile-game-active #mobileSelectedPanel .mobile-selected-info{
  display:block!important;
  padding:2px 3px 5px!important;
  border-bottom:1px solid #8096aa35!important;
  min-height:34px!important;
}
body.mobile-game-active #mobileSelectedPanel .mobile-selected-info b{
  display:block!important;
  color:#f7e7c2!important;
  font-size:10.5px!important;
  line-height:1.2!important;
  font-weight:800!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.mobile-game-active #mobileSelectedPanel .mobile-selected-info span{
  display:block!important;
  margin-top:3px!important;
  color:#bfd0e0!important;
  font-size:8.2px!important;
  line-height:1.2!important;
  white-space:nowrap!important;
}
body.mobile-game-active #mobileSelectedPanel button{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:30px!important;
  min-height:30px!important;
  padding:4px 5px!important;
  margin:0!important;
  font-size:8.7px!important;
  line-height:1!important;
  font-weight:700!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  border-radius:6px!important;
}
body.mobile-game-active #mobileSelectedPanel .mobile-skill-mode{
  border-color:#6fddea88!important;color:#d5fbff!important;
  background:linear-gradient(180deg,#20384a,#16293a)!important;
}
body.mobile-game-active #mobileSelectedPanel .mobile-skill-mode.is-auto{
  border-color:#72d9c999!important;color:#d8fff1!important;
  background:linear-gradient(180deg,#194339,#163129)!important;
}
body.mobile-game-active #mobileSelectedPanel .mobile-manual-skill:disabled{
  opacity:.72!important;color:#c1cad4!important;
  background:linear-gradient(180deg,#252d3d,#1a2231)!important;
}
body.mobile-game-active #mobileSelectedPanel .mobile-sell{
  color:#ffd9c9!important;border-color:#c786705d!important;
}
body.mobile-game-active #mobileSelectedPanel .mobile-lock.is-active{
  color:#ffe1a6!important;border-color:#d1ad6088!important;
  background:linear-gradient(180deg,#4a3920,#2b251a)!important;
}
body.mobile-game-active #mobileSelectedPanel .mobile-reroll{
  color:#aef2f3!important;border-color:#6fdadd77!important;
  background:linear-gradient(180deg,#1d4045,#173035)!important;
}
body.mobile-game-active #mobileSelectedPanel .mobile-reroll:disabled{opacity:.48!important}

@media(max-width:700px) and (orientation:landscape){
  body.mobile-game-active #mobileSelectedPanel:not(.hidden){width:122px!important;max-width:122px!important}
  body.mobile-game-active #mobileSelectedPanel .mobile-selected-info b{font-size:10px!important}
  body.mobile-game-active #mobileSelectedPanel .mobile-selected-info span{font-size:7.8px!important}
  body.mobile-game-active #mobileSelectedPanel button{font-size:8.2px!important;height:29px!important;min-height:29px!important}
}

/* SYSTEM 3.23: mobile selected controls must receive real touch/pointer input.
   HUD is pointer-events:none, so this panel must explicitly opt back in. */
#mobileSelectedPanel{pointer-events:auto!important;touch-action:manipulation!important;-webkit-tap-highlight-color:transparent}
#mobileSelectedPanel button{pointer-events:auto!important;touch-action:manipulation!important;user-select:none!important;-webkit-user-select:none!important}
body.mobile-game-active #mobileSelectedPanel{pointer-events:auto!important}
body.mobile-game-active #mobileSelectedPanel button{pointer-events:auto!important}