/* Impossible Tic Tac Toe — styles (original). */
:root{
  --paper:#fbf6ee; --paper-2:#f3ecdf; --ink:#1d1b33; --ink-2:#4a4766; --muted:#77738f;
  --night:#17153a; --night-2:#221f4f; --line:#3b3775;
  --x:#ff5d73; --o:#2ed3c0; --gold:#ffc94a; --purple:#9b7bff;
  --radius:18px; --shadow:0 18px 40px -18px rgba(23,21,58,.55);
  --font: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display: ui-rounded,"SF Pro Rounded","Nunito","Varela Round",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:17px/1.65 var(--font);color:var(--ink);background:var(--paper);
  background-image:radial-gradient(rgba(29,27,51,.06) 1px,transparent 1px);background-size:22px 22px}
a{color:#c2334a;text-underline-offset:3px}
a:hover{color:var(--ink)}
img,svg{max-width:100%}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:9;border-radius:8px}

/* header / footer */
.site-header{background:var(--night);color:#fff}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font:800 19px/1 var(--display);letter-spacing:-.2px}
.brand svg{width:30px;height:30px}
.brand b{color:var(--x)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{color:#d9d6ff;text-decoration:none;font-size:15px;padding:6px 10px;border-radius:10px}
.nav a:hover,.nav a[aria-current="page"]{background:var(--night-2);color:#fff}
.site-footer{margin-top:64px;background:var(--night);color:#bdb9e8;font-size:15px}
.site-footer .wrap{padding:32px 20px;display:flex;flex-wrap:wrap;gap:18px 40px;justify-content:space-between}
.site-footer a{color:#fff}
.site-footer nav{display:flex;flex-wrap:wrap;gap:8px 18px}

/* hero */
.hero{text-align:center;padding:34px 0 8px}
.hero h1{font:900 clamp(30px,6vw,52px)/1.05 var(--display);margin:0 0 10px;letter-spacing:-1px}
.hero h1 .x{color:var(--x)} .hero h1 .o{color:#13a493}
.hero p{margin:0 auto;max-width:640px;color:var(--ink-2);font-size:18px}

/* ad slots: reserved containers, collapsed while empty */
.ad-slot{margin:22px auto;text-align:center}
.ad-slot:empty{display:none}

/* ---------- game card ---------- */
.game{position:relative;max-width:560px;margin:22px auto 8px;background:var(--night);color:#fff;border-radius:26px;
  padding:16px 16px 18px;box-shadow:var(--shadow);opacity:0;transition:opacity .25s}
.game.ready{opacity:1}
.game noscript{display:block;padding:12px;color:var(--gold)}
.game [hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* mode picker: group tabs, then the modes of that group, then options */
.group-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:var(--night-2);padding:4px;border-radius:14px}
.group-tab{appearance:none;border:0;background:transparent;color:#cfcbff;font:800 14.5px/1.1 var(--display);padding:8px 4px;border-radius:10px;cursor:pointer}
.group-tab small{display:block;font:500 11px/1.2 var(--font);opacity:.75;margin-top:2px}
.group-tab[aria-selected="true"]{background:#fff;color:var(--night)}
.mode-tabs{display:flex;justify-content:center;gap:6px;margin:8px 0 0;flex-wrap:wrap}
.mode-tab{appearance:none;flex:1 1 0;max-width:150px;border:1px solid var(--line);background:transparent;color:#e6e3ff;font:700 14px/1.1 var(--display);padding:7px 6px;border-radius:999px;cursor:pointer}
.mode-tab small{display:block;font:500 10.5px/1.2 var(--font);opacity:.7;margin-top:1px}
.mode-tab[aria-pressed="true"]{background:var(--o);border-color:var(--o);color:var(--night)}
.opts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;margin:8px 0 0}
.seg{display:flex;align-items:center;gap:4px;font-size:13px;color:#cfcbff}
.seg-btn,.first-btn{appearance:none;border:1px solid var(--line);background:transparent;color:#fff;border-radius:999px;padding:4px 10px;font:600 13px var(--font);cursor:pointer;min-height:30px}
.seg-btn[aria-pressed="true"],.first-btn[aria-pressed="true"]{background:var(--gold);color:var(--night);border-color:var(--gold)}
.group-tab:focus-visible,.mode-tab:focus-visible,.seg-btn:focus-visible,.cell:focus-visible,.btn:focus-visible,.first-btn:focus-visible,.lv-play:focus-visible,.panel-close:focus-visible,.ladder-exit:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.ladder-banner{margin:8px 0 0;padding:6px 10px;border-radius:10px;background:#2c2865;color:#fff;font-size:13px;text-align:center;line-height:1.35}
.ladder-exit{appearance:none;border:0;background:transparent;color:var(--gold);font:600 12.5px var(--font);text-decoration:underline;cursor:pointer;padding:0 0 0 6px}

.status{min-height:44px;display:flex;align-items:center;justify-content:center;text-align:center;font:800 17px/1.25 var(--display);margin:6px 4px 6px;padding:0 6px}
.status[data-kind="win"]{color:var(--gold)} .status[data-kind="loss"]{color:var(--x)} .status[data-kind="draw"]{color:var(--o)}
.status[data-kind="wait"]{color:#cfcbff}

/* boards */
.board-wrap{position:relative}
.board{--n:3;--gap:10px;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:var(--gap);aspect-ratio:1/1;width:min(100%,420px);margin:0 auto;
  background:var(--line);padding:var(--gap);border-radius:20px}
.board.n4{--gap:7px;border-radius:16px}.board.n5{--gap:6px;border-radius:14px}.board.n6{--gap:5px;border-radius:12px}
.cell{appearance:none;border:0;border-radius:14px;background:var(--night-2);cursor:pointer;padding:9%;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;
  transition:transform .12s,background .2s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;position:relative}
.board.n4 .cell{border-radius:11px;padding:12%}.board.n5 .cell{border-radius:9px;padding:13%}.board.n6 .cell{border-radius:7px;padding:14%}
.cell.playable:hover{background:#2c2865;transform:translateY(-2px)}
.cell[aria-disabled="true"]{cursor:default}
.cell svg{width:100%;height:100%;overflow:visible}
.cell .stroke{fill:none;stroke-width:13;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;animation:draw .3s ease-out forwards}
.cell .s2{animation-delay:.11s}
.cell[data-v="X"] .stroke{stroke:var(--x)} .cell[data-v="O"] .stroke{stroke:var(--o)}
.cell[data-v] svg{animation:land .28s cubic-bezier(.3,1.6,.5,1)}
.cell.last{box-shadow:inset 0 0 0 2px rgba(255,255,255,.28)}
[data-mode="rigged"] .cell[data-v="O"] .stroke{stroke:var(--purple)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes land{from{transform:scale(.6)}to{transform:scale(1)}}
.cell.win{background:#3a356f;animation:pop .5s ease}
.cell.win .stroke{filter:drop-shadow(0 0 8px currentColor)}
@keyframes pop{50%{transform:scale(1.08)}}
.board.is-over .cell:not(.win){opacity:.55}
/* ultimate: 3×3 small boards */
.board.ult{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;padding:8px;border-radius:16px;background:#4b468f}
.sub{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);min-width:0;min-height:0;gap:3px;padding:4px;border-radius:10px;background:var(--night);transition:box-shadow .2s,background .2s}
.sub .cell{border-radius:5px;padding:16%;background:var(--night-2)}
.sub.active{background:#3d3880;box-shadow:0 0 0 3px var(--gold)}
.sub.active .cell.playable{background:#2e2a6a}
.sub.active .cell.playable:hover{background:#3b367f}
.board.ult:not(.is-over) .sub:not(.active) .cell{opacity:.62}
.sub[data-w="X"] .cell,.sub[data-w="O"] .cell,.sub[data-w="D"] .cell{opacity:.22!important}
.sub-mark{position:absolute;inset:6%;pointer-events:none;display:flex}
.sub-mark svg{width:100%;height:100%;overflow:visible}
.sub-mark .stroke{fill:none;stroke-width:11;stroke-linecap:round;stroke-dasharray:200;stroke-dashoffset:200;animation:draw .4s ease-out forwards}
.sub-mark .s2{animation-delay:.14s}
.sub-mark[data-v="X"] .stroke{stroke:var(--x)}.sub-mark[data-v="O"] .stroke{stroke:var(--o)}
.sub[data-w="D"]::after{content:"draw";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:800 13px var(--display);color:#cfcbff;letter-spacing:.5px;text-transform:uppercase}
.sub.claimed{animation:pop .45s ease}
.sub.win{box-shadow:0 0 0 3px var(--gold)}
.sub.nudge{animation:nudge .4s ease}
@keyframes nudge{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.board.ult.is-over .sub:not(.win){opacity:.6}
/* animated win line */
.winline{position:absolute;pointer-events:none;overflow:visible;opacity:0;z-index:2}
.winline.show{opacity:1}
.winline line{stroke:var(--gold);stroke-width:7;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,201,74,.8))}
.winline[data-p="X"] line{stroke:#ffd0d7}.winline[data-p="O"] line{stroke:#c9fff8}
.hint{margin:6px 4px 0;text-align:center;font-size:12.5px;line-height:1.35;color:#b3aee8}
/* cheat effects */
.cell.fx-dibs,.cell.fx-paint,.cell.fx-eraser,.cell.fx-sticky,.cell.fx-double,.cell.fx-overtime{animation:shake .5s ease}
.cell.fx-paint,.cell.fx-overtime{box-shadow:inset 0 0 0 3px var(--gold)}
.cell.fx-eraser{box-shadow:inset 0 0 0 3px #fff}
.cell.fx-sticky,.cell.fx-dibs,.cell.fx-double{box-shadow:inset 0 0 0 3px var(--purple)}
@keyframes shake{20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
.cheat-toast{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.6) rotate(-8deg);background:var(--gold);color:var(--night);
  font:900 clamp(22px,6vw,32px)/1 var(--display);padding:10px 18px;border-radius:12px;opacity:0;pointer-events:none;transition:all .2s;
  box-shadow:0 10px 30px rgba(0,0,0,.4);white-space:nowrap;z-index:3}
.cheat-toast.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-6deg)}

/* Rigby */
.rigby{display:none;align-items:center;gap:12px;margin:10px 2px 0}
[data-mode="rigged"] .rigby{display:flex}
.rigby-face{flex:0 0 48px;height:48px;border-radius:14px;background:var(--purple);position:relative;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.rigby-face::before{content:"";position:absolute;left:50%;top:-10px;width:4px;height:10px;background:var(--purple);transform:translateX(-50%)}
.rigby-face::after{content:"";position:absolute;left:50%;top:-16px;width:10px;height:10px;border-radius:50%;background:var(--gold);transform:translateX(-50%)}
.eye{position:absolute;top:14px;width:11px;height:11px;border-radius:50%;background:#fff}
.eye::after{content:"";position:absolute;top:3px;left:2px;width:6px;height:6px;border-radius:50%;background:var(--night);animation:shifty 3s infinite}
.eye.l{left:9px}.eye.r{right:9px}
.mouth{position:absolute;left:13px;right:13px;bottom:10px;height:6px;border-radius:0 0 8px 8px;background:var(--night)}
@keyframes shifty{0%,40%{left:2px}50%,80%{left:5px}90%{left:0}}
.rigby.talk .rigby-face{animation:bob .4s ease}
@keyframes bob{50%{transform:translateY(-4px) rotate(-3deg)}}
.rigby-speech{flex:1;background:#fff;color:var(--ink);border-radius:14px;padding:8px 12px;font-size:14px;line-height:1.4;position:relative;min-height:44px;margin:0}
.rigby-speech::before{content:"";position:absolute;left:-7px;top:16px;border:7px solid transparent;border-left:0;border-right-color:#fff}
.rap-sheet{display:none;margin:6px 0 0;text-align:center;font-size:13px;color:#cfcbff}
[data-mode="rigged"] .rap-sheet{display:block}

.scores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0 0}
.score{background:var(--night-2);border-radius:12px;padding:6px 4px;text-align:center}
.score-label{display:block;font-size:12px;color:#cfcbff;text-transform:uppercase;letter-spacing:.6px}
.score-num{display:block;font:900 22px/1.1 var(--display)}
.score:nth-child(1) .score-num{color:var(--x)} .score:nth-child(2) .score-num{color:var(--o)} .score:nth-child(3) .score-num{color:var(--gold)}
[data-mode="rigged"] .score:nth-child(2) .score-num{color:var(--purple)}
.streak{margin:6px 0 0;text-align:center;font-size:12.5px;color:#cfcbff;min-height:1em}
.streak:empty{display:none}
.controls{display:flex;gap:8px;justify-content:center;margin-top:10px;flex-wrap:wrap}
.btn{appearance:none;border:0;border-radius:12px;padding:10px 18px;font:800 15.5px var(--display);cursor:pointer}
.btn:disabled{opacity:.45;cursor:default}
.btn-new{background:var(--x);color:#fff}
.btn-new.pulse{animation:pulse 1.2s ease infinite}
@keyframes pulse{50%{box-shadow:0 0 0 8px rgba(255,93,115,.25)}}
.btn-undo,.btn-progress,.btn-icon{background:var(--night-2);color:#fff;border:1px solid var(--line)}
.btn-icon{padding:10px 12px;font-size:17px;line-height:1}
.btn-reset{background:transparent;color:#cfcbff;border:1px solid var(--line);font-weight:600;font-size:13.5px;padding:8px 14px}

/* progress panel */
.panel{position:absolute;inset:0;z-index:5;background:var(--night);border-radius:inherit;padding:14px 16px 16px;overflow:auto;animation:fadein .2s ease}
.panel h2{font:900 21px/1.2 var(--display);margin:0}
.panel h3{font:800 15px/1.2 var(--display);margin:14px 0 4px;color:var(--gold)}
.panel-head{display:flex;justify-content:space-between;align-items:center}
.panel-close{appearance:none;border:1px solid var(--line);background:var(--night-2);color:#fff;border-radius:10px;width:36px;height:36px;font-size:16px;cursor:pointer}
.panel-note{margin:2px 0 6px;font-size:12.5px;color:#b3aee8}
.ladder{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.ladder li{display:flex;align-items:center;gap:8px;background:var(--night-2);border-radius:10px;padding:6px 8px;font-size:13px}
.ladder li.locked{opacity:.5}
.ladder .lv-txt{flex:1;line-height:1.25}.ladder small{display:block;color:#b3aee8;font-size:11.5px}
.lv-play{appearance:none;border:0;border-radius:8px;background:var(--o);color:var(--night);font:800 12.5px var(--display);padding:6px 10px;cursor:pointer}
.ladder li.done .lv-play{background:transparent;color:#cfcbff;border:1px solid var(--line)}
.badges{list-style:none;margin:0 0 8px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:5px}
.badges li{display:flex;gap:8px;align-items:flex-start;background:var(--night-2);border-radius:10px;padding:6px 8px;font-size:12.5px;line-height:1.25;opacity:.45;filter:grayscale(1)}
.badges li.got{opacity:1;filter:none;box-shadow:inset 0 0 0 1px var(--gold)}
.badges small{display:block;color:#b3aee8;font-size:11px}
.b-emoji{font-size:20px;line-height:1}
.badge-toast{position:absolute;left:50%;top:10px;transform:translate(-50%,-20px);z-index:6;display:flex;gap:10px;align-items:center;background:var(--gold);color:var(--night);
  border-radius:14px;padding:8px 14px;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:all .25s;white-space:nowrap}
.badge-toast.show{opacity:1;transform:translate(-50%,0)}
.badge-toast small{display:block;font:600 11px var(--font);text-transform:uppercase;letter-spacing:.5px}
.badge-toast strong{font:900 16px var(--display)}
.bt-emoji{font-size:26px}
@keyframes fadein{from{opacity:0}}

/* ---------- content ---------- */
.content{max-width:760px;margin:34px auto 0}
.content h2{font:900 28px/1.2 var(--display);margin:42px 0 10px;letter-spacing:-.4px}
.content h3{font:800 20px/1.3 var(--display);margin:26px 0 6px}
.content p,.content li{color:#2c2a45}
.content ul,.content ol{padding-left:22px}
.content li{margin:6px 0}
.callout{background:#fff;border-radius:var(--radius);padding:16px 18px;border-left:6px solid var(--o);box-shadow:0 6px 20px -14px rgba(23,21,58,.5)}
.callout.warn{border-left-color:var(--x)}
.mini-board{display:inline-grid;grid-template-columns:repeat(3,34px);gap:3px;background:var(--ink);padding:3px;border-radius:8px;vertical-align:middle;margin:6px 10px 6px 0}
.mini-board span{width:34px;height:34px;background:#fff;display:flex;align-items:center;justify-content:center;font:900 18px var(--display);border-radius:4px}
.mini-board .x{color:var(--x)} .mini-board .o{color:#13a493} .mini-board .hl{background:#fff1b8}
.boards{display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-start;margin:10px 0}
.boards figure{margin:0;font-size:13.5px;color:var(--muted);max-width:140px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:16px 0}
.card{background:#fff;border-radius:var(--radius);padding:16px;box-shadow:0 6px 20px -14px rgba(23,21,58,.5)}
.card h3{margin:0 0 4px;font-size:18px}
.card p{margin:0;font-size:15.5px}
.faq details{background:#fff;border-radius:14px;padding:4px 16px;margin:10px 0;box-shadow:0 6px 20px -16px rgba(23,21,58,.5)}
.faq summary{cursor:pointer;font:800 17px/1.35 var(--display);padding:12px 0;list-style-position:outside}
.faq details p{margin:0 0 14px}
.crumbs{font-size:14px;color:var(--muted);margin:18px 0 0}
.crumbs a{color:var(--muted)}
.page h1{font:900 clamp(28px,5vw,42px)/1.1 var(--display);letter-spacing:-.6px;margin:18px 0 8px}
.lede{font-size:18.5px;color:var(--ink-2)}
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:18px 0}
.related a{display:block;background:var(--night);color:#fff;text-decoration:none;border-radius:14px;padding:14px 16px;font:800 16px/1.3 var(--display)}
.related a span{display:block;font:400 13.5px/1.4 var(--font);color:#cfcbff;margin-top:4px}
.related a:hover{background:var(--night-2)}
table.tbl{border-collapse:collapse;width:100%;background:#fff;border-radius:12px;overflow:hidden;font-size:15.5px}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid var(--paper-2);text-align:left;vertical-align:top}
.tbl th{background:var(--paper-2)}

@media (max-width:560px){
  body{font-size:16px}
  .wrap{padding:0 14px}
  .game{border-radius:20px;padding:10px 8px 12px;margin-top:14px}
  .board{--gap:8px}
  .board.n4{--gap:6px}.board.n5{--gap:5px}.board.n6{--gap:4px}
  .board.ult{gap:5px;padding:5px}.sub{gap:2px;padding:3px}.sub .cell{border-radius:4px}
  .group-tab{font-size:13.5px;padding:7px 2px}
  .mode-tab small{display:none}
  .mode-tab{padding:7px 4px}
  .seg-btn,.first-btn{padding:4px 8px;font-size:12.5px}
  .hero{padding-top:22px}
  .hero p{font-size:16px}
  .nav a{padding:5px 7px;font-size:14px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.cell .stroke,.sub-mark .stroke{stroke-dashoffset:0}}