/* Starting look: warm grey page, white screen, ink text, one accent whose hue comes from the coin ticker. Geist for
   text, Geist Mono for small labels and numbers (local files, SIL OFL). Change the palette freely to fit the idea,
   dark or light, loud or calm: keep it finished and fresh. No inline styles in HTML (strict CSP): JS sets styles
   through the CSSOM only. */
@font-face { font-family: "Geist"; src: url("geist.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("geist-mono.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --hue: 24;
  --bg: #0e0d0c; --panel: #1a1816; --white: #151311;
  --ink: #fff4e8; --ink2: #d3c4b5; --muted: #9b8d7f; --faint: #6a5f55;
  --line: #2e2a26; --line2: #453f39;
  --accent: #ff6a13; --accent-ink: #ff8a40; --accent-soft: rgba(255, 106, 19, .14);
  --red: #e5201b;
  --ok: #0b8a4c;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;
  --r: 16px; --rs: 10px; --maxw: 1080px; --gutter: clamp(16px, 3vw, 28px);
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); }
body { margin: 0; min-height: 100dvh; background: var(--bg); font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line2); }
h1, h2, h3, p { margin: 0; }
button { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

.top, .hero, .stage, .log, .foot { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; }
.top { display: flex; align-items: center; gap: 18px; padding: 18px 0; }
.wordmark { font: 700 20px/1 var(--sans); letter-spacing: -0.02em; }
.menu { display: flex; gap: 14px; margin-left: 6px; font: 500 14px/1 var(--sans); color: var(--ink2); }
.chip { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px 4px 5px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); font: 500 12px/1 var(--mono); color: var(--ink2); }
.mark { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; background: var(--white); }

.hero { padding: clamp(28px, 6vw, 72px) 0 clamp(18px, 3vw, 32px); }
.hero-text { max-width: 640px; }
h1 { font: 700 clamp(34px, 6vw, 60px)/1.02 var(--sans); letter-spacing: -0.03em; }
.lead { margin-top: 16px; font-size: clamp(16px, 1.6vw, 19px); color: var(--ink2); max-width: 520px; }
.actions { margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.btn { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 999px; background: var(--accent); color: #140a02; font: 600 15px/1 var(--sans); border: 0; cursor: pointer; }
.btn:hover { text-decoration: none; background: var(--accent-ink); }
.btn.red { background: var(--red); color: #fff; }
.btn.red:hover { background: #ff3b34; }
.hero { display: grid; gap: 28px; align-items: center; }
.hero-pic { width: 100%; max-width: 420px; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--r); border: 1px solid var(--line2); }
@media (min-width: 820px) { .hero { grid-template-columns: 1.3fr 1fr; } .hero-pic { justify-self: end; } }
.gen { display: grid; gap: 18px; justify-items: start; max-width: 620px; margin: 0 auto; }
.gen-out { font: 700 clamp(22px, 4vw, 34px)/1.15 var(--sans); letter-spacing: -0.02em; padding: 18px; border-left: 4px solid var(--accent); background: var(--panel); border-radius: var(--rs); width: 100%; }
.gen-count { font: 500 12px/1 var(--mono); color: var(--muted); }
.kit { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px 0 28px; display: grid; gap: 24px; }
.kit h1 { margin-bottom: 8px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: grid; gap: 12px; }
.card h2 { font: 600 18px/1.2 var(--sans); }
.card img { width: 100%; height: auto; border-radius: var(--rs); }
.card.logo img { max-width: 320px; }
.card p { color: var(--ink2); }
.profile { font: 500 15px/1.5 var(--mono); color: var(--ink); white-space: pre-line; }
@media (min-width: 820px) { .kit .pair { display: grid; grid-template-columns: 1fr 2fr; gap: 24px; align-items: start; } }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line2); }
.live { display: inline-flex; align-items: center; gap: 7px; font: 500 12.5px/1 var(--mono); color: var(--muted); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(11, 138, 76, .14); }

.stage { padding: 8px 0 28px; }
.screen { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 30px 60px -30px rgba(18, 19, 23, .35); overflow: hidden; }
.bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel); }
.dots { display: inline-flex; gap: 5px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--line2); display: inline-block; }
.url { flex: 1; text-align: center; font: 500 12px/1 var(--mono); color: var(--muted); }
#app { min-height: 380px; padding: clamp(18px, 3vw, 36px); }
.soon { display: grid; place-content: center; text-align: center; min-height: 320px; gap: 8px; color: var(--ink2); }
.soon h2 { font: 600 24px/1.1 var(--sans); color: var(--ink); letter-spacing: -0.02em; }
.eyebrow { font: 500 12px/1 var(--mono); color: var(--accent-ink); text-transform: uppercase; letter-spacing: .08em; }

.log { padding: 24px 0 40px; }
.log h2 { font: 600 18px/1.2 var(--sans); margin-bottom: 12px; letter-spacing: -0.01em; }
.log ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.log li { display: flex; gap: 14px; align-items: baseline; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--rs); font-size: 15px; }
.when { font: 500 12px/1 var(--mono); color: var(--muted); white-space: nowrap; }

.foot { padding: 20px 0 48px; color: var(--muted); font-size: 13.5px; display: grid; gap: 10px; }
.ca { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--ink2); font: 500 12px/1.4 var(--mono); cursor: pointer; word-break: break-all; text-align: left; }
.ca:hover { border-color: var(--ink2); color: var(--ink); }
.ca code { font: inherit; }

/* tiles and small building blocks the product can use */
.tiles { display: grid; gap: 8px; }
.tile { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); font: 700 20px/1 var(--mono); text-transform: uppercase; }
.tile.hit { background: var(--accent); color: #fff; border-color: transparent; }
.tile.near { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.tile.miss { background: var(--line); color: var(--muted); border-color: transparent; }

/* do not press */
.ticker { overflow: hidden; background: var(--accent); color: #140a02; border-block: 3px solid #140a02; font: 700 13px/1 var(--mono); text-transform: uppercase; white-space: nowrap; }
.ticker-track { display: inline-flex; padding: 9px 0; animation: tick 30s linear infinite; }
.ticker-track span { white-space: pre; padding-right: 2ch; }
@keyframes tick { to { transform: translateX(-50%); } }
.hero-pic { border: 3px solid var(--accent); }
.live b { color: var(--accent-ink); }
.bigbtn-wrap { position: relative; display: grid; gap: 16px; justify-items: center; text-align: center; max-width: 620px; margin: 0 auto; overflow: hidden; padding: 8px 0; }
.bigbtn { width: min(260px, 70vw); aspect-ratio: 1 / 1; border-radius: 50%; border: 10px solid #3a1210; background: radial-gradient(circle at 35% 30%, #ff5a52, var(--red) 55%, #9c100c); color: #fff; font: 800 clamp(20px, 5vw, 28px)/1.05 var(--sans); text-transform: uppercase; letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 10px 0 #5a1612, 0 22px 40px -10px rgba(229, 32, 27, .5); transition: transform .08s, box-shadow .08s; }
.bigbtn:active { transform: translateY(8px); box-shadow: 0 2px 0 #5a1612, 0 8px 20px -10px rgba(229, 32, 27, .5); }
.bigbtn:focus-visible, .btn:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 4px; }
.bigbtn-wrap .gen-out { text-align: left; }
.verdict { font: 600 15px/1.3 var(--mono); color: var(--accent-ink); text-align: left; width: 100%; }
.verdict:empty { display: none; }
.card-wrap { display: grid; gap: 12px; width: 100%; justify-items: center; }
.card-wrap[hidden] { display: none; }
.card-canvas { width: 100%; max-width: 360px; height: auto; aspect-ratio: 1 / 1; border-radius: var(--rs); border: 3px solid var(--accent); }
.card-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.counter { font: 500 14px/1 var(--mono); color: var(--muted); }
.counter b { font: 800 clamp(34px, 8vw, 54px)/1 var(--mono); color: var(--accent); margin-right: 8px; }
.rain { position: absolute; inset: 0; pointer-events: none; }
.fall { position: absolute; top: -40px; width: 36px; height: auto; animation: drop 1.6s ease-in forwards; }
@keyframes drop { to { transform: translateY(480px) rotate(240deg); } }
.fx-shake .screen { animation: shk .6s; }
.fx-flash body, body.fx-flash { animation: fl .6s; }
.fx-spin .hero-pic { animation: sp .7s; }
.fx-wobble .screen { animation: wb .7s; }
@keyframes shk { 0%, 100% { transform: none; } 20% { transform: translate(-8px, 4px); } 40% { transform: translate(8px, -4px); } 60% { transform: translate(-6px, -3px); } 80% { transform: translate(6px, 3px); } }
@keyframes fl { 0%, 100% { background: var(--bg); } 30% { background: #5a1612; } }
@keyframes sp { to { transform: rotate(360deg); } }
@keyframes wb { 0%, 100% { transform: none; } 25% { transform: rotate(-1.2deg); } 75% { transform: rotate(1.2deg); } }
@media (prefers-reduced-motion: reduce) { .ticker-track, .screen, .hero-pic, body { animation: none !important; } .fall { display: none; } }

.lore, .links { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 28px 0; }
.lore { display: grid; gap: 24px; align-items: center; }
.lore-pic { width: 100%; max-width: 480px; height: auto; border-radius: var(--r); border: 3px solid var(--accent); }
.lore-text { display: grid; gap: 12px; }
.lore h2, .links h2 { font: 700 clamp(26px, 4vw, 38px)/1.08 var(--sans); letter-spacing: -0.02em; }
.links h2 { font-size: 22px; margin-bottom: 12px; }
.lore-text p { color: var(--ink2); }
.rules { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.rules li { padding: 10px 14px; border: 2px dashed var(--accent); border-radius: var(--rs); font-size: 15px; }
.rules b { display: block; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); margin-bottom: 4px; }
.linkgrid { display: grid; gap: 10px; }
.lk { display: grid; gap: 4px; padding: 16px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r); }
.lk:hover { border-color: var(--accent); text-decoration: none; }
.lk b { font-size: 18px; color: var(--accent-ink); }
.lk span { color: var(--ink2); font-size: 14px; }
@media (min-width: 820px) { .lore { grid-template-columns: 1fr 1fr; } .linkgrid { grid-template-columns: repeat(3, 1fr); } }

.sheet { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px 0 20px; display: grid; gap: 16px; }
.sheet-pic { width: 100%; max-width: 720px; height: auto; margin: 0 auto; border-radius: var(--r); border: 3px solid var(--accent); }
.moods { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.moods li { padding: 12px 14px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--rs); color: var(--ink2); font-size: 15px; }
.moods b { display: block; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-ink); margin-bottom: 4px; }
.four { margin: 0; padding-left: 22px; display: grid; gap: 10px; color: var(--ink); font-size: 17px; }
.four li::marker { color: var(--accent); font-weight: 700; }
@media (min-width: 820px) { .moods { grid-template-columns: repeat(4, 1fr); } .lore-page { align-items: start; } }

.stickers { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px 0 24px; display: grid; gap: 24px; }
.sgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
.sgrid li { display: grid; gap: 8px; padding: 10px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--r); }
.sgrid img { width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: var(--rs); }
.sgrid a { font: 500 13px/1.2 var(--mono); color: var(--accent-ink); text-align: center; }
@media (min-width: 820px) { .sgrid { grid-template-columns: repeat(4, 1fr); } }
.mgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
.meme { display: grid; align-content: start; gap: 0; background: #0e0d0c; border: 3px solid var(--accent); border-radius: var(--r); overflow: hidden; }
.meme img { width: 100%; height: auto; aspect-ratio: 1 / 1; display: block; }
.meme p { margin: 0; padding: 8px 10px; font: 700 13px/1.2 var(--sans); text-transform: uppercase; text-align: center; }
.meme .mt { background: var(--accent); color: #140a02; }
.meme .mb { background: #0e0d0c; color: var(--accent-ink); }
@media (min-width: 820px) { .mgrid { grid-template-columns: repeat(4, 1fr); } .meme p { font-size: 14px; } }

/* sign dash game */
.game-hero { padding-bottom: 12px; }
.game { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 8px 0 28px; display: grid; gap: 20px; align-items: start; }
.game-body { display: grid; gap: 14px; justify-items: center; padding: clamp(14px, 3vw, 24px); }
.dash { display: block; width: 100%; max-width: 380px; height: auto; aspect-ratio: 3 / 4; border-radius: var(--rs); border: 3px solid var(--accent); touch-action: none; cursor: pointer; background: var(--bg); }
.dash:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
.game-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; justify-content: center; }
.namefield { display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.namefield input { width: 140px; padding: 9px 12px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel); color: var(--ink); font: 500 14px/1 var(--mono); text-transform: none; }
.namefield input:focus { outline: 2px solid var(--accent); border-color: transparent; }
.game-status { font: 500 13px/1.4 var(--mono); color: var(--ink2); text-align: center; max-width: 380px; }
.game-side { display: grid; gap: 16px; }
.best { font: 500 13px/1 var(--mono); color: var(--muted); }
.best b { color: var(--accent); font-size: 22px; margin-left: 6px; }
.scores { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.scores li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; border-radius: var(--rs); background: var(--white); border: 1px solid var(--line); font: 500 14px/1 var(--mono); }
.scores li.mine { border-color: var(--accent); background: var(--accent-soft); }
.scores li.empty { display: block; color: var(--muted); font-size: 13px; line-height: 1.4; }
.scores .rk { color: var(--accent-ink); font-weight: 700; }
.scores .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scores b { color: var(--ink); }
.note { font-size: 13px; }
.howlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.howlist li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; font-size: 14px; color: var(--ink2); }
.card .howlist img { width: 40px; height: auto; border-radius: 8px; }
.howlist b { display: block; color: var(--ink); }
@media (min-width: 900px) { .game { grid-template-columns: 1.2fr 1fr; } }
.promo { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin: 0 auto; padding: 12px 0 28px; }
.promo-card { display: grid; gap: 18px; align-items: center; padding: clamp(18px, 3vw, 28px); background: var(--panel); border: 3px solid var(--accent); border-radius: var(--r); }
.promo-card h2 { font: 700 clamp(24px, 4vw, 34px)/1.08 var(--sans); letter-spacing: -0.02em; margin: 8px 0; }
.promo-card p { color: var(--ink2); }
.promo-card .btn { margin-top: 14px; }
.promo-signs { display: flex; gap: 10px; justify-content: center; }
.promo-signs img { width: 30%; max-width: 110px; height: auto; }
@media (min-width: 820px) { .promo-card { grid-template-columns: 1.4fr 1fr; } }

@media (max-width: 640px) {
  .menu { display: none; }
  #app { min-height: 300px; }
  .tile { width: 44px; height: 44px; font-size: 17px; }
}