@font-face {
  font-family: RaceSans;
  src: url('../assets/css/fonts/NanumSquareR.woff') format('woff');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: RaceSans;
  src: url('../assets/css/fonts/NanumSquareB.woff') format('woff');
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f8f7f2;
  --ink: #292d2a;
  --muted: #6c706a;
  --line: #dedfd7;
  --sage: #465646;
  --surface: #fffefa;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px/1.65 RaceSans, Arial, sans-serif;
  word-break: keep-all;
}
button, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, summary { cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
a { color: inherit; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, summary:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 4px;
}
h1, h2, h3, strong { font-weight: 700; }
.top, main, footer { max-width: 1100px; margin: auto; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 700; }
.brand img { object-fit: contain; }
.settings { display: flex; align-items: center; gap: 8px; }
main { padding: 8px 24px 40px; }
.intro { margin: 12px 0 28px; }
.intro h1 { margin: 0 0 10px; font-size: 32px; line-height: 1.3; letter-spacing: -.025em; }
.intro > p:last-child { margin: 0; color: var(--muted); font-size: 15px; }
.eyebrow { margin: 0 0 6px; color: var(--muted); font-size: 12px; font-weight: 400; }
.mobile { display: none; }
.game-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.entry { padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.slip-heading { margin-bottom: 16px; }
.slip-heading h2 { margin: 0; font-size: 18px; }
.entry label { display: block; margin: 0 0 8px; font-size: 13px; }
.entry textarea { width: 100%; min-height: 130px; resize: vertical; padding: 10px 12px; border: 1px solid #c8ccc3; border-radius: 4px; background: white; color: var(--ink); line-height: 1.85; }
.entry-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 6px; color: var(--muted); font-size: 11px; }
.quiet, .primary, .secondary, .kakao { border: 1px solid var(--line); border-radius: 5px; line-height: 1.5; font-weight: 700; }
.quiet { padding: 7px 10px; background: transparent; font-size: 12px; color: var(--muted); }
.quiet[aria-pressed=true] { color: var(--ink); border-color: #a6b09f; }
.primary, .secondary, .kakao { padding: 12px 18px; font-size: 14px; }
.primary { background: #354537; border-color: #354537; color: white; }
.primary:hover { background: #29392b; }
.secondary { background: var(--surface); color: var(--ink); }
.secondary:hover, .quiet:hover:not(:disabled) { background: #ecefe7; }
.kakao { background: #fee500; border-color: #fee500; color: #29241e; }
.start { display: flex; justify-content: space-between; width: 100%; margin-top: 18px; }
.text-button { padding: 6px 0; border: 0; background: transparent; color: var(--sage); font-size: 13px; text-decoration: underline; text-underline-offset: 4px; }
.fine { margin: 12px 0 0; color: var(--muted); font-size: 12px; }
.error { margin: 8px 0; color: #a33427; font-size: 13px; }
.error:empty, .share-status:empty { display: none; }
.stadium { min-width: 0; overflow: hidden; border: 1px solid #c9d0c2; border-radius: 8px; background: #edf0e7; }
.scoreboard { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; }
.scoreboard h2 { margin: 0; font-size: 18px; }
.scoreboard output { white-space: nowrap; font: 400 22px ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.scoreboard output span { margin-left: 4px; color: var(--muted); font: 12px RaceSans, sans-serif; }
.board-tools { display: flex; align-items: center; gap: 16px; }
.board-tools .quiet { white-space: nowrap; }
.track-wrap { position: relative; overflow: hidden; background: #c56953; }
.track-wrap > img { display: block; width: 100%; height: auto; aspect-ratio: 1.91; object-fit: cover; }
.track-wrap canvas { display: block; width: 100%; }
#countdown { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); pointer-events: none; }
.commentary { min-height: 48px; margin: 0; padding: 12px 20px; color: #42533f; font-size: 13px; overflow-wrap: anywhere; }
.race-controls { display: flex; justify-content: space-between; align-items: center; padding: 0 20px 14px; }
.result { max-width: 880px; margin: 36px auto 0; padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; scroll-margin-top: 20px; }
.champion { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 24px; align-items: center; padding: 28px 32px; background: #e9ede4; }
.champion h2 { margin: 8px 0; font-size: 30px; line-height: 1.35; overflow-wrap: anywhere; }
.champion #winner-line { margin: 0; color: var(--muted); font-size: 14px; }
.winner-record { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin-top: 18px; }
.winner-record strong { font-size: 25px; font-variant-numeric: tabular-nums; }
.winner-record > span { color: var(--muted); font-size: 12px; }
.champion-portrait { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 16px; }
.champion-portrait img { width: 150px; height: 150px; object-fit: contain; }
.crown { position: absolute; top: -3px; font-size: 30px; line-height: 1; transform: rotate(-9deg); }
.champion-seal { margin-top: 0; color: var(--sage); font-size: 12px; }
.finish-summary { margin: 22px 28px 0; text-align: center; color: var(--muted); font-size: 12px; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 10px; margin: 24px 28px 30px; border-bottom: 1px solid #c8ccc2; }
.podium > div { flex: 1; max-width: 220px; min-width: 0; text-align: center; }
.podium img { width: 92px; height: 88px; max-width: 100%; object-fit: contain; }
.podium .gold img { width: 110px; height: 106px; }
.podium .step { min-height: 98px; padding: 16px 8px 12px; border: 1px solid #d4dacd; border-bottom: 0; border-radius: 4px 4px 0 0; background: #f0f2eb; }
.podium .gold .step { min-height: 128px; padding-top: 20px; background: #eee3c7; border-color: #d4c7a6; }
.podium .bronze .step { min-height: 82px; background: #f0e8de; border-color: #ded3c5; }
.podium strong { display: block; font-size: 15px; overflow-wrap: anywhere; }
.podium span { display: block; margin-top: 3px; font-size: 17px; font-weight: 700; }
.podium small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.ranking-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 28px; }
.ranking-heading h3 { margin: 0 0 10px; font-size: 15px; }
.ranking-heading > span { color: var(--muted); font-size: 11px; }
.ranking { list-style: none; margin: 0 28px 24px; padding: 0; border-top: 1px solid var(--line); }
.ranking li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--line); }
.ranking .place { font-size: 17px; font-weight: 700; color: var(--sage); }
.ranking strong { display: block; overflow-wrap: anywhere; }
.ranking small { display: block; color: var(--muted); font-size: 12px; }
.ranking time { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.video-panel { margin: 24px 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.video-panel h3 { margin: 0 0 8px; font-size: 18px; }
.video-panel p { margin-top: 8px; }
.video-panel video { display: block; width: 100%; max-width: 540px; max-height: 500px; margin: 18px auto; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; }
.video-actions, .share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.video-actions button, .share-actions button { flex: 1; min-width: 140px; }
.link-options { margin: 16px 28px; color: var(--muted); font-size: 13px; }
.link-options summary { padding: 8px 0; }
.link-options #share { margin-top: 12px; }
.share-status { margin: 8px 0; font-size: 13px; }
#share textarea { width: 100%; height: 90px; padding: 8px; word-break: break-all; }
.again { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 24px 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.guide { max-width: 760px; margin: 48px auto 0; color: var(--muted); font-size: 14px; }
.guide h2 { color: var(--ink); font-size: 17px; }
.guide details { padding: 14px 0; border-top: 1px solid var(--line); }
.guide summary { color: var(--ink); font-weight: 700; }
.guide details p { padding-left: 18px; }
.ad-zone { max-width: 970px; margin: 36px auto 0; min-height: 120px; }
.ad-zone small { display: block; margin-bottom: 8px; text-align: center; color: var(--muted); font-size: 10px; }
.ad-zone:has(ins[data-ad-status=unfilled]) { display: none; }
footer { display: flex; justify-content: space-between; padding: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
body.playing .entry { opacity: .7; }
body.result-only .game-layout, body.result-only .intro { display: none; }
body.result-only .result { margin-top: 12px; }
body.race-wide main { max-width: 1600px; }
body.race-wide .game-layout { grid-template-columns: 1fr; }
body.race-wide .entry { max-width: 400px; }
body.race-wide.playing .entry { display: none; }
body.race-wide .scoreboard { padding: 20px 24px; }
body.race-wide .scoreboard h2 { font-size: 22px; }
.stadium:fullscreen { width: 100%; height: 100%; padding: 16px clamp(0px, 3vw, 64px); overflow: auto; border: 0; border-radius: 0; background: #edf0e7; }
.stadium:fullscreen .track-wrap { border-radius: 4px; }
.stadium:fullscreen .scoreboard { position: sticky; top: -16px; z-index: 2; background: #edf0e7; }
.stadium:fullscreen .race-controls { position: sticky; bottom: -16px; padding-top: 12px; background: #edf0e7; }
.stadium:fullscreen::backdrop { background: #edf0e7; }

@media (max-width: 700px) {
  .top { padding: 16px 18px; }
  .settings { gap: 6px; }
  main { padding: 8px 18px 32px; }
  .intro { margin: 8px 0 24px; }
  .intro h1 { font-size: 28px; }
  .intro > p:last-child { font-size: 14px; }
  .mobile { display: block; }
  .game-layout { grid-template-columns: 1fr; gap: 20px; }
  .entry { padding: 18px; }
  .entry textarea { min-height: 94px; height: 112px; }
  .scoreboard { padding: 14px; }
  .scoreboard h2 { font-size: 16px; }
  .scoreboard output { font-size: 20px; }
  .board-tools { flex-direction: column; align-items: flex-end; gap: 8px; }
  .board-tools .quiet { padding: 4px 8px; font-size: 11px; }
  .commentary { padding: 10px 14px; font-size: 12px; }
  .race-controls { padding: 0 14px 12px; }
  .result { margin-top: 24px; }
  .champion { grid-template-columns: minmax(0, 1fr) 104px; gap: 10px; padding: 24px 18px; }
  .champion h2 { font-size: 24px; }
  .champion #winner-line { font-size: 12px; }
  .winner-record { display: block; margin-top: 14px; }
  .winner-record strong { display: block; font-size: 23px; }
  .winner-record > span { font-size: 11px; }
  .champion-portrait img { width: 104px; height: 110px; }
  .crown { top: 0; font-size: 24px; }
  .champion-seal { font-size: 10px; }
  .finish-summary { margin: 20px 16px 0; }
  .podium { margin: 20px 16px 24px; gap: 6px; }
  .podium img { width: 72px; height: 68px; }
  .podium .gold img { width: 84px; height: 84px; }
  .podium strong { font-size: 13px; }
  .podium .step { padding: 12px 5px; }
  .podium .gold .step { min-height: 125px; padding-top: 16px; }
  .podium .bronze .step { min-height: 82px; }
  .podium span { font-size: 16px; }
  .podium small { font-size: 11px; }
  .ranking-heading, .ranking, .video-panel, .link-options { margin-left: 16px; margin-right: 16px; }
  .ranking li { gap: 8px; }
  .again { flex-wrap: wrap; margin: 22px 16px; }
  .again .secondary { width: 100%; }
  .video-actions button, .share-actions button { min-width: 120px; padding: 11px 10px; }
  body.playing .entry { display: none; }
  body.race-wide .scoreboard { padding: 14px; }
  body.race-wide .scoreboard h2 { font-size: 18px; }
  .guide { margin-top: 32px; }
  .guide summary { font-size: 13px; }
  footer { padding: 20px 18px; }
  .result-only main { padding-top: 0; }
}