:root{color-scheme:dark;--bg: oklch(.18 .024 195);--bg-deep: oklch(.14 .02 195);--panel: oklch(.24 .03 78);--panel-strong: oklch(.29 .038 78);--panel-soft: oklch(.27 .026 92);--panel-inset: oklch(.2 .022 84);--line: oklch(.49 .05 75);--line-soft: oklch(.37 .035 82);--ink: oklch(.92 .02 92);--ink-muted: oklch(.76 .02 88);--accent: oklch(.71 .13 73);--accent-strong: oklch(.58 .11 66);--accent-soft: oklch(.44 .055 74);--danger: oklch(.62 .16 28);--success: oklch(.7 .11 145);--shadow: 0 18px 40px rgba(5, 10, 10, .38);--shadow-tight: 0 8px 18px rgba(5, 10, 10, .28);--radius-lg: 22px;--radius-md: 16px;--radius-sm: 12px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 24px;--space-6: 32px;--title-font: "Trebuchet MS", "Arial Black", sans-serif;--ui-font: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;--browser-safe-bottom: 0px}*{box-sizing:border-box}body{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(circle at top,rgba(235,168,70,.12),transparent 30%),radial-gradient(circle at 20% 20%,rgba(121,149,98,.16),transparent 28%),linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);color:var(--ink);font-family:var(--ui-font)}button{font:inherit;letter-spacing:.02em;transition:transform .12s ease,border-color .12s ease,background .18s ease,color .12s ease,box-shadow .18s ease}button:hover:not(:disabled){border-color:var(--line)}button:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 75%,white 25%);outline-offset:2px}button:disabled{cursor:not-allowed;opacity:.55}.game-root{position:relative;width:100vw;height:100vh;height:100dvh;overflow:hidden}.battle-controls{position:fixed;inset:0;z-index:10;pointer-events:none}.battle-controls>*{pointer-events:auto}.battle-controls[hidden],.sidebar[hidden],.control-dock[hidden],.tower-actions[hidden]{display:none!important}.app-root{min-height:100vh;min-height:100dvh}.screen{min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:var(--space-6)}.screen[hidden]{display:none}.app-shell[hidden],.sidebar[hidden],.control-dock[hidden]{display:none!important}.screen-card{width:min(100%,680px);padding:28px;border-radius:28px;border:1px solid var(--line-soft);background:linear-gradient(180deg,#fff5d60f,#0000),linear-gradient(180deg,var(--panel) 0%,var(--panel-inset) 100%);box-shadow:var(--shadow)}.screen-card--hero{width:min(100%,720px);text-align:center}.screen-kicker{margin:0 0 10px;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--ink-muted) 76%,var(--accent) 24%)}.screen-copy{margin:0;color:var(--ink-muted);line-height:1.6}.screen-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.screen-actions button,.theme-list__item,.stage-list__item{border-radius:18px;border:1px solid var(--line-soft);background:linear-gradient(180deg,#ffdd9a14,#0000),linear-gradient(180deg,#3b3123f2,#20231bf2);color:var(--ink);box-shadow:inset 0 1px #ffe7b617}.screen-actions button{padding:12px 18px;cursor:pointer}.screen--campaign,.screen--theme{align-items:start}.theme-list,.stage-list{display:grid;gap:12px;margin-top:24px}.theme-list__item,.stage-list__item{width:100%;display:grid;gap:6px;padding:16px 18px;text-align:left;cursor:pointer}.theme-list__name,.stage-list__name{font-weight:700}.theme-list__meta,.stage-list__index{font-size:.86rem;color:var(--ink-muted);letter-spacing:.04em}.theme-list__item[data-state=locked],.stage-list__item[data-state=locked]{opacity:.52}.stage-list__item[data-state=cleared]{border-color:color-mix(in srgb,var(--success) 72%,white 28%)}.stage-list__item[data-state=selected]{border-color:color-mix(in srgb,var(--accent) 74%,white 26%);box-shadow:inset 0 1px #ffe7b617,0 0 0 1px #ffd68a33}.theme-layout{width:min(1180px,100%);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);gap:20px}.theme-header{display:grid;gap:14px}.theme-header button{justify-self:start;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,#ffd78a29,#261f17f0);color:var(--ink)}.stage-detail-card{align-self:start}.stage-detail-card h3{margin:0 0 12px;font-family:var(--title-font);font-size:1.5rem;letter-spacing:.06em;text-transform:uppercase}.stage-detail-meta{display:grid;gap:14px;margin:20px 0 0}.stage-detail-meta div{display:grid;gap:4px}.stage-detail-meta dt{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}.stage-detail-meta dd{margin:0;font-weight:700}.app-shell{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--space-4);padding:var(--space-5);max-width:1320px;margin:0 auto}.card{background:linear-gradient(180deg,#fff5d60f,#0000),linear-gradient(180deg,var(--panel) 0%,var(--panel-inset) 100%);border:1px solid var(--line-soft);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.game-panel{position:relative;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}.hud{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;grid-area:hud;padding:1px;border:1px solid var(--line);border-radius:18px;background:#0e1414d1;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden;box-shadow:0 10px 24px #050a0a52}.hud-block{padding:11px 14px 12px;background:color-mix(in srgb,var(--panel-strong) 82%,black 18%)}.hud-block:nth-child(2n){background:color-mix(in srgb,var(--panel) 76%,black 24%)}.hud-block strong{display:block;margin-top:4px;font-family:var(--title-font);font-size:1.1rem;letter-spacing:.05em;color:var(--ink)}.hud-label{display:block;font-size:.7rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.16em}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.board-frame{position:relative;min-height:380px;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"hud pause" "canvas canvas";column-gap:12px;row-gap:14px;padding:14px;border:1px solid var(--line);border-radius:28px;overflow:hidden;background:radial-gradient(circle at top,rgba(255,192,99,.12),transparent 22%),linear-gradient(180deg,#2a3021,#1b1f14);box-shadow:inset 0 1px #ffe9b02e,inset 0 -20px 40px #0000002e}.board-frame:before{content:"";position:absolute;inset:10px;border-radius:20px;border:1px solid rgba(255,220,156,.14);pointer-events:none;z-index:1}.board-pause-button{position:fixed;top:18px;right:18px;z-index:11;min-width:116px;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,#ffd78af0,#a8702ceb);color:#1c140c;box-shadow:var(--shadow-tight);cursor:pointer;font-weight:700;text-transform:uppercase}.board-pause-button:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 12px 24px #050a0a4d}.board-start-button{left:18px;right:auto;background:linear-gradient(180deg,#a0e298f0,#3a8447eb);border-color:color-mix(in srgb,var(--success) 70%,white 30%);color:#0c140c}#game-board{grid-area:canvas;display:block;width:100%;height:auto;justify-self:stretch}.overlay-message{position:absolute;inset:0;display:grid;place-items:center;background:#0a0f0ead;color:var(--ink);text-align:center;padding:var(--space-5);z-index:6}.overlay-message[hidden]{display:none}.tower-actions{position:absolute;display:flex;gap:8px;transform:translate(-50%,-100%);z-index:4}.tower-actions[hidden]{display:none}.tower-actions button{min-height:38px;padding:0 14px;border:1px solid rgba(255,220,158,.24);border-radius:999px;background:linear-gradient(180deg,#ffdd9a24,#0000),linear-gradient(180deg,#3b3123fa,#20231bf5);color:var(--ink);font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;box-shadow:var(--shadow-tight);cursor:pointer}.tower-actions button:disabled{opacity:.52;cursor:default}.tower-actions button:first-child{color:var(--success)}.tower-actions button:last-child{color:color-mix(in srgb,var(--danger) 86%,white 14%)}@media(max-width:820px){.tower-actions{gap:6px}.tower-actions button{min-height:34px;padding:0 11px;font-size:.72rem}}.overlay-card{width:min(100%,460px);min-height:320px;padding:28px;border-radius:26px;border:1px solid rgba(255,216,145,.28);background:linear-gradient(180deg,#ffdc9b29,#0000),linear-gradient(180deg,#2f2518f5,#1c1f17f0);box-shadow:0 24px 60px #00000070;display:grid;align-content:center}.overlay-kicker{margin:0 0 10px;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in srgb,var(--ink-muted) 78%,var(--accent) 22%)}.overlay-title{margin:0 0 12px;font-family:var(--title-font);font-size:clamp(2rem,4vw,2.6rem);line-height:.95;text-transform:uppercase;letter-spacing:.04em}.overlay-body{margin:0;color:var(--ink-muted);font-size:1rem;line-height:1.6}.overlay-actions{display:flex;justify-content:center;gap:10px;margin-top:20px}.overlay-actions button{min-width:140px;padding:12px 18px;border-radius:999px;border:1px solid rgba(255,220,158,.28);background:linear-gradient(180deg,var(--panel-strong),var(--panel-inset));color:var(--ink);cursor:pointer;text-transform:uppercase;font-weight:700}.overlay-actions button:first-child{background:linear-gradient(180deg,#dfa045,#af7432);color:#1c140c;border-color:#9b7045}.sidebar{position:fixed;top:128px;right:18px;width:min(312px,calc(100vw - 36px));display:none!important;gap:12px;align-content:start;z-index:10}.control-dock{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:10px;align-items:end;position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px) + var(--browser-safe-bottom));z-index:8;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));border-radius:22px;border:1px solid var(--line);background:linear-gradient(180deg,#ffd68a24,#0000),linear-gradient(180deg,#31291df5,#161814f5);box-shadow:0 18px 36px #0000006b;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);overflow:hidden}.control-dock .dock-section{min-width:0}.control-dock .dock-header{gap:4px}.control-dock .dock-label{margin-bottom:2px;font-size:.68rem;letter-spacing:.12em}.control-dock .dock-selection-summary{min-height:0;margin-bottom:4px;font-size:.92rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.control-dock .tower-grid--dock{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.control-dock .tower-choice{min-height:72px;gap:4px;padding:8px 6px;border-radius:14px}.control-dock .tower-choice__icon{width:34px;height:34px;border-radius:10px}.control-dock .tower-choice__icon img{width:28px;height:28px}.control-dock .tower-choice__key{font-size:.62rem;line-height:1}.control-dock .tower-choice__name{display:none}.control-dock .dock-actions-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:8px}.control-dock .dock-pad{gap:6px}.control-dock .dock-pad button,.control-dock .dock-actions button{min-height:36px;padding:0;border-radius:12px;font-size:.9rem;font-weight:700;line-height:1}@media(max-width:820px){.control-dock{grid-template-columns:1fr;gap:8px;padding:8px 10px 10px}.control-dock .dock-actions-layout{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.control-dock .tower-grid--dock{gap:6px}.control-dock .tower-choice{min-height:64px;gap:3px;padding:6px 4px}.control-dock .tower-choice__icon{width:30px;height:30px}.control-dock .tower-choice__icon img{width:24px;height:24px}.control-dock .dock-pad button,.control-dock .dock-actions button{min-height:34px;font-size:.84rem}}.card{padding:14px}.card h1,.card h2,.card p,.card ul{margin-top:0}.card h2{margin-bottom:10px;font-family:var(--title-font);font-size:1rem;letter-spacing:.12em;text-transform:uppercase}.muted{color:var(--ink-muted);line-height:1.45}.tower-buttons,.touch-grid{display:grid;gap:8px}.touch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.tower-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:10px}.tower-choice,.touch-grid button{padding:10px 12px;border-radius:16px;border:1px solid var(--line-soft);background:linear-gradient(180deg,#ffdd9a14,#0000),linear-gradient(180deg,#3b3123f2,#20231bf2);color:var(--ink);cursor:pointer;box-shadow:inset 0 1px #ffe7b617}.tower-choice:hover:not(.is-selected){transform:translateY(-1px)}.tower-choice{display:grid;justify-items:center;gap:8px;min-height:118px;padding:12px 10px;text-align:center}.tower-choice__icon{display:grid;place-items:center;width:60px;height:60px;border-radius:18px;background:radial-gradient(circle at top,#ffd68233,#0000),linear-gradient(180deg,#1b1f1af2,#372d1ef2);border:1px solid rgba(255,216,145,.14);box-shadow:inset 0 1px #ffe8ba0f}.tower-choice__icon img{width:44px;height:44px;object-fit:contain}.tower-choice__meta{display:grid;gap:4px;justify-items:center}.tower-choice__key{font-size:.68rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.14em}.tower-choice__name{line-height:1.05;font-weight:700}.tower-choice.is-selected,.touch-grid button:active,.dock-actions button:active,.dock-pad button:active{background:linear-gradient(180deg,#ffe4a638,#0000),linear-gradient(180deg,#755b39,#47341d);border-color:var(--line);color:#f7f5ee;transform:translateY(1px)}.tower-choice.is-selected .tower-choice__icon{background:radial-gradient(circle at top,#ffeabd42,#0000),linear-gradient(180deg,#533b1df5,#251f15f5);border-color:#ffe6b24d}.tower-choice.is-selected .tower-choice__key{color:#fff6e1c7}.controls-list{margin:0;padding-left:18px;color:var(--ink-muted);line-height:1.55}.selection-summary{margin:0 0 12px;color:var(--ink-muted);min-height:3.8em;line-height:1.45}.dock-label{margin:0 0 8px;font-size:.76rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.08em}.dock-header{display:grid;gap:8px}.dock-selection-summary{margin:0;min-height:3.2em;color:var(--ink);line-height:1.35}.tower-grid--dock{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:8px}.dock-pad button,.dock-actions button{display:grid;place-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line-soft);background:linear-gradient(180deg,#ffdd9a14,#0000),linear-gradient(180deg,#3b3123f2,#20231bf2);color:var(--ink);cursor:pointer;text-align:center}.dock-actions-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:12px}.dock-pad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:". up ." "left . right" ". down .";gap:8px}.dock-pad__up{grid-area:up}.dock-pad__left{grid-area:left}.dock-pad__right{grid-area:right}.dock-pad__down{grid-area:down}.dock-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.dock-pad button svg{width:24px;height:24px;stroke-width:2.25}@media(max-width:1024px){.screen{padding:20px}.theme-layout,.app-shell{grid-template-columns:1fr}}@media(max-width:680px){.screen{padding:14px}.screen-card{padding:20px;border-radius:20px}.app-shell{padding:12px 12px 230px}.game-panel{padding:0}.hud{grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;border-radius:14px}.hud-block{padding:8px 10px}.hud-label{font-size:.64rem;letter-spacing:.1em}.hud-block strong{font-size:.95rem;line-height:1.05}.board-frame{min-height:400px;column-gap:8px;row-gap:10px;padding:10px;border-radius:18px}.board-frame:before{inset:8px;border-radius:12px}.board-pause-button{min-width:96px;top:10px;right:10px;padding:10px 12px}.board-start-button{left:10px;right:auto}.overlay-message{padding:18px}.overlay-card{width:min(100%,360px);min-height:340px;padding:18px}.overlay-title{font-size:2.2rem;line-height:.95}.overlay-body{font-size:.98rem}.sidebar{gap:12px}.card--controls,.card--touch,.card--towers{display:none}.control-dock{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px) + var(--browser-safe-bottom));gap:6px;padding:8px 8px 9px;border-radius:16px}.control-dock .dock-label{display:none}.control-dock .dock-selection-summary{margin-bottom:2px;font-size:.82rem;line-height:1.1}.tower-grid--dock{grid-template-columns:repeat(5,minmax(0,1fr))}.control-dock .tower-choice{min-height:58px;padding:4px 3px}.control-dock .tower-choice__icon{width:28px;height:28px;border-radius:8px}.control-dock .tower-choice__icon img{width:22px;height:22px}.control-dock .dock-pad button,.control-dock .dock-actions button{min-height:32px;border-radius:10px;font-size:.8rem}}@media(max-width:680px)and (max-height:760px){.app-shell{padding-bottom:176px}.board-frame{min-height:320px}.control-dock{gap:8px;padding:8px 10px 10px}}
