:root {
  color-scheme: light;
  --background: #F7F9FD;
  --text: #15203A;
  --muted: #5B6F8C;
  --primary: #0962F4;
  --x: #0962F4;
  --o: #B47A00;
  --line: #61738C;
  --font: ui-rounded, "Arial Rounded MT Bold", "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
  font-family: var(--font);
  background: var(--background);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--background); color: var(--text); -webkit-font-smoothing: antialiased; }
body.is-active { color-scheme: dark; --background: #111A2C; --text: #F7F9FD; --muted: #B1BED2; --x: #56B4E9; --o: #E69F00; }
button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button:focus-visible { outline: 3px solid var(--primary); outline-offset: 5px; }
.is-active button:focus-visible { outline-color: #F7F9FD; }
.app-shell { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(100%, 1040px); margin: 0 auto; min-height: 84px; padding: max(22px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) 16px max(24px, env(safe-area-inset-left)); }
.brand { font-size: 1.6rem; font-weight: 900; letter-spacing: -1.3px; line-height: 1; }
.brand > span { color: var(--primary); }
.is-active .brand > span { color: var(--x); }
.shared-screen { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8125rem; font-weight: 600; }
.people-icon { position: relative; display: inline-block; width: 22px; height: 18px; }
.people-icon i { position: absolute; bottom: 0; width: 11px; height: 8px; border: 1.5px solid currentColor; border-radius: 6px 6px 2px 2px; }
.people-icon i::before { content: ""; position: absolute; width: 5px; height: 5px; border: 1.5px solid currentColor; border-radius: 50%; left: 1.5px; top: -8px; }
.people-icon i:last-child { right: 0; }
.icon-button { display: grid; place-items: center; border: 1px solid #61738C66; border-radius: 50%; background: #24334C; color: var(--text); width: 44px; height: 44px; transition: background .14s; }
.icon-button:hover { background: #354760; }
.main { flex: 1; display: flex; justify-content: center; align-items: center; padding: 20px max(24px, env(safe-area-inset-right)) max(32px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); }
.start-screen { width: min(390px, 100%); text-align: center; padding: 8px 0 54px; }
.start-symbols { display: flex; align-items: center; justify-content: center; gap: 29px; margin-bottom: 38px; height: 92px; }
.start-symbols .mark { width: 66px; height: 66px; }
.start-x { transform: rotate(-9deg); }
.start-o { transform: rotate(9deg); }
.infinity { color: #8192AA; }
.eyebrow { color: var(--muted); margin: 0 0 15px; font-size: .6875rem; letter-spacing: 1.7px; font-weight: 750; line-height: 1.6; }
.start-screen h1 { font-size: clamp(2.6rem, 10vw, 3.45rem); font-weight: 900; letter-spacing: -2.2px; line-height: 1.08; margin: 0 0 20px; }
.intro { color: #47617F; font-size: 1.0625rem; line-height: 1.65; margin: 0 0 36px; }
.primary-button { display: flex; align-items: center; justify-content: center; gap: 15px; min-height: 62px; width: 100%; border: 0; border-radius: 99px; padding: 16px 22px; background: var(--primary); color: #FFFFFF; font-size: 1.125rem; font-weight: 850; box-shadow: 0 6px 20px #0962F420; transition: background .14s, transform .14s; }
.primary-button:hover { background: #0054DC; transform: translateY(-1px); }
.primary-button:active { transform: translateY(1px); }
.start-hint { margin: 20px 0 0; color: var(--muted); font-size: .875rem; line-height: 1.5; }
.game-screen { display: flex; flex-direction: column; align-items: center; gap: 24px; width: min(740px, 100%); padding-bottom: 8px; }
.round-heading { width: 100%; text-align: center; }
.players { display: flex; justify-content: center; gap: 12px; margin-bottom: 20px; }
.player { display: flex; align-items: center; gap: 9px; border: 1px solid transparent; border-radius: 99px; padding: 9px 14px; color: var(--muted); font-size: .8125rem; line-height: 1.3; }
.player b { font-size: 1.125rem; line-height: 1; }
.player-x b { color: var(--x); }
.player-o b { color: var(--o); }
.player.is-current { border-color: #61738C; background: #24334C; color: var(--text); }
.round-status h1 { margin: 0; font-size: 1.875rem; font-weight: 850; line-height: 1.2; letter-spacing: -.8px; }
.round-status p { color: var(--muted); font-size: .875rem; line-height: 1.55; margin: 9px auto 0; min-height: 22px; }
.board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); width: min(420px, 100%, max(180px, calc(100vh - 396px))); width: min(420px, 100%, max(180px, calc(100dvh - 396px))); aspect-ratio: 1; flex: 0 0 auto; }
.cell { display: grid; place-items: center; position: relative; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; color: var(--text); transition: background .14s; }
.cell:nth-child(n+4) { border-top: 2px solid var(--line); }
.cell:not(:nth-child(3n+1)) { border-left: 2px solid var(--line); }
.cell[aria-disabled="true"] { cursor: default; }
.cell:focus-visible { z-index: 1; outline-offset: -7px; border-radius: 10px; }
@media (hover: hover) { .cell[aria-disabled="false"]:hover { background: #24334C88; } }
.cell.is-expiring::after { content: ""; position: absolute; inset: 15%; border: 2px dashed #B1BED2; border-radius: 50%; pointer-events: none; }
.cell.is-expiring .mark { transform: scale(.76); }
.cell.is-winning { background: #243B54; }
.mark { display: block; position: relative; width: 55%; height: 55%; pointer-events: none; transition: transform .14s; }
.mark[data-mark="X"]::before, .mark[data-mark="X"]::after { content: ""; position: absolute; width: 11%; height: 116%; left: 44.5%; top: -8%; border-radius: 99px; background: var(--x); transform: rotate(45deg); }
.mark[data-mark="X"]::after { transform: rotate(-45deg); }
.mark[data-mark="O"] { border: clamp(5px, 1.7vw, 8px) solid var(--o); border-radius: 50%; }
.start-symbols .mark[data-mark="O"] { border-width: 7px; }
.round-footer { display: flex; align-items: center; justify-content: center; min-height: 70px; width: min(320px, 100%); }
.rule-hint { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; color: var(--muted); font-size: .8125rem; line-height: 1.7; }
.rule-hint svg { flex-shrink: 0; }
.again-button { background: #F7F9FD; color: #15203A; box-shadow: none; }
.again-button:hover { background: #FFFFFF; }
.no-script { text-align: center; color: #A73223; }
@media (max-width: 480px) {
  .app-header { min-height: 76px; padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
  .brand { font-size: 1.45rem; }
  .shared-screen { font-size: .75rem; gap: 6px; }
  .main { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
  .game-screen { gap: 20px; }
  .board { width: min(420px, 100%, max(180px, calc(100vh - 360px))); width: min(420px, 100%, max(180px, calc(100dvh - 360px))); }
  .players { margin-bottom: 16px; }
  .round-status h1 { font-size: 1.75rem; }
  .round-status p { max-width: 290px; }
}
@media (max-height: 640px) {
  .start-screen { padding-bottom: 12px; }
  .start-symbols { margin-bottom: 22px; height: 64px; }
  .start-symbols .mark { width: 48px; height: 48px; }
  .intro { margin-bottom: 24px; }
  .game-screen { gap: 14px; }
  .players { margin-bottom: 12px; }
}
@media (min-width: 560px) and (max-height: 560px) {
  .app-header { min-height: 68px; padding-top: max(14px, env(safe-area-inset-top)); padding-bottom: 10px; }
  .main { padding-top: 8px; padding-bottom: max(16px, env(safe-area-inset-bottom)); }
  .game-screen { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 340px); justify-content: center; column-gap: 36px; row-gap: 16px; }
  .round-heading { grid-column: 1; grid-row: 1; align-self: end; }
  .board { grid-column: 2; grid-row: 1 / 3; width: min(340px, 100%, max(180px, calc(100vh - 112px))); width: min(340px, 100%, max(180px, calc(100dvh - 112px))); }
  .round-footer { grid-column: 1; grid-row: 2; align-self: start; }
  .start-screen { padding: 10px 0; }
  .start-symbols { display: none; }
  .eyebrow { margin-bottom: 10px; }
  .start-screen h1 { margin-bottom: 12px; font-size: 2.5rem; }
  .intro { margin-bottom: 18px; }
  .start-hint { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }