:root{color-scheme:dark;--night:#070a0f;--panel:#12131a;--gold:#d9a758;--gold2:#f2d08c;--ink:#f4e7cb;--muted:#a79a83;--danger:#c84f3c}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#05070b;color:var(--ink);font-family:"Noto Serif KR","Batang",Georgia,serif}button{font:inherit}.game-shell{min-height:100vh;display:grid;grid-template-rows:78px minmax(0,1fr) 126px;background:radial-gradient(circle at 50% -20%,#33445c,#080b11 45%)}.topbar{display:grid;grid-template-columns:minmax(230px,1fr) auto minmax(240px,320px) auto 44px;align-items:center;gap:clamp(14px,2vw,34px);padding:10px clamp(16px,3vw,48px);border-bottom:1px solid #d6a45255;background:linear-gradient(#0a0d12f2,#111118f2);box-shadow:0 7px 22px #0009;z-index:8}.brand{display:flex;align-items:center;gap:12px}.crest{display:grid;place-items:center;width:43px;height:50px;border:1px solid #e0b361;clip-path:polygon(50% 0,95% 14%,88% 78%,50% 100%,12% 78%,5% 14%);color:#efc875;font-size:24px;background:#4a251c}.brand strong{display:block;font-size:clamp(20px,2vw,29px);letter-spacing:.08em}.brand small,.topbar small,.panel-kicker,.tray-title small{display:block;color:#b99255;font:10px/1.4 ui-monospace,monospace;letter-spacing:.18em}.wave-block{text-align:center}.wave-block b{font-size:20px}.resource{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px}.hp-track{height:10px;border:1px solid #a8783c;background:#241410;box-shadow:inset 0 0 7px #000}.hp-track i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#77281f,#d45c3d,#e7a35e);transition:width .25s}.gold b{color:#f5c56d;white-space:nowrap}.icon-button,.control{border:1px solid #99703a;color:var(--ink);background:#181921;cursor:pointer}.icon-button{width:42px;height:42px}.battle-layout{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) clamp(250px,20vw,340px);gap:0}.battlefield{position:relative;min-width:0;min-height:0;overflow:hidden;background:#0a0f16}.battlefield canvas{display:block;width:100%;height:100%;object-fit:cover;touch-action:none;cursor:crosshair}.detail-panel{position:relative;z-index:4;padding:22px;background:linear-gradient(100deg,#0b0d12,#17161a);border-left:2px solid #806039;box-shadow:-14px 0 35px #0008;overflow:auto}.detail-panel:before,.build-tray:before{content:"";position:absolute;inset:6px;pointer-events:none;border:1px solid #d7a65524}.panel-kicker{margin-bottom:12px}.empty-detail{text-align:center;padding:35px 8px;color:var(--muted)}.sigil{font-size:50px;color:#9c7342}.detail-panel h2{margin:7px 0;color:#f1d69e}.detail-panel p{color:var(--muted);font:14px/1.55 system-ui,sans-serif}.tower-portrait{width:122px;height:110px;margin:0 auto;background-image:url("./assets/unit-atlas.png");background-size:488px 325px;background-repeat:no-repeat;filter:drop-shadow(0 12px 10px #000)}.tower-portrait.archer{background-position:0 0}.tower-portrait.alchemist{background-position:-122px 0}.tower-portrait.beacon{background-position:-244px 0}.tower-detail{text-align:center}.tower-detail dl{margin:16px 0;border-top:1px solid #ffffff13}.tower-detail dl div{display:flex;justify-content:space-between;padding:9px 4px;border-bottom:1px solid #ffffff13}.tower-detail dt{color:var(--muted)}.tower-detail dd{margin:0;color:#f0cc84}.panel-action,.wall-card button,#resultDialog button{width:100%;border:1px solid #d4a85e;background:linear-gradient(#8f4c29,#5c2e20);color:#fff0d0;padding:13px;cursor:pointer}.panel-action:disabled,.wall-card button:disabled,.tower-card:disabled{opacity:.42;cursor:not-allowed}.wall-card{margin-top:18px;padding:14px;border:1px solid #85653e;background:#1d1815}.wall-card>div{display:flex;justify-content:space-between;margin-bottom:12px}.message{position:absolute;left:50%;top:18px;transform:translateX(-50%);padding:9px 18px;border:1px solid #c99a5577;background:#090b10dd;color:#f3d8a5;box-shadow:0 7px 20px #0008;opacity:0;transition:.2s;pointer-events:none;white-space:nowrap}.message.show{opacity:1;transform:translate(-50%,4px)}.controls{position:absolute;left:18px;bottom:17px;display:flex;gap:8px}.control{min-width:48px;height:44px;padding:0 14px;border-radius:5px;background:#0e1218dc;box-shadow:0 5px 16px #000}.control.primary{background:linear-gradient(#aa6731,#71371f);border-color:#efc274;font-weight:700}.battle-stats{position:absolute;right:18px;top:18px;display:flex;gap:10px}.battle-stats span{padding:7px 10px;background:#080b10cf;border:1px solid #a9804844;color:var(--muted);font:12px system-ui,sans-serif}.battle-stats b{color:var(--ink)}.build-tray{position:relative;display:grid;grid-template-columns:minmax(190px,.8fr) repeat(3,minmax(210px,1fr));gap:10px;padding:13px clamp(16px,4vw,70px);border-top:2px solid #84613a;background:linear-gradient(#15151b,#090a0e);z-index:7}.tray-title{align-self:center}.tray-title b{display:block;margin-top:7px;font-size:14px;color:var(--muted)}.tower-card{display:grid;grid-template-columns:68px 1fr auto;align-items:center;gap:9px;text-align:left;border:1px solid #705537;background:linear-gradient(135deg,#25221e,#11131a);color:var(--ink);cursor:pointer;padding:7px 10px}.tower-card:hover,.tower-card.active{border-color:#e4b967;box-shadow:inset 0 0 18px #a467282f}.tower-card span b,.tower-card span small{display:block}.tower-card span small{color:var(--muted);font:11px system-ui,sans-serif}.tower-card em{font-style:normal;color:#f0bd60;font-size:13px}.card-art{width:64px;height:70px;background-image:url("./assets/unit-atlas.png");background-size:256px 171px;background-repeat:no-repeat;filter:drop-shadow(0 6px 5px #000)}.card-art.archer{background-position:0 0}.card-art.alchemist{background-position:-64px 0}.card-art.beacon{background-position:-128px 0}#resultDialog{width:min(520px,calc(100% - 30px));border:1px solid #c5964f;background:#0d1118;color:var(--ink);padding:7px;box-shadow:0 30px 90px #000}#resultDialog::backdrop{background:#020407db}.result-card{text-align:center;padding:38px;border:1px solid #6f5736}.result-card>small{color:#c79b57;letter-spacing:.2em}.result-card h1{font-size:38px;margin:.25em}.result-card p{color:var(--muted)}.result-score{display:grid;margin:24px 0}.result-score b{font-size:40px;color:#f0bd63}.rotate-tip{display:none}.game-shell.shake{animation:shake .25s linear}@keyframes shake{25%{transform:translateX(-5px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}@media(max-width:980px){.game-shell{grid-template-rows:64px minmax(0,1fr) 104px}.topbar{grid-template-columns:1fr auto auto auto;padding:7px 12px;gap:10px}.resource{position:absolute;left:12px;right:12px;top:62px;z-index:10;background:#090b10d9;padding:4px 8px}.brand small,.gold small,.wave-block small{display:none}.brand .crest{width:34px;height:40px}.battle-layout{grid-template-columns:1fr}.detail-panel{position:absolute;right:8px;bottom:111px;width:270px;max-height:60vh;border:1px solid #8b693d;border-left-width:1px;transform:translateX(110%);transition:.25s}.detail-panel.open{transform:translateX(0)}.build-tray{grid-template-columns:repeat(3,1fr);padding:8px;gap:5px}.tray-title{display:none}.tower-card{display:flex;justify-content:center;padding:5px}.tower-card>span:not(.card-art),.tower-card em{display:none}.card-art{width:70px;height:72px;background-size:280px 187px}.card-art.alchemist{background-position:-70px 0}.card-art.beacon{background-position:-140px 0}.message{top:32px;font-size:12px}.battle-stats{top:36px}.controls{bottom:10px;left:10px}.control{height:38px}.wall-card{margin-top:10px}}@media(orientation:portrait) and (max-width:700px){.rotate-tip{display:grid;position:fixed;inset:0;place-items:center;text-align:center;padding:30px;background:#080b10f5;color:#efd49c;z-index:50}}
@media(max-width:980px){.detail-panel{display:none;transform:none}.detail-panel.open{display:block;transform:none}}
.battlefield canvas{object-fit:fill}
@media(max-width:980px){.tower-card{position:relative}.tower-card em{display:block;position:absolute;right:6px;bottom:4px;font-size:12px;color:#f0bd60}}
.topbar{grid-template-columns:minmax(230px,1fr) auto minmax(240px,320px) auto max-content}.audio-controls{display:flex;align-items:center;gap:7px}.icon-button[data-audio="on"]{border-color:#efc66d;color:#ffe0a0;box-shadow:0 0 12px #dba24b44}.icon-button[data-audio="muted"]{color:#8f8b83;border-color:#514b43}.volume-control{display:grid;gap:2px;width:78px;color:#b99255;font:9px/1 ui-monospace,monospace;letter-spacing:.12em}.volume-control input{width:78px;height:12px;accent-color:#d9a758;cursor:pointer}@media(max-width:980px){.topbar{grid-template-columns:1fr auto auto auto}.audio-controls{gap:3px}.volume-control{display:none}}
html,body{height:100%;overflow:hidden}.game-shell{height:100dvh;min-height:0;grid-template-rows:68px minmax(0,1fr) 112px}.topbar{grid-template-columns:minmax(210px,1fr) auto minmax(210px,300px) auto max-content auto;padding-top:7px;padding-bottom:7px}.main-exit{display:grid;place-items:center;min-width:70px;height:42px;border:1px solid #99703a;color:#e8d1a3;background:#181921;text-decoration:none;font:700 13px system-ui,sans-serif}.main-exit:hover{border-color:#efc66d;background:#4a2a1f}.story-card{position:absolute;left:16px;top:16px;z-index:3;display:grid;gap:3px;width:min(370px,38%);padding:10px 13px;border:1px solid #a97c4170;background:#090b10c7;pointer-events:none}.story-card small{color:#c9994e;font:9px ui-monospace,monospace;letter-spacing:.16em}.story-card b{font-size:13px;color:#f0d49e}.story-card span{font:11px/1.35 system-ui,sans-serif;color:#b7aa92}.boss-speech{position:absolute;left:50%;bottom:74px;z-index:6;max-width:min(720px,80%);transform:translate(-50%,12px);padding:12px 22px;border:1px solid #b84343;background:#17090bea;color:#ffd9bd;font:700 17px/1.45 system-ui,sans-serif;text-align:center;opacity:0;transition:.25s;pointer-events:none}.boss-speech.show{opacity:1;transform:translate(-50%,0)}.repair-action{margin-top:7px;background:linear-gradient(#386049,#213e34)}@media(max-height:820px) and (min-width:981px){.game-shell{grid-template-rows:58px minmax(0,1fr) 90px}.topbar{padding:5px 14px;gap:12px}.brand .crest{width:34px;height:40px}.brand strong{font-size:20px}.build-tray{padding:6px 22px;gap:7px}.tower-card{padding:4px 8px}.card-art{width:52px;height:58px;background-size:208px 139px}.card-art.alchemist{background-position:-52px 0}.card-art.beacon{background-position:-104px 0}.detail-panel{padding:12px}.tower-portrait{width:84px;height:72px;background-size:336px 224px}.tower-portrait.alchemist{background-position:-84px 0}.tower-portrait.beacon{background-position:-168px 0}.tower-detail dl{margin:8px 0}.tower-detail dl div{padding:5px 3px}.wall-card{margin-top:8px;padding:8px}.panel-action,.wall-card button{padding:8px}.story-card{top:8px;padding:7px 10px}.story-card span{display:none}}@media(max-width:980px){.game-shell{grid-template-rows:58px minmax(0,1fr) 96px}.topbar{grid-template-columns:1fr auto auto auto auto}.main-exit{min-width:58px;height:38px;font-size:11px}.story-card{display:none}.boss-speech{bottom:60px;font-size:13px;padding:8px 12px}}
.message{top:70px}
@media(max-width:980px){.message{top:32px}}
.build-tray{grid-template-columns:minmax(170px,.72fr) repeat(4,minmax(175px,1fr))}
.tower-portrait.cannon{background-position:-122px 0}
.card-art.cannon{background-position:-64px 0}
@media(max-width:980px){.build-tray{grid-template-columns:repeat(4,1fr)}}
@media(max-height:820px) and (min-width:981px){.card-art.cannon{background-position:-52px 0}}

/* v1.3 cohesive weapon art and fixed command panel */
.detail-panel{overflow:hidden}
.difficulty-card{margin:0 0 12px;padding:10px;border:1px solid #756044;background:linear-gradient(135deg,#211c18,#10131a)}
.difficulty-card>div:first-child{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.difficulty-card small{color:#b99255;font:10px ui-monospace,monospace;letter-spacing:.12em}
.difficulty-card p{margin:6px 0 0;text-align:center;font-size:10px;line-height:1.2}
.difficulty-options{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.difficulty-options button{min-height:31px;border:1px solid #65543c;background:#12151b;color:#a79a83;cursor:pointer;font:700 12px system-ui,sans-serif}
.difficulty-options button.active{border-color:#e4b967;background:linear-gradient(#704326,#3e291f);color:#ffe0a0;box-shadow:inset 0 0 10px #e5a94b22}
.difficulty-options button:disabled{cursor:not-allowed;opacity:.66}
.card-art,.tower-portrait{background-repeat:no-repeat;background-position:center;background-size:contain}
.card-art.archer,.tower-portrait.archer{background-image:url("./assets/weapon-ballista-tiers.png")}
.card-art.alchemist,.tower-portrait.alchemist{background-image:url("./assets/weapon-mortar-tiers.png")}
.card-art.beacon,.tower-portrait.beacon{background-image:url("./assets/weapon-prism-tiers.png")}
.card-art.cannon,.tower-portrait.cannon{background-image:url("./assets/weapon-cannon-tiers.png")}
.card-art,.tower-portrait{background-size:300% 100%;background-position:0 center}
.tower-card{overflow:hidden}
.tower-card:disabled{opacity:.72}
.tower-card .card-art{transform:scale(1.12);filter:drop-shadow(0 7px 6px #000) brightness(1.28) contrast(1.06)}
.tower-detail dl{margin:10px 0}
.tower-detail dl div{padding:6px 4px}
.wall-card{margin-top:10px}
.wall-card button+button{margin-top:7px;background:linear-gradient(#4b6048,#293c2c)}
.panel-close{display:none}

@media(max-height:820px) and (min-width:981px){
  .difficulty-card{margin-bottom:6px;padding:7px}
  .difficulty-options button{min-height:26px}
  .difficulty-card p{display:none}
  .tower-portrait{background-size:contain;background-position:center}
}

/* v2.1 responsive collision guard: monitors, compact landscape, and portrait */
.battle-layout{position:relative}

@media(max-width:980px){
  .game-shell{
    --mobile-topbar-height:58px;
    --mobile-resource-top:62px;
    --mobile-resource-height:32px;
    --mobile-overlay-gap:6px;
  }
  .resource{
    top:var(--mobile-resource-top);
    height:var(--mobile-resource-height);
  }
  .resource small{white-space:nowrap}
  .game-shell.detail-open .message{visibility:hidden!important;opacity:0!important;transition:none!important}
  .game-shell.detail-open .battle-stats{visibility:hidden!important}
  .game-shell.detail-open .controls{visibility:hidden!important}
  .detail-panel{
    top:8px;
    right:8px;
    bottom:8px;
    width:min(270px,calc(100% - 16px));
    max-height:none;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:none;
  }
  .detail-panel::-webkit-scrollbar{display:none}
  .panel-close{
    position:sticky;
    z-index:8;
    top:0;
    float:right;
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    margin:-4px -4px 4px 8px;
    border:1px solid #9b7542;
    background:#171219ee;
    color:#f3d49b;
    cursor:pointer;
    font:700 22px/1 system-ui,sans-serif;
  }
}

@media(max-width:780px){
  .message{
    left:8px;
    right:8px;
    top:auto;
    bottom:54px;
    transform:none;
    padding:7px 10px;
    overflow:hidden;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .message.show{transform:none}
  .battle-stats{right:6px;gap:3px}
  .battle-stats span{padding:6px 7px;font-size:10px}
}

@media(orientation:portrait) and (max-width:700px){
  html,body{overflow:hidden}
  .game-shell{
    --mobile-topbar-height:54px;
    --mobile-resource-top:54px;
    height:100dvh;
    grid-template-rows:54px auto minmax(0,1fr);
  }
  .topbar{
    grid-template-columns:auto 1fr auto auto auto;
    min-width:0;
    padding:5px 8px;
    gap:7px;
  }
  .brand strong,.brand small{display:none}
  .brand .crest{width:32px;height:38px}
  .wave-block{justify-self:end}
  .wave-block b{font-size:17px}
  .gold b{font-size:15px}
  .icon-button{width:38px;height:38px}
  .main-exit{min-width:50px;height:38px;font-size:10px}
  .resource{top:54px}
  .battle-layout{
    width:100%;
    aspect-ratio:16/9;
    min-height:0;
  }
  .battlefield{aspect-ratio:16/9}
  .build-tray{
    min-height:0;
    grid-template-columns:repeat(2,minmax(0,1fr));
    grid-template-rows:repeat(2,minmax(0,1fr));
    padding:6px;
    gap:5px;
  }
  .tower-card{
    display:grid;
    grid-template-columns:minmax(58px,42%) 1fr;
    justify-content:stretch;
    min-width:0;
    padding:6px;
  }
  .tower-card>span:not(.card-art){display:block;min-width:0}
  .tower-card>span:not(.card-art) b{
    overflow:hidden;
    font-size:12px;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .tower-card>span:not(.card-art) small{display:none}
  .card-art{width:100%;height:min(92px,18vh)}
  .rotate-tip{display:none}
  .detail-panel{inset:6px;width:calc(100% - 12px)}
}

/* v2.2 photo-audit fix: full-width battlefield + on-demand compact actions */
.topbar{
  grid-template-columns:minmax(210px,1fr) auto minmax(210px,300px) auto max-content auto auto;
}
.battle-layout{grid-template-columns:minmax(0,1fr)}
.detail-panel,.setup-panel{
  position:absolute;
  z-index:12;
  right:14px;
  display:none;
  width:min(320px,calc(100% - 28px));
  border:1px solid #9b7542;
  background:linear-gradient(145deg,#17151aee,#090c12f5);
  box-shadow:0 18px 48px #000c;
}
.detail-panel{
  top:auto;
  bottom:14px;
  max-height:190px;
  padding:14px;
  overflow:hidden;
}
.setup-panel{
  top:14px;
  max-height:calc(100% - 28px);
  padding:16px;
  overflow:auto;
  overscroll-behavior:contain;
}
.detail-panel.open,.setup-panel.open{display:block;transform:none}
.detail-panel:before,.setup-panel:before{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid #d7a65524;
  pointer-events:none;
}
.panel-close{
  position:absolute;
  z-index:14;
  top:7px;
  right:7px;
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  margin:0;
  border:1px solid #9b7542;
  background:#171219ee;
  color:#f3d49b;
  cursor:pointer;
  font:700 20px/1 system-ui,sans-serif;
}
.tower-detail:not([hidden]){
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  text-align:left;
}
.tower-detail h2,.tower-detail p{grid-column:1/-1}
.tower-detail h2{margin:0;padding-right:34px;font-size:20px}
.tower-detail p{margin:0;color:#c0b39a;font-size:12px;white-space:nowrap}
.tower-portrait,.tower-detail dl{display:none!important}
.tower-detail .panel-action{min-height:40px;padding:8px}
.repair-action{margin:0}
.setup-panel .panel-kicker{padding-right:34px}
.setup-panel .wall-card{margin-bottom:0}

@media(max-width:980px){
  .topbar{grid-template-columns:1fr auto auto auto auto auto}
}

@media(max-width:780px){
  .brand strong{display:none}
  .detail-panel,.setup-panel{right:8px;width:min(310px,calc(100% - 16px))}
  .detail-panel{bottom:8px;max-height:178px;padding:12px}
  .setup-panel{top:8px;max-height:calc(100% - 16px);padding:12px}
  .tower-detail h2{font-size:17px}
  .tower-detail p{overflow:hidden;text-overflow:ellipsis}
  .game-shell.detail-open .message,.game-shell.setup-open .message{
    visibility:hidden!important;
    opacity:0!important;
  }
  .game-shell.detail-open .battle-stats,.game-shell.setup-open .battle-stats,
  .game-shell.detail-open .controls,.game-shell.setup-open .controls{visibility:hidden!important}
}

@media(orientation:portrait) and (max-width:700px){
  .topbar{grid-template-columns:auto 1fr auto auto auto auto}
  .detail-panel,.setup-panel{inset:auto 6px 6px auto;width:calc(100% - 12px)}
  .setup-panel{top:6px;bottom:auto;max-height:calc(100% - 12px)}
}

/* v3.7 explicit three-stage construction expansion */
.tier-preview{display:flex!important;gap:4px;margin-top:5px}
.tier-preview i{
  min-width:24px;
  border:1px solid #80643e;
  background:#111720;
  color:#e2b968;
  padding:2px 4px;
  font:700 9px/1 ui-monospace,monospace;
  text-align:center;
}
.detail-panel{max-height:min(310px,calc(100% - 28px));overflow-y:auto}
.tech-expansion{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}
.tech-tier{
  min-width:0;
  border:1px solid #5e5547;
  background:linear-gradient(#161b23,#0d1118);
  color:#b9aa91;
  padding:7px 5px;
  cursor:pointer;
  text-align:left;
}
.tech-tier small,.tech-tier b,.tech-tier span{display:block}
.tech-tier small{color:#d8a857;font:700 9px ui-monospace,monospace;letter-spacing:.08em}
.tech-tier b{margin:3px 0;overflow:hidden;color:#efe0bd;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.tech-tier span{color:#8f958f;font:10px system-ui,sans-serif}
.tech-tier.current{border-color:#71c990;background:linear-gradient(#183428,#10221b);box-shadow:inset 0 0 12px #54c78122}
.tech-tier.next{border-color:#e0ad52;background:linear-gradient(#5a351f,#2d211a);box-shadow:inset 0 0 14px #e4a34b24}
.tech-tier.complete{border-color:#53675b;background:linear-gradient(#18241f,#101713);color:#85998c}
.tech-tier:disabled{cursor:not-allowed;opacity:.58}
.tech-tier.current:disabled{opacity:1}
@media(max-width:780px){
  .detail-panel{max-height:calc(100% - 16px);overflow-y:auto}
  .tech-tier{padding:6px 4px}
  .tech-tier b{font-size:10px}
}
@media(max-width:980px) and (orientation:landscape){
  .detail-panel{
    top:calc(
      var(--mobile-resource-top) + var(--mobile-resource-height)
      - var(--mobile-topbar-height) + var(--mobile-overlay-gap)
    );
    bottom:6px;
    max-height:none;
    padding:8px;
  }
  .tower-detail:not([hidden]){gap:4px}
  .tower-detail h2{font-size:15px}
  .tower-detail p{font-size:10px}
  .tech-expansion{gap:4px}
  .tech-tier{padding:4px 3px}
  .tech-tier b{margin:2px 0}
  .tower-detail .panel-action{min-height:32px;padding:5px}
}
@media(orientation:portrait) and (max-width:700px){
  .detail-panel{
    top:calc(
      var(--mobile-resource-top) + var(--mobile-resource-height)
      - var(--mobile-topbar-height) + var(--mobile-overlay-gap)
    );
    bottom:6px;
    max-height:none;
    padding:8px;
  }
  .tower-detail:not([hidden]){gap:4px}
  .tower-detail h2{font-size:15px}
  .tower-detail p{font-size:10px}
  .tech-expansion{gap:4px}
  .tech-tier{padding:4px 3px}
  .tech-tier b{margin:2px 0}
  .tower-detail .panel-action{min-height:32px;padding:5px}
}

/* v4.2 four explicit screen profiles: two desktop and two mobile layouts */
html[data-screen-profile="desktop-wide"] .game-shell{
  grid-template-rows:clamp(64px,4.2vh,88px) minmax(0,1fr) clamp(112px,7.5vh,148px);
}
html[data-screen-profile="desktop-wide"] .topbar{
  gap:clamp(18px,1.5vw,42px);
  padding-inline:clamp(36px,5vw,180px);
}
html[data-screen-profile="desktop-wide"] .build-tray{
  grid-template-columns:minmax(180px,260px) repeat(4,minmax(220px,360px));
  justify-content:center;
  gap:clamp(10px,1vw,22px);
  padding-inline:clamp(40px,5vw,200px);
}
html[data-screen-profile="desktop-wide"] .story-card{
  width:min(430px,28%);
  padding:12px 16px;
}
html[data-screen-profile="desktop-wide"] .detail-panel,
html[data-screen-profile="desktop-wide"] .setup-panel{
  width:min(380px,calc(100% - 40px));
}

html[data-screen-profile="mobile-landscape"] .game-shell{
  grid-template-rows:54px minmax(0,1fr) 82px;
}
html[data-screen-profile="mobile-landscape"] .icon-button,
html[data-screen-profile="mobile-landscape"] .main-exit,
html[data-screen-profile="mobile-landscape"] .control{
  min-width:44px;
  min-height:44px;
}
html[data-screen-profile="mobile-landscape"] .build-tray{
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
  padding:7px;
}
html[data-screen-profile="mobile-landscape"] .tower-card{
  min-width:0;
  min-height:68px;
}
html[data-screen-profile="mobile-landscape"] .card-art{
  width:min(60px,18vw);
  height:60px;
}
html[data-screen-profile="mobile-landscape"] .rotate-tip{display:none}

html[data-screen-profile="mobile-portrait"] .game-shell{
  --mobile-topbar-height:56px;
  --mobile-resource-top:56px;
  grid-template-rows:56px auto minmax(0,1fr);
}
html[data-screen-profile="mobile-portrait"] .topbar{
  min-height:56px;
  grid-template-columns:auto 1fr auto auto auto auto;
}
html[data-screen-profile="mobile-portrait"] .icon-button,
html[data-screen-profile="mobile-portrait"] .main-exit,
html[data-screen-profile="mobile-portrait"] .control{
  min-width:44px;
  min-height:44px;
}
html[data-screen-profile="mobile-portrait"] .battle-layout,
html[data-screen-profile="mobile-portrait"] .battlefield{
  width:100%;
  height:clamp(286px,38dvh,330px);
  aspect-ratio:auto;
  overflow:hidden;
}
html[data-screen-profile="mobile-portrait"] .battlefield canvas{
  position:absolute;
  left:50%;
  width:auto;
  min-width:0;
  max-width:none;
  height:100%;
  transform:translateX(-50%);
}
html[data-screen-profile="mobile-portrait"] .build-tray{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:30px repeat(2,88px);
  align-content:center;
  padding:8px 8px 52px;
  gap:6px;
}
html[data-screen-profile="mobile-portrait"] .tray-title{
  display:block;
  grid-column:1/-1;
  align-self:center;
  min-width:0;
  text-align:center;
}
html[data-screen-profile="mobile-portrait"] .tray-title small{display:none}
html[data-screen-profile="mobile-portrait"] .tray-title b{
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
html[data-screen-profile="mobile-portrait"] .tower-card{
  height:88px;
  min-height:88px;
  grid-template-columns:minmax(58px,40%) minmax(0,1fr);
}
html[data-screen-profile="mobile-portrait"] .card-art{
  width:100%;
  height:64px;
}
html[data-screen-profile="mobile-portrait"] .rotate-tip{
  position:fixed;
  z-index:40;
  top:auto;
  right:10px;
  bottom:10px;
  left:10px;
  display:block;
  padding:9px 12px;
  border:1px solid #9a743f;
  background:#0b1019e8;
  color:#efd49c;
  pointer-events:none;
  text-align:center;
  font:700 12px/1.35 system-ui,sans-serif;
}

button:focus-visible,
a:focus-visible,
input:focus-visible{
  outline:3px solid #ffe0a0;
  outline-offset:2px;
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
  }
  .game-shell.shake{animation:none}
}