/* wallop.lol
   One family: Lo-Res 12 (Emigre), 400/700; Jacquard 12 for the wordmark only.
   Three sizes – 14 labels / 16 body / 36 display. 700 only for body-size headings; display is regular.
   Baseline 24px; every vertical margin is a multiple of the 6px step.
   Horizontal rhythm borrows the game's module: 16px brick, 2px gutter. */

:root {
  --bg: #0f0f10;
  --panel: var(--bg);
  --ink: #ffffff;
  --ink-3: rgba(255, 255, 255, 0.5);
  --line: rgba(255, 255, 255, 0.2);
  --line-2: rgba(255, 255, 255, 0.2);
  --gold: #ffff00;
  --gold-dark: #6b6b00;
  --green: #5ad26a;

  --font: "lores-12", ui-monospace, Menlo, monospace;
  --display: "Jacquard 12", "lores-22-serif", serif;
  --t-0: 0.875rem;  /* 14 – labels, captions */
  --t-1: 1rem;      /* 16 – body, headings in bold */
  --t-2: 2.25rem;   /* 36 – display: h1, big numbers, wordmark */
  --lh-0: 1.125rem; /* 18 for 14px labels */
  --lh: 1.5rem;     /* 24 baseline */
  --lh-2: 2.25rem;  /* 36 for display */

  --s-1: 0.75rem;   /* 12 */
  --s-2: 1.5rem;    /* 24 */
  --s-3: 2.25rem;   /* 36 */
  --s-4: 3rem;      /* 48 */
  --s-6: 4.5rem;    /* 72 */
  --s-8: 6rem;      /* 96 */
  --s-h: 0.375rem;  /* 6 – half step */

  --measure: 31rem; /* ~65 characters at 16px in this face */
  --col: 22.5rem;   /* 360 – the game's width */
}

::selection { background: var(--gold); color: var(--bg); }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: var(--t-1); line-height: var(--lh); font-weight: 400; overscroll-behavior: none; }
h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3 { font-size: inherit; line-height: inherit; font-weight: 700; }
a { color: inherit; text-decoration: none; transition: color 80ms, background 80ms, border-color 80ms; }
a:hover { color: var(--gold); }
b, strong { font-weight: 700; }
button, input { font: inherit; color: inherit; }
img, canvas { display: block; max-width: 100%; }

/* Header */
.top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s-2); max-width: 51rem; margin: 0 auto; padding: var(--s-1) var(--s-1) var(--s-h); }
.live { order: 3; flex-basis: 100%; display: flex; align-items: center; gap: var(--s-h); font-size: var(--t-0); line-height: var(--lh); color: var(--ink-3); white-space: nowrap; }
.live b { color: var(--ink); font-weight: 400; }
.live .dot { width: var(--s-h); height: var(--s-h); background: var(--green); flex: none; }
.wordmark { font-family: var(--display); font-size: var(--t-2); line-height: var(--lh-2); font-weight: 400; }
.wordmark b { color: var(--gold); font-weight: 400; }
nav { display: flex; gap: var(--s-2); font-size: var(--t-0); line-height: var(--lh-0); white-space: nowrap; }
nav a { color: var(--ink-3); text-decoration: none; }
nav a:hover { color: var(--gold); }

/* Game */
.layout { max-width: 51rem; margin: 0 auto; }
.stage { position: relative; display: flex; justify-content: center; touch-action: none; }
canvas { touch-action: none; user-select: none; -webkit-user-select: none; }
.numbers { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-h) var(--s-2); padding: var(--s-h) var(--s-1) var(--s-1); font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); }
.numbers b { color: var(--ink); font-weight: 400; }
.sound { border: 1px solid var(--line); padding: 0 var(--s-1); font-size: var(--t-0); line-height: calc(var(--lh) - 2px); color: var(--ink-3); background: none; cursor: pointer; }
.sound[aria-pressed="true"] { color: var(--ink); border-color: var(--line-2); }
.sound:hover, .sound[aria-pressed="true"]:hover { color: var(--bg); border-color: var(--gold); background: var(--gold); }

/* CTA */
.cta { text-align: center; padding: var(--s-h) var(--s-1) var(--s-3); }
.cta-btn, .page a.cta-btn { display: inline-block; background: var(--gold); color: var(--bg); text-decoration: none; font-weight: 700; padding: var(--s-h) var(--s-2); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--gold); }
.cta-btn:hover, .page a.cta-btn:hover { background: var(--bg); color: var(--gold); text-decoration: none; box-shadow: inset 0 0 0 1px var(--gold), 4px 4px 0 0 var(--gold); }
.cta-btn:active { background: var(--panel); }
.cta-price { font-weight: 400; margin-left: var(--s-1); }
.cta-sub { max-width: var(--measure); margin: var(--s-1) auto 0; color: var(--ink-3); }

/* HUD – positioned in canvas units via --k (css px per logical px) */
.screen { position: relative; }
.hud { position: absolute; inset: 0; pointer-events: none; font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); }
.hud b { color: var(--ink); font-weight: 400; display: block; }
#hud-lives { display: flex; gap: 4px; justify-content: flex-end; height: var(--lh-0); align-items: center; }
#hud-lives i { width: 8px; height: 8px; background: var(--ink-3); }
#hud-lives i.on { background: var(--ink); }
.hud-tl, .hud-tc, .hud-tr { position: absolute; top: calc(var(--k) * 8px); }
.hud-tl { left: calc(var(--k) * 8px); }
.hud-tc { left: 50%; transform: translateX(-50%); }
.hud-tr { right: calc(var(--k) * 8px); text-align: right; }
.hud-combo { position: absolute; right: calc(var(--k) * 8px); top: calc(var(--k) * 8px + var(--lh-0)); color: var(--gold); }
.life { display: inline-block; width: var(--s-h); height: var(--s-h); margin-left: 2px; background: var(--ink); vertical-align: middle; }
.life.lost { background: none; box-shadow: inset 0 0 0 1px var(--ink-3); }
.hud-box { position: absolute; left: calc(var(--k) * 37px); width: calc(var(--k) * 286px); top: calc(var(--k) * 206px); height: calc(var(--k) * 70px); box-sizing: border-box; border: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hud-box[hidden] { display: none; }
.hud-msg { font-size: var(--t-2); line-height: var(--lh-2); color: var(--ink); }
.hud-sub { position: absolute; left: 0; right: 0; top: calc(var(--k) * 600px); text-align: center; }

/* Brick card */

.card[hidden] { display: none; }
.card-head { display: flex; align-items: center; gap: var(--s-1); margin-bottom: var(--s-h); }
.card-swatch { width: var(--s-4); height: var(--s-4); flex: none; background: var(--c); display: grid; place-items: center; }
.card-swatch img { width: var(--s-4); height: var(--s-4); image-rendering: pixelated; }
.card-swatch-silver { box-shadow: inset 0 0 0 1px var(--ink); }
.card-swatch-op { box-shadow: inset 0 0 0 1px var(--gold); }
.card-tier { flex: 1; font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); }
.card-close { background: none; border: 0; color: var(--ink-3); line-height: 1; padding: 0 var(--s-1); margin-right: calc(-1 * var(--s-1)); cursor: pointer; }
.card-close:hover { color: var(--gold); }
.card-name { font-weight: 700; }
.card-desc { color: var(--ink); margin-bottom: var(--s-1); }
.card-desc b { color: var(--ink); font-weight: 400; }
.card-link { display: inline-block; color: var(--gold); margin-bottom: var(--s-1); }
.card-link:hover { color: var(--ink); }
.card-buy { color: var(--gold); }
.card-nums { display: flex; gap: var(--s-2); padding-top: calc(var(--s-1) - 1px); border-top: 1px solid var(--line); }
.card-nums div { display: flex; gap: var(--s-h); }
.card-nums dt { color: var(--ink-3); }
.card-nums dd { margin: 0; font-variant-numeric: tabular-nums; }
.card-op { font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); }

/* Score entry */
.entry, .card { position: absolute; left: calc(var(--k) * 37px); width: calc(var(--k) * 286px); top: calc(var(--k) * 134px); transform: none; z-index: 3; background: var(--bg); border: 1px solid var(--line); padding: calc(var(--s-1) - 1px); }
.entry { height: calc(var(--k) * 268px); }
.card { height: calc(var(--k) * 340px); overflow: hidden; }
.entry[hidden] { display: none; }
.entry-head { font-weight: 700; margin-bottom: var(--s-1); }
.entry label { display: block; font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); margin-bottom: var(--s-1); }
.entry input { display: block; width: 100%; background: var(--bg); border: 1px solid var(--line); padding: 0 var(--s-1); line-height: calc(var(--lh-2) - 2px); font-size: var(--t-1); }
.entry input:focus { outline: 1px solid var(--gold); outline-offset: 0; }
.entry-note { font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); margin-bottom: var(--s-1); }
.entry-row { display: flex; gap: var(--s-1); margin-top: var(--s-1); }
.entry button { padding: 0 var(--s-2); line-height: calc(var(--lh-2) - 2px); cursor: pointer; border: 1px solid var(--gold); background: var(--gold); color: var(--bg); font-weight: 700; }
.entry button:hover { background: var(--bg); color: var(--gold); }
.entry button.entry-skip { background: none; color: var(--ink-3); border-color: var(--line); font-weight: 400; }
.entry button.entry-skip:hover { color: var(--ink); border-color: var(--ink); }

/* Brick panel – desktop only */
.panel { display: none; }
.panel-idle { color: var(--ink-3); }
.panel .card-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Leaderboard */
.board { max-width: var(--col); margin: 0 auto; padding: var(--s-h) var(--s-1) var(--s-2); }
.board-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-1); margin-bottom: var(--s-h); }
.board h2 { font-weight: 700; }
.board-tabs { display: flex; gap: var(--s-1); }
.board-tab { background: none; border: 0; color: var(--ink-3); padding: 0; border-bottom: 1px solid transparent; cursor: pointer; }
.board-tab:hover { color: var(--ink); }
.board-tab[aria-selected="true"] { color: var(--ink); border-color: var(--gold); }
.board-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.board-list li { display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: var(--s-h); padding: var(--s-h) 0; border-bottom: 1px solid var(--line); }
.board-rank { color: var(--ink-3); }
.board-champ .board-rank { color: var(--green); }
.board-champ .board-rank::after { content: ' ♛'; }
.board-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.board-name { text-decoration: none; }
.board-list li:has(a):hover {  }
a.board-name:hover { color: var(--gold); }
.board-host { color: var(--gold); font-size: var(--t-0); line-height: var(--lh-0); margin-left: var(--s-h); }
a.board-name:hover .board-host { color: var(--gold); }
.board-score { font-variant-numeric: tabular-nums; }
.board-list li.board-empty { display: block; color: var(--ink-3); padding: var(--s-1) 0; }
.board-foot { color: var(--ink-3); margin-top: var(--s-1); }
.board-foot p { margin: 0; }
.board-foot a { color: var(--gold); }
.board-foot a:hover { color: var(--ink); }

@media (min-width: 56.25rem) {
  .live { order: 0; flex-basis: auto; }
  .layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--col); gap: 0 var(--s-4); align-items: start; }
  .layout .stage, .layout .numbers, .layout .cta { grid-column: 1; }
  .layout .side { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: var(--s-1); }
  .layout .foot { grid-column: 1 / -1; margin-left: 0; margin-right: 0; }
  .layout .panel { display: block; box-sizing: border-box; margin-top: var(--panel-top, 0); height: var(--panel-h, 19.5rem); overflow: hidden; padding: var(--s-1); border: 1px solid var(--line); background: var(--panel); margin-bottom: var(--s-1); }
  .layout .board { padding-top: 0; }
}

/* Stat tiles (about) */
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-1); }
.tile { border: 1px solid var(--line); padding: calc(var(--s-1) - 1px) var(--s-1); }
.tile b { display: block; font-size: var(--t-2); line-height: var(--lh-2); font-weight: 400; font-variant-numeric: tabular-nums; }
.tile span { display: block; line-height: var(--lh); }
.tile span { font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); }
@media (min-width: 36rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }

/* Text pages */
.page { max-width: var(--measure); margin: 0 auto; padding: var(--s-2) var(--s-1) var(--s-4); }
.page h1 { font-size: var(--t-2); line-height: var(--s-4); font-weight: 400; margin: 0 0 var(--s-2); }
.page h2 { font-weight: 700; margin: var(--s-2) 0 0; }
.page p, .page ul, .page ol, .page .tiles, .page .preview { margin: 0 0 var(--s-2); color: var(--ink); }
.page ul, .page ol { padding-left: var(--s-3); }
.page li b { color: var(--ink); }
.page a { color: var(--gold); }
.page a:hover { color: var(--ink); }
.page code { color: var(--gold); }
.page .small { font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); }
.headline { color: var(--gold); }
.page li { margin: 0; }
.page .tiers { list-style: none; padding: 0; display: grid; gap: var(--s-1); }
.tier { display: flex; align-items: center; gap: var(--s-1); padding: calc(var(--s-1) - 1px) var(--s-1); border: 1px solid var(--line); text-decoration: none; color: var(--ink); background: var(--panel); }
.tier-swatch { width: var(--s-2); height: var(--s-2); flex: none; background: #e8e4dc; }
.tier-swatch-silver { background: #b9bcc2; box-shadow: inset 0 0 0 1px #fff; }
.tier-swatch-op { background: #111; box-shadow: inset 0 0 0 1px var(--gold); }
.tier-swatch-2 { background: conic-gradient(#e8e4dc 25%, var(--panel) 0 50%, #e8e4dc 0 75%, var(--panel) 0) 0 0 / 50% 50%; background-color: #e8e4dc; }
.tier-swatch-4 { background: repeating-linear-gradient(90deg, #e8e4dc 0 5px, var(--panel) 5px 6px), #e8e4dc; }
.tier-line { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tier-buy { padding: 0 var(--s-1); line-height: var(--lh); }
.preview { display: flex; align-items: flex-end; gap: var(--s-3); padding: calc(var(--s-2) - 1px) var(--s-1); border: 1px solid var(--line); background: #0b0b0c; }
.preview-item { display: flex; flex-direction: column; align-items: center; gap: 0; }
.preview-item canvas { image-rendering: pixelated; }
.preview-item figcaption { font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); white-space: nowrap; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-h) var(--s-2); margin: var(--s-2) var(--s-1) 0; padding: calc(var(--s-1) - 1px) 0 var(--s-2); border-top: 1px solid var(--line); font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); }
.foot-links { display: flex; flex-wrap: wrap; gap: var(--s-h) var(--s-1); }
.foot a { color: var(--ink-3); text-decoration: none; }
.foot a:hover { color: var(--ink); }
.page-foot { max-width: var(--measure); margin-left: auto; margin-right: auto; }

/* Live preview – type a URL, see your brick */
.preview-live { max-width: var(--measure); margin: 0 auto; text-align: left; }
.pv-row input { display: block; width: 100%; background: var(--bg); border: 1px solid var(--line); padding: 0 var(--s-1); line-height: calc(var(--lh-2) - 2px); }
.pv-row input:focus { outline: 1px solid var(--gold); outline-offset: 0; }
.pv-bricks { display: flex; align-items: flex-end; gap: var(--s-2); margin: var(--s-2) 0; }
.pv-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); }
.pv-item canvas { image-rendering: pixelated; }
.pv-item figcaption { display: flex; flex-direction: column; gap: var(--s-h); font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); white-space: nowrap; }
.pv-buy { padding: 0 var(--s-1); line-height: var(--lh); font-size: var(--t-1); }
.page .pv-price, .pv-price { margin: 0 0 var(--s-2); font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); }
.cta .cta-sub { margin: 0 auto var(--s-1); text-align: left; max-width: var(--measure); color: var(--ink); }