* {
    box-sizing:border-box
}
body {
    margin:0;
    background:#0c201d;
    color:#e9f2d5;
    font:15px/1.5 system-ui,-apple-system,"Microsoft YaHei",sans-serif;
    background-image:radial-gradient(ellipse at 50% 0,#26433a,transparent 70%)
}
button,a {
    -webkit-tap-highlight-color:transparent
}
button {
    font:inherit;
    cursor:pointer
}
button:focus-visible,a:focus-visible,summary:focus-visible {
    outline:3px solid #f8d783;
    outline-offset:3px
}
button:disabled {
    cursor:not-allowed;
    opacity:.45
}
button {
    color:inherit
}
nav {
    max-width:1500px;
    margin:0 auto 18px;
    display:flex;
    justify-content:space-between;
    color:#8da69b;
    font-size:13px
}
nav a {
    color:#ceddc2;
    text-decoration:none
}.td-game {
    max-width:1500px;
    margin:auto;
    overflow:hidden;
    border:1px solid #637657;
    border-radius:22px;
    background:#152a26;
    box-shadow:0 25px 80px #0007;
    --game-toolbar-bg:#182d28
}.td-top {
    padding:18px 24px;
    display:flex;
    align-items:center;
    gap:22px;
    border-bottom:1px solid #b1ac6450;
    background:linear-gradient(#20392f,#142923)
}.td-brand {
    flex:1;
    white-space:nowrap
}.td-kicker {
    font-size:10px;
    letter-spacing:3px;
    color:#bece94
}
h1 {
    font-size:29px;
    line-height:1.3;
    margin:3px 0;
    color:#ffe3a5;
    text-shadow:0 2px #614b28
}
h1 small {
    font-size:13px;
    font-weight:400;
    color:#a8bea5;
    text-shadow:none;
    margin-left:10px
}.td-stats {
    display:flex;
    gap:10px
}.td-stats>span {
    padding:8px 14px;
    background:#0d211e;
    border:1px solid #647057;
    border-radius:12px;
    white-space:nowrap;
    color:#efcd78
}.td-stats>span:first-child {
    color:#ff8f80
}.td-stats b {
    color:#fff4d8;
    font-size:20px
}.td-stats small {
    font-size:12px;
    color:#8faaa0;
    margin-left:3px
}.td-controls {
    display:flex;
    gap:7px
}.td-controls button,.td-note button,#upgrade {
    border:1px solid #647758;
    border-radius:8px;
    background:#2d4438;
    padding:8px 11px;
    min-height:40px
}.td-battle {
    position:relative;
    aspect-ratio:5/3;
    background:#477755;
    isolation:isolate
}
canvas {
    display:block;
    width:100%;
    height:100%
}
#slots {
    position:absolute;
    inset:0
}.td-slot {
    position:absolute;
    width:43px;
    height:43px;
    border-radius:50%;
    transform:translate(-50%,-50%);
    border:2px dashed #ecdaa199;
    color:#fff1b4;
    background:#243a285c;
    font-size:26px;
    text-shadow:0 2px 3px #000;
    box-shadow:0 3px 8px #0002;
    transition:background .15s
}.td-slot:hover,.td-slot.chosen {
    background:#e9cc6840;
    border-color:#fff4c6
}.td-slot.built {
    border:2px solid transparent;
    background:transparent;
    color:transparent;
    width:65px;
    height:74px;
    transform:translate(-50%,-80%);
    box-shadow:none
}.td-slot.built.chosen,.td-slot.built:focus-visible {
    border-color:#f4e299;
    background:#ffffff0b
}.td-map-label {
    position:absolute;
    left:25px;
    bottom:22px;
    text-shadow:0 2px 5px #000c;
    pointer-events:none
}.td-map-label span {
    display:block;
    letter-spacing:5px;
    font-size:22px;
    color:#f1eab9
}.td-map-label small {
    font-size:11px;
    letter-spacing:2px;
    color:#d1e1c0
}.td-entry {
    position:absolute;
    left:2%;
    top:15%;
    color:#ffedc2;
    font-size:12px;
    text-shadow:0 2px 4px #000
}.td-bottom {
    padding:19px 22px;
    display:flex;
    gap:20px;
    align-items:center;
    background:linear-gradient(#23382e,#152923);
    border-top:2px solid #77815b
}.td-build {
    display:flex;
    gap:9px
}.tower-card {
    display:flex;
    align-items:center;
    gap:9px;
    text-align:left;
    min-width:118px;
    padding:9px 12px;
    background:linear-gradient(#354d3c,#1b3029);
    border:1px solid #738162;
    border-radius:12px;
    box-shadow:0 3px 5px #0003
}.tower-card.selected {
    border-color:#f3d37e;
    background:linear-gradient(#556449,#2c422f);
    box-shadow:0 0 0 2px #e8c77925,inset 0 0 18px #d2ae4222
}.tower-symbol {
    font-size:37px;
    text-shadow:0 2px 4px #0007
}.arrow {
    color:#cae58c
}.magic {
    color:#7de7ff
}.cannon {
    color:#e4ad6b
}.tower-card strong,.tower-card small,.tower-card b {
    display:block
}.tower-card strong {
    font-size:14px
}.tower-card small {
    font-size:10px;
    color:#b5c8ae
}.tower-card b {
    font-size:13px;
    color:#f4d47e
}.tower-card kbd {
    font:10px system-ui;
    color:#9eb28e;
    margin-left:5px
}.td-selection {
    flex:1;
    min-width:130px
}.td-selection strong {
    font-size:14px;
    color:#f0dfaa
}.td-selection p {
    margin:4px 0;
    font-size:12px;
    color:#b4c7aa
}.td-wave-control {
    text-align:center;
    min-width:195px
}
#next-wave,#result-action {
    background:linear-gradient(#e9ca78,#bb913f);
    border:1px solid #f5e1a0;
    border-radius:10px;
    padding:12px 18px;
    color:#302911;
    font-weight:750;
    box-shadow:0 3px 0 #80642d
}.td-wave-control span {
    display:block;
    font-size:11px;
    color:#9fb89c;
    margin-top:8px
}.td-note {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 22px 13px;
    gap:10px
}.td-note p {
    margin:0;
    font-size:12px;
    color:#bdcda9
}.td-note button {
    font-size:12px;
    white-space:nowrap;
    background:none;
    border:0;
    color:#9bb69c
}.td-help {
    max-width:1450px;
    margin:20px auto;
    color:#a7bba9;
    font-size:13px
}.td-help summary {
    cursor:pointer
}.td-help p {
    max-width:950px
}.td-overlay {
    position:absolute;
    inset:0;
    background:#08231fc9;
    display:grid;
    place-items:center;
    z-index:3;
    text-align:center;
    backdrop-filter:blur(5px)
}.td-overlay[hidden] {
    display:none
}.td-overlay>div {
    max-width:90%;
    padding:25px
}.td-overlay #result-icon {
    font-size:55px;
    color:#f5d782
}.td-overlay h2 {
    font-size:32px;
    margin:0;
    color:#ffe7a8
}.td-overlay p {
    color:#c1d9bc;
    font-size:14px
}.game-view.is-expanded .td-battle {
    max-width:calc((100dvh - 240px)*1.6667);
    aspect-ratio:5/3;
    margin:auto;
    width:100%
}.game-view.is-expanded canvas {
    object-fit:contain
}.game-view.is-expanded {
    background:#132923
}
@media(max-width:1050px) {
    .td-top {
        gap:12px;
        padding:14px
    }.td-brand h1 {
        font-size:24px
    }.td-brand h1 small {
        display:none
    }.td-stats {
        gap:5px
    }.td-stats>span {
        padding:6px 9px
    }.td-controls {
        gap:4px
    }.td-controls button {
        font-size:12px;
        padding:7px
    }.td-bottom {
        gap:12px;
        padding:14px
    }.tower-card {
        min-width:96px;
        padding:8px
    }.tower-symbol {
        font-size:27px
    }.td-wave-control {
        min-width:170px
    }
}
@media(max-width:740px) {
    .td-game {
        border-radius:14px
    }.td-top {
        flex-wrap:wrap;
        gap:9px
    }.td-brand {
        flex:1
    }.td-kicker {
        font-size:8px;
        letter-spacing:2px
    }.td-stats {
        margin-left:auto
    }.td-stats b {
        font-size:17px
    }.td-controls {
        width:100%;
        justify-content:flex-end
    }.td-controls button {
        min-height:36px
    }.td-battle {
        aspect-ratio:5/3
    }.td-slot {
        width:34px;
        height:34px;
        font-size:21px
    }.td-slot.built {
        width:40px;
        height:48px
    }.td-map-label {
        left:12px;
        bottom:8px
    }.td-map-label span {
        font-size:14px
    }.td-map-label small {
        font-size:8px
    }.td-entry {
        font-size:9px
    }.td-bottom {
        flex-wrap:wrap;
        gap:12px
    }.td-build {
        width:100%;
        gap:7px
    }.tower-card {
        flex:1;
        min-width:0;
        justify-content:center;
        padding:7px 3px;
        gap:6px
    }.tower-card kbd {
        display:none
    }.td-selection {
        min-width:0
    }.td-selection p {
        font-size:11px
    }.td-wave-control {
        min-width:0;
        width:48%
    }
    #next-wave {
        width:100%;
        font-size:12px;
        padding:11px 7px
    }.td-wave-control span {
        font-size:9px
    }.td-note {
        padding:0 12px 7px
    }.td-note p {
        font-size:10px
    }.td-overlay h2 {
        font-size:24px
    }.td-overlay #result-icon {
        font-size:32px
    }.td-overlay p {
        font-size:11px;
        margin:6px 0 12px
    }.game-view.is-expanded .td-battle {
        width:100%;
        max-width:none;
        max-height:none
    }.game-page {
        padding-top:12px
    }
}
@media(prefers-reduced-motion:reduce) {
    * {
        transition:none!important
    }
}

/* Keep construction controls in view on ordinary laptop displays. The canvas
   and its HTML slot overlay always share one centered, aspect-ratio box. */
@media (min-width: 741px) {
    .td-battle {
        width: min(100%, calc(55vh * 1.666667));
        margin-inline: auto;
    }
}

/* Four counters must remain readable when a level counter is added. */
@media (max-width: 740px) {
    .td-stats {
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        width:100%;
        margin:0;
    }
    .td-stats>span {
        padding:6px 4px;
        text-align:center;
        font-size:12px;
    }
}
@media (max-width: 400px) {
    .td-stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

/* A bounded battlefield keeps the build controls in view. The canvas and
   its HTML construction slots stay in the same 5:3 box while that box scrolls. */
.td-body .game-page {
    position:relative; height:100vh; height:100dvh; min-height:0;
    display:flex; flex-direction:column; gap:6px;
    padding:max(8px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
}
.td-body .game-page>nav { flex:0 0 32px; width:100%; margin:0 auto; align-items:center; }
.td-body .game-page>nav a { min-height:32px; display:flex; align-items:center; }
.td-game { display:grid; grid-template-rows:auto minmax(0,1fr) auto auto auto; flex:1; min-height:0; width:100%; margin:0 auto; border-radius:14px; }
.td-top { padding:10px 14px; gap:12px; }
.td-brand h1 { font-size:24px; }
.td-stats>span { padding:5px 9px; }
.td-controls button,.td-note button,#upgrade,#next-wave,#result-action { min-height:44px; }
.td-controls #speed,.td-controls #pause { min-width:44px; }
.td-battle-scroll { min-height:0; min-width:0; overflow:auto; overscroll-behavior:contain; container-type:size; background:#1b342a; }
.td-game.game-view .td-battle {
    width:max(560px,min(100%,calc(100cqh * 1.666667)));
    max-width:none; height:auto; max-height:none; margin:0 auto; aspect-ratio:5/3;
}
.td-slot { width:44px; height:44px; }
.td-slot.built { width:52px; height:58px; }
.td-bottom { padding:10px 14px; gap:12px; }
.tower-card { min-height:60px; padding:6px 10px; }
.tower-symbol { font-size:29px; }
.td-selection p { margin:3px 0; }
.td-note { padding:0 14px 4px; min-height:44px; }
.td-help { grid-column:1/-1; padding:0 14px; flex:0 0 28px; margin:0 auto; width:100%; max-width:1500px; font-size:12px; }
.td-help summary { min-height:28px; display:flex; align-items:center; }
.td-help[open] { position:absolute; bottom:8px; left:12px; right:12px; z-index:30; width:auto; max-height:60%; overflow:auto; padding:12px; border:1px solid #637657; border-radius:10px; background:#152a26; box-shadow:0 -8px 30px #0006; }
@media(max-width:740px) and (orientation:portrait) {
    .td-body .game-page { padding:6px 8px; gap:4px; }
    .td-top { display:grid; grid-template-columns:1fr; gap:5px; padding:7px 9px; }
    .td-kicker { display:none; }
    .td-brand h1 { font-size:21px; margin:0; }
    .td-stats { width:100%; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
    .td-stats>span { padding:3px 2px; font-size:11px; border-radius:6px; }
    .td-stats b { font-size:16px; }
    .td-stats small { font-size:10px; margin-left:1px; }
    .td-controls { justify-content:flex-end; gap:6px; }
    .td-controls button { min-height:44px; font-size:12px; }
    /* 404px clears every empty/built target pairing without shrinking the
       44px slots or 52×58px tower targets. Larger screens show the full map. */
    .td-battle-scroll { display:flex; align-items:flex-start; align-items:safe center; }
    .td-game.game-view .td-battle { flex-shrink:0; width:max(404px,min(100%,calc(100cqh * 1.666667))); }
    .td-bottom { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:6px 10px; padding:7px 9px; }
    .td-build { grid-column:1/-1; gap:5px; }
    .tower-card { min-height:60px; padding:4px 2px; gap:4px; }
    .tower-card strong { font-size:12px; }
    .tower-card small { font-size:10px; }
    .tower-symbol { font-size:24px; }
    .td-selection strong { font-size:12px; }
    .td-selection p { font-size:10px; }
    .td-wave-control { width:auto; min-width:0; }
    .td-wave-control span { font-size:10px; margin-top:3px; }
    .td-note { padding:0 9px 3px; gap:6px; }
    .td-note p { font-size:10px; line-height:1.4; }
    .td-note button { padding-inline:3px; font-size:11px; }
    .td-help[open] { left:8px; right:8px; bottom:6px; }
}
@media(orientation:landscape) and (max-height:600px) {
    .td-body .game-page { padding:4px 8px; gap:3px; }
    .td-body .game-page>nav { flex-basis:28px; }
    .td-game { grid-template-columns:minmax(0,1fr) 260px; grid-template-rows:auto minmax(0,1fr) auto auto; }
    .td-top { grid-column:1/-1; padding:5px 9px; gap:8px; flex-wrap:nowrap; }
    .td-kicker,.td-brand h1 small { display:none; }
    .td-brand h1 { font-size:20px; margin:0; }
    .td-stats { display:flex; gap:4px; margin:0; width:auto; }
    .td-stats>span { padding:3px 5px; font-size:11px; border-radius:6px; }
    .td-stats b { font-size:16px; }
    .td-stats small { font-size:10px; }
    .td-controls { width:auto; gap:4px; }
    .td-controls button { min-height:44px; padding:5px; font-size:11px; }
    .td-battle-scroll { grid-column:1; grid-row:2; }
    .td-bottom { grid-column:2; grid-row:2; min-height:0; overflow-y:auto; overscroll-behavior:contain; flex-direction:column; flex-wrap:nowrap; align-items:stretch; padding:7px; gap:8px; border-top:0; border-left:1px solid #637657; }
    .td-build { width:100%; gap:4px; }
    .tower-card { min-width:0; padding:4px; gap:3px; flex:1; justify-content:center; }
    .tower-symbol,.tower-card small,.tower-card kbd { display:none; }
    .tower-card strong { font-size:12px; }
    .td-selection { min-width:0; }
    .td-wave-control { min-width:0; width:100%; }
    .td-wave-control span { margin-top:3px; }
    .td-note { grid-column:1/-1; padding:0 8px; }
    .td-help { flex-basis:24px; }
    .td-help summary { min-height:24px; }
}
@media(orientation:landscape) and (max-width:740px) and (max-height:600px) {
    .td-game { grid-template-columns:minmax(0,1fr) 210px; }
    .td-brand { display:none; }
    .td-stats { flex:1; }
}