@font-face { font-family: 'Kenney Pixel'; src: url('assets/fonts/kenney-pixel.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Kenney Mini'; src: url('assets/fonts/kenney-mini.ttf') format('truetype'); font-display: swap; }
:root {
  --bg: #120e0a; --panel: #1d1712; --panel2: #261e17; --ink: #e9dcc0; --dim: #a8987a; --gold: #e0b93c;
  --ale: #d9a13c; --red: #e05a47; --pink: #ff5fb0; --line: #3a2e22; --good: #7dd98a;
  font-family: Georgia, 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  overscroll-behavior: none; -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
button {
  font: inherit; color: var(--ink); background: var(--panel2); border: 1px solid var(--line);
  padding: 5px 10px; cursor: pointer; border-radius: 3px;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
button:hover:not(:disabled) { border-color: var(--gold); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: #5a2a14; border-color: #8a4a24; font-weight: bold; }
button.on { border-color: var(--gold); color: var(--gold); }
h3 { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.hidden { display: none !important; }
body:not(.touch) .touch-only { display: none !important; }

#app {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}
#topbar { display: flex; align-items: center; gap: 14px; padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--line); min-width: 0; }
#topbar .res { display: flex; flex-direction: column; line-height: 1.1; min-width: 56px; }
#topbar .res b { font-size: 18px; }
#topbar .res.small b { font-size: 13px; color: var(--dim); font-weight: normal; }
#topbar .lbl { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
#r-gold { color: var(--gold); } #r-ale { color: var(--ale); } #r-resolve { color: var(--red); }
#morale { display: flex; gap: 8px; }
.mbar { width: 74px; font-size: 10px; color: var(--dim); }
.mbar .track { height: 6px; background: #000; border: 1px solid var(--line); margin-top: 2px; position: relative; }
.mbar .fill { height: 100%; background: var(--good); }
.mbar .fill.warn { background: #d9a13c; } .mbar .fill.bad { background: var(--pink); }
.mbar .thresh { position: absolute; top: -2px; bottom: -2px; width: 1px; background: #fff8; }
.spacer { flex: 1; }

main { flex: 1; display: flex; min-height: 0; min-width: 0; }
#stage { flex: 1; position: relative; min-width: 0; min-height: 0; background: #0b0907; overflow: hidden; }
#game { display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#confirm {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  background: rgba(29,23,18,0.95); border: 1px solid #5a4630; border-radius: 6px; padding: 6px 8px; max-width: calc(100% - 20px);
  box-shadow: 0 4px 16px #000; font-size: 13px; z-index: 3;
}
#confirm span { flex: 1; min-width: 0; }
#side-tabs { display: flex; gap: 4px; position: sticky; top: -10px; background: var(--panel); padding: 4px 0 6px; margin-top: -4px; z-index: 1; }
#side-tabs button { flex: 1; font-size: 12px; padding: 6px 2px; min-width: 0; }
#side-tabs #b-drawer-close { flex: 0 0 40px; }
#rotate { position: fixed; left: 10px; right: 10px; top: calc(10px + env(safe-area-inset-top)); z-index: 20; display: flex; gap: 10px; align-items: center;
  background: #5a2a14; border: 1px solid #8a4a24; border-radius: 6px; padding: 10px 12px; font-size: 14px; box-shadow: 0 4px 16px #000; }
#rotate span { flex: 1; }
@media (orientation: landscape) { #rotate { display: none !important; } }
#banner {
  position: absolute; top: 40%; left: 0; right: 0; text-align: center; pointer-events: none;
  font-size: 34px; letter-spacing: 0.08em; color: var(--pink); text-shadow: 0 2px 8px #000; opacity: 0; transition: opacity 0.4s;
}
#banner.show { opacity: 1; }
#side { width: 330px; overflow-y: auto; overflow-x: hidden; background: var(--panel); border-left: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; }
#side section { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
#side .row { display: flex; justify-content: space-between; gap: 6px; }
#side .muted, .muted { color: var(--dim); }
#side .flavor { font-style: italic; color: var(--dim); margin: 4px 0 8px; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; font-size: 12px; margin: 6px 0; }
.modes { display: flex; gap: 4px; margin: 6px 0; }
.modes button { flex: 1; font-size: 11px; padding: 3px; }

#buildbar { display: flex; gap: 6px; padding: 6px 10px; background: var(--panel); border-top: 1px solid var(--line); overflow-x: auto; }
.tb { display: flex; flex-direction: column; align-items: flex-start; min-width: 104px; font-size: 12px; padding: 5px 6px; flex: 0 0 auto; }
.tb .tname { font-weight: bold; }
.tb .tshort { display: none; font-weight: bold; }
.tb .tcost { color: var(--gold); font-size: 11px; }
.tb .key { color: var(--dim); font-size: 10px; }

#modal { position: fixed; inset: 0; background: rgba(8,6,4,0.86); display: flex; align-items: center; justify-content: center; z-index: 10; padding: 16px; }
.card { background: var(--panel); border: 1px solid #5a4630; max-width: 860px; width: 100%; max-height: 92vh; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 22px 26px; border-radius: 4px; box-shadow: 0 10px 40px #000; }
.card h1 { margin: 0; font-size: 40px; letter-spacing: 0.04em; color: var(--gold); }
.card h2 { margin: 0 0 10px; color: var(--gold); }
.card .sub { color: var(--pink); letter-spacing: 0.2em; font-size: 12px; text-transform: uppercase; margin-bottom: 14px; }
.card p { line-height: 1.5; }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin: 12px 0; }
.choice { border: 1px solid var(--line); background: var(--panel2); padding: 10px; border-radius: 3px; cursor: pointer; text-align: left; }
.choice.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; }
.choice.locked { opacity: 0.4; cursor: default; }
.choice .cname { font-weight: bold; margin-bottom: 4px; }
.choice .ctext { font-size: 13px; }
.choice .cflav { font-size: 12px; font-style: italic; color: var(--dim); margin-top: 6px; }
.actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
table.runs { width: 100%; border-collapse: collapse; font-size: 12px; }
table.runs td, table.runs th { border-bottom: 1px solid var(--line); padding: 4px; text-align: left; }
.help { columns: 2; font-size: 13px; line-height: 1.45; }
.help p { margin: 0 0 8px; break-inside: avoid; }
kbd { background: #000; border: 1px solid var(--line); padding: 0 4px; border-radius: 2px; font-size: 11px; }

#debug { position: fixed; left: 8px; top: 64px; width: 300px; max-height: 60vh; overflow-y: auto; background: rgba(0,0,0,0.88); border: 1px solid #555; padding: 8px; font: 11px monospace; z-index: 5; }
#debug button { font: 11px monospace; padding: 2px 5px; margin: 1px; }
#debug table { width: 100%; border-collapse: collapse; }
#debug td { padding: 1px 3px; }

/* ------------------------------------------------------------------ touch / phones */
body.touch button { min-height: 40px; font-size: 14px; }
body.touch #topbar { gap: 8px; padding: 4px 8px; }
body.touch #topbar button { min-width: 40px; padding: 4px 8px; }
body.touch #side {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(360px, 88vw); z-index: 8;
  padding: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) 10px;
  transform: translateX(105%); transition: transform 0.2s ease; box-shadow: -8px 0 24px #000;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
body.touch.drawer-open #side { transform: none; }
body.touch:not(.drawer-open) #side { pointer-events: none; } /* a closing drawer mustn't eat map touches */
body.touch #side section[data-panel] { display: none; border: 0; }
body.touch #side section[data-panel].active { display: block; }
body.touch #b-drawer { font-size: 18px; }
body.touch #buildbar { padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); -webkit-overflow-scrolling: touch; scrollbar-width: none; }
body.touch #buildbar::-webkit-scrollbar { display: none; }
body.touch .tb { min-width: 76px; min-height: 48px; padding: 4px 8px; }
body.touch .tb .tname { font-size: 17px; line-height: 1; }
body.touch .tier button, body.touch .modes button { min-height: 40px; }
body.touch .card { padding: 16px 18px; }
body.touch .actions { position: sticky; bottom: -16px; background: var(--panel); padding: 10px 0; margin-bottom: -16px; }
body.touch .actions button { min-height: 44px; }
body.touch .choice { padding: 12px; }
body.touch #debug { top: calc(56px + env(safe-area-inset-top)); bottom: auto; width: 250px; max-height: 45vh; font-size: 10px; }
body.touch input, body.touch select { font-size: 16px; } /* stops iOS focus-zoom */

/* short landscape phones: slim top bar, build column on the left, map gets the rest */
@media (max-height: 500px) {
  #topbar { gap: 8px; padding: 2px 8px; flex-wrap: nowrap; overflow: hidden; }
  #topbar .res { min-width: 0; }
  #topbar .res b { font-size: 14px; }
  #topbar .lbl { font-size: 8px; letter-spacing: 0.05em; }
  #topbar .res.small { display: none; }
  #topbar button { min-height: 30px !important; font-size: 13px !important; padding: 2px 8px; }
  #morale { gap: 5px; min-width: 0; }
  .mbar { width: 42px; font-size: 8px; }
  .card h1 { font-size: 26px; }
  .card p { margin: 6px 0; }
  .help { columns: 1; }
  #banner { font-size: 22px; }
  body.touch #app {
    display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: "top top" "build main";
  }
  body.touch #topbar { grid-area: top; }
  body.touch main { grid-area: main; }
  body.touch #buildbar {
    grid-area: build; flex-direction: column; overflow-x: hidden; overflow-y: auto; gap: 4px;
    padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-top: 0; border-right: 1px solid var(--line);
  }
  body.touch .tb { min-width: 0; width: 100%; min-height: 44px; padding: 3px 6px; flex: 0 0 auto; }
  body.touch .tb .tcost { font-size: 10px; }
}
/* narrow screens: portrait phones */
@media (max-width: 700px) {
  #topbar { flex-wrap: wrap; row-gap: 4px; }
  #topbar .res.small { display: none; }
  #morale { order: 10; width: 100%; justify-content: space-between; }
  .mbar { flex: 1; width: auto; }
  /* portrait has room to spare: map on top, panels inline below it, build bar at the bottom */
  body.touch main { flex-direction: column; }
  body.touch #stage { flex: 0 0 auto; aspect-ratio: 16 / 9; width: 100%; }
  body.touch #side {
    position: static; transform: none; pointer-events: auto; width: auto; flex: 1; min-height: 0;
    box-shadow: none; border-left: 0; border-top: 1px solid var(--line); padding: 8px 10px;
  }
  body.touch #b-drawer, body.touch #b-drawer-close { display: none; }
  body.touch #topbar button { min-height: 34px; padding: 2px 8px; }
  .help { columns: 1; }
  .card h1 { font-size: 28px; }
  #banner { font-size: 20px; }
}

/* ================================================================== pixel skin
   Kenney pixel-adventure UI frames (CC0), 9-sliced with border-image. Headings,
   buttons and numbers use the Kenney Pixel font; longer prose stays serif. */
:root { --pixel: 'Kenney Pixel', 'Kenney Mini', monospace; --wood: #6b4424; --wood-dark: #3a2414; }
html, body { background: #120d0a; }
button {
  font-family: var(--pixel); font-size: 22px; line-height: 1; color: #3b2616; background: none;
  border: 8px solid transparent; border-image: url('assets/ui/button.png') 4 fill / 8px stretch;
  border-radius: 0; padding: 2px 6px; image-rendering: pixelated; letter-spacing: 0.02em;
}
button:hover:not(:disabled) { border-color: transparent; filter: brightness(1.08); }
button:active:not(:disabled) { transform: translateY(1px); }
button.primary { color: #fff4e0; background: none; border-image-source: url('assets/ui/button-red.png'); text-shadow: 0 1px 0 #5a1a14; }
button.on { border-image-source: url('assets/ui/button-steel.png'); color: #f2f6fa; }
button:disabled { opacity: 0.5; filter: saturate(0.4); }
h3 { font-family: var(--pixel); font-size: 22px; letter-spacing: 0.08em; }

#topbar {
  background: var(--wood-dark); border-bottom: 0;
  border-image: url('assets/ui/frame-wood.png') 5 fill / 0 0 8px 0 stretch; padding-bottom: 8px;
  image-rendering: pixelated;
}
#topbar .res b { font-family: var(--pixel); font-size: 26px; font-weight: normal; line-height: 0.9; }
#topbar .lbl { font-family: var(--pixel); font-size: 16px; color: #d8b88a; }
#topbar .res.small b { font-family: var(--pixel); font-size: 20px; color: #f0dcb8; }
#topbar .res .lbl::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px;
  background-size: contain; image-rendering: pixelated; }
#topbar .res:nth-child(1) .lbl::before { background-image: url('assets/ui/icon-gold.png'); }
#topbar .res:nth-child(2) .lbl::before { background-image: url('assets/ui/icon-ale.png'); }
#topbar .res:nth-child(3) .lbl::before { background-image: url('assets/ui/icon-resolve.png'); }
#topbar .res:nth-child(4) .lbl::before { background-image: url('assets/ui/icon-wave.png'); }
#r-gold { color: #ffd35a; } #r-ale { color: #f0a848; } #r-resolve { color: #ff6a5a; }
.mbar { font-family: var(--pixel); font-size: 16px; color: #d8b88a; }
.mbar .track { height: 8px; background: #1a0f08; border: 2px solid #1a0f08; }
.mbar .thresh { background: #fff; width: 2px; }

/* the sidebar is a wooden board holding parchment notes */
#side { background: #4a2f1a; border-left: 0; padding: 10px; gap: 10px; }
#side section, #side nav {
  --ink: #3b2616; --dim: #7a5634; --gold: #9a5b00; --red: #b0302a; --pink: #b0306a; --line: #c9a878;
  color: var(--ink); background: none; border: 12px solid transparent !important;
  border-image: url('assets/ui/frame-parchment.png') 6 fill / 12px stretch !important; image-rendering: pixelated;
  padding: 0 !important; margin: 0;
}
#side h3 { color: #7a4a1c; margin-bottom: 4px; }
#side .muted, #side .flavor { color: var(--dim); }
#side .stats span:nth-child(even) { font-family: var(--pixel); font-size: 21px; line-height: 0.9; }
#side .modes button { font-size: 19px; }
#side-tabs button { font-size: 20px; }

/* build bar: wooden shelf of tower cards, each showing the tower's sprite */
#buildbar { background: var(--wood-dark); border-top: 0; border-image: url('assets/ui/frame-wood.png') 5 fill / 8px 0 0 0 stretch; padding-top: 10px; }
.tb { flex-direction: row; align-items: center; gap: 6px; }
.tb img.ticon { width: 30px; height: 45px; image-rendering: pixelated; flex: none; margin: -6px 0 -4px; }
.tb .tlabel { display: flex; flex-direction: column; align-items: flex-start; }
.tb .tname, .tb .tshort { font-family: var(--pixel); font-size: 21px; font-weight: normal; color: #3b2616; }
.tb .tcost { font-family: var(--pixel); font-size: 19px; color: #8a5200; }
.tb .key { font-family: var(--pixel); font-size: 16px; color: #8a6a44; }
.tb.on { border-image-source: url('assets/ui/button-steel.png'); }
.tb.on .tname, .tb.on .tshort, .tb.on .tcost { color: #f2f6fa; }

/* modals: a big sheet of parchment */
#modal { background: rgba(10,6,4,0.78); }
.card {
  --ink: #3b2616; --dim: #7a5634; --gold: #9a5b00; --red: #b0302a; --pink: #b0306a; --line: #c9a878;
  color: var(--ink); background: none; border: 24px solid transparent; border-radius: 0; box-shadow: none;
  border-image: url('assets/ui/frame-parchment.png') 6 fill / 24px stretch; image-rendering: pixelated;
  padding: 4px 10px; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.6));
}
.card h1 { font-family: var(--pixel); font-weight: normal; font-size: 64px; color: #9a3b1a; line-height: 0.9; text-shadow: 3px 3px 0 #e8c890; }
.card h2 { font-family: var(--pixel); font-weight: normal; font-size: 34px; color: #7a3b1a; }
.card .sub { font-family: var(--pixel); font-size: 22px; color: #b0306a; }
.card .muted { color: var(--dim); }
.choice { background: rgba(122,86,52,0.1); border: 2px solid #c9a878; border-radius: 0; color: var(--ink); font-family: inherit; }
.choice .cname { font-family: var(--pixel); font-size: 26px; font-weight: normal; }
.choice.sel { border-color: #9a3b1a; box-shadow: 0 0 0 2px #9a3b1a inset; background: rgba(154,59,26,0.1); }
.choice img.portrait { float: left; width: 48px; height: 48px; image-rendering: pixelated; margin: 0 8px 4px 0; }
table.runs td, table.runs th { border-bottom-color: #c9a878; }
kbd { background: #3b2616; color: #f2e6c8; border: 0; }
.title-art { display: block; width: 100%; max-width: 640px; height: auto; image-rendering: pixelated; margin: 0 auto 8px; }
#confirm { background: none; border: 10px solid transparent; border-image: url('assets/ui/frame-parchment.png') 6 fill / 10px stretch; color: #3b2616; box-shadow: none; filter: drop-shadow(0 4px 10px #000); }
#banner { font-family: var(--pixel); font-size: 56px; color: #ffd35a; text-shadow: 3px 3px 0 #5a1a14, 0 0 20px #000; }
#rotate { background: none; border: 10px solid transparent; border-image: url('assets/ui/frame-parchment.png') 6 fill / 10px stretch; color: #3b2616; }
body.touch button { min-height: 40px; font-size: 22px; }
@media (max-height: 500px) {
  #topbar .res b { font-size: 20px; }
  body.touch #buildbar { border-image-width: 0 8px 0 0; padding: 4px 10px 4px 4px; }
  .tb img.ticon { width: 22px; height: 33px; }
  .card h1 { font-size: 42px; }
  #banner { font-size: 36px; }
}
@media (max-width: 700px) {
  .card h1 { font-size: 42px; } #banner { font-size: 32px; }
  body.touch .tb { flex-direction: column; min-width: 96px; gap: 0; padding: 2px 4px; }
  body.touch .tb img.ticon { width: 20px; height: 30px; margin: 0; }
  body.touch .tb .tlabel { align-items: center; }
  body.touch .tb .tname { font-size: 16px; }
  body.touch .tb .tcost { font-size: 14px; white-space: nowrap; }
}

/* ================================================================== v2: panels, bars, toasts
   (after the pixel skin so these win) */
.small { font-size: 12px; }
.big { font-family: var(--pixel); font-size: 24px; font-weight: normal; }
.gold { color: #9a5b00; font-family: var(--pixel); font-size: 22px; } .ale { color: #b0600a; font-family: var(--pixel); font-size: 20px; }
.warn { color: #b0306a; } .cold { color: #3a7aa8; } .good { color: #2f7a2f; } .bad { color: #b0302a; }
#side .desc, .card .desc { margin: 4px 0 6px; line-height: 1.35; }
#side .row { align-items: center; margin: 4px 0; }
#side .row.wrap, .row.wrap { flex-wrap: wrap; justify-content: flex-start; }
#side img.portrait { float: left; width: 48px; height: 48px; image-rendering: pixelated; margin: 0 8px 4px 0; }
#side section h3 { clear: both; margin-top: 6px; }

/* the two BTD-style upgrade paths */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; }
.path { border: 2px solid #c9a878; background: rgba(122,86,52,0.1); padding: 4px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pname { font-family: var(--pixel); font-size: 20px; color: #7a3b1a; line-height: 1; }
.tier { display: flex; flex-direction: column; font-size: 11.5px; line-height: 1.25; padding: 3px 4px; border-left: 3px solid transparent; }
.tier .tn { font-family: var(--pixel); font-size: 18px; line-height: 1; }
.tier .td { color: var(--dim); }
.tier.done { border-left-color: #6a9a3a; background: rgba(106,154,58,0.12); }
.tier.done .tn { color: #3a6a1a; }
.tier.next { border-left-color: #c98a2a; }
.tier.next button { width: 100%; font-size: 18px; padding: 1px 2px; margin-bottom: 2px; white-space: normal; line-height: 1; }
.tier.lock { opacity: 0.9; border-left-color: #8a7a6a; }
.tier.later { opacity: 0.5; }
.xpneed { font-size: 11px; color: #7a3b1a; margin-top: 2px; }
.xpbar { display: block; height: 6px; background: #3b2616; border: 1px solid #3b2616; margin: 3px 0; min-width: 60px; }
.xpbar i { display: block; height: 100%; background: linear-gradient(#ffd35a, #d99a2a); }
.key { font-family: var(--pixel); font-size: 15px; color: #8a6a44; background: rgba(0,0,0,0.08); padding: 0 3px; }

/* enemy traits */
.trait { display: inline-flex; align-items: center; gap: 3px; font-family: var(--pixel); font-size: 18px; line-height: 1; margin: 1px 4px 1px 0; white-space: nowrap; }
.trait i { font-style: normal; display: inline-block; min-width: 14px; height: 14px; line-height: 14px; text-align: center; background: var(--tc); color: #1a0f08; border: 1px solid #1a0f08; font-size: 14px; }
.traits > div { margin: 4px 0; font-size: 12px; line-height: 1.3; }
.ttext { color: var(--dim); }
.elist { display: flex; flex-direction: column; gap: 3px; margin: 4px 0 6px; }
.erow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; text-align: left; font-family: Georgia, serif; font-size: 13px; color: var(--ink);
  border: 0; border-image: none; background: rgba(122,86,52,0.1); padding: 2px 4px; }
.erow b { font-weight: normal; font-family: var(--pixel); font-size: 20px; }
.erow img.eicon { width: 24px; height: 24px; image-rendering: pixelated; }

/* build bar extras */
.tb.soon { opacity: 0.45; }
.tb.poor .tcost { color: #b0302a; }
.tb.item { min-width: 90px; }
.tb.item .tcost { color: #b0600a; }
.tb img.ticon.hero { width: 36px; height: 36px; margin: -4px 0; }
.bsep { flex: 0 0 8px; }

/* ability bar floats at the bottom-left of the map */
#abilities { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 6px; flex-wrap: wrap; max-width: 70%; z-index: 2; pointer-events: none; }
#abilities .ab { pointer-events: auto; position: relative; display: flex; flex-direction: column; align-items: flex-start; font-size: 19px; padding: 2px 8px; overflow: hidden; }
#abilities .ab .abo { font-size: 14px; color: #7a5634; }
#abilities .ab .cd { position: absolute; inset: 0; background: conic-gradient(rgba(20,10,4,0.7) var(--p, 0%), transparent 0); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; pointer-events: none; }
#abilities .ab:not(:disabled) { animation: abglow 1.4s ease-in-out infinite; }
@keyframes abglow { 50% { filter: brightness(1.18) drop-shadow(0 0 4px #ffd35a); } }

/* toasts */
#toasts { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 3; pointer-events: none; width: min(560px, 90%); }
.toast { font-family: var(--pixel); font-size: 22px; line-height: 1.05; color: #fff4e0; background: rgba(30,18,10,0.88); border: 2px solid #6b4424; padding: 4px 10px; text-align: center; transition: opacity 0.5s, transform 0.5s; }
.toast.good { border-color: #6a9a3a; } .toast.warn { border-color: #c23b6a; color: #ffd0e0; }
.toast.out { opacity: 0; transform: translateY(-6px); }
#paused { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--pixel); font-size: 40px; color: #ffd35a; background: rgba(20,10,4,0.75); padding: 8px 18px; z-index: 3; cursor: pointer; text-shadow: 2px 2px 0 #5a1a14; }

/* tutorial */
#tutor { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); width: min(560px, 94%); z-index: 4; color: #3b2616;
  border: 12px solid transparent; border-image: url('assets/ui/frame-parchment.png') 6 fill / 12px stretch; image-rendering: pixelated; font-size: 14px; line-height: 1.4; filter: drop-shadow(0 4px 12px #000); }
#tutor .tstep { font-family: var(--pixel); font-size: 18px; color: #b0306a; }
#tutor .tbtns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
#tutor .tbtns button { font-size: 19px; }
#tutor-ring { position: fixed; z-index: 4; pointer-events: none; border: 3px solid #ffd35a; box-shadow: 0 0 0 3px rgba(90,26,20,0.8), 0 0 18px #ffd35a; animation: ringpulse 1s ease-in-out infinite; }
@keyframes ringpulse { 50% { opacity: 0.55; box-shadow: 0 0 0 6px rgba(90,26,20,0.6), 0 0 26px #ffd35a; } }
.tut-glow { animation: tglow 0.9s ease-in-out infinite; position: relative; z-index: 5; }
@keyframes tglow { 50% { filter: brightness(1.25) drop-shadow(0 0 8px #ffd35a); } }

/* ------------------------------------------------------------------ modal variants */
#modal.full { padding: 0; background: #120d0a; }
#modal.tip { background: rgba(10,6,4,0.55); }
.tipcard .kicker { font-family: var(--pixel); font-size: 22px; color: #b0306a; }
.tipcard h2 { margin-bottom: 4px; }
.tipcard img.tipicon { float: right; width: 72px; height: auto; image-rendering: pixelated; margin: 0 0 6px 10px; }
.tipcard ul { padding-left: 18px; margin: 6px 0; }
.card h3 { font-family: var(--pixel); font-size: 24px; color: #7a3b1a; margin: 12px 0 4px; letter-spacing: 0.02em; text-transform: none; }
.card .actions button { font-size: 24px; }
.menu { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.menu.col { flex-direction: column; align-items: stretch; max-width: 320px; margin: 0 auto; }
.menu.col button { font-size: 26px; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.tabs button { font-size: 19px; }
tr.me td { background: rgba(255,211,90,0.18); }
.stats.wide { max-width: 520px; }
.bigwave { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 10px; font-family: var(--pixel); }
.bigwave span { font-size: 26px; color: #7a5634; }
.bigwave b { font-size: 72px; line-height: 0.8; color: #9a3b1a; font-weight: normal; text-shadow: 3px 3px 0 #e8c890; }
.unlocks li { font-family: var(--pixel); font-size: 22px; color: #2f6a2f; }
.card h1.good { color: #3a6a1a; } .card h1.bad { color: #9a1f1a; }

/* title screen */
.title-screen { position: fixed; inset: 0; overflow: hidden; }
#title-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.title-ui { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: max(4vh, env(safe-area-inset-top)) 16px 16px; gap: 10px; text-align: center; overflow-y: auto; }
.logo { margin: 0; font-family: var(--pixel); font-weight: normal; font-size: clamp(44px, 9vw, 108px); line-height: 0.85; color: #ffd35a;
  text-shadow: 4px 4px 0 #5a1a14, 0 0 30px rgba(255,160,60,0.45); letter-spacing: 0.02em; }
.tagline { font-family: var(--pixel); font-size: clamp(18px, 2.4vw, 28px); color: #f0c6d8; text-shadow: 2px 2px 0 #2a0f1a; margin-top: -4px; }
.namefield { display: flex; align-items: center; gap: 8px; font-family: var(--pixel); font-size: 22px; color: #f2e6c8; text-shadow: 2px 2px 0 #1a0f08; }
.namefield input, .setting input { font-family: var(--pixel); font-size: 22px; padding: 4px 8px; background: #f7ecd2; color: #3b2616; border: 3px solid #3b2616; outline: none; width: 240px; max-width: 60vw; }
.namefield input:focus, .setting input:focus { border-color: #b0306a; }
.title-ui .menu { max-width: 640px; }
.title-ui .menu button { font-size: 26px; min-width: 140px; }
.title-ui .menu button.big { font-size: 36px; min-width: 220px; padding: 6px 24px; }
.modes-toggle { display: inline-flex; gap: 0; }
.modes-toggle button { font-size: 22px; min-width: 130px; }
.mode-note, .title-foot { font-size: 14px; color: #f2e6c8; text-shadow: 1px 1px 0 #000; max-width: 520px; }
.title-foot { font-family: var(--pixel); font-size: 20px; opacity: 0.85; }
.note-btn { position: absolute; z-index: 2; right: max(14px, env(safe-area-inset-right)); bottom: max(14px, env(safe-area-inset-bottom)); font-size: 24px; transform: rotate(-3deg); }
.note-btn span { font-size: 20px; }
.note-paper { background: repeating-linear-gradient(#fbf1d8, #fbf1d8 23px, #e8d6b0 24px); padding: 10px 14px; border: 1px solid #c9a878; box-shadow: 2px 3px 0 #c9a878; transform: rotate(-0.4deg); }
.note-paper .help { font-size: 13.5px; }

/* map & hero select */
.choices.maps { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.mapc { display: flex; flex-direction: column; gap: 3px; }
.mapc img.thumb { width: 100%; height: auto; image-rendering: pixelated; border: 2px solid #3b2616; }
.mapc .tier { display: inline-block; align-self: flex-start; font-family: var(--pixel); font-size: 18px; padding: 0 6px; color: #fff; border: 0; }
.tier.t1 { background: #3a8a3a; } .tier.t2 { background: #c98a2a; } .tier.t3 { background: #c2522a; } .tier.t4 { background: #8a1f3a; }
.mapc.random { align-items: center; justify-content: center; }
.mapc .dice { font-size: 64px; line-height: 1; color: #7a3b1a; }
.choices.heroes { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.choices.mands { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.choice.small .cname { font-size: 20px; }
.choice:disabled { opacity: 0.45; filter: none; }
.setting { margin: 10px 0; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.setting input { width: 100%; max-width: none; font-size: 18px; }

/* progress */
.plist { display: flex; flex-direction: column; gap: 4px; }
.prow { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #c9a878; padding: 3px 0; }
.prow img.ticon { width: 30px; height: 45px; image-rendering: pixelated; margin: -6px 0; }
.pmain { flex: 1; min-width: 0; }
.pmain b { font-family: var(--pixel); font-size: 22px; font-weight: normal; }
.unl { font-size: 13px; }
.pxp { width: 190px; display: flex; flex-direction: column; font-size: 12px; }
.pxp > span:first-child { font-family: var(--pixel); font-size: 20px; }

@media (max-width: 700px) {
  .paths { grid-template-columns: 1fr; }
  .pxp { width: 120px; }
  .title-ui .menu button { min-width: 0; font-size: 22px; }
  .note-btn { position: static; margin-top: 6px; }
}
@media (max-height: 500px) {
  .logo { font-size: 48px; }
  .title-ui { gap: 6px; padding-top: 8px; }
  .title-ui .menu button { font-size: 20px; min-width: 110px; }
  .title-ui .menu button.big { font-size: 26px; min-width: 160px; }
  #abilities .ab { font-size: 16px; }
  .toast { font-size: 18px; }
  #tutor { font-size: 12.5px; }
}
body.touch #abilities .ab { min-height: 44px; }

#b-menu .long { margin-left: 4px; }
body.touch #b-menu .long { display: none; }
@media (max-height: 500px) { #topbar .res.small { display: none; } #b-menu .long { display: none; } }
#side section.picked { outline: 3px solid #ffd35a; outline-offset: -3px; }
@media (max-height: 500px) {
  body.touch .tb .tlabel { min-width: 0; overflow: hidden; }
  body.touch .tb .tname { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 56px; }
  #topbar .res { margin-right: 6px; }
}

/* ------------------------------------------------------------------ new tower unlocked */
#unlock { position: absolute; left: 50%; top: 22%; transform: translate(-50%, 0) scale(0.6); opacity: 0; pointer-events: none; z-index: 5;
  width: min(420px, 90%); text-align: center; color: #3b2616; padding: 6px 12px 10px;
  border: 14px solid transparent; border-image: url('assets/ui/frame-parchment.png') 6 fill / 14px stretch; image-rendering: pixelated;
  filter: drop-shadow(0 0 18px rgba(255,211,90,0.8)) drop-shadow(0 6px 14px #000); }
#unlock.show { animation: unlockpop 4.2s ease-out forwards; }
@keyframes unlockpop {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.5); }
  8% { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  14% { transform: translate(-50%, 0) scale(1); }
  85% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -12px) scale(0.96); }
}
#unlock .uk { font-family: var(--pixel); font-size: 34px; line-height: 1; color: #b0306a; text-shadow: 2px 2px 0 #ffd35a; animation: ukshine 0.6s steps(2) infinite; }
@keyframes ukshine { 50% { color: #9a3b1a; } }
#unlock img { height: 84px; image-rendering: pixelated; margin: 4px 0 -4px; }
#unlock .un { font-family: var(--pixel); font-size: 30px; line-height: 1; color: #7a3b1a; }
#unlock .ud { font-size: 13px; margin-top: 4px; }
#unlock .uh { font-family: var(--pixel); font-size: 18px; color: #2f6a2f; margin-top: 4px; }

/* build-bar button of a tower you haven't tried yet */
.tb { position: relative; }
.tb.fresh { animation: freshglow 1s ease-in-out infinite; }
@keyframes freshglow { 0%, 100% { filter: drop-shadow(0 0 2px #ffd35a); } 50% { filter: brightness(1.15) drop-shadow(0 0 10px #ffd35a); } }
.newtag { position: absolute; top: -9px; right: -6px; z-index: 1; font-family: var(--pixel); font-size: 15px; line-height: 1; color: #fff4e0;
  background: #c2303a; border: 2px solid #5a1a14; padding: 1px 4px; transform: rotate(8deg); pointer-events: none; }

.ucards { display: flex; flex-direction: column; gap: 6px; }
.ucard { display: flex; align-items: center; gap: 10px; border: 2px solid #c9a878; background: rgba(122,86,52,0.1); padding: 4px 8px; }
.ucard.tower { border-color: #d4a02a; background: rgba(255,211,90,0.2); box-shadow: 0 0 10px rgba(255,211,90,0.6); }
.ucard img { height: 56px; image-rendering: pixelated; }
.ucard .uk { font-family: var(--pixel); font-size: 18px; color: #b0306a; }
.ucard b { font-family: var(--pixel); font-weight: normal; font-size: 24px; }
.newnote { font-family: var(--pixel); font-size: 22px; color: #9a3b1a; background: rgba(255,211,90,0.3); border: 2px dashed #d4a02a; padding: 3px 8px; margin-bottom: 6px; }
#b-music.on { opacity: 0.6; }
.music-btn { position: absolute; z-index: 2; right: max(14px, env(safe-area-inset-right)); top: max(14px, env(safe-area-inset-top)); font-size: 20px; }
.music-btn.on { opacity: 0.65; }