/* ---------- TIC TAC TOE ---------- */
.cab[data-world="ttt"]{--w1:#DDF2FF;--w2:#A9DCFF}
.cab[data-world="ttt"] .cab-world{background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 2px,transparent 2px 34px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 2px,transparent 2px 34px)}
.cart:hover .ttt-a-strike,.cart:focus-visible .ttt-a-strike{animation:tttArtStrike 1.2s ease-out infinite}
@keyframes tttArtStrike{60%,100%{stroke-dashoffset:0}}

.ttt-game{--S:min(84vw,52vh,440px);position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,2.6vh,22px);padding:4px 12px 100px}
@media (min-width:701px){.ttt-game{--S:min(70vw,60vh,460px);padding-bottom:28px}}

/* turn pill */
.ttt-game .ttt-turn{display:flex;align-items:center;gap:12px;padding:6px 14px;background:var(--paper);border:var(--bd);border-radius:99px;box-shadow:0 3px 0 var(--ink)}
.ttt-game .tk{width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--ink);display:grid;place-items:center;opacity:.45;transform:scale(.9);transition:transform .3s var(--spring),opacity .25s,box-shadow .25s}
.ttt-game .tk svg{width:84%;height:84%}
.ttt-game .tk.on{opacity:1;transform:translateY(-4px) scale(1.12);box-shadow:0 0 0 5px rgba(255,210,63,.85),0 4px 0 var(--ink)}
.ttt-game .tk-vs{width:8px;height:8px;border-radius:50%;background:var(--ink);opacity:.35}

/* notebook paper + board */
.ttt-game .ttt-paper{position:relative;padding:calc(var(--S)*.045);background:#FFFDF6;border:var(--bd);border-radius:22px;box-shadow:0 6px 0 var(--ink);transform:rotate(-1deg);
  background-image:linear-gradient(90deg,transparent calc(var(--S)*.035),rgba(255,95,120,.35) calc(var(--S)*.035),rgba(255,95,120,.35) calc(var(--S)*.035 + 2px),transparent calc(var(--S)*.035 + 2px)),
  repeating-linear-gradient(180deg,transparent 0 calc(var(--S)/9 - 2px),rgba(56,182,255,.22) calc(var(--S)/9 - 2px) calc(var(--S)/9))}
.ttt-game .ttt-board{position:relative;width:var(--S);height:var(--S)}
.ttt-game .ttt-grid,.ttt-game .ttt-strike{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ttt-game .ttt-gridwrap{position:absolute;inset:0}
.ttt-game .ttt-grid path{fill:none;stroke:var(--ink);stroke-width:7;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1;animation:tttDraw .45s ease-out both}
.ttt-game .ttt-grid path:nth-child(2){animation-delay:.12s}.ttt-game .ttt-grid path:nth-child(3){animation-delay:.24s}.ttt-game .ttt-grid path:nth-child(4){animation-delay:.36s}
@keyframes tttDraw{from{stroke-dashoffset:1;opacity:0}1%{opacity:1}to{stroke-dashoffset:0;opacity:1}}

.ttt-game .ttt-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.ttt-game .ttt-cell{position:relative;display:grid;place-items:center;border-radius:18px;margin:8%;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .15s}
.ttt-game .ttt-cell:focus-visible{outline:4px dashed var(--grape);outline-offset:2px}
.ttt-game .ttt-slot,.ttt-game .ttt-ghost{position:absolute;inset:-6%;pointer-events:none}
.ttt-game .ttt-slot svg,.ttt-game .ttt-ghost svg{width:100%;height:100%;display:block;overflow:visible}
.ttt-game .ttt-ghost{opacity:0;transition:opacity .15s}
.ttt-game.kid-turn .ttt-cell:not(.taken):hover .ttt-ghost,.ttt-game.kid-turn .ttt-cell:not(.taken):focus-visible .ttt-ghost{opacity:.22}
.ttt-game.kid-turn .ttt-cell:not(.taken):hover{background:rgba(255,95,176,.08)}

/* marks: ink underlay + colour stroke, drawn on */
.ttt-game .ttt-mk path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 2;stroke-dashoffset:1;animation:tttDraw .26s ease-out both}
.ttt-game .ttt-mk .ink{stroke:var(--ink);stroke-width:17}
.ttt-game .ttt-mk .col{stroke-width:9.5}
.ttt-game .ttt-x .col{stroke:var(--pink)}
.ttt-game .ttt-o .col{stroke:var(--orange)}
.ttt-game .ttt-o path{animation-duration:.42s}
.ttt-game .ttt-x .p2 path{animation-delay:.2s}
.ttt-game .ttt-mk.still path{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
.ttt-game .tk .ttt-mk .ink{stroke-width:15}.ttt-game .tk .ttt-mk .col{stroke-width:8.5}
.ttt-game .ttt-cell.taken .ttt-slot{animation:tttLand .35s var(--spring)}
@keyframes tttLand{from{transform:scale(.82)}}
.ttt-game .ttt-cell.nope{animation:tttNope .3s}
@keyframes tttNope{30%{transform:translateX(-5px)}70%{transform:translateX(5px)}}
.ttt-game .ttt-cell.win .ttt-slot{animation:tttWin .55s var(--spring)}
@keyframes tttWin{40%{transform:scale(1.22) rotate(-6deg)}}
.ttt-game.draw .ttt-cell.taken .ttt-slot{animation:tttShrug .7s ease-in-out}
@keyframes tttShrug{30%{transform:rotate(-7deg) scale(.94)}70%{transform:rotate(6deg) scale(.94)}}

/* win strike */
.ttt-game .ttt-strike path{fill:none;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:1;animation:tttDraw .38s cubic-bezier(.5,0,.3,1) both}
.ttt-game .ttt-strike .hl{stroke-width:36;stroke-opacity:.6}
.ttt-game .ttt-strike .hl.x{stroke:#FFD23F}.ttt-game .ttt-strike .hl.o{stroke:#FFD23F}
.ttt-game .ttt-strike .ink{stroke:var(--ink);stroke-width:8;animation-delay:.12s}

/* gentle "block here" hint */
.ttt-game .ttt-cell.hint::after{content:"";position:absolute;inset:6%;border-radius:50%;border:5px dashed var(--pink);opacity:.85;animation:tttHint 1.6s ease-in-out 3 both;pointer-events:none}
@keyframes tttHint{0%{opacity:0;transform:scale(.7)}25%{opacity:.85;transform:scale(1)}60%{transform:scale(1.07)}100%{opacity:.85;transform:scale(1)}}
.ttt-game .ttt-hand{width:46px;margin:0}

/* wipe between games: a duster sweeps left to right */
.ttt-game .ttt-duster{position:absolute;top:-7%;bottom:-7%;left:-36%;width:24%;display:none;z-index:4;border:var(--bd);border-radius:14px;
  background:linear-gradient(90deg,#B86A3C 0 42%,var(--ink) 42% calc(42% + 4px),#F1ECE0 calc(42% + 4px));box-shadow:0 5px 0 rgba(26,16,51,.3)}
.ttt-game.wiping .ttt-duster{display:block;animation:tttDust .78s cubic-bezier(.45,0,.4,1) forwards}
@keyframes tttDust{0%{left:-36%;transform:rotate(-4deg)}50%{transform:rotate(3deg)}100%{left:114%;transform:rotate(-3deg)}}
.ttt-game.wiping .ttt-cell.ttt-cell .ttt-slot{animation:tttWipe .22s ease-in forwards;animation-delay:calc(var(--col)*.19s + .12s)}
.ttt-game.wiping .ttt-strike{animation:tttFade .3s ease-in .3s forwards}
@keyframes tttWipe{to{opacity:0;clip-path:inset(0 0 0 100%)}}
@keyframes tttFade{to{opacity:0}}

.ttt-game.calm *,.ttt-game.calm *::after{animation-duration:.01s!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01s!important}