@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
  --bg: #090a0f;
  --panel: #11131c;
  --panel-2: #151827;
  --line: #272b3d;
  --muted: #747991;
  --text: #f5f1e8;
  --orange: #ff9d4d;
  --orange-2: #f06c3b;
  --green: #82e1a6;
  --purple: #a78bfa;
  --blue: #72b8ff;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); }
body { overflow-x: hidden; }
button, textarea { font: inherit; }
button { cursor: pointer; }
.grain { position: fixed; inset: 0; pointer-events: none; opacity: .04; z-index: 5; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); }
.app-shell { max-width: 1240px; margin: 0 auto; padding: 24px 26px 18px; position: relative; z-index: 1; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.brand-lockup { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 38px; height: 38px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; transform: rotate(-8deg); }
.brand-mark span { background: var(--orange); box-shadow: 3px 3px 0 #7f3524; }
.brand-mark span:nth-child(1), .brand-mark span:nth-child(4) { opacity: .55; }
.brand-mark span:nth-child(2) { grid-column: 2 / 4; }
.brand-mark span:nth-child(3) { grid-column: 1 / 3; grid-row: 3 / 5; background: var(--green); box-shadow: 3px 3px 0 #277756; }
.eyebrow { color: var(--muted); font: 500 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(20px, 2.4vw, 30px); letter-spacing: -.04em; line-height: 1.05; margin-top: 7px; }
h1 span { color: var(--orange); font-weight: 400; }
.top-actions { display: flex; align-items: center; gap: 16px; }
.signal, .sound-toggle { font: 500 11px var(--mono); letter-spacing: .08em; color: var(--muted); }
.signal { display: flex; align-items: center; gap: 8px; }
.signal i, .live-pill i { width: 7px; height: 7px; display: inline-block; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(130,225,166,.10), 0 0 14px var(--green); animation: pulse 1.9s infinite; }
.sound-toggle { background: none; border: 0; padding: 8px 0 8px 12px; border-left: 1px solid var(--line); color: var(--text); }
.sound-icon { color: var(--orange); letter-spacing: -.14em; margin-right: 8px; }
.layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr); gap: 20px; margin-top: 22px; }
.game-column, .side-column { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel { background: linear-gradient(140deg, rgba(25,27,39,.97), rgba(13,14,22,.98)); border: 1px solid var(--line); box-shadow: 0 18px 55px rgba(0,0,0,.24), inset 0 1px rgba(255,255,255,.025); }
.scene-wrap { padding: 12px 12px 0; overflow: hidden; }
.scene-label, .scene-caption, .picker-label, .input-meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; font: 500 10px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.scene-label { padding: 2px 5px 11px; }
.scene-label span:last-child { color: var(--orange); }
#scene { display: block; width: 100%; height: auto; max-height: 320px; background: #111824; image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid #2b3342; object-fit: fill; }
.scene-caption { padding: 10px 5px 12px; text-transform: none; letter-spacing: 0; }
.scene-caption > span { display: inline-flex; align-items: center; gap: 6px; }
.caption-tip { margin-left: auto; color: #9a9fb3; }
.dot { width: 6px; height: 6px; display: inline-block; border-radius: 1px; }
.dot-green { background: var(--green); }.dot-orange { background: var(--orange); }
.race-panel { padding: 24px 26px 22px; }
.race-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.race-head h2 { font-size: clamp(20px, 2.5vw, 29px); letter-spacing: -.04em; margin-top: 8px; }
.race-clock { color: var(--orange); font: 500 24px var(--mono); letter-spacing: -.08em; }
.progress-track { height: 5px; background: #262a3a; margin: 20px 0 18px; overflow: hidden; }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--orange-2), var(--orange), var(--green)); transition: width .18s ease-out; box-shadow: 0 0 15px rgba(255,157,77,.52); }
.quote-card { min-height: 88px; padding: 10px 0 8px; border: 0; background: transparent; color: #a6acc0; font: 500 17px/1.65 var(--mono); letter-spacing: -.03em; word-break: break-word; outline: none; }
.quote-card:focus { outline: none; }
.typing-row { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; align-items: stretch; margin-top: 5px; }
.quote-card .correct { color: var(--green); }.quote-card .current { color: var(--text); background: rgba(255,157,77,.22); box-shadow: 0 0 0 2px rgba(255,157,77,.1); }.quote-card .wrong { color: #ff6e67; background: rgba(255,70,70,.12); }
.typing-input { display: block; width: 100%; resize: none; min-height: 86px; margin-top: 0; padding: 14px 16px; border: 1px solid #353b52; background: #0b0d14; color: var(--text); font: 500 16px/1.5 var(--mono); outline: none; caret-color: var(--orange); }
.typing-input::placeholder { color: #5e6376; }.typing-input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,157,77,.1); }
.typing-row .primary-btn { min-height: 86px; width: 100%; font-size: 15px; letter-spacing: .14em; }
.input-meta { padding: 8px 1px 0; text-transform: none; letter-spacing: 0; }.input-meta b { color: var(--text); }
.race-actions { display: flex; align-items: center; gap: 11px; margin-top: 19px; }
.primary-btn, .ghost-btn { min-height: 40px; border-radius: 2px; padding: 0 17px; font: 600 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; transition: transform .2s, filter .2s, background .2s; }
.primary-btn { border: 1px solid #ffb267; color: #1c110b; background: linear-gradient(135deg, #ffb361, #f07847); box-shadow: 0 5px 0 #91432c, 0 10px 25px rgba(240,108,59,.17); }.primary-btn:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.1); }.primary-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 #91432c; }.primary-btn:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.25); box-shadow: none; }
.ghost-btn { border: 1px solid #454b61; color: #b4bbcd; background: #191c29; }.ghost-btn:hover { border-color: var(--orange); color: var(--text); }
.race-note { margin-left: auto; color: var(--muted); font: 10px var(--mono); }.kbd { color: var(--text); border: 1px solid #444a60; background: #202437; padding: 3px 5px; font-size: 9px; }
.quote-picker { padding: 13px 16px 15px; }.picker-label { margin-bottom: 11px; text-transform: none; letter-spacing: 0; }.picker-label .eyebrow { text-transform: uppercase; letter-spacing: .16em; }
.signal-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.signal-option { position: relative; border: 1px solid #30364b; padding: 11px 12px; background: #0d1019; color: #858ba0; text-align: left; min-height: 66px; }.signal-option:hover { border-color: #5d667e; }.signal-option.active { border-color: var(--orange); background: rgba(255,157,77,.07); color: var(--text); box-shadow: inset 3px 0 var(--orange); }.signal-option b { display: block; color: var(--orange); font: 500 10px var(--mono); margin-bottom: 5px; }.signal-option span { display: block; font: 12px/1.4 var(--mono); }
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }.stat-card { position: relative; min-height: 122px; padding: 14px 13px; overflow: hidden; }.stat-label { display: block; color: var(--muted); font: 500 9px var(--mono); letter-spacing: .1em; }.stat-card strong { display: inline-block; margin-top: 18px; font: 500 31px var(--mono); letter-spacing: -.12em; }.stat-card small { color: var(--muted); font: 10px var(--mono); margin-left: 3px; }.stat-spark { position: absolute; right: 10px; bottom: 11px; width: 33px; height: 20px; opacity: .9; background: linear-gradient(135deg, transparent 47%, currentColor 48%, currentColor 53%, transparent 54%), linear-gradient(25deg, transparent 38%, currentColor 39%, currentColor 43%, transparent 44%), linear-gradient(155deg, transparent 58%, currentColor 59%, currentColor 63%, transparent 64%); }.spark-orange { color: var(--orange); }.spark-green { color: var(--green); }.spark-purple { color: var(--purple); }
.leaderboard { padding: 21px 18px 17px; flex: 1; min-height: 340px; }.leader-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }.leader-head h2 { margin-top: 7px; font-size: 21px; letter-spacing: -.04em; }.live-pill { display: inline-flex; align-items: center; gap: 7px; border: 1px solid rgba(130,225,166,.25); padding: 6px 8px; color: var(--green); font: 500 9px var(--mono); letter-spacing: .08em; }.live-pill i { width: 5px; height: 5px; box-shadow: none; }.leader-sub { margin-top: 10px; color: var(--muted); font: 11px/1.4 var(--mono); max-width: 290px; }.leader-list { display: flex; flex-direction: column; gap: 7px; margin-top: 19px; }.leader-row { display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 9px; padding: 9px 9px; background: rgba(255,255,255,.025); border: 1px solid transparent; }.leader-row.you { border-color: rgba(255,157,77,.55); background: rgba(255,157,77,.08); }.leader-rank { color: #686e83; font: 500 11px var(--mono); }.leader-row:nth-child(1) .leader-rank { color: var(--orange); }.leader-name { display: flex; align-items: center; gap: 8px; font: 500 12px var(--mono); }.mini-avatar { width: 21px; height: 21px; display: inline-block; border: 1px solid #566079; background: linear-gradient(135deg, #bd7b58 0 38%, #212434 39% 67%, #7bcf9d 68%); image-rendering: pixelated; }.leader-wpm { color: var(--text); font: 500 12px var(--mono); }.leader-wpm small { color: var(--muted); font-size: 9px; }.leader-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--line); color: var(--muted); font: 10px var(--mono); }.leader-foot b { color: var(--orange); font-weight: 500; }
.howto { padding: 18px; }.how-row { display: flex; gap: 11px; margin-top: 17px; }.how-icon { flex: 0 0 24px; height: 24px; display: grid; place-items: center; border: 1px solid #424960; color: var(--orange); font: 9px var(--mono); }.how-row p { color: var(--text); font: 12px/1.35 var(--mono); }.how-row p span { color: var(--muted); font-size: 10px; }
.airdrop-rule { margin-top: 20px; max-width: 360px; color: var(--text); font: 600 20px/1.25 var(--mono); letter-spacing: -.06em; }
.footer { display: flex; justify-content: space-between; gap: 16px; padding-top: 17px; color: #585e72; font: 9px var(--mono); letter-spacing: .08em; }.footer b { color: var(--orange); }
.modal-backdrop { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(4,5,9,.78); backdrop-filter: blur(9px); opacity: 0; pointer-events: none; transition: opacity .25s; }.modal-backdrop.open { opacity: 1; pointer-events: auto; }.result-modal { width: min(480px, 100%); padding: 34px; text-align: center; position: relative; border-color: #4b4150; box-shadow: 0 30px 90px rgba(0,0,0,.6), 0 0 0 1px rgba(255,157,77,.14); }.modal-close { position: absolute; top: 11px; right: 15px; border: 0; background: none; color: #7e8497; font-size: 24px; }.result-stamp { display: inline-block; margin-bottom: 17px; padding: 7px 11px; border: 1px solid var(--green); color: var(--green); font: 500 10px var(--mono); letter-spacing: .18em; transform: rotate(-2deg); }.result-modal h2 { margin: 13px 0 21px; font-size: 27px; letter-spacing: -.05em; }.result-score { color: var(--orange); font: 500 75px/.9 var(--mono); letter-spacing: -.13em; text-shadow: 0 0 28px rgba(255,157,77,.25); }.result-score small { color: var(--text); font-size: 14px; letter-spacing: .06em; margin-left: 9px; }.result-details { display: flex; justify-content: center; gap: 20px; margin: 20px 0 25px; color: var(--muted); font: 11px var(--mono); }.result-details b { color: var(--text); font-weight: 500; }.result-actions { display: flex; justify-content: center; gap: 10px; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
@media (max-width: 980px) { .app-shell { padding: 22px 18px 15px; }.layout { grid-template-columns: 1fr; }.side-column { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }.stats-grid { grid-column: 1 / -1; }.leaderboard { min-height: 0; }.howto { min-height: 0; } }
@media (max-width: 620px) { .topbar { align-items: flex-start; }.top-actions { flex-direction: column; align-items: flex-end; gap: 8px; }.signal { display: none; }.layout { margin-top: 14px; gap: 14px; }.game-column, .side-column { gap: 14px; }.scene-caption { flex-wrap: wrap; }.caption-tip { margin-left: 0; width: 100%; }.race-panel { padding: 20px 16px 18px; }.race-head h2 { font-size: 22px; }.quote-card { font-size: 14px; min-height: 94px; }.typing-row { grid-template-columns: 1fr; }.typing-input { min-height: 72px; }.typing-row .primary-btn { min-height: 58px; font-size: 13px; }.race-actions { flex-wrap: wrap; }.race-note { width: 100%; margin-left: 0; }.signal-list { grid-template-columns: 1fr; }.side-column { display: flex; }.stats-grid { gap: 6px; }.stat-card { min-height: 106px; padding: 12px 9px; }.stat-card strong { font-size: 25px; }.footer { flex-wrap: wrap; font-size: 8px; } }