/* =====================================================================
   MAYA GAMES — shared stylesheet
   ===================================================================== */
:root{
  --ink:#3A2456;
  --lilac:#F1E7FF;
  --cream:#FFF8EC;
  --sun:#FFCE2B;
  --pink:#FF4E88;
  --teal:#17BEBB;
  --mint:#9BEBD8;
  --blush:#FFC9DE;
  --display:"Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Trebuchet MS",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--body);color:var(--ink);background:var(--lilac);
  overflow:hidden;-webkit-tap-highlight-color:transparent;
}
body.scroll{overflow:auto}

/* ---------- ambient blobs ---------- */
.sky{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(6px);opacity:.55}
.b1{width:46vmin;height:46vmin;background:var(--mint);top:-12vmin;left:-10vmin}
.b2{width:38vmin;height:38vmin;background:var(--blush);bottom:-12vmin;right:-8vmin}
.b3{width:24vmin;height:24vmin;background:#FFE9A8;top:38%;right:-8vmin}
.b4{width:20vmin;height:20vmin;background:#CDE4FF;bottom:14%;left:-6vmin}

.wrap{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;
  padding:clamp(10px,2.2vmin,22px);gap:clamp(8px,1.6vmin,16px);max-width:940px;margin:0 auto}
body.scroll .wrap{height:auto;min-height:100%}

/* ---------- header ---------- */
header{display:flex;align-items:center;gap:8px;flex:0 0 auto}
h1{font-family:var(--display);font-weight:800;font-size:clamp(19px,4.2vmin,32px);
  margin:0 auto 0 0;letter-spacing:-.01em;line-height:1}
h1 span{color:var(--pink)}
.count{font-family:var(--display);font-weight:800;font-size:clamp(14px,2.6vmin,20px);
  background:var(--ink);color:var(--cream);padding:.25em .8em;border-radius:99px;white-space:nowrap}
.slot{display:flex;align-items:center;gap:8px}

/* ---------- buttons ---------- */
button,.btn{font-family:var(--display);font-weight:800;cursor:pointer;text-decoration:none;
  border:5px solid var(--ink);border-radius:99px;background:#fff;color:var(--ink);
  box-shadow:0 6px 0 var(--ink);transition:transform .08s,box-shadow .08s;
  font-size:clamp(17px,3.4vmin,26px);padding:.5em 1.1em;line-height:1.1;
  display:inline-flex;align-items:center;justify-content:center;gap:.45em}
button:active,.btn:active{transform:translateY(5px);box-shadow:0 1px 0 var(--ink)}
button:focus-visible,.btn:focus-visible,.tile:focus-visible{outline:4px solid var(--pink);outline-offset:4px}
button[disabled]{opacity:.35;cursor:default}
.go{background:var(--sun)}
.go svg{width:.9em;height:1.2em;flex:0 0 auto}
.go.wide{flex:1 1 auto;max-width:420px}
.pink{background:var(--pink);color:#fff}
.ghost{background:#fff}
.iconbtn{padding:.35em;border-width:4px;box-shadow:0 5px 0 var(--ink);flex:0 0 auto}
.iconbtn svg{width:1.35em;height:1.35em;display:block}
.iconbtn.off{background:#E7DCF7;color:#8B7BA8}
.bar{flex:0 0 auto;display:flex;gap:10px;align-items:center;justify-content:center;
  flex-wrap:wrap;padding-bottom:env(safe-area-inset-bottom)}

/* ---------- progress ---------- */
.track{position:relative;height:22px;border-radius:99px;background:#fff;
  border:4px solid var(--ink);flex:0 0 auto}
.fill{position:absolute;inset:0 auto 0 0;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--teal),var(--sun) 60%,var(--pink));
  transition:width .45s cubic-bezier(.34,1.4,.5,1)}
.scoot{position:absolute;top:50%;left:0;width:34px;height:34px;margin:-17px 0 0 -17px;
  transition:left .45s cubic-bezier(.34,1.4,.5,1)}
.scoot svg{width:100%;height:100%;display:block}

/* ---------- main + sticker card ---------- */
main{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(8px,1.8vmin,18px);min-height:0;width:100%}
.card{position:relative;background:var(--cream);border:6px solid var(--ink);
  border-radius:38px;padding:clamp(8px,2vmin,18px);
  box-shadow:10px 12px 0 rgba(58,36,86,.16);transform:rotate(-1.2deg);
  display:grid;place-items:center;min-height:0}
.card.tap{cursor:pointer}
.card::after{content:"";position:absolute;inset:9px;border-radius:28px;
  border:3px dashed rgba(58,36,86,.22);pointer-events:none}
#slot svg{display:block;width:min(76vw,44vh,400px);height:auto}
#slot.small svg{width:min(56vw,30vh,260px)}
.face-bob{animation:bob 3.4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(1.4deg)}}
.pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop{0%{transform:scale(.5) rotate(-14deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.wob{animation:wob .55s ease}
@keyframes wob{0%,100%{transform:rotate(0)}25%{transform:rotate(-7deg) scale(1.04)}75%{transform:rotate(7deg) scale(1.04)}}
.shake{animation:shake .45s ease}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-11px)}60%{transform:translateX(11px)}}

.hand{position:absolute;right:-16px;bottom:-16px;width:clamp(62px,19%,112px);
  background:#fff;border:5px solid var(--ink);border-radius:50%;padding:9px;
  box-shadow:4px 5px 0 rgba(58,36,86,.18);display:none;
  animation:handwig 2.3s ease-in-out infinite}
.hand.on{display:block}
.hand svg{width:100%;height:auto;display:block}
@keyframes handwig{0%,100%{transform:rotate(9deg)}50%{transform:rotate(-7deg) scale(1.07)}}

.label{text-align:center;max-width:24ch}
.name{font-family:var(--display);font-weight:800;line-height:1;
  font-size:clamp(24px,5.6vmin,46px);margin:0}
.prompt{margin:.35em 0 0;font-weight:700;font-size:clamp(15px,2.9vmin,22px);
  color:#61508A;line-height:1.25}
.sr{position:absolute;left:-9999px}

/* ---------- tap to start ---------- */
.gate{position:fixed;inset:0;z-index:20;display:grid;place-content:center;justify-items:center;
  gap:16px;text-align:center;padding:24px;cursor:pointer;
  background:radial-gradient(circle at 50% 42%,#FFF3C4,var(--lilac) 72%)}
.gateface svg{width:min(44vmin,30vh,230px);height:auto;animation:bob 2.6s ease-in-out infinite}
.gate h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,7vmin,54px);margin:0;line-height:1}
.gate p{margin:0;font-weight:900;color:#61508A;font-size:clamp(15px,3vmin,21px)}

/* ---------- well done screen ---------- */
.finish{position:fixed;inset:0;z-index:6;display:none;place-items:center;text-align:center;
  padding:24px;background:radial-gradient(circle at 50% 40%,#FFF3C4,var(--lilac) 70%)}
.finish.on{display:grid}
.rays{position:absolute;width:150vmax;height:150vmax;left:50%;top:44%;
  transform:translate(-50%,-50%);pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,206,43,.5) 0deg 9deg,transparent 9deg 18deg);
  animation:spin 26s linear infinite}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.done{position:relative;display:grid;justify-items:center;gap:clamp(6px,1.6vmin,16px)}
.thumb{width:min(40vmin,28vh,220px);animation:pump 1s ease-in-out infinite}
@keyframes pump{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-22px) rotate(5deg)}}
.done h2{font-family:var(--display);font-weight:800;margin:0;line-height:.95;
  font-size:clamp(30px,8vmin,66px);text-shadow:4px 4px 0 var(--sun)}
.done p{margin:0;font-weight:900;font-size:clamp(16px,3.2vmin,24px);color:#61508A}
.crew{display:flex;gap:10px}
.crew svg{width:min(13vmin,72px);height:auto}
.crew svg:nth-child(1){animation:jig .7s ease-in-out infinite}
.crew svg:nth-child(2){animation:jig .7s ease-in-out .23s infinite}
.crew svg:nth-child(3){animation:jig .7s ease-in-out .46s infinite}
@keyframes jig{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-14px) rotate(10deg)}}

/* ---------- confetti ---------- */
#conf{position:fixed;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.bit{position:absolute;width:14px;height:14px;will-change:transform,opacity}
@keyframes burst{to{transform:translate(var(--tx),var(--ty)) rotate(var(--rot));opacity:0}}
@keyframes rain{0%{transform:translateY(-12vh) rotate(0);opacity:1}
  100%{transform:translateY(112vh) rotate(var(--rot));opacity:.9}}

/* =====================================================================
   MENU
   ===================================================================== */
.lede{text-align:center;max-width:34ch;margin:0 auto;font-weight:700;color:#61508A;
  font-size:clamp(15px,2.8vmin,20px)}
.hero{font-family:var(--display);font-weight:800;text-align:center;line-height:.92;
  font-size:clamp(38px,10vmin,84px);margin:0}
.hero em{font-style:normal;color:var(--pink)}
.tiles{display:grid;gap:clamp(10px,2vmin,18px);width:100%;
  grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
/* The track minimum is a fixed 150px, so it never stretches to fit content:
   every tile MUST be able to shrink to its column. Anything that can't
   (e.g. the Memory Pairs pair art, two full-height faces side by side) spills
   into the next column and gets painted over by the tile after it. Hence the
   min-width:0 / max-width:100% below — they are load-bearing, not tidying. */
.tile{background:var(--cream);border:6px solid var(--ink);border-radius:30px;
  box-shadow:8px 9px 0 rgba(58,36,86,.16);padding:14px 12px 16px;text-decoration:none;
  color:var(--ink);display:grid;justify-items:center;gap:6px;text-align:center;
  min-width:0;transition:transform .12s,box-shadow .12s}
.tile:hover{transform:translate(-2px,-3px);box-shadow:11px 13px 0 rgba(58,36,86,.2)}
.tile:active{transform:translate(3px,4px);box-shadow:4px 4px 0 rgba(58,36,86,.2)}
.tile-art{height:clamp(74px,15vmin,116px);display:flex;align-items:center;justify-content:center;
  width:100%;min-width:0}
.tile-art svg{height:100%;width:auto;max-width:100%;min-width:0;display:block}
/* 2 × (50% + 11px) − 22px overlap = exactly the width of the art box */
.tile-art.pair svg{max-width:calc(50% + 11px)}
.tile-art.pair svg:nth-child(2){margin-left:-22px;transform:rotate(9deg)}
.tile h2{font-family:var(--display);font-weight:800;margin:0;line-height:1;
  font-size:clamp(18px,3.4vmin,24px);max-width:100%;overflow-wrap:break-word}
.tile p{margin:0;font-weight:700;font-size:clamp(12px,2.2vmin,15px);color:#6E5C97;line-height:1.25;
  max-width:100%;overflow-wrap:break-word}
/* the one non-game card, so it reads as different without breaking the set */
.tile-about{border-color:var(--pink)}
.tile-about h2{color:var(--pink)}
.foot{text-align:center;font-weight:700;color:#7A6AA0;font-size:clamp(12px,2.3vmin,15px);
  padding:6px 0 18px;line-height:1.5}

/* =====================================================================
   FACE MIXER
   ===================================================================== */
.rows{display:grid;gap:8px;width:100%;max-width:560px}
.row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;
  background:var(--cream);border:5px solid var(--ink);border-radius:99px;padding:5px 8px}
.row b{font-family:var(--display);font-weight:800;text-align:center;
  font-size:clamp(14px,2.7vmin,19px)}
.row button{padding:.15em .55em;font-size:clamp(18px,3.6vmin,26px);box-shadow:0 4px 0 var(--ink);
  border-width:4px}
.swatches{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;border:4px solid var(--ink);padding:0;box-shadow:0 3px 0 var(--ink)}
.sw.on{outline:4px solid var(--pink);outline-offset:2px}
.target{position:absolute;left:-14px;top:-14px;width:clamp(64px,20%,112px);background:#fff;
  border:5px solid var(--ink);border-radius:24px;padding:6px;box-shadow:4px 5px 0 rgba(58,36,86,.18);
  transform:rotate(-8deg);display:none}
.target.on{display:block}
.target svg{width:100%;height:auto;display:block}
.target span{position:absolute;bottom:-14px;left:50%;transform:translateX(-50%);
  background:var(--pink);color:#fff;font-family:var(--display);font-weight:800;font-size:12px;
  border:3px solid var(--ink);border-radius:99px;padding:0 8px;white-space:nowrap}

/* =====================================================================
   HOW DO I FEEL / SILLY SAYS choices
   ===================================================================== */
.choices{display:grid;gap:10px;width:100%;max-width:520px}
.choice{width:100%;font-size:clamp(19px,4vmin,28px);background:#fff}
.choice.yes{background:var(--mint)}
.choice.no{background:#FFC9C9}

/* =====================================================================
   MEMORY PAIRS
   ===================================================================== */
.grid{display:grid;gap:clamp(5px,1.4vmin,10px);margin:0 auto;width:100%}
.mcard{padding:0;border:none;background:none;box-shadow:none;aspect-ratio:1;
  perspective:700px;border-radius:0}
.mcard:active{transform:none;box-shadow:none}
.mface{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .38s cubic-bezier(.4,1.3,.5,1)}
.mcard.up .mface,.mcard.done .mface{transform:rotateY(180deg)}
.mside{display:block;position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border:5px solid var(--ink);border-radius:18px;display:grid;place-items:center;overflow:hidden}
.mback{background:var(--teal);
  background-image:radial-gradient(circle at 30% 30%,rgba(255,255,255,.55) 12%,transparent 13%),
    radial-gradient(circle at 70% 70%,rgba(255,255,255,.45) 10%,transparent 11%);
  background-size:26px 26px}
.mfront{background:var(--cream);transform:rotateY(180deg);padding:4px}
.mfront svg{width:100%;height:100%}
.mcard.done{opacity:.42;transition:opacity .3s}

/* =====================================================================
   TAP THE SMILEY
   ===================================================================== */
.holes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,1.8vmin,14px);
  margin:0 auto;width:100%}
.hole{aspect-ratio:1;background:#E0D2F5;border:5px solid var(--ink);border-radius:50%;
  box-shadow:inset 0 6px 0 rgba(58,36,86,.14);display:grid;place-items:center;
  overflow:hidden;padding:0}
.hole:active{transform:none;box-shadow:inset 0 6px 0 rgba(58,36,86,.14)}
.mole{width:86%;transform:translateY(115%);transition:transform .13s ease-out}
.hole.up .mole{transform:translateY(4%)}
.mole svg{width:100%;height:auto;display:block}

/* =====================================================================
   FREEZE DANCE
   ===================================================================== */
.floor{display:grid;place-items:center;gap:14px}
.dancer svg{width:min(58vw,36vh,300px);height:auto}
.dancer.go{animation:boogie .48s ease-in-out infinite}
@keyframes boogie{
  0%{transform:translateY(0) rotate(-8deg) scale(1)}
  25%{transform:translateY(-16px) rotate(0) scale(1.05)}
  50%{transform:translateY(0) rotate(8deg) scale(1)}
  75%{transform:translateY(-16px) rotate(0) scale(1.05)}
  100%{transform:translateY(0) rotate(-8deg) scale(1)}}
.dancer.frozen{filter:saturate(.5)}
.freeze{font-family:var(--display);font-weight:800;font-size:clamp(34px,9vmin,72px);
  line-height:1;margin:0;color:#1E88C7;text-shadow:3px 3px 0 #fff}
.notes-fly{position:absolute;font-size:34px;pointer-events:none}

/* =====================================================================
   BREATHING BUDDY
   ===================================================================== */
.breath{display:grid;place-items:center;position:relative}
.ring{position:absolute;border:8px solid var(--teal);border-radius:50%;opacity:.4;
  width:100%;height:100%}
.buddy{transition:transform 4s ease-in-out}
.buddy svg{width:min(60vw,40vh,320px);height:auto}
.buddy.in{transform:scale(1.28)}
.buddy.out{transform:scale(.82)}
.cue{font-family:var(--display);font-weight:800;font-size:clamp(26px,6.5vmin,52px);
  margin:0;line-height:1;min-height:1.1em}
.cue small{display:block;font-family:var(--body);font-weight:900;color:#61508A;
  font-size:clamp(14px,2.7vmin,19px)}

/* ---------- shared responsive + motion ---------- */
@media (max-width:520px){
  .card{border-radius:30px}
  .tiles{grid-template-columns:repeat(2,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}