/* Kids Fun Pack - game board styles */
.fit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2cqmin;width:100%;height:100%}

/* tic tac toe */
.ttt{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:2.2cqmin;width:min(86cqmin,520px);aspect-ratio:1;padding:2cqmin;background:var(--panel);border-radius:28px;box-shadow:0 8px 0 rgba(0,0,0,.3), inset 0 0 0 2px var(--line)}
.tcell{border:0;border-radius:20px;background:var(--well);position:relative;min-width:0;min-height:0;padding:0;overflow:hidden;transition:background .15s, transform .1s}
.tcell.open:hover{background:#262a66}
.tcell.open:active{transform:scale(.96)}
.tcell svg{position:absolute;inset:14%;width:72%;height:72%;fill:none;stroke-width:13;stroke-linecap:round}
.tcell .ghost{position:absolute;inset:0;opacity:0;transition:opacity .15s}
.tcell.open:hover .ghost{opacity:.25}
.mk.draw path,.mk.draw circle{stroke-dasharray:200;stroke-dashoffset:200;animation:drawIn .35s ease-out forwards}
@keyframes drawIn{to{stroke-dashoffset:0}}
.tcell.win{background:#3a3f8f;animation:winPulse .9s ease-in-out infinite alternate}
@keyframes winPulse{to{background:#4b52b8;transform:scale(1.04)}}

/* rock paper scissors */
.rps{width:min(100cqw,820px);height:100%;display:flex;flex-direction:column;justify-content:center;gap:4cqmin}
.rps-arena{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.rps-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:1.5cqmin}
.rps-side .ava{width:min(14cqmin,90px);height:min(15.4cqmin,99px)}
.rps-side .nm{font-family:var(--display);font-weight:700;font-size:min(4.4cqmin,22px)}
.rps-hand{width:min(30cqmin,200px);aspect-ratio:1;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 3px var(--line), 0 8px 0 rgba(0,0,0,.25);display:grid;place-items:center;position:relative;font-size:min(16cqmin,104px);line-height:1}
.rps-hand small{position:absolute;bottom:14%;font-size:min(3.4cqmin,16px);font-weight:800;color:var(--muted);font-family:var(--body)}
.rps-hand .fist,.rps-hand .real{position:absolute;inset:0;display:grid;place-items:center}
.rps-hand.reveal .fist{animation:fistShake .75s ease-in-out forwards}
.rps-hand.reveal .real{animation:realIn .35s .75s cubic-bezier(.3,1.6,.5,1) both}
.rps-hand.right .real,.rps-hand.right .fist{transform:scaleX(-1)}
@keyframes fistShake{0%,100%{transform:translateY(0)}20%,60%{transform:translateY(-18%)}40%,80%{transform:translateY(6%)}99%{opacity:1}100%{opacity:0}}
@keyframes realIn{from{transform:scale(.2);opacity:0}}
.rps-hand.right.reveal .real{animation-name:realInR}
@keyframes realInR{from{transform:scaleX(-1) scale(.2);opacity:0}to{transform:scaleX(-1)}}
.rps-hand.won{box-shadow:inset 0 0 0 4px var(--mint), 0 0 30px rgba(94,240,176,.45), 0 8px 0 rgba(0,0,0,.25)}
.rps-hand.lost{opacity:.55}
.rps-hand .dots{font-size:min(10cqmin,60px)}
.rps-mid{font-family:var(--display);font-weight:800;font-size:min(8cqmin,46px);color:var(--sun);text-align:center;line-height:1}
.rps-mid small{display:block;font-size:min(3.4cqmin,16px);color:var(--muted);margin-top:6px}
.pips{display:flex;gap:6px}
.pips i{width:14px;height:14px;border-radius:50%;background:var(--well);box-shadow:inset 0 0 0 2px var(--line2)}
.pips i.on{background:var(--pc);box-shadow:none}
.rps-picks{display:flex;justify-content:center;gap:2.5cqw}
.rps-pick{border:0;border-radius:24px;background:var(--panel);box-shadow:0 7px 0 rgba(0,0,0,.3), inset 0 0 0 2px var(--line);padding:1.8cqmin 3cqmin 1.2cqmin;display:flex;flex-direction:column;align-items:center;font-size:min(11cqmin,64px);line-height:1.1;transition:transform .12s, background .12s}
.rps-pick span{font-family:var(--display);font-weight:700;font-size:min(3.6cqmin,18px)}
.rps-pick:hover{transform:translateY(-6px);background:#30357a}
.rps-pick:active{transform:translateY(3px)}
.rps-wait{text-align:center;color:var(--muted);font-family:var(--display);font-weight:700;font-size:min(4.4cqmin,22px)}

/* memory */
.mem{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:min(1.4cqmin,12px);width:min(100cqw, calc(96cqh * var(--cols) / var(--rows) * .74))}
.mcard{aspect-ratio:3/4;border:0;padding:0;background:transparent;perspective:600px}
.mcard .in{display:block;position:relative;width:100%;height:100%;transition:transform .42s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.mcard.up .in{transform:rotateY(180deg)}
.mcard .back,.mcard .face{position:absolute;inset:0;border-radius:min(2cqmin,16px);backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center}
.mcard .back{background:radial-gradient(circle at 50% 45%, #ffffff30 0 18%, transparent 19%), repeating-linear-gradient(45deg, #6c5ce7 0 10px, #7d6ef0 10px 20px);box-shadow:0 5px 0 rgba(0,0,0,.3), inset 0 0 0 3px rgba(255,255,255,.18)}
.mcard .back::after{content:"?";font-family:var(--display);font-weight:800;font-size:min(5cqmin,34px);color:#fff}
.mcard .face{transform:rotateY(180deg);background:#fff8e7;font-size:min(var(--fs,7cqmin),56px);box-shadow:0 5px 0 rgba(0,0,0,.3), inset 0 0 0 4px var(--oc,transparent)}
.mcard:not(:disabled):hover .back{filter:brightness(1.15)}
.mcard:not(:disabled):hover .in{transform:translateY(-4px)}
.mcard.owned .face{opacity:.72}
.mcard.match .face{animation:matchPop .55s ease-out}
@keyframes matchPop{40%{transform:rotateY(180deg) scale(1.15)}}
.mcard.miss .face{animation:missWiggle .5s ease-in-out}
@keyframes missWiggle{25%{transform:rotateY(180deg) rotate(-6deg)}75%{transform:rotateY(180deg) rotate(6deg)}}

/* four in a row */
.c4{width:min(100cqw, calc(94cqh * 7 / 6.4));padding:min(1.6cqmin,14px);background:linear-gradient(#3d6ff0,#2f58d0);border-radius:26px;box-shadow:0 10px 0 #1d3a96, inset 0 0 0 3px rgba(255,255,255,.18)}
.c4grid{display:grid;grid-template-columns:repeat(7,1fr)}
.c4col{border:0;background:transparent;padding:0;display:flex;flex-direction:column;position:relative;border-radius:14px}
.c4col:not(.full):hover{background:rgba(255,255,255,.1)}
.c4cell{aspect-ratio:1;display:grid;place-items:center;padding:9%}
.c4cell i{width:100%;height:100%;border-radius:50%;background:#14163a;box-shadow:inset 0 5px 0 rgba(0,0,0,.4);display:block}
.c4cell i.disc{background:radial-gradient(circle at 35% 30%, rgba(255,255,255,.45) 0 14%, transparent 15%), var(--pc);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25), 0 0 0 3px rgba(0,0,0,.15)}
.c4cell i.drop{animation:c4drop calc(.18s + var(--r) * .05s) cubic-bezier(.5,0,1,1) both, c4bounce .2s calc(.18s + var(--r) * .05s) ease-out}
@keyframes c4drop{from{transform:translateY(calc(var(--r) * -118%))}}
@keyframes c4bounce{50%{transform:translateY(-10%)}}
.c4cell i.win{animation:winGlow .7s ease-in-out infinite alternate}
@keyframes winGlow{to{box-shadow:0 0 0 4px #fff, 0 0 22px #fff}}
.c4ghost{position:absolute;top:-13%;left:14%;right:14%;aspect-ratio:1;border-radius:50%;background:var(--pc);opacity:0;transition:opacity .15s;pointer-events:none}
.c4col:not(.full):hover .c4ghost{opacity:.8}

/* snakes and ladders */
.snk-wrap{display:flex;align-items:center;justify-content:center;gap:3cqmin;width:100%;height:100%}
.snk-board{position:relative;width:min(calc(100cqw - 210px), 88cqh);aspect-ratio:1;margin-bottom:5%}
.snk-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(10,1fr);border-radius:18px;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.3), 0 0 0 4px #fff2}
.snk-cells div{display:flex;align-items:flex-start;justify-content:flex-start;padding:4% 0 0 6%;font-family:var(--display);font-weight:700;font-size:min(2.2cqmin,15px);color:rgba(20,22,58,.55)}
.snk-cells div.c0{background:#fff4c9}.snk-cells div.c1{background:#ffdcae}.snk-cells div.c2{background:#c8f7dc}.snk-cells div.c3{background:#cde7ff}
.snk-cells div.goal{background:var(--sun);color:#24203b}
.snk-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.snk-toks{position:absolute;inset:0;pointer-events:none}
.tok{position:absolute;width:8%;height:8.8%;transform:translate(-50%,-62%);transition:left .14s ease-out, top .14s ease-out;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35));z-index:2}
.tok.slide{transition:left .7s ease-in-out, top .7s ease-in-out}
.tok.me{z-index:3}
.dice-panel{display:flex;flex-direction:column;align-items:center;gap:2.4cqmin;width:180px;flex:none}
.die{width:min(20cqmin,110px);aspect-ratio:1;border-radius:22%;background:#fff;box-shadow:0 7px 0 #b9bce0, inset 0 -5px 0 #e4e6ff;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:14%}
.die i{width:68%;aspect-ratio:1;border-radius:50%;background:#24203b;place-self:center;visibility:hidden}
.die i.on{visibility:visible}
.die.roll{animation:dieRoll .55s cubic-bezier(.3,1.4,.5,1)}
@keyframes dieRoll{0%{transform:rotate(-200deg) scale(.5)}100%{transform:none}}
.die-note{font-family:var(--display);font-weight:700;color:var(--muted);text-align:center;min-height:24px}
.start-pad{position:absolute;left:0;right:0;top:101.5%;height:8%;border-radius:12px;background:rgba(255,255,255,.06);display:flex;align-items:center;padding-left:2%;font-family:var(--display);font-weight:700;color:var(--muted);font-size:min(2.4cqmin,15px)}
@container (max-aspect-ratio: 1/1){
  .snk-wrap{flex-direction:column;gap:1.5cqmin}
  .snk-board{width:min(100cqw, calc(100cqh - 175px))}
  .dice-panel{flex-direction:row;width:auto}
  .dice-panel .die{width:min(16cqmin,74px)}
}

/* pop and race */
.tr-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.tr-svg{width:min(100cqw,100cqh);height:min(100cqw,100cqh);overflow:visible}
.tr-svg .hole{fill:#14163a;stroke:rgba(255,255,255,.12);stroke-width:.5}
.tr-svg .peg{transition:transform .14s ease-out;cursor:default}
.tr-svg .peg.fly{transition:transform .5s cubic-bezier(.4,1.4,.6,1)}
.tr-svg .peg.legal{cursor:pointer}
.tr-svg .peg.legal .ring{animation:legalRing .8s ease-in-out infinite alternate}
@keyframes legalRing{from{stroke-opacity:.2;r:4.6}to{stroke-opacity:1;r:5.6}}
.tr-svg .dome{cursor:default}
.tr-svg .dome.ready{cursor:pointer}
.tr-svg .dome .glass{transition:transform .15s;transform-origin:60px 60px}
.tr-svg .dome.ready .glass{animation:domeBreath 1s ease-in-out infinite alternate}
@keyframes domeBreath{to{transform:scale(1.06)}}
.tr-svg .dome.pop .dieg{animation:domePop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes domePop{0%{transform:translateY(0) rotate(0)}30%{transform:translateY(-6px) rotate(90deg)}100%{transform:none}}
.tr-svg .dieg{transform-origin:60px 60px}
.tr-svg text{font-family:var(--display);font-weight:800}

/* playing cards shared */
.cardtable{width:min(100cqw,1000px);height:100%;display:flex;flex-direction:column;justify-content:space-between;align-items:center;gap:1.5cqh;padding:.5cqh 0}
.opps{display:flex;justify-content:center;gap:2cqw;flex-wrap:wrap}
.opp{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border-radius:18px;padding:8px 14px 8px 8px;border:0;box-shadow:inset 0 0 0 2px transparent;transition:box-shadow .2s, background .2s, transform .12s;text-align:left}
.opp .ava{width:44px;height:48px}
.opp .nm{font-family:var(--display);font-weight:700;font-size:16px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.opp .sub{font-size:13px;color:var(--muted);font-weight:800}
.opp.turn{box-shadow:inset 0 0 0 2px var(--pc);background:rgba(255,255,255,.09)}
.opp.askable{cursor:pointer;box-shadow:inset 0 0 0 3px var(--sun);background:rgba(255,210,63,.12);animation:askPulse .9s ease-in-out infinite alternate}
.opp.askable:hover{transform:translateY(-3px)}
@keyframes askPulse{to{box-shadow:inset 0 0 0 3px var(--sun), 0 0 18px rgba(255,210,63,.5)}}
.backs{display:flex}
.backs i{width:16px;height:23px;border-radius:4px;background:repeating-linear-gradient(45deg,#6c5ce7 0 4px,#7d6ef0 4px 8px);box-shadow:0 0 0 1.5px #fff6;margin-left:-8px}
.backs i:first-child{margin-left:0}
.center-table{flex:1;display:flex;align-items:center;justify-content:center;gap:5cqw;position:relative;min-height:0;width:100%}
.hand-wrap{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
.hand-label{font-family:var(--display);font-weight:700;color:var(--muted);font-size:15px;min-height:20px;text-align:center}
.hand{display:flex;justify-content:center;align-items:flex-end;padding-top:18px;max-width:100%}

/* color clash cards */
.ucard{--w:min(13.5cqmin,100px);width:var(--w);aspect-ratio:5/7.4;border-radius:calc(var(--w)*.14);border:0;padding:0;position:relative;flex:none;background:#fff;box-shadow:0 4px 0 rgba(0,0,0,.35);transition:transform .14s, filter .14s, margin .2s;font-family:var(--display);font-weight:800;color:#fff}
.ucard .bg{position:absolute;inset:calc(var(--w)*.06);border-radius:calc(var(--w)*.1);background:var(--cc);overflow:hidden}
.ucard .oval{position:absolute;left:12%;right:12%;top:18%;bottom:18%;border-radius:50%;background:#fff;transform:rotate(28deg);display:grid;place-items:center}
.ucard .oval b{transform:rotate(-28deg);color:var(--cc);font-size:calc(var(--w)*.46);line-height:1;-webkit-text-stroke:calc(var(--w)*.012) #24203b}
.ucard .cn{position:absolute;font-size:calc(var(--w)*.2);line-height:1;-webkit-text-stroke:calc(var(--w)*.008) #24203b}
.ucard .cn.tl{top:9%;left:12%}.ucard .cn.br{bottom:9%;right:12%;transform:rotate(180deg)}
.ucard.c-r{--cc:#ff4757}.ucard.c-y{--cc:#ffc312}.ucard.c-g{--cc:#2ed573}.ucard.c-b{--cc:#3d8bff}.ucard.c-w{--cc:#24203b}
.ucard.c-w .oval{background:conic-gradient(#ff4757 0 25%, #ffc312 0 50%, #2ed573 0 75%, #3d8bff 0)}
.ucard.c-w .oval b{color:#fff;-webkit-text-stroke:calc(var(--w)*.015) #24203b}
.ucard.back{background:#fff}
.ucard.back .bg{background:radial-gradient(ellipse at center, #ff4757 0 32%, transparent 33%), #24203b}
.ucard.back .oval{display:none}
.ucard.back::after{content:"Clash";position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--w)*.2);color:#ffc312;transform:rotate(-24deg);-webkit-text-stroke:calc(var(--w)*.01) #24203b}
.uhand .ucard{margin-left:calc(var(--ov,0px) * -1)}
.uhand .ucard:first-child{margin-left:0}
.uhand .ucard.ok{transform:translateY(-14px);filter:drop-shadow(0 0 10px rgba(255,255,255,.5))}
.uhand .ucard.ok:hover{transform:translateY(-26px) scale(1.06);z-index:2}
.uhand .ucard.no{filter:brightness(.55)}
.uhand .ucard.new{animation:dealIn .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes dealIn{from{transform:translateY(-120%) rotate(-20deg);opacity:0}}
.ucard.land{animation:land .45s cubic-bezier(.3,1.4,.5,1)}
@keyframes land{from{transform:translateY(-60%) scale(1.5) rotate(-30deg);opacity:0}}
.pile{position:relative;display:grid}
.pile>*{grid-area:1/1}
.pile .under{transform:rotate(var(--rt)) translate(var(--dx),var(--dy));filter:brightness(.8)}
.deckbtn{border:0;background:transparent;padding:0;position:relative}
.deckbtn .ucard,.deckbtn .pcard{pointer-events:none}
.deckbtn.go .ucard,.deckbtn.go .pcard{animation:deckWiggle 1s ease-in-out infinite}
@keyframes deckWiggle{0%,100%{transform:rotate(0)}10%{transform:rotate(-5deg)}20%{transform:rotate(5deg)}30%{transform:rotate(0)}}
.deck-count{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:13px;font-weight:800;color:var(--muted)}
.color-ring{position:absolute;width:min(46cqmin,330px);aspect-ratio:1;border-radius:50%;border:6px dashed var(--ring);opacity:.75;animation:spin 14s linear infinite;pointer-events:none}
.color-ring.ccw{animation-direction:reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.color-dot{position:absolute;top:4%;font-family:var(--display);font-weight:800;font-size:15px;background:var(--ring);color:#24203b;padding:3px 12px;border-radius:10px}
.wild-pick{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:rgba(10,11,36,.75);border-radius:24px;animation:fade .2s}
.wild-pick h3{font-size:26px}
.wild-pick .opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wild-pick .opts button{width:110px;height:80px;border-radius:18px;border:0;background:var(--cc);box-shadow:0 6px 0 rgba(0,0,0,.3);font-family:var(--display);font-weight:800;font-size:19px;color:#24203b}
.wild-pick .opts button:hover{transform:translateY(-3px)}

/* standard playing cards */
.pcard{--w:min(13cqmin,94px);width:var(--w);aspect-ratio:5/7;border-radius:calc(var(--w)*.12);border:0;padding:0;background:#fffdf7;color:#24203b;position:relative;flex:none;box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 0 0 1px #d8d4c6;font-family:var(--display);font-weight:800;transition:transform .14s, filter .14s}
.pcard.red{color:#e63950}
.pcard .tl{position:absolute;top:6%;left:9%;font-size:calc(var(--w)*.22);line-height:.9;text-align:center}
.pcard .mid{position:absolute;inset:0;display:grid;place-items:center;font-size:calc(var(--w)*.5)}
.pcard.back{background:repeating-linear-gradient(45deg,#6c5ce7 0 7px,#7d6ef0 7px 14px);box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 0 0 4px #fff}
.pcard.back .tl,.pcard.back .mid{display:none}
.phand{display:flex;justify-content:center;align-items:flex-end;flex-wrap:nowrap;gap:12px;padding-top:16px}
.meld{display:flex;padding:6px 6px 10px;border-radius:14px;background:color-mix(in srgb, var(--mc) 22%, transparent);box-shadow:inset 0 -4px 0 var(--mc)}
.meld .pcard,.loose .pcard{margin-left:calc(var(--ov,14px) * -1)}
.meld .pcard:first-child,.loose .pcard:first-child{margin-left:0}
.loose{display:flex;padding:6px 6px 10px}
.phand .pcard.pickable{cursor:pointer}
.phand .pcard.pickable:hover{transform:translateY(-16px);z-index:2}
.phand .pcard.locked{filter:brightness(.7)}
.pcard.new{animation:dealIn .45s cubic-bezier(.3,1.4,.5,1);box-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 0 3px var(--sun)}
.pilebtn{border:0;background:transparent;padding:0;position:relative}
.pilebtn.go .pcard{box-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 0 3px var(--sun);animation:deckWiggle 1s ease-in-out infinite}
.slot-label{text-align:center;font-size:13px;font-weight:800;color:var(--muted);margin-top:8px}
.reveal-hands{display:flex;flex-direction:column;gap:8px;align-items:center}
.reveal-hands .row{gap:8px}
.reveal-hands .pcard{--w:min(7cqmin,52px)}

/* go fish */
.gf-groups{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;padding-top:14px}
.gf-group{border:0;background:transparent;padding:0;display:flex;transition:transform .14s;position:relative}
.gf-group .pcard{margin-left:calc(var(--w) * -.62)}
.gf-group .pcard:first-child{margin-left:0}
.gf-group.can{cursor:pointer}
.gf-group.can:hover{transform:translateY(-10px)}
.gf-group.sel{transform:translateY(-22px)}
.gf-group.sel .pcard{box-shadow:0 4px 0 rgba(0,0,0,.35), 0 0 0 4px var(--sun)}
.pond{display:flex;flex-direction:column;align-items:center;gap:6px}
.pond .water{width:min(26cqmin,170px);aspect-ratio:1.5;border-radius:50%;background:radial-gradient(ellipse at 50% 40%, #6fd3ff, #1c7fd6);box-shadow:inset 0 -8px 0 rgba(0,0,0,.2), 0 0 0 6px #b98a52;display:grid;place-items:center;font-size:min(8cqmin,48px)}
.pond .water span{animation:swim 3s ease-in-out infinite}
@keyframes swim{50%{transform:translateX(18px) scaleX(-1)}}
.bubble{background:#fff;color:#24203b;border-radius:18px;padding:10px 16px;font-weight:800;max-width:min(80cqw,420px);text-align:center;position:relative;box-shadow:0 6px 0 rgba(0,0,0,.25);animation:pop .35s cubic-bezier(.3,1.4,.5,1)}
.bubble b{font-family:var(--display)}
.books{display:flex;gap:3px;flex-wrap:wrap;max-width:140px}
.books i{font-style:normal;font-family:var(--display);font-weight:800;font-size:12px;background:var(--sun);color:#24203b;border-radius:5px;padding:0 5px}
.mybooks{display:flex;gap:6px;align-items:center;flex-wrap:wrap;justify-content:center;font-weight:800;color:var(--muted);font-size:14px}
.mybooks i{font-style:normal;font-family:var(--display);font-weight:800;background:var(--sun);color:#24203b;border-radius:7px;padding:1px 8px;font-size:15px}

/* dots and boxes */
.db-svg{width:min(100cqw,100cqh);height:min(100cqw,100cqh)}
.db-svg .dot{fill:#fff}
.db-svg .ln line{stroke:rgba(255,255,255,.08);stroke-width:7;stroke-linecap:round;transition:stroke .12s}
.db-svg.mine .ln:not(.on){cursor:pointer}
.db-svg.mine .ln:not(.on):hover line{stroke:var(--mc);stroke-opacity:.6}
.db-svg .ln.on line{stroke:var(--lc);stroke-width:9}
.db-svg .ln.last line{animation:lnPulse .6s ease-out}
@keyframes lnPulse{0%{stroke-width:20}}
.db-svg .bx{transition:fill-opacity .3s}
.db-svg .bx.new{animation:bxIn .45s cubic-bezier(.3,1.5,.5,1);transform-box:fill-box;transform-origin:center}
@keyframes bxIn{from{transform:scale(.2)}}
.db-svg text{font-family:var(--display);font-weight:800}

/* checkers */
.ckb{width:min(100cqw,100cqh);aspect-ratio:1;display:grid;grid-template-columns:repeat(8,1fr);border-radius:16px;overflow:hidden;box-shadow:0 8px 0 rgba(0,0,0,.35), 0 0 0 6px #6b4a2f}
.ckb .sq{border:0;padding:0;position:relative;display:grid;place-items:center;background:#f3dfbf}
.ckb .sq.dk{background:#8a5a3b}
.ckb .sq.last{background:#a8774f}
.ckb .sq.tgt{cursor:pointer}
.ckb .sq.tgt::after{content:"";width:34%;aspect-ratio:1;border-radius:50%;background:var(--sun);box-shadow:0 0 12px var(--sun);animation:tgtPulse .7s ease-in-out infinite alternate}
@keyframes tgtPulse{to{transform:scale(1.25)}}
.ck{width:78%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%, transparent 0 46%, rgba(0,0,0,.18) 47% 52%, transparent 53%), var(--pc);box-shadow:inset 0 -5px 0 rgba(0,0,0,.28), 0 4px 0 rgba(0,0,0,.35);display:grid;place-items:center;font-size:min(4.6cqmin,30px);transition:transform .12s}
.ckb .sq.can .ck{cursor:pointer;box-shadow:inset 0 -5px 0 rgba(0,0,0,.28), 0 4px 0 rgba(0,0,0,.35), 0 0 0 3px rgba(255,255,255,.65)}
.ckb .sq.can:hover .ck{transform:translateY(-3px)}
.ckb .sq.sel .ck{transform:translateY(-5px) scale(1.06);box-shadow:inset 0 -5px 0 rgba(0,0,0,.28), 0 8px 0 rgba(0,0,0,.35), 0 0 0 4px var(--sun)}
.ck.moved{animation:ckIn .3s cubic-bezier(.3,1.5,.5,1)}
@keyframes ckIn{from{transform:scale(.6)}}

/* mancala */
.mc{width:min(100cqw, calc(96cqh * 2.6));aspect-ratio:2.6;background:linear-gradient(#b8794a,#93592f);border-radius:999px;box-shadow:0 10px 0 #5e3518, inset 0 4px 0 rgba(255,255,255,.18);display:grid;grid-template-columns:1.1fr 6fr 1.1fr;align-items:center;padding:3% 3.2%;gap:2%}
.mc .rows{display:grid;grid-template-rows:1fr 1fr;gap:10%;height:80%}
.mc .row6{display:grid;grid-template-columns:repeat(6,1fr);gap:4%}
.mc .pit,.mc .store{border:0;padding:0;border-radius:50%;background:radial-gradient(circle at 50% 35%, #5c3418, #7a4826 70%);box-shadow:inset 0 6px 10px rgba(0,0,0,.45);position:relative;aspect-ratio:1;align-self:center}
.mc .store{aspect-ratio:auto;height:84%;border-radius:999px}
.mc .pit.can{cursor:pointer;box-shadow:inset 0 6px 10px rgba(0,0,0,.45), 0 0 0 3px var(--sun)}
.mc .pit.can:hover{filter:brightness(1.2)}
.mc .pit.end,.mc .store.end{box-shadow:inset 0 6px 10px rgba(0,0,0,.45), 0 0 0 3px #fff}
.mc .seed{position:absolute;width:15%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25), inset 1px 1px 0 rgba(255,255,255,.5)}
.mc .store .seed{width:28%}
.mc .cnt{position:absolute;left:50%;transform:translateX(-50%);font-family:var(--display);font-weight:800;font-size:min(3.4cqmin,20px);color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.4);pointer-events:none}
.mc .row6.top .cnt{top:-34%}.mc .row6.bot .cnt{bottom:-36%}
.mc .store .cnt{top:50%;transform:translate(-50%,-50%);font-size:min(5cqmin,30px)}
.mc .cnt.bump{animation:cntBump .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes cntBump{50%{transform:translateX(-50%) scale(1.5)}}
.mc .store .cnt.bump{animation:cntBumpS .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes cntBumpS{50%{transform:translate(-50%,-50%) scale(1.4)}}
.mc-wrap{display:flex;flex-direction:column;align-items:center;gap:1.4cqh;width:100%}
.mc-label{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:700;color:var(--muted)}
.mc-label i{width:14px;height:14px;border-radius:50%;background:var(--pc)}

/* word detective */
.wd{width:min(100cqw,860px);display:flex;flex-direction:column;align-items:center;gap:3cqh}
.wd-top{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:center}
.wd-cat{font-family:var(--display);font-weight:800;font-size:min(5cqmin,24px);background:var(--panel);padding:6px 18px;border-radius:16px;box-shadow:inset 0 0 0 2px var(--line)}
.wd-round{color:var(--muted);font-weight:800}
.wd-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:min(1.2cqmin,10px)}
.wd-tile{width:min(9cqmin,62px);aspect-ratio:.85;border-radius:14px;background:var(--panel);box-shadow:inset 0 -5px 0 rgba(0,0,0,.25), inset 0 0 0 2px var(--line);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:min(6.4cqmin,42px)}
.wd-tile.on{background:#fff;color:#24203b;box-shadow:inset 0 -5px 0 #c9cdf5}
.wd-tile.new{animation:tileFlip .45s cubic-bezier(.3,1.5,.5,1)}
@keyframes tileFlip{from{transform:rotateX(90deg) scale(.6)}}
.wd-tile.missed{background:#ffe1e6;color:#d6334f}
.wd-lives{display:flex;gap:6px;align-items:center;font-weight:800;color:var(--muted)}
.wd-lives i{font-style:normal;font-size:min(5cqmin,26px);transition:opacity .3s, filter .3s}
.wd-lives i.gone{opacity:.25;filter:grayscale(1)}
.kb{display:flex;flex-direction:column;gap:min(1.1cqmin,8px);align-items:center;width:100%}
.kb div{display:flex;gap:min(1.1cqmin,8px)}
.kb button{width:min(8.6cqw,7.4cqh,56px);aspect-ratio:.9;border:0;border-radius:12px;background:#e9ebff;color:#24203b;font-family:var(--display);font-weight:800;font-size:min(4.4cqmin,24px);box-shadow:0 4px 0 #9da2d8;transition:transform .08s}
.kb button:not(:disabled):hover{background:#fff;transform:translateY(-2px)}
.kb button:not(:disabled):active{transform:translateY(3px);box-shadow:0 1px 0 #9da2d8}
.kb button.hit{background:var(--mint);box-shadow:0 4px 0 #2b9b6c}
.kb button.miss{background:#5a5e8c;color:#9da2d8;box-shadow:0 4px 0 #3c3f66}
.kb.locked button:not(.hit):not(.miss){filter:brightness(.75)}
.wd-end{font-family:var(--display);font-weight:800;font-size:min(5cqmin,26px);text-align:center;animation:pop .4s}

/* shared bits */
.side-note{font-family:var(--display);font-weight:700;color:var(--muted);text-align:center}
.mini-ava{display:inline-block;width:22px;height:24px;vertical-align:-6px}

.opp{position:relative}
.opp::after{content:"";position:absolute;inset:-4px;border-radius:22px;border:3px solid var(--mint);box-shadow:0 0 16px 2px rgba(94,240,176,.6);opacity:0;transition:opacity .15s;pointer-events:none}
.opp.speaking::after{opacity:1;animation:talkPulse .8s ease-in-out infinite alternate}
#game.no-strip .strip{display:none}