/* Tic Tac Ten (from tictacten.org), scoped to the arcade page. */
.ttt{--paper:#fdf8ea;--bg:#f5efe0;--ink:#2a2a2e;--sub:#6b655a;--x:#e54b3f;--o:#2f8bd8;--lock:#ebe2c8;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg);
  padding:28px 16px 48px;text-align:center;line-height:1.5}
.ttt *{box-sizing:border-box}
.ttt .how{max-width:520px;margin:0 auto 22px;background:var(--paper);border:2px solid var(--ink);border-radius:16px;padding:14px 20px;text-align:left}
.ttt .how h2{font-size:18px;margin:0 0 6px;font-family:"Fredoka","Inter",sans-serif;color:var(--ink)}
.ttt .how ol{margin:0;padding-left:22px;font-size:15.5px}
.ttt .how li{margin:3px 0}
.ttt .bar{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px}
.ttt button{font:600 15px/1 "Inter",sans-serif;border:2px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:999px;padding:10px 16px;cursor:pointer}
.ttt button.on{background:var(--ink);color:var(--paper)}
.ttt button:focus-visible{outline:3px solid var(--o);outline-offset:2px}
.ttt .status{font:700 20px/1.3 "Fredoka","Inter",sans-serif;min-height:28px;margin:4px 0 12px}
.ttt .status .x{color:var(--x)}.ttt .status .o{color:var(--o)}
.ttt .meta{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(560px,100%);margin:0 auto;aspect-ratio:1}
.ttt .mini{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;background:var(--ink);border-radius:12px;padding:3px;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.ttt .cell{background:var(--paper);border:0;border-radius:6px;padding:0;margin:0;display:flex;align-items:center;justify-content:center;font:800 clamp(18px,5vw,34px)/1 "Fredoka","Inter",sans-serif;cursor:pointer;aspect-ratio:1;min-width:0}
.ttt .cell:hover:empty{background:#fff}
.ttt .cell.x{color:var(--x)}.ttt .cell.o{color:var(--o)}
.ttt .cell.last{box-shadow:inset 0 0 0 3px rgba(42,42,46,.25)}
.ttt .mini.done .cell{background:var(--lock);cursor:default}
.ttt .mini .big{position:absolute;inset:0;display:none;align-items:center;justify-content:center;font:700 clamp(60px,17vw,130px)/1 "Fredoka","Inter",sans-serif;pointer-events:none}
.ttt .mini.wx .big,.ttt .mini.wo .big{display:flex}
.ttt .mini.wx .big{color:var(--x)}.ttt .mini.wo .big{color:var(--o)}
.ttt .mini.wx,.ttt .mini.wo{background:var(--lock)}
.ttt .mini.wx .cell,.ttt .mini.wo .cell{background:transparent;opacity:.3}
.ttt .mini.line{box-shadow:0 0 0 4px #ffd23f}
.ttt .again{margin-top:16px}
.ttt .score{font-size:14px;color:var(--sub);margin:-6px 0 12px}
.ttt .score b{color:var(--ink)}.ttt .score .x{color:var(--x);font-weight:700}.ttt .score .o{color:var(--o);font-weight:700}
.ttt .score .zero{border:0;background:none;padding:0 0 0 6px;font-size:13px;font-weight:400;color:var(--sub);text-decoration:underline}
.ttt .cell.pop{animation:ttt-pop .28s cubic-bezier(.3,1.6,.5,1)}
.ttt .mini.fresh .big{animation:ttt-stamp .4s cubic-bezier(.3,1.5,.5,1)}
.ttt .meta.over .mini.line{animation:ttt-glow 1.2s ease-in-out 3}
@keyframes ttt-pop{from{transform:scale(.4)}to{transform:scale(1)}}
@keyframes ttt-stamp{from{transform:scale(1.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes ttt-glow{50%{box-shadow:0 0 0 8px #ffd23f}}
.ttt{border-radius:18px;font-family:"Fredoka","Inter",system-ui,sans-serif}
.ttt .status,.ttt .cell,.ttt .mini .big{font-family:"Fredoka","Inter",system-ui,sans-serif}