:root { --bg:#e8e3ce; --panel:#f7f0d9; --ink:#293c32; --muted:#677361; --accent:#316350; --line:#9caa80; }
body { overflow-x:hidden; font-size:14px; background:radial-gradient(ellipse at top,#f8f5e4,#d9dfc5); }
.defense-shell { width:100%; padding:0; margin:0; }
.game-header { display:none!important; height:54px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
.wordmark { display:flex; gap:10px; align-items:center; }.crest { display:grid; place-items:center; width:31px; height:35px; background:#486e4a; border:2px solid #b9ba79; border-radius:7px 7px 14px 14px; font-size:27px; color:#ffedb5; }
h1 { font-size:25px; letter-spacing:-.035em; margin:0; }h1 span { color:#64734c; font-weight:500; }.prototype-label { font-size:9px; letter-spacing:.11em; color:var(--muted); border-left:1px solid var(--line); padding-left:12px; }
.game-header a,footer a { display:inline-flex; align-items:center; min-height:44px; }.game-shell { display:block; width:100%; height:100dvh; min-height:360px; overflow:hidden; border:0; border-radius:0; box-shadow:0 9px 25px #39482824,inset 0 0 0 2px #d9c788; background:#47694a; position:relative; }
.hud { position:absolute; top:12px; left:14px; right:14px; border:1px solid #8caa72; border-radius:12px; box-shadow:0 4px 16px #243d3455; display:flex; align-items:center; height:58px; padding:5px 14px; gap:18px; color:#fff5d6; background:linear-gradient(#456a4f,#315440); border-bottom:3px solid #aaad71; z-index:4; }
.map-heading { margin-right:auto; min-width:0; }.map-heading strong { display:block; font-size:17px; white-space:nowrap; }.map-heading>span { display:block; font-size:10px; color:#d7e1bc; }.hud-item { display:flex; align-items:center; gap:7px; min-width:64px; }.resource-icon { font-size:24px; color:#dce9b7; }.lives-icon { color:#ffa887; }.coin-icon { color:#ffcf61; text-shadow:0 2px #846029; }.hud-item>span:last-child { font-size:8px; text-transform:uppercase; letter-spacing:.07em; line-height:1.15; color:#cddbb4; }.hud-item strong { display:block; font-size:21px; color:#fff6d5; letter-spacing:0; font-variant-numeric:tabular-nums; }.hud button { background:#e5e2bd; color:#314332; border-color:#bec89b; }
button { min-height:44px; min-width:44px; border-radius:8px; padding:7px 10px; font-size:12px; line-height:1.15; background:linear-gradient(#fbf2d8,#e8dcb9); border:1px solid #a6aa7a; color:#314334; box-shadow:0 2px #2636261c; gap:5px; }button:hover { border-color:#427346; background:#fff3cb; }button:disabled { opacity:.53; }button.primary { background:linear-gradient(#f3ca6b,#dfae45); border-color:#aa853c; color:#34412b; }.quiet-button { background:transparent!important; color:#e0e6c7!important; border-color:#6e8b66!important; font-size:10px; }
.battle-region { position:absolute; inset:0; min-height:0; display:flex; justify-content:center; align-items:center; overflow:hidden; background:repeating-linear-gradient(6deg,#c1c39b22 0 3px,#d9d5ac22 3px 7px),radial-gradient(ellipse,#ddd6af,#b7bd91); }
.map-frame { position:absolute; inset:0; overflow:hidden; box-shadow:none; }
#battle { display:block; width:100%; height:100%; touch-action:none; cursor:crosshair; }
.game-dock { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); width:min(1050px,calc(100% - 28px)); border:1px solid #a6aa7a; border-radius:12px; box-shadow:0 4px 20px #34452b55; padding:8px 12px 6px; background:linear-gradient(#f5efce,#e1d6ac); border-top:3px solid #aaad71; z-index:4; }
.wave-forecast { display:flex; gap:10px; align-items:baseline; min-height:21px; font-size:10px; color:#596044; white-space:nowrap; overflow:hidden; }.wave-forecast strong { font-size:9px; letter-spacing:.08em; color:#4d6443; }.wave-forecast #wave-preview { overflow:hidden; text-overflow:ellipsis; }.wave-forecast #reward { margin-left:auto; color:#786021; }
.dock-row { display:flex; align-items:stretch; gap:14px; }#tower-shop { display:flex; gap:8px; flex:1; min-width:0; }.tower-button { text-align:left; justify-content:flex-start; gap:8px; padding:6px 10px; flex:1; min-height:54px; max-width:235px; }.tower-button.active { border-color:#508b48; background:#dfe8bd; box-shadow:inset 0 0 0 2px #58975a; }.tower-icon { overflow:hidden; width:36px; height:36px; display:grid; place-items:center; flex:none; font-size:27px; background:#d6d9af; border-radius:7px; color:#547641; }.tower-copy { flex:1; }.tower-copy strong { display:block; font-size:12px; }.tower-copy small { display:none; }.tower-price { color:#8a6522; font-size:14px; white-space:nowrap; }.tower-afford { display:block; font-size:9px; color:#9c492d; }.play-controls { display:flex; gap:6px; align-items:stretch; }#start-wave { min-width:126px; }#pause { min-width:64px; }#speed { width:48px; }.map-caption { font-size:10px; line-height:1.1; text-align:center; margin:5px 0 0; color:#697052; }
.placement-hint { position:absolute; left:50%; top:8px; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:10px; max-width:calc(100% - 16px); padding:5px 7px 5px 12px; background:#f8efd9ee; color:#34482c; border:1px solid #6c8455; border-radius:9px; box-shadow:0 3px 8px #27372333; pointer-events:auto; }.placement-hint strong { font-size:12px; white-space:nowrap; }.placement-hint>span { font-size:10px; }.placement-hint .invalid { color:#a54225; }.placement-hint button { min-height:44px; }
.tower-panel { max-height:calc(100dvh - 180px); overflow:auto; position:absolute; z-index:7; width:250px; padding:9px; border:2px solid #789052; border-radius:12px; background:linear-gradient(#fff6dbf8,#e6ddb8fa); box-shadow:0 5px 16px #293c3740; touch-action:manipulation; }.panel-heading { margin-bottom:5px; }.panel-heading strong { display:block; font-size:13px; }.panel-heading small { display:block; font-size:9px; color:#646d4d; }.branch-button { display:block; width:100%; text-align:left; min-height:44px; padding:5px 7px; margin:5px 0; }.branch-button strong { display:flex; gap:6px; justify-content:space-between; font-size:11px; }.branch-button strong span { color:#8a6325; }.branch-button small { display:block; font-size:8px; margin-top:2px; color:#66704f; }.branch-button.chosen { background:#d6e1b3; border-color:#659154; }.branch-afford { color:#ae5136!important; }#branch-note { margin:4px 0; font-size:8px; color:#697454; line-height:1.2; }.remove-button { display:block; width:100%; min-height:44px; border-color:#b9915e; background:#f4dcab; font-size:12px; color:#684c31; }
.feedback { position:absolute; z-index:8; pointer-events:none; padding:7px 10px; border-radius:7px; background:#fff4d8f5; box-shadow:0 3px 10px #344b3840; border:1px solid #b6ac78; font-size:11px; max-width:250px; }.pause-note { position:absolute; top:82px; left:8px; padding:6px 10px; background:#293f32dc; color:#fff0b7; border-radius:6px; font-size:11px; font-weight:700; pointer-events:none; }.pause-note span { display:block; font-size:9px; font-weight:400; }
.game-overlay { position:absolute; inset:0; z-index:20; display:flex; align-items:center; justify-content:center; padding:12px; background:#2a422b65; backdrop-filter:blur(2px); }.overlay-card { width:min(540px,100%); max-height:100%; overflow:auto; padding:22px; border:3px solid #a1aa6c; border-radius:17px; background:linear-gradient(#fff4d6,#e6dfb9); box-shadow:0 8px 26px #233a3a55; }.overlay-card .eyebrow { color:#7a8356; font-size:9px; margin:0; }.overlay-card h2 { margin:8px 0; color:#39573d; font-size:27px; }.overlay-card p { font-size:12px; }.overlay-actions { display:flex; flex-wrap:wrap; gap:8px; }.overlay-heading { display:flex; justify-content:space-between; gap:10px; align-items:center; }.map-picker { width:min(850px,100%); }#map-cards { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; }.map-card { flex:1; min-width:0; display:flex; flex-direction:column; align-items:stretch; padding:8px; }.map-card canvas { width:100%; aspect-ratio:20/13; border-radius:6px; }.map-card strong { font-size:13px; }.map-card small { font-size:10px; }.map-card.chosen { box-shadow:inset 0 0 0 2px #68934e; background:#e7ecce; }#map-warning { color:#81513c; }
footer { margin:0; height:47px; padding:0 2px; border:0; display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:10px; }footer>div { display:flex; align-items:center; gap:12px; }footer button { border:0; box-shadow:none; background:transparent; font-size:10px; text-decoration:underline; padding:0; }.sr-only { position:absolute; top:0; left:0; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }.error { position:fixed; z-index:100; top:8px; left:8px; right:8px; }



.tower-icon canvas { display:block; width:100%; height:100%; }
.hud { box-shadow:inset 0 2px #88a275,inset 0 -2px #263c2e66; }
.game-dock { box-shadow:inset 0 2px #fff6d3; }
.tower-panel { border-top-color:#c2bf80; }

/* Compact controls float inside the scene and consume no side columns. */
.hud:has(.placement-hint:not([hidden])) .map-heading { display:none; }
.placement-hint { position:static; transform:none; flex:1; margin-right:auto; max-width:initial; padding:2px 6px 2px 10px; box-shadow:none; }
.placement-hint>span { max-width:210px; }
.cancel-build { flex:none; min-width:80px; font-weight:700; color:#783c25; border:2px solid #b27049; background:#ffdfb5; }
.cancel-build:hover { background:#ffeace; border-color:#854526; }



.branch-button:disabled { opacity:1; color:#788165; border-color:#c2c5a2; background:#e9e7ca; }
.branch-button:disabled small { color:#7b8469; }
.branch-button.chosen:disabled { color:#37583b; background:#d9e7bb; border-color:#72945e; }
.branch-button.chosen:disabled small { color:#5e7750; }

body { margin:0; overflow:hidden; }
.settings-menu { position:relative; flex:none; }
.settings-menu summary { list-style:none; width:44px; height:44px; display:grid; place-items:center; cursor:pointer; border:1px solid #91a576; border-radius:8px; font-size:22px; }
.settings-menu summary::-webkit-details-marker { display:none; }
.settings-card { position:absolute; top:50px; right:0; z-index:30; width:230px; padding:14px; display:grid; gap:9px; border:2px solid #92a46c; border-radius:12px; background:#f5ebcc; color:#344a38; box-shadow:0 6px 24px #273d3655; }
.settings-card input { width:100%; min-height:28px; accent-color:#486f4e; }.settings-card a { min-height:32px; display:flex; align-items:center; }.settings-card small { font-size:10px; }
.hud:has(.settings-menu[open]) { z-index:25; }
@media(max-height:540px) and (orientation:landscape) {
 .hud { top:5px; left:7px; right:7px; height:46px; padding:0 7px; gap:12px; border-radius:8px; }
 .map-heading strong { font-size:13px; }.map-heading>span { font-size:8px; }.hud-item { min-width:47px; gap:4px; }.hud-item strong { font-size:17px; }.resource-icon { font-size:18px; }.hud-item>span:last-child { font-size:7px; }
 .game-dock { bottom:5px; left:7px; transform:none; width:calc(100% - 112px); padding:3px 7px; border-radius:8px; }.wave-forecast { min-height:16px; font-size:9px; gap:5px; }.wave-forecast strong { font-size:8px; }.dock-row { gap:8px; }#tower-shop { gap:5px; }.tower-button { padding:3px 6px; gap:5px; min-height:44px; }.tower-icon { width:28px; height:28px; }.tower-copy strong { font-size:10px; }.tower-price { font-size:12px; }.tower-afford { font-size:8px; }.play-controls { gap:4px; }#start-wave { min-width:104px; font-size:11px; }#pause { min-width:60px; }#speed { width:44px; }.map-caption { font-size:8px; margin:3px 0 0; }
 .tower-panel { width:208px; padding:7px; max-height:calc(100dvh - 142px); }.panel-heading strong { font-size:11px; }.panel-heading small { font-size:8px; }.branch-button { margin:3px 0; padding:4px 6px; }.branch-button strong { font-size:10px; }.branch-button small { font-size:7.5px; }#branch-note { font-size:7px; }.remove-button { font-size:10px; }
 .placement-hint { padding:0; gap:5px; background:transparent; border:0; color:#f5eed0; }.placement-hint>span { display:none; }.placement-hint strong { font-size:10px; }.placement-hint button { margin-left:0; }
 .pause-note { top:57px; font-size:9px; }.pause-note span { display:none; }.overlay-card { padding:12px; }.overlay-card h2 { font-size:20px; margin:4px 0; }.overlay-card p { font-size:10px; margin:7px 0; }.map-picker { padding:8px; }.map-card { padding:5px; gap:3px; }.map-card strong { font-size:11px; }.map-card small { font-size:8px; }.settings-card { max-height:calc(100dvh - 64px); overflow:auto; }
}
@media(max-width:650px) and (orientation:portrait) {
 .hud { top:7px; left:7px; right:7px; gap:8px; padding:4px 7px; flex-wrap:wrap; height:88px; }.map-heading { flex-basis:100%; display:flex; justify-content:space-between; align-items:center; }.map-heading strong { font-size:14px; }.hud-item { min-width:49px; }.hud-item strong { font-size:17px; }.resource-icon { font-size:18px; }.hud #maps { margin-left:auto; }
 .game-dock { bottom:7px; width:calc(100% - 14px); padding:5px; }.dock-row { flex-wrap:wrap; gap:6px; }#tower-shop { width:100%; flex-basis:100%; }.tower-button { min-width:0; padding:3px; gap:3px; }.tower-icon { width:25px; height:30px; }.tower-copy strong { font-size:9px; }.tower-price { font-size:11px; }.play-controls { width:100%; }.play-controls #start-wave { flex:1; }.wave-forecast { font-size:8px; gap:5px; }.wave-forecast #reward { display:none; }.map-caption { font-size:8px; }.tower-panel { width:190px; padding:6px; max-height:calc(100dvh - 248px); }.branch-button strong { font-size:9px; }.branch-button small { font-size:7px; }.placement-hint>span { display:none; }.placement-hint { flex-basis:100%; justify-content:space-between; height:29px; }.pause-note { top:103px; }
 #map-cards { grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; }.map-card { padding:4px; }.map-card strong { font-size:11px; }.map-card small { font-size:9px; }.map-card canvas { max-height:92px; object-fit:contain; }
}