/* ══════════════════════════════════════════════════════
   MathKids v5 — Ocean Theme — FIXED
══════════════════════════════════════════════════════ */

:root {
  --st: env(safe-area-inset-top,    0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left,   0px);
  --sr: env(safe-area-inset-right,  0px);

  --ocean:   #0077b6;
  --ocean-l: #00b4d8;
  --ocean-xl:#90e0ef;
  --foam:    #caf0f8;
  --deep:    #03045e;
  --bg:      #e0f4fd;
  --white:   #ffffff;
  --text:    #03045e;
  --text2:   #0077b6;
  --text3:   #6c8ebf;
  --shadow:  0 4px 16px rgba(0,119,182,.18);
  --shadow-l:0 8px 28px rgba(0,119,182,.24);

  --add-c:#0096c7; --add-l:#ade8f4;
  --sub-c:#c77dff; --sub-l:#e8d5ff;
  --mul-c:#2dc653; --mul-l:#c8f5d5;
  --div-c:#f4a261; --div-l:#fde8d0;
  --unk-c:#e63946; --unk-l:#ffd6d9;
  --par-c:#457b9d; --par-l:#d4eaf7;
}

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; }
body {
  background: var(--bg); color: var(--text);
  font-family: -apple-system,'SF Pro Display','Nunito','Segoe UI',sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
}

/* ── BUBBLES ─────────────────────────────────────── */
.bubbles { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.b { position:absolute; bottom:-80px; border-radius:50%;
     background:rgba(0,180,216,.12); border:2px solid rgba(0,180,216,.18);
     animation:rise linear infinite; }
.b1{width:28px;height:28px;left:8%;animation-duration:14s;animation-delay:0s}
.b2{width:16px;height:16px;left:22%;animation-duration:11s;animation-delay:2s}
.b3{width:44px;height:44px;left:38%;animation-duration:18s;animation-delay:5s}
.b4{width:20px;height:20px;left:52%;animation-duration:13s;animation-delay:1s}
.b5{width:36px;height:36px;left:65%;animation-duration:16s;animation-delay:7s}
.b6{width:14px;height:14px;left:78%;animation-duration:10s;animation-delay:3s}
.b7{width:50px;height:50px;left:88%;animation-duration:20s;animation-delay:9s}
.b8{width:22px;height:22px;left:15%;animation-duration:12s;animation-delay:6s}
@keyframes rise {
  0%{transform:translateY(0) scale(.8);opacity:0}
  10%{opacity:1} 90%{opacity:.6}
  100%{transform:translateY(-105vh) scale(1.1);opacity:0}
}

/* ── TOAST ───────────────────────────────────────── */
#toast {
  position:fixed; top: 12px; left:50%;
  transform:translateX(-50%) translateY(-10px);
  z-index:9999; pointer-events:none;
  padding:9px 20px; border-radius:100px;
  background:var(--deep); color:#fff;
  font-size:.82rem; font-weight:700;
  white-space:nowrap; opacity:0;
  transition:opacity .22s, transform .22s;
  box-shadow:0 4px 20px rgba(3,4,94,.4);
}
#toast.on { opacity:1; transform:translateX(-50%) translateY(0); }

/* ── APP SHELL ───────────────────────────────────── */
/* ── SAFE AREA BAND ──────────────────────────────────
   In PWA standalone mode on iPhone, the app covers the
   full screen including behind the Dynamic Island.
   We paint the top safe-area band in ocean colour so
   nothing hides behind the notch.
   body::before fills the gutter OUTSIDE the 430px column. */
body {
  background: var(--ocean);   /* shows behind Dynamic Island */
}
body::after {
  content: '';
  position: fixed; top: 0; left: 0; right: 0;
  height: env(safe-area-inset-top, 0px);
  background: var(--ocean);
  z-index: 9999;
  pointer-events: none;
}

#app {
  position: fixed;
  /* Start BELOW the Dynamic Island */
  top:    env(safe-area-inset-top,    0px);
  bottom: env(safe-area-inset-bottom, 0px);
  left:   50%;
  transform: translateX(-50%);
  width: 100%; max-width: 430px;
  z-index: 10;
  background: var(--bg);
  /* Left/right safe areas handled by screen padding */
}

/* ── SCREENS ─────────────────────────────────────── */
/* Screens fill #app exactly — no extra top/bottom padding needed
   because #app already accounts for safe areas */
.screen { position:absolute; inset:0; display:flex; flex-direction:column; }
.screen.hidden { display:none !important; }

/* ── HOME ────────────────────────────────────────── */
#s-home {
  padding-top: 10px;
  padding-bottom: max(8px,calc(var(--sb)+6px));
  padding-left:max(14px,calc(var(--sl)+14px));
  padding-right:max(14px,calc(var(--sr)+14px));
  background:var(--bg);
}

/* Header */
.hdr { flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.hdr-left { display:flex; align-items:center; gap:9px; min-width:0; flex:1; }
.logo-wave { font-size:2rem; line-height:1; flex-shrink:0; animation:waveRock 3s ease-in-out infinite; }
@keyframes waveRock { 0%,100%{transform:rotate(-8deg) translateY(0)} 50%{transform:rotate(8deg) translateY(-4px)} }
.logo-name { font-size:1.35rem; font-weight:800; color:var(--ocean); line-height:1; white-space:nowrap; }
.logo-sub { font-size:.50rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin-top:1px; }
.hdr-right { display:flex; align-items:center; gap:5px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
.badge { display:flex; align-items:center; gap:3px; padding:4px 9px; border-radius:100px; background:var(--white); border:1.5px solid var(--ocean-xl); font-size:.74rem; font-weight:800; color:var(--ocean); box-shadow:var(--shadow); }
.coin-badge { color:#c77700; }
.round-btn { width:36px; height:36px; border-radius:50%; background:var(--white); border:1.5px solid var(--ocean-xl); font-size:1rem; color:var(--ocean); display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); transition:transform .14s cubic-bezier(.34,1.56,.64,1); }
.round-btn:active { transform:scale(.80); }

/* Scrollable home content */
.home-scroll { flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:10px; }
.home-scroll::-webkit-scrollbar { display:none; }

/* Daily */
.daily-card { background:var(--white); border-radius:16px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; box-shadow:var(--shadow); border-left:4px solid var(--ocean); flex-shrink:0; }
.daily-l { display:flex; align-items:center; gap:9px; }
.daily-ico { font-size:1.4rem; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.2)} }
.daily-title { font-weight:800; font-size:.86rem; color:var(--text); display:block; }
.daily-sub { font-size:.52rem; font-weight:700; color:var(--text3); display:block; margin-top:1px; }
.daily-r { display:flex; flex-direction:column; align-items:flex-end; gap:3px; flex-shrink:0; }
.daily-bar { width:85px; height:7px; border-radius:100px; background:var(--foam); overflow:hidden; }
.daily-prog { height:100%; border-radius:100px; background:linear-gradient(90deg,var(--ocean),var(--ocean-l)); transition:width .5s; }
.daily-frac { font-size:.58rem; font-weight:800; color:var(--ocean); }

/* Mode tabs */
.mode-tabs { display:flex; gap:8px; flex-shrink:0; }
.mode-tab { flex:1; padding:9px 10px; border-radius:14px; background:var(--white); border:2px solid var(--ocean-xl); display:flex; flex-direction:column; align-items:center; gap:2px; box-shadow:var(--shadow); transition:background .14s, border-color .14s, transform .12s; cursor:pointer; touch-action:manipulation; }
.mode-tab:active { transform:scale(.94); }
.mode-tab.active { background:var(--ocean); border-color:var(--ocean); color:#fff; }
.mode-tab.active .tab-s { color:rgba(255,255,255,.75); }
.mode-tab > span:first-child { font-size:1.15rem; }
.tab-l { font-size:.82rem; font-weight:800; }
.tab-s { font-size:.46rem; font-weight:700; color:var(--text3); text-align:center; }

/* Cards */
.grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; flex-shrink:0; }
.card {
  border-radius:16px; padding:14px 12px 11px;
  min-height:clamp(92px,22vw,115px);
  display:flex; flex-direction:column; gap:3px;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-l); cursor:pointer;
  touch-action:manipulation;
  -webkit-user-select:none; user-select:none;
  transition:transform .15s cubic-bezier(.34,1.56,.64,1);
}
.card:active { transform:scale(.91); box-shadow:0 2px 8px rgba(0,119,182,.12); }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px; border-radius:16px 16px 0 0; }
.card.add{background:var(--add-l)} .card.add::before{background:var(--add-c)}
.card.sub{background:var(--sub-l)} .card.sub::before{background:var(--sub-c)}
.card.mul{background:var(--mul-l)} .card.mul::before{background:var(--mul-c)}
.card.div{background:var(--div-l)} .card.div::before{background:var(--div-c)}
.card.unk{background:var(--unk-l)} .card.unk::before{background:var(--unk-c)}
.card.par{background:var(--par-l)} .card.par::before{background:var(--par-c)}
.card-ico { font-size:1.8rem; line-height:1; }
.card-name { font-size:.88rem; font-weight:800; color:var(--text); margin-top:2px; }
.card-hint { font-size:.46rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(3,4,94,.45); }
.card-stars { font-size:.64rem; margin-top:auto; color:#c77700; letter-spacing:1px; }

/* Medals */
.medals-box { background:var(--white); border-radius:16px; padding:10px 13px; box-shadow:var(--shadow); flex-shrink:0; margin-bottom:4px; }
.medals-label { font-size:.50rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:var(--text3); display:block; margin-bottom:8px; }
.medals-row { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.medals-row::-webkit-scrollbar { display:none; }
.medal { min-width:40px; height:40px; border-radius:50%; background:var(--foam); border:2px solid var(--ocean-xl); display:flex; align-items:center; justify-content:center; font-size:1.4rem; flex-shrink:0; filter:grayscale(1) brightness(.55); transition:filter .35s, box-shadow .35s; }
.medal.on { filter:none; box-shadow:0 0 14px rgba(255,200,0,.45); }
.medals-total { font-size:.56rem; font-weight:800; color:var(--text3); display:block; margin-top:7px; text-align:right; }
.medals-total b { color:var(--ocean); }

/* ── MODALS ──────────────────────────────────────── */
/* Modal screens = flex column, overlay bg */
#s-level, #s-result, #s-trophy, #s-shop {
  background:rgba(3,4,94,.35);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  align-items:center; justify-content:center;
  padding: 16px 14px max(16px,calc(var(--sb)+16px));
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.modal {
  width:100%; max-width:360px;
  max-height:calc(100dvh - var(--st) - var(--sb) - 28px);
  background:var(--white); border-radius:24px;
  box-shadow:0 20px 60px rgba(3,4,94,.35);
  padding:22px 18px 20px; position:relative; overflow:hidden;
  border-top:5px solid var(--ocean);
  animation:popIn .26s cubic-bezier(.34,1.56,.64,1) both;
  flex-shrink:0;
}
@keyframes popIn { from{transform:scale(.86) translateY(18px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.modal-ico   { font-size:2.8rem; text-align:center; display:block; margin-bottom:4px; }
.modal-title { font-size:1.5rem; font-weight:800; color:var(--text); text-align:center; margin-bottom:3px; }
.modal-sub   { font-size:.60rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); text-align:center; margin-bottom:15px; }

/* BACK / CLOSE buttons inside modals (position:absolute works here, parent is position:relative) */
.back-btn {
  position:absolute; top:14px; left:14px;
  width:44px; height:44px; border-radius:50%;
  background:var(--foam); border:1.5px solid var(--ocean-xl);
  font-size:1.1rem; font-weight:800; color:var(--ocean);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1);
}
.close-btn {
  position:absolute; top:14px; right:14px;
  width:44px; height:44px; border-radius:50%;
  background:var(--foam); border:1.5px solid var(--ocean-xl);
  font-size:1.1rem; font-weight:800; color:var(--ocean);
  display:flex; align-items:center; justify-content:center;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1);
}
.back-btn:active, .close-btn:active { transform:scale(.78); }

/* Level buttons */
.lv-list { display:flex; flex-direction:column; gap:9px; }
.lv-btn  { padding:13px 14px; border-radius:14px; background:var(--foam); border:2px solid var(--ocean-xl); display:flex; align-items:center; gap:12px; min-height:54px; transition:transform .13s cubic-bezier(.34,1.56,.64,1), background .13s; box-shadow:var(--shadow); cursor:pointer; touch-action:manipulation; }
.lv-btn:active { transform:scale(.92); background:var(--ocean-xl); }
.lv-num { font-size:1.65rem; font-weight:800; min-width:32px; text-align:center; }
.easy { color:var(--mul-c); } .mid { color:var(--ocean); } .hard { color:var(--unk-c); }
.lv-info { flex:1; text-align:left; }
.lv-info b    { display:block; font-size:.90rem; color:var(--text); }
.lv-info span { display:block; font-size:.52rem; font-weight:700; color:var(--text3); margin-top:1px; }
.lv-stars { font-size:.66rem; letter-spacing:2px; color:#c77700; }

/* ── EXERCISE SCREEN ─────────────────────────────── */
/* Use flexbox, NOT grid. Numpad gets flex:1 to fill space. */
.ex-screen {
  padding-top:  12px;
  padding-bottom:max(8px, calc(var(--sb) + 8px));
  padding-left:  max(14px, calc(var(--sl) + 14px));
  padding-right: max(14px, calc(var(--sr) + 14px));
  background: var(--bg);
  display: flex !important;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}

/* ── EXERCISE TOP BAR ────────────────────────────── */
/* CRITICAL: ex-back-btn is a FLEX ITEM here, NOT position:absolute */
.ex-top {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 44px;
}
/* The back button inside ex-top must be in normal flow */
.ex-back-btn {
  /* All button styles inline — no position:absolute */
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1.5px solid var(--ocean-xl);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ocean);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .12s cubic-bezier(.34,1.56,.64,1);
}
.ex-back-btn:active { transform: scale(.78); }

.ex-info  { flex:1; display:flex; flex-direction:column; align-items:center; }
.ex-cat   { font-size:.96rem; font-weight:800; color:var(--ocean); }
.ex-count { font-size:.50rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--text3); }

/* Timer */
.timer-pill { min-width:52px; height:44px; display:flex; align-items:center; justify-content:center; gap:2px; border-radius:100px; background:var(--white); border:2px solid var(--ocean-xl); box-shadow:var(--shadow); flex-shrink:0; transition:background .25s, border-color .25s; }
.timer-pill.hot { background:rgba(255,60,60,.15)!important; border-color:rgba(230,57,70,.7)!important; animation:timerShake .38s ease-in-out; }
@keyframes timerShake { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-3px)} 40%,80%{transform:translateX(3px)} }
#timer-n { font-size:1.1rem; font-weight:800; color:var(--text); transition:color .25s; }
.timer-pill.hot #timer-n { color:#e63946; }
.timer-s { font-size:.55rem; font-weight:700; color:var(--text3); }

/* Dots */
.dots-row { display:flex; gap:5px; align-items:center; justify-content:center; min-height:16px; flex-shrink:0; }
.dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; background:rgba(0,119,182,.18); border:1.5px solid rgba(0,119,182,.25); transition:background .25s, transform .25s, box-shadow .25s; }
.dot.ok  { background:var(--mul-c); border-color:var(--mul-c); box-shadow:0 0 6px rgba(45,198,83,.7); transform:scale(1.2); }
.dot.err { background:var(--unk-c); border-color:var(--unk-c); }
.dot.now { background:var(--ocean); border-color:var(--ocean); animation:dotBlink .8s ease-in-out infinite; }
@keyframes dotBlink { 0%,100%{box-shadow:0 0 4px rgba(0,119,182,.4)} 50%{box-shadow:0 0 12px rgba(0,119,182,.9)} }

/* Score */
.score-row  { display:flex; gap:6px; justify-content:center; flex-shrink:0; }
.score-chip { display:flex; align-items:center; gap:4px; padding:4px 12px; border-radius:100px; background:var(--white); border:1.5px solid var(--ocean-xl); font-size:.84rem; color:var(--text); box-shadow:var(--shadow); }
.score-chip.coin b { color:#c77700; }

/* Equation box */
.eq-box { border-radius:18px; min-height:80px; background:var(--white); box-shadow:var(--shadow-l); border-top:4px solid var(--ocean); padding:12px 16px 10px; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; flex-shrink:0; }
.eq-label { position:absolute; top:7px; left:12px; font-size:.48rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:var(--text3); background:var(--foam); padding:2px 7px; border-radius:100px; }
.eq-text { font-size:clamp(1.75rem,8.5vw,2.9rem); font-weight:800; color:var(--text); text-align:center; line-height:1.25; width:100%; }
.eq-text .num { color:var(--text); }
.eq-text .op  { color:var(--ocean); font-size:.84em; }
.eq-text .eq  { color:var(--text3); font-size:.76em; }
.eq-text .blk { color:var(--ocean); border-bottom:3px solid var(--ocean); min-width:40px; display:inline-block; text-align:center; padding:0 2px; transition:color .14s, border-color .14s; }
.eq-text .blk.filled { color:var(--mul-c); border-color:var(--mul-c); }
.eq-text .xsym { color:var(--unk-c); font-weight:900; }
.eq-text .par  { color:var(--sub-c); font-size:.9em; }
.eq-fb { position:absolute; inset:0; border-radius:inherit; display:flex; align-items:center; justify-content:center; font-size:1.35rem; font-weight:800; opacity:0; pointer-events:none; z-index:4; }
.eq-fb.ok  { opacity:1; background:rgba(45,198,83,.15); color:#1a7a30; }
.eq-fb.err { opacity:1; background:rgba(230,57,70,.13); color:#b8121e; }
@keyframes eqPop { from{transform:scale(.91) translateY(7px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
.eq-box.pop { animation:eqPop .24s cubic-bezier(.34,1.56,.64,1) both; }
.eq-box.shake { animation:eqShake .36s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes eqShake { 10%,90%{transform:translateX(-3px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)} }

/* UNK steps */
.unk-panel { border-radius:14px; background:var(--white); border:1.5px solid var(--ocean-xl); padding:8px 11px; box-shadow:var(--shadow); flex-shrink:0; }
.unk-row   { display:flex; align-items:center; gap:7px; padding:5px 8px; border-radius:10px; background:var(--foam); border:1.5px solid transparent; transition:border-color .2s; }
.unk-row.active { border-color:var(--ocean); }
.unk-arrow { text-align:center; font-size:.62rem; color:var(--text3); margin:2px 0; }
.unk-n     { font-size:.88rem; flex-shrink:0; }
.unk-label { font-size:.48rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); white-space:nowrap; width:54px; flex-shrink:0; }
.unk-val   { flex:1; font-size:.96rem; font-weight:800; color:var(--ocean); border-bottom:2px solid rgba(0,119,182,.2); padding-bottom:1px; min-height:20px; display:flex; align-items:center; transition:color .14s; }
.unk-val.ok  { color:var(--mul-c); } .unk-val.err { color:var(--unk-c); } .unk-val.tip { color:var(--div-c); }

/* Answer bar */
.ans-bar  { display:flex; align-items:center; justify-content:center; min-height:44px; flex-shrink:0; }
.ans-val  { font-size:clamp(2rem,9vw,2.8rem); font-weight:800; color:var(--ocean); border-bottom:3px solid var(--ocean); min-width:48px; text-align:center; line-height:1.1; }

/* ── NUMPAD (takes ALL remaining space) ──────────── */
.numpad-area {
  flex: 1;           /* fills all space left after other elements */
  min-height: 0;     /* allows shrinking in flex context */
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.numpad-hint { font-size:.46rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); text-align:center; flex-shrink:0; min-height:14px; }
.numpad { flex:1; min-height:0; display:grid; gap:clamp(4px,1.2vw,7px); }
.numpad.std { grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(4,minmax(44px,1fr)); }
.numpad.sym { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,minmax(44px,1fr)); }
.numpad.par { grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,minmax(44px,1fr)); }

.nk {
  width:100%; height:100%; min-height:44px;
  display:flex; align-items:center; justify-content:center;
  border-radius:12px; background:var(--white); border:1.5px solid var(--ocean-xl); color:var(--text);
  font-size:clamp(1rem,4.5vw,1.42rem); font-weight:800;
  cursor:pointer; touch-action:manipulation;
  box-shadow:var(--shadow);
  transition:transform .08s, background .08s;
}
.nk:active { transform:scale(.78); background:var(--ocean-xl); box-shadow:none; }
.nk.flash  { background:var(--ocean)!important; color:#fff; transform:scale(.82); }
.nk.kx     { color:var(--unk-c); border-color:rgba(230,57,70,.3); }
.nk.kop    { color:var(--ocean); border-color:rgba(0,119,182,.3); font-weight:900; }
.nk.keq    { color:var(--mul-c); border-color:rgba(45,198,83,.3); }
.nk.kdel   { color:var(--sub-c); font-size:clamp(.9rem,3.5vw,1.05rem)!important; }
.nk.kclr   { color:var(--unk-c); font-size:clamp(.42rem,1.7vw,.58rem)!important; font-weight:900!important; letter-spacing:.03em; }
.nk.ke     { opacity:0; pointer-events:none; }

/* ── RESULTS ─────────────────────────────────────── */
.result-modal { text-align:center; overflow-y:auto; max-height:calc(100dvh - var(--st) - var(--sb) - 28px); }
.result-modal::-webkit-scrollbar { display:none; }
.result-wave  { font-size:3.5rem; display:block; margin-bottom:6px; animation:waveIn .5s cubic-bezier(.34,1.56,.64,1) .1s both; }
@keyframes waveIn { 0%{transform:scale(0) rotate(-15deg)} 70%{transform:scale(1.2) rotate(5deg)} 100%{transform:scale(1) rotate(0)} }
.result-title  { font-size:1.85rem; font-weight:800; color:var(--text); }
.result-sub    { font-size:.58rem; font-weight:700; letter-spacing:.10em; text-transform:uppercase; color:var(--text3); margin-bottom:10px; }
.result-score-row { display:flex; align-items:baseline; justify-content:center; gap:3px; margin-bottom:5px; }
.result-score  { font-size:3.6rem; font-weight:800; color:var(--ocean); line-height:1; }
.result-of     { font-size:1.25rem; font-weight:700; color:var(--text3); }
.result-coins  { display:inline-block; padding:6px 14px; margin:4px 0; border-radius:100px; background:rgba(199,119,0,.10); border:1.5px solid rgba(199,119,0,.25); font-size:.88rem; font-weight:800; color:#c77700; }
.result-stars  { font-size:1.75rem; letter-spacing:4px; margin-bottom:4px; }
.result-msg    { font-size:.76rem; font-weight:700; color:var(--text3); margin-bottom:9px; }
.medal-banner  { display:flex; align-items:center; gap:9px; padding:9px 13px; margin-bottom:8px; border-radius:14px; background:rgba(255,200,0,.12); border:1.5px solid rgba(255,200,0,.30); text-align:left; }
.medal-banner > span { font-size:1.9rem; }
.mb-t { font-size:.54rem; font-weight:800; letter-spacing:.10em; text-transform:uppercase; color:#c77700; }
.mb-n { font-size:1rem; font-weight:800; color:var(--text); }
.result-stats  { display:flex; gap:0; border-radius:12px; overflow:hidden; border:1.5px solid var(--ocean-xl); margin:3px 0 12px; }
.result-stats div { flex:1; padding:8px 4px; text-align:center; border-right:1.5px solid var(--ocean-xl); }
.result-stats div:last-child { border-right:none; }
.result-stats b    { display:block; font-size:1.1rem; font-weight:800; color:var(--text); }
.result-stats span { display:block; font-size:.48rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin-top:1px; }
.result-btns { display:flex; gap:9px; }
.result-btns button { flex:1; }
.btn-ghost  { padding:13px; border-radius:14px; font-size:.88rem; font-weight:800; background:var(--foam); border:1.5px solid var(--ocean-xl); color:var(--ocean); box-shadow:var(--shadow); min-height:48px; transition:transform .12s; cursor:pointer; touch-action:manipulation; }
.btn-ocean  { padding:13px; border-radius:14px; font-size:.88rem; font-weight:800; background:var(--ocean); border:none; color:#fff; box-shadow:0 4px 16px rgba(0,119,182,.40); min-height:48px; transition:transform .12s; cursor:pointer; touch-action:manipulation; }
.btn-ghost:active, .btn-ocean:active { transform:scale(.87); }

/* ── TROPHY ──────────────────────────────────────── */
.trophy-modal { overflow-y:auto; max-height:88dvh; }
.trophy-modal::-webkit-scrollbar { display:none; }
.trophy-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin:12px 0; }
.trophy-item  { border-radius:14px; background:var(--foam); border:1.5px solid var(--ocean-xl); padding:12px 7px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; filter:grayscale(1) brightness(.55); transition:filter .35s, box-shadow .35s; }
.trophy-item.on { filter:none; box-shadow:0 0 14px rgba(255,200,0,.35); }
.trophy-item > span { font-size:2rem; display:block; }
.trophy-item b    { font-size:.78rem; color:var(--text); }
.trophy-item small{ font-size:.50rem; color:var(--text3); }
.trophy-total { font-size:.68rem; font-weight:800; color:var(--text3); text-align:center; padding-top:5px; border-top:1.5px solid var(--ocean-xl); }
.trophy-total b { color:var(--ocean); }

/* ── SHOP ────────────────────────────────────────── */
.shop-modal  { padding:0; overflow:hidden; display:flex; flex-direction:column; }
.shop-top    { display:flex; align-items:center; justify-content:space-between; padding:13px 14px 9px; border-bottom:1.5px solid var(--ocean-xl); flex-shrink:0; }
.shop-top .close-btn { position:static; }
.shop-bal    { display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:100px; background:rgba(199,119,0,.10); border:1.5px solid rgba(199,119,0,.28); font-size:.88rem; font-weight:800; color:#c77700; }
.shop-tabs   { display:flex; border-bottom:1.5px solid var(--ocean-xl); flex-shrink:0; }
.sh-tab      { flex:1; padding:9px 6px; font-size:.76rem; font-weight:800; color:var(--text3); background:none; border:none; border-bottom:3px solid transparent; cursor:pointer; min-height:44px; transition:color .14s, border-color .14s; touch-action:manipulation; }
.sh-tab.active { color:var(--ocean); border-bottom-color:var(--ocean); }
.shop-body   { flex:1; overflow-y:auto; padding:12px 14px 14px; }
.shop-body::-webkit-scrollbar { display:none; }
.shop-grid   { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.sh-item     { border-radius:14px; background:var(--foam); border:2px solid var(--ocean-xl); padding:11px 7px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; touch-action:manipulation; min-height:44px; transition:transform .12s cubic-bezier(.34,1.56,.64,1), border-color .14s; }
.sh-item:active { transform:scale(.88); }
.sh-item.owned  { border-color:var(--ocean); background:rgba(0,119,182,.08); }
.sh-item.equip  { border-color:#c77700; background:rgba(199,119,0,.08); }
.sh-item-ico    { font-size:2.1rem; }
.sh-item-name   { font-size:.70rem; font-weight:800; color:var(--text); }
.sh-item-price  { font-size:.70rem; font-weight:800; color:#c77700; }
.sh-item-owned  { font-size:.56rem; font-weight:800; color:var(--ocean); }
.shop-note      { font-size:.64rem; font-weight:800; color:var(--text3); text-align:center; margin-bottom:9px; grid-column:1/-1; }
.ba-item { border-radius:14px; background:var(--foam); border:1.5px solid var(--ocean-xl); padding:9px 6px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px; filter:grayscale(1) brightness(.55); transition:filter .32s, box-shadow .32s; }
.ba-item.on { filter:none; box-shadow:0 0 10px rgba(255,200,0,.22); }
.ba-item-ico  { font-size:1.85rem; display:block; }
.ba-item-name { font-size:.66rem; font-weight:800; color:var(--text); display:block; }
.ba-item-desc { font-size:.44rem; font-weight:700; color:var(--text3); display:block; line-height:1.2; }

/* ── UTILITIES ───────────────────────────────────── */
.hidden { display:none !important; }
.score-pop { animation:scorePop .26s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes scorePop { from{transform:scale(.6)} to{transform:scale(1)} }

@media (max-height:680px) {
  .card { min-height:80px; } .card-ico { font-size:1.5rem; }
  .mode-tab .tab-s { display:none; }
}
@media (min-height:860px) {
  .card { min-height:clamp(106px,24vw,124px); } .card-ico { font-size:2rem; }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms!important; transition-duration:.01ms!important; }
  .b { display:none; }
}

/* ══════════════════════════════════════════════════════
   SUPER PUTERI
══════════════════════════════════════════════════════ */

/* Power bar — strip above dots row */
.power-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 10px;
  background: var(--white);
  border-radius: 12px;
  border: 1.5px solid var(--ocean-xl);
  box-shadow: var(--shadow);
  flex-shrink: 0;
  min-height: 40px;
}
.power-chips {
  display: flex;
  gap: 6px;
  align-items: center;
}
.power-chip {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg,#e0f4fd,#b0dcf0);
  border: 1.5px solid var(--ocean-xl);
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: opacity .25s, filter .25s;
}
.power-chip.used {
  opacity: .35;
  filter: grayscale(1);
}

/* Skip button inside power bar */
.skip-btn {
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--ocean);
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,119,182,.35);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  min-height: 32px;
}
.skip-btn:active { transform: scale(.88); }
.skip-btn.used {
  background: var(--text3);
  opacity: .55;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Power items in shop (full-width, not grid cell) ── */
#sh-powers:not(.hidden) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.power-item {
  /* Override grid-cell style — full width row */
  grid-column: 1 / -1;
  flex-direction: row !important;
  align-items: center;
  text-align: left;
  padding: 13px 14px;
  min-height: 60px;
  gap: 12px;
  border-radius: 16px;
}
.power-item .sh-item-ico {
  font-size: 2rem;
  flex-shrink: 0;
}
.power-item .sh-item-name {
  font-size: .88rem;
  font-weight: 800;
  color: var(--text);
}
.power-item-desc {
  display: block;
  font-size: .54rem;
  font-weight: 700;
  color: var(--text3);
  margin-top: 1px;
}
.power-item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.power-item .sh-item-price {
  font-size: .84rem;
  font-weight: 800;
  color: #c77700;
  white-space: nowrap;
  flex-shrink: 0;
}
.power-item.owned {
  border-color: var(--ocean);
  background: linear-gradient(135deg,rgba(0,119,182,.06),rgba(0,180,216,.08));
}
.power-item .sh-item-owned {
  font-size: .60rem;
  font-weight: 800;
  color: var(--ocean);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 3-tab shop — slightly smaller font */
.shop-tabs .sh-tab { font-size: .68rem; }

/* power-chip-btn: clickable power buttons in exercise bar */
.power-chip-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg,#e0f4fd,#b0dcf0);
  border: 2px solid var(--ocean-xl);
  font-size: 1.1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: manipulation;
  box-shadow: var(--shadow);
  transition: transform .12s cubic-bezier(.34,1.56,.64,1), opacity .2s;
  flex-shrink: 0;
}
.power-chip-btn:active { transform: scale(.80); }
.power-chip-btn.passive { cursor: default; }
.power-chip-btn.used {
  opacity: .35;
  filter: grayscale(1);
  cursor: not-allowed;
  box-shadow: none;
  border-color: #ccc;
}