/* ============================================================
   Tower Defense — styles
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
:root {
  --bg: #0c1018;
  --bg2: #141b28;
  --panel: #1a2434;
  --panel2: #222f44;
  --line: #2c3a52;
  --text: #e7eefc;
  --muted: #8ea0bf;
  --gold: #ffcf4a;
  --green: #4ade80;
  --red: #f0556a;
  --blue: #58b4ff;
  --accent: #6ee7ff;
  --shadow: 0 8px 30px rgba(0,0,0,.45);
  font-size: 15px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  background: radial-gradient(1200px 800px at 70% -10%, #18233a 0%, var(--bg) 60%);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
#app { width: 100vw; height: 100vh; position: relative; }
.screen { position: absolute; inset: 0; }
.hidden { display: none !important; }
.muted { color: var(--muted); }

/* ---------------- Buttons ---------------- */
.btn {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: .92rem;
  cursor: pointer;
  transition: transform .07s ease, background .15s, border-color .15s;
}
.btn:hover { background: #2b3a54; border-color: #3c517a; }
.btn:active { transform: translateY(1px) scale(.98); }
.btn-primary { background: linear-gradient(180deg, #2f7cff, #1f5fe0); border-color: #2f7cff; color: #fff; }
.btn-primary:hover { background: linear-gradient(180deg, #3f8bff, #2a6cf0); }
.btn-small { padding: 6px 10px; font-size: .85rem; }
.btn:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------- Main menu ---------------- */
#menu {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 18px;
}
.menu-card {
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 38px 44px;
  width: min(460px, 92vw);
  text-align: center;
  box-shadow: var(--shadow);
}
.logo { font-size: 2.6rem; letter-spacing: 4px; font-weight: 800; }
.logo span { color: var(--accent); }
.tagline { color: var(--muted); margin-top: 6px; margin-bottom: 26px; }
.menu-label { display:block; text-align:left; color: var(--muted); font-size:.8rem; text-transform: uppercase; letter-spacing:1px; margin-bottom:8px; }
.diff-buttons { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 24px; }
.diff-btn { padding: 9px 4px; background: var(--panel2); border:1px solid var(--line); color: var(--text); border-radius: 8px; cursor: pointer; font-size:.85rem; }
.diff-btn.active { background: linear-gradient(180deg,#2f7cff,#1f5fe0); border-color:#2f7cff; color:#fff; }
.menu-actions { display: flex; gap: 12px; }
.menu-actions .btn { flex:1; padding: 12px; font-size: 1rem; }
.menu-hint { margin-top: 14px; min-height: 18px; color: var(--muted); font-size: .85rem; }
.menu-credit { color: #4a5b78; font-size: .8rem; }

/* ---------------- Game layout ---------------- */
#game { display: flex; flex-direction: column; }
#topBar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 14px;
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  /* fixed height so a long next-wave preview never grows the bar / shifts the map */
  height: 56px; overflow: hidden;
}
.hud-group { display: flex; align-items: center; gap: 12px; }
.hud-group.center { flex: 1; justify-content: center; min-width: 0; overflow: hidden; }
.hud-group.right { gap: 8px; flex: 0 0 auto; }
.hud-stat { display:flex; align-items:center; gap:7px; font-weight:700; font-size:1.05rem; background: var(--panel2); padding:6px 12px; border-radius:8px; border:1px solid var(--line); }
.hud-stat .ico { font-size: 1rem; }
.hud-stat .ico.gold { color: var(--gold); font-size:.7rem; }
#hudLives { color: var(--red); }
#hudGold { color: var(--gold); }

.wave-preview { display:flex; align-items:center; gap:10px; font-size:.88rem; color: var(--muted); flex-wrap: nowrap; justify-content:flex-start; max-width:100%; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; }
.wave-preview::-webkit-scrollbar { height:5px; }
.wave-preview::-webkit-scrollbar-thumb { background: var(--line); border-radius:3px; }
.wave-preview .wp-title { color: var(--text); font-weight:700; flex:0 0 auto; }
.wave-preview .wp-enemy { display:flex; align-items:center; gap:5px; background: var(--panel2); padding:3px 8px; border-radius:20px; border:1px solid var(--line); flex:0 0 auto; white-space:nowrap; }
.wave-preview .boss-warn { color: var(--red); font-weight:800; animation: blink 1s steps(2) infinite; flex:0 0 auto; white-space:nowrap; }
@keyframes blink { 50% { opacity:.35; } }

.speed-control { display:flex; gap:2px; background: var(--panel2); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.spd-btn { background: transparent; border:none; color: var(--muted); padding:6px 10px; cursor:pointer; font-size:.82rem; }
.spd-btn.active { background:#2f7cff; color:#fff; }

#playArea { flex: 1; display: flex; min-height: 0; gap: 10px; padding: 10px; }
#canvasWrap { position: relative; flex: 1; display:flex; align-items:center; justify-content:center; min-width:0; }

/* wave mob tally — its own dark strip above the map (never overlaps the canvas) */
.wave-tally-bar {
  flex: 0 0 auto;
  display:flex; align-items:center; gap:8px; flex-wrap:nowrap; justify-content:center;
  background: var(--bg2); border-bottom:1px solid var(--line);
  padding:6px 14px;
  /* fixed height + horizontal scroll so the map never jumps as mobs change */
  height:38px; overflow-x:auto; overflow-y:hidden;
}
.wave-tally-bar.hidden { display:none !important; }
.wave-tally-bar .wt-chip { flex:0 0 auto; }
.wave-tally-bar .wt-idle { color:var(--muted); font-size:.8rem; letter-spacing:1px; }
.wave-tally-bar .wt-title { font-weight:800; color:var(--accent); font-size:.85rem; margin-right:2px; }
.wave-tally-bar .wt-chip { display:flex; align-items:center; gap:5px; font-size:.82rem; color:var(--text); background:var(--panel2); border:1px solid var(--line); border-radius:20px; padding:3px 9px; }
.wave-tally-bar .wt-chip b { color:var(--gold); }
.wave-tally-bar .wt-chip .wt-sl { color:var(--muted); }
.wave-tally-bar .wt-chip small { color:var(--muted); font-size:.72rem; margin-left:3px; }
.wave-tally-bar .wt-chip.done { opacity:.4; }
#gameCanvas {
  background: #0d1422;
  border: 1px solid var(--line);
  border-radius: 10px;
  max-width: 100%; max-height: 100%;
  width: 100%; height: auto;
  box-shadow: var(--shadow);
  image-rendering: auto;
}
/* fire warning badge (top-right of the map) */
.fire-warn {
  position:absolute; top:10px; right:10px; z-index:7;
  display:flex; align-items:center; gap:7px;
  background:rgba(40,10,6,.9); border:1px solid #f0556a; border-radius:10px;
  padding:6px 12px; color:#ffd9c0; font-size:.9rem; font-weight:700;
  box-shadow:0 0 0 0 rgba(240,85,106,.6);
  animation: fireWarnPulse 1.1s ease-in-out infinite;
}
.fire-warn.hidden { display:none !important; }
.fire-warn .fw-ico { font-size:1.05rem; }
.fire-warn b { color:#ff7a4a; }
.fire-warn small { color:#caa; font-weight:400; font-size:.78rem; }
@keyframes fireWarnPulse {
  0%,100% { transform:scale(1); box-shadow:0 0 8px 1px rgba(240,85,106,.35); }
  50%     { transform:scale(1.06); box-shadow:0 0 16px 4px rgba(255,122,74,.55); }
}

.overlay-msg {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  background: rgba(5,8,14,.78); border-radius:10px; text-align:center; gap:14px; z-index:5;
}
.overlay-msg h2 { font-size: 2.4rem; letter-spacing:2px; }
.overlay-msg.win h2 { color: var(--green); }
.overlay-msg.lose h2 { color: var(--red); }

/* ---------------- Side panel ---------------- */
#sidePanel { flex: 0 0 290px; display:flex; flex-direction:column; gap:10px; overflow-y:auto; }
.panel-card {
  background: linear-gradient(180deg, var(--panel), var(--bg2));
  border:1px solid var(--line); border-radius:10px; padding:14px;
}
.panel-card h3 { font-size:1.05rem; margin-bottom:8px; }
.legend { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:12px; font-size:.82rem; color:var(--muted); }
.legend > div { display:flex; align-items:center; gap:6px; }
.chip { width:12px; height:12px; border-radius:50%; display:inline-block; }
.chip.n{background:#cfd8e8}.chip.f{background:#6ee7ff}.chip.t{background:#9b7bff}.chip.a{background:#a0aab8}.chip.fl{background:#ffd27a}.chip.b{background:#ff6b6b}

/* tower info */
.ti-head { display:flex; align-items:center; justify-content:space-between; }
.ti-name { font-size:1.1rem; font-weight:800; }
.ti-level { font-size:.8rem; color:var(--accent); background:var(--panel2); padding:2px 8px; border-radius:20px; border:1px solid var(--line); }
.ti-stats { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin:12px 0; font-size:.86rem; }
.ti-stats .row { display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding:3px 0; }
.ti-stats .k { color: var(--muted); }
.ti-actions { display:flex; flex-direction:column; gap:8px; }
.up-btn { display:flex; justify-content:space-between; align-items:center; width:100%; }
.up-btn .cost { color: var(--gold); font-weight:700; }
.evolve-box { display:flex; gap:8px; margin-top:6px; }
.evolve-box .btn { flex:1; flex-direction:column; gap:2px; display:flex; padding:10px 6px; text-align:center; font-size:.8rem; }
.evolve-box .btn small { color: var(--gold); }
.sell-btn { background:#3a2330; border-color:#5b3346; }
.sell-btn:hover { background:#4a2c3d; }
.sell-btn.confirm { background:#7a1f2e; border-color:#f0556a; color:#fff; font-weight:700; animation: confirmPulse .8s ease-in-out infinite; }
@keyframes confirmPulse { 50% { background:#9a2738; } }

.stats-card { font-size:.8rem; }
.stats-card .row { display:flex; justify-content:space-between; padding:2px 0; color:var(--muted); }
.stats-card .row b { color: var(--text); font-weight:600; }

/* ---------------- Bottom toolbar ---------------- */
#toolbar {
  flex: 0 0 auto; display:flex; gap:8px; padding:10px 14px;
  background: linear-gradient(0deg, var(--panel), var(--bg2));
  border-top:1px solid var(--line); overflow-x:auto;
}
.tower-btn {
  position:relative; min-width:104px; color: var(--text);
  background: linear-gradient(180deg, #283758, #1b2740);
  border:1px solid var(--line);
  border-radius:10px; padding:9px 11px; cursor:pointer; text-align:left;
  transition: border-color .15s, transform .07s, background .15s, box-shadow .2s, opacity .2s, filter .2s;
  flex: 0 0 auto;
}
.tower-btn:hover { border-color:#4a6699; background:linear-gradient(180deg,#31466e,#22335a); }
.tower-btn.selected { border-color: var(--accent); box-shadow:0 0 0 2px var(--accent) inset, 0 0 12px rgba(110,231,255,.35); }

/* Affordable: bright, light text, gold glow that grows as you can buy it. */
.tower-btn.affordable {
  border-color:#3c517a;
  box-shadow:0 0 0 1px rgba(255,207,74,.25), 0 4px 14px rgba(255,207,74,.12);
}
.tower-btn.affordable .tb-name { color:#ffffff; }
.tower-btn.affordable .tb-cost { color: var(--gold); text-shadow:0 0 8px rgba(255,207,74,.5); }
.tower-btn.affordable .tb-icon { box-shadow:0 0 8px rgba(255,255,255,.25); }

/* Can't afford: darkened + grayed so it visibly recedes. */
.tower-btn.cant {
  opacity:.5; filter:grayscale(.65) brightness(.62);
  background:linear-gradient(180deg,#1a2336,#141c2c); cursor:not-allowed;
}
.tower-btn.cant .tb-name { color:#7e8aa0; }
.tower-btn.cant .tb-cost { color:#ff7a8a; text-shadow:none; }

/* Locked (wave-gated): fully dark. */
.tower-btn.locked {
  opacity:.42; filter:grayscale(1) brightness(.5);
  background:linear-gradient(180deg,#161d2c,#10151f); cursor:not-allowed;
}
.tower-btn.locked .tb-name { color:#6b7689; }

.tower-btn .tb-top { display:flex; align-items:center; gap:8px; }
.tower-btn .tb-icon { width:38px; height:38px; border-radius:6px; flex:0 0 auto; transition: box-shadow .2s; }
.tower-btn .tb-name { font-weight:700; font-size:.88rem; color: var(--text); }
.tower-btn .tb-cost { color: var(--gold); font-size:.84rem; font-weight:800; margin-top:5px; letter-spacing:.2px; }
.tower-btn .tb-key { position:absolute; top:5px; right:7px; font-size:.68rem; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:0 4px; }
.tower-btn .tb-lock { position:absolute; top:6px; right:7px; font-size:.7rem; color:#ff9d5c; }
.tower-btn .tb-count { position:absolute; bottom:6px; right:8px; font-size:.72rem; font-weight:700; color:var(--muted); }

/* ---------------- Tooltip ---------------- */
.tooltip {
  position:fixed; z-index:50; pointer-events:none; max-width:240px;
  background:#0a0f18; border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  font-size:.82rem; color:var(--text); box-shadow:var(--shadow);
}
.tooltip h4 { margin-bottom:5px; color: var(--accent); }
.tooltip .t-stat { display:flex; justify-content:space-between; color:var(--muted); }
.tooltip .t-stat b { color: var(--text); }
.tooltip .t-desc { margin-top:6px; color:var(--muted); font-style:italic; }

/* floating toast */
.toast {
  position:fixed; bottom:90px; left:50%; transform:translateX(-50%);
  background:#0a0f18; border:1px solid var(--line); padding:10px 18px; border-radius:10px;
  z-index:60; box-shadow:var(--shadow); animation: toastIn .25s ease, toastOut .3s ease 1.8s forwards;
}
@keyframes toastIn { from{opacity:0; transform:translate(-50%,10px);} }
@keyframes toastOut { to{opacity:0; transform:translate(-50%,-6px);} }

/* ---------------- Settings / setup page ---------------- */
#settings { display:flex; flex-direction:column; overflow:hidden; background: var(--bg); }
#setHeader { padding:12px 20px; border-bottom:1px solid var(--line); background: linear-gradient(180deg,var(--panel),var(--bg2)); flex:0 0 auto; }
#setHeader h2 { font-size:1.2rem; letter-spacing:1px; margin-bottom:10px; }
#setBody { flex:1; overflow-y:auto; padding:14px 20px 40px; }
.set-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.set-tab { background:var(--panel2); border:1px solid var(--line); color:var(--text); border-radius:8px; padding:8px 16px; cursor:pointer; font-size:.9rem; }
.set-tab.active { background:linear-gradient(180deg,#2f7cff,#1f5fe0); border-color:#2f7cff; color:#fff; }
.set-note { color:var(--muted); font-size:.85rem; margin-bottom:14px; }
.set-h { font-size:1.05rem; margin:18px 0 8px; color:var(--accent); border-bottom:1px solid var(--line); padding-bottom:5px; }
.set-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:12px; }
.set-card { background:linear-gradient(180deg,var(--panel),var(--bg2)); border:1px solid var(--line); border-radius:10px; padding:10px 12px; }
.set-card-h { font-weight:700; font-size:.92rem; display:flex; align-items:center; gap:7px; margin-bottom:8px; padding-bottom:6px; border-bottom:1px dashed var(--line); }
.set-fields { display:flex; flex-direction:column; gap:5px; }
.set-field { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.82rem; color:var(--muted); }
.set-key { display:flex; align-items:center; gap:5px; }
.set-field input { width:82px; background:var(--bg); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:4px 6px; font-size:.82rem; text-align:right; }
.set-field input:focus { outline:none; border-color:var(--accent); }
/* no spinner arrows — just type the number */
.set-field input[type=number] { -moz-appearance:textfield; appearance:textfield; }
.set-field input[type=number]::-webkit-outer-spin-button,
.set-field input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.info { display:inline-flex; align-items:center; justify-content:center; width:14px; height:14px; border-radius:50%;
  background:var(--panel2); border:1px solid var(--line); color:var(--accent); font-size:9px; font-style:normal; font-weight:700; cursor:default; }
.info:hover { background:var(--accent); color:var(--bg); }
.set-tip { position:fixed; z-index:80; pointer-events:none; max-width:260px;
  background:#0a0f18; border:1px solid var(--accent); border-radius:8px; padding:8px 11px;
  font-size:.8rem; line-height:1.4; color:var(--text); box-shadow:var(--shadow); }
.set-tip.hidden { display:none; }
.set-actions { display:flex; gap:10px; margin-top:28px; padding:16px 0 8px; border-top:1px solid var(--line); }
.set-actions .btn { padding:10px 18px; }

@media (max-width: 900px) {
  #sidePanel { flex-basis: 230px; }
  .hud-group.center { display:none; }
}

/* ============================================================
   8-BIT RETRO SKIN
   Pixel fonts, square hard-edged blocks, flat fills, crisp canvas.
   ============================================================ */
:root {
  --font-head: 'Press Start 2P', 'Courier New', monospace;
  --font-body: 'VT323', 'Courier New', monospace;
  --pix-shadow: 4px 4px 0 rgba(0,0,0,.55);
}

/* compact pixel body font (VT323 reads small, so bump the base size) */
body {
  font-family: var(--font-body);
  font-size: 18px;
  letter-spacing: .5px;
  background: #0b0e17;
  -webkit-font-smoothing: none;
}

/* hard-pixel upscaled game canvas */
#gameCanvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 0;
  border: 3px solid var(--line);
  box-shadow: var(--pix-shadow);
}

/* square, hard-edged blocks everywhere (kill rounded corners) */
.btn, .diff-btn, .panel-card, .menu-card, .hud-stat, .tower-btn, .tooltip, .toast,
.speed-control, .set-card, .set-tab, .ti-level, .info, .tb-icon, .tb-key,
.wave-tally-bar .wt-chip, .wave-preview .wp-enemy, .overlay-msg, .fire-warn, .set-tip {
  border-radius: 0 !important;
}

/* blocky offset drop-shadow + press-down feedback */
.btn, .diff-btn, .tower-btn { border-width: 2px; box-shadow: var(--pix-shadow); }
.btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0,0,0,.55); }
.panel-card, .menu-card, .hud-stat, #topBar, #toolbar, .wave-tally-bar { border-width: 2px; }

/* flatten every gradient to a solid retro fill */
.menu-card, .panel-card, .set-card, #topBar, #toolbar, #setHeader,
.tower-btn, .stats-card { background: var(--panel) !important; }
.btn-primary, .diff-btn.active, .set-tab.active, .spd-btn.active { background: #2f7cff !important; }
.tower-btn.cant { background: #141c2c !important; }
.tower-btn.locked { background: #10151f !important; }

/* chunky pixel font for headings, HUD and controls */
.logo, .overlay-msg h2, #setHeader h2, .tooltip h4, .panel-card h3, .set-h {
  font-family: var(--font-head);
}
.logo { font-size: 1.5rem; line-height: 1.6; letter-spacing: 2px; }
.overlay-msg h2 { font-size: 1.4rem; letter-spacing: 1px; }
.hud-stat { font-family: var(--font-head); font-size: .8rem; }
.btn-primary { font-family: var(--font-head); font-size: .68rem; }
.btn-small { font-family: var(--font-head); font-size: .6rem; }
.spd-btn { font-family: var(--font-head); font-size: .6rem; }
.diff-btn { font-family: var(--font-head); font-size: .5rem; line-height: 1.5; white-space: normal; overflow: hidden; }
.tower-btn .tb-name { font-family: var(--font-head); font-size: .58rem; line-height: 1.35; }
.tower-btn .tb-cost { font-family: var(--font-head); font-size: .62rem; }
#hudWave, #hudLives, #hudGold { font-family: var(--font-head); }

/* keep rendered sprite icons crisp/smooth, not nearest-neighbor */
.tb-icon, .guide-icon canvas { image-rendering: auto; }

/* ============================================================
   GUIDE / TUTORIAL MODAL
   ============================================================ */
.guide-modal {
  position: absolute; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 14, .72);
}
.guide-modal.hidden { display: none !important; }
.guide-box {
  width: min(440px, 92vw);
  background: var(--panel);
  border: 2px solid var(--accent);
  box-shadow: var(--pix-shadow);
  padding: 18px 20px 16px;
}
.guide-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.guide-title { font-family: var(--font-head); font-size: .72rem; color: var(--accent); letter-spacing: 1px; }
.guide-progress { font-family: var(--font-head); font-size: .55rem; color: var(--muted); }
.guide-card { display: flex; gap: 16px; align-items: flex-start; }
.guide-art { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.guide-icon {
  width: 96px; height: 96px; display: flex; align-items: center; justify-content: center;
  background: #0d1422; border: 2px solid var(--line);
}
.guide-tag {
  font-family: var(--font-head); font-size: .45rem; letter-spacing: 1px;
  color: #0b0e17; padding: 3px 6px; font-weight: 700;
}
.guide-body { flex: 1; min-width: 0; }
.guide-name { font-family: var(--font-head); font-size: .82rem; margin-bottom: 8px; color: var(--text); }
.guide-blurb { font-size: 1rem; color: var(--text); line-height: 1.35; margin-bottom: 10px; }
.guide-tip {
  background: #0d1422; border-left: 3px solid var(--gold); padding: 8px 10px;
}
.guide-tip-label { display: block; font-family: var(--font-head); font-size: .5rem; color: var(--gold); margin-bottom: 5px; letter-spacing: .5px; }
.guide-tip-text { font-size: .98rem; color: #d8e2f4; line-height: 1.35; }
.guide-evolve { margin-top: 10px; background: #0d1422; border-left: 3px solid var(--accent); padding: 8px 10px; }
.guide-evolve.hidden { display: none !important; }
.guide-evolve .guide-tip-label { color: var(--accent); }
.guide-evolve-list { display: flex; flex-direction: column; gap: 5px; }
.evo-row { font-size: .95rem; color: #d8e2f4; line-height: 1.3; }
.evo-row b { color: var(--text); }
.comp-card-body .guide-evolve { margin-top: 8px; }
.comp-card-body .evo-row { font-size: 1.15rem; }

.guide-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 16px; }
.guide-skip { display: flex; align-items: center; gap: 6px; font-size: .95rem; color: var(--muted); cursor: pointer; }
.guide-skip input { width: 15px; height: 15px; cursor: pointer; }
.guide-nav { display: flex; gap: 8px; }
.guide-prev:disabled { opacity: .35; cursor: not-allowed; }

@media (max-width: 520px) {
  .guide-card { flex-direction: column; align-items: center; text-align: center; }
  .guide-tip { text-align: left; }
}

/* ---- full compendium / field guide ---- */
.comp-box {
  width: min(960px, 94vw); max-height: 88vh; display: flex; flex-direction: column;
  background: var(--panel); border: 2px solid var(--accent); box-shadow: var(--pix-shadow);
}
.comp-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 2px solid var(--line); flex: 0 0 auto;
}
.comp-scroll { overflow-y: auto; padding: 14px 18px 22px; }
.comp-section {
  font-family: var(--font-head); font-size: .68rem; color: var(--accent);
  letter-spacing: 1px; margin: 14px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.comp-section:first-child { margin-top: 0; }
.comp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.comp-card { display: flex; gap: 12px; background: #0d1422; border: 2px solid var(--line); padding: 10px 12px; }
.comp-icon {
  width: 64px; height: 64px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  background: #0b0e17; border: 2px solid var(--line);
}
.comp-card-body { flex: 1; min-width: 0; }
.comp-card-body h5 { font-family: var(--font-head); font-size: .8rem; color: var(--text); margin-bottom: 8px; }
.comp-blurb { font-size: 1.3rem; color: var(--text); line-height: 1.3; margin-bottom: 8px; }
.comp-card-body .guide-tip { padding: 8px 10px; }
.comp-card-body .guide-tip-label { font-size: .58rem; }
.comp-card-body .guide-tip-text { font-size: 1.2rem; }