/* The play area, drawn like a comic: thick ink outlines, hard offset shadows, halftone dots, big Bangers titles, bouncy motion, sound-effect bursts.
   Everything is scoped to .play-page, so the rest of the site keeps its calm, professional look. Fonts are self-hosted (see fonts/). */
@font-face{font-family:"Bangers";src:url(fonts/bangers.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka.woff2) format("woff2");font-weight:300 700;font-style:normal;font-display:swap}

.play-page{
  --cm-ink:#1b1340;--cm-paper:#fff7e4;--cm-yellow:#ffd23f;--cm-pink:#ff5d8f;--cm-sky:#3ec1ff;--cm-mint:#38d9a9;
  --cm-display:"Bangers",Impact,"Arial Black",system-ui,sans-serif;--cm-ui:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --cm-pop:cubic-bezier(.34,1.56,.64,1);--cm-shadow:6px 6px 0 var(--cm-ink);--cm-shadow-sm:3px 3px 0 var(--cm-ink);
}
.play-page main{background:radial-gradient(circle,rgba(27,19,64,.085) 1.3px,transparent 1.8px) 0 0/18px 18px,var(--cm-paper)}

/* ---------- titles, eyebrows, section heads ---------- */
.play-page .play-head .w-h1,.play-page .play-hero .w-h1{font:400 clamp(34px,6.4vw,68px)/1 var(--cm-display);letter-spacing:.02em;color:#fff;text-transform:uppercase;margin:6px 0 8px;
  -webkit-text-stroke:2px var(--cm-ink);paint-order:stroke fill;text-shadow:none;filter:drop-shadow(3px 3px 0 var(--cm-ink)) drop-shadow(6px 6px 0 var(--c,var(--cm-pink)));transform:rotate(-1.2deg);transform-origin:left center}
.play-page .play-head .w-h1 *,.play-page .play-hero .w-h1 *{text-shadow:none!important}
.play-page .play-hero .w-h1{font-size:clamp(40px,8vw,86px)}
.play-page .play-head .w-h1 em,.play-page .play-hero .w-h1 em{font-style:normal;background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--cm-yellow);animation:none;display:inline-block;transform:rotate(1.5deg)}
.play-page .play-head .eyebrow,.play-page .play-hero .eyebrow,.play-page .section-head .eyebrow{display:inline-block;font:700 14px/1 var(--cm-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--cm-ink);background:var(--cm-yellow);
  border:3px solid var(--cm-ink);border-radius:10px;padding:7px 12px;box-shadow:var(--cm-shadow-sm);transform:rotate(-2deg);margin-bottom:6px}
.play-page .play-hero .lede,.play-page .play-meta .lede{font:500 clamp(19px,2.4vw,24px)/1.45 var(--cm-ui);color:var(--cm-ink)}
.play-page .section-head h2,.play-page .play-info h2,.play-page .play-learn h2,.play-page .play-cat h2{font:400 clamp(30px,4.6vw,46px)/1.05 var(--cm-display);letter-spacing:.02em;color:var(--cm-ink);text-shadow:3px 3px 0 var(--c,var(--cm-yellow))}
.play-page .play-hero::before,.play-page .play-hero::after{filter:none;opacity:1;border-radius:0;animation:cm-spin 22s linear infinite}
.play-page .play-hero::before{width:120px;height:120px;right:6%;top:18px;background:var(--cm-yellow);clip-path:polygon(50% 0,61% 33%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 33%);opacity:.9}
.play-page .play-hero::after{width:70px;height:70px;right:22%;bottom:14px;left:auto;background:var(--cm-pink);clip-path:polygon(50% 0,61% 33%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 33%);animation-direction:reverse;opacity:.9}
@keyframes cm-spin{to{rotate:360deg}}

/* ---------- the game frame ---------- */
.play-page .play-frame{padding:0;background:var(--cm-ink);border:4px solid var(--cm-ink);border-radius:30px;box-shadow:10px 10px 0 var(--c,var(--cm-pink));animation:none}
.play-page .play-frame>.gs,.play-page .play-frame>.play-loading{border-radius:25px}
.play-page .gs-bar{background:var(--c,#2557B8);border-bottom:4px solid var(--cm-ink);padding:12px 16px;gap:14px}
.play-page .gs-title b{font:400 clamp(24px,4vw,34px)/1 var(--cm-display);letter-spacing:.03em;text-transform:uppercase;color:#fff;-webkit-text-stroke:1.5px var(--cm-ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--cm-ink)}
.play-page .gs-stat{min-width:74px;padding:5px 12px 4px;border-radius:14px;background:#fff;border:3px solid var(--cm-ink);box-shadow:var(--cm-shadow-sm);color:var(--cm-ink);transform:rotate(-1.5deg)}
.play-page .gs-stat:nth-child(even){transform:rotate(1.5deg)}
.play-page .gs-stat small{font:700 11px var(--cm-ui);letter-spacing:.08em;opacity:.75}
.play-page .gs-stat b{font:400 clamp(24px,3.4vw,30px)/1 var(--cm-display);letter-spacing:.03em;color:var(--c-ink,var(--cm-ink))}
.play-page .gs-btn{width:42px;height:42px;border-radius:12px;border:3px solid var(--cm-ink);background:var(--cm-yellow);color:var(--cm-ink);font:700 18px var(--cm-ui);box-shadow:0 3px 0 var(--cm-ink);transition:transform .2s var(--cm-pop),box-shadow .2s}
.play-page .gs-btn:hover{background:var(--cm-yellow);transform:translateY(-3px) rotate(-6deg);box-shadow:0 6px 0 var(--cm-ink)}.play-page .gs-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--cm-ink)}
.play-page .gs-stage{background:radial-gradient(circle,color-mix(in srgb,var(--c,#2557B8) 16%,transparent) 1.4px,transparent 1.9px) 0 0/16px 16px,var(--c-soft,#fff7e4);padding:clamp(16px,3.4vw,32px)}
.play-page .gs{font-family:var(--cm-ui)}

/* ---------- buttons inside games ---------- */
.play-page .gs .btn,.play-page .gm-menu .btn{font:700 clamp(17px,2.4vw,20px)/1 var(--cm-ui);letter-spacing:.01em;border:3px solid var(--cm-ink);border-radius:16px;padding:13px 22px;color:var(--cm-ink);background:#fff;box-shadow:0 5px 0 var(--cm-ink);transition:transform .2s var(--cm-pop),box-shadow .2s;text-decoration:none}
.play-page .gs .btn:hover,.play-page .gm-menu .btn:hover{transform:translateY(-3px) rotate(-1deg);box-shadow:0 8px 0 var(--cm-ink)}.play-page .gs .btn:active,.play-page .gm-menu .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--cm-ink)}
.play-page .gs .btn-primary,.play-page .gm-menu .btn-primary{background:var(--cm-yellow);color:var(--cm-ink)}
.play-page .gs .btn-ghost{background:#fff}.play-page .gs .btn:disabled{opacity:.5;transform:none;box-shadow:0 2px 0 var(--cm-ink)}
.play-page .gm-menu .btn-lg{font:400 clamp(28px,5vw,40px)/1 var(--cm-display);letter-spacing:.04em;text-transform:uppercase;padding:14px 38px;border-radius:18px;background:var(--cm-pink);color:#fff;-webkit-text-stroke:1.5px var(--cm-ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--cm-ink);animation:cm-wiggle 2.6s ease-in-out infinite}
@keyframes cm-wiggle{0%,86%,100%{transform:rotate(0) scale(1)}90%{transform:rotate(-3deg) scale(1.06)}94%{transform:rotate(3deg) scale(1.06)}}

/* ---------- start menu: a comic panel with a speech bubble ---------- */
.play-page .gm-menu{background:#fff;border:4px solid var(--cm-ink);border-radius:26px;box-shadow:var(--cm-shadow);transform:rotate(-.6deg);animation:cm-in .5s var(--cm-pop) both;max-width:min(640px,96%);gap:16px}
.play-page .gm-menu h3{font:400 clamp(38px,8vw,64px)/1 var(--cm-display);letter-spacing:.03em;text-transform:uppercase;color:var(--c,var(--cm-pink));-webkit-text-stroke:2px var(--cm-ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--cm-ink)}
.play-page .gm-text{position:relative;font:500 clamp(18px,2.6vw,22px)/1.4 var(--cm-ui);color:var(--cm-ink);background:var(--cm-yellow);border:3px solid var(--cm-ink);border-radius:18px;padding:10px 16px;margin-bottom:6px}
.play-page .gm-text::after{content:"";position:absolute;left:50%;bottom:-14px;width:20px;height:20px;background:var(--cm-yellow);border-right:3px solid var(--cm-ink);border-bottom:3px solid var(--cm-ink);transform:translateX(-50%) rotate(45deg) skew(8deg,8deg)}
.play-page .tt-group small{font:700 13px var(--cm-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--cm-ink)}
.play-page .tt-chip{padding:9px 16px;border:3px solid var(--cm-ink);border-radius:14px;background:#fff;color:var(--cm-ink);font:600 clamp(15px,2vw,17px)/1.2 var(--cm-ui);box-shadow:0 3px 0 var(--cm-ink);transition:transform .2s var(--cm-pop),box-shadow .2s,background .15s}
.play-page .tt-chip:hover{transform:translateY(-2px) rotate(-2deg);box-shadow:0 5px 0 var(--cm-ink)}
.play-page .tt-chip.on{background:var(--c,var(--cm-pink));color:#fff;border-color:var(--cm-ink);text-shadow:1px 1px 0 var(--cm-ink);transform:translateY(2px) rotate(1deg);box-shadow:0 1px 0 var(--cm-ink)}
.play-page .gm-menu .fine,.play-page .tt-best{font:600 16px var(--cm-ui);color:var(--cm-ink)}
@keyframes cm-in{from{opacity:0;transform:translateY(24px) scale(.92) rotate(-3deg)}to{opacity:1;transform:rotate(-.6deg)}}

/* ---------- quiz games (SmartScore practice) ---------- */
.play-page .qk-meter{border:3px solid var(--cm-ink);border-radius:18px;box-shadow:var(--cm-shadow-sm);background:#fff}
.play-page .qk-sc{font:400 clamp(36px,5vw,48px)/1 var(--cm-display);letter-spacing:.03em;color:var(--c,var(--cm-pink));-webkit-text-stroke:1.5px var(--cm-ink);paint-order:stroke fill;text-shadow:2px 2px 0 var(--cm-ink)}
.play-page .qk-meter-l small,.play-page .qk-tier{font:700 12px var(--cm-ui);color:var(--cm-ink)}
.play-page .qk-bar{height:18px;border:3px solid var(--cm-ink);border-radius:99px;background:#fff;overflow:hidden}.play-page .qk-bar i{background:repeating-linear-gradient(-45deg,var(--c,var(--cm-pink)) 0 10px,color-mix(in srgb,var(--c,var(--cm-pink)) 70%,#fff) 10px 20px);transition:width .5s var(--cm-pop)}
.play-page .qk-card{background:#fff;border:4px solid var(--cm-ink);border-radius:26px;box-shadow:var(--cm-shadow);animation:cm-in .4s var(--cm-pop) both}
.play-page .qk-q{font:600 clamp(28px,5.8vw,52px)/1.18 var(--cm-ui);color:var(--cm-ink);letter-spacing:-.005em}
.play-page .qk-passage{font:600 clamp(20px,3vw,26px)/1.5 var(--cm-ui);background:var(--cm-yellow);border:3px solid var(--cm-ink);border-radius:18px;color:var(--cm-ink)}
.play-page .qk-passage.code{background:#1d2433;color:#e8ecf5;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.play-page .qk-title{font:400 22px var(--cm-display);letter-spacing:.04em;color:var(--c,var(--cm-pink));text-shadow:2px 2px 0 var(--cm-ink)}
.play-page .qk-choice{min-height:72px;border:3px solid var(--cm-ink);border-radius:18px;background:#fff;color:var(--cm-ink);font:600 clamp(20px,3vw,28px)/1.2 var(--cm-ui);box-shadow:0 5px 0 var(--cm-ink);transition:transform .2s var(--cm-pop),box-shadow .2s,background .15s}
.play-page .qk-choice kbd{width:38px;height:38px;border:3px solid var(--cm-ink);border-radius:50%;background:var(--cm-yellow);color:var(--cm-ink);font:400 20px var(--cm-display);box-shadow:none}
.play-page .qk-choice:hover:not(:disabled){background:var(--cm-yellow);transform:translateY(-4px) rotate(-1deg);box-shadow:0 9px 0 var(--cm-ink);border-color:var(--cm-ink)}
.play-page .qk-choice:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--cm-ink)}
.play-page .qk-choice.ok{background:var(--cm-mint);border-color:var(--cm-ink);animation:cm-hit .5s var(--cm-pop)}
.play-page .qk-choice.no{background:#ff9aa8;border-color:var(--cm-ink);animation:cm-miss .45s}
.play-page .qk-fb{font:600 clamp(18px,2.6vw,22px)/1.45 var(--cm-ui);background:#fff;border:3px solid var(--cm-ink);border-radius:18px;box-shadow:var(--cm-shadow-sm);color:var(--cm-ink);position:relative}
.play-page .qk-fb.good,.play-page .qk-fb.ok{background:#c9f7e6}.play-page .qk-fb.bad,.play-page .qk-fb.no{background:#ffe0e5}
.play-page .qk-combo{font:400 clamp(26px,4vw,38px)/1 var(--cm-display);letter-spacing:.05em;color:var(--cm-yellow);-webkit-text-stroke:2px var(--cm-ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--cm-ink);animation:cm-wiggle 1.4s ease-in-out infinite}
.play-page .qk-hist i{border:2px solid var(--cm-ink)}
.play-page .qk-skill{border:3px solid var(--cm-ink);border-radius:20px;background:#fff;box-shadow:var(--cm-shadow-sm);transition:transform .25s var(--cm-pop),box-shadow .25s}
.play-page .qk-skill:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:8px 8px 0 var(--cm-ink)}
@keyframes cm-hit{0%{transform:scale(1)}35%{transform:scale(1.1) rotate(-2deg)}70%{transform:scale(.97) rotate(1deg)}100%{transform:scale(1)}}
@keyframes cm-miss{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px) rotate(-1deg)}45%{transform:translateX(8px) rotate(1deg)}70%{transform:translateX(-5px)}}

/* ---------- big numbers and tiles in the custom games ---------- */
.play-page .ms-q,.play-page .nl-prompt b,.play-page .tb-call b{font:400 clamp(56px,13vw,120px)/1 var(--cm-display);letter-spacing:.03em;color:#fff;-webkit-text-stroke:3px var(--cm-ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--cm-ink),9px 9px 0 var(--c,var(--cm-pink))}
.play-page .ms-in{font:700 clamp(30px,6vw,44px) var(--cm-ui);border:4px solid var(--cm-ink);border-radius:20px;box-shadow:var(--cm-shadow-sm);color:var(--cm-ink)}.play-page .ms-in:focus{outline:none;background:#fffbe8;box-shadow:6px 6px 0 var(--c,var(--cm-pink))}
.play-page .ms-bar{height:18px;border:3px solid var(--cm-ink);background:#fff}.play-page .ms-bar i{background:repeating-linear-gradient(-45deg,var(--c,var(--cm-pink)) 0 10px,color-mix(in srgb,var(--c,var(--cm-pink)) 70%,#fff) 10px 20px)}
.play-page .tb-call,.play-page .bh-goal,.play-page .cb-goal{border:3px solid var(--cm-ink);border-radius:20px;background:var(--cm-yellow);box-shadow:var(--cm-shadow-sm);font-family:var(--cm-ui);color:var(--cm-ink)}
.play-page .tb-call small,.play-page .nl-prompt small,.play-page .cb-lb{font:700 14px var(--cm-ui);letter-spacing:.1em;color:var(--cm-ink)}
.play-page .tb-cell,.play-page .ph-tile{font:400 clamp(24px,6vw,36px)/1 var(--cm-display);letter-spacing:.03em;border:3px solid var(--cm-ink);border-radius:16px;background:#fff;color:var(--cm-ink);box-shadow:0 4px 0 var(--cm-ink);transition:transform .2s var(--cm-pop),box-shadow .2s,background .15s}
.play-page .tb-cell:hover:not(.on),.play-page .ph-tile:hover:not(:disabled){transform:translateY(-3px) rotate(-3deg);box-shadow:0 7px 0 var(--cm-ink);background:var(--cm-yellow);border-color:var(--cm-ink)}
.play-page .tb-cell.on,.play-page .ph-tile.ok{background:var(--cm-mint);border-color:var(--cm-ink);color:var(--cm-ink);animation:cm-hit .45s var(--cm-pop)}
.play-page .tb-cell.free{font:700 13px var(--cm-ui)}.play-page .tb-cell.no,.play-page .ph-tile.no{background:#ff9aa8;border-color:var(--cm-ink);animation:cm-miss .4s}
.play-page .nl-mark{background:var(--cm-pink);border:3px solid var(--cm-ink);box-shadow:3px 3px 0 var(--cm-ink)}.play-page .nl-line::before{height:12px;border:3px solid var(--cm-ink);background:#fff;top:32px}
.play-page .nl-end{font:400 24px var(--cm-display);letter-spacing:.03em}
.play-page .nl-msg,.play-page .tb-note,.play-page .cb-out,.play-page .bh-info{font:600 clamp(17px,2.4vw,21px)/1.4 var(--cm-ui)}
.play-page .bh-code,.play-page .cb-built{border:3px solid var(--cm-ink);box-shadow:var(--cm-shadow-sm)}.play-page .cb-pile{border:3px dashed var(--cm-ink)}
.play-page .cb-title{font:400 clamp(26px,4.4vw,38px)/1.1 var(--cm-display);letter-spacing:.03em;color:var(--cm-ink)}
.play-page .cb-chip{border:3px solid var(--cm-ink);box-shadow:0 4px 0 var(--cm-ink);transition:transform .2s var(--cm-pop)}.play-page .cb-chip:hover:not(:disabled){transform:translateY(-3px) rotate(-1deg);background:var(--cm-yellow)}
.play-page .bh-line:hover:not(:disabled){transform:translateX(4px)}.play-page .bh-line{transition:transform .2s var(--cm-pop),background .12s}

/* ---------- floating points and sound-effect bursts ---------- */
.play-page .fx-pop{font:400 clamp(34px,6vw,56px)/1 var(--cm-display)!important;letter-spacing:.04em;-webkit-text-stroke:2px var(--cm-ink);paint-order:stroke fill;text-shadow:3px 3px 0 var(--cm-ink)}
.cm-boom{position:absolute;z-index:30;width:clamp(120px,22vw,190px);aspect-ratio:1;display:grid;place-items:center;pointer-events:none;translate:-50% -50%;animation:cm-boom .95s var(--cm-pop) forwards;filter:drop-shadow(5px 5px 0 var(--cm-ink))}
.cm-boom::before{content:"";position:absolute;inset:0;background:var(--cm-ink);clip-path:polygon(50% 0,59% 22%,80% 8%,76% 32%,100% 30%,82% 48%,100% 66%,76% 66%,84% 90%,60% 76%,50% 100%,40% 76%,16% 90%,24% 66%,0 66%,18% 48%,0 30%,24% 32%,20% 8%,41% 22%)}
.cm-boom::after{content:"";position:absolute;inset:6px;background:var(--cm-yellow);clip-path:polygon(50% 0,59% 22%,80% 8%,76% 32%,100% 30%,82% 48%,100% 66%,76% 66%,84% 90%,60% 76%,50% 100%,40% 76%,16% 90%,24% 66%,0 66%,18% 48%,0 30%,24% 32%,20% 8%,41% 22%)}
.cm-boom.bad::after{background:var(--cm-sky)}.cm-boom.big::after{background:var(--cm-pink)}
.cm-boom b{position:relative;z-index:1;font:400 clamp(30px,5.4vw,46px)/1 var(--cm-display);letter-spacing:.04em;color:var(--cm-ink);transform:rotate(-8deg);white-space:nowrap}
.cm-boom.big b{color:#fff;-webkit-text-stroke:2px var(--cm-ink);paint-order:stroke fill}
@keyframes cm-boom{0%{opacity:0;scale:.2;rotate:-25deg}22%{opacity:1;scale:1.18;rotate:6deg}40%{scale:.95;rotate:-3deg}70%{opacity:1;scale:1;rotate:0deg}100%{opacity:0;scale:1.08;translate:-50% -90%}}

/* ---------- end-of-round card ---------- */
.play-page .gs-modal-card{border:4px solid var(--cm-ink);border-radius:28px;box-shadow:10px 10px 0 var(--c,var(--cm-pink));background:#fff;font-family:var(--cm-ui);animation:cm-in .45s var(--cm-pop) both}
.play-page .gs-modal-card h2{font:400 clamp(40px,8vw,64px)/1 var(--cm-display);letter-spacing:.03em;text-transform:uppercase;color:#fff;-webkit-text-stroke:2px var(--cm-ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--cm-ink),7px 7px 0 var(--c,var(--cm-pink))}
.play-page .gs-modal-card dt{font:700 13px var(--cm-ui);letter-spacing:.08em;text-transform:uppercase}.play-page .gs-modal-card dd{font:400 clamp(26px,4vw,34px)/1.1 var(--cm-display);letter-spacing:.03em;color:var(--c-ink,var(--cm-ink))}
.play-page .gs-stars{font-size:clamp(34px,7vw,50px);filter:drop-shadow(3px 3px 0 var(--cm-ink))}
.play-page .gs-more-card{border:3px solid var(--cm-ink);border-radius:16px;box-shadow:var(--cm-shadow-sm);font:700 16px var(--cm-ui);transition:transform .2s var(--cm-pop)}.play-page .gs-more-card:hover{transform:translateY(-3px) rotate(-2deg)}
.play-page .gs-toast{font:600 18px var(--cm-ui);border:3px solid var(--cm-ink);border-radius:16px;background:var(--cm-yellow);color:var(--cm-ink);box-shadow:var(--cm-shadow-sm)}

/* ---------- game cards on the hub and category pages ---------- */
.play-page .gcard{border:3px solid var(--cm-ink);border-radius:22px;box-shadow:var(--cm-shadow);background:#fff;transition:transform .25s var(--cm-pop),box-shadow .25s}
.play-page .gcard:hover,.play-page .gcard:focus-visible{transform:translate(-4px,-4px) rotate(-1deg);box-shadow:11px 11px 0 var(--c,var(--cm-ink));border-color:var(--cm-ink)}
.play-page .gcard.tilt{transform:none}.play-page .gcard.tilt:hover{transform:translate(-4px,-4px) rotate(-1deg)}
.play-page .gcard-art{border-bottom:3px solid var(--cm-ink);background:radial-gradient(circle,rgba(255,255,255,.35) 1.6px,transparent 2.1px) 0 0/14px 14px,var(--c)}
.play-page .gcard-tile{border:3px solid var(--cm-ink);box-shadow:4px 4px 0 var(--cm-ink)}.play-page .gcard:hover .gcard-tile{transform:translateY(-6px) rotate(-8deg) scale(1.08);box-shadow:6px 8px 0 var(--cm-ink)}
.play-page .gcard-name,.play-page .gcard h3{font:400 clamp(24px,3vw,30px)/1.05 var(--cm-display);letter-spacing:.03em;color:var(--cm-ink)}
.play-page .gcard-desc{font:500 15.5px/1.45 var(--cm-ui);color:var(--cm-ink)}
.play-page .gcard-new{font:700 12px var(--cm-ui);background:var(--cm-pink);color:#fff;border:2px solid var(--cm-ink);border-radius:8px;transform:rotate(6deg);box-shadow:2px 2px 0 var(--cm-ink)}
.play-page .gcard-skills span{border:2px solid var(--cm-ink);background:#fff;font:600 12.5px var(--cm-ui)}
.play-page .gcard-played{font-family:var(--cm-ui)}
.play-page .play-chips a,.play-page .play-chips button{font:600 16px var(--cm-ui);border:3px solid var(--cm-ink);border-radius:14px;box-shadow:0 3px 0 var(--cm-ink);background:#fff;color:var(--cm-ink)}
.play-page .play-search input{font:600 18px var(--cm-ui);border:3px solid var(--cm-ink);border-radius:16px;box-shadow:var(--cm-shadow-sm)}
.play-page .play-daily,.play-page .play-continue{border:3px solid var(--cm-ink);border-radius:20px;box-shadow:var(--cm-shadow-sm);font-family:var(--cm-ui)}

/* ---------- the explainer under the game: friendly, still easy to read ---------- */
.play-page .play-info .w-prose,.play-page .play-learn{font-family:var(--cm-ui);font-size:clamp(17px,1.9vw,19px);line-height:1.6;color:var(--cm-ink)}
.play-page .play-learn{border:3px solid var(--cm-ink);border-radius:22px;box-shadow:var(--cm-shadow-sm);background:#fff}
.play-page .play-facts li,.play-page .play-meta li{font:600 16px var(--cm-ui)}
.play-page .play-loading p{font:400 28px var(--cm-display);letter-spacing:.04em;color:var(--cm-ink)}
.play-page .play-loading .spin{border-color:var(--cm-ink);border-top-color:var(--cm-pink);border-width:5px}

@media(max-width:560px){
  .play-page{--cm-shadow:4px 4px 0 var(--cm-ink)}
  .play-page .play-frame{box-shadow:6px 6px 0 var(--c,var(--cm-pink));border-radius:24px}
  .play-page .gs-stat{min-width:62px;padding:4px 9px 3px}.play-page .qk-choices{grid-template-columns:1fr}
  .play-page .play-head .w-h1{filter:drop-shadow(2px 2px 0 var(--cm-ink)) drop-shadow(4px 4px 0 var(--c,var(--cm-pink)))}
}
@media(prefers-reduced-motion:reduce){
  .play-page .gm-menu,.play-page .qk-card,.play-page .gs-modal-card,.play-page .gm-menu .btn-lg,.play-page .qk-combo,.play-page .play-hero::before,.play-page .play-hero::after,.play-page .qk-choice.ok,.play-page .qk-choice.no,.play-page .tb-cell.on,.play-page .tb-cell.no{animation:none}
  .cm-boom{animation:cm-boom-still .9s forwards}@keyframes cm-boom-still{0%,70%{opacity:1}100%{opacity:0}}
  .play-page .gcard:hover,.play-page .qk-choice:hover,.play-page .tt-chip:hover{transform:none}
}
/* the compact game header in play.css sets its size with !important, so the comic size needs the same weight */
.play-page .w-pagehead.play-head .w-h1{font-size:clamp(30px,5.4vw,58px)!important;line-height:1.02!important;margin:4px 0 10px!important}
.play-page .w-pagehead.play-head{padding:12px 0 10px!important}
@media(max-width:560px){.play-page .w-pagehead.play-head .w-h1{font-size:clamp(28px,8vw,40px)!important}}
.play-page .qk-menu h3,.play-page .qk-menu h2{font:400 clamp(36px,7vw,58px)/1 var(--cm-display);letter-spacing:.03em;text-transform:uppercase;color:var(--c,var(--cm-pink));-webkit-text-stroke:2px var(--cm-ink);paint-order:stroke fill;text-shadow:4px 4px 0 var(--cm-ink);text-align:center}
.play-page .qk-skill b,.play-page .qk-skill h4{font:400 clamp(22px,3vw,28px)/1.1 var(--cm-display);letter-spacing:.03em;color:var(--cm-ink)}
.play-page .qk-skill small,.play-page .qk-skill p{font:500 16px/1.4 var(--cm-ui);color:var(--cm-ink)}
.play-page .qk-ico{filter:drop-shadow(3px 3px 0 var(--cm-ink))}
.play-page .qk-sname{font:400 clamp(24px,3.4vw,32px)/1.05 var(--cm-display);letter-spacing:.03em;color:var(--cm-ink)}
.play-page .qk-sdesc{font:500 clamp(16px,2vw,18px)/1.4 var(--cm-ui);color:var(--cm-ink)}
.play-page .qk-skill small{font:700 15px var(--cm-ui);color:var(--c-ink,var(--cm-ink))}
.play-page .qk-ico{font-size:44px}
.play-page .qk-mini{height:12px;border:2px solid var(--cm-ink);border-radius:99px;overflow:hidden;background:#fff}.play-page .qk-mini i{background:var(--c,var(--cm-pink))}

/* ---------- count-in before a game or a visualizer starts ---------- */
.play-page .fx-ready{position:absolute;inset:0;z-index:25;display:grid;place-items:center;pointer-events:none;background:rgba(255,247,228,.62);border-radius:inherit}
.play-page .fx-ready b{font:400 clamp(56px,15vw,130px)/1 var(--cm-display);letter-spacing:.04em;color:#fff;-webkit-text-stroke:3px var(--cm-ink);paint-order:stroke fill;text-shadow:5px 5px 0 var(--cm-ink),9px 9px 0 var(--c,var(--cm-pink));animation:cm-slam .4s var(--cm-pop) both}
.play-page .fx-ready b.go{color:var(--cm-yellow)}
@keyframes cm-slam{0%{opacity:0;scale:2.6;rotate:-16deg}60%{opacity:1;scale:.9;rotate:3deg}100%{opacity:1;scale:1;rotate:-2deg}}
.play-page .gm-menu{position:relative}
.play-page .gm-launching>:not(.fx-ready){opacity:.22;filter:blur(1.5px);transform:scale(.97);transition:opacity .25s,filter .25s,transform .25s}
.play-page .gm-launching .btn-lg{animation:none}
/* whatever appears in the game area enters with a pop, not a cut */
.play-page .gs-stage>*:not(.gm-menu):not([hidden]):not(.gs-toasts){animation:cm-enter .45s var(--cm-pop) backwards}
@keyframes cm-enter{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}

/* ---------- Sorting Visualizer: bars that slide, compare, swap and lock ---------- */
.play-page .ng-sort{position:relative;height:clamp(210px,42vw,270px);border:4px solid var(--cm-ink);border-radius:20px;background:radial-gradient(circle,rgba(27,19,64,.09) 1.3px,transparent 1.8px) 0 0/16px 16px,#fff;overflow:hidden;box-shadow:var(--cm-shadow-sm)}
.play-page .ng-b{position:absolute;left:0;bottom:0;height:100%;display:flex;align-items:flex-end;transition:transform .4s var(--cm-pop)}
.play-page .ng-bi{width:100%;margin:0 clamp(2px,.6vw,6px);box-sizing:border-box;display:grid;align-content:start;justify-items:center;padding-top:5px;border:3px solid var(--cm-ink);border-bottom:0;border-radius:12px 12px 0 0;background:var(--c,#5875d8);color:#fff;font:400 clamp(15px,2.8vw,22px)/1 var(--cm-display);letter-spacing:.03em;text-shadow:1px 1px 0 var(--cm-ink);transition:background .15s,transform .2s var(--cm-pop)}
.play-page .ng-b.cmp .ng-bi{background:var(--cm-yellow);color:var(--cm-ink);text-shadow:none;transform:translateY(-10px)}
.play-page .ng-b.swap .ng-bi{background:var(--cm-pink)}
.play-page .ng-b.lock .ng-bi{background:var(--cm-mint);color:var(--cm-ink);text-shadow:none}
.play-page .ng-b.wave .ng-bi{animation:cm-hit .55s var(--cm-pop)}
.play-page .ng-b.drop .ng-bi{animation:ng-drop .65s var(--cm-pop) both;animation-delay:inherit}
@keyframes ng-drop{from{transform:translateY(-280px);opacity:0}to{transform:none;opacity:1}}
.play-page .ng-sort.get-ready .ng-b{opacity:.5}
.play-page .ng-counts{display:flex;gap:18px;margin:0;font:600 18px var(--cm-ui);color:var(--cm-ink)}.play-page .ng-counts b{font:400 28px var(--cm-display);letter-spacing:.03em;color:var(--c-ink,var(--cm-ink))}
.play-page .ng-title{font:400 clamp(28px,4.6vw,44px)/1.05 var(--cm-display);letter-spacing:.03em;color:var(--cm-ink);margin:0}
.play-page .ng-copy,.play-page .ng-note{font:500 clamp(16px,2vw,19px)/1.5 var(--cm-ui);color:var(--cm-ink)}.play-page .ng-note{font-weight:700}
.play-page .ng-select{font:600 16px var(--cm-ui);border:3px solid var(--cm-ink);border-radius:12px;box-shadow:0 3px 0 var(--cm-ink);padding:8px 12px;color:var(--cm-ink)}
.play-page .ng-speed{font:700 14px var(--cm-ui);color:var(--cm-ink)}
/* ---------- Pathfinding Visualizer ---------- */
.play-page .ng-path{position:relative;border:4px solid var(--cm-ink);border-radius:20px;background:var(--cm-ink);box-shadow:var(--cm-shadow-sm)}
.play-page .ng-path-cell{border-radius:6px}
.play-page .ng-path-cell.start{box-shadow:0 0 0 3px var(--cm-mint);animation:ng-ping 1.4s ease-out infinite}
.play-page .ng-path.get-ready .ng-path-cell{opacity:.55}
.play-page .ng-path-cell.seen{background:#8fd3ff;animation:ng-seen .5s var(--cm-pop) both}
.play-page .ng-path-cell.path{background:var(--cm-pink);animation:ng-route .4s var(--cm-pop) both}
@keyframes ng-ping{0%{box-shadow:0 0 0 0 rgba(56,217,169,.9)}100%{box-shadow:0 0 0 14px rgba(56,217,169,0)}}
@keyframes ng-seen{0%{transform:scale(.2);background:var(--cm-yellow)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes ng-route{0%{transform:scale(.3) rotate(-30deg)}70%{transform:scale(1.35) rotate(6deg)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.play-page .gs-stage>*,.play-page .ng-b.drop .ng-bi,.play-page .ng-path-cell,.play-page .ng-b.wave .ng-bi{animation:none!important}.play-page .ng-b{transition:none}}