/* Layout: playable board is the hero with the HUD rail beside it; reference sections follow in one 1120px column.
   Deliberately a single dark look (arcade screen), so there are no light-theme blocks. */
:root {
  color-scheme: dark;
  --ink: #0C1216;
  --panel: #121C21;
  --panel-2: #17252B;
  --line: #24373E;
  --fg: #E2EDEF;
  --muted: #8FA6AB;
  --solder: #FFB547;
  --solder-ink: #1A1206;
  --threat: #FF4D6D;
  --ok: #7EE0A0;
  --grid: rgba(143, 166, 171, 0.05);
  --f-display: 'Tektur', 'Barlow', system-ui, sans-serif;
  --f-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background-color: var(--ink);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--fg);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
}
[hidden] { display: none !important; }

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 28px 72px;
}

h1, h2, h3, h4 { font-family: var(--f-display); text-wrap: balance; margin: 0; }
p { margin: 0; }
a { color: var(--solder); }
.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Header ---------- */
.top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; }
.brand { display: flex; gap: 16px; align-items: center; min-width: 0; }
.logo-mark { display: grid; grid-template-columns: repeat(2, 14px); gap: 3px; flex: none; }
.logo-mark i { width: 14px; height: 14px; border-radius: 3px; display: block; }
.logo-mark i:nth-child(1) { background: #3FD0E8; }
.logo-mark i:nth-child(2) { background: var(--solder); }
.logo-mark i:nth-child(3) { background: #A57BFF; }
.logo-mark i:nth-child(4) { background: var(--threat); }
h1 { font-weight: 800; letter-spacing: 0.08em; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; }
.brand p { color: var(--muted); max-width: 46ch; margin-top: 6px; }
.top nav { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.9rem; }
.top nav a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.top nav a:hover, .top nav a:focus-visible { color: var(--fg); border-color: var(--solder); outline: none; }

/* ---------- Play area ---------- */
.play {
  display: grid;
  grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 28px;
}
.board-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.board-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #0A1013;
  overflow: hidden;
}
#board { display: block; margin: 0 auto; touch-action: none; cursor: pointer; }
#board:focus-visible { outline: 2px solid var(--solder); outline-offset: -2px; }
.hint { color: var(--muted); font-size: 0.92rem; min-height: 2.9em; }
.hint b { color: var(--fg); }

.toast {
  position: absolute; top: 10px; left: 50%; z-index: 3;
  transform: translate(-50%, -8px);
  background: rgba(18, 28, 33, 0.96);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  max-width: 90%;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

.overlay {
  position: absolute; inset: 0;
  background: rgba(6, 10, 12, 0.8);
  backdrop-filter: blur(3px);
  display: flex; flex-direction: column; align-items: center;
  overflow-y: auto;
  padding: 16px;
}
.ov-card { margin-block: auto; }
.ov-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  width: 100%;
  max-width: 340px;
  display: flex; flex-direction: column; gap: 12px;
}
.ov-card h3 { font-size: 1.5rem; }
.ov-card dl { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-variant-numeric: tabular-nums; }
.ov-card dt { color: var(--muted); }
.ov-card dd { margin: 0; text-align: right; font-weight: 600; }
.ov-card .note { font-size: 0.85rem; color: var(--muted); border-left: 2px solid var(--solder); padding-left: 10px; }
.ov-card .unlock { color: var(--solder); font-weight: 600; }
.ov-actions { display: flex; flex-direction: column; gap: 8px; }

.btn {
  font: 600 0.95rem/1 var(--f-body);
  border-radius: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  background: var(--panel-2);
  color: var(--fg);
  cursor: pointer;
}
.btn:hover { border-color: var(--muted); }
.btn:focus-visible { outline: 2px solid var(--solder); outline-offset: 2px; }
.btn.primary { background: var(--solder); color: var(--solder-ink); border-color: var(--solder); font-family: var(--f-display); letter-spacing: 0.04em; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ad { border-style: dashed; border-color: var(--solder); background: transparent; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* ---------- HUD ---------- */
.hud {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 18px;
  min-width: 0;
}
.pilot-row { display: flex; gap: 14px; align-items: center; }
#pilotCanvas { width: 72px; height: 72px; border-radius: 12px; background: var(--panel-2); flex: none; }
.pilot-row strong { display: block; font-family: var(--f-display); font-size: 1.3rem; letter-spacing: 0.04em; }
.pilot-row span.role { color: var(--muted); font-size: 0.9rem; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.stats div { display: flex; flex-direction: column; gap: 2px; }
.stats b { font-family: var(--f-display); font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
#diff { color: var(--solder); }
.prog-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
#scoreTxt { font-family: var(--f-mono); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.bar { height: 10px; background: var(--panel-2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--solder), #FFE0A3); transition: width 0.3s; }
.threat {
  color: #FFC2CD;
  background: rgba(255, 77, 109, 0.08);
  border: 1px solid rgba(255, 77, 109, 0.32);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
}
.threat b { color: var(--threat); font-variant-numeric: tabular-nums; }
.threat.calm { color: var(--ok); background: rgba(126, 224, 160, 0.08); border-color: rgba(126, 224, 160, 0.3); }

.powers { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.pw {
  position: relative;
  display: grid; gap: 6px; justify-items: start;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  color: var(--fg);
  font: 500 0.82rem/1.2 var(--f-body);
  cursor: pointer;
}
.pw svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--solder); }
.pw .ct {
  position: absolute; top: 8px; right: 8px;
  font: 600 0.75rem/1 var(--f-mono);
  background: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px;
  font-variant-numeric: tabular-nums;
}
.pw .rar { font: 600 0.62rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.pw.r1 { border-color: rgba(79, 139, 255, 0.55); } .pw.r1 .rar { color: #8FB3FF; }
.pw.r2 { border-color: rgba(176, 123, 255, 0.6); } .pw.r2 .rar { color: #CDB3FF; }
.pw.r3 { border-color: rgba(255, 181, 71, 0.7); box-shadow: 0 0 12px rgba(255, 181, 71, 0.18); } .pw.r3 .rar { color: var(--solder); }
.pw.active { border-color: var(--solder); background: rgba(255, 181, 71, 0.12); }
.pw:focus-visible { outline: 2px solid var(--solder); outline-offset: 2px; }
.pw:disabled { opacity: 0.42; cursor: not-allowed; }
.pw.locked svg { color: var(--muted); }

.proto {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
  font-size: 0.88rem; color: var(--muted);
}
.proto select {
  background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 8px; font: inherit; margin-left: 6px;
}
.switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.switch input { accent-color: var(--solder); width: 18px; height: 18px; }

/* ---------- Sections ---------- */
section.block { margin-top: 80px; display: flex; flex-direction: column; gap: 20px; }
section.block > header { display: flex; flex-direction: column; gap: 8px; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: 0.03em; }
.lede { color: var(--muted); max-width: 66ch; }
h3.sub { font-size: 1.1rem; letter-spacing: 0.04em; margin-top: 8px; }

.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; counter-reset: step; }
.steps li {
  list-style: none;
  border-top: 2px solid var(--line);
  padding-top: 12px;
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.steps li::before {
  counter-increment: step;
  content: 'Step ' counter(step);
  font: 600 0.7rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--solder);
}
.steps h4 { font-size: 1rem; }
.steps p { color: var(--muted); font-size: 0.93rem; }
.steps ol, ol.steps { margin: 0; padding: 0; }

.chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.char {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.char canvas { width: 100%; max-width: 100%; aspect-ratio: 1; display: block; background: var(--panel-2); }
.char-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.char h3 { font-size: 1.25rem; letter-spacing: 0.05em; }
.char p { font-size: 0.92rem; color: var(--muted); }
.char p b { color: var(--fg); font-weight: 600; }
.char .btn { margin-top: auto; }
.char.enemy { border-color: rgba(255, 77, 109, 0.35); }
.char.enemy .eyebrow { color: #FF8FA3; }
.char.selected { border-color: var(--solder); }
.char-body .spacer { flex: 1; }

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
th { font: 600 0.68rem/1.2 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.name { font-weight: 600; white-space: nowrap; }
.pill {
  display: inline-block; font: 600 0.7rem/1 var(--f-mono); letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: 99px; border: 1px solid var(--line); white-space: nowrap;
}
.pill.now { color: var(--ok); border-color: rgba(126, 224, 160, 0.4); }
.pill.planned { color: var(--muted); }
.pill.destroy { color: #FFC2CD; border-color: rgba(255, 77, 109, 0.4); }
.pill.change { color: #D7C6FF; border-color: rgba(165, 123, 255, 0.45); }
.pill.control, .pill.boost { color: #BFF3FB; border-color: rgba(63, 208, 232, 0.4); }
.caption { font-size: 0.88rem; color: var(--muted); max-width: 72ch; }

.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tier {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0;
}
.tier.pro { border-color: var(--solder); }
.tier .price { font-family: var(--f-display); font-size: 2rem; line-height: 1; }
.tier .price small { font-family: var(--f-body); font-size: 0.9rem; color: var(--muted); }
.tier ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; }
.tier li::marker { color: var(--solder); }

.rules { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; max-width: 72ch; }
.rules li::marker { color: var(--solder); }

.ideas { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.idea { border: 1px solid var(--line); border-radius: 12px; padding: 16px; background: var(--panel); display: flex; flex-direction: column; gap: 6px; }
.idea h4 { font-size: 1rem; letter-spacing: 0.03em; }
.idea p { font-size: 0.92rem; color: var(--muted); }

footer.foot { margin-top: 72px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 0.85rem; }

/* ---------- Missions, stars, energy ---------- */
.wallet { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9rem; color: var(--muted); }
.wallet b { color: var(--fg); font-family: var(--f-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.goals { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.goal { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 5px 10px; align-items: center; font-size: 0.92rem; }
.goal .bar { grid-column: 2 / -1; }
.goal .g-n { font: 600 0.78rem/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.goal.done .g-n { color: var(--ok); }
.goal.done .bar i { background: var(--ok); }
.g-ic { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex: none; }
.g-score { background: var(--solder); }
.g-bots { background: var(--threat); border-radius: 50%; }
.g-repair { background: #26101A; border: 1.5px solid var(--threat); }
.g-combo { background: #3FD0E8; transform: rotate(45deg) scale(0.85); }
.g-crates { background: #8A5A1C; border: 1.5px solid var(--solder); }
.bar.sb { position: relative; overflow: visible; }
.bar.sb i { border-radius: 99px; }
.tick { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--line); transform: translateX(-1px); }
.tick.on { background: var(--solder); }
.stars-sm { color: var(--solder); letter-spacing: 0.12em; font-size: 1rem; }
.goal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 0.92rem; }
.goal-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.goal-list li.done span:nth-child(2)::after { content: ' ✓'; color: var(--ok); }
.goal-list .g-n { font: 600 0.75rem/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
.goal-list li.done .g-n { color: var(--ok); }
.say { background: var(--panel-2); border-radius: 10px; padding: 10px 12px; font-size: 0.93rem; }
.stars-big { font-size: 2.3rem; line-height: 1; color: var(--solder); letter-spacing: 0.14em; }

/* ---------- Level map ---------- */
.map { display: flex; flex-direction: column; gap: 16px; }
.zone {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.zone.closed { opacity: 0.6; }
.zone-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.zone h3 { font-size: 1.25rem; letter-spacing: 0.04em; }
.zone-stars { font: 600 0.85rem/1 var(--f-mono); color: var(--solder); white-space: nowrap; }
.zone-twist { color: var(--muted); font-size: 0.92rem; max-width: 70ch; }
.path {
  list-style: none; margin: 6px 0 0; padding: 12px 0;
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 6px; position: relative;
}
.path::before { content: ''; position: absolute; left: 5%; right: 5%; top: 50%; border-top: 2px dashed var(--line); }
.path li { display: flex; justify-content: center; position: relative; }
.path li:nth-child(odd) { transform: translateY(-9px); }
.path li:nth-child(even) { transform: translateY(9px); }
.node {
  width: 50px; max-width: 100%; aspect-ratio: 1; border-radius: 50%;
  border: 2px solid var(--line); background: var(--panel-2); color: var(--fg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: 0; cursor: pointer;
}
.node .n { font: 700 0.95rem/1 var(--f-display); }
.node .ns { font-size: 0.55rem; line-height: 1; color: var(--solder); letter-spacing: -0.02em; }
.node:hover:not(:disabled) { border-color: var(--muted); }
.node.done { border-color: var(--solder); }
.node.boss { border-color: var(--threat); width: 58px; }
.node.boss .n::before { content: 'BOSS '; font-size: 0.5rem; letter-spacing: 0.08em; display: block; color: var(--threat); margin-bottom: 2px; }
.node.current { border-color: var(--ok); box-shadow: 0 0 0 4px rgba(126, 224, 160, 0.18); }
.node.locked { opacity: 0.45; cursor: not-allowed; }
.node:focus-visible { outline: 2px solid var(--solder); outline-offset: 3px; }
@media (max-width: 640px) {
  .path, .zone .path { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: 26px; }
  .path::before { display: none; }
}

.g-drives { background: #6A7B88; border-top: 3px solid var(--solder); }
.g-locks { background: #0B1418; border: 1.5px solid #8FE3FF; }
.g-datacenter { background: #1E2A33; border: 1.5px solid #3FD0E8; border-radius: 3px; width: 16px; box-shadow: inset 0 0 0 3px #1E2A33, inset 0 0 0 6px #B07BFF; }
.g-dive { background: linear-gradient(#FFB547, #6A7B88); border-radius: 2px; }
.g-servers { background: #2A3A44; border: 1.5px solid #7EE0A0; border-radius: 2px; box-shadow: inset 0 -3px 0 #FF4D6D; }
.tip-art { width: 100%; max-width: 100%; aspect-ratio: 280 / 120; border-radius: 10px; background: var(--panel-2); display: block; }
.proto input[type="number"] {
  width: 6.5em; background: var(--panel-2); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font: inherit; margin-left: 6px;
}
.proto .btn { padding: 8px 12px; font-size: 0.85rem; }

/* ---------- Sections map ---------- */
.map-nav { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.map-nav .btn { padding: 9px 14px; font-size: 0.88rem; }
.map-pos { font: 600 0.85rem/1 var(--f-mono); color: var(--fg); min-width: 11em; text-align: center; }
.map-go { font-size: 0.88rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.map-go input { width: 7em; background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; }
.sec-banner { width: 100%; max-width: 100%; height: 84px; display: block; border-radius: 10px; }
.zone .path { grid-template-columns: repeat(10, minmax(0, 1fr)); row-gap: 26px; }
.zone .path::before { display: none; }
@media (max-width: 640px) { .zone .path { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.node.gate { border-color: #8FE3FF; width: 58px; box-shadow: 0 0 0 4px rgba(143, 227, 255, 0.14); }
.node.gate .n::before { content: 'GATE '; font-size: 0.5rem; letter-spacing: 0.08em; display: block; color: #8FE3FF; margin-bottom: 2px; }
.chest {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  border-top: 1px solid var(--line); padding-top: 12px; font-size: 0.9rem; color: var(--muted);
}
.chest-n { font: 600 0.85rem/1 var(--f-mono); color: var(--solder); }
.chest .btn { margin-left: auto; padding: 9px 14px; }

/* ---------- Workshop ---------- */
.workshop { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.wk { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wk.r1 { border-color: rgba(79, 139, 255, 0.5); }
.wk.r2 { border-color: rgba(176, 123, 255, 0.55); }
.wk.r3 { border-color: rgba(255, 181, 71, 0.65); }
.wk-head { display: flex; gap: 10px; align-items: center; }
.wk-head svg { width: 30px; height: 30px; fill: none; stroke: var(--solder); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wk-head h3 { font-size: 1.05rem; letter-spacing: 0.03em; }
.rar-pill { display: inline-block; font: 600 0.66rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 7px; border-radius: 99px; border: 1px solid currentColor; margin-top: 3px; }
.rar-pill.r0 { color: #9FB3B8; } .rar-pill.r1 { color: #8FB3FF; } .rar-pill.r2 { color: #CDB3FF; } .rar-pill.r3 { color: var(--solder); }
.wk-tiers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 0.85rem; color: var(--muted); }
.wk-tiers li { display: grid; grid-template-columns: 10px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.wk-tiers li.now { color: var(--fg); }
.wk-tiers li.past { opacity: 0.6; }
.rar-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.rar-dot.r0 { background: #9FB3B8; } .rar-dot.r1 { background: #4F8BFF; } .rar-dot.r2 { background: #B07BFF; } .rar-dot.r3 { background: var(--solder); }
.wk .btn { margin-top: auto; }

/* ---------- Block gallery ---------- */
.items { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.item { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; min-width: 0; }
.item canvas { width: 72px; height: 72px; flex: none; border-radius: 10px; background: var(--panel-2); }
.item div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.item h3 { font-size: 1rem; letter-spacing: 0.03em; }
.item p { font-size: 0.88rem; color: var(--muted); }

/* ---------- Quests & events ---------- */
.quest-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.panel h3 { font-size: 1.3rem; letter-spacing: 0.04em; }
.panel h4 { font-size: 0.95rem; letter-spacing: 0.04em; margin-top: 6px; }
.panel .muted { color: var(--muted); }
.panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.task-top { display: flex; justify-content: space-between; gap: 12px; font-size: 0.93rem; margin-bottom: 6px; }
.task-n { font-family: var(--f-mono); font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tasks li.done .task-n { color: var(--ok); }
.bar.thin { height: 6px; }
.tasks li.done .bar i { background: var(--ok); }
.tier-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.tier-track li {
  display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel-2);
}
.tier-track li.got { border-color: rgba(126, 224, 160, 0.45); }
.tier-txt { font-size: 0.86rem; color: var(--muted); }
.tier-txt b { color: var(--fg); font-weight: 600; }
.medal {
  font: 700 0.78rem/1 var(--f-display); letter-spacing: 0.06em; text-align: center;
  padding: 8px 6px; border-radius: 8px; color: var(--solder-ink);
}
.medal.m0 { background: #D08A4E; }
.medal.m1 { background: #C9D4D8; }
.medal.m2 { background: #FFC94A; }
.crown-row { display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--line); padding-top: 14px; }
.crown-row canvas { width: 96px; height: 96px; border-radius: 12px; background: var(--panel-2); flex: none; }
.crown-row strong { display: block; font-family: var(--f-display); font-size: 1.1rem; letter-spacing: 0.04em; }
.crown-row p { color: var(--muted); font-size: 0.9rem; margin-bottom: 8px; }
.ev-tiers { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; }
.ev-tiers li { display: flex; gap: 10px; color: var(--muted); }
.ev-tiers .tier-n { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); flex: none; width: 52px; padding-top: 2px; }
.ev-tiers li:last-child span:last-child { color: var(--fg); font-weight: 600; }
.ev-tiers li.got span:last-child { color: var(--ok); }
.ev-tiers li.got span:last-child::after { content: ' ✓'; }
.ev-status { font-size: 0.88rem; }
.ev-actions { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.ev-actions:empty { display: none; }

/* ---------- Ad modal ---------- */
.admodal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(4, 7, 9, 0.92);
  display: grid; place-items: center;
  padding: 16px;
}
.ad-card {
  width: 100%; max-width: 380px;
  background: var(--panel); border: 1px dashed var(--solder); border-radius: 16px;
  padding: 24px; display: flex; flex-direction: column; gap: 14px; text-align: center;
}
.ad-card p { color: var(--muted); }
.ad-count { font-family: var(--f-display); font-size: 3.4rem; line-height: 1; color: var(--solder); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .play { grid-template-columns: minmax(0, 1fr); }
  .board-frame { margin-inline: auto; }
  .board-col .hint { text-align: center; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers { grid-template-columns: minmax(0, 1fr); }
  .quest-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .hud { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ---------- Menu tabs, settings, ranks, unlock timeline ---------- */
.top-tools { display: flex; gap: 8px; align-items: center; }
.icon-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  color: var(--fg); font: 600 0.9rem/1 var(--f-body); padding: 9px 12px; cursor: pointer; min-height: 40px;
}
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { border-color: var(--muted); }
.icon-btn:focus-visible { outline: 2px solid var(--solder); outline-offset: 2px; }
.icon-btn[aria-pressed="true"] .wave { display: none; }
.icon-btn[aria-pressed="true"] { color: var(--threat); }
.tabs {
  display: flex; gap: 6px; margin-top: 18px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.tab {
  flex: none; background: transparent; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 9px 14px;
  font: 600 0.9rem/1 var(--f-body); cursor: pointer; white-space: nowrap;
}
.tab:hover { color: var(--fg); border-color: var(--muted); }
.tab[aria-current="page"] { background: var(--solder); border-color: var(--solder); color: var(--solder-ink); }
.tab:focus-visible { outline: 2px solid var(--solder); outline-offset: 2px; }
.pilot-row .rank { display: block; font: 600 0.72rem/1.4 var(--f-mono); letter-spacing: 0.06em; color: var(--solder); text-transform: uppercase; }
.next-unlock { color: var(--solder); font-weight: 600; }
.char.locked { opacity: 0.6; }
.modal {
  position: fixed; inset: 0; z-index: 60; background: rgba(4, 7, 9, 0.85);
  display: flex; justify-content: center; align-items: flex-start; overflow-y: auto;
  padding-block: max(24px, env(safe-area-inset-top, 0px)) 24px;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.modal-card {
  width: 100%; max-width: 460px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; display: flex; flex-direction: column; gap: 18px; margin-block: auto;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.modal-head h2 { font-size: 1.4rem; }
.set-group { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; }
.set-group h3 { font: 600 0.72rem/1 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.set-row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 0.95rem; }
.set-row input[type="range"] { width: 100%; accent-color: var(--solder); }
.set-row output { font: 600 0.8rem/1 var(--f-mono); color: var(--muted); min-width: 3.5em; text-align: right; font-variant-numeric: tabular-nums; }
.set-row select, .set-row input[type="number"] {
  background: var(--panel-2); color: var(--fg); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; grid-column: 2 / -1; width: 100%;
}
.set-group .btn { align-self: flex-start; }
.unlock-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.unlock-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: baseline;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 0.9rem;
}
.unlock-list .ul-l { font: 600 0.78rem/1 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; grid-row: span 2; align-self: center; min-width: 6.5em; }
.unlock-list .ul-k { font: 600 0.66rem/1.2 var(--f-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.unlock-list li.got { border-color: rgba(126, 224, 160, 0.45); }
.unlock-list li.got .ul-l { color: var(--ok); }
.unlock-list li.got .ul-n::after { content: ' ✓'; color: var(--ok); }
@media (max-width: 480px) {
  .icon-btn span { display: none; }
  .set-row { grid-template-columns: 1fr auto; }
  .set-row input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  .set-row output { grid-row: 1; grid-column: 2; }
}

/* Spotlight tips: the screen darkens around something new, with a callout beside it. */
.spot { position: fixed; inset: 0; z-index: 45; cursor: pointer; }
.spot[hidden] { display: none; }
.spot-dim { position: absolute; inset: 0; width: 100%; height: 100%; }
.spot-ring { fill: none; stroke: #3FD0E8; stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(63, 208, 232, 0.8)); animation: spot-pulse 1.4s ease-in-out infinite; }
@keyframes spot-pulse { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: 0.45; } }
.spot.in .spot-dim, .spot.in .spot-bubble, .spot-bubble.pop { animation: spot-in 0.25s ease-out; }
@keyframes spot-in { from { opacity: 0; } to { opacity: 1; } }
.spot-bubble {
  position: absolute; cursor: default;
  width: min(330px, calc(100vw - 24px));
  max-height: calc(100vh - 24px); overflow-y: auto;
  background: var(--panel); border: 1px solid #3FD0E8; border-radius: 14px;
  padding: 16px 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  display: flex; flex-direction: column; gap: 8px;
}
.spot-bubble h3 { font-size: 1.25rem; margin: 0; }
.spot-bubble p { margin: 0; line-height: 1.45; }
.spot-how { color: var(--fg); }
.spot-how b { color: var(--solder); }
.spot-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.spot-arrow { position: absolute; width: 14px; height: 14px; background: var(--panel); border: 1px solid #3FD0E8; transform: rotate(45deg); }
.spot-bubble[data-side="below"] .spot-arrow { top: -8px; margin-left: -7px; border-right: 0; border-bottom: 0; }
.spot-bubble[data-side="above"] .spot-arrow { bottom: -8px; top: auto !important; margin-left: -7px; border-left: 0; border-top: 0; }
.spot-bubble[data-side="right"] .spot-arrow { left: -8px !important; margin-top: -7px; border-right: 0; border-top: 0; }
.spot-bubble[data-side="left"] .spot-arrow { right: -8px; left: auto !important; margin-top: -7px; border-left: 0; border-bottom: 0; }
.spot-bubble[data-side="over"] .spot-arrow { display: none; }
@media (prefers-reduced-motion: reduce) {
  .spot-ring, .spot.in .spot-dim, .spot.in .spot-bubble, .spot-bubble.pop { animation: none; }
}
html.reduce-motion .spot-ring, html.reduce-motion .spot.in .spot-dim, html.reduce-motion .spot.in .spot-bubble,
html.reduce-motion .spot-bubble.pop, html.reduce-motion .pm-sheet { animation: none; }
/* Toasts stay readable above an open spotlight. */
body.spot-open #toast { position: fixed; z-index: 46; top: max(12px, env(safe-area-inset-top, 0px)); }

/* ---------- Full-screen play mode ----------
   Phones, tablets, the installed app, and the "Full-screen mode" button use an app layout:
   the board fills the screen, with a compact top bar, a power-up bar and the menus behind a button. */
.pm-only { display: none; }
.ad-short { display: none; }
body.playmode { overflow: hidden; overscroll-behavior: none; }
body.playmode .top, body.playmode .tabs, body.playmode .foot { display: none; }
body.playmode .wrap { padding: 0; max-width: none; }
body.playmode #play {
  position: fixed; inset: 0; z-index: 20; margin: 0;
  height: 100vh; height: 100dvh;
  background-color: var(--ink);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(10px, env(safe-area-inset-right, 0px)) max(8px, env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px));
  display: grid; gap: 8px 10px; align-items: center;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  grid-template-areas: "menu stats fs" "goals goals goals" "stars stars stars" "board board board" "powers powers ad";
}
body.playmode .pm-only { display: inline-flex; }
body.playmode .pm-menu-btn { grid-area: menu; justify-self: start; }
body.playmode .pm-fs-btn { grid-area: fs; justify-self: end; }
body.playmode .pm-only { padding: 8px; min-height: 40px; min-width: 40px; justify-content: center; }
.pm-fs-btn .fs-out, .pm-fs-btn[aria-pressed="true"] .fs-in { display: none; }
.pm-fs-btn[aria-pressed="true"] .fs-out { display: inline; }
.pm-fs-btn[aria-pressed="true"] { color: var(--fg); }
body.playmode .hud { display: contents; }
body.playmode .board-col { grid-area: board; display: flex; align-items: center; justify-content: center; min-height: 0; min-width: 0; height: 100%; overflow: hidden; }
body.playmode .board-frame { width: auto; max-width: none; flex: none; }
body.playmode .hint, body.playmode .pilot-row, body.playmode .wallet, body.playmode .proto,
body.playmode .goals-box .prog-top, body.playmode .powers-box .prog-top, body.playmode .threat { display: none; }
/* Top bar */
body.playmode .stats { grid-area: stats; display: flex; justify-content: center; gap: 4px 16px; min-width: 0; }
body.playmode .stats div { align-items: center; gap: 0; min-width: 0; }
body.playmode .stats .eyebrow { font-size: 0.58rem; letter-spacing: 0.1em; }
body.playmode .stats b { font-size: 1.15rem; }
/* Goals as chips */
body.playmode .goals-box { grid-area: goals; min-width: 0; }
body.playmode .goals { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 6px; }
body.playmode .goal { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; font-size: 0.78rem; line-height: 1.2; }
body.playmode .goal.done { border-color: rgba(126, 224, 160, 0.5); }
body.playmode .goal .bar { display: none; }
/* Star meter as a thin line */
body.playmode #starBar { grid-area: stars; display: flex; align-items: center; gap: 10px; min-width: 0; }
body.playmode #starBar .prog-top { margin: 0; }
body.playmode #starBar .prog-top .eyebrow { display: none; }
body.playmode #starBar .stars-sm { font-size: 0.85rem; }
body.playmode #starBar .bar { flex: 1; height: 6px; }
body.playmode #starBar .tick { top: -3px; height: 12px; }
/* Power-up bar */
body.playmode .powers-box { grid-area: powers; min-width: 0; }
body.playmode .powers { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 1px; }
body.playmode .powers::-webkit-scrollbar { display: none; }
body.playmode .pw { flex: 0 0 auto; min-width: 68px; padding: 7px 8px 6px; gap: 3px; justify-items: center; text-align: center; font-size: 0.68rem; white-space: nowrap; }
body.playmode .pw .rar { display: none; }
body.playmode .pw svg { width: 20px; height: 20px; }
body.playmode .pw .ct { top: 3px; right: 3px; font-size: 0.6rem; padding: 2px 4px; }
body.playmode #adBtn { grid-area: ad; padding: 8px 10px; font-size: 0.75rem; line-height: 1.15; align-self: stretch; }
body.playmode .ad-full { display: none; }
body.playmode .ad-short { display: inline; }
.ad-short small { display: block; color: var(--muted); font-size: 0.68rem; }

/* Landscape: side columns around the board (iPad landscape, phones on their side, desktop). */
@media (min-aspect-ratio: 6/5) {
  body.playmode #play {
    grid-template-columns: minmax(150px, 1fr) auto minmax(150px, 1fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    grid-template-areas: "menu board fs" "stats board powers" "goals board powers" "stars board powers" "threat board powers" ". board ad";
    align-items: start; gap: 12px 18px;
  }
  body.playmode .board-col { grid-row: 1 / -1; align-self: stretch; }
  body.playmode .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; justify-items: start; }
  body.playmode .stats div { align-items: flex-start; }
  body.playmode .stats b { font-size: 1.4rem; }
  body.playmode .goals-box .prog-top { display: flex; }
  body.playmode .goals { flex-direction: column; flex-wrap: nowrap; }
  body.playmode .goal { display: grid; background: none; border: 0; padding: 0; border-radius: 0; font-size: 0.85rem; }
  body.playmode .goal .bar { display: block; }
  body.playmode .threat { display: block; grid-area: threat; font-size: 0.82rem; padding: 8px 10px; }
  body.playmode .powers-box { align-self: start; }
  body.playmode .powers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  body.playmode .pw { min-width: 0; }
  body.playmode #adBtn { align-self: end; }
}
/* Short landscape screens (phones on their side): keep the side columns compact. */
@media (min-aspect-ratio: 6/5) and (max-height: 560px) {
  body.playmode #play { gap: 6px 12px; grid-template-areas: "menu board fs" "stats board powers" "goals board powers" "stars board powers" ". board powers" ". board ad"; }
  body.playmode .threat, body.playmode .goals-box .prog-top { display: none; }
  body.playmode .stats b { font-size: 1.05rem; }
  body.playmode .stats { gap: 4px 10px; }
  body.playmode .goal { font-size: 0.74rem; gap: 2px 8px; }
  body.playmode .goal .bar { display: none; }
  body.playmode .pw { padding: 5px 6px; }
  body.playmode .pw span:not(.ct) { font-size: 0.62rem; }
}

/* Menu sheet */
.pm-menu { position: fixed; inset: 0; z-index: 40; background: rgba(4, 7, 9, 0.72); display: flex; }
.pm-sheet {
  width: min(360px, 100%); height: 100%; overflow-y: auto;
  background: var(--panel); border-right: 1px solid var(--line);
  padding: max(18px, env(safe-area-inset-top, 0px)) 18px max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 14px;
  animation: pm-in 0.22s ease-out;
}
@keyframes pm-in { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
.pm-head { display: flex; justify-content: space-between; align-items: center; }
.pm-head h2 { font-size: 1.4rem; letter-spacing: 0.06em; }
.pm-who { color: var(--muted); font-size: 0.9rem; }
.pm-who b { color: var(--fg); }
.pm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pm-grid .btn { text-align: left; justify-content: flex-start; }
.pm-tip { font-size: 0.85rem; color: var(--muted); border-left: 2px solid var(--solder); padding-left: 10px; }
@media (prefers-reduced-motion: reduce) { .pm-sheet { animation: none; } }

/* Menu pages on phones and tablets: keep the tab strip on screen so Play is one tap away. */
@media (max-width: 900px), (pointer: coarse) {
  .tabs { position: sticky; top: 0; z-index: 10; background: var(--ink); margin-inline: -16px; padding: 8px 16px; }
}

/* Play mode on phones: every power-up fits on one row, and the ad button shrinks to an icon. */
@media (max-width: 480px) and (max-aspect-ratio: 6/5) {
  body.playmode .powers { overflow: visible; }
  body.playmode .pw { flex: 1 1 0; min-width: 0; padding: 7px 4px 6px; }
  body.playmode .pw span:not(.ct) { font-size: 0.6rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body.playmode #adBtn { width: 58px; padding: 6px 4px; font-size: 0.7rem; }
  body.playmode .ad-short .ad-word { display: none; }
}
/* Play mode on tablets: scale the bars up to suit the bigger screen. */
@media (min-width: 700px) and (min-height: 700px) {
  body.playmode .stats .eyebrow { font-size: 0.7rem; }
  body.playmode .stats b { font-size: 1.6rem; }
  body.playmode .goal { font-size: 0.95rem; }
  body.playmode .pw { min-width: 100px; padding: 10px 10px 8px; font-size: 0.82rem; gap: 5px; }
  body.playmode .pw svg { width: 24px; height: 24px; }
  body.playmode .pw .ct { font-size: 0.72rem; }
  body.playmode #adBtn { font-size: 0.85rem; }
  body.playmode .pm-only { min-height: 48px; min-width: 48px; }
  body.playmode .threat { font-size: 0.95rem; }
}
@media (min-aspect-ratio: 6/5) and (min-width: 1000px) and (min-height: 700px) {
  body.playmode .stats b { font-size: 1.9rem; }
  body.playmode .goal { font-size: 1rem; }
  body.playmode .pw { min-width: 0; }
}
.pw-short { display: none; }
@media (max-width: 480px) and (max-aspect-ratio: 6/5) {
  body.playmode .pw-full { display: none; }
  body.playmode .pw-short { display: inline; }
}

/* Level tiers and timed levels */
.tier { display: inline-block; font: 700 0.6rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 6px; border-radius: 999px; vertical-align: middle; margin-left: 4px; }
.tier.t-easy { background: rgba(126, 224, 160, 0.16); color: var(--ok); }
.tier.t-medium { background: rgba(143, 166, 171, 0.16); color: var(--muted); }
.tier.t-hard { background: rgba(255, 77, 109, 0.18); color: #FF8DA2; }
.tier.t-timed { background: rgba(63, 208, 232, 0.16); color: #8FE3FF; }
.tier-line .tier { margin: 0 6px 0 0; }
.tier-line { font-size: 0.9rem; color: var(--muted); }
#moves.low { color: var(--threat); }
.hard-reward { color: #FF8DA2; }
.node.t-hard { box-shadow: inset 0 -3px 0 var(--threat); }
.node.t-easy { box-shadow: inset 0 -3px 0 rgba(126, 224, 160, 0.7); }
.node.timed::after { content: '⏱'; position: absolute; top: -9px; right: -7px; font-size: 0.75rem; line-height: 1; }
.node { position: relative; }
body.playmode .stats .tier { font-size: 0.5rem; padding: 2px 4px; margin-left: 2px; }
.node.t-hard:not(.boss):not(.gate) .n::before { content: 'HARD '; font-size: 0.5rem; letter-spacing: 0.08em; display: block; color: #FF8DA2; margin-bottom: 2px; }