/* ============ Math Sprint — global look ============ */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Segoe UI", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
  background: #061336;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
}
button { font-family: inherit; color: inherit; }

#stage {
  position: relative;
  margin: 0 auto;
  width: min(100vw, 480px);
  height: 100dvh;
  max-height: 100dvh;
  background: linear-gradient(180deg, #0a2f7e 0%, #123c9e 35%, #1a49c0 70%, #0d2b6b 100%);
  overflow: hidden;
  box-shadow: 0 0 60px rgba(0,0,0,.6);
}
#app { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; }
#fx-layer, #toast-layer { position: absolute; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  animation: screenIn .28s ease-out;
  padding: calc(8px + env(safe-area-inset-top)) 10px calc(8px + env(safe-area-inset-bottom));
  overflow: hidden;
}
@keyframes screenIn { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
body.reduced-motion .screen, body.reduced-motion * { animation-duration: .01s !important; transition-duration: .01s !important; }

.scroll-y { overflow-y: auto; overflow-x: hidden; flex: 1; scrollbar-width: thin; scrollbar-color: #3f7dff transparent; }
.scroll-y::-webkit-scrollbar { width: 5px; }
.scroll-y::-webkit-scrollbar-thumb { background: #3f7dff; border-radius: 3px; }

/* ============ shared panels & chips ============ */
.panel {
  background: linear-gradient(180deg, #16337f, #102a63);
  border: 2px solid #3f7dff;
  border-radius: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  background: linear-gradient(180deg, #16337f, #0e2557);
  border: 2px solid #3f7dff; border-radius: 999px;
  padding: 4px 10px; font-weight: 800; font-size: 14px;
}
.gold-text {
  font-weight: 900;
  background: linear-gradient(180deg, #ffe259, #ffa751);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(120,60,0,.55));
}
.blue-text {
  font-weight: 900;
  background: linear-gradient(180deg, #cfe8ff, #6db4ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(0,30,90,.6));
}

/* ============ top bar ============ */
.topbar { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.avatar-chip { display: flex; align-items: center; gap: 7px; padding: 3px 12px 3px 4px; cursor: pointer; border: 2px solid #3f7dff; border-radius: 999px; background: linear-gradient(180deg,#16337f,#0e2557); }
.avatar-face {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe0b8, #f5b56b);
  border: 2px solid #ffd23f; display: flex; align-items: center; justify-content: center;
  font-size: 19px; overflow: hidden;
}
.avatar-meta { line-height: 1.05; }
.avatar-meta .name { font-weight: 800; font-size: 13px; }
.avatar-meta .lvl { font-size: 11px; color: #ffd23f; font-weight: 800; display: flex; align-items: center; gap: 4px; }
.xp-mini { width: 46px; height: 6px; border-radius: 3px; background: #0a1d48; overflow: hidden; }
.xp-mini i { display: block; height: 100%; background: linear-gradient(90deg,#ffd23f,#ffa62b); }

.currency { margin-left: auto; display: flex; gap: 5px; }
.cur-pill { cursor: pointer; }
.cur-pill .plus {
  width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(180deg,#7ee62c,#3fae12);
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: #fff;
  box-shadow: 0 1px 0 #2c7a0b;
}
.streak-badge {
  cursor: pointer; text-align: center; padding: 2px 9px; border-radius: 12px;
  background: linear-gradient(180deg, #4a1602, #7a2a05);
  border: 2px solid #ff7a1c; line-height: 1;
}
.streak-badge .num { font-size: 16px; font-weight: 900; color: #fff; }
.streak-badge .lbl { font-size: 7.5px; font-weight: 800; color: #ffc79b; letter-spacing: .4px; }

/* ============ buttons ============ */
.big-btn {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; border: none; border-radius: 18px; padding: 10px 16px;
  cursor: pointer; text-align: left; color: #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.35), 0 8px 16px rgba(0,0,0,.3);
  transition: transform .08s, box-shadow .08s; overflow: visible;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.3); }
.big-btn .ico { font-size: 26px; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.big-btn .t1 { font-size: 19px; font-weight: 900; letter-spacing: .5px; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.big-btn .t2 { font-size: 11.5px; font-weight: 700; opacity: .92; }
.big-btn .chev { margin-left: auto; font-size: 20px; font-weight: 900; opacity: .85; }
.big-btn .noti {
  position: absolute; top: -6px; right: -4px; min-width: 22px; height: 22px; border-radius: 11px;
  background: linear-gradient(180deg,#ff5b5b,#d61f1f); border: 2px solid #fff;
  font-size: 12px; font-weight: 900; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.btn-green  { background: linear-gradient(180deg, #8ce637 0%, #4caf2e 55%, #37881f 100%); }
.btn-blue   { background: linear-gradient(180deg, #4d9bff 0%, #1e62e0 55%, #1546ad 100%); }
.btn-purple { background: linear-gradient(180deg, #b06cff 0%, #7a2fe0 55%, #5c1fb0 100%); }
.btn-orange { background: linear-gradient(180deg, #ffbe3d 0%, #f28c07 55%, #c66a00 100%); }
.btn-teal   { background: linear-gradient(180deg, #3fd6c0 0%, #12958a 55%, #0c6e66 100%); }
.btn-grey   { background: linear-gradient(180deg, #8a97b8 0%, #5a6684 55%, #46516b 100%); }
.btn-red    { background: linear-gradient(180deg, #ff7a5b 0%, #e0331e 55%, #ad2415 100%); }

/* ============ bottom nav ============ */
.bottom-nav {
  display: flex; gap: 4px; padding: 6px 4px;
  background: linear-gradient(180deg, #0e2557, #0a1c44);
  border: 2px solid #2c5cd8; border-radius: 16px; margin-top: 6px;
}
.nav-item {
  position: relative; flex: 1; background: none; border: none; border-radius: 12px;
  padding: 5px 2px 4px; cursor: pointer; text-align: center; color: #9db4e8;
}
.nav-item .ico { font-size: 20px; display: block; filter: grayscale(.25); }
.nav-item .lbl { font-size: 8.5px; font-weight: 800; letter-spacing: .4px; }
.nav-item.active { background: linear-gradient(180deg,#1e4ecf,#153a9e); color: #fff; border: 1.5px solid #4d8dff; }
.nav-item.active .ico { filter: none; }
.nav-item .noti {
  position: absolute; top: -2px; right: 8px; min-width: 17px; height: 17px; border-radius: 9px;
  background: linear-gradient(180deg,#ff5b5b,#d61f1f); border: 1.5px solid #fff;
  font-size: 10px; font-weight: 900; color: #fff; display: flex; align-items: center; justify-content: center;
}

/* ============ art screens: real documentation artwork + live hotspots ============ */
.art-screen { padding: 0 !important; }
.art-topbar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 8;
  padding: calc(6px + env(safe-area-inset-top)) 10px 14px;
  background: linear-gradient(180deg, #0a2f7e 0%, #0a2f7e 72%, rgba(10,47,126,0) 100%);
}
.art-topbar .topbar { margin-bottom: 0; }
.art-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.art-scroll::-webkit-scrollbar { display: none; }
.art-stage { position: relative; width: 100%; container-type: inline-size; }
.art-stage img.art-bg { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
/* covers the artwork's baked-in (static) topbar strip; scales with the art */
.art-cover {
  position: absolute; top: 0; left: 0; right: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, #0a2f7e 0%, #0a2f7e 78%, rgba(10,47,126,0) 100%);
}
.hotspot {
  position: absolute; z-index: 5; background: transparent; border: none; cursor: pointer;
  border-radius: 16px; -webkit-tap-highlight-color: transparent;
}
.hotspot:active { background: rgba(255,255,255,.18); box-shadow: inset 0 0 22px rgba(255,255,255,.35); }
.hotspot.round { border-radius: 50%; }
.live-chip { position: absolute; z-index: 6; }
.live-panel {
  position: absolute; z-index: 6; display: flex; flex-direction: column; justify-content: center;
  background: linear-gradient(180deg,#16337f,#0e2557); border: 2px solid #3f7dff; border-radius: 12px;
  padding: 3px 7px; font-size: 9px; font-weight: 900; line-height: 1.25;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
  overflow: hidden;
}
.live-panel .boost-timer { margin-top: 1px; padding: 1px 4px; font-size: 10px; }
/* opaque circle that sits exactly on a painted notification badge */
.badge-cover {
  position: absolute; z-index: 6; transform: translate(-50%, -50%);
  aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 900; color: #fff;
}
.badge-cover.alert { background: linear-gradient(180deg,#ff5b5b,#d61f1f); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.45); }
.badge-cover.done { background: linear-gradient(180deg,#8ce637,#3f9e1d); border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,.45); }
.badge-cover.mute { background: #0e2557; border: 2px solid #24488f; }
.node-lock {
  position: absolute; z-index: 6; transform: translate(-50%,-50%);
  width: 11%; aspect-ratio: 1; border-radius: 50%;
  background: rgba(8,12,36,.62); border: 2px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-size: 4cqw;
  pointer-events: none;
}
.node-stars {
  position: absolute; z-index: 6; transform: translateX(-50%);
  background: rgba(8,12,36,.94); border: 1.5px solid rgba(90,120,200,.6); border-radius: 8px; padding: 1px 5px;
  font-size: 8px; font-size: 2.1cqw; letter-spacing: -1px; white-space: nowrap; pointer-events: none;
  min-width: 9%; text-align: center; border-radius: 1.8cqw; padding: 0.3cqw 1.1cqw;
}
.node-stars .off { opacity: .3; filter: grayscale(1); }
.node-grade {
  position: absolute; z-index: 6; transform: translate(-50%,-50%);
  background: linear-gradient(180deg,#ffd23f,#f7a708); color: #3a2600;
  border: 1.5px solid rgba(255,255,255,.55); border-radius: 8px; padding: 1px 6px; border-radius: 1.8cqw; padding: 0.3cqw 1.3cqw;
  font-size: 8.5px; font-size: 2cqw; font-weight: 900; white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.rail-grade {
  position: absolute; z-index: 6; transform: translateY(-50%);
  background: rgba(8,12,36,.9); color: #ffe08a; font-weight: 900;
  border: 1.5px solid rgba(255,210,63,.7); border-radius: 9px; padding: 3px 7px;
  font-size: 10px; white-space: nowrap; pointer-events: none;
}
/* fully redrawn journey boxes — cover the painted rail boxes so each box's
   label always matches the grade/skill it opens (driven by the curriculum) */
.rail-box {
  position: absolute; z-index: 6; display: flex; align-items: center;
  border-radius: 13px; padding: 0 5px 0 4px; overflow: hidden; color: #fff;
  border: 1.5px solid rgba(255,255,255,.4); pointer-events: none;
  box-shadow: 0 3px 9px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.3);
}
.rail-box .rb-ico {
  flex: 0 0 auto; width: 2.05em; height: 2.05em; margin-right: 5px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.22); border-radius: 8px; font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.rail-box .rb-txt { display: flex; flex-direction: column; line-height: 1.08; min-width: 0; }
.rail-box .rb-title {
  font-size: 11px; font-weight: 900; letter-spacing: .2px;
  white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.rail-box .rb-grade {
  font-size: 9px; font-weight: 800; opacity: .95;
  white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.45);
}

/* ===== Solutions & explanations ===== */
.sol-btn {
  margin-left: auto; flex-shrink: 0; align-self: center;
  background: rgba(255,255,255,.16); color: #fff; border: 1.5px solid rgba(255,255,255,.5);
  border-radius: 9px; padding: 3px 9px; font-size: 11px; font-weight: 900; cursor: pointer;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.sol-btn:active { transform: scale(.94); }
.sol-prompt { font-size: 15px; font-weight: 900; color: #fff; margin: 2px 0 8px; line-height: 1.35; white-space: pre-wrap; }
.sol-opts { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.sol-opt {
  font-size: 13px; font-weight: 700; color: #dfe8fb; padding: 7px 10px; border-radius: 9px;
  background: #0e2557; border: 1.5px solid #26407e; display: flex; align-items: center; gap: 6px;
}
.sol-opt.sol-correct { background: rgba(88,196,60,.18); border-color: #58c43c; color: #d4ffca; }
.sol-opt.sol-wrong { background: rgba(224,60,80,.15); border-color: #e0413e; color: #ffd2d0; }
.sol-tag { margin-left: auto; font-size: 9.5px; font-weight: 900; border-radius: 7px; padding: 1px 6px; }
.sol-tag.ok { color: #58c43c; border: 1px solid #58c43c; }
.sol-tag.no { color: #ff8a86; border: 1px solid #e0413e; }
.sol-exp {
  font-size: 12.5px; font-weight: 600; color: #eaf1ff; line-height: 1.5;
  background: linear-gradient(180deg,#123a86,#0e2b62); border: 1.5px solid #3f7dff;
  border-radius: 11px; padding: 9px 11px;
}
.sol-exp b { color: #ffd23f; font-weight: 900; }
.skinfo-desc {
  font-size: 13px; font-weight: 700; color: #eaf1ff; line-height: 1.5;
  background: linear-gradient(180deg,#123a86,#0e2b62); border: 1.5px solid #3f7dff;
  border-radius: 11px; padding: 10px 12px; margin-bottom: 10px;
}
.skinfo-desc b { font-size: 15px; color: #fff; font-weight: 900; }
.skinfo-eg-label { font-size: 10px; font-weight: 900; letter-spacing: .5px; color: #9db4e8; margin: 4px 2px 6px; }
.wk-steps {
  background: linear-gradient(180deg,#0e2b62,#0a1f4a); border: 1.5px solid #3f7dff;
  border-radius: 11px; padding: 8px 12px; margin-bottom: 10px;
}
.wk-step {
  font-family: ui-monospace, "Cascadia Code", "Consolas", monospace;
  font-size: 14.5px; font-weight: 800; color: #eaf1ff; padding: 4px 0; letter-spacing: .3px;
}
.wk-step + .wk-step { border-top: 1px dashed rgba(255,255,255,.13); }
.review-sol-btn {
  display: block; width: 100%; margin: 8px 0 0; padding: 11px;
  background: linear-gradient(180deg,#1aa79a,#12857a); color: #fff;
  border: 2px solid #2fe0c8; border-radius: 14px; font-size: 14px; font-weight: 900;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.review-sol-btn:active { transform: scale(.98); }

/* ===== Practice journal ===== */
.jrnl-seg { display: flex; gap: 5px; margin: 6px 0; }
.jrnl-tab {
  flex: 1; padding: 8px 4px; border-radius: 10px; border: 2px solid #26407e;
  background: #12295e; color: #aec6f5; font-size: 11.5px; font-weight: 900; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.jrnl-tab.on { background: #1e4ecf; border-color: #ffd23f; color: #fff; }
.jrnl-day {
  font-size: 10.5px; font-weight: 900; letter-spacing: .5px; color: #9db4e8;
  margin: 12px 2px 5px; text-transform: uppercase;
}
.jrnl-item {
  width: 100%; text-align: left; display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; margin-bottom: 5px; cursor: pointer; border-left: 4px solid #26407e;
  -webkit-tap-highlight-color: transparent;
}
.jrnl-item.ok { border-left-color: #58c43c; }
.jrnl-item.no { border-left-color: #e0413e; }
.jrnl-item:active { transform: scale(.99); }
.jrnl-item .ji-mark { font-size: 16px; flex-shrink: 0; }
.jrnl-item .ji-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.jrnl-item .ji-skill { font-size: 10px; font-weight: 800; color: #7cc0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jrnl-item .ji-q { font-size: 12.5px; font-weight: 700; color: #eaf1ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jrnl-item .ji-time { font-size: 10px; font-weight: 700; color: #7d97cf; flex-shrink: 0; }
.wc-live {
  position: absolute; z-index: 6; transform: translate(-50%,-50%);
  background: rgba(8,12,36,.96); border: 1.5px solid #ffd23f; border-radius: 8px;
  padding: 1px 7px; font-size: 9px; font-size: 2.3cqw; font-weight: 900; color: #ffd23f; pointer-events: none;
  min-width: 8.5%; text-align: center; border-radius: 1.8cqw; padding: 0.4cqw 1.4cqw;
}
/* live missions counter on the painted bottom nav (red = pending, green = all done) */
.nav-live-badge {
  position: absolute; z-index: 6; transform: translate(-50%,-50%);
  background: linear-gradient(180deg,#ff6a4d,#e03516); color: #fff;
  border: 1.5px solid rgba(255,255,255,.75); border-radius: 50%;
  min-width: 3.6%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-size: 2.1cqw; font-weight: 900; pointer-events: none;
  box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.nav-live-badge.done { background: linear-gradient(180deg,#5ec26a,#2e9e4f); }
.spark-art { width: 100%; border-radius: 12px; display: block;
  -webkit-mask-image: radial-gradient(130% 125% at 50% 45%, #000 60%, transparent 97%);
  mask-image: radial-gradient(130% 125% at 50% 45%, #000 60%, transparent 97%); }
.monster-img { height: 112px; display: block; margin: 0 auto;
  -webkit-mask-image: radial-gradient(115% 115% at 50% 48%, #000 58%, transparent 96%);
  mask-image: radial-gradient(115% 115% at 50% 48%, #000 58%, transparent 96%);
  animation: monsterBob 2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.monster-wrap.hurt .monster-img { animation: monsterHurt .4s; }

/* ============ spark speech bubble (drill + map) ============ */
.spark-side { text-align: center; margin-bottom: 4px; }
.spark-side svg { height: 62px; }
.speech-bubble {
  position: relative; background: linear-gradient(180deg, #f4f9ff, #d8e8ff);
  color: #123a8f; border-radius: 12px; padding: 5px 7px; margin-bottom: 6px;
  font-size: 11px; font-weight: 900; font-style: italic; line-height: 1.05;
  box-shadow: 0 3px 6px rgba(0,0,0,.35);
}
.speech-bubble .sb2 { color: #f0a010; font-size: 13px; display: block; }
.speech-bubble::after {
  content: ""; position: absolute; bottom: -7px; left: 60%;
  border: 8px solid transparent; border-top-color: #d8e8ff; border-bottom: none;
  transform: skewX(-24deg);
}

/* ============ results scene ============ */
.results-cols { display: flex; gap: 8px; align-items: stretch; margin: 6px 0; }
.chest-scene { flex: 1; position: relative; min-height: 158px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(circle at 50% 68%, rgba(255,190,60,.4), rgba(20,40,110,0) 62%), linear-gradient(180deg,#142c66,#0e2050);
  border: 2px solid #2c5cd8; }
.chest-scene .cs-spark { position: absolute; left: 2px; bottom: 4px; height: 96px; animation: bob 2.2s ease-in-out infinite; }
.chest-scene .cs-chest { position: absolute; right: 10px; bottom: 6px; font-size: 58px; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); animation: chestGlow 1.8s ease-in-out infinite; }
@keyframes chestGlow { 50% { transform: scale(1.05); filter: drop-shadow(0 0 14px rgba(255,200,60,.9)); } }
.chest-scene .cs-float { position: absolute; font-size: 17px; animation: floatSym 2.6s ease-in-out infinite; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.results-cols .reward-rows { width: 158px; flex-shrink: 0; margin: 0; }
.results-cols .reward-row { padding: 6px 10px; }
.results-cols .reward-row .ico { font-size: 19px; }
.results-cols .reward-row .amt { font-size: 16px; }

/* ============ battle team chips ============ */
.team-row { display: flex; gap: 6px; margin-bottom: 6px; }
.team-chip { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 4px; border-radius: 999px; border: 2px solid #3f7dff; background: linear-gradient(180deg,#16337f,#0e2557); }
.team-chip .tc-face { width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe0b8, #f5b56b); display: flex; align-items: center; justify-content: center; font-size: 15px; border: 2px solid #ffd23f; }
.team-chip .tc-face.bot { background: radial-gradient(circle at 35% 30%, #eef4fb, #b9c6d9); border-color: #4d8dff; }
.team-chip b { font-size: 11px; font-weight: 900; display: block; line-height: 1; }
.team-chip .energy { width: 54px; height: 8px; border-radius: 4px; background: #0a1d48; border: 1px solid #2c8a2c; overflow: hidden; margin-top: 2px; }
.team-chip .energy i { display: block; height: 100%; width: 85%; background: linear-gradient(90deg,#8ce637,#3fae12); }
.battle-foot { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.battle-foot .bf-shield { font-size: 26px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.battle-foot .bf-text { flex: 1; text-align: center; font-size: 11px; font-weight: 900; color: #ffd23f; line-height: 1.25; }
.battle-foot .bf-chest { text-align: center; font-size: 24px; line-height: 1; }
.battle-foot .bf-chest span { display: block; font-size: 7.5px; font-weight: 900; color: #ffd23f; }

/* ============ device rows (account) ============ */
.device-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px; }
.device-row .ico { font-size: 20px; }
.device-row .d-t { flex: 1; min-width: 0; }
.device-row .d-t b { display: block; font-size: 12px; font-weight: 900; }
.device-row .d-t span { font-size: 9.5px; color: #aec6f5; font-weight: 700; }
.device-row .this-dev { font-size: 9px; font-weight: 900; color: #8ce637; border: 1.5px solid #8ce637; border-radius: 8px; padding: 2px 7px; }

/* ============ generic header w/ back ============ */
.screen-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.back-btn {
  width: 40px; height: 40px; border-radius: 12px; border: 2px solid #3f7dff; cursor: pointer;
  background: linear-gradient(180deg,#1e4ecf,#153a9e); font-size: 18px; font-weight: 900; color: #fff;
  box-shadow: 0 3px 0 rgba(0,0,0,.35); flex-shrink: 0;
}
.back-btn:active { transform: translateY(2px); box-shadow: none; }
.screen-title { font-size: 21px; font-weight: 900; letter-spacing: .5px; }

/* ============ drill screen ============ */
.drill-top { display: flex; gap: 5px; margin-bottom: 6px; }
.drill-chip { flex: 1; padding: 5px 8px; border-radius: 12px; text-align: center; line-height: 1.05; }
.drill-chip .v { font-size: 16px; font-weight: 900; }
.drill-chip .k { font-size: 8px; font-weight: 800; letter-spacing: .5px; color: #aec6f5; }
.timer-chip { background: linear-gradient(180deg,#4a3502,#7a5a05); border-color: #ffd23f; }
.timer-chip .v { color: #ffe259; }
.timer-chip.danger { animation: pulseRed 1s infinite; }
@keyframes pulseRed { 50% { border-color: #ff4d4d; box-shadow: 0 0 14px rgba(255,60,60,.7); } }

.q-progress { display: flex; align-items: center; gap: 6px; padding: 6px 10px; margin-bottom: 6px; }
.q-count { font-size: 12px; font-weight: 900; color: #ffd23f; white-space: nowrap; }
.q-dots { display: flex; align-items: center; gap: 3px; flex: 1; overflow: hidden; justify-content: center; }
.q-dot {
  width: 17px; height: 17px; border-radius: 50%; flex-shrink: 0;
  background: #0e2557; border: 2px solid #2c5cd8;
  display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 900; color: #7d97cf;
}
.q-dot.done { background: linear-gradient(180deg,#8ce637,#4caf2e); border-color: #b9f57e; color: #fff; }
.q-dot.cur { background: #1e4ecf; border-color: #7cc0ff; color: #fff; box-shadow: 0 0 8px #4d8dff; transform: scale(1.2); }
.q-dot.chest { background: none; border: none; font-size: 15px; width: 20px; }
.q-xp { font-size: 11px; font-weight: 900; color: #8ce637; white-space: nowrap; }

.drill-body { display: flex; gap: 7px; flex: 1; min-height: 0; }
.subject-rail { width: 92px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: none; }
.subject-rail::-webkit-scrollbar { display: none; }
.s-node { padding: 5px 7px; border-radius: 10px; background: linear-gradient(180deg,#12295e,#0d1f4a); border: 1.5px solid #24488f; line-height: 1.15; }
.s-node b { display: block; font-size: 8.4px; font-weight: 900; letter-spacing: .3px; color: #aec6f5; }
.s-node span { font-size: 9.5px; font-weight: 700; color: #dce9ff; font-style: italic; }
.s-node .chk { float: right; color: #8ce637; font-weight: 900; font-size: 10px; }
.s-node.active { background: linear-gradient(180deg,#2563eb,#1a49b8); border-color: #7cc0ff; box-shadow: 0 0 10px rgba(77,141,255,.5); }
.s-node.active b { color: #fff; }

.drill-main { flex: 1; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.q-card {
  position: relative; /* anchors the Read-Aloud 🔊 button */
  background: linear-gradient(180deg, #fdfbf3, #f2ecd8);
  border: 3px solid #3f7dff; border-radius: 18px;
  color: #1b2a52; text-align: center; padding: 10px 10px 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,.4), inset 0 2px 0 #fff;
  flex-shrink: 0;
}
.q-tag {
  display: inline-block; padding: 3px 14px; border-radius: 999px; color: #fff;
  font-size: 11px; font-weight: 900; letter-spacing: .8px; margin-bottom: 7px;
  box-shadow: 0 2px 4px rgba(0,0,0,.3);
}
.q-prompt-small { font-size: 14px; font-weight: 700; color: #445a8f; }
.q-prompt { font-size: 27px; font-weight: 900; margin-top: 4px; font-style: italic; letter-spacing: .5px; word-wrap: break-word; white-space: pre-line; overflow-wrap: anywhere; }
.q-prompt.longer { font-size: 20px; }
/* inline SVG diagrams for visual questions (doc: visual/picture questions) */
.q-visual { display: flex; justify-content: center; margin: 5px auto 2px; }
.q-visual svg { max-width: 100%; width: auto; height: auto; max-height: 108px; }
.spk-btn { display: block; margin: 8px auto 2px; padding: 8px 18px; border: none; border-radius: 999px;
  background: linear-gradient(180deg, #ffd23f, #f7a708); color: #5a3d00; font-weight: 900; font-size: 14px;
  cursor: pointer; box-shadow: 0 3px 0 #c67d00; -webkit-tap-highlight-color: transparent; }
.spk-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #c67d00; }

.answers { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.ans-btn {
  display: flex; align-items: center; gap: 8px; padding: 10px 10px;
  border-radius: 14px; border: 2px solid #3f7dff; cursor: pointer;
  background: linear-gradient(180deg,#16337f,#0e2557);
  font-size: 16px; font-weight: 900; font-style: italic; color: #fff;
  box-shadow: 0 4px 0 rgba(0,0,0,.35); transition: transform .07s;
  min-height: 50px;
}
.ans-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }
.ans-btn .letter {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid #7cc0ff; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-style: normal;
}
.ans-btn.correct { background: linear-gradient(180deg,#8ce637,#3f9e1d); border-color: #d6ffab; box-shadow: 0 0 16px rgba(120,230,50,.65); }
.ans-btn.correct .letter { border-color: #fff; background: #3f9e1d; }
.ans-btn.wrong { background: linear-gradient(180deg,#ff7a5b,#c22a16); border-color: #ffc4b5; animation: shake .3s; }
.ans-btn.dim { opacity: .35; pointer-events: none; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.feedback {
  display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 14px;
  font-weight: 800; font-size: 12px; min-height: 44px; border: 2px solid transparent;
}
.feedback.good { background: linear-gradient(180deg,#1d4d0e,#153a0a); border-color: #8ce637; }
.feedback.bad { background: linear-gradient(180deg,#5c1408,#420e05); border-color: #ff7a5b; }
.feedback.idle { background: rgba(10,29,72,.6); border-color: #24488f; color: #aec6f5; }
.feedback .fb-ico { font-size: 20px; }
.feedback .fb-xp { margin-left: auto; font-size: 15px; font-weight: 900; color: #8ce637; white-space: nowrap; }

.combo-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; }
.combo-row .c-lbl { font-size: 11px; font-weight: 900; color: #ffd23f; line-height: 1; }
.combo-row .c-lbl b { display: block; font-size: 16px; }
.combo-meter { flex: 1; height: 14px; border-radius: 7px; background: #0a1d48; border: 1.5px solid #2c5cd8; overflow: hidden; display: flex; gap: 2px; padding: 2px; }
.combo-meter i { flex: 1; border-radius: 3px; background: #142c66; }
.combo-meter i.on { background: linear-gradient(180deg,#ffd23f,#ff8a1c); box-shadow: 0 0 6px rgba(255,180,40,.8); }
.combo-word { font-size: 11px; font-weight: 900; font-style: italic; color: #ff9ff3; white-space: nowrap; }

.drill-bottom { display: flex; gap: 7px; align-items: stretch; }
.hint-btn {
  width: 84px; flex-shrink: 0; border-radius: 14px; border: 2px solid #3f7dff; cursor: pointer;
  background: linear-gradient(180deg,#16337f,#0e2557); text-align: center; padding: 5px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.hint-btn:active { transform: translateY(2px); box-shadow: none; }
.hint-btn .ico { font-size: 20px; display: block; }
.hint-btn .lbl { font-size: 10px; font-weight: 900; }
.hint-btn .cost { font-size: 10px; font-weight: 800; color: #d9a6ff; }
.goal-widget { flex: 1; padding: 5px 10px; text-align: center; }
.goal-widget .k { font-size: 9px; font-weight: 900; letter-spacing: .5px; color: #aec6f5; }
.goal-widget .v { font-size: 13px; font-weight: 900; }
.pause-btn {
  width: 74px; flex-shrink: 0; border-radius: 14px; border: 2px solid #5a6684; cursor: pointer;
  background: linear-gradient(180deg,#5a6684,#3d4660);
  font-size: 11px; font-weight: 900; box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.pause-btn:active { transform: translateY(2px); box-shadow: none; }

/* ============ results screen ============ */
.results-wrap { text-align: center; }
.results-title { font-size: 30px; font-weight: 900; font-style: italic; line-height: 1; margin: 4px 0 2px; }
.results-sub {
  display: inline-block; padding: 4px 18px; font-size: 13px; font-weight: 800; font-style: italic; color: #fff;
  background: linear-gradient(180deg,#2f6fe0,#1a49b8); border-radius: 4px; margin-bottom: 8px;
  clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0 50%);
}
.reward-rows { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.reward-row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; text-align: left; }
.reward-row .ico { font-size: 24px; }
.reward-row .amt { font-size: 20px; font-weight: 900; color: #ffd23f; }
.reward-row .lbl { font-size: 10px; font-weight: 800; color: #aec6f5; letter-spacing: .5px; }
.levelup-panel { padding: 10px 14px; margin: 6px 0; }
.levelup-title { font-size: 18px; font-weight: 900; font-style: italic; color: #ffd23f; }
.xp-bar { height: 16px; border-radius: 8px; background: #0a1d48; border: 1.5px solid #2c5cd8; overflow: hidden; margin-top: 6px; position: relative; }
.xp-bar i { display: block; height: 100%; background: linear-gradient(90deg,#8ce637,#4caf2e); transition: width .8s; }
.xp-bar span { position: absolute; inset: 0; font-size: 10px; font-weight: 900; display: flex; align-items: center; justify-content: center; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 6px 0; }
.sum-card { padding: 7px 4px; text-align: center; border-radius: 12px; }
.sum-card .ico { font-size: 15px; }
.sum-card .k { font-size: 7.5px; font-weight: 900; letter-spacing: .3px; color: #aec6f5; }
.sum-card .v { font-size: 16px; font-weight: 900; }
.sum-card .praise { font-size: 8.5px; font-weight: 800; color: #8ce637; font-style: italic; }
.badge-row { display: flex; justify-content: center; gap: 8px; margin: 6px 0; flex-wrap: wrap; }
.badge-item { width: 74px; text-align: center; }
.badge-item .b-ico {
  width: 56px; height: 56px; margin: 0 auto 3px; border-radius: 14px; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #ffd23f; box-shadow: 0 3px 8px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.3);
}
.badge-item .b-lbl { font-size: 8px; font-weight: 900; letter-spacing: .3px; }
.badge-item.locked { opacity: .35; filter: grayscale(1); }
.claim-btn {
  width: 100%; padding: 14px; border: none; border-radius: 18px; cursor: pointer;
  background: linear-gradient(180deg,#8ce637 0%,#4caf2e 55%,#37881f 100%);
  font-size: 21px; font-weight: 900; font-style: italic; letter-spacing: 1px; color: #fff;
  text-shadow: 0 2px 0 rgba(0,0,0,.3);
  box-shadow: 0 6px 0 #2c6b16, inset 0 2px 0 rgba(255,255,255,.4), 0 8px 20px rgba(0,0,0,.4);
  margin-top: 6px;
}
.claim-btn:active { transform: translateY(4px); box-shadow: 0 2px 0 #2c6b16; }

/* ============ map footer (live overlay on the art map) ============ */
.map-footer { display: flex; gap: 7px; align-items: center; padding: 8px 12px; margin-top: 2px; }
.map-footer .star-big { font-size: 26px; }
.map-footer .mf-t { flex: 1; }
.map-footer .mf-t .k { font-size: 9px; font-weight: 900; color: #aec6f5; letter-spacing: .5px; }
.map-footer .mf-t .v { font-size: 17px; font-weight: 900; }
.map-footer .next-reward { text-align: center; font-size: 9px; font-weight: 900; color: #ffd23f; }
.map-footer .next-reward .ico { font-size: 22px; display: block; }

/* ============ battle ============ */
.battle-screen { background: linear-gradient(180deg,#1a0b4d 0%, #35129e 45%, #1c0b52 100%); border-radius: 0; }
.battle-arena { position: relative; flex-shrink: 0; height: 168px; }
.monster-wrap { position: absolute; left: 50%; top: 0; transform: translateX(-50%); text-align: center; }
.monster-wrap svg { height: 108px; animation: monsterBob 2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
@keyframes monsterBob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.monster-wrap.hurt svg { animation: monsterHurt .4s; }
@keyframes monsterHurt { 0%,100% { transform: none; filter: none; } 50% { transform: translateX(6px) rotate(6deg); filter: brightness(2) saturate(0); } }
.monster-hp { width: 170px; margin: 2px auto 0; height: 13px; border-radius: 7px; background: #12073a; border: 2px solid #ff5b8f; overflow: hidden; }
.monster-hp i { display: block; height: 100%; background: linear-gradient(90deg,#ff5b8f,#d61f4f); transition: width .4s; }
.solve-fast {
  display: inline-block; margin-top: 3px; padding: 2px 12px; border-radius: 8px;
  background: #0a0428; border: 2px solid #3fd6ff; color: #3fd6ff;
  font-size: 11px; font-weight: 900; letter-spacing: 2px; font-family: monospace;
}
.battle-buddy { position: absolute; bottom: 0; right: 4px; }
.battle-buddy svg { height: 74px; transform: scaleX(-1); }
.battle-player { position: absolute; bottom: 0; left: 4px; font-size: 46px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.orbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 4px; }
.orb {
  aspect-ratio: 1; border-radius: 50%; border: none; cursor: pointer;
  font-size: 21px; font-weight: 900; color: #fff; text-shadow: 0 2px 3px rgba(0,0,0,.5);
  box-shadow: inset -4px -6px 12px rgba(0,0,0,.35), inset 4px 6px 12px rgba(255,255,255,.45), 0 5px 10px rgba(0,0,0,.45);
  transition: transform .08s;
}
.orb:active { transform: scale(.92); }
.orb-0 { background: radial-gradient(circle at 35% 30%, #d9a6ff, #8a3ff0 70%); }
.orb-1 { background: radial-gradient(circle at 35% 30%, #b9f57e, #4caf2e 70%); }
.orb-2 { background: radial-gradient(circle at 35% 30%, #7cc0ff, #1e62e0 70%); }
.orb-3 { background: radial-gradient(circle at 35% 30%, #ffcf8a, #f28c07 70%); }
.orb.correct { box-shadow: 0 0 24px #8ce637, inset 0 0 12px rgba(255,255,255,.7); }
.orb.wrong { filter: grayscale(.8) brightness(.6); }
.combo-shout { text-align: center; margin: 4px 0; min-height: 44px; }
.combo-shout .cs1 {
  font-size: 26px; font-weight: 900; font-style: italic; letter-spacing: 1px;
  background: linear-gradient(90deg,#ffd23f,#ff5b8f,#b06cff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(60,0,60,.6));
}
.combo-shout .cs2 { font-size: 15px; font-weight: 900; font-style: italic; color: #7cf3ff; letter-spacing: 2px; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.battle-chips { display: grid; grid-template-columns: repeat(4,1fr); gap: 5px; margin-top: auto; }
.b-chip { border-radius: 10px; padding: 5px 6px; text-align: center; line-height: 1.15; border: 2px solid rgba(255,255,255,.4); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.b-chip b { display: block; font-size: 8.4px; font-weight: 900; letter-spacing: .3px; }
.b-chip span { font-size: 9.5px; font-weight: 800; font-style: italic; }

/* ============ practice setup ============ */
.pr-section { font-size: 12px; font-weight: 900; letter-spacing: .6px; color: #ffd23f; margin: 10px 2px 6px; }
.pr-section span { color: #7d97cf; font-weight: 700; font-size: 10px; letter-spacing: 0; }
.grade-row { display: flex; flex-wrap: wrap; gap: 5px; }
.grade-chip {
  min-width: 40px; padding: 7px 0; border-radius: 10px; border: 2px solid #3f7dff; cursor: pointer;
  background: linear-gradient(180deg,#16337f,#0e2557); color: #cfe0ff;
  font-size: 13px; font-weight: 900; text-align: center; flex: 1;
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.grade-chip.sel { background: linear-gradient(180deg,#ffd23f,#f28c07); border-color: #ffe9a3; color: #5c3300; box-shadow: 0 0 10px rgba(255,190,60,.6); }
.track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.track-card {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 13px; cursor: pointer;
  border: 2px solid transparent; color: #fff; text-align: left;
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
}
.track-card .tc-ico { font-size: 20px; }
.track-card b { display: block; font-size: 11.5px; font-weight: 900; letter-spacing: .3px; }
.track-card span { font-size: 9px; font-weight: 700; opacity: .9; }
.track-card.sel { border-color: #fff; box-shadow: 0 0 12px rgba(255,255,255,.45), 0 3px 0 rgba(0,0,0,.3); transform: scale(1.02); }
.track-card.dim { opacity: .55; }
.skill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.skill-chip {
  display: flex; align-items: center; gap: 7px; padding: 7px 9px; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg,#12295e,#0d1f4a); border: 2px solid #24488f; color: #cfe0ff; text-align: left;
}
.skill-chip .sk-ico { font-size: 16px; }
.skill-chip b { display: block; font-size: 11px; font-weight: 900; color: #fff; }
.skill-chip span { font-size: 9px; font-weight: 700; color: #8fa8dd; font-style: italic; }
.skill-chip .sk-txt { min-width: 0; }
.skill-chip .sk-info {
  margin-left: auto; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #3f7dff; background: #0a1d48; color: #7cc0ff;
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.skill-chip .sk-info:active { transform: scale(.88); }
.skill-chip.sel .sk-info { border-color: #8ce637; color: #bff58e; }
.skill-chip .sk-chk {
  margin-left: 5px; width: 20px; height: 20px; border-radius: 7px; flex-shrink: 0;
  border: 2px solid #3f7dff; background: #0a1d48;
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 900; color: transparent;
}
.skill-chip.sel { background: linear-gradient(180deg,#1d4d0e,#153a0a); border-color: #8ce637; }
.skill-chip.sel .sk-chk { background: linear-gradient(180deg,#8ce637,#4caf2e); border-color: #d6ffab; color: #fff; }
.skill-chip.all { grid-column: 1 / -1; }
.len-row { display: flex; gap: 6px; }
.len-btn {
  flex: 1; padding: 8px; border-radius: 12px; border: 2px solid #3f7dff; cursor: pointer;
  background: linear-gradient(180deg,#16337f,#0e2557); color: #cfe0ff; text-align: center;
  font-size: 12px; font-weight: 900; box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.len-btn span { display: block; font-size: 9px; font-weight: 700; color: #8fa8dd; }
.len-btn.sel { background: linear-gradient(180deg,#2563eb,#1a49b8); border-color: #7cc0ff; color: #fff; box-shadow: 0 0 10px rgba(77,141,255,.5); }
.len-btn.sel span { color: #cfe0ff; }

/* ============ holiday events ============ */
.screen.ev-halloween { background: linear-gradient(180deg, #2a0a4e 0%, #4a1a7e 45%, #1a0533 100%); }
.screen.ev-christmas { background: linear-gradient(180deg, #0a2f6e 0%, #1a49a0 45%, #0b1f4e 100%); }
.screen.ev-easter { background: linear-gradient(180deg, #2f6fd0 0%, #4a8fd6 40%, #2a5aa8 100%); }
.screen.ev-valentine { background: linear-gradient(180deg, #4a0a3e 0%, #8f1a6e 45%, #33082a 100%); }
.screen.ev-thanksgiving { background: linear-gradient(180deg, #4a2408 0%, #8a4a1a 45%, #2e1608 100%); }
.screen.ev-newyear { background: linear-gradient(180deg, #0a1a4e 0%, #1a2f7e 45%, #080f33 100%); }

.event-badge {
  position: absolute; z-index: 7; cursor: pointer; text-align: center;
  background: linear-gradient(180deg, #ff5bab, #c01f74);
  border: 2px solid #ffd6ec; border-radius: 14px; padding: 6px 9px;
  font-size: 9.5px; font-weight: 900; line-height: 1.25; color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
  animation: evPulse 1.8s ease-in-out infinite;
}
.event-badge .eb-ico { font-size: 20px; display: block; }
@keyframes evPulse { 50% { transform: scale(1.06); box-shadow: 0 0 18px rgba(255,120,190,.8); } }

.lobby-back {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; z-index: 9;
  width: 42px; height: 42px; border-radius: 12px; border: 2px solid #fff; cursor: pointer;
  background: rgba(8,12,40,.75); color: #fff; font-size: 19px; font-weight: 900;
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.lobby-panel {
  position: absolute; left: 3%; right: 3%; bottom: 2%; z-index: 8;
  background: linear-gradient(180deg, rgba(14,30,80,.96), rgba(9,20,58,.96));
  border: 2px solid #3f7dff; border-radius: 18px; padding: 10px 12px;
  box-shadow: 0 -6px 30px rgba(0,0,0,.55);
}
.lobby-panel h3 { font-size: 15px; font-weight: 900; text-align: center; }
.lobby-panel .lp-sub { font-size: 10px; font-weight: 700; color: #cfe0ff; text-align: center; margin: 2px 0 7px; }
.milestone-row { display: flex; gap: 5px; margin-bottom: 8px; }
.milestone {
  flex: 1; text-align: center; border-radius: 11px; padding: 5px 2px;
  background: #0e2050; border: 2px solid #24488f; line-height: 1.2;
}
.milestone b { display: block; font-size: 11px; font-weight: 900; }
.milestone span { font-size: 7.8px; font-weight: 800; color: #aec6f5; }
.milestone.hit { background: linear-gradient(180deg,#1d4d0e,#153a0a); border-color: #8ce637; }
.milestone.hit span { color: #b9f57e; }
.milestone.claimed { opacity: .75; }
.event-row-active {
  font-size: 8.5px; font-weight: 900; color: #ffd23f; border: 1.5px solid #ffd23f;
  border-radius: 8px; padding: 2px 7px; animation: evPulse 1.8s infinite;
}

/* ============ shop / lists ============ */
.shop-section-title { font-size: 13px; font-weight: 900; letter-spacing: .5px; color: #ffd23f; margin: 10px 2px 6px; }
.shop-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 7px; }
.shop-item .ico { font-size: 28px; }
.shop-item .si-t { flex: 1; min-width: 0; }
.shop-item .si-t b { display: block; font-size: 13px; font-weight: 900; }
.shop-item .si-t span { font-size: 10px; color: #aec6f5; font-weight: 700; }
.buy-btn {
  border: none; border-radius: 12px; padding: 8px 12px; cursor: pointer; white-space: nowrap;
  background: linear-gradient(180deg,#8ce637,#4caf2e); color: #fff;
  font-size: 12px; font-weight: 900; box-shadow: 0 3px 0 #2c6b16;
}
.buy-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #2c6b16; }
.buy-btn.owned { background: linear-gradient(180deg,#5a6684,#3d4660); box-shadow: 0 3px 0 #232c42; pointer-events: none; }
.buy-btn.gem-cost { background: linear-gradient(180deg,#b06cff,#7a2fe0); box-shadow: 0 3px 0 #4a1690; }

.list-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 6px; }
.list-row .rank { width: 26px; font-size: 15px; font-weight: 900; color: #ffd23f; text-align: center; }
.list-row .l-face { width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%,#ffe0b8,#f5b56b); display: flex; align-items: center; justify-content: center; font-size: 18px; border: 2px solid #3f7dff; }
.list-row .l-t { flex: 1; min-width: 0; }
.list-row .l-t b { display: block; font-size: 13px; font-weight: 900; }
.list-row .l-t span { font-size: 10px; color: #aec6f5; }
.list-row .l-v { font-size: 14px; font-weight: 900; color: #ffd23f; }
.list-row.me { border-color: #ffd23f; box-shadow: 0 0 12px rgba(255,210,63,.35); }

.mission-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-bottom: 7px; }
.mission-row .ico { font-size: 24px; }
.mission-row .m-t { flex: 1; min-width: 0; }
.mission-row .m-t b { display: block; font-size: 12.5px; font-weight: 900; }
.mission-row .m-bar { height: 8px; border-radius: 4px; background: #0a1d48; overflow: hidden; margin-top: 4px; border: 1px solid #2c5cd8; }
.mission-row .m-bar i { display: block; height: 100%; background: linear-gradient(90deg,#ffd23f,#ff8a1c); }
.mission-row .m-t span { font-size: 9.5px; color: #aec6f5; font-weight: 700; }
.mission-claim {
  border: none; border-radius: 10px; padding: 7px 10px; cursor: pointer;
  font-size: 11px; font-weight: 900; color: #fff; white-space: nowrap;
  background: linear-gradient(180deg,#8ce637,#4caf2e); box-shadow: 0 3px 0 #2c6b16;
}
.mission-claim:disabled { background: linear-gradient(180deg,#5a6684,#3d4660); box-shadow: 0 3px 0 #232c42; opacity: .7; }

/* ============ settings & profile ============ */
.setting-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 7px; }
.setting-row .ico { font-size: 20px; }
.setting-row .s-t { flex: 1; font-size: 13px; font-weight: 800; }
.setting-row .s-t span { display: block; font-size: 9.5px; font-weight: 700; color: #aec6f5; }
.toggle { width: 52px; height: 28px; border-radius: 14px; border: 2px solid #3f7dff; background: #0a1d48; cursor: pointer; position: relative; flex-shrink: 0; }
.toggle i { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #5a6684; transition: all .2s; }
.toggle.on { background: #1d4d0e; border-color: #8ce637; }
.toggle.on i { left: 26px; background: #8ce637; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 8px; }
.stat-card { padding: 10px; text-align: center; }
.stat-card .v { font-size: 20px; font-weight: 900; color: #ffd23f; }
.stat-card .k { font-size: 9px; font-weight: 800; color: #aec6f5; letter-spacing: .5px; }

/* ============ modal / overlay ============ */
.overlay {
  position: absolute; inset: 0; z-index: 60; background: rgba(4,10,32,.8);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: fadeIn .2s;
}
@keyframes fadeIn { from { opacity: 0; } }
.modal { width: 100%; max-width: 360px; padding: 18px; text-align: center; animation: popIn .25s; }
@keyframes popIn { from { transform: scale(.8); opacity: 0; } }
.modal h3 { font-size: 19px; font-weight: 900; margin-bottom: 6px; }
.modal p { font-size: 12.5px; color: #cfe0ff; margin-bottom: 12px; line-height: 1.4; }
.modal-btns { display: flex; gap: 8px; }
.modal-btn {
  flex: 1; padding: 11px; border: none; border-radius: 14px; cursor: pointer;
  font-size: 14px; font-weight: 900; color: #fff; box-shadow: 0 4px 0 rgba(0,0,0,.35);
}
.modal-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,.35); }

/* ---- Local user switcher ---- */
.who-caret { font-size: 9px; color: #9db4e8; vertical-align: middle; }
.user-list { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 12px; max-height: 46vh; overflow-y: auto; }
.user-row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 9px 11px; border-radius: 14px; cursor: pointer;
  border: 2px solid #24468f; background: linear-gradient(180deg,#12295f,#0c1c40); color: #fff;
}
.user-row.active { border-color: #8ce637; background: linear-gradient(180deg,#173a2a,#0e2a1c); }
.user-row:active { transform: translateY(1px); }
.ur-face {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 24px;
  background: #0a1d48; border: 2px solid #3f7dff;
}
.ur-face svg { width: 100%; height: 100%; }
.ur-meta { flex: 1; min-width: 0; }
.ur-name { font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ur-badge { color: #8ce637; font-size: 10px; font-weight: 800; }
.ur-sub { font-size: 11px; color: #ffd23f; font-weight: 800; }
.ur-go { color: #7d97cf; font-size: 20px; font-weight: 900; flex: 0 0 auto; }
.ur-del { font-size: 16px; flex: 0 0 auto; padding: 4px 6px; border-radius: 9px; }
.ur-del:active { background: rgba(224,51,30,.25); }

/* ============ fx ============ */
.confetti { position: absolute; width: 9px; height: 9px; border-radius: 2px; animation: confettiFall linear forwards; z-index: 95; }
@keyframes confettiFall { to { transform: translateY(110vh) rotate(720deg); opacity: .6; } }
.float-xp {
  position: absolute; font-size: 20px; font-weight: 900; font-style: italic; color: #8ce637;
  text-shadow: 0 2px 4px rgba(0,0,0,.6); animation: floatUp 1s ease-out forwards; z-index: 95;
}
@keyframes floatUp { to { transform: translateY(-70px); opacity: 0; } }
.toast {
  position: absolute; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: linear-gradient(180deg,#16337f,#0e2557); border: 2px solid #3f7dff; border-radius: 999px;
  padding: 9px 20px; font-size: 13px; font-weight: 800; white-space: nowrap;
  animation: toastIn 2.4s forwards; z-index: 99; box-shadow: 0 6px 16px rgba(0,0,0,.5);
}
@keyframes toastIn { 0% { opacity: 0; transform: translate(-50%, 16px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

@media (max-height: 700px) {
  .big-btn { padding: 7px 14px; }
  .big-btn .t1 { font-size: 16px; }
}

/* ============ Brand: animated splash / boot screen ============ */
#splash {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 30%, #2f6fe6 0%, #133a86 45%, #0a1f52 100%);
  transition: opacity .5s ease, visibility .5s ease;
}
#splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.sp-inner { display: flex; flex-direction: column; align-items: center; gap: 4px; animation: spRise .6s cubic-bezier(.2,.9,.3,1.2) both; }
.sp-logo { filter: drop-shadow(0 10px 22px rgba(0,0,0,.45)); }
.sp-bot { animation: spBob 2.2s ease-in-out infinite; transform-origin: 110px 120px; }
.sp-eye { animation: spBlink 3.2s infinite; transform-origin: center; }
.sp-streaks { animation: spDash 1.1s ease-in-out infinite; }
.sp-word {
  font-weight: 900; font-size: 40px; letter-spacing: 1px; line-height: .95; text-align: center;
  color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.25), 0 0 24px rgba(79,227,255,.35); margin-top: 10px;
}
.sp-word span { display: block; color: #ffb23d; text-shadow: 0 3px 0 rgba(0,0,0,.25), 0 0 22px rgba(242,130,12,.5); }
.sp-tag { font-size: 12px; font-weight: 800; color: #bcd6ff; letter-spacing: .5px; margin-top: 8px; }
.sp-load { width: 128px; height: 7px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; margin-top: 16px; }
.sp-load > i { display: block; height: 100%; width: 40%; border-radius: 999px; background: linear-gradient(90deg,#4fe3ff,#ffb23d); animation: spLoad 1.1s ease-in-out infinite; }
@keyframes spRise { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes spBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes spBlink { 0%,92%,100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
@keyframes spDash { 0%,100% { opacity: .5; transform: translateX(0); } 50% { opacity: 1; transform: translateX(-4px); } }
@keyframes spLoad { 0% { transform: translateX(-120%); } 100% { transform: translateX(360%); } }
body.reduced-motion .sp-bot, body.reduced-motion .sp-eye, body.reduced-motion .sp-streaks, body.reduced-motion .sp-load > i { animation: none; }

/* ============ Streak freeze + reward ladder ============ */
.freeze-chip {
  flex: 0 0 auto; background: linear-gradient(180deg,#3fd6f0,#1a8fc0); border: 2px solid #bff0ff;
  border-radius: 12px; padding: 5px 10px; font-size: 14px; font-weight: 900; color: #06263a;
  box-shadow: 0 3px 0 #0c5a80, inset 0 1px 0 rgba(255,255,255,.5);
}
.streak-ladder { display: flex; justify-content: space-between; gap: 6px; padding: 12px 10px; margin-top: 8px; }
.sl-node {
  position: relative; flex: 1; text-align: center; padding: 8px 2px; border-radius: 12px;
  background: rgba(8,22,58,.6); border: 2px solid #24488f; opacity: .55;
}
.sl-node.done { opacity: 1; background: linear-gradient(180deg,#1f5a2a,#123a1a); border-color: #8ce637; }
.sl-node.next { opacity: 1; border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255,210,63,.35); animation: slPulse 1.6s ease-in-out infinite; }
@keyframes slPulse { 0%,100% { box-shadow: 0 0 0 2px rgba(255,210,63,.25); } 50% { box-shadow: 0 0 0 4px rgba(255,210,63,.5); } }
.sl-ico { font-size: 20px; line-height: 1; }
.sl-day { font-size: 10px; font-weight: 900; color: #aec6f5; margin-top: 3px; }
.sl-node.done .sl-day { color: #cdeeb0; }
.sl-check { position: absolute; top: -6px; right: -4px; background: #8ce637; color: #0a2e10; font-size: 11px; font-weight: 900; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #fff; line-height: 15px; }

/* ============ Results: You vs You + streak milestone ============ */
.yvy-panel { padding: 10px 14px; margin-top: 8px; text-align: center; }
.yvy-head { font-size: 11px; font-weight: 900; letter-spacing: .6px; color: #aec6f5; margin-bottom: 5px; }
.yvy-panel.yvy-best { border-color: #ffd23f; background: linear-gradient(180deg,#5a4a12,#2e2608); box-shadow: 0 0 0 2px rgba(255,210,63,.3), 0 4px 10px rgba(0,0,0,.35); }
.yvy-big { font-size: 17px; font-weight: 900; color: #ffd23f; }
.yvy-line { font-size: 12px; font-weight: 800; color: #dfe9ff; margin-top: 3px; }
.yvy-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 800; color: #aec6f5; padding: 3px 6px; }
.yvy-row b { font-size: 18px; color: #fff; }
.yvy-row.yvy-today { border-top: 1px dashed #2f5bb0; margin-top: 2px; padding-top: 5px; }
.yvy-up { font-size: 13px; color: #8ce637; font-weight: 900; }
.yvy-eq { font-size: 12px; color: #ffd23f; }
.yvy-keep { font-size: 12px; color: #ff9ff3; }
.yvy-faster { font-size: 11px; font-weight: 900; color: #3fd6f0; margin-top: 5px; }
.streak-milestone { padding: 12px 14px; margin-top: 8px; text-align: center; border-color: #ff9f1c; background: linear-gradient(180deg,#5a3312,#301a08); box-shadow: 0 0 0 2px rgba(255,159,28,.3), 0 4px 10px rgba(0,0,0,.4); }
.sm-top { font-size: 18px; font-weight: 900; color: #ff9f1c; }
.sm-label { font-size: 12px; font-weight: 800; color: #ffe0b0; margin-top: 2px; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 8px; }
.sm-chips span { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 3px 9px; font-size: 11px; font-weight: 800; }
.sm-cert-btn { margin-top: 9px; background: linear-gradient(180deg,#ffd23f,#e0a000); color: #3a2a00; border: none; border-radius: 12px; padding: 8px 18px; font-size: 12px; font-weight: 900; box-shadow: 0 3px 0 #a87c00; cursor: pointer; }
.sm-cert-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #a87c00; }

/* ============ Monthly challenge ============ */
.monthly-card { padding: 0; overflow: hidden; }
.mc-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.mc-ico { font-size: 30px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.mc-h-t { flex: 1; min-width: 0; }
.mc-name { font-size: 15px; font-weight: 900; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.mc-days { font-size: 10px; font-weight: 800; color: rgba(255,255,255,.9); }
.mc-body { padding: 10px 14px 12px; }
.mc-bar { position: relative; height: 22px; background: #0c2456; border: 2px solid #24488f; border-radius: 999px; overflow: hidden; }
.mc-bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg,#8ce637,#3f9e1d); border-radius: 999px; transition: width .5s ease; }
.mc-bar > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.mc-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 9px 0; }
.mc-chips span { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 800; }
.mc-claim { width: 100%; }
.mc-progress { text-align: center; font-size: 12px; font-weight: 800; color: #aec6f5; padding: 4px 0 2px; }
.monthly-done { padding: 12px 14px; margin-top: 8px; text-align: center; border-color: #ffd23f; background: linear-gradient(180deg,#4a3d0c,#2a2206); box-shadow: 0 0 0 2px rgba(255,210,63,.3), 0 4px 10px rgba(0,0,0,.4); }
.md-top { font-size: 14px; font-weight: 900; color: #ffd23f; }
.md-name { font-size: 16px; font-weight: 900; color: #fff; margin-top: 2px; }
.monthly-done .sm-cert-btn { margin-top: 9px; }

/* ============ Ads: persistent free-tier banner ============ */
#app.with-ad { bottom: 58px; }   /* make room so content/nav never sits under the banner */
#ad-banner {
  position: absolute; left: 0; right: 0; bottom: 0; height: 58px; z-index: 88;
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  background: linear-gradient(180deg, #f4f6fb, #dde5f4); color: #16244a;
  border-top: 2px solid #b9c6e4; box-shadow: 0 -5px 16px rgba(0,0,0,.35);
}
#ad-banner .ab-badge { background: #ffd23f; color: #5a4300; font-size: 9px; font-weight: 900; padding: 2px 6px; border-radius: 5px; letter-spacing: .5px; flex: 0 0 auto; }
#ad-banner .ab-ico { font-size: 26px; flex: 0 0 auto; }
#ad-banner .ab-txt { flex: 1; min-width: 0; font-size: 12px; font-weight: 800; color: #16244a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ad-banner .ab-cta { background: linear-gradient(180deg, #4d9bff, #1e62e0); color: #fff; border: none; border-radius: 9px; font-weight: 900; font-size: 11px; padding: 7px 12px; cursor: pointer; flex: 0 0 auto; }
#ad-banner .ab-cta:active { transform: translateY(1px); }
#ad-banner .ab-x { background: none; border: none; color: #6b7aaa; font-size: 15px; font-weight: 900; cursor: pointer; flex: 0 0 auto; padding: 2px 5px; }

/* ============ Ads (mock, ad-supported free tier) ============ */
.ad-overlay {
  position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 24px;
  background: rgba(4, 10, 28, .92); animation: fadeIn .2s ease;
}
.ad-label { font-size: 10px; font-weight: 900; letter-spacing: 2px; color: #7d97cf; }
.ad-creative {
  position: relative; width: 100%; max-width: 320px; background: linear-gradient(180deg, #fdfbf3, #eef2fb);
  color: #16244a; border-radius: 18px; padding: 26px 20px 20px; text-align: center;
  box-shadow: 0 16px 44px rgba(0,0,0,.5);
}
.ad-badge { position: absolute; top: 10px; left: 10px; background: #ffd23f; color: #5a4300; font-size: 9px; font-weight: 900; padding: 2px 7px; border-radius: 5px; letter-spacing: .5px; }
.ad-ico { font-size: 54px; line-height: 1; }
.ad-title { font-size: 19px; font-weight: 900; margin-top: 8px; }
.ad-body { font-size: 12.5px; color: #46557d; margin-top: 5px; line-height: 1.45; }
.ad-cta { display: inline-block; margin-top: 14px; background: linear-gradient(180deg, #4d9bff, #1e62e0); color: #fff; font-weight: 900; font-size: 13px; padding: 8px 24px; border-radius: 11px; }
.ad-controls { display: flex; align-items: center; min-height: 40px; }
.ad-count { font-size: 12px; font-weight: 800; color: #aec6f5; }
.ad-close { background: #16337f; color: #fff; border: 2px solid #3f7dff; border-radius: 12px; font-weight: 900; font-size: 14px; padding: 9px 26px; cursor: pointer; }
.ad-close:active { transform: translateY(2px); }
.ad-remove { background: none; border: none; color: #ffd23f; font-weight: 800; font-size: 12px; text-decoration: underline; cursor: pointer; padding: 4px; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============ Progress charts (profile) ============ */
.prog-chart { display: flex; align-items: flex-end; gap: 6px; height: 104px; padding: 10px 10px 8px; }
.pc-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.pc-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.pc-bar { width: 78%; border-radius: 5px 5px 0 0; min-height: 3px; box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.pc-x { font-size: 9px; font-weight: 800; color: #aec6f5; margin-top: 4px; }

/* ============ Reminder time picker ============ */
.reminder-time { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; margin-top: -2px; }
.time-input {
  background: #0c2456; border: 2px solid #3f7dff; border-radius: 10px; color: #fff;
  font-size: 15px; font-weight: 800; padding: 6px 10px; font-family: inherit;
}
.time-input::-webkit-calendar-picker-indicator { filter: invert(1); cursor: pointer; }
.toggle[disabled] { opacity: .4; pointer-events: none; }

/* ============ Comeback banner + weak-skill repair ============ */
.comeback-banner { padding: 12px 14px; margin-top: 8px; text-align: center; border-color: #3fd6c0; background: linear-gradient(180deg,#123f4f,#0a2730); box-shadow: 0 0 0 2px rgba(63,214,192,.25), 0 4px 10px rgba(0,0,0,.4); }
.fact-card { padding: 12px 14px; margin-top: 8px; text-align: left; border-color: #9b8cff; background: linear-gradient(180deg,#241f4d,#161233); box-shadow: 0 0 0 2px rgba(155,140,255,.22), 0 4px 10px rgba(0,0,0,.35); }
.fact-head { font-size: 12px; font-weight: 900; letter-spacing: .5px; color: #c9bfff; margin-bottom: 4px; }
.fact-body { font-size: 12.5px; font-weight: 700; color: #eae6ff; line-height: 1.5; }
/* after-practice parent upsell card */
.practice-upsell { padding: 12px 14px; margin-top: 8px; text-align: center; border-color: #ffd23f; background: linear-gradient(180deg,#2a2a12,#17170a); }
.practice-upsell .pu-tag { font-size: 9.5px; font-weight: 800; letter-spacing: .5px; color: #cdbf7a; }
.practice-upsell .pu-body { font-size: 12px; color: #f1e9cf; line-height: 1.5; margin: 4px 0 8px; }
.practice-upsell .pu-cta { border: none; border-radius: 10px; padding: 8px 16px; font-weight: 900; font-size: 12px; color: #5c3300; background: linear-gradient(180deg,#ffe259,#ffa751); box-shadow: 0 3px 0 #b9741e; cursor: pointer; }
/* parent dashboard */
.dash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 4px; }
.dash-card { padding: 10px 4px; text-align: center; }
.dc-ico { font-size: 20px; }
.dc-v { font-size: 17px; font-weight: 900; color: #fff; margin-top: 1px; }
.dc-k { font-size: 8px; font-weight: 800; color: #9db4e8; letter-spacing: .3px; }
.dash-skill { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; margin-bottom: 5px; font-size: 12.5px; font-weight: 800; }

/* ---- Mastery Map ---- */
.mastery-hero { padding: 14px; margin-bottom: 8px; border-color: #ffd23f; background: linear-gradient(180deg,#3a3410,#1d1a08); }
.mh-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.mh-medal { font-size: 40px; }
.mh-big { font-size: 26px; font-weight: 900; color: #ffd23f; }
.mh-sub { font-size: 11px; font-weight: 800; color: #e9dca6; }
.tier-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: #24488f; margin: 4px 0; }
.tier-bar i { display: block; height: 100%; }
.mh-legend { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11px; font-weight: 800; color: #eae6ff; }
.mastery-next { padding: 11px 13px; margin-bottom: 8px; border-color: #8ce637; }
.mn-head { font-size: 11px; font-weight: 900; letter-spacing: .5px; color: #a9e977; margin-bottom: 6px; }
.mn-body { display: flex; align-items: center; gap: 10px; }
.mn-ico { font-size: 26px; }
.mn-t { flex: 1; min-width: 0; }
.mn-t b { font-size: 13px; }
.mn-t span { font-size: 10.5px; color: #aec6f5; font-weight: 700; }
.mn-bar { height: 7px; border-radius: 5px; background: #14306a; margin: 4px 0; overflow: hidden; }
.mn-bar i { display: block; height: 100%; background: #8ce637; }
.mn-btn { margin-top: 8px; width: 100%; padding: 9px; border: none; border-radius: 10px; font-weight: 900; font-size: 13px; color: #06210a; background: linear-gradient(180deg,#a9e977,#6fbf37); box-shadow: 0 3px 0 #3f7e1e; cursor: pointer; }
.mastery-lvl { padding: 0; margin-bottom: 6px; overflow: hidden; }
.ml-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: none; border: none; color: inherit; cursor: pointer; text-align: left; }
.ml-ico { font-size: 22px; }
.ml-t { flex: 1; min-width: 0; }
.ml-t b { font-size: 12.5px; }
.ml-gold { font-size: 11px; font-weight: 900; color: #ffd23f; white-space: nowrap; }
.ml-chev { font-size: 12px; color: #7cc0ff; transition: transform .15s; }
.ml-skills { padding: 4px 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.skill-chip { display: flex; align-items: center; gap: 8px; padding: 7px 9px; border-radius: 10px; border: 2px solid #2c5cd8; background: #0c1c44; color: #fff; cursor: pointer; text-align: left; }
.sc-tier { font-size: 16px; }
.sc-name { flex: 1; min-width: 0; font-size: 12px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-status { display: block; font-size: 8.5px; font-weight: 800; letter-spacing: .3px; }
.skill-chip.sc-review { background: #2b1430; }
.sc-bar { width: 46px; height: 6px; border-radius: 4px; background: #14306a; overflow: hidden; flex: none; }
.sc-bar i { display: block; height: 100%; }

.pet-say { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 700; font-style: italic; color: #ffe9a8; line-height: 1.4; }
/* Read Aloud speaker buttons */
.tts-btn {
  position: absolute; top: 6px; right: 8px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: #12295e; border: 2px solid #3f7dff; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.tts-btn:active { transform: scale(.9); }
.tts-btn.locked { opacity: .8; }
.tts-btn .tts-star { position: absolute; top: -7px; right: -7px; font-size: 10px; }
.tts-btn.tts-inline { position: static; display: inline-flex; width: 28px; height: 28px; font-size: 13px; margin-left: 8px; vertical-align: middle; }
/* session (Guest vs signed-in) indicator + switcher row */
.sess-tag { font-size: 8px; font-weight: 900; letter-spacing: .4px; border-radius: 7px; padding: 1px 5px; margin-left: 4px; vertical-align: 1px; }
.sess-tag.guest { background: #24488f; color: #aec6f5; }
.sess-tag.cloud { background: transparent; padding: 0; font-size: 10px; }
.us-session { font-size: 10.5px; color: #aec6f5; text-align: center; padding: 7px 10px; background: #0c1c44; border: 1.5px solid #24488f; border-radius: 12px; line-height: 1.4; }
.us-session.cloud b { color: #7cc0ff; }
.us-session.guest b { color: #ffd23f; }
/* Fact Book collection */
.fact-new { float: right; font-size: 9px; font-weight: 900; color: #8ce637; letter-spacing: .5px; }
.fact-foot { margin-top: 6px; font-size: 9.5px; font-weight: 800; color: #7cc0ff; }
.factbook-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fb-card { display: flex; flex-direction: column; gap: 4px; padding: 9px 10px; }
.fb-card .fb-ico { font-size: 20px; }
.fb-card .fb-txt { font-size: 9.5px; line-height: 1.45; color: #cfe0ff; }
.fb-card.fb-locked { opacity: .55; }
.fb-card.fb-locked .fb-txt { font-style: italic; color: #8fa8dd; }
/* ---- Study Buddy (pet) ---- */
.btn-pink { background: linear-gradient(180deg,#ff7ac0,#e0459e); box-shadow: 0 4px 0 #9c2a6e; }
.pet-hatch { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 6px; }
.ph-egg { font-size: 34px; }
.ph-t { flex: 1; min-width: 0; }
.ph-t b { font-size: 14px; }
.ph-t span { display: block; font-size: 10.5px; color: #aec6f5; font-weight: 700; }
.ph-evo { margin-top: 2px; color: #cfe0ff !important; font-size: 11px !important; }
.ph-btn { border: none; border-radius: 10px; padding: 9px 14px; font-weight: 900; font-size: 12px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.35); cursor: pointer; }
.pet-hero { padding: 16px 14px; text-align: center; margin-bottom: 8px; }
.pet-big { font-size: 76px; line-height: 1; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); position: relative; display: inline-block; }
.pet-big.happy { animation: petbob 2.4s ease-in-out infinite; }
.pet-skin-badge { position: absolute; top: -12px; right: -18px; font-size: 32px; transform: rotate(12deg); filter: drop-shadow(0 3px 5px rgba(0,0,0,.4)); }
/* skins & accessories wardrobe */
.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.skin-chip { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; cursor: pointer; border: 2px solid #24488f; }
.skin-chip .sk-ico { font-size: 24px; line-height: 1.15; }
.skin-chip .sk-n { font-size: 9.5px; font-weight: 800; color: #cfe0ff; }
.skin-chip.sel { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255,210,63,.3); }
.skin-chip.locked { opacity: .65; }
.skin-chip.locked .sk-n { color: #9db4e8; }
@keyframes petbob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
.pet-name { font-size: 19px; font-weight: 900; margin-top: 6px; }
.pet-stage { font-size: 12px; font-weight: 800; margin-top: 2px; }
.pet-bar { height: 10px; border-radius: 6px; background: #14306a; overflow: hidden; margin: 9px auto 4px; max-width: 240px; }
.pet-bar i { display: block; height: 100%; }
.pet-toNext { font-size: 11px; color: #aec6f5; font-weight: 700; }
.pet-evo-track { display: flex; justify-content: space-between; gap: 6px; }
.pet-evo { flex: 1; aspect-ratio: 1; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; background: #0c1c44; border: 2px solid #24488f; position: relative; }
.pet-evo.done { border-color: #3fd6c0; }
.pet-evo.cur { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255,210,63,.3); transform: scale(1.06); }
.pet-evo.future { color: transparent; }
.pet-evo.future .pe-em { display: none; }
.pet-evo .pe-q { color: #4f6bb0; font-weight: 900; font-size: 24px; }
.pet-evo:not(.future) .pe-q { display: none; }
.pet-evo:not(.future) .pe-em { display: none; }
.pet-mood { padding: 10px 12px; margin-top: 8px; font-size: 12.5px; font-weight: 700; text-align: center; color: #eaf1ff; }
.pet-collection { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pet-slot { padding: 10px 6px; text-align: center; opacity: .7; }
.pet-slot.got { opacity: 1; }
.ps-em { font-size: 30px; }
.ps-n { font-size: 10.5px; font-weight: 800; color: #cfe0ff; margin-top: 3px; }
/* results-screen pet cards */
.pet-grow-card { padding: 13px 14px; margin-top: 8px; text-align: center; border-color: #ff7ac0; background: linear-gradient(180deg,#3d1230,#22091b); }
.pet-grow-card.pet-champ { border-color: #ffd23f; background: linear-gradient(180deg,#3a3410,#1d1a08); }
.pg-head { font-size: 13px; font-weight: 900; letter-spacing: .4px; color: #ffb3e2; }
.pet-champ .pg-head { color: #ffd23f; }
.pg-emoji { font-size: 60px; line-height: 1.1; animation: petbob 2s ease-in-out infinite; }
.pg-sub { font-size: 12px; font-weight: 700; color: #f3e6f6; line-height: 1.5; }
.pg-btn { margin-top: 8px; border: none; border-radius: 10px; padding: 8px 16px; font-weight: 900; font-size: 12px; color: #fff; background: linear-gradient(180deg,#ff7ac0,#e0459e); cursor: pointer; }
.pet-mini { display: flex; align-items: center; gap: 10px; padding: 9px 12px; margin-top: 8px; }
.pm-emoji { font-size: 32px; }
.pm-t { flex: 1; min-width: 0; }
.pm-t b { font-size: 13px; }
.pm-t span { font-size: 10.5px; color: #aec6f5; font-weight: 700; }
.pm-bar { height: 7px; border-radius: 5px; background: #14306a; overflow: hidden; margin: 4px 0; }
.pm-bar i { display: block; height: 100%; }
/* floating home buddy */
.home-buddy { position: absolute; right: 3%; top: 30%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(10,20,50,.66); border: 2px solid #ff7ac0; border-radius: 16px; padding: 6px 8px; cursor: pointer; backdrop-filter: blur(2px); }
.home-buddy .hb-face { font-size: 30px; line-height: 1; }
.home-buddy .hb-hint { font-size: 8px; font-weight: 800; color: #ffd0ec; white-space: nowrap; }
.home-buddy.nudge { animation: buddynudge 1.6s ease-in-out infinite; }
@keyframes buddynudge { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-5px) } }
/* floating mystery button (under the buddy) */
.home-mystery { position: absolute; right: 3%; top: 44%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 2px; background: rgba(10,20,50,.66); border: 2px solid #9b8cff; border-radius: 16px; padding: 6px 8px; cursor: pointer; backdrop-filter: blur(2px); }
.home-mystery .hm-face { font-size: 26px; line-height: 1; }
.home-mystery .hm-hint { font-size: 8px; font-weight: 800; color: #d6ccff; white-space: nowrap; }
.home-mystery.nudge { animation: buddynudge 1.5s ease-in-out infinite; }
/* mystery screen */
.mystery-card { padding: 14px; margin-bottom: 8px; border-color: #9b8cff; background: linear-gradient(180deg,#241f4d,#161233); }
.my-chip { display: inline-block; font-size: 11px; font-weight: 900; color: #c9bfff; background: rgba(155,140,255,.18); border: 1px solid #6b5fb0; border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.my-small { font-size: 11px; color: #aec6f5; margin-bottom: 4px; }
.my-prompt { font-size: 15px; font-weight: 800; color: #fff; line-height: 1.5; }
.my-answers { display: flex; flex-direction: column; gap: 7px; }
.my-opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 2px solid #3f7dff; background: #0c1c44; color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; text-align: left; }
.my-opt .letter { width: 22px; height: 22px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; background: #24488f; font-size: 12px; }
.my-opt.correct { border-color: #8ce637; background: #16421a; }
.my-opt.wrong { border-color: #ff5a5a; background: #3a1220; }
.my-win, .my-lose { padding: 12px 14px; margin-top: 8px; text-align: center; }
.my-win { border-color: #8ce637; }
.my-lose { border-color: #ff8a9f; }
.my-reward { font-size: 13px; font-weight: 900; color: #ffd23f; margin: 5px 0; }
.my-explain { font-size: 12px; color: #cfe0ff; line-height: 1.5; margin-top: 4px; text-align: left; }
/* fix my mistake */
.fm-card { padding: 13px 14px; margin-bottom: 8px; border-color: #3fd6c0; }
.fm-who { font-size: 12px; font-weight: 800; color: #9db4e8; }
.fm-problem { font-size: 16px; font-weight: 900; color: #fff; margin-top: 3px; }
.fm-steps { display: flex; flex-direction: column; gap: 7px; }
.fm-step { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; border: 2px solid #3f7dff; background: #0c1c44; color: #fff; font-weight: 800; font-size: 14px; cursor: pointer; text-align: left; font-family: inherit; }
.fm-step.given { border-style: dashed; border-color: #24488f; color: #aec6f5; cursor: default; }
.fm-num { font-size: 10px; font-weight: 900; color: #7cc0ff; background: #14306a; border-radius: 6px; padding: 2px 7px; flex: none; }
.fm-step.is-bad { border-color: #ff5a5a; background: #3a1220; }
.fm-step.is-wrong { border-color: #ffd23f; }
.fm-good, .fm-bad { padding: 12px 14px; margin-top: 8px; }
.fm-good { border-color: #8ce637; }
.fm-bad { border-color: #ff8a9f; }
.fm-why { font-size: 12.5px; color: #eae6ff; line-height: 1.5; margin-top: 5px; }
.fm-fix { font-size: 12.5px; color: #8ce637; font-weight: 800; margin-top: 5px; }
/* power-ups */
.powerup-bar { display: flex; gap: 6px; justify-content: center; margin: 6px 0 2px; }
.pu-btn { display: flex; align-items: center; gap: 3px; padding: 5px 9px; border-radius: 999px; border: 2px solid #ffd23f; background: rgba(255,210,63,.12); cursor: pointer; }
.pu-btn.active { background: rgba(255,210,63,.35); }
.pu-btn .pu-ico { font-size: 16px; }
.pu-btn .pu-n { font-size: 12px; font-weight: 900; color: #ffd23f; }
.pu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pu-card { padding: 10px; text-align: center; position: relative; }
.pu-c-ico { font-size: 26px; }
.pu-c-n { font-size: 12px; font-weight: 900; margin-top: 2px; }
.pu-c-d { font-size: 9.5px; color: #aec6f5; line-height: 1.3; margin-top: 2px; }
.pu-c-count { position: absolute; top: 6px; right: 8px; font-size: 12px; font-weight: 900; color: #ffd23f; }
.pu-won { display: inline-block; font-size: 11px; font-weight: 800; color: #ffe89a; background: rgba(255,210,63,.15); border: 1px solid #b9741e; border-radius: 999px; padding: 3px 9px; }
/* parent-child goal contract */
.goal-empty { padding: 14px; text-align: center; border-color: #3fd6c0; }
.goal-card { padding: 13px 14px; border-color: #3fd6c0; }
.goal-card.done { border-color: #8ce637; background: linear-gradient(180deg,#1c3a12,#0f2208); }
.gc-top { font-size: 11px; font-weight: 900; letter-spacing: .5px; color: #6ff0da; }
.gc-label { font-size: 14px; font-weight: 900; color: #fff; margin: 3px 0 7px; }
.gc-bar { position: relative; height: 20px; border-radius: 10px; background: #14306a; overflow: hidden; }
.gc-bar i { display: block; height: 100%; background: linear-gradient(90deg,#3fd6c0,#2b8a7e); }
.gc-bar span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.gc-reward { font-size: 12px; color: #cfe0ff; margin-top: 7px; }
.gc-claimed { font-size: 12px; font-weight: 800; color: #8ce637; margin-top: 8px; text-align: center; }
.gc-edit { background: none; border: none; color: #7cc0ff; font-size: 11px; font-weight: 700; cursor: pointer; padding: 4px; }
/* math passport */
.map-passport { position: absolute; left: 3%; top: 20%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 1px; background: rgba(10,20,50,.72); border: 2px solid #3fd6c0; border-radius: 14px; padding: 6px 9px; cursor: pointer; backdrop-filter: blur(2px); }
.map-passport .ms-ico { font-size: 22px; line-height: 1; }
.map-passport .ms-t { font-size: 8.5px; font-weight: 900; color: #8ff0e0; letter-spacing: .3px; }
.passport-hero { padding: 14px; text-align: center; margin-bottom: 8px; border-color: #3fd6c0; }
.pp-big { font-size: 28px; font-weight: 900; color: #6ff0da; }
.pp-sub { font-size: 12px; font-weight: 800; color: #cdeef0; }
.pp-hint { font-size: 10.5px; color: #aec6f5; margin-top: 6px; line-height: 1.4; }
.pp-complete { font-size: 12px; font-weight: 900; color: #ffd23f; margin-top: 6px; }
.passport-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.passport-page { position: relative; padding: 14px 10px; border-radius: 14px; border: 2px dashed #3a5aa0; background: #0c1c44; text-align: center; cursor: pointer; overflow: hidden; }
.passport-page.stamped { border-style: solid; border-color: #3fd6c0; background: linear-gradient(180deg,#0e2f36,#0a1d2a); }
.pp-deco { font-size: 34px; filter: grayscale(.6) opacity(.7); }
.passport-page.stamped .pp-deco { filter: none; }
.pp-name { font-size: 12px; font-weight: 900; margin-top: 4px; }
.pp-grade { font-size: 9.5px; color: #9db4e8; }
.pp-stamp { margin-top: 6px; font-size: 11px; font-weight: 900; color: #6ff0da; border: 2px solid #3fd6c0; border-radius: 8px; padding: 2px 0; transform: rotate(-6deg); }
.pp-prog { margin-top: 6px; font-size: 11px; font-weight: 800; color: #ffd23f; }
/* printable worksheets / tests */
.print-sheet { position: fixed; inset: 0; z-index: 200; overflow-y: auto; background: #fff; color: #111; padding: 28px 26px 90px; font-family: "Segoe UI", system-ui, sans-serif; }
.ps-head { border-bottom: 3px solid #1a49c0; padding-bottom: 10px; margin-bottom: 16px; }
.ps-brand { font-size: 20px; font-weight: 900; color: #1a49c0; }
.ps-title { font-size: 17px; font-weight: 800; margin-top: 2px; }
.ps-meta { font-size: 13px; color: #333; margin-top: 8px; }
.ps-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; }
.ps-q { display: flex; align-items: baseline; gap: 6px; font-size: 15px; padding: 4px 0; break-inside: avoid; }
.ps-n { font-weight: 800; color: #1a49c0; }
.ps-qb { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ps-p { flex: 1; }
.ps-vis svg { max-width: 170px; max-height: 76px; display: block; }
.ps-opts { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: 12.5px; color: #444; }
.ps-opt b { color: #1a49c0; font-weight: 800; }
.ps-blank { border-bottom: 1.5px solid #333; min-width: 44px; display: inline-block; }
.ps-sec { grid-column: 1 / -1; font-size: 13px; font-weight: 900; color: #1a49c0; border-bottom: 1.5px solid #c7d4f5; padding-bottom: 2px; margin-top: 8px; break-after: avoid; }
.ps-guide { font-size: 12.5px; color: #333; background: #eef3ff; border: 1.5px solid #c7d4f5; border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; line-height: 1.5; break-inside: avoid; }
.ps-answerkey { margin-top: 22px; border-top: 2px dashed #999; padding-top: 10px; break-before: page; }
.ps-key-h { font-weight: 900; color: #1a49c0; margin-bottom: 6px; }
.ps-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 16px; font-size: 13px; }
.ps-key { color: #222; }
.ps-foot { margin-top: 24px; font-size: 11px; color: #888; text-align: center; }
.ps-actions { display: flex; gap: 8px; justify-content: center; margin-top: 20px; }
.ps-actions .modal-btn { max-width: 200px; }
/* ---- Daily login chest calendar ---- */
.login-cal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; margin-bottom: 6px; }
.lc-cell { background: #0c1c44; border: 2px solid #24488f; border-radius: 10px; padding: 6px 3px; text-align: center; position: relative; }
.lc-cell.claimed { opacity: .55; }
.lc-cell.today { border-color: #ffd23f; box-shadow: 0 0 0 2px rgba(255,210,63,.3); animation: lcpulse 1.6s ease-in-out infinite; }
.lc-cell.jackpot { border-color: #ff7ac0; }
.lc-cell.jackpot.today { border-color: #ffd23f; }
@keyframes lcpulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
.lc-day { font-size: 8.5px; font-weight: 800; color: #9db4e8; }
.lc-ico { font-size: 20px; line-height: 1.2; }
.lc-amt { font-size: 8px; font-weight: 700; color: #cfe0ff; line-height: 1.1; }
.lc-here { font-size: 7.5px; font-weight: 900; color: #ffd23f; margin-top: 2px; }
.lc-cell.jackpot .lc-ico { filter: drop-shadow(0 0 4px #ff7ac0); }

/* ---- Story mode + boss battles ---- */
.map-story { position: absolute; left: 3%; top: 8%; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 1px; background: rgba(10,20,50,.72); border: 2px solid #ffd23f; border-radius: 14px; padding: 6px 9px; cursor: pointer; backdrop-filter: blur(2px); }
.map-story .ms-ico { font-size: 22px; line-height: 1; }
.map-story .ms-t { font-size: 8.5px; font-weight: 900; color: #ffe89a; letter-spacing: .3px; }
.map-story.ready { border-color: #ff5a5a; animation: buddynudge 1.4s ease-in-out infinite; }
.map-story.ready .ms-t { color: #ffb3b3; }
/* boss cutscene overlay */
.boss-cut { text-align: center; padding: 4px 2px 2px; }
.bc-world { font-size: 11px; font-weight: 900; letter-spacing: .5px; color: #9db4e8; }
.bc-emoji { font-size: 64px; line-height: 1.1; margin: 4px 0; filter: drop-shadow(0 4px 10px rgba(0,0,0,.5)); animation: buddynudge 2.2s ease-in-out infinite; }
.bc-name { font-size: 20px; font-weight: 900; color: #fff; }
.bc-taunt { font-size: 12px; font-style: italic; color: #ffb3b3; margin: 6px 0; line-height: 1.5; }
.bc-story { font-size: 12.5px; color: #cfe0ff; line-height: 1.6; margin: 8px 4px; text-align: left; }
.bc-rules { font-size: 12px; color: #ffe89a; font-weight: 700; margin-top: 6px; }
/* boss HP strip in the drill */
.boss-strip { display: flex; align-items: center; gap: 9px; padding: 6px 11px; margin: 0 0 6px; border-color: #ff5a5a; background: linear-gradient(180deg,#3a1220,#22090f); }
.bs-face { font-size: 28px; line-height: 1; }
.bs-face.hit { animation: bosshit .3s ease; }
@keyframes bosshit { 0% { transform: scale(1) } 40% { transform: scale(1.35) rotate(-8deg); filter: brightness(1.8) } 100% { transform: scale(1) } }
.bs-t { flex: 1; min-width: 0; }
.bs-t b { font-size: 12px; color: #ffd0d0; }
.boss-hp { height: 9px; border-radius: 6px; background: #2a0c12; overflow: hidden; margin-top: 3px; border: 1px solid #6b1a22; }
.boss-hp i { display: block; height: 100%; background: linear-gradient(90deg,#ff5a5a,#ff9f1c); transition: width .35s ease; }
.bs-hits { font-size: 12px; font-weight: 900; color: #ffd23f; white-space: nowrap; }
/* boss result card */
.boss-result { text-align: center; padding: 14px; margin-top: 8px; }
.boss-result.won { border-color: #ffd23f; background: linear-gradient(180deg,#3a3410,#1d1a08); }
.boss-result.lost { border-color: #ff8a9f; background: linear-gradient(180deg,#3a1220,#22090f); }
.br-emoji { font-size: 56px; line-height: 1.1; }
.br-name { font-size: 17px; font-weight: 900; color: #fff; }
.br-line { font-size: 12px; color: #e6d6dd; line-height: 1.5; margin-top: 4px; }
.br-reward { font-size: 12px; font-weight: 800; color: #ffd23f; margin-top: 8px; }
/* story chapter cards */
.story-card { padding: 0; margin-bottom: 7px; overflow: hidden; }
.story-card.ready { border-color: #ff5a5a; }
.story-card.beaten { border-color: #8ce637; }
.story-card.locked { opacity: .6; }
.st-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.st-deco { font-size: 24px; }
.st-t { flex: 1; min-width: 0; }
.st-t b { font-size: 13px; }
.st-t span { display: block; font-size: 10.5px; color: #aec6f5; font-weight: 700; }
.st-boss { font-size: 24px; }
.st-body { padding: 0 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.st-locked { font-size: 11px; color: #7d97cf; font-style: italic; }
.st-link { padding: 8px; border: 2px solid #2c5cd8; background: #0c1c44; color: #cfe0ff; border-radius: 10px; font-weight: 800; font-size: 12px; cursor: pointer; }
.st-boss-btn { padding: 10px; border: none; border-radius: 10px; font-weight: 900; font-size: 13px; color: #fff; cursor: pointer; background: linear-gradient(180deg,#ff5a5a,#c22f3e); box-shadow: 0 3px 0 #8f1414; }
.st-boss-btn.done { background: linear-gradient(180deg,#6cc73f,#3f8f22); box-shadow: 0 3px 0 #2c6415; }
.story-premium { padding: 12px 14px; margin-bottom: 8px; text-align: center; border-color: #ffd23f; background: linear-gradient(180deg,#3a3410,#1d1a08); }
.sp-top { font-size: 13px; font-weight: 900; color: #ffd23f; }
.sp-sub { font-size: 11px; color: #e9dca6; margin: 5px 0 9px; line-height: 1.5; }
.sp-btn { border: none; border-radius: 10px; padding: 9px 16px; font-weight: 900; font-size: 12px; color: #5c3300; background: linear-gradient(180deg,#ffe259,#ffa751); box-shadow: 0 3px 0 #b9741e; cursor: pointer; }
.cb-top { font-size: 16px; font-weight: 900; color: #6ff0da; }
.cb-sub { font-size: 11px; font-weight: 800; color: #cdeef0; margin-top: 4px; }
.repair-card { padding: 12px 14px; margin-top: 8px; text-align: center; border-color: #ff9f1c; background: linear-gradient(180deg,#4a2f10,#2a1a08); }
.rc-top { font-size: 16px; font-weight: 900; color: #ffb23d; }
.rc-sub { font-size: 11.5px; font-weight: 700; color: #ffe0b0; margin-top: 4px; line-height: 1.5; }
.rc-btn { margin-top: 10px; background: linear-gradient(180deg,#ffb23d,#e0850f); color: #3a2400; border: none; border-radius: 12px; padding: 9px 22px; font-size: 13px; font-weight: 900; box-shadow: 0 3px 0 #a85f00; cursor: pointer; }
.rc-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #a85f00; }

/* ============ Printable certificate ============ */
.cert-sheet {
  width: 100%; max-width: 340px; margin: 6px auto 0; aspect-ratio: 1 / 1.32;
  background: linear-gradient(160deg,#fffdf5 0%,#fff6e0 100%); color: #3a2e12;
  border-radius: 12px; box-shadow: 0 10px 26px rgba(0,0,0,.5); padding: 5px;
}
.cert-inner {
  position: relative; width: 100%; height: 100%; border: 3px double #c79a2e; border-radius: 9px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 16px 18px; gap: 4px;
}
.cert-corner { position: absolute; color: #c79a2e; font-size: 15px; }
.cert-corner.tl { top: 7px; left: 9px; } .cert-corner.tr { top: 7px; right: 9px; }
.cert-corner.bl { bottom: 7px; left: 9px; } .cert-corner.br { bottom: 7px; right: 9px; }
.cert-brand { font-size: 13px; font-weight: 900; letter-spacing: 1px; color: #16337f; }
.cert-kicker { font-size: 9px; font-weight: 800; letter-spacing: 2.5px; color: #a07c1e; margin-top: 2px; }
.cert-seal { font-size: 44px; margin: 2px 0; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.cert-title { font-size: 22px; font-weight: 900; color: #a4560a; line-height: 1.1; }
.cert-presented { font-size: 10px; font-weight: 700; color: #6b5a34; margin-top: 6px; }
.cert-name {
  font-size: 24px; font-weight: 900; color: #16337f; font-style: italic;
  border-bottom: 2px solid #d9c07a; padding: 0 12px 3px; margin: 2px 0 4px;
  font-family: "Segoe Script", "Brush Script MT", cursive;
}
.cert-sub { font-size: 10.5px; font-weight: 700; color: #6b5a34; line-height: 1.4; max-width: 260px; }
.cert-foot { display: flex; justify-content: space-between; width: 100%; gap: 18px; margin-top: 14px; }
.cert-sig, .cert-date { flex: 1; }
.cert-sig-line { border-top: 1.5px solid #7a6a3e; margin-bottom: 3px; }
.cert-foot span { font-size: 8.5px; font-weight: 700; color: #6b5a34; }
.cert-actions { display: flex; justify-content: center; width: 100%; margin-top: 12px; }

/* isolate the certificate sheet when printing */
@media print {
  body { overflow: visible !important; background: #fff !important; }
  #app, .screen, .scroll-y { position: static !important; height: auto !important; overflow: visible !important; }
  body * { visibility: hidden !important; }
  /* un-hide whichever print target is active: certificate OR worksheet/test */
  .cert-sheet, .cert-sheet *, .print-sheet, .print-sheet * { visibility: visible !important; }
  .cert-sheet {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    box-shadow: none; max-width: 520px; width: 90%; margin: 0;
  }
  /* worksheet/test: hide the app entirely so the sheet flows from the top with no blank pages */
  body.printsheet-active #app { display: none !important; }
  .print-sheet { position: static !important; padding: 0 !important; overflow: visible !important; color: #111 !important; }
  .ps-actions, .topbar, .bottom-nav, .cert-actions, .screen-head { display: none !important; }
}