/* 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.4);
  --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, nav a[aria-current] { color: var(--ink); }

/* Game */
.layout { max-width: 51rem; margin: 0 auto; }
.stage { position: relative; display: flex; flex-direction: column; align-items: 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 { background: none; border: 0; padding: 0; color: var(--ink-3); font-size: var(--t-0); line-height: var(--lh-0); cursor: pointer; }
.sound:hover { color: var(--ink); }

/* 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); }
#hud-lives i.lost { background: none; box-shadow: inset 0 0 0 1px var(--ink-3); }
.hud-bar { display: flex; justify-content: space-between; align-items: center; width: var(--screen-w, 100%); margin: 0 auto; padding: 0 calc(var(--k) * 8px); font-size: var(--t-0); line-height: var(--lh); color: var(--ink-3); }
.hud-bar b { color: var(--ink); font-weight: 400; }
.hud-tl, .hud-tc, .hud-tr { flex: 1; }
.hud-tc { text-align: center; }
.hud-tr { text-align: right; }
.hud-combo { position: absolute; right: calc(var(--k) * 8px); bottom: calc(var(--k) * 40px); color: var(--gold); }
.hud-box { position: absolute; left: calc(var(--k) * 49px); width: calc(var(--k) * 286px); top: calc(var(--k) * var(--field-box, 164px)); min-height: calc(var(--k) * 70px); box-sizing: border-box; padding: var(--s-h) var(--s-1); 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) * var(--field-sub, 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: 0; }
.card-desc b { color: var(--ink); font-weight: 400; }
.card-link { display: inline-block; color: var(--gold); margin-bottom: 0; }
.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) * 49px); width: calc(var(--k) * 286px); top: calc(var(--k) * 24px); transform: none; z-index: 3; background: var(--bg); border: 1px solid var(--line); padding: calc(var(--s-1) - 1px); }
.entry, .card { height: auto; min-height: 0; }
.card { overflow: visible; }
.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-2); 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, .card .card-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 0; }

/* 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; cursor: pointer; }
.board-tab:hover { color: var(--ink); }
.board-tab[aria-selected="true"] { color: var(--ink); }
.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-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; }
/* Directory rows – favicon, name, one-liner, wallops: the shape of every clone's own list */
.board-list li.dir { grid-template-columns: 2em 16px minmax(0, 1fr) auto; align-items: baseline; }
.board-ico { width: 16px; height: 16px; align-self: center; image-rendering: pixelated; background: var(--panel); }
.board-desc { grid-column: 3 / span 2; color: var(--ink-3); font-size: var(--t-0); line-height: var(--lh-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.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 .main-col { grid-column: 1; position: sticky; top: var(--s-1); padding-top: var(--s-2); }
  .layout .side { grid-column: 2; }
  .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, 16.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: 0; list-style: none; counter-reset: item; }
.page li { position: relative; padding-left: var(--s-3); }
.page ol li::before { counter-increment: item; content: counter(item) '.'; position: absolute; left: 0; color: var(--ink-3); }
.page ul li::before { content: '–'; position: absolute; left: 0; color: var(--ink-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; padding-left: var(--s-1); padding-right: var(--s-1); }

/* 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-2); 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: var(--s-1) auto 0; text-align: center; max-width: var(--measure); color: var(--ink-3); }
.cta .cta-sub a { color: var(--gold); }
.cta .cta-sub a:hover { color: var(--ink); }
.size-row { display: flex; gap: var(--s-h); margin: var(--s-1) 0; }
.size-btn { flex: 1; background: none; border: 1px solid var(--line-2); color: var(--ink-3); padding: 0 var(--s-h); line-height: calc(var(--lh) - 2px); font-size: var(--t-0); cursor: pointer; white-space: nowrap; }
.size-btn:hover { color: var(--ink); border-color: var(--ink); }
.size-btn[aria-pressed="true"] { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.buy-go { display: block; text-align: center; padding: 0 var(--s-1); line-height: var(--lh); }
.buy-go.is-soon { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); }
.buy-soon { font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); }
.buy-note { margin-top: var(--s-h); font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); }
.pv-buy.is-soon { background: none; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
details summary { cursor: pointer; color: var(--gold); }

/* Spectrum test – a moving gradient in place of flat yellow. Remove the .spectrum class on <html> to go back. */
@keyframes spectrum-move { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
.spectrum { --spectrum: linear-gradient(90deg, #3b6cff, #6b4cff, #b44cff, #ff4cc3, #ff4c8a, #b44cff, #3b6cff); }
.spectrum .cta-btn, .spectrum .size-btn[aria-pressed="true"], .spectrum .entry button[type="submit"], .spectrum ::selection { background: var(--spectrum); background-size: 300% 100%; animation: spectrum-move 8s linear infinite; color: var(--bg); box-shadow: none; border-color: transparent; }
.spectrum .cta-btn { position: relative; }
.spectrum .cta-btn:hover { background: var(--spectrum); background-size: 300% 100%; animation: spectrum-move 8s linear infinite; -webkit-background-clip: text; background-clip: text; color: transparent; box-shadow: none; }
.spectrum .cta-btn:hover::after { content: ''; position: absolute; inset: 0; padding: 1px; background: var(--spectrum); background-size: 300% 100%; animation: spectrum-move 8s linear infinite; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; pointer-events: none; }
.spectrum .wordmark b, .spectrum .page a, .spectrum .board-foot a, .spectrum .card-link, .spectrum .board-host, .spectrum .hud-combo, .spectrum .cta .cta-sub a, .spectrum .pv-buy:not(.is-soon) { background: var(--spectrum); background-size: 300% 100%; animation: spectrum-move 8s linear infinite; -webkit-background-clip: text; background-clip: text; color: transparent; }
.spectrum .page a:hover, .spectrum .board-foot a:hover, .spectrum .card-link:hover { color: var(--ink); -webkit-text-fill-color: var(--ink); background: none; animation: none; }
.spectrum .wordmark:hover, .spectrum .wordmark:hover b { background: var(--spectrum); background-size: 300% 100%; animation: spectrum-move 8s linear infinite; -webkit-background-clip: text; background-clip: text; color: transparent; }
.spectrum a:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .spectrum * { animation: none !important; } }

.addform { position: static; width: auto; height: auto; margin: var(--s-2) 0; max-width: 24rem; }

/* The premise – first words on the page */
.premise { max-width: var(--measure); margin: 0 auto; padding: var(--s-2) var(--s-1) var(--s-3); text-align: center; font-size: var(--t-1); line-height: var(--lh-1); font-weight: 400; }
/* The hit line – who you just walloped, across the field */
.hud-line { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hud-line:empty { display: none; }
.hud-tc:has(.hud-line:not(:empty)) #hud-tc-static { display: none; }
.hud-tc { min-width: 0; overflow: hidden; flex: 3; white-space: nowrap; }
.entry-share { display: flex; gap: var(--s-1); align-items: baseline; font-size: var(--t-0); line-height: var(--lh-0); color: var(--ink-3); margin-bottom: var(--s-1); }
.entry-share span { flex: 1; }
.entry-copy { flex: none; padding: 0 var(--s-1); line-height: calc(var(--lh-0) - 2px); border: 1px solid var(--line-2); background: none; color: var(--ink); cursor: pointer; }
.entry-copy:hover { border-color: var(--gold); color: var(--gold); }
.card-paid { margin-top: var(--s-2); padding-bottom: var(--s-1); color: var(--ink-3); font-size: var(--t-0); line-height: var(--lh-0); }
.card-paid:empty { display: none; }