:root {
  --bg: #15261a; --bg2: #1d3324; --panel: #22382a; --panel-2: #2b4634; --line: rgba(255,255,255,0.08);
  --text: #f3efe4; --muted: #a9b7a7; --gold: #f2b632; --gold-2: #ffd45c; --danger: #d9534f; --green: #6fdc5a; --blue: #7fd3f0;
  --wood: #8b5a33; --wood-d: #5a3a1f; --shadow: 0 6px 20px rgba(0,0,0,0.35);
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --sar: env(safe-area-inset-right, 0px);
  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--font); overscroll-behavior: none; }
body { position: fixed; inset: 0; overflow: hidden; -webkit-user-select: none; user-select: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; }
#app { position: fixed; inset: 0; overflow: hidden; }
.hidden { display: none !important; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .22s ease, transform .22s ease; }
.screen.active { opacity: 1; pointer-events: auto; transform: none; }
.svg { display: inline-flex; width: 1.2em; height: 1.2em; vertical-align: -0.25em; }
.svg svg { width: 100%; height: 100%; fill: currentColor; }

/* ── buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; min-height: 44px; padding: 0 18px; border: 0; border-radius: 14px;
  background: var(--panel-2); color: var(--text); font-weight: 700; font-size: 16px; cursor: pointer; box-shadow: 0 3px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08); transition: transform .08s ease, filter .12s ease, background .12s ease; white-space: nowrap; }
.btn:active { transform: translateY(2px) scale(.98); box-shadow: 0 1px 0 rgba(0,0,0,0.35); }
.btn:disabled { opacity: .5; cursor: default; filter: grayscale(.4); }
.btn-primary { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #3b2a07; }
.btn-danger { background: linear-gradient(180deg, #e8655f, var(--danger)); color: #fff; }
.btn-ghost { background: rgba(255,255,255,0.08); box-shadow: none; }
.btn-icon { width: 44px; min-width: 44px; padding: 0; font-size: 18px; }
.btn-sm { min-height: 40px; padding: 0 12px; font-size: 14px; border-radius: 12px; }
.btn-xl { min-height: 64px; font-size: 24px; padding: 0 56px; border-radius: 20px; letter-spacing: .02em; }
.btn-wide { flex: 1; }
.pill { display: inline-flex; align-items: center; gap: .3em; padding: 2px 10px; border-radius: 999px; background: rgba(0,0,0,0.3); font-weight: 800; font-size: 14px; }
.star-pill { color: var(--gold-2); }
.star { color: var(--gold-2); }

/* ── home */
#screen-home { align-items: center; justify-content: center; }
#demo-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.home-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(10,25,12,0.15), rgba(10,25,12,0.75)); }
.home-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; height: 100%; width: 100%; padding: calc(var(--sat) + 48px) 24px calc(var(--sab) + 20px); }
.logo-wrap { text-align: center; margin-top: 6vh; }
.logo { font-size: clamp(56px, 18vw, 110px); font-weight: 900; letter-spacing: .06em; line-height: 1; color: #fff; text-shadow: 0 4px 0 #3b6a2f, 0 10px 30px rgba(0,0,0,0.5); animation: float 4s ease-in-out infinite; }
.tagline { margin-top: 10px; font-size: 17px; color: #e5f0d8; text-shadow: 0 2px 6px rgba(0,0,0,0.6); font-weight: 600; }
.home-buttons { display: flex; flex-direction: column; gap: 14px; width: min(100%, 360px); align-items: stretch; }
.home-buttons .btn-xl { width: 100%; }
.home-row { display: flex; gap: 10px; }
.home-footer { color: rgba(255,255,255,0.55); font-size: 12px; font-weight: 600; }
.home-footer .link { text-decoration: underline; cursor: pointer; }
@keyframes float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }

/* ── top bar & scroll screens */
.topbar { display: flex; align-items: center; gap: 12px; padding: calc(var(--sat) + 10px) calc(var(--sar) + 14px) 10px calc(var(--sal) + 14px); background: rgba(0,0,0,0.25); border-bottom: 1px solid var(--line); }
.topbar h2 { flex: 1; margin: 0; font-size: 20px; font-weight: 800; }
.scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px calc(var(--sar) + 16px) calc(var(--sab) + 24px) calc(var(--sal) + 16px); overscroll-behavior: contain; }
.hint { color: var(--muted); font-size: 14px; margin: 0 0 14px; line-height: 1.4; }

/* ── level select */
.world { margin: 0 auto 26px; max-width: 520px; border-radius: 22px; padding: 16px 16px 10px; background: var(--world-bg, var(--panel)); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.12)); pointer-events: none; }
.world-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; position: relative; z-index: 1; }
.world-head h3 { margin: 0; font-size: 22px; font-weight: 900; text-shadow: 0 2px 4px rgba(0,0,0,0.4); }
.world-head small { color: rgba(255,255,255,0.8); font-weight: 600; }
.world.locked .levels { filter: grayscale(.6) brightness(.7); }
.levels { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.lvl { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 16px; background: rgba(0,0,0,0.25); border: 0; color: inherit; text-align: left; cursor: pointer; min-height: 64px; transition: transform .1s ease, background .12s; }
.lvl:active { transform: scale(.985); }
.lvl:nth-child(even) { margin-left: 24px; } .lvl:nth-child(odd) { margin-right: 24px; }
.lvl.locked { opacity: .55; cursor: default; }
.lvl-num { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 18px; background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #3b2a07; box-shadow: 0 3px 0 rgba(0,0,0,0.35); flex: none; }
.lvl.locked .lvl-num { background: #555; color: #ccc; }
.lvl.done .lvl-num { background: linear-gradient(180deg, #9dff6b, #5fb84a); }
.lvl-main { flex: 1; min-width: 0; }
.lvl-name { font-weight: 800; font-size: 16px; }
.lvl-sub { color: rgba(255,255,255,0.75); font-size: 13px; margin-top: 2px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lvl-stars { font-size: 18px; letter-spacing: 2px; color: rgba(255,255,255,0.25); flex: none; }
.lvl-stars b { color: var(--gold-2); }
.lvl-endless { font-size: 11px; color: var(--blue); font-weight: 700; margin-top: 2px; }

/* ── upgrades */
#upgrades-list { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 0 auto 16px; }
.upg { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); }
.upg-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: rgba(0,0,0,0.3); flex: none; }
.upg-main { flex: 1; min-width: 0; }
.upg-name { font-weight: 800; }
.upg-desc { color: var(--muted); font-size: 13px; margin-top: 2px; }
.upg-ranks { display: flex; gap: 4px; margin-top: 6px; }
.upg-ranks i { width: 18px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.15); }
.upg-ranks i.on { background: var(--gold-2); }
.upg .btn { min-width: 78px; }
#btn-upg-reset { display: block; margin: 0 auto; }

/* ── game screen layout */
#screen-game { display: grid; grid-template-rows: auto 1fr auto; grid-template-areas: "top" "stage" "bottom"; background: var(--bg); }
#hud-top { grid-area: top; display: flex; align-items: center; gap: 8px; padding: calc(var(--sat) + 6px) calc(var(--sar) + 10px) 6px calc(var(--sal) + 10px); background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.25)); border-bottom: 1px solid var(--line); z-index: 2; }
.hud-stat { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; height: 40px; border-radius: 12px; background: rgba(0,0,0,0.35); font-weight: 800; font-size: 17px; }
#hud-lives .svg { color: #ff5f6d; } #hud-gold .svg { color: var(--gold-2); }
.hud-wave { flex: 1; justify-content: center; font-size: 15px; color: #e9f0e4; }
.hud-stat.bump { animation: bump .35s ease; } @keyframes bump { 0% { transform: scale(1) } 40% { transform: scale(1.18) } 100% { transform: scale(1) } }
.hud-stat.hurt { animation: hurt .45s ease; } @keyframes hurt { 0%,100% { background: rgba(0,0,0,0.35) } 30% { background: rgba(220,40,40,0.8) } }
.btn-speed { font-weight: 900; font-size: 15px; }
#stage { grid-area: stage; position: relative; min-height: 0; overflow: hidden; }
#game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
#hud-bottom { grid-area: bottom; display: flex; flex-direction: column; gap: 8px; padding: 8px calc(var(--sar) + 10px) calc(var(--sab) + 8px) calc(var(--sal) + 10px); background: linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.25)); border-top: 1px solid var(--line); z-index: 2; }
.panel { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 6px 8px; border-radius: 16px; background: var(--panel); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
.wave-info { flex: 1; min-width: 0; }
.wave-title { font-weight: 800; font-size: 14px; color: #e9f0e4; }
.wave-preview { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; min-height: 26px; }
.wave-preview .ec { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 2px; border-radius: 999px; background: rgba(0,0,0,0.3); font-size: 12px; font-weight: 800; }
.wave-preview .ec canvas { width: 24px; height: 24px; }
.wave-preview .ec.new { outline: 2px solid var(--gold-2); }
.wave-preview .ec.boss { background: rgba(200,40,40,0.5); }
.btn-wave { min-width: 118px; flex-direction: column; gap: 0; line-height: 1.1; min-height: 56px; position: relative; overflow: hidden; }
.btn-wave .bonus { font-size: 12px; font-weight: 800; opacity: .85; }
.btn-wave .bonus:empty { display: none; }
.btn-wave.pulse { animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 0 0 0 rgba(255,212,92,0.6) } 50% { box-shadow: 0 3px 0 rgba(0,0,0,0.35), 0 0 0 10px rgba(255,212,92,0) } }
#tower-icon { width: 56px; height: 56px; flex: none; border-radius: 12px; background: rgba(0,0,0,0.25); }
.tower-info { flex: 1; min-width: 0; }
.tower-name { font-weight: 800; font-size: 15px; }
.tower-stats { color: var(--muted); font-size: 12px; margin-top: 2px; line-height: 1.35; }
.tower-stats b { color: var(--text); }
.tower-stats .trait { color: var(--gold-2); }
.tower-actions { display: flex; flex-direction: column; gap: 6px; }
.tower-actions .btn { min-height: 34px; font-size: 13px; padding: 0 10px; justify-content: space-between; }
.tower-actions .btn .v { opacity: .85; font-weight: 800; margin-left: 6px; }
#tower-bar { display: flex; gap: 6px; }
.tcard { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; height: 66px; border: 0; border-radius: 14px; background: var(--panel); color: var(--text); padding: 4px 2px; cursor: pointer; position: relative; box-shadow: 0 3px 0 rgba(0,0,0,0.35); transition: transform .08s, background .12s; }
.tcard canvas { width: 34px; height: 34px; }
.tcard .tc-cost { font-size: 11px; font-weight: 800; color: var(--gold-2); display: inline-flex; align-items: center; gap: 2px; }
.tcard .tc-name { font-size: 9px; font-weight: 700; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard.poor .tc-cost { color: #ff7b7b; }
.tcard.poor canvas { opacity: .55; }
.tcard.armed { background: linear-gradient(180deg, #4e7a3a, #2f5a2a); outline: 2px solid var(--gold-2); transform: translateY(-3px); }
.tcard.locked { opacity: .45; }
.tcard.locked .tc-cost, .tcard.locked .tc-name { visibility: hidden; }
.tcard.locked::after { content: ''; position: absolute; left: 50%; bottom: 8px; width: 14px; height: 18px; transform: translateX(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d9c6a5'%3E%3Cpath d='M17 9V7a5 5 0 0 0-10 0v2H5v13h14V9h-2zM9 7a3 3 0 0 1 6 0v2H9V7z'/%3E%3C/svg%3E") center/contain no-repeat; }
.tcard:active { transform: translateY(1px) scale(.97); }
.tcard.locked:active { transform: none; }

.banner { position: absolute; left: 50%; top: 18%; transform: translate(-50%, -50%); padding: 10px 26px; border-radius: 16px; background: rgba(0,0,0,0.65); color: #fff; font-weight: 900; font-size: 26px; letter-spacing: .03em; pointer-events: none; text-shadow: 0 2px 6px rgba(0,0,0,0.6); animation: banner 2.2s ease forwards; border: 2px solid rgba(255,255,255,0.15); white-space: nowrap; }
.banner small { display: block; font-size: 13px; font-weight: 700; letter-spacing: .02em; color: #ffd45c; text-align: center; }
.banner.boss { background: rgba(120,20,20,0.8); border-color: #ff6b6b; }
@keyframes banner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.6) } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) } 25% { transform: translate(-50%, -50%) scale(1) } 80% { opacity: 1 } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1) } }
.toast { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); max-width: min(92%, 420px); padding: 10px 14px; border-radius: 14px; background: rgba(0,0,0,0.78); color: #fff; font-weight: 700; font-size: 14px; text-align: center; pointer-events: none; animation: toastin .25s ease; border: 1px solid rgba(255,255,255,0.12); line-height: 1.35; }
.toast.err { background: rgba(170,30,30,0.9); }
.toast.tip { background: rgba(30,60,30,0.92); border-color: rgba(255,212,92,0.5); }
@keyframes toastin { from { opacity: 0; transform: translate(-50%, 10px) } to { opacity: 1; transform: translateX(-50%) } }
.armed-hint { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,0.6); color: #fff; font-size: 13px; font-weight: 700; pointer-events: none; white-space: nowrap; }

/* ── modal */
.modal { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(5,12,6,0.72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); z-index: 10; padding: 20px; animation: fadein .2s ease; }
@keyframes fadein { from { opacity: 0 } to { opacity: 1 } }
.modal-card { width: min(100%, 440px); max-height: calc(100% - 40px); overflow-y: auto; border-radius: 24px; background: linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: 0 20px 60px rgba(0,0,0,0.6); padding: 22px 20px calc(18px + var(--sab)); animation: popin .3s cubic-bezier(.2,1.4,.4,1); border: 1px solid rgba(255,255,255,0.1); }
@keyframes popin { from { transform: scale(.85); opacity: 0 } to { transform: none; opacity: 1 } }
.modal-card h2 { margin: 0 0 6px; font-size: 26px; font-weight: 900; text-align: center; }
.modal-card h3 { margin: 14px 0 6px; font-size: 15px; color: var(--muted); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.modal-card p { margin: 6px 0; color: #dfe8d9; line-height: 1.45; text-align: center; }
.modal-card .sub { color: var(--muted); font-size: 14px; }
.modal-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.modal-actions .row { display: flex; gap: 10px; } .modal-actions .row .btn { flex: 1; }
.stars-big { display: flex; justify-content: center; gap: 10px; font-size: 54px; margin: 10px 0 4px; color: rgba(255,255,255,0.18); }
.stars-big span { transform: scale(0); display: inline-block; }
.stars-big span.on { color: var(--gold-2); text-shadow: 0 0 18px rgba(255,212,92,0.6); }
.stars-big span.pop { animation: starpop .5s cubic-bezier(.2,1.6,.4,1) forwards; }
.stars-big span.dim { animation: stardim .4s ease forwards; }
@keyframes starpop { from { transform: scale(0) rotate(-30deg) } to { transform: scale(1) rotate(0) } }
@keyframes stardim { from { transform: scale(0) } to { transform: scale(.8) } }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.stat { background: rgba(0,0,0,0.25); border-radius: 12px; padding: 8px 10px; }
.stat b { display: block; font-size: 18px; } .stat span { color: var(--muted); font-size: 12px; font-weight: 700; }
.enemy-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 8px 0; }
.enemy-chip { display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: rgba(0,0,0,0.3); font-size: 13px; font-weight: 700; }
.enemy-chip canvas { width: 30px; height: 30px; }
.enemy-chip.new { outline: 2px solid var(--gold-2); }
.enemy-chip .tag { font-size: 10px; color: var(--gold-2); font-weight: 900; }
.unlock { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: rgba(255,212,92,0.12); border: 1px solid rgba(255,212,92,0.35); margin-top: 10px; }
.unlock canvas { width: 48px; height: 48px; }
.unlock b { display: block; } .unlock small { color: var(--muted); }
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.toggle-row:last-of-type { border-bottom: 0; }
.switch { position: relative; width: 54px; height: 32px; border-radius: 999px; background: rgba(255,255,255,0.15); border: 0; cursor: pointer; transition: background .15s; flex: none; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch.on { background: var(--green); } .switch.on::after { transform: translateX(22px); }
.seg { display: inline-flex; background: rgba(0,0,0,0.3); border-radius: 10px; padding: 3px; gap: 3px; }
.seg button { border: 0; background: transparent; color: var(--muted); font-weight: 800; padding: 6px 10px; border-radius: 8px; min-height: 30px; cursor: pointer; }
.seg button.on { background: var(--panel-2); color: var(--text); }
.tower-help { display: grid; grid-template-columns: 1fr; gap: 8px; }
.tower-help .th { display: flex; gap: 10px; align-items: center; background: rgba(0,0,0,0.25); border-radius: 12px; padding: 8px; }
.tower-help canvas { width: 44px; height: 44px; flex: none; }
.tower-help b { display: block; font-size: 14px; } .tower-help small { color: var(--muted); font-size: 12px; line-height: 1.3; display: block; }

/* ── landscape / desktop: sidebar layout */
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  #screen-game { grid-template-columns: 1fr 340px; grid-template-rows: auto 1fr; grid-template-areas: "top side" "stage side"; }
  #hud-bottom { grid-area: side; border-top: 0; border-left: 1px solid var(--line); justify-content: flex-start; padding-top: calc(var(--sat) + 10px); gap: 10px; background: rgba(0,0,0,0.3); }
  #tower-bar { flex-wrap: wrap; } .tcard { flex: 1 1 calc(25% - 6px); height: 84px; } .tcard canvas { width: 44px; height: 44px; } .tcard .tc-name { font-size: 11px; }
  .panel { min-height: 84px; }
  #game-canvas { cursor: crosshair; }
}
@media (hover: hover) { .btn:hover { filter: brightness(1.08); } .tcard:hover { filter: brightness(1.1); } .lvl:hover:not(.locked) { background: rgba(0,0,0,0.35); } }
@media (max-width: 360px) { .hud-stat { padding: 0 8px; font-size: 15px; } .btn-wave { min-width: 100px; } }