:root{
  --wall:#1b2e29;
  --slate:#274239;
  --panel:#22382f;
  --chalk:#ece6d6;
  --chalk-soft:rgba(236,230,214,.55);
  --chalk-faint:rgba(236,230,214,.32);
  --line:rgba(236,230,214,.30);
  --x:#ff9a5b;
  --o:#54cfe6;
  --draw:#9bb0a8;
  --turn:var(--x);
  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--body);
  color:var(--chalk);
  background:
    radial-gradient(120% 90% at 50% -10%, #2c4a40 0%, var(--wall) 60%, #16241f 100%);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  -webkit-user-select:none; user-select:none;
  overflow-x:hidden;
}
/* subtle chalk-dust grain */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:screen;
}

.app{
  width:100%; max-width:480px;
  padding:14px clamp(12px,4vw,20px) calc(14px + env(safe-area-inset-bottom));
  padding-top:calc(14px + env(safe-area-inset-top));
  display:flex; flex-direction:column; gap:12px;
  position:relative; z-index:1; flex:1;
}

/* ---------- back link (site nav, themed to the chalkboard) ---------- */
.back-link{ color:var(--chalk-soft); }
.back-link:hover{ color:var(--x); }

/* ---------- header ---------- */
header{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.brand{ display:flex; flex-direction:column; line-height:1; }
.brand h1{
  margin:0; font-family:var(--display); font-weight:800;
  font-size:clamp(20px,6vw,26px); letter-spacing:-.02em;
}
.brand small{ color:var(--chalk-soft); font-size:11px; letter-spacing:.16em; text-transform:uppercase; margin-top:5px; }
.iconbtn{
  flex:0 0 auto; width:38px; height:38px; border-radius:12px;
  border:1px solid var(--chalk-faint); background:rgba(236,230,214,.04);
  color:var(--chalk); font-family:var(--display); font-weight:700; font-size:17px;
  cursor:pointer; transition:transform .12s, background .2s;
}
.iconbtn:active{ transform:scale(.92); }

/* ---------- scoreboard ---------- */
.score{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.pill{
  display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:14px;
  border:1px solid var(--chalk-faint); background:rgba(236,230,214,.03);
  transition:border-color .2s, background .2s, transform .15s, box-shadow .25s;
}
.pill.o{ flex-direction:row-reverse; }
.pill .glyph{ font-family:var(--display); font-weight:800; font-size:20px; line-height:1; }
.pill.x .glyph{ color:var(--x); }
.pill.o .glyph{ color:var(--o); }
.pill .meta{ display:flex; flex-direction:column; }
.pill.o .meta{ align-items:flex-end; }
.pill .num{ font-family:var(--display); font-weight:700; font-size:19px; line-height:1; }
.pill .lbl{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--chalk-soft); margin-top:3px; }
.pill.lit.x{ border-color:var(--x); background:rgba(255,154,91,.10); box-shadow:0 0 18px -6px var(--x); }
.pill.lit.o{ border-color:var(--o); background:rgba(84,207,230,.10); box-shadow:0 0 18px -6px var(--o); }
.vs{ font-family:var(--display); font-weight:700; color:var(--chalk-faint); font-size:13px; }
.pill .pname{ font-family:var(--display); font-weight:700; font-size:13px; line-height:1.1; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pill.x .pname{ color:var(--x); } .pill.o .pname{ color:var(--o); }
.pill .lbl b{ color:var(--chalk); font-weight:700; }
.mid{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.gnum{ font-family:var(--display); font-weight:800; font-size:17px; letter-spacing:.01em; }
.glbl{ font-size:8.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--chalk-soft); }

.field{ display:block; margin-top:14px; }
.flbl{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px; color:var(--chalk-soft); font-weight:600; }
.flbl.x{ color:var(--x); } .flbl.o{ color:var(--o); }
.field input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid var(--chalk-faint); background:rgba(236,230,214,.05);
  color:var(--chalk); font-family:var(--body); font-size:16px;
}
.field input:focus{ outline:none; border-color:var(--chalk-soft); background:rgba(236,230,214,.09); }
.field input::placeholder{ color:var(--chalk-faint); }
.resultcard .standing{ margin-top:12px; font-size:13px; color:var(--chalk-soft); }
.resultcard .standing b{ color:var(--chalk); }

/* ---------- status ---------- */
.status{
  text-align:center; font-size:14px; min-height:20px; font-weight:500;
  color:var(--chalk-soft);
}
.status b{ color:var(--chalk); font-weight:700; }
.status .who{ font-family:var(--display); font-weight:800; }
.who.x{ color:var(--x); } .who.o{ color:var(--o); }
@keyframes nudgeFlash{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.status.nudge{ animation:nudgeFlash .5s ease 2; }

/* gentle 20s per-turn reminder — visual only, never blocks or skips a turn */
.turntimer{
  width:100%; max-width:220px; height:3px; margin:6px auto 0;
  background:rgba(236,230,214,.12); border-radius:3px; overflow:hidden;
  transition:opacity .3s;
}
.turntimer i{ display:block; height:100%; width:100%; background:var(--turn); }

/* ---------- board ---------- */
.stage{ position:relative; }
.bigboard{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(7px,2.4vw,13px);
  aspect-ratio:1; width:100%;
  padding:clamp(7px,2.4vw,13px);
  border-radius:20px;
  background:linear-gradient(160deg,var(--slate),var(--panel));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -22px #000;
}
.board{
  position:relative; aspect-ratio:1; border-radius:11px;
  border:1px solid rgba(236,230,214,.10);
  background:rgba(255,255,255,.012);
  opacity:.5; transition:opacity .25s, box-shadow .3s, border-color .3s;
}
.board.closed{ opacity:.92; }
.board.active{
  opacity:1; border-color:var(--turn);
  box-shadow:0 0 0 2px var(--turn), 0 0 22px -5px var(--turn);
  animation:pulse 1.9s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 2px var(--turn), 0 0 18px -7px var(--turn); }
  50%{ box-shadow:0 0 0 2px var(--turn), 0 0 30px -1px var(--turn); }
}
.grid{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.gl{ stroke:var(--line); stroke-width:2.4; stroke-linecap:round; fill:none; }

.cells{ position:absolute; inset:0; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(3,1fr); transition:opacity .3s; }
.board.closed .cells{ opacity:.22; }
.cell{
  border:0; background:transparent; padding:0; margin:0;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; pointer-events:none; touch-action:manipulation;
  transition:transform .1s;
}
.board.active .cell{ pointer-events:auto; }
.cell:disabled{ pointer-events:none; cursor:default; }
.board.active .cell:not(:disabled):active{ transform:scale(.86); }
.board.active .cell:not(:disabled){ border-radius:7px; transition:transform .1s, background-color .15s; }
.board.active .cell:not(:disabled)::after{
  content:""; width:74%; height:74%;
  background-color:var(--turn);
  -webkit-mask:var(--ghost) center/contain no-repeat;
  mask:var(--ghost) center/contain no-repeat;
  opacity:0; transition:opacity .18s;
}
@media(hover:hover){
  .board.active .cell:not(:disabled):hover{ background-color:rgba(0,0,0,.22); }
  .board.active .cell:not(:disabled):hover::after{ opacity:.28; }
}
.cell:focus-visible{ outline:2px solid var(--chalk); outline-offset:-3px; border-radius:7px; }

.mark{ width:66%; height:66%; }
.mark.x{ color:var(--x); } .mark.o{ color:var(--o); }
.stroke{ fill:none; stroke:currentColor; stroke-width:9; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:0; }
.mark.animate .stroke{ stroke-dashoffset:1; animation:draw .32s ease forwards; }
.mark.animate .stroke.s2{ animation-delay:.13s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.capture{ position:absolute; inset:0; display:grid; place-items:center; border-radius:inherit; }
.capture.x{ background:rgba(255,154,91,.13); }
.capture.o{ background:rgba(84,207,230,.13); }
.capture.draw{ background:rgba(155,176,168,.09); }
.capture .bigmark{ width:64%; height:64%; filter:drop-shadow(0 4px 10px rgba(0,0,0,.3)); }
.capture.x .bigmark{ color:var(--x); } .capture.o .bigmark{ color:var(--o); }
.capture.draw .tie{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:.18em; color:var(--draw); }

@media (prefers-reduced-motion:reduce){
  .mark.animate .stroke{ animation:none; stroke-dashoffset:0; }
  .board.active{ animation:none; }
}

/* ---------- toast ---------- */
.toast{
  position:absolute; top:9px; left:50%; transform:translate(-50%,-8px);
  background:rgba(20,32,28,.92); border:1px solid var(--chalk-faint);
  color:var(--chalk); font-size:12.5px; font-weight:600;
  padding:7px 13px; border-radius:999px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; z-index:5;
  box-shadow:0 8px 24px -10px #000;
}
.toast.show{ opacity:1; transform:translate(-50%,0); }

/* ---------- controls ---------- */
.controls{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.btn{
  font-family:var(--body); font-weight:600; font-size:14px;
  padding:13px; border-radius:14px; cursor:pointer;
  border:1px solid var(--chalk-faint); background:rgba(236,230,214,.04); color:var(--chalk);
  transition:transform .12s, background .2s, border-color .2s;
}
.btn:active{ transform:scale(.97); }
.btn.primary{ border-color:var(--chalk-soft); background:rgba(236,230,214,.10); }
.btn:disabled{ opacity:.4; cursor:default; }

/* ---------- overlays (rules + result) ---------- */
.scrim{
  position:fixed; inset:0; z-index:20; display:none;
  align-items:center; justify-content:center;
  background:rgba(12,20,17,.6); backdrop-filter:blur(3px);
  padding:16px;
}
.scrim.open{ display:flex; }
.sheet{
  width:100%; max-width:400px; background:linear-gradient(180deg,#27433a,#1f352d);
  border:1px solid var(--chalk-faint);
  border-radius:22px; padding:22px clamp(16px,5vw,24px);
  max-height:90vh; overflow-y:auto;
  transform:scale(.94); animation:pop .28s ease forwards;
}
.sheet h2{ font-family:var(--display); font-weight:800; margin:2px 0 14px; font-size:20px; }
.sheet ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:11px; }
.sheet li{ font-size:13.5px; line-height:1.5; color:var(--chalk-soft); }
.sheet li b{ color:var(--chalk); font-weight:600; }
.sheet .close{ margin-top:18px; width:100%; }

/* result card (centered) */
.scrim.result{ align-items:center; }
.resultcard{
  width:100%; max-width:340px; margin:0 16px; text-align:center;
  background:linear-gradient(180deg,#2a463d,#1f352d);
  border:1px solid var(--chalk-faint); border-radius:24px; padding:30px 24px;
  transform:scale(.94); animation:pop .3s ease forwards;
}
@keyframes pop{ to{ transform:scale(1); } }
.resultcard .crown{ font-size:30px; }
.resultcard h2{ font-family:var(--display); font-weight:800; font-size:30px; margin:8px 0 4px; }
.resultcard h2.x{ color:var(--x); } .resultcard h2.o{ color:var(--o); } .resultcard h2.tie{ color:var(--chalk); }
.resultcard p{ color:var(--chalk-soft); font-size:14px; margin:0 0 20px; }
.resultcard .tally{ font-family:var(--display); font-weight:700; font-size:15px; color:var(--chalk); }

/* ---------- multiplayer bar ---------- */
.mpbar{
  display:none; align-items:center; justify-content:space-between; gap:10px;
  padding:9px 13px; border-radius:14px; font-size:12.5px;
  border:1px solid var(--chalk-faint); background:rgba(236,230,214,.04); color:var(--chalk-soft);
}
.mpbar b{ color:var(--chalk); }
.mpbar button{
  font-family:var(--body); font-size:11.5px; font-weight:600; cursor:pointer;
  padding:5px 10px; border-radius:10px; border:1px solid var(--chalk-faint);
  background:transparent; color:var(--chalk-soft);
}
.mpbar button:active{ transform:scale(.95); }
.mpcode{ font-family:var(--display); font-weight:800; font-size:38px; letter-spacing:.08em; margin:4px 0 14px; }
.mphint{ text-align:center; color:var(--chalk-faint); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin:16px 0; }