:root {
  --bg: #0E1116;
  --card: #161B22;
  --inset: #1C222B;
  --line: #2F3744;
  --text: #F3F4F1;
  --soft: #C9CFD6;
  --muted: #A9B1BC;
  --up: #22C38E;
  --dn: #F0605A;
  --blade: #34D399;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Be Vietnam Pro', system-ui, sans-serif; }
a { color: var(--soft); text-decoration: none; }
a:hover, a[aria-current] { color: var(--blade); }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible { outline: 3px solid #5B8DEF; outline-offset: 2px; }
[hidden] { display: none !important; }
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); font-size: 14px; }
.small { font-size: 13px; margin: 0; }
.t-up { color: var(--up); }
.t-dn { color: var(--dn); }

.wrap { max-width: 900px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
@media (max-width: 640px) { .wrap { padding-left: 16px; padding-right: 16px; } }

.bar { border-bottom: 1px solid var(--line); }
.bar-in { padding-top: 12px; padding-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); }
.wordmark { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.02em; }
.wordmark span { color: var(--blade); }
.bar nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 15px; }

.main { padding-top: 28px; padding-bottom: 48px; display: flex; flex-direction: column; gap: 20px; }
.card { background: var(--card); border-radius: 20px; padding: 26px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 640px) { .card { padding: 18px; } }

.hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero img { flex: 0 0 auto; }
.hero-text { flex: 1 1 280px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
h1 { margin: 0; font-family: 'Oswald', sans-serif; font-size: 52px; line-height: 1; letter-spacing: 0.02em; }
h1 span { color: var(--blade); }
.hero p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--soft); }
@media (max-width: 640px) { h1 { font-size: 40px; } .hero img { width: 96px; height: 120px; } }

.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .modes { grid-template-columns: minmax(0, 1fr); } }
.mode, .next { min-height: 56px; padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: 18px; border: 1px solid var(--line); background: var(--inset); color: var(--text); }
.mode small { display: block; font-size: 13px; font-weight: 500; opacity: .8; }
.mode.primary, .next { background: var(--blade); border-color: var(--blade); color: var(--bg); }
.mode:hover { border-color: var(--blade); }
.notes { display: flex; flex-direction: column; gap: 6px; }
.notes p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.notes #records { color: var(--text); font-weight: 600; }

.wait { margin: 0; padding: 60px 0; text-align: center; color: var(--soft); }
#q-body { display: flex; flex-direction: column; gap: 16px; }
.q-top { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; }
.q-no { font-family: 'Oswald', sans-serif; font-size: 24px; letter-spacing: 0.02em; }
.q-score { margin-left: auto; }
.q-score b { color: var(--text); }
.timer-bg { fill: none; stroke: #2A323D; stroke-width: 5; }
.timer-fg { fill: none; stroke: var(--blade); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 150.8; transform: rotate(-90deg); transform-origin: 28px 28px; transition: stroke-dashoffset .25s linear; }
.timer-fg.low { stroke: var(--dn); }
.timer text { font: 600 16px var(--mono); fill: var(--text); }

.chart-box { min-height: 120px; }
.g-chart { display: block; width: 100%; height: auto; border-radius: 12px; background: #12161D; }
.g-grid { stroke: #1F2630; stroke-width: 1; }
.g-axis { font: 500 11px var(--mono); fill: #8A94A3; }
.g-ma { fill: none; stroke: #5B8DEF; stroke-width: 1.8; }
.g-chart .wick { stroke-width: 1.2; }
.g-chart .wick.up { stroke: var(--up); }
.g-chart .wick.dn { stroke: var(--dn); }
.g-chart .body.up { fill: var(--up); }
.g-chart .body.dn { fill: var(--dn); }
.g-chart .after { opacity: .45; }
.g-slot { fill: none; stroke: var(--blade); stroke-width: 1.5; stroke-dasharray: 4 4; }
.g-q { font: 700 20px 'Oswald', sans-serif; fill: var(--blade); }
.g-hit { fill: var(--blade); opacity: .1; }

.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ans { min-height: 64px; border-radius: 14px; border: 0; font-weight: 700; font-size: 22px; color: var(--bg); }
.ans.up { background: var(--up); }
.ans.dn { background: var(--dn); }
.ans:hover { filter: brightness(1.08); }

.result { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.result img { flex: 0 0 auto; animation: pop .5s ease-out; }
.r-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
#r-title { font-family: 'Oswald', sans-serif; font-size: 34px; letter-spacing: 0.02em; }
#r-quote { font-size: 15px; color: var(--soft); }
.r-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-left: auto; }
#r-move { font-size: 24px; }
.next { font-size: 16px; min-height: 48px; }
@keyframes pop { from { transform: translateY(10px) scale(.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .result img { animation: none; } .timer-fg { transition: none; } }

.rank { font-family: 'Oswald', sans-serif; font-size: 40px; line-height: 1; color: var(--blade); letter-spacing: 0.02em; }
.big { font-size: 30px; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 480px) { .stats { grid-template-columns: minmax(0, 1fr); } }
.stats div { background: var(--inset); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.stats span { font-size: 13px; color: var(--muted); }
.stats b { font-size: 22px; }
.verdict { margin: 0; font-size: 16px; color: var(--soft); }
.share { margin: 0; background: var(--bg); border-radius: 12px; padding: 14px 16px; font: 500 15px/1.7 var(--mono); color: var(--soft); white-space: pre-wrap; word-break: break-word; }

.live { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--soft); }
.live b, .live-q b { font-family: var(--mono); color: var(--blade); }
.live-q { display: inline-flex; align-items: center; gap: 6px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dn); animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.invite { display: flex; gap: 16px; align-items: flex-start; background: #12161D; border: 2px dashed #2F5A4C; border-radius: 16px; padding: 16px 18px; }
.invite img { flex: 0 0 auto; }
.invite-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.invite-text b { font-size: 19px; color: var(--blade); }
.invite-text p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--soft); }
.invite-preview { font-size: 14px !important; color: var(--muted) !important; font-style: italic; }
.invite-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.invite-actions button { font-size: 16px; min-height: 48px; }
@media (max-width: 480px) { .invite img { display: none; } }
.challenged { margin: 0; background: #14352C; border: 1px solid var(--blade); border-radius: 12px; padding: 12px 16px; font-size: 16px; font-weight: 600; color: var(--text); }

.foot { margin: 0; font-size: 13px; line-height: 1.5; color: #8A94A3; }