/* style.css — one design system for the whole pack
   Signature: chunky "pressable" cards & buttons with a colored depress shadow. */

:root{
  --ink:#3A2E52;
  --accent:#FF3D9A;
  --paper:#ffffff;
  --soft:#00000016;
  --r:24px;
  --bg1:#FFE9C7; --bg2:#FFD3E3; --bg3:#C9E9FF;
  /* playful button colors */
  --grape:#9775FA; --grape-d:#6C5CE7;
  --leaf:#5BCB6B;  --leaf-d:#3FA24F;
  --sky:#4D9DF7;   --sky-d:#2E7BD6;
  --sun:#FFC23D;   --sun-d:#E29A00;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  font-family:'Baloo Bhaijaan 2', ui-rounded, 'SF Pro Rounded', 'Segoe UI Rounded',
              'Segoe UI', system-ui, 'Tahoma', sans-serif;
  color:var(--ink);
  background:
    radial-gradient(120% 80% at 15% 0%, var(--bg1), transparent 60%),
    radial-gradient(120% 90% at 100% 10%, var(--bg2), transparent 55%),
    linear-gradient(165deg, #FFF6E8, var(--bg3));
  background-attachment:fixed;
  min-height:100dvh;
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
  display:flex;flex-direction:column;height:100dvh;overflow:hidden;
}

/* ---------- top bar ---------- */
.topbar{display:flex;align-items:center;gap:10px;padding:12px 14px 6px;}
.topbar .title{flex:1;display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:clamp(18px,5vw,26px);font-weight:800;line-height:1.05;text-align:center;}
.topbar .temoji{font-size:1.15em;}
.barright{display:flex;align-items:center;gap:8px;}
.icon{appearance:none;border:none;cursor:pointer;background:var(--paper);color:var(--ink);
  border-radius:50%;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:800;text-decoration:none;box-shadow:0 4px 0 var(--soft);font-family:inherit;}
.icon:active{transform:translateY(3px);box-shadow:0 1px 0 var(--soft);}
.icon.lang{font-size:16px;background:var(--accent);color:#fff;box-shadow:0 4px 0 #00000022;}
.stars{background:#ffffffcc;border-radius:999px;padding:7px 14px;font-size:clamp(15px,4vw,19px);
  font-weight:800;box-shadow:0 4px 0 var(--soft);white-space:nowrap;}
.instr{text-align:center;font-size:clamp(15px,4.4vw,21px);font-weight:700;opacity:.9;padding:2px 14px 2px;min-height:1.4em;}

/* ---------- stage ---------- */
.stage{flex:1;display:flex;flex-direction:column;min-height:0;padding:8px 14px 18px;}

/* ---------- pressable surfaces (the signature) ---------- */
.press{position:relative;border:none;cursor:pointer;background:var(--paper);color:var(--ink);
  border-radius:var(--r);box-shadow:0 6px 0 var(--soft);font-family:inherit;transition:transform .08s, box-shadow .08s;}
.press:active{transform:translateY(4px);box-shadow:0 2px 0 var(--soft);}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:800;
  font-size:clamp(16px,4.8vw,22px);padding:14px 22px;color:#fff;background:var(--grape);box-shadow:0 6px 0 var(--grape-d);border-radius:22px;border:none;cursor:pointer;font-family:inherit;}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--grape-d);}
.btn.leaf{background:var(--leaf);box-shadow:0 6px 0 var(--leaf-d);}
.btn.sky{background:var(--sky);box-shadow:0 6px 0 var(--sky-d);}
.btn.sun{background:var(--sun);box-shadow:0 6px 0 var(--sun-d);color:#5A3E00;}
.btn.pink{background:var(--accent);box-shadow:0 6px 0 #C92D78;}

/* generic option tile */
.opt{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;font-weight:800;
  background:var(--paper);border-radius:var(--r);box-shadow:0 6px 0 var(--soft);border:none;cursor:pointer;
  font-family:inherit;color:var(--ink);font-size:clamp(34px,11vw,64px);}
.opt:active{transform:translateY(4px);box-shadow:0 2px 0 var(--soft);}
.opt.right{background:#D7F5DC;box-shadow:0 6px 0 var(--leaf);}
.opt.wrong{animation:shake .4s;}

/* grids */
.grid{flex:1;display:grid;gap:14px;align-content:center;justify-items:stretch;max-width:560px;width:100%;margin:0 auto;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.row{display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;}

/* prompt card shown above options */
.prompt{margin:6px auto 4px;min-width:clamp(96px,30vw,150px);min-height:clamp(96px,30vw,150px);
  background:var(--paper);border-radius:30px;box-shadow:0 10px 26px var(--soft);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:14px 22px;}
.prompt .big{font-size:clamp(54px,18vw,104px);line-height:1;}
.prompt .lab{font-size:clamp(18px,5.5vw,26px);font-weight:800;color:var(--accent);}
.prompt .lab2{font-size:clamp(13px,3.6vw,16px);font-weight:700;opacity:.55;}
.prompt.pop{animation:pop .35s ease;}

/* animations */
@keyframes pop{0%{transform:scale(0)}100%{transform:scale(1)}}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
@keyframes bounce{0%,100%{transform:scale(1)}45%{transform:scale(1.14)}}
.bounce{animation:bounce .4s ease;}
@media (prefers-reduced-motion: reduce){*{animation-duration:.001ms !important;}}

/* praise toast */
#praise{position:fixed;top:44%;left:50%;transform:translate(-50%,-50%) scale(.5);background:#fff;
  border-radius:26px;padding:14px 28px;font-size:clamp(22px,7vw,38px);font-weight:800;color:var(--accent);
  box-shadow:0 12px 0 var(--soft);opacity:0;pointer-events:none;z-index:30;white-space:nowrap;text-align:center;}
#praise.show{animation:pr 1.5s ease forwards;}
@keyframes pr{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.12)}
  82%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0}}

/* confetti on win */
.confetti{position:fixed;width:11px;height:14px;border-radius:3px;z-index:40;pointer-events:none;top:44%;}