:root {
  color-scheme: light;
  --paper: #fafbff;
  --surface: #fff;
  --ink: #172741;
  --muted: #51627e;
  --soft: #eaf0ff;
  --edge: #d9e2f3;
  --table: #dce7ff;
  --cobalt: #2855d9;
  --danger: #b43943;
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}
* { box-sizing: border-box; }
body { margin: 0; }
.app-header { max-width: 940px; padding: 22px 24px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { color: var(--cobalt); font-size: 15px; font-weight: 800; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand-ball { font-size: 24px; }
#connection { color: var(--muted); font-size: 11px; text-align: right; }
main { max-width: 900px; margin: 12px auto; padding: 0 24px; }
h1, h2, p { margin: 0; }
h1 { font-size: 23px; line-height: 1.3; letter-spacing: -.7px; }
h2 { font-size: 16px; margin-bottom: 16px; }
p { color: var(--muted); }
button, input { font: inherit; }
button { min-height: 44px; border: 1px solid transparent; border-radius: 12px; padding: 11px 16px; cursor: pointer; background: var(--cobalt); color: white; font-size: 14px; font-weight: 750; }
button:hover { filter: brightness(.95); }
button:disabled { opacity: .45; cursor: default; }
button:focus-visible, a:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #8eacff; outline-offset: 3px; }
.secondary { color: var(--cobalt); background: var(--soft); border-color: var(--edge); }
.quiet { color: var(--muted); background: transparent; font-size: 12px; padding: 8px 10px; }
.full { width: 100%; margin-top: 10px; }
input { width: 100%; min-width: 0; border: 1px solid var(--edge); border-radius: 12px; padding: 12px 14px; background: var(--surface); color: var(--ink); font-size: 16px; }
input::placeholder { color: #7485a0; }
input:disabled { background: var(--soft); color: var(--muted); }
label { display: block; margin: 18px 0 8px; font-size: 13px; font-weight: 700; }
.small { color: var(--muted); font-size: 12px; }
.eyebrow { color: var(--cobalt); font-size: 11px; font-weight: 800; letter-spacing: 1px; }
.notice { position: sticky; top: 8px; z-index: 3; padding: 12px 16px; border: 1px solid #e6c4cc; border-radius: 12px; color: var(--danger); background: #fff1f3; margin-bottom: 12px; font-size: 13px; }
.hero { max-width: 420px; margin: 30px auto; padding: 30px; background: var(--surface); border: 1px solid var(--edge); border-radius: 28px; }
.hero-tokens { display: flex; gap: 8px; margin-bottom: 30px; }
.hero-tokens span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--soft); font-size: 24px; }
.hero h1 { font-size: 38px; margin: 10px 0 16px; }
.hero p { font-size: 14px; }
.hero form { margin-top: 24px; }
.hero #code { text-transform: uppercase; }
.hero #join { margin-top: 20px; }
.hero .hero-footnote { margin-top: 22px; font-size: 11px; text-align: center; }
.invite, .play-heading, .personal-status, .latest-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.invite { margin-bottom: 16px; font-size: 12px; color: var(--muted); }
.invite-code { display: flex; flex-direction: column; gap: 4px; }
.invite-actions { display: flex; align-items: center; gap: 4px; }
.invite strong { color: var(--ink); letter-spacing: 3px; font-size: 14px; }
.invite #copy { border: 1px solid var(--edge); }
.game-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.game-main { min-width: 0; }
.table-wrap { position: relative; height: 278px; border-radius: 100px 100px 28px 28px; background: var(--table); isolation: isolate; }
.table-center { position: absolute; inset: 105px calc(50% - 45px) auto; width: 90px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; }
.table-center strong { color: #3b557f; font-size: 12px; }
.table-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cobalt); margin-bottom: 3px; }
.players { position: absolute; inset: 0; }
.player { position: absolute; width: 90px; text-align: center; }
.player.north { top: 12px; left: calc(50% - 45px); }
.player.east { top: 102px; right: 8px; }
.player.south { bottom: 12px; left: calc(50% - 45px); }
.player.west { top: 102px; left: 8px; }
.player-face { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); margin: 0 auto 5px; font-size: 25px; box-shadow: 0 3px 12px #183a7010; }
.player-face .seat-number { position: absolute; top: -2px; right: -5px; display: grid; place-items: center; width: 18px; height: 18px; background: #f3f6ff; border: 1px solid #bdccef; border-radius: 50%; font-size: 10px; color: #3b557f; font-weight: 750; }
.player strong { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 12px; }
.player small { display: block; color: #435f89; font-size: 10px; margin-top: 2px; }
.player.active .player-face { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.player.active small { color: #1840b6; font-weight: 800; }
.player.ranked .player-face { background: #fff6dd; }
.player.gone .player-face { filter: grayscale(1); }
.player.gone strong, .player.gone small { color: #667791; }
.lobby-controls, .play-controls, .result { margin-top: 22px; }
.lobby-controls h1 { font-size: 21px; }
.lobby-controls p { margin: 8px 0 18px; font-size: 13px; }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1; width: 0; }
.actions { display: flex; gap: 8px; margin-top: 12px; }
.actions button { flex: 1; }
.play-heading { border-bottom: 1px solid var(--edge); padding-bottom: 14px; }
.play-heading h1 { font-size: 20px; }
.timer { font-size: 18px; font-weight: 800; color: var(--cobalt); white-space: nowrap; font-variant-numeric: tabular-nums; }
.timer.urgent { color: var(--danger); }
.instruction { font-size: 12px; margin: 10px 0 16px; }
.latest-heading { font-size: 12px; color: var(--muted); margin: 12px 0 10px; }
.latest-heading strong { color: var(--ink); font-size: 22px; letter-spacing: 4px; font-variant-numeric: tabular-nums; }
#latest-meta { font-size: 10px; }
.score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.score-tile { padding: 10px 5px; border-radius: 13px; background: var(--soft); text-align: center; min-width: 0; }
.score-tile small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 11px; }
.score-tile strong { display: block; color: var(--cobalt); font-size: 17px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.personal-status { font-size: 11px; color: var(--muted); margin: 17px 0 10px; }
#solved-progress { white-space: nowrap; }
#number { text-align: center; letter-spacing: 12px; font-size: 28px; padding: 10px; font-weight: 750; font-variant-numeric: tabular-nums; }
#number-form button { min-height: 46px; }
.next-turn { margin-top: 12px; }
.room-tools { background: var(--surface); border: 1px solid var(--edge); border-radius: 20px; padding: 0 18px 18px; min-width: 0; }
.tool-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--edge); margin-bottom: 18px; }
.tool-tabs button { flex: 1; min-width: 0; color: var(--muted); background: transparent; border-radius: 0; border-bottom: 2px solid transparent; padding: 14px 2px; font-size: 12px; }
.tool-tabs button[aria-selected="true"] { color: var(--cobalt); border-bottom-color: var(--cobalt); }
.unread { margin-left: 4px; display: inline-grid; place-items: center; background: var(--cobalt); color: #fff; min-width: 17px; height: 17px; border-radius: 20px; padding: 0 4px; font-size: 10px; }
.history { max-height: 520px; overflow-y: auto; }
.guess { padding: 12px 0; border-bottom: 1px solid var(--edge); }
.guess:first-child { padding-top: 0; }
.guess strong { font-size: 21px; letter-spacing: 4px; font-variant-numeric: tabular-nums; }
.guess small { font-size: 11px; color: var(--muted); margin-left: 10px; }
.guess p { font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
.events { padding-left: 20px; font-size: 12px; color: var(--muted); max-height: 400px; overflow-y: auto; }
.events li { padding: 0 0 12px 4px; }
.messages { height: 300px; overflow-y: auto; overflow-wrap: anywhere; margin-bottom: 16px; }
.messages p { margin: 0 0 16px; }
.messages strong { display: block; color: var(--cobalt); font-size: 11px; margin-bottom: 5px; }
.messages span { display: inline-block; color: var(--ink); background: var(--soft); padding: 9px 12px; border-radius: 4px 14px 14px; white-space: pre-wrap; font-size: 13px; max-width: 100%; }
.result h1 { margin-top: 8px; }
.result > p { margin: 8px 0 16px; font-size: 12px; }
#ranking p { padding: 12px; margin-bottom: 8px; background: var(--soft); border-radius: 12px; color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
#ranking p:first-child { background: #e2eaff; color: #1840b6; font-weight: 750; }
details { margin: 12px 0; }
summary { cursor: pointer; font-size: 13px; font-weight: 700; }
details .guess { margin: 12px 0; }
footer { text-align: center; color: var(--muted); font-size: 10px; padding: 24px 12px max(24px, env(safe-area-inset-bottom)); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }
@media (max-width: 640px) {
  .app-header { max-width: 420px; padding: 16px; gap: 8px; }
  .brand { font-size: 13px; gap: 6px; }
  .brand-ball { font-size: 21px; }
  #connection { font-size: 10px; max-width: 100px; }
  main { max-width: 420px; padding: 0 18px; margin-top: 0; }
  .hero { padding: 22px; margin: 18px 0; }
  .hero h1 { font-size: 34px; }
  .game-layout { display: block; }
  .room-tools { margin-top: 22px; padding: 0 0 14px; border: 0; background: transparent; border-radius: 0; }
  .tool-tabs { margin-bottom: 16px; gap: 8px; }
  .tool-tabs button { background: var(--soft); border-radius: 12px; margin-bottom: 10px; padding: 10px 3px; border-bottom: 0; }
  .tool-tabs button[aria-selected="true"] { background: var(--cobalt); color: white; }
  .tool-tabs button[aria-selected="true"] .unread { background: white; color: var(--cobalt); }
  .room-tools h2 { font-size: 14px; }
  .table-wrap { height: 266px; }
  .table-center { top: 102px; }
  .player.east, .player.west { top: 96px; }
  .player { width: 84px; }
  .player.north, .player.south { left: calc(50% - 42px); }
  .player.east { right: 5px; }
  .player.west { left: 5px; }
  .lobby-controls, .play-controls, .result { margin-top: 18px; }
  .play-heading h1 { font-size: 18px; }
  .messages { height: 230px; }
}
@media (prefers-reduced-motion: no-preference) {
  .player.entering .player-face { animation: turn-arrival .3s ease-out; }
  @keyframes turn-arrival { from { transform: scale(.9); } to { transform: scale(1); } }
}

/* Home rules: native modal dialog keeps background controls inert. */
.hero-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 30px; }
.hero-top .hero-tokens { gap: 6px; margin-bottom: 0; }
.hero-top .hero-tokens span { width: clamp(32px, 9vw, 44px); height: clamp(32px, 9vw, 44px); }
.rules-trigger { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; padding: 0; border: 1.5px solid var(--cobalt); border-radius: 50%; color: var(--cobalt); background: var(--surface); font-size: 24px; }
body.rules-open { overflow: hidden; }
.rules-dialog { width: min(560px, calc(100% - 32px)); max-height: min(84vh, 760px); max-height: min(84dvh, 760px); padding: 0; border: 1px solid var(--edge); border-radius: 24px; color: var(--ink); background: var(--surface); overflow: hidden; box-shadow: 0 20px 80px #10234830; }
.rules-dialog[open] { display: flex; flex-direction: column; }
.rules-dialog::backdrop { background: #14274688; }
.rules-header { display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; gap: 12px; padding: 20px 24px 16px; border-bottom: 1px solid var(--edge); }
.rules-header h2 { font-size: 22px; margin: 5px 0 0; letter-spacing: -.5px; }
.rules-header form { margin: 0; }
.rules-close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; color: var(--cobalt); background: var(--soft); font-size: 28px; font-weight: 400; }
.rules-body { padding: 20px 24px 24px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; font-size: 14px; }
.rules-body p { line-height: 1.7; }
.rules-body strong { color: var(--ink); }
.rules-section { margin-top: 24px; }
.rules-section h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; letter-spacing: -.3px; }
.rules-section h3 > span { display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; color: var(--cobalt); background: var(--soft); font-size: 11px; }
.rules-section p + p { margin-top: 10px; }
.rules-number-examples { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; font-size: 12px; }
.rules-number-examples > span { padding: 8px 10px; border-radius: 10px; background: var(--soft); color: var(--muted); }
.rules-scores { display: grid; gap: 12px; margin: 16px 0; }
.rules-scores > div { padding-left: 12px; border-left: 3px solid var(--table); }
.rules-scores dt { font-weight: 750; color: var(--cobalt); }
.rules-scores dd { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.rules-example { padding: 16px; border-radius: 14px; background: var(--soft); margin: 16px 0; color: var(--muted); font-size: 12px; }
.rules-example > div { display: flex; align-items: center; gap: 18px; margin: 8px 0; font-size: 22px; font-variant-numeric: tabular-nums; }
.rules-example > div strong:last-child { color: var(--cobalt); }
.rules-notes { border-top: 1px solid var(--edge); padding-top: 20px; }
.rules-notes ul { padding-left: 18px; margin-bottom: 0; color: var(--muted); font-size: 13px; }
.rules-notes li { margin-top: 10px; line-height: 1.7; }
@media (max-width: 640px) {
  .rules-header { padding: 16px 18px; }
  .rules-header h2 { font-size: 19px; }
  .rules-body { padding: 18px; font-size: 13px; }
  .rules-section h3 { font-size: 15px; }
}