/* Mivo Games (#games on wellness.php): picker, levels, versus lobby, score bar, result panel, and the three boards
   (Calm Match .cm-*, Word Garden .wg-*, Still Water .sp-*, Four in a Row .c4-*). Uses the --mw-* tokens set on .mw in wellness.css. */

.ga-head{max-width:46rem}
.ga-head .eyebrow{margin-bottom:1rem}
.ga{display:grid;gap:2rem;margin-top:2.5rem}
.ga-side{min-width:0}

/* Game picker */
.ga-games{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.ga-game{position:relative;display:flex;flex-direction:column;align-items:center;gap:.55rem;padding:1rem .5rem;border:1px solid var(--mw-line);border-radius:1.1rem;background:#fff;text-align:center;color:var(--mw-ink);transition:border-color .2s,box-shadow .25s var(--ease),transform .25s var(--ease)}
.ga-game:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 14px 30px -20px rgba(29,52,50,.5)}
.ga-game[aria-pressed=true]{border-color:var(--mw-purple);box-shadow:0 0 0 1px var(--mw-purple),0 18px 36px -24px rgba(70,64,90,.7)}
.ga-game:disabled{cursor:default}
.ga-game:disabled:not([aria-pressed=true]){opacity:.5}
.ga-game-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:.9rem;background:var(--m0);color:var(--m4);transition:background .2s,color .2s}
.ga-game[aria-pressed=true] .ga-game-ic{background:var(--mw-purple);color:#fff}
.ga-game-ic svg{width:22px;height:22px}
.ga-game-tx b{display:block;font:600 .9rem/1.25 var(--mw-font)}
.ga-game-tx small{display:none}
.ga-tag{font:400 .6rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--mw-ink-3)}

/* Level and mode */
.ga-opts{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;margin-top:1.25rem}
.ga-seg{display:inline-flex;align-items:center;gap:.25rem;padding:.3rem;border:1px solid var(--mw-line);border-radius:999px;background:#fff}
.ga-seg-label{padding:0 .5rem 0 .6rem;font:400 .6rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--mw-ink-3)}
.ga-seg button{padding:.5rem .95rem;border-radius:999px;font:500 .82rem/1.1 var(--mw-font);color:var(--mw-ink-2);transition:background .2s,color .2s}
.ga-seg button:hover:not(:disabled){color:var(--m4)}
.ga-seg button[aria-pressed=true]{background:var(--mw-purple);color:#fff}
.ga-seg button:disabled:not([aria-pressed=true]){opacity:.45;cursor:default}
.ga-off{margin-top:1rem;font-size:.8rem;color:var(--mw-ink-3)}

/* Versus lobby */
.ga-vs{margin-top:1.25rem;padding:1.4rem;border:1px solid var(--mw-line);border-radius:1.25rem;background:#fff;box-shadow:0 30px 60px -45px rgba(29,52,50,.5)}
.ga-as{font-size:.9rem;color:var(--mw-ink-2)}
.ga-as b{font-weight:600;color:var(--mw-ink)}
.ga-field label,.ga-ch label{display:block;margin-bottom:.4rem;font:500 .8rem/1.3 var(--mw-font);color:var(--mw-ink-2)}
.ga-hint{margin-top:.45rem;font-size:.75rem;color:var(--mw-ink-3)}
.ga-hint a{color:var(--m3);text-decoration:underline;text-underline-offset:2px}
.ga-online{display:flex;align-items:center;gap:.5rem;margin-top:.9rem;font:500 .78rem/1 var(--mw-font);color:var(--m3)}
.ga-online i{width:8px;height:8px;border-radius:50%;background:#3fb27f;box-shadow:0 0 0 0 rgba(63,178,127,.5);animation:ga-ping 2s infinite}
.ga-actions{margin-top:.25rem}
.ga-quick{margin-top:1rem}
.ga-or{display:flex;align-items:center;gap:.75rem;margin:1.25rem 0 1rem;font-size:.75rem;color:var(--mw-ink-3)}
.ga-or::before,.ga-or::after{content:"";flex:1;height:1px;background:var(--mw-line)}
.ga-ch div{display:flex;gap:.5rem}
.ga-ch .mw-in{flex:1;min-width:0}
.ga-ch .mw-btn{flex:none}
.ga-wait{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:1rem}
.ga-wait p{flex:1;min-width:12rem;font-size:.85rem;color:var(--mw-ink-2)}
.ga-spin{width:22px;height:22px;flex:none;border:2.5px solid var(--m0);border-top-color:var(--mw-teal);border-radius:50%;animation:ga-spin .8s linear infinite}
.ga-err{margin-top:1rem;padding:.7rem .85rem;border-radius:.75rem;background:#fbefec;color:#7d3328;font-size:.8rem;line-height:1.45}
.mw-btn:disabled{opacity:.55;cursor:default}

/* Score bar and race lanes */
.mw-score{display:flex;gap:1rem}
.mw-score div{min-width:84px;padding:.7rem 1rem;border:1px solid var(--mw-line);border-radius:1rem;background:#fff}
.mw-score dt{font:400 .65rem/1.4 var(--mono);text-transform:uppercase;letter-spacing:.18em;color:var(--mw-ink-3)}
.mw-score dd{margin-top:.2rem;font:600 1.35rem/1.1 var(--mw-font);color:var(--m4)}
.mw-game{padding:1.25rem;border-radius:1.75rem;background:linear-gradient(160deg,#141617,#060707);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 40px 70px -40px rgba(0,0,0,.85)}
.mw-game-msg{min-height:2.8em;margin-bottom:1rem;text-align:center;font:500 .9rem/1.4 var(--mw-font);color:#e8e5f3}
.ga-stage{min-width:0}
.ga-hud{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.ga-hud .mw-score{margin-top:0;gap:.6rem}
.ga-hud .mw-score div{min-width:74px;padding:.55rem .85rem}
.ga[data-solo-only] .ga-modes{display:none} /* Word Garden, Still Water: solo only */
[data-mode=versus] .ga-new,[data-mode=versus][data-game=four] .ga-levels{display:none}
.ga-race{display:grid;gap:.45rem;margin-bottom:1rem;padding:.85rem 1rem;border:1px solid var(--mw-line);border-radius:1rem;background:#fff}
.ga-lane{display:grid;grid-template-columns:6.5rem 1fr;align-items:center;gap:.75rem;font:500 .78rem/1.2 var(--mw-font);color:var(--mw-ink-2)}
.ga-lane span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ga-lane i{position:relative;height:8px;border-radius:99px;background:var(--m0);overflow:hidden}
.ga-lane i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0%);border-radius:inherit;background:linear-gradient(90deg,var(--m1),var(--mw-teal));transition:width .5s var(--ease)}
.ga-lane-opp i::after{background:linear-gradient(90deg,#c9bfe0,var(--mw-purple))}

/* Board box, countdown and result panel */
.ga-box{position:relative;overflow:hidden}
.ga-box:has(.ga-over:not([hidden])){min-height:30rem}
.ga-board{min-height:12rem}
.is-locked{pointer-events:none}
.ga-count{position:absolute;inset:0;z-index:3;display:grid;place-items:center;background:rgba(40,36,54,.55);font:700 clamp(4rem,12vw,7rem)/1 var(--mw-font);color:#fff;pointer-events:none}
.ga-count.pulse{animation:ga-count .9s var(--ease)}
.ga-count.go{color:#bfe6d5;animation:ga-go .7s var(--ease) forwards}
.ga-over{position:absolute;inset:0;z-index:4;display:grid;place-items:center;overflow:auto;padding:1rem;background:rgba(40,36,54,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:ga-fade .35s var(--ease)}
.ga-over-card{width:100%;max-width:25rem;padding:1.75rem 1.5rem 1.5rem;border-radius:1.5rem;background:#fff;text-align:center;color:var(--mw-ink);box-shadow:0 40px 80px -30px rgba(0,0,0,.5);animation:ga-pop .5s cubic-bezier(.2,1.4,.4,1)}
.ga-over-ic{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 1rem;border-radius:50%;background:var(--m0);color:var(--m3)}
.ga-over-ic svg{width:32px;height:32px}
.is-win .ga-over-ic{background:linear-gradient(145deg,#ffe3a3,#f2b46d);color:#7a4a12;box-shadow:0 12px 30px -10px rgba(242,180,109,.8)}
.ga-over-card h3{font:600 1.35rem/1.25 var(--mw-font);letter-spacing:0;color:var(--mw-ink)}
.ga-badge{display:inline-block;margin-top:.6rem;padding:.3rem .75rem;border-radius:999px;background:#fff1d1;color:#8a5a14;font:600 .72rem/1.2 var(--mw-font)}
.ga-over-text{margin-top:.6rem;font-size:.9rem;line-height:1.5;color:var(--mw-ink-2)}
.ga-over-stats{display:flex;justify-content:center;gap:.5rem;margin-top:1.1rem}
.ga-over-stats div{flex:1;max-width:7.5rem;padding:.55rem .4rem;border-radius:.8rem;background:var(--mw-bg)}
.ga-over-stats dt{font:400 .58rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.14em;color:var(--mw-ink-3)}
.ga-over-stats dd{margin-top:.2rem;font:600 1rem/1.2 var(--mw-font);color:var(--m4)}
.ga-quote{margin-top:1rem;font:500 1.35rem/1.2 "Caveat",cursive;color:var(--m3)}
.ga-over-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1.25rem}
.ga-confetti{position:fixed;inset:0;z-index:200;width:100%;height:100%;pointer-events:none}

/* Challenge toast (outside the section, so it shows anywhere on the page) */
.ga-toast{position:fixed;left:50%;bottom:1rem;z-index:120;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem;width:calc(100% - 2rem);max-width:32rem;padding:1rem 1.1rem;border:1px solid var(--mw-line);border-radius:1.25rem;background:#fff;box-shadow:0 30px 60px -25px rgba(29,52,50,.55);transform:translateX(-50%);animation:ga-toast .45s cubic-bezier(.2,1.2,.4,1)}
.ga-toast[hidden]{display:none}
.ga-toast-ic{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#ffe3a3,#f2b46d);color:#7a4a12}
.ga-toast-ic svg{width:22px;height:22px}
.ga-toast p{flex:1;min-width:10rem;font:500 .9rem/1.4 var(--mw-font);color:var(--mw-ink)}
.ga-toast div{display:flex;gap:.5rem}

/* Calm Match */
.cm-board{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;max-width:440px;margin:auto}
.cm-board.cm-hard{grid-template-columns:repeat(6,1fr);gap:.5rem;max-width:560px}
.cm-card{position:relative;aspect-ratio:1;border-radius:1rem;perspective:600px}
.cm-hard .cm-card{border-radius:.8rem}
.cm-inner{position:absolute;inset:0;border-radius:inherit;transform-style:preserve-3d;transition:transform .45s var(--ease)}
.cm-card.up .cm-inner,.cm-card.done .cm-inner{transform:rotateY(180deg)}
.cm-face{position:absolute;inset:0;display:grid;place-items:center;border-radius:inherit;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.cm-back{background:linear-gradient(145deg,var(--m2),var(--m4));box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.cm-back::after{content:"";width:28%;aspect-ratio:1;border:2px solid rgba(255,255,255,.55);border-radius:50%}
.cm-front{transform:rotateY(180deg);background:#fafafa;color:var(--m3)}
.cm-front svg{width:46%;height:46%}
.cm-card.done .cm-front{background:var(--m0);animation:cm-pop .5s var(--ease)}
.cm-card:hover:not(.up):not(.done) .cm-inner{transform:translateY(-3px)}
.cm-card:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:560px){.cm-board.cm-hard{grid-template-columns:repeat(4,1fr);max-width:340px}}

/* Word Garden */
.wg{display:grid;gap:1rem;max-width:440px;margin:auto;text-align:center}
.wg-count{font:400 .62rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:#bdb6d4}
.wg-slots{display:flex;flex-wrap:wrap;justify-content:center;gap:.55rem .9rem}
.wg-row{display:flex;gap:.22rem}
.wg-tile{display:grid;place-items:center;width:2.1rem;height:2.1rem;border:1px solid rgba(255,255,255,.2);border-radius:.5rem;background:rgba(255,255,255,.1);font:700 1rem/1 var(--mw-font);color:#fff}
.wg-tile.hint{color:#ffe3a3;background:rgba(255,227,163,.14)}
.wg-tile.on{border-color:transparent;background:var(--mw-teal);color:#fff;animation:wg-pop .4s var(--ease) calc(var(--i) * 60ms) backwards}
.wg-hard .wg-tile{width:1.8rem;height:1.8rem;font-size:.9rem}
.wg-cur{display:flex;justify-content:center;gap:.3rem;min-height:2.6rem}
.wg-cur span{display:grid;place-items:center;min-width:2.1rem;height:2.6rem;padding:0 .3rem;border-radius:.55rem;background:#fff;font:700 1.25rem/1 var(--mw-font);color:var(--mw-purple);animation:wb-type .15s var(--ease)}
.wg-cur.bad{animation:wb-shake .4s}
.wg-cur.good span,.wg-cur.bonus span{animation:none}
.wg-wheel{position:relative;width:min(100%,260px);aspect-ratio:1;margin:0 auto;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,.04));touch-action:none;-webkit-user-select:none;user-select:none}
.wg-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.wg-line polyline{fill:none;stroke:rgba(169,205,201,.85);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.wg-letter{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);z-index:1;display:grid;place-items:center;width:23%;aspect-ratio:1;border-radius:50%;background:#fff;font:700 1.4rem/1 var(--mw-font);color:var(--mw-purple);box-shadow:0 8px 18px -10px rgba(0,0,0,.6);transform:translate(-50%,-50%);transition:left .35s var(--ease),top .35s var(--ease),background .15s,color .15s,transform .15s;touch-action:none}
.wg-letter:hover{transform:translate(-50%,-50%) scale(1.05)}
.wg-letter.used{background:var(--mw-teal);color:#fff}
.wg-letter:focus-visible{outline:2px solid #fff;outline-offset:3px}
.wg-shuffle{position:absolute;left:50%;top:50%;z-index:1;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;transform:translate(-50%,-50%);transition:background .2s,transform .3s var(--ease)}
.wg-shuffle:hover{background:rgba(255,255,255,.24);transform:translate(-50%,-50%) rotate(180deg)}
.wg-shuffle svg{width:22px;height:22px}
.wg-acts{display:flex;justify-content:center;gap:.5rem}
.wg-btn{padding:.6rem 1.1rem;border:1px solid rgba(255,255,255,.35);border-radius:999px;font:500 .85rem/1.2 var(--mw-font);color:#fff;transition:background .2s}
.wg-btn:hover{background:rgba(255,255,255,.12)}
.wg-go{border-color:var(--mw-teal);background:var(--mw-teal)}
.wg-go:hover{background:var(--m3)}
.is-done .wg-wheel,.is-done .wg-acts{opacity:.4}

/* Four in a Row */
.c4-wrap{display:grid;gap:.9rem;max-width:460px;margin:auto}
.c4-tags{display:flex;justify-content:center;gap:.6rem}
.c4-tag{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .85rem .35rem .4rem;border-radius:99px;background:rgba(255,255,255,.08);font:500 .8rem/1.1 var(--mw-font);color:#d9d4ea;transition:background .25s,color .25s,box-shadow .25s}
.c4-tag i{width:1.15rem;height:1.15rem;border-radius:50%}
.c4-tag.on{background:#fff;color:var(--mw-purple);box-shadow:0 6px 16px -8px rgba(0,0,0,.5)}
.c4-tag.p1 i,.c4-disc.p1{background:radial-gradient(circle at 35% 30%,#a9d4ff,#2f80ed 58%,#1a4fa3)}
.c4-tag.p2 i,.c4-disc.p2{background:radial-gradient(circle at 35% 30%,#fff6b8,#ffd21f 58%,#d6a100)}
.c4-board{display:grid;grid-template-columns:repeat(7,1fr);gap:.28rem;padding:.55rem;border-radius:1.1rem;background:linear-gradient(160deg,#2c4a48,#1f3634);box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 20px 40px -24px rgba(0,0,0,.7)}
.c4-col{display:grid;gap:.28rem;padding:0;border-radius:.75rem;transition:background .2s}
.c4-col:hover:not(:disabled),.c4-col:focus-visible{background:rgba(255,255,255,.08)}
.c4-col:focus-visible{outline:2px solid #fff;outline-offset:2px}
.c4-col:disabled{cursor:default}
.c4-cell{position:relative;aspect-ratio:1;border-radius:50%;background:#171d27;box-shadow:inset 0 3px 7px rgba(0,0,0,.6)}
.c4-col:hover:not(:disabled) .c4-cell.next::after,.c4-col:focus-visible .c4-cell.next::after{content:"";position:absolute;inset:8%;border:2px dashed rgba(255,255,255,.55);border-radius:50%}
.c4-wrap.is-wait .c4-col,.c4-wrap.is-locked .c4-col{cursor:default}
.c4-wrap.is-wait .c4-cell.next::after{display:none}
.c4-disc{position:absolute;inset:7%;z-index:1;border-radius:50%;box-shadow:inset 0 -3px 5px rgba(0,0,0,.25),inset 0 2px 3px rgba(255,255,255,.35);animation:c4-drop calc(.15s + var(--drop,0) * .07s) cubic-bezier(.55,0,1,.45)}
.c4-disc.win{box-shadow:0 0 0 3px #fff,0 0 18px 4px rgba(255,255,255,.55);animation:c4-win 1.1s ease-in-out infinite}

/* Still Water */
.sp-wrap{display:grid;justify-items:center;gap:.75rem;max-width:440px;margin:auto}
.sp-board{position:relative;width:100%;aspect-ratio:1;border-radius:1rem;background:rgba(255,255,255,.08);overflow:hidden;outline:none}
.sp-tile{position:absolute;top:0;left:0;width:calc(100% / var(--n));height:calc(100% / var(--n));border:2px solid #0a0b0c;border-radius:.7rem;background:url("../img/wellness/puzzle.svg") var(--bx) var(--by)/calc(var(--n) * 100%) calc(var(--n) * 100%) no-repeat border-box;transform:translate(calc(var(--x) * 100%),calc(var(--y) * 100%));transition:transform .18s var(--ease),border-width .5s,border-radius .5s}
.sp-tile span{position:absolute;top:5px;left:5px;display:grid;place-items:center;min-width:1.35rem;height:1.35rem;padding:0 .3rem;border-radius:99px;background:rgba(255,255,255,.85);font:600 .68rem/1 var(--mw-font);color:var(--mw-purple);transition:opacity .4s,background .3s,color .3s}
.sp-tile.ok span{background:var(--mw-teal);color:#fff}
.sp-tile:hover:not(.sp-gap){filter:brightness(1.06)}
.sp-tile:focus-visible{z-index:1;outline:2px solid #fff;outline-offset:-4px}
.sp-gap{opacity:0;pointer-events:none}
.sp-board.solved .sp-tile{border-width:0;border-radius:0}
.sp-board.solved .sp-gap{opacity:1;transition:opacity .6s .2s}
.sp-board.solved .sp-tile span{opacity:0}
.sp-peek{display:flex;align-items:center;gap:.75rem;justify-self:start;margin:0}
.sp-peek-img{width:76px;aspect-ratio:1;border:2px solid rgba(255,255,255,.7);border-radius:.6rem;background:url("../img/wellness/puzzle.svg") center/cover;box-shadow:0 10px 20px -12px rgba(0,0,0,.6)}
.sp-peek figcaption{font:500 .8rem/1.3 var(--mw-font);color:#e8e5f3}


@media (min-width:640px){
  .ga-game{flex-direction:row;align-items:center;gap:.9rem;padding:1rem 1.1rem;text-align:left}
  .ga-games{grid-template-columns:1fr}
  .ga-game-tx{flex:1;min-width:0}
  .ga-game-tx small{display:block;margin-top:.2rem;font-size:.78rem;line-height:1.4;color:var(--mw-ink-3)}
}
@media (min-width:1024px){
  .ga{grid-template-columns:minmax(19rem,.85fr) 1.15fr;align-items:start;gap:3.5rem}
  .ga-box{padding:2rem}
}

@keyframes cm-pop{50%{transform:rotateY(180deg) scale(1.08)}}
@keyframes ga-ping{70%{box-shadow:0 0 0 7px rgba(63,178,127,0)}100%{box-shadow:0 0 0 0 rgba(63,178,127,0)}}
@keyframes ga-spin{to{transform:rotate(360deg)}}
@keyframes ga-fade{from{opacity:0}}
@keyframes ga-pop{from{opacity:0;transform:translateY(16px) scale(.92)}}
@keyframes ga-toast{from{opacity:0;transform:translate(-50%,24px)}}
@keyframes ga-count{from{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}}
@keyframes ga-go{0%{transform:scale(.7)}40%{transform:scale(1.1);opacity:1}100%{transform:scale(1.3);opacity:0}}
@keyframes wb-type{50%{transform:scale(1.08)}}
@keyframes wb-shake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@keyframes c4-drop{from{transform:translateY(calc(var(--drop,0) * -118%))}}
@keyframes c4-win{50%{transform:scale(.84)}}
@keyframes wg-pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){
  .ga-count.pulse,.ga-count.go,.ga-over,.ga-over-card,.ga-toast,.ga-online i{animation:none}
  .wg-letter,.cm-inner,.sp-tile{transition:none}
  .wg-tile.on,.wg-cur span,.c4-disc,.c4-disc.win{animation:none}
}