:root {
  --paper: #e5ebed;
  --surface: #fbfcfc;
  --wash: #edf1f2;
  --ink: #223036;
  --muted: #5c6b71;
  --line: #c4cfd1;
  --accent: #7a2e2a;
  --accent-hover: #63231f;
  --accent-on-dark: #8d413a;
  --page-ink: #223036;
  --page-muted: #56676e;
  --page-line: #aebbc0;
  --mild: #5d806a;
  --medium: #9b7128;
  --hot: #a3483d;
  --mild-bright: #5d806a;
  --medium-bright: #9b7128;
  --hot-bright: #a3483d;
  --shadow: 0 12px 26px rgb(34 48 54 / 12%);
  --hero-glow: rgb(150 94 73 / 15%);
  --texture-line: rgb(34 48 54 / 3%);
  --brand-surface: rgb(251 252 252 / 84%);
  --brand-shadow: 0 10px 24px rgb(34 48 54 / 10%);
  --hero-action-surface: rgb(251 252 252 / 74%);
  --hero-card-border: #8a989b;
  --hero-card-surface: linear-gradient(145deg, #fbfcfc, #e9eff0 70%);
  --hero-card-shadow: 0 8px 18px rgb(34 48 54 / 18%);
  --hero-card-inset: rgb(86 103 110 / 32%);
  --hero-card-mark: rgb(86 103 110 / 56%);
  --hero-card-ink: #223036;
  --bento-surface: linear-gradient(145deg, #fbfcfc, #eef2f3);
  --bento-border: #c4cfd1;
  --bento-shadow: inset 0 1px rgb(255 255 255 / 88%), 0 7px 16px rgb(34 48 54 / 10%);
  --steps-surface: rgb(251 252 252 / 94%);
  --mini-card-border: #98a6a9;
  --mini-card-surface: linear-gradient(145deg, #fbfcfc, #e5ebed);
  --mini-card-shadow: 0 8px 14px rgb(34 48 54 / 16%);
  --mini-card-inset: rgb(86 103 110 / 34%);
  --chosen-card-surface: linear-gradient(145deg, #dfbe67, #b88736);
  --mild-level-border: rgb(93 128 106 / 55%);
  --mild-level-surface: radial-gradient(circle at 20% 20%, rgb(93 128 106 / 16%), transparent 48%), #e8f0eb;
  --mild-level-ink: #294738;
  --medium-level-border: rgb(155 113 40 / 56%);
  --medium-level-surface: radial-gradient(circle at 20% 20%, rgb(155 113 40 / 16%), transparent 48%), #f4eddd;
  --medium-level-ink: #5f4314;
  --hot-level-border: rgb(163 72 61 / 58%);
  --hot-level-surface: radial-gradient(circle at 78% 28%, rgb(163 72 61 / 17%), transparent 42%), linear-gradient(135deg, #f4e1dd, #edcfca);
  --hot-level-ink: #652b26;
  color: var(--page-ink);
  background: var(--paper);
  font-family: "Work Sans", Arial, sans-serif;
  font-synthesis: none;
}

:root[data-theme="dark"] {
  --paper: #141a1d;
  --surface: #222a2e;
  --wash: #2b353a;
  --ink: #f4f0e8;
  --muted: #c1c8c6;
  --line: #3e4a4e;
  --accent: #b34a3e;
  --accent-hover: #d46151;
  --accent-on-dark: #dfad9f;
  --page-ink: #f4f0e8;
  --page-muted: #b8c2c5;
  --page-line: #536068;
  --mild: #78ae92;
  --medium: #d6a948;
  --hot: #e06a54;
  --mild-bright: #a8d0b7;
  --medium-bright: #edca78;
  --hot-bright: #f09a87;
  --shadow: 0 14px 30px rgb(0 0 0 / 32%);
  --hero-glow: rgb(125 71 51 / 20%);
  --texture-line: rgb(255 255 255 / 1.5%);
  --brand-surface: rgb(34 42 46 / 88%);
  --brand-shadow: 0 10px 24px rgb(0 0 0 / 22%);
  --hero-action-surface: rgb(34 42 46 / 72%);
  --hero-card-border: #d6c4ad;
  --hero-card-surface: linear-gradient(145deg, #384348, #20282c 70%);
  --hero-card-shadow: 0 8px 18px rgb(0 0 0 / 34%);
  --hero-card-inset: rgb(214 196 173 / 45%);
  --hero-card-mark: rgb(244 240 232 / 55%);
  --hero-card-ink: #f4f0e8;
  --bento-surface: linear-gradient(145deg, #293338, #20282c);
  --bento-border: var(--page-line);
  --bento-shadow: inset 0 1px rgb(255 255 255 / 4%), 0 7px 16px rgb(0 0 0 / 20%);
  --steps-surface: rgb(34 42 46 / 94%);
  --mini-card-border: #d6c4ad;
  --mini-card-surface: linear-gradient(145deg, #8d5448, #57322e);
  --mini-card-shadow: 0 8px 14px rgb(0 0 0 / 26%);
  --mini-card-inset: rgb(244 240 232 / 45%);
  --chosen-card-surface: linear-gradient(145deg, #d4a541, #9b7025);
  --mild-level-border: rgb(120 174 146 / 72%);
  --mild-level-surface: radial-gradient(circle at 20% 20%, rgb(168 208 183 / 28%), transparent 48%), #24423c;
  --mild-level-ink: #e4f0e9;
  --medium-level-border: rgb(214 169 72 / 75%);
  --medium-level-surface: radial-gradient(circle at 20% 20%, rgb(237 202 120 / 26%), transparent 48%), #4b3a20;
  --medium-level-ink: #f7edce;
  --hot-level-border: rgb(224 106 84 / 82%);
  --hot-level-surface: radial-gradient(circle at 78% 28%, rgb(240 154 135 / 34%), transparent 42%), linear-gradient(135deg, #6e2825, #351c20);
  --hot-level-ink: #fff1e9;
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(48rem 28rem at 50% 8%, var(--hero-glow), transparent 68%),
    repeating-linear-gradient(0deg, var(--texture-line) 0 1px, transparent 1px 5px),
    var(--paper);
}

button, input, textarea { font: inherit; }
button { cursor: pointer; }

.shell { width: 100%; padding: 18px 0 56px; }

.brand {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--brand-surface);
  padding: 14px 20px;
  box-shadow: var(--brand-shadow);
}
.brand-actions { display: flex; align-items: end; flex-direction: column; gap: 7px; }
.theme-toggle {
  border: 1px solid var(--page-line);
  border-radius: 999px;
  background: transparent;
  color: var(--page-ink);
  padding: 5px 9px;
  font-size: .72rem;
  font-weight: 600;
}
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--accent); color: var(--accent-on-dark); }

.brand a { display: flex; align-items: center; gap: 10px; color: var(--page-ink); text-decoration: none; }
.brand img { display: block; width: 62px; height: 64px; object-fit: contain; }
.brand-name { max-width: 124px; font: 600 1.35rem/.95 Spectral, Georgia, serif; letter-spacing: -.035em; }
.brand-name i { color: var(--accent-on-dark); font-style: italic; font-weight: 500; }
.brand-tagline, .section-kicker, .sample-card span, .progress-item span, .swipe-cue {
  font: 600 .7rem/1.4 "Work Sans", Arial, sans-serif;
  letter-spacing: .02em;
}
.brand-tagline { color: var(--page-muted); text-align: right; }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: Spectral, Georgia, serif; font-weight: 600; letter-spacing: -.035em; }
h1 { font-size: clamp(2.7rem, 12vw, 4.6rem); line-height: .98; }
h2 { font-size: clamp(1.85rem, 8vw, 2.8rem); line-height: 1; }
h3 { font-size: 1.45rem; line-height: 1.05; }

.section-kicker { color: var(--accent); margin-bottom: 12px; }
.lede { max-width: 34rem; color: var(--muted); font-size: 1.04rem; line-height: 1.65; }
.card-copy { color: var(--muted); font-size: .95rem; line-height: 1.55; }
.error { color: var(--hot); font-size: .84rem; line-height: 1.4; }

.paper-card {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.landing-intro {
  display: grid;
  gap: 26px;
  padding: 64px 24px 44px;
}
.hero-copy h1 { max-width: 8.5em; }
.landing-intro .lede { margin-top: 22px; color: var(--page-muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 25px; }
.hero-action { min-height: 46px; text-decoration: none; }
.hero-action.secondary { border-color: var(--page-line); background: var(--hero-action-surface); color: var(--page-ink); }
.hero-deck { position: relative; width: min(100%, 430px); height: 170px; margin: 0 auto; }
.hero-card {
  position: absolute;
  bottom: 0;
  left: 50%;
  display: grid;
  width: 92px;
  height: 138px;
  place-items: center;
  border: 2px solid var(--hero-card-border);
  border-radius: 7px;
  background: var(--hero-card-surface);
  box-shadow: var(--hero-card-shadow);
  transform-origin: 50% 110%;
}
.hero-card::after { position: absolute; inset: 7px; border: 1px solid var(--hero-card-inset); border-radius: 4px; content: ""; }
.hero-card i { position: relative; z-index: 1; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid var(--hero-card-mark); border-radius: 50%; color: var(--hero-card-ink); font: 500 1.1rem/1 Spectral, Georgia, serif; }
.hero-card:nth-child(1) { margin-left: -178px; transform: rotate(-33deg); }
.hero-card:nth-child(2) { margin-left: -94px; transform: rotate(-17deg); }
.hero-card:nth-child(3) { margin-left: -46px; transform: rotate(-4deg); }
.hero-card:nth-child(4) { margin-left: 12px; transform: rotate(13deg); }
.hero-card:nth-child(5) { margin-left: 88px; transform: rotate(29deg); }
.hero-card.mild { border-color: var(--mild); }
.hero-card.medium { border-color: var(--medium); }
.hero-card.hot { border-color: var(--hot); }

.setup-card, .arrival-card, .message-card, .briefing-card, .waiting-card { margin: 0 16px; padding: 26px 22px 24px; }
.setup-card h2, .arrival-card h1, .message-card h1, .briefing-card h1, .waiting-card h1 { max-width: 11em; }
.setup-card .card-copy, .arrival-card .lede, .message-card .lede, .briefing-card .lede, .waiting-card .lede { margin-top: 14px; }
.setup-card { margin-top: 56px; }

.setup-form { display: grid; gap: 15px; margin-top: 25px; }
.field { display: grid; gap: 7px; color: var(--ink); font-size: .78rem; font-weight: 600; }
input, textarea {
  width: 100%;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 2px;
  outline-color: var(--accent);
  background: var(--surface);
  color: var(--ink);
  padding: 12px 13px;
}
textarea { min-height: 150px; resize: vertical; line-height: 1.5; }

.play-mode-choice { display: grid; gap: 10px; margin: 2px 0 4px; padding: 0; border: 0; }
.play-mode-choice legend { padding: 0; color: var(--ink); font-size: .78rem; font-weight: 600; }
.play-mode-option { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); background: var(--surface); padding: 13px; color: var(--ink); cursor: pointer; }
.play-mode-option input[type="radio"] { flex: 0 0 auto; width: 18px; min-height: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent); }
.mode-icon { flex: 0 0 auto; width: 42px; height: 42px; object-fit: contain; transition: transform .15s ease; }
.play-mode-copy { display: grid; gap: 3px; }
.play-mode-copy strong { font: 600 1.15rem/1.05 Spectral, Georgia, serif; letter-spacing: -.025em; }
.play-mode-copy small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.play-mode-option:has(input:checked) { border-color: var(--accent); background: var(--wash); box-shadow: 0 4px 12px rgb(122 46 42 / 10%); }
.play-mode-option:has(input:checked) .mode-icon { transform: scale(1.03); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 12px 17px;
  background: var(--accent);
  color: var(--surface);
  font-weight: 600;
  text-align: center;
  transition: background .15s ease, box-shadow .15s ease;
}
.button:hover { background: var(--accent-hover); box-shadow: 0 4px 12px rgb(41 37 34 / 12%); }
.button:disabled { cursor: wait; opacity: .58; }
.button.pepper { border-color: var(--accent); background: var(--accent); }
.button.secondary { border-color: var(--accent); background: transparent; color: var(--accent); }
.personal-message-actions { display: grid; gap: 10px; }
.farewell-action { display: inline-flex; align-items: center; justify-content: center; margin-top: 25px; text-decoration: none; }

.join-with-code { margin-top: 27px; padding-top: 22px; border-top: 1px dashed var(--line); }
.code-form { display: grid; gap: 12px; margin-top: 14px; }

.question-preview { margin-top: 58px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 0 24px 18px; }
.section-heading h2 { max-width: 10em; }
.swipe-cue { flex: 0 0 auto; color: var(--page-muted); padding-bottom: 4px; }
.question-rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  padding: 0 24px 17px;
  scroll-padding-inline: 24px;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
}
.sample-card {
  display: flex;
  flex: 0 0 min(82vw, 340px);
  min-height: 250px;
  flex-direction: column;
  justify-content: space-between;
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  padding: 20px;
}
.sample-card span { color: var(--muted); }
.sample-card p { max-width: 10.5em; font: 600 clamp(1.75rem, 8vw, 2.35rem)/1.08 Spectral, Georgia, serif; letter-spacing: -.04em; }
.sample-card.mild { border-top: 4px solid var(--mild); }
.sample-card.medium { border-top: 4px solid var(--medium); }
.sample-card.hot { border-top: 4px solid var(--hot); }

.play-steps {
  margin: 14px 16px 0;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--steps-surface);
  box-shadow: var(--shadow);
}
.play-steps h2 { margin-bottom: 20px; }
.bento-grid { display: grid; gap: 12px; }
.bento-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--bento-border);
  border-radius: 7px;
  background: var(--bento-surface);
  box-shadow: var(--bento-shadow);
}
.bento-card h3 { font-size: 1.6rem; }
.bento-card p { margin-top: 8px; color: var(--page-muted); font-size: .92rem; line-height: 1.5; }
.step-card { display: grid; min-height: 172px; gap: 12px; padding: 20px; }
.draw-visual, .choose-visual { position: relative; min-height: 82px; }
.mini-card, .chosen-card {
  position: absolute;
  display: block;
  width: 62px;
  height: 88px;
  border: 2px solid var(--mini-card-border);
  border-radius: 5px;
  background: var(--mini-card-surface);
  box-shadow: var(--mini-card-shadow);
}
.mini-card::after { position: absolute; inset: 6px; border: 1px solid var(--mini-card-inset); border-radius: 2px; content: ""; }
.draw-visual .mini-card:first-child { left: 14%; transform: rotate(-12deg); }
.draw-visual .mini-card:last-child { left: 44%; transform: rotate(11deg); }
.choose-visual .mini-card { left: 15%; transform: rotate(-12deg); filter: brightness(.65); }
.chosen-card { right: 13%; display: grid; place-items: center; border-color: var(--medium); background: var(--chosen-card-surface); transform: rotate(9deg); }
.chosen-card img { width: 46px; height: 46px; object-fit: contain; }
.heat-step { padding: 20px; }
.heat-heading { max-width: 30rem; }
.heat-levels { display: grid; gap: 9px; margin-top: 18px; }
.heat-level {
  position: relative;
  display: grid;
  min-height: 130px;
  grid-template-columns: 78px 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 10px;
  align-items: center;
  overflow: hidden;
  border: 1px solid;
  border-radius: 6px;
  padding: 14px;
}
.heat-level img { grid-row: 1 / -1; width: 72px; height: 72px; object-fit: contain; }
.heat-level strong { font: 600 1.08rem/1 Spectral, Georgia, serif; }
.heat-level span { color: inherit; font-size: .8rem; line-height: 1.4; }
.heat-level.mild { border-color: var(--mild-level-border); background: var(--mild-level-surface); color: var(--mild-level-ink); }
.heat-level.medium { border-color: var(--medium-level-border); background: var(--medium-level-surface); color: var(--medium-level-ink); }
.heat-level.hot { border-color: var(--hot-level-border); background: var(--hot-level-surface); color: var(--hot-level-ink); }
.heat-level.hot::after { position: absolute; inset: 0; background-image: radial-gradient(circle, rgb(255 197 109 / 74%) 0 1px, transparent 2px), radial-gradient(circle, rgb(255 119 83 / 64%) 0 1px, transparent 2px); background-position: 12% 25%, 84% 70%; background-size: 46px 56px, 64px 62px; content: ""; opacity: .72; pointer-events: none; }
.heat-level.hot > * { position: relative; z-index: 1; }

.landing-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 62px; padding: 30px 24px; background: var(--paper); color: var(--page-ink); }
.landing-footer > p { font: 600 1.25rem/1 Spectral, Georgia, serif; letter-spacing: -.03em; }
.footer-links { display: flex; margin: 0; padding: 0; list-style: none; }
.footer-links a { color: var(--accent-on-dark); font-size: .9rem; font-weight: 600; text-decoration: none; }
.footer-links a:hover, .footer-links a:focus-visible { color: var(--page-ink); text-decoration: underline; text-underline-offset: 3px; }

.arrival-card, .message-card, .waiting-card { margin-top: 56px; }

.game-table { padding-top: 38px; }
.game-header { padding: 0 24px; }
.game-header h1 { font-size: clamp(2.5rem, 11vw, 4rem); }
.turn-status { display: inline-block; margin-top: 16px; color: var(--accent-on-dark); font: 500 .72rem/1 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.turn-status::before { content: "●"; margin-right: 7px; color: var(--hot-bright); }
.progress-strip { display: flex; gap: 17px; margin-top: 28px; padding-top: 15px; border-top: 1px solid var(--page-line); }
.progress-item { min-width: 0; }
.progress-item span { display: block; color: var(--page-muted); }
.progress-item strong { display: block; margin-top: 4px; font: 600 1.5rem/1 Spectral, Georgia, serif; }
.progress-item small { color: var(--page-muted); font: 500 .8rem/1 "Work Sans", Arial, sans-serif; }
.progress-item.mild strong { color: var(--mild-bright); }
.progress-item.medium strong { color: var(--medium-bright); }
.progress-item.hot strong { color: var(--hot-bright); }

.briefing-steps { display: grid; gap: 0; margin: 24px 0; padding: 0; list-style: none; }
.briefing-steps li { display: grid; gap: 4px; padding: 14px 0; border-top: 1px solid var(--line); }
.briefing-steps strong { font: 600 1.15rem/1.08 Spectral, Georgia, serif; letter-spacing: -.03em; }
.briefing-steps span { color: var(--muted); font-size: .9rem; line-height: 1.5; }

.card-stage { margin: 28px 16px 0; }
.choice-list { position: relative; display: grid; gap: 14px; }
.question-card {
  position: relative;
  width: 100%;
  min-height: 260px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  padding: 25px 22px;
  text-align: left;
  box-shadow: var(--shadow);
  transition: background .16s ease, box-shadow .16s ease;
}
.question-card:hover, .question-card.selected { background: var(--wash); box-shadow: 0 10px 26px rgb(41 37 34 / 11%); }
.question-card.selected { outline: 2px solid var(--accent); outline-offset: 2px; }
.card-number { position: relative; z-index: 1; display: block; color: var(--accent); font: 500 .65rem "IBM Plex Mono", monospace; letter-spacing: .09em; text-transform: uppercase; }
.question-card p { position: relative; z-index: 1; max-width: 13em; margin-top: 50px; font: 600 clamp(1.65rem, 8vw, 2.55rem)/1.08 Spectral, Georgia, serif; letter-spacing: -.045em; }
.or { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid var(--page-line); border-radius: 50%; background: var(--paper); color: var(--page-ink); font: 500 .7rem "IBM Plex Mono", monospace; transform: translate(-50%, -50%); }
.card-actions { margin-top: 18px; }
.card-actions .button { width: 100%; }
.answer-card { cursor: default; }
.answer-card:hover { background: var(--wash); transform: none; }

.draw-card { padding: 28px 22px; }
.draw-card .card-copy { margin: 13px 0 24px; }

.waiting-card { text-align: left; }
.waiting-card > h1 + .card-copy { margin-top: 16px; }
.spoken-code { margin: 24px 0; color: var(--ink); font: 500 clamp(1.15rem, 6vw, 1.6rem)/1.3 "IBM Plex Mono", monospace; letter-spacing: .04em; text-transform: lowercase; }
.qr-invite { display: grid; gap: 18px; margin: 22px 0; padding: 17px; border: 1px dashed var(--line); background: var(--wash); }
.qr-invite img { display: block; width: min(100%, 220px); height: auto; margin: 0 auto; border: 8px solid var(--surface); }
.qr-invite h2 { max-width: 9em; font-size: 1.75rem; }
.qr-invite .card-copy { margin-top: 10px; }
.link-box { display: grid; gap: 9px; }
.link-box input { font-size: .76rem; }

.message-state { margin: 56px 16px 0; }

@media (min-width: 768px) {
  .shell { width: min(100% - 80px, 1180px); margin: 0 auto; padding-top: 26px; }
  .brand { padding: 14px 20px; }
  .brand img { width: 72px; height: 74px; }

  .landing { display: block; }
  .landing-intro { width: min(100%, 900px); grid-template-columns: minmax(0, 1fr) minmax(300px, .8fr); align-items: end; gap: 42px; margin: 0 auto; padding: 88px 0 54px; }
  .landing-intro h1 { max-width: 8em; }
  .landing-intro .lede { max-width: 29rem; }
  .hero-deck { justify-self: end; margin: 0; }
  .play-steps { max-width: 900px; margin: 0 auto; padding: 34px; }
  .bento-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .step-card { grid-template-columns: 1fr 142px; align-items: center; min-height: 190px; }
  .heat-step { grid-column: 1 / -1; }
  .heat-levels { grid-template-columns: repeat(3, 1fr); }
  .heat-level { min-height: 188px; grid-template-columns: 1fr; grid-template-rows: 82px auto 1fr; text-align: center; }
  .heat-level img { grid-row: auto; width: 78px; height: 78px; justify-self: center; }
  .setup-card { width: min(100%, 680px); margin: 66px auto 0; padding: 34px; }
  .question-preview { margin-top: 72px; }
  .section-heading { width: min(100%, 900px); margin: 0 auto; padding: 0 0 22px; }
  .question-rail { justify-content: center; padding: 0 0 20px; gap: 20px; }
  .sample-card { flex-basis: min(31vw, 350px); min-height: 310px; padding: 26px; }
  .landing-footer { width: min(100%, 900px); margin: 86px auto 0; padding: 40px 4vw; }

  .arrival-card, .message-card, .briefing-card, .waiting-card { width: min(100% - 16vw, 680px); margin: 85px auto 0; padding: 45px; }
  .game-table { width: min(100%, 980px); margin: 0 auto; padding-top: 66px; }
  .game-header { display: grid; grid-template-columns: 1fr auto; gap: 24px; padding: 0; }
  .turn-status { align-self: start; margin-top: 29px; }
  .progress-strip { grid-column: 1 / -1; justify-content: flex-start; gap: 38px; }
  .card-stage { margin: 38px 0 0; }
  .choice-list { grid-template-columns: 1fr 1fr; gap: 22px; }
  .question-card { min-height: 380px; padding: 34px; }
  .question-card p { margin-top: 70px; }
  .card-actions { display: flex; justify-content: flex-end; }
  .card-actions .button { width: auto; min-width: 260px; }
  .draw-card { width: min(100%, 540px); margin-left: 8vw; padding: 38px; }
  .link-box { grid-template-columns: 1fr auto; align-items: center; }
  .qr-invite { grid-template-columns: 190px 1fr; align-items: center; gap: 24px; padding: 20px; }
  .qr-invite img { width: 190px; margin: 0; }
  .link-box .button { min-width: 128px; }
}