:root {
  --ink:#23324a; --blue:#1f5fa4; --blue-dark:#164878; --blue-soft:#e7f5ff;
  --coral:#d94259; --coral-soft:#fff0f2; --gold:#ffcf3f; --white:#fff;
  --green:#38a85b; --green-dark:#237c41; --paper:#fffdf5;
  --wood:#f2c782; --wood-edge:#9e682f; --wood-slot:#fff8e7;
  --shadow:rgba(23,53,66,.22); --muted:#536779; --line:rgba(31,95,164,.2);
  --soft-shadow:0 6px 0 var(--shadow),0 12px 24px var(--shadow);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; color:var(--ink); font-family:"Baloo 2","Fredoka","Trebuchet MS",system-ui,sans-serif; font-weight:700; letter-spacing:0; background:var(--blue-soft) url('../art/park.webp') center/cover fixed no-repeat; }
button,select { font:inherit; letter-spacing:0; color:inherit; }
button { cursor:pointer; touch-action:manipulation; }
button:focus-visible,select:focus-visible { outline:4px solid var(--blue); outline-offset:4px; }
button:active:not(:disabled) { transform:translateY(2px); }
button:disabled { cursor:default; }
[hidden] { display:none !important; }
.screen { min-height:100dvh; padding-bottom:env(safe-area-inset-bottom,0px); }
.home-content { max-width:580px; margin:auto; padding:24px 22px; text-align:center; }
.brand { color:var(--blue-dark); margin:0 0 10px; font-size:17px; }
h1 { font-size:44px; line-height:1.1; margin:0; color:var(--blue); -webkit-text-stroke:4px var(--white); paint-order:stroke fill; text-shadow:0 3px var(--white); }
h1 span { font-size:24px; color:var(--coral); }
.subtitle { margin:6px 0 0; color:var(--coral); font-size:28px; text-shadow:0 2px var(--white); }
.characters { display:flex; align-items:center; justify-content:center; gap:6px; margin:12px 0 22px; }
figure { margin:0; width:44%; }
figure img { width:100%; height:200px; object-fit:contain; filter:drop-shadow(0 5px 4px var(--shadow)); }
figcaption { background:var(--paper); border:3px solid var(--white); border-radius:8px; padding:5px 12px; font-size:20px; box-shadow:0 4px 0 var(--shadow); display:inline-flex; align-items:center; gap:10px; }
.bryce b { color:var(--blue); }.gigi b { color:var(--coral); }
.versus { color:var(--gold); font-size:38px; text-shadow:0 2px var(--wood-edge); }
fieldset { border:0; margin:0 0 18px; padding:0; min-width:0; }
legend { width:100%; font-size:17px; margin-bottom:8px; color:var(--blue-dark); text-shadow:0 1px var(--white); }
.segmented { display:grid; grid-template-columns:1fr 1fr; background:var(--paper); border:3px solid var(--white); border-radius:8px; gap:6px; padding:5px; box-shadow:0 4px 0 var(--shadow); }
.segmented button { border:2px solid transparent; border-radius:6px; background:transparent; min-height:52px; padding:8px; font-size:17px; }
.segmented button[aria-pressed="true"] { background:var(--blue); color:var(--white); border-color:var(--blue-dark); }
.segmented span { margin-right:5px; }.difficulty { grid-template-columns:repeat(3,1fr); }
.difficulty button[aria-pressed="true"] { background:var(--gold); color:var(--ink); border-color:var(--wood-edge); }
.primary { border:3px solid var(--white); border-radius:8px; background:var(--green); color:var(--white); box-shadow:0 6px 0 var(--green-dark); padding:12px 24px; font-size:24px; min-height:62px; }
#playBtn { width:100%; }
.settings { margin:22px 0 14px; display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:8px; }
.setting,.secondary,.icon,select { border:2px solid var(--line); background:var(--paper); border-radius:8px; padding:8px 12px; min-height:42px; color:var(--blue-dark); }
.setting[aria-pressed="true"] { border-color:var(--blue); background:var(--blue-soft); }
.setting[aria-pressed="false"],.icon[aria-pressed="false"] { opacity:.65; text-decoration:line-through; }
.voice-label { display:flex; gap:6px; align-items:center; font-size:13px; }
select { max-width:150px; font-size:13px; }.icon { width:44px; padding:5px; font-size:22px; }
footer { font-size:12px; color:var(--ink); background:var(--paper); display:inline-block; padding:4px 10px; border-radius:6px; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 12px; background:var(--paper); border-bottom:2px solid var(--line); }
.topbar .secondary { font-size:14px; }.topbar>span { font-size:13px; color:var(--muted); }.tools { display:flex; gap:5px; }
.play-content { display:flex; flex-direction:column; align-items:center; gap:14px; padding:16px 12px 22px; max-width:680px; margin:auto; }
.play-title { font-size:28px; }
.players { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; width:min(100%,520px); }
.player { display:flex; align-items:center; gap:10px; background:var(--paper); padding:8px; border:3px solid var(--white); border-radius:8px; box-shadow:0 4px 0 var(--shadow); }
.player img { width:54px; height:54px; object-fit:contain; }.player strong { display:block; font-size:18px; }.player span { display:block; font-size:13px; color:var(--muted); }.player b { margin-left:4px; }
.player.active.bryce { border-color:var(--blue); background:var(--blue-soft); }.player.active.gigi { border-color:var(--coral); background:var(--coral-soft); }
.ties { text-align:center; color:var(--blue-dark); font-size:12px; }.ties strong { display:block; font-size:23px; }
#turnLine { color:var(--blue); background:var(--paper); border:3px solid var(--white); border-radius:8px; margin:0; padding:7px 22px; text-align:center; font-size:23px; min-height:47px; }
#turnLine.gigi { color:var(--coral); }
.board-frame { position:relative; width:min(100%,460px,calc(100dvh - 300px)); aspect-ratio:1; background:var(--wood); border:8px solid var(--wood-edge); border-radius:8px; padding:10px; box-shadow:var(--soft-shadow); }
.board { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); grid-template-rows:repeat(3,minmax(0,1fr)); gap:8px; height:100%; }
.cell { min-width:0; min-height:0; position:relative; background:var(--wood-slot); border:3px solid var(--wood-edge); border-radius:8px; padding:5px; box-shadow:inset 0 4px 0 var(--shadow); display:flex; align-items:center; justify-content:center; }
.cell:not(:disabled):hover { background:var(--white); }.cell.x { background:var(--blue-soft); border-color:var(--blue); }.cell.o { background:var(--coral-soft); border-color:var(--coral); }
.cell img { width:90%; height:90%; object-fit:contain; animation:stamp .25s ease-out; }
.cell .symbol { position:absolute; right:3px; bottom:2px; font-size:17px; background:var(--paper); width:23px; height:23px; border-radius:50%; color:var(--blue); line-height:23px; }.cell.o .symbol { color:var(--coral); }
.cell.winner { border-color:var(--gold); box-shadow:inset 0 0 0 3px var(--gold); }
#winLine { position:absolute; inset:10px; width:calc(100% - 20px); height:calc(100% - 20px); pointer-events:none; }
#strike { stroke:var(--gold); stroke-width:8; stroke-linecap:round; filter:drop-shadow(0 2px 1px var(--wood-edge)); }
.round-tools { display:flex; justify-content:center; gap:8px; margin-top:4px; }.result { text-align:center; background:var(--paper); border:3px solid var(--gold); border-radius:8px; padding:14px 24px; width:min(100%,460px); box-shadow:0 5px 0 var(--shadow); }
.result h2 { font-size:24px; margin:0; color:var(--blue); }.result p { margin:5px 0 12px; font-size:14px; color:var(--muted); }.result .primary { font-size:18px; min-height:48px; }
.fx { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:10; }
@keyframes stamp { from { transform:scale(.4) rotate(-8deg); } to { transform:scale(1) rotate(0); } }
@media (min-width:820px) and (orientation:landscape) {
  .home-content { max-width:960px; display:grid; grid-template-columns:1fr 1fr; gap:8px 34px; align-content:center; min-height:100dvh; }
  .brand,.home-content h1,.subtitle,.characters { grid-column:1; }
  .brand { grid-row:1; }.home-content h1 { grid-row:2; }.subtitle { grid-row:3; }.characters { grid-row:4 / 8; margin:0; }.characters figure img { height:235px; }
  .mode-picker { grid-column:2; grid-row:2 / 4; align-self:end; }#difficultyPicker { grid-column:2; grid-row:4; }#playBtn { grid-column:2; grid-row:5; }.settings { grid-column:2; grid-row:6; margin:12px 0; }.home-content footer { grid-column:2; grid-row:7; justify-self:center; }
}
@media (max-width:430px) { .home-content { padding:18px 14px; }h1 { font-size:35px; }figure img { height:165px; }.segmented button { font-size:15px; }.players { gap:5px; }.player { gap:5px; padding:5px; }.player img { width:40px; height:40px; }.player strong { font-size:16px; }.topbar>span { display:none; }.board-frame { width:min(100%,calc(100dvh - 300px)); }.play-content { gap:12px; } }
@media (max-height:560px) and (orientation:landscape) { .play-content { max-width:860px; display:grid; grid-template-columns:1fr 1fr; gap:9px 22px; }.board-frame { grid-column:2; grid-row:1 / 6; width:min(100%,calc(100dvh - 98px)); justify-self:center; }.players { grid-column:1; }.play-title { font-size:24px; }.result { padding:8px; }.result h2 { font-size:20px; }.result p { margin:2px 0 5px; }.result .primary { min-height:38px; padding:5px 12px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }