/* Tick Tack Toe vs King Snek — page styles (extends site.css) */
.page-hero.compact{padding-block:clamp(2.5rem,7vw,4.5rem) 1rem}
.page-hero.compact h1{font-size:clamp(1.9rem,6.5vw,3.6rem)}
.game-wrap{max-width:34rem;text-align:center}
.score{font-size:1.1rem;margin:0 0 1rem}
.score b{font-size:1.35rem;font-variant-numeric:tabular-nums}
.sep{color:var(--muted);margin-inline:.35rem}
.board{--gap:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);width:min(100%,26rem);aspect-ratio:1;margin:0 auto 1.25rem;padding:var(--gap);background:#c8c8dc;border-radius:16px;box-shadow:0 0 36px rgba(255,215,0,.22)}
.cell{display:grid;place-items:center;min-width:0;min-height:0;padding:0;border:0;border-radius:8px;background:#2a2a3a;color:#fff;font:800 clamp(2.6rem,16vw,5.2rem)/1 var(--font);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background .15s,transform .15s}
.cell:hover:not([aria-disabled="true"]){background:#3a3a4e}
.cell:active:not([aria-disabled="true"]){transform:scale(.97)}
.cell[aria-disabled="true"]{cursor:default}
.cell.x{color:#ff7070}
.cell.o{color:#5cd0ff}
.cell.win{background:#4a4320;box-shadow:inset 0 0 0 3px #ffd700}
.cell .mark{display:block;animation:pop .18s ease-out}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.status{font-size:1.3rem;font-weight:600;min-height:2.2em;margin:0 0 1rem}
.controls{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:center;margin-bottom:1.25rem}
.diff{display:flex;gap:.5rem}
.game-help{max-width:30rem;margin-inline:auto;line-height:1.6}
.game-section{overflow:hidden}

/* King Snek: pure-CSS wiggle (static for reduced motion) */
.snek-track{position:relative;height:3.6rem;margin:0 0 1rem;overflow:hidden}
.snek{position:absolute;left:0;top:.9rem;display:flex;gap:2px;animation:slither 9s ease-in-out infinite alternate}
.seg{position:relative;flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:#4caf50;box-shadow:0 0 8px #2e7d32;animation:wave 1.1s ease-in-out infinite}
.seg:nth-child(2){animation-delay:-.15s;transform:scale(.95)}
.seg:nth-child(3){animation-delay:-.3s}
.seg:nth-child(4){animation-delay:-.45s}
.seg:nth-child(5){animation-delay:-.6s}
.seg:nth-child(6){animation-delay:-.75s}
.seg:nth-child(7){animation-delay:-.9s}
.seg:nth-child(8){animation-delay:-1.05s}
.seg.head{background:#66bb6a;box-shadow:0 0 12px #ffd700}
.crown{position:absolute;top:-1.15rem;left:.15rem;font-size:1.1rem;line-height:1;filter:drop-shadow(0 0 4px gold)}
.bow{position:absolute;bottom:-.2rem;left:50%;transform:translateX(-50%);font-size:.8rem;line-height:1}
@keyframes wave{0%,100%{translate:0 -.5rem}50%{translate:0 .5rem}}
@keyframes slither{from{left:0}to{left:calc(100% - 14rem)}}
@media (prefers-reduced-motion:reduce){
  .snek,.seg{animation:none}
  .snek{left:50%;transform:translateX(-50%)}
  .cell .mark{animation:none}
}
@media (max-width:30em){.snek{animation-name:slither-s}@keyframes slither-s{from{left:0}to{left:calc(100% - 14rem)}}}