/* ===== RESET ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.hidden{display:none!important}

:root{
  --bg:#060816;
  --bg2:#111427;
  --bg3:#181c33;
  --glass:rgba(255,255,255,0.06);
  --glass2:rgba(255,255,255,0.09);
  --glass3:rgba(255,255,255,0.13);
  --border:rgba(255,255,255,0.08);
  --border2:rgba(255,255,255,0.12);
  --border3:rgba(255,255,255,0.18);
  --red:#ff4757;
  --blue:#4facfe;
  --yellow:#ffd32a;
  --green:#2ed573;
  --purple:#a55eea;
  --orange:#ff9f43;
  --text:#f1f2f6;
  --text2:#a4a8b8;
  --text3:#5c5f72;
  --r:14px;   /* default radius */
  --r-lg:18px;
  --r-sm:10px;
  --nav-h:60px;
  --bnav-h:70px;

/* ── Particle colors ── */
--p-color-1:rgba(124,58,237,.35);
--p-color-2:rgba(79,172,254,.3);
--p-color-3:rgba(46,213,115,.25);
--p-color-4:rgba(255,255,255,.2);
}

html{font-size:16px;scroll-behavior:smooth}
body{
  font-family:'Nunito',system-ui,-apple-system,sans-serif;
  background:
    /* ── Stars: bright white dots ── */
    radial-gradient(1.5px 1.5px at 2% 5%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 7% 42%,rgba(255,255,255,.35),transparent),
    radial-gradient(2px 2px at 11% 78%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 16% 20%,rgba(255,255,255,.3),transparent),
    radial-gradient(1.5px 1.5px at 21% 58%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 26% 92%,rgba(255,255,255,.3),transparent),
    radial-gradient(2px 2px at 31% 10%,rgba(255,255,255,.55),transparent),
    radial-gradient(1px 1px at 36% 48%,rgba(255,255,255,.3),transparent),
    radial-gradient(1.5px 1.5px at 41% 84%,rgba(255,255,255,.4),transparent),
    radial-gradient(1px 1px at 46% 25%,rgba(255,255,255,.35),transparent),
    radial-gradient(2px 2px at 51% 62%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 56% 3%,rgba(255,255,255,.3),transparent),
    radial-gradient(1.5px 1.5px at 61% 38%,rgba(255,255,255,.55),transparent),
    radial-gradient(1px 1px at 66% 76%,rgba(255,255,255,.3),transparent),
    radial-gradient(2px 2px at 71% 15%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 76% 53%,rgba(255,255,255,.3),transparent),
    radial-gradient(1.5px 1.5px at 81% 86%,rgba(255,255,255,.45),transparent),
    radial-gradient(1px 1px at 86% 30%,rgba(255,255,255,.35),transparent),
    radial-gradient(2px 2px at 91% 68%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 95% 12%,rgba(255,255,255,.3),transparent),
    /* ── Extra star layer (smaller, denser) ── */
    radial-gradient(1px 1px at 4% 32%,rgba(255,255,255,.25),transparent),
    radial-gradient(1px 1px at 14% 55%,rgba(200,220,255,.3),transparent),
    radial-gradient(1px 1px at 24% 15%,rgba(255,255,255,.2),transparent),
    radial-gradient(1px 1px at 34% 72%,rgba(200,210,255,.25),transparent),
    radial-gradient(1px 1px at 44% 45%,rgba(255,255,255,.2),transparent),
    radial-gradient(1px 1px at 54% 88%,rgba(220,220,255,.25),transparent),
    radial-gradient(1px 1px at 64% 22%,rgba(255,255,255,.2),transparent),
    radial-gradient(1px 1px at 74% 65%,rgba(200,220,255,.3),transparent),
    radial-gradient(1px 1px at 84% 8%,rgba(255,255,255,.2),transparent),
    radial-gradient(1px 1px at 94% 50%,rgba(220,220,255,.25),transparent),
    /* ── Colored stars (blue, purple, warm tint) ── */
    radial-gradient(1.5px 1.5px at 15% 36%,rgba(100,160,255,.5),transparent),
    radial-gradient(1.5px 1.5px at 65% 50%,rgba(180,120,255,.45),transparent),
    radial-gradient(1.5px 1.5px at 85% 22%,rgba(255,180,120,.4),transparent),
    radial-gradient(1.5px 1.5px at 40% 70%,rgba(120,140,255,.35),transparent),
    /* ── Nebula: purple cloud (left) ── */
    radial-gradient(ellipse 55% 45% at 15% 25%,rgba(140,60,200,.14) 0%,rgba(100,40,180,.06) 40%,transparent 70%),
    radial-gradient(ellipse 40% 35% at 10% 30%,rgba(180,80,220,.08) 0%,transparent 60%),
    /* ── Nebula: blue cloud (top center) ── */
    radial-gradient(ellipse 50% 40% at 50% 12%,rgba(60,120,220,.12) 0%,rgba(40,80,200,.05) 45%,transparent 70%),
    radial-gradient(ellipse 35% 30% at 55% 8%,rgba(80,150,255,.07) 0%,transparent 55%),
    /* ── Nebula: red/pink cloud (right) ── */
    radial-gradient(ellipse 45% 40% at 82% 28%,rgba(200,50,80,.11) 0%,rgba(180,40,60,.05) 40%,transparent 65%),
    radial-gradient(ellipse 30% 25% at 88% 22%,rgba(255,80,100,.06) 0%,transparent 50%),
    /* ── Nebula: orange/warm glow (bottom left) ── */
    radial-gradient(ellipse 50% 45% at 12% 80%,rgba(220,130,50,.09) 0%,rgba(200,100,40,.04) 40%,transparent 65%),
    /* ── Nebula: teal/cyan accent (bottom right) ── */
    radial-gradient(ellipse 40% 35% at 85% 75%,rgba(50,180,160,.08) 0%,rgba(40,150,140,.03) 40%,transparent 60%),
    /* ── Deep space glow (center) ── */
    radial-gradient(ellipse 70% 60% at 50% 50%,rgba(30,20,60,.5) 0%,rgba(10,10,30,.2) 50%,transparent 80%),
    /* ── Base ── */
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--nav-h);
  position:relative;
  padding-bottom:0;
}

/* ===== CARD — universal ===== */
.card{
  background:linear-gradient(135deg,rgba(11,13,26,0.92),rgba(24,28,51,0.92));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(79,172,254,0.1);
  border-radius:var(--r);
  box-shadow:0 2px 12px rgba(0,0,0,0.3),inset 0 1px 0 rgba(255,255,255,0.03);
}

/* ===== BADGE ===== */
.badge{
  display:inline-flex;align-items:center;gap:.25rem;
  padding:.2rem .65rem;font-size:.7rem;font-weight:800;
  border-radius:50px;text-transform:uppercase;letter-spacing:1px;
  border:1px solid;
}
.badge-blue{color:var(--blue);border-color:rgba(79,172,254,0.25);background:rgba(79,172,254,0.08)}
.badge-yellow{color:var(--yellow);border-color:rgba(255,211,42,0.25);background:rgba(255,211,42,0.08)}
.badge-red{color:var(--red);border-color:rgba(255,71,87,0.25);background:rgba(255,71,87,0.08)}
.badge-green{color:var(--green);border-color:rgba(46,213,115,0.25);background:rgba(46,213,115,0.08)}
.badge-lg{font-size:.8rem;padding:.3rem .8rem}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:inherit;font-weight:800;border:none;border-radius:var(--r);
  cursor:pointer;transition:all .18s ease;color:#fff;text-decoration:none;
  font-size:.95rem;padding:.65rem 1.4rem;
}
.btn:active{transform:scale(.97)}

.btn-primary{
  background:linear-gradient(135deg,var(--blue),#00c6fb);
  box-shadow:0 3px 12px rgba(79,172,254,0.25);
}
.btn-primary:hover{box-shadow:0 5px 20px rgba(79,172,254,0.35);transform:translateY(-1px)}

.btn-start{
  background:linear-gradient(135deg,var(--red),#ff6348);
  box-shadow:0 3px 15px rgba(255,71,87,0.3);
}
.btn-start:hover{box-shadow:0 5px 25px rgba(255,71,87,0.4);transform:translateY(-2px)}

.btn-ghost{
  background:var(--glass2);border:1px solid var(--border2);color:var(--text);
  backdrop-filter:blur(10px);
}
.btn-ghost:hover{background:var(--glass3);border-color:var(--border3)}

.btn-icon{
  width:40px;height:40px;padding:0;
  background:var(--glass);border:1px solid var(--border);
  border-radius:var(--r-sm);color:var(--text2);font-size:1.1rem;
}
.btn-icon:hover{background:var(--glass2);color:var(--text)}

.btn-lg{font-size:1.15rem;padding:.85rem 2.5rem;border-radius:var(--r)}
.btn-sm{font-size:.8rem;padding:.45rem 1rem}
.btn-audio{
  background:linear-gradient(135deg,var(--purple),#6c5ce7);
  box-shadow:0 3px 12px rgba(165,94,234,0.25);border-radius:var(--r);
}
.btn-audio:hover{box-shadow:0 5px 20px rgba(165,94,234,0.35);transform:translateY(-1px)}
.btn-audio:disabled{opacity:.4}

/* ===== TOP NAV ===== */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:linear-gradient(180deg,rgba(11,13,26,0.96),rgba(11,13,26,0.9));
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,transparent,rgba(79,172,254,0.15),rgba(165,94,234,0.12),transparent) 1;
}
.topnav-inner{
  max-width:1200px;margin:0 auto;height:100%;
  display:flex;align-items:center;gap:1rem;
  padding:0 1.5rem;
}
.topnav-logo{display:flex;align-items:center;gap:.6rem;cursor:pointer;flex-shrink:0}
.topnav-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;border:2px solid var(--purple)}
.topnav-title{font-size:1rem;font-weight:900;color:var(--text);white-space:nowrap}
.topnav-links{display:flex;gap:.25rem;flex:1;justify-content:center}

.nav-link{
  display:flex;align-items:center;gap:.35rem;
  padding:.45rem .9rem;border-radius:var(--r-sm);
  font-size:.85rem;font-weight:700;color:var(--text2);
  cursor:pointer;transition:all .15s;text-decoration:none;
  white-space:nowrap;
}
.nav-link:hover{color:var(--text);background:var(--glass2)}
.nav-link.active{
  color:var(--text);
  background:linear-gradient(135deg,rgba(79,172,254,0.1),rgba(165,94,234,0.06));
  border:1px solid rgba(79,172,254,0.18);
  box-shadow:0 2px 12px rgba(79,172,254,0.1),inset 0 1px 0 rgba(255,255,255,0.04);
  position:relative;
}
.nav-link.active::after{
  content:'';position:absolute;bottom:-1px;left:20%;right:20%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(79,172,254,0.6),transparent);
  border-radius:2px;
}
.nav-icon-img{width:32px;height:32px;object-fit:contain;opacity:.7;transition:all .15s}
.nav-link:hover .nav-icon-img,.nav-link.active .nav-icon-img{opacity:1;transform:scale(1.1)}
.nav-label{font-size:.8rem}

.topnav-wallet{display:flex;gap:.5rem;align-items:center;flex-shrink:0}
.wallet-level,.wallet-stars,.wallet-crystals,.wallet-streak{
  font-size:.78rem;font-weight:800;
  padding:.28rem .65rem;border-radius:50px;
  border:1px solid transparent;
  transition:all .2s;
}
.wallet-level{
  color:var(--blue);font-size:.68rem;text-transform:uppercase;letter-spacing:1px;cursor:pointer;
  background:linear-gradient(135deg,rgba(79,172,254,0.1),rgba(79,172,254,0.04));
  border-color:rgba(79,172,254,0.15);
}
.wallet-level:hover{color:var(--text);background:rgba(79,172,254,0.15)}
.wallet-stars{
  color:var(--yellow);
  background:linear-gradient(135deg,rgba(255,211,42,0.1),rgba(255,159,67,0.05));
  border-color:rgba(255,211,42,0.15);
  transition:transform .3s cubic-bezier(.68,-.55,.27,1.55);
}
.wallet-stars.bump{animation:starBump .45s cubic-bezier(.68,-.55,.27,1.55)}
@keyframes starBump{
  0%{transform:scale(1);box-shadow:0 0 0 rgba(255,211,42,0)}
  40%{transform:scale(1.35);box-shadow:0 0 18px rgba(255,211,42,.5)}
  100%{transform:scale(1);box-shadow:0 0 0 rgba(255,211,42,0)}
}
.toolbar-stars.bump{animation:starBump .45s cubic-bezier(.68,-.55,.27,1.55)}
.wallet-crystals{
  color:#a855f7;
  background:linear-gradient(135deg,rgba(165,94,234,0.1),rgba(138,43,226,0.05));
  border-color:rgba(165,94,234,0.15);
}
.wallet-streak{
  color:var(--blue);
  background:linear-gradient(135deg,rgba(79,172,254,0.1),rgba(79,172,254,0.04));
  border-color:rgba(79,172,254,0.12);
}
.wallet-logout{
  font-size:.72rem;font-weight:800;font-family:inherit;
  padding:.28rem .55rem;border-radius:50px;
  border:1px solid rgba(255,255,255,0.06);
  background:rgba(255,255,255,0.03);
  color:rgba(255,255,255,0.35);
  cursor:pointer;transition:all .25s;
  display:none;align-items:center;gap:1px;
  margin-left:.15rem;
}
.wallet-logout:hover{
  color:#ff6b6b;
  border-color:rgba(255,107,107,0.25);
  background:rgba(255,107,107,0.08);
}
.wallet-logout:active{transform:scale(.95)}
.topnav-avatar{cursor:pointer;transition:transform .15s}
.topnav-avatar:hover{transform:scale(1.1)}

/* ===== BOTTOM NAV (mobile) ===== */
.bottomnav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;z-index:100;
  height:var(--bnav-h);
  background:rgba(6,8,22,.88);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border-top:1px solid rgba(255,255,255,.06);
  box-shadow:0 -4px 20px rgba(0,0,0,.25);
  padding:0 .5rem;padding-bottom:calc(env(safe-area-inset-bottom, 8px) + 4px);
}
.bnav-link{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;
  color:var(--text3);font-size:.6rem;font-weight:700;
  text-decoration:none;cursor:pointer;transition:all .2s;
  border-radius:12px;padding:.4rem 0;
  position:relative;
  min-height:52px;
}
.bnav-icon-img{width:36px;height:36px;object-fit:contain;opacity:.5;transition:all .2s}
.bnav-label{text-transform:uppercase;letter-spacing:.5px;font-size:.58rem}
.bnav-link.active{
  color:var(--text);
}
.bnav-link.active .bnav-icon-img{opacity:1;transform:scale(1.12)}
.bnav-link.active::before{
  content:'';position:absolute;top:2px;left:18%;right:18%;height:2.5px;
  background:linear-gradient(90deg,transparent,rgba(79,172,254,0.7),transparent);
  border-radius:2px;
  filter:blur(0.5px);
}
.bnav-link.active::after{
  content:'';position:absolute;top:0;left:15%;right:15%;height:16px;
  background:radial-gradient(ellipse at center top,rgba(79,172,254,0.12),transparent 70%);
  pointer-events:none;
}
.bnav-link:hover{color:var(--text)}
.bnav-link:hover .bnav-icon-img{opacity:.8}

/* ===== SCREENS ===== */
.screen{display:none;position:relative;z-index:1;padding:1.5rem;min-height:calc(100vh - var(--nav-h));overflow:visible}
.screen.active{display:block;animation:pageIn .3s ease}
.screen-full{padding:0}
.screen-full.active{display:flex;flex-direction:column;align-items:center;justify-content:center}
@keyframes pageIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

/* hide navs for full-screen pages */
body.nav-hidden .topnav,
body.nav-hidden .bottomnav{display:none!important}
body.nav-hidden{padding-top:0;padding-bottom:0}
body.nav-hidden .screen-full{min-height:100vh}

/* ===== PAGE WRAP ===== */
.page-wrap{max-width:1000px;margin:0 auto;width:100%;display:flex;flex-direction:column;gap:1.6rem}
.page-header{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
.page-title{font-size:1.5rem;font-weight:900;letter-spacing:-0.02em}

/* ===== HOME ===== */
.home-wrap{max-width:960px;align-items:center;margin:0 auto;width:100%}

.home-top-row{
  width:100%;
  display:flex;
  align-items:stretch;
  gap:.65rem;
  flex-wrap:wrap;
  justify-content:center;
}

.home-subjects{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.55rem;
  flex:1;
  min-width:min(100%,420px);
}

.home-subject-pill{
  width:100%;
  min-height:56px;
  border:none;
  text-align:left;
}

.subject-pill-math{box-shadow:0 6px 18px rgba(79,172,254,0.08)}
.subject-pill-reading{box-shadow:0 6px 18px rgba(255,211,42,0.08)}
.subject-pill-writing{box-shadow:0 6px 18px rgba(165,94,234,0.08)}

/* Quest pill — single unified button */
.subject-pill-quest{
  position:relative;
  box-shadow:0 6px 24px rgba(108,99,255,0.15);
  background:linear-gradient(135deg,rgba(108,99,255,0.12),rgba(79,172,254,0.08))!important;
  border:1px solid rgba(108,99,255,0.25)!important;
  min-height:72px;
}
.subject-pill-quest:hover{border-color:rgba(108,99,255,0.4)!important}
.subject-pill-quest .home-subject-icon{font-size:2rem}
.subject-pill-quest .narrator-label{font-size:1.1rem;font-weight:800}
.subject-pill-quest .narrator-hint{color:var(--text2)}
.home-quest-progress{
  margin-left:auto;
  flex-shrink:0;
  font-size:0.85rem;
  font-weight:700;
  color:var(--green);
  background:rgba(46,213,115,0.12);
  padding:4px 10px;
  border-radius:12px;
}
.home-quest-progress:empty{display:none}

/* YouTube pill */
.subject-pill-youtube{
  position:relative;
  box-shadow:0 6px 24px rgba(255,71,87,0.15);
  background:linear-gradient(135deg,rgba(255,71,87,0.12),rgba(255,107,107,0.06))!important;
  border:1px solid rgba(255,71,87,0.25)!important;
  min-height:72px;
  text-decoration:none!important;
  display:flex!important;
  align-items:center;
  gap:.55rem;
  padding:.6rem .85rem;
  border-radius:var(--r-lg);
  transition:all .2s ease;
}
.subject-pill-youtube:hover{
  border-color:rgba(255,71,87,0.5)!important;
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(255,71,87,0.2);
}
.subject-pill-youtube .home-subject-icon{
  font-size:2rem;
  flex-shrink:0;
  animation:youtubePulse 2s ease-in-out infinite;
}
@keyframes youtubePulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12)}
}
.subject-pill-youtube .narrator-label{
  font-size:1.1rem;
  font-weight:800;
}
.subject-pill-youtube .narrator-hint{
  color:var(--text2);
}

/* Daily Task pill */
.subject-pill-daily{
  position:relative;
  box-shadow:0 6px 24px rgba(46,213,115,0.15);
  background:linear-gradient(135deg,rgba(46,213,115,0.12),rgba(0,184,148,0.06))!important;
  border:1px solid rgba(46,213,115,0.25)!important;
  min-height:72px;
  text-decoration:none!important;
  display:flex!important;
  align-items:center;
  gap:.55rem;
  padding:.6rem .85rem;
  border-radius:var(--r-lg);
  transition:all .2s ease;
}
.subject-pill-daily:hover{
  border-color:rgba(46,213,115,0.5)!important;
  transform:translateY(-2px);
  box-shadow:0 8px 28px rgba(46,213,115,0.2);
}
.subject-pill-daily .home-subject-icon{
  font-size:2rem;
  flex-shrink:0;
  animation:dailyPulse 2.5s ease-in-out infinite;
}
@keyframes dailyPulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.12) rotate(-5deg)}
}
.subject-pill-daily .narrator-label{
  font-size:1.1rem;
  font-weight:800;
}
.subject-pill-daily .narrator-hint{
  color:var(--text2);
}
.subject-pill-quest.generating{
  opacity:.7;
  pointer-events:none;
}
.home-quest-spinner{
  width:28px;height:28px;
  border:3px solid rgba(108,99,255,0.15);
  border-top-color:rgba(108,99,255,0.8);
  border-radius:50%;
  animation:mw-spin .8s linear infinite;
  display:inline-block;
}

.subject-pill-math{position:relative}
.subject-pill-math:hover{border-color:rgba(79,172,254,0.28)}

/* Math pill — generating state (legacy) */
.subject-pill-math.generating{
  opacity:.7;
  pointer-events:none;
}
.home-math-icon-spinner{
  width:28px;height:28px;
  border:3px solid rgba(255,215,0,0.15);
  border-top-color:var(--yellow);
  border-radius:50%;
  animation:mw-spin .8s linear infinite;
  display:inline-block;
}
.home-math-lock{
  font-size:1.1rem;
  margin-left:auto;
  flex-shrink:0;
}
.home-math-lock.hidden{display:none}
.subject-pill-reading:hover{border-color:rgba(255,211,42,0.28)}
.subject-pill-writing:hover{border-color:rgba(165,94,234,0.28)}

.home-subject-icon{
  width:48px;
  height:48px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-size:1.35rem;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(79,172,254,0.18),rgba(165,94,234,0.16));
  border:1px solid rgba(255,255,255,0.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ── Home hero: image left + title right ── */
.home-hero{
  display:flex;align-items:center;justify-content:center;gap:.8rem;
  width:100%;padding:.5rem 0 .2rem;
}
.home-hero-image{
  flex-shrink:0;
}
.home-hero-img{
  height:160px;width:auto;
  filter:drop-shadow(0 0 25px rgba(79,172,254,0.2)) drop-shadow(0 8px 20px rgba(0,0,0,0.3));
  animation:heroFloat 3s ease-in-out infinite;
}
.home-hero-text{
  display:flex;flex-direction:column;
}
.home-hero-title{
  font-family:'Luckiest Guy', cursive;
  font-size:2rem;line-height:1.1;
  color:#fff;
  text-shadow:
    0 0 20px rgba(79,172,254,.4),
    0 0 40px rgba(138,43,226,.25),
    0 2px 0 rgba(0,0,0,.3);
  letter-spacing:.02em;
}
.home-hero-title:nth-child(2){
  color:#4facfe;
  text-shadow:
    0 0 20px rgba(79,172,254,.5),
    0 0 40px rgba(79,172,254,.2),
    0 2px 0 rgba(0,0,0,.3);
}
.home-hero-title:nth-child(3){
  color:#ffd32a;
  text-shadow:
    0 0 20px rgba(255,211,42,.4),
    0 0 40px rgba(255,211,42,.15),
    0 2px 0 rgba(0,0,0,.3);
}
@media(min-width:768px){
  .home-hero-img{height:220px}
  .home-hero-title{font-size:2.8rem}
  .home-hero{gap:1.5rem}
}

.home-blocks{
  display:grid;grid-template-columns:1fr 1fr;gap:.8rem;width:100%;
}
.home-block{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:1.5rem 1rem;cursor:pointer;
  transition:all .25s cubic-bezier(.4,0,.2,1);text-align:center;gap:.5rem;
  min-height:160px;
  border-color:rgba(79,172,254,0.12);
}
.home-block:hover{transform:translateY(-4px);box-shadow:0 8px 30px rgba(79,172,254,0.15);border-color:rgba(79,172,254,0.3)}
.home-block:active{transform:scale(.97)}
.home-block-icon{font-size:2.5rem;display:flex;align-items:center;justify-content:center}
.home-block-icon-img{
  width:64px;
  height:64px;
  object-fit:contain;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}
.home-block-chest{width:70px;height:auto;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3))}
.home-block-title{font-size:1rem;font-weight:900;color:var(--text)}
.home-block-sub{font-size:.7rem;font-weight:600;color:var(--text3)}
/* Cooldown block */
.cooldown-block{background:linear-gradient(135deg,rgba(11,13,26,0.9),rgba(24,28,51,0.9))!important;border-color:rgba(255,211,42,0.2)!important}
.cooldown-img{
  width:80px;height:auto;
  filter:drop-shadow(0 0 15px rgba(255,211,42,0.3));
  animation:hourglassPulse 3s ease-in-out infinite;
}
@keyframes hourglassPulse{
  0%,100%{filter:drop-shadow(0 0 15px rgba(255,211,42,0.2));transform:scale(1)}
  50%{filter:drop-shadow(0 0 25px rgba(255,211,42,0.4));transform:scale(1.03)}
}
.cooldown-timer{
  font-size:1.6rem;font-weight:900;
  color:var(--yellow);
  font-variant-numeric:tabular-nums;
  letter-spacing:2px;
  text-shadow:0 0 15px rgba(255,211,42,0.3);
}

/* ===== HOME ACTION BLOCKS ===== */
.home-actions{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.75rem;
  width:100%;
}
.home-action-card{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  padding:0.6rem 0.8rem 0.7rem;cursor:pointer;
  transition:all .25s ease;text-align:center;gap:.3rem;
  position:relative;overflow:hidden;
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;
  box-shadow:none;
  border-radius:0;
}
.home-action-card:hover{transform:translateY(-4px);box-shadow:none}
.home-action-card:active{transform:scale(.97)}
.home-action-card .home-block-title,
.home-action-card .home-block-sub{
  position:relative;
  z-index:2;
  max-width:62%;
}
.home-action-card .home-block-title{font-size:.92rem;font-weight:900;color:var(--text)}
.home-action-card .home-block-sub{font-size:.68rem;font-weight:600;color:var(--text3)}
.home-book-cover{
  width:auto;height:130px;
  margin:0 auto;
  border-radius:6px;
  filter:drop-shadow(0 0 14px rgba(255,215,0,0.25)) drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  cursor:pointer;
  object-fit:contain;
}
/* Animate book cover flying to center */
.home-book-cover.flying{
  position:fixed;
  z-index:10000;
  transition: all 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

/* ── Book open video overlay ── */
/* ── Book open overlay ── */
.book-video-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,0.65);
  backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;
  transition:opacity 0.3s ease;
}
.book-video-overlay.active{
  opacity:1;pointer-events:auto;
}

/* Flying cover with glow */
.book-fly-glow{
  position:absolute;inset:-30px;
  background:radial-gradient(ellipse at center, rgba(255,215,100,0.25) 0%, rgba(79,172,254,0.12) 45%, transparent 75%);
  border-radius:50%;
  pointer-events:none;
  animation:flyGlowPulse 1.2s ease-in-out infinite;
  filter:blur(15px);
}
@keyframes flyGlowPulse{
  0%,100%{opacity:0.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.1)}
}

/* All block images — unified height */
.home-collection-img,
.home-practice-img,
.home-book-cover{
  height:130px;
  width:auto;
  max-width:100%;
  object-fit:contain;
}

/* Collection block image */
.home-collection-img{
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.4));
}

/* Practice & Chess block image */
.home-practice-img{
  filter:drop-shadow(0 6px 20px rgba(0,0,0,0.35));
}
.book-video-overlay .book-video-skip{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);
  font-size:0.75rem;font-weight:700;color:rgba(255,255,255,0.4);
  letter-spacing:0.1em;text-transform:uppercase;
  cursor:pointer;padding:8px 20px;
  transition:color 0.3s;
}
.book-video-overlay .book-video-skip:hover{color:rgba(255,255,255,0.8)}

/* Glow borders per type — removed (invisible containers) */
.action-lesson,
.action-practice,
.action-collection,
.action-chess,
.action-chat,
.action-sensei{
  border:none;
  box-shadow:none;
}

/* ── Locked card overlay ── */
.home-locked-overlay{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:100%;
}
.home-locked-img{
  filter:grayscale(1) brightness(.7);
  opacity:.5;
}
.home-lock-icon{
  position:absolute;
  font-size:36px;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
  pointer-events:none;
}
.action-locked{
  cursor:not-allowed;
  opacity:.8;
}
.action-locked:hover{
  transform:none!important;
}
.action-lesson:hover,
.action-practice:hover,
.action-collection:hover,
.action-chess:hover,
.action-chat:hover,
.action-sensei:hover{
  border:none;
  box-shadow:none;
}
.action-locked:hover{
  transform:none!important;
  box-shadow:none!important;
}

/* Done badge */
.action-badge-done{
  position:absolute;top:10px;left:10px;
  font-size:1.1rem;
  filter:drop-shadow(0 0 4px rgba(46,213,115,0.5));
  z-index:3;
}
.action-badge-done.hidden{display:none}

/* Lock overlay */
.action-lock-overlay{
  position:absolute;inset:0;
  background:rgba(6,8,22,0.75);
  backdrop-filter:blur(4px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.3rem;z-index:5;
  border-radius:var(--r);
}
.action-lock-overlay.hidden{display:none}
.action-lock-icon{font-size:1.5rem;opacity:.7}
.action-lock-text{font-size:.6rem;font-weight:700;color:var(--text3);text-align:center}

/* Practice locked state */
.action-practice.locked{cursor:not-allowed}
.action-practice.locked:hover{transform:none;box-shadow:none}

/* Practice cooldown timer */
.action-practice .cooldown-timer{
  font-size:.75rem;font-weight:900;color:var(--yellow);
  font-variant-numeric:tabular-nums;letter-spacing:1px;
}

@media(max-width:600px){
  .home-top-row{flex-direction:column;align-items:stretch}
  .home-subjects{grid-template-columns:1fr;min-width:0}
  .home-actions{grid-template-columns:1fr 1fr;gap:.5rem}
  .home-action-card{
    padding:0.5rem 0.6rem 0.6rem;
    justify-content:center;
  }
  .home-action-card .home-block-title,
  .home-action-card .home-block-sub{max-width:58%}
  .home-action-card .home-block-title{text-align:left}
  .home-action-card .home-block-sub{text-align:left}
}
@media(min-width:601px) and (max-width:900px){
  .home-top-row{align-items:stretch}
  .home-subjects{grid-template-columns:repeat(3,1fr)}
  .home-subject-pill:last-child{grid-column:1/-1}
  .home-actions{grid-template-columns:repeat(4,1fr);gap:.65rem}
}

/* ===== SUBJECT HUB ===== */
.subject-page{max-width:920px}
.subject-page.subject-theme-math{--subject-accent:79,172,254;--subject-accent-2:0,198,251}
.subject-page.subject-theme-reading{--subject-accent:255,211,42;--subject-accent-2:255,159,67}
.subject-page.subject-theme-writing{--subject-accent:165,94,234;--subject-accent-2:108,92,231}

.subject-toolbar{
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}

.subject-toolbar-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:.55rem 1rem;
  border-radius:999px;
  background:linear-gradient(135deg,rgba(79,172,254,0.12),rgba(165,94,234,0.12));
  border:1px solid rgba(79,172,254,0.16);
  color:var(--text);
  font-size:.8rem;
  font-weight:800;
  letter-spacing:.03em;
}

.subject-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,.9fr);
  gap:1rem;
  padding:1.15rem;
  border-color:rgba(79,172,254,0.18);
  overflow:hidden;
}

.subject-hero::before{
  content:'';
  position:absolute;
  inset:-20% auto auto -10%;
  width:240px;
  height:240px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(var(--subject-accent,79,172,254),0.16),transparent 70%);
  pointer-events:none;
  filter:blur(12px);
}

.subject-kicker{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--blue);
  margin-bottom:.45rem;
}

.subject-hero-title{
  font-size:1.35rem;
  font-weight:900;
  line-height:1.15;
  margin-bottom:.55rem;
}

.subject-hero-text{
  font-size:.92rem;
  line-height:1.6;
  color:var(--text2);
}

.subject-hero-actions{margin-top:.9rem}

.subject-hero-side{
  display:flex;
  flex-direction:column;
  gap:.8rem;
}

.subject-hero-art{
  position:relative;
  min-height:150px;
  border-radius:calc(var(--r-lg) + 4px);
  background:linear-gradient(135deg,rgba(var(--subject-accent,79,172,254),0.16),rgba(var(--subject-accent-2,0,198,251),0.1));
  border:1px solid rgba(255,255,255,0.07);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.subject-hero-orb{
  width:96px;
  height:96px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 30% 30%,rgba(255,255,255,0.28),rgba(var(--subject-accent,79,172,254),0.22) 55%,rgba(11,13,26,0.4));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow:0 0 30px rgba(var(--subject-accent,79,172,254),0.25), inset 0 1px 10px rgba(255,255,255,0.08);
  animation:subjectFloat 3.2s ease-in-out infinite;
}

.subject-hero-emoji{
  font-size:2.4rem;
}

.subject-hero-spark{
  position:absolute;
  border-radius:999px;
  background:rgba(255,255,255,0.6);
  box-shadow:0 0 14px rgba(255,255,255,0.22);
}

.subject-spark-a{width:10px;height:10px;top:26px;right:54px}
.subject-spark-b{width:7px;height:7px;bottom:30px;left:62px}
.subject-spark-c{width:14px;height:14px;bottom:42px;right:80px;background:rgba(var(--subject-accent,79,172,254),0.9)}

@keyframes subjectFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}

.subject-stats{
  display:grid;
  grid-template-columns:1fr;
  gap:.65rem;
}

.subject-stat-card{
  padding:.9rem 1rem;
  border-radius:var(--r);
  background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(var(--subject-accent,79,172,254),0.08));
  border:1px solid rgba(255,255,255,0.06);
}

.subject-stat-value{
  font-size:1.15rem;
  font-weight:900;
  color:var(--text);
}

.subject-stat-label{
  margin-top:.15rem;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text3);
}

.subject-preview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
}

.subject-path{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.7rem;
}

.subject-path-card{
  position:relative;
  padding:.95rem 1rem;
  border-radius:var(--r);
  background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(var(--subject-accent,79,172,254),0.08));
  border:1px solid rgba(255,255,255,0.06);
  overflow:hidden;
}

.subject-path-card::after{
  content:'';
  position:absolute;
  inset:auto 0 0 0;
  height:3px;
  background:linear-gradient(90deg,rgba(var(--subject-accent,79,172,254),0.8),rgba(var(--subject-accent-2,0,198,251),0.8));
}

.subject-path-step{
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(var(--subject-accent,79,172,254),0.95);
  margin-bottom:.32rem;
}

.subject-path-title{
  font-size:.96rem;
  font-weight:900;
  margin-bottom:.28rem;
}

.subject-path-text{
  font-size:.8rem;
  line-height:1.5;
  color:var(--text2);
}

.subject-preview-card{
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  min-height:170px;
  border-color:rgba(var(--subject-accent,79,172,254),0.16);
  background:linear-gradient(180deg,rgba(11,13,26,0.94),rgba(24,28,51,0.92));
}

.subject-preview-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(var(--subject-accent,79,172,254),0.12);
}

.subject-preview-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
}

.subject-preview-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.28rem .55rem;
  border-radius:999px;
  background:rgba(var(--subject-accent,79,172,254),0.12);
  color:rgb(var(--subject-accent,79,172,254));
  font-size:.68rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.subject-preview-icon{
  font-size:1.45rem;
}

.subject-preview-title{
  font-size:1rem;
  font-weight:900;
}

.subject-preview-text{
  font-size:.82rem;
  line-height:1.55;
  color:var(--text2);
}

.subject-preview-foot{
  margin-top:auto;
  font-size:.72rem;
  font-weight:700;
  color:var(--text3);
}

.subject-coming-card{
  padding:1rem 1.1rem;
  border-color:rgba(var(--subject-accent,79,172,254),0.16);
  background:linear-gradient(135deg,rgba(11,13,26,0.92),rgba(var(--subject-accent,79,172,254),0.12));
}

.subject-coming-title{
  font-size:1rem;
  font-weight:900;
  margin-bottom:.35rem;
}

.subject-coming-text{
  font-size:.85rem;
  line-height:1.6;
  color:var(--text2);
}

@media(max-width:860px){
  .subject-hero{grid-template-columns:1fr}
  .subject-path{grid-template-columns:1fr}
  .subject-preview-grid{grid-template-columns:1fr}
}

/* ===== MATH SESSION ===== */
/* ═══════ MATH WELCOME ═══════ */
/* ═══ MATH WELCOME — fully centered, adaptive ═══ */
.mw-shell{
  width:100%;
  max-width:520px;
  margin:0 auto;
  padding:2.5rem 1.5rem;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:100dvh;
  gap:1.8rem;
  position:relative;
}
.mw-close{
  position:absolute;
  top:1rem;
  right:1rem;
  z-index:2;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--glass2);
  border:1px solid var(--border);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.mw-hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
}
.mw-sensei-img{
  width:98px;
  height:auto;
  filter:drop-shadow(0 0 40px rgba(79,172,254,0.35));
  animation:mw-float 3s ease-in-out infinite;
}
@keyframes mw-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.mw-right{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4rem;
  width:100%;
}
.mw-speech{
  background:linear-gradient(135deg,rgba(79,172,254,0.08),rgba(165,94,234,0.08));
  border:1px solid rgba(79,172,254,0.15);
  border-radius:20px;
  padding:1.3rem 1.6rem;
  position:relative;
  width:100%;
  text-align:center;
}
.mw-speech::before{
  content:'';
  position:absolute;
  top:-7px;
  left:50%;
  transform:translateX(-50%);
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-bottom:7px solid rgba(79,172,254,0.15);
}
.mw-speech-text{
  font-size:1.1rem;
  line-height:1.7;
  color:var(--text);
}
.mw-listen{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.75rem 1.4rem;
  background:var(--glass2);
  border:1px solid var(--border2);
  border-radius:var(--r);
  cursor:pointer;
  transition:all .2s;
}
.mw-listen:hover{background:var(--glass3)}
.mw-listen-icon{font-size:1.3rem}
.mw-listen-label{font-size:.95rem;font-weight:700;color:var(--text)}
.mw-waves{margin-left:.3rem}
.mw-start-btn{
  width:100%;
  max-width:340px;
  padding:1.1rem 2rem;
  font-size:1.25rem;
  font-weight:900;
  border-radius:20px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  transition:all .25s;
  box-shadow:0 4px 24px rgba(79,172,254,0.35);
  position:relative;
  overflow:hidden;
}
.mw-start-btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.12) 50%,transparent 60%);
  background-size:200% 100%;
  animation:mw-shimmer 2.5s ease-in-out infinite;
}
@keyframes mw-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.mw-start-btn:hover{transform:scale(1.04);box-shadow:0 6px 32px rgba(79,172,254,0.45)}
.mw-start-btn:active{transform:scale(0.97)}
.mw-start-btn.disabled{opacity:.5;pointer-events:none}
.mw-start-icon{font-size:1.5rem;position:relative;z-index:1}
.mw-start-btn span{position:relative;z-index:1}

/* ── Generation status indicator ── */
.mw-gen-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.5rem 1rem;
  border-radius:12px;
  background:rgba(255,215,0,0.06);
  border:1px solid rgba(255,215,0,0.15);
  color:var(--yellow);
  font-size:.85rem;
  font-weight:700;
}
.mw-gen-status.hidden{display:none}
.mw-gen-spinner{
  width:16px;height:16px;
  border:2px solid rgba(255,215,0,0.2);
  border-top-color:var(--yellow);
  border-radius:50%;
  animation:mw-spin .8s linear infinite;
}
@keyframes mw-spin{to{transform:rotate(360deg)}}

/* ── Tablet+ : side by side ── */
@media(min-width:768px){
  .mw-shell{
    flex-direction:row;
    max-width:860px;
    gap:3rem;
    padding:2rem 2.5rem;
  }
  .mw-sensei-img{width:98px}
  .mw-right{max-width:400px}
  .mw-speech{text-align:left}
  .mw-speech::before{
    top:50%;left:-7px;
    transform:translateY(-50%);
    border-left:none;border-bottom:none;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-right:7px solid rgba(79,172,254,0.15);
  }
}
/* ── Small phones ── */
@media(max-width:380px){
  .mw-shell{padding:1.5rem 1rem;gap:1.2rem}
  .mw-sensei-img{width:98px}
  .mw-speech-text{font-size:1rem}
  .mw-start-btn{padding:1rem 1.5rem;font-size:1.1rem}
}

/* ═══════ MATH SESSION — viewport-locked, no scroll ═══════ */
.ms-shell{
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:0 1.5rem;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* ── Top bar ── */
.ms-topbar{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.6rem 0;
  flex-shrink:0;
}
.ms-close{
  flex-shrink:0;
  width:32px;height:32px;
  border-radius:50%;
  background:var(--glass2);
  border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:.85rem;
}
.ms-progress{flex:1;display:flex;flex-direction:column;gap:.15rem}
.ms-progress-track{
  height:8px;
  background:var(--glass2);
  border-radius:4px;
  overflow:hidden;
  border:1px solid var(--border);
}
.ms-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--blue),var(--purple));
  border-radius:4px;
  transition:width .5s cubic-bezier(.4,0,.2,1);
  width:0%;
  box-shadow:0 0 6px rgba(79,172,254,0.35);
}
.ms-progress-label{
  font-size:.65rem;
  color:var(--text3);
  text-align:center;
  font-weight:600;
}
.ms-stars{
  font-size:.85rem;
  font-weight:900;
  color:var(--yellow);
  flex-shrink:0;
  background:linear-gradient(135deg,rgba(255,211,42,0.1),rgba(255,159,67,0.06));
  padding:.3rem .7rem;
  border-radius:50px;
  border:1px solid rgba(255,211,42,0.2);
  transition:all .3s;
  min-width:60px;
  text-align:center;
}

/* ── Task card — top-aligned, compact ── */
.ms-task-card{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:.6rem;
  padding:.5rem 0 .5rem;
}

/* ── Star reward per task ── */
.ms-stars-reward{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.3rem 0;
  flex-shrink:0;
}
.ms-reward-star{
  font-size:1.8rem;
  transition:all .4s cubic-bezier(.4,0,.2,1);
  filter:drop-shadow(0 0 8px rgba(255,211,42,0.4));
  position:relative;
}
.ms-reward-star.active{
  opacity:1;
  transform:scale(1);
}
.ms-reward-star.lost{
  opacity:.2;
  transform:scale(0.7);
  filter:grayscale(1) brightness(0.5) drop-shadow(none);
}
.ms-reward-star.losing{
  animation:starLose .5s ease forwards;
}
@keyframes starLose{
  0%{transform:scale(1);opacity:1;filter:drop-shadow(0 0 8px rgba(255,211,42,0.4))}
  30%{transform:scale(1.3) rotate(-15deg);opacity:1;filter:drop-shadow(0 0 16px rgba(255,71,87,0.6))}
  60%{transform:scale(0.5) rotate(10deg);opacity:.4}
  100%{transform:scale(0.7) rotate(0);opacity:.2;filter:grayscale(1) brightness(0.5)}
}
/* Star earned animation on correct answer */
.ms-stars-reward.earned{
  animation:starsEarned .6s ease;
}
@keyframes starsEarned{
  0%{transform:scale(1)}
  40%{transform:scale(1.15)}
  70%{transform:scale(0.95)}
  100%{transform:scale(1)}
}
/* Hint penalty indicator */
.ms-hint-penalty{
  position:absolute;
  top:-8px;right:-12px;
  font-size:.65rem;
  font-weight:900;
  color:var(--red);
  opacity:0;
  pointer-events:none;
}
.ms-hint-penalty.show{
  animation:penaltyPop .8s ease forwards;
}
@keyframes penaltyPop{
  0%{opacity:0;transform:translateY(0) scale(0.5)}
  30%{opacity:1;transform:translateY(-8px) scale(1.2)}
  70%{opacity:1;transform:translateY(-16px) scale(1)}
  100%{opacity:0;transform:translateY(-28px) scale(0.8)}
}

/* ── Question row: badge above, question + hint inline ── */
.ms-question-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.4rem;
  width:100%;
  max-width:600px;
}
.ms-skill-badge{
  font-size:.62rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--blue);
  background:rgba(79,172,254,0.07);
  padding:.2rem .7rem;
  border-radius:16px;
  border:1px solid rgba(79,172,254,0.12);
}
.ms-question-line{
  display:flex;
  align-items:center;
  gap:.6rem;
  justify-content:center;
  width:100%;
}
.ms-question{
  font-size:1.5rem;
  font-weight:900;
  text-align:center;
  line-height:1.3;
  color:var(--text);
}

/* ── Options ── */
.ms-options{
  width:100%;
  max-width:500px;
  display:grid;
  gap:.45rem;
  flex-shrink:0;
}
.ms-options .option-btn{
  padding:.7rem .8rem;
  font-size:1rem;
  font-weight:700;
  border-radius:12px;
  background:var(--glass2);
  border:1.5px solid var(--border2);
  color:var(--text);
  cursor:pointer;
  transition:all .15s;
  text-align:center;
}
.ms-options .option-btn:hover{background:var(--glass3);border-color:rgba(79,172,254,0.35)}
.ms-options .option-btn:active{transform:scale(0.97)}
.ms-options .option-btn.correct{
  background:rgba(46,213,115,0.15);
  border-color:#2ed573;
  color:#b8ffd0;
  animation:ms-pop .3s ease;
}
.ms-options .option-btn.wrong{
  background:rgba(255,71,87,0.1);
  border-color:rgba(255,71,87,0.3);
  color:#ffd0d5;
  animation:ms-shake .4s ease;
}
@keyframes ms-pop{0%{transform:scale(1)}50%{transform:scale(1.05)}100%{transform:scale(1)}}
@keyframes ms-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ── Input type ── */
.ms-options .input-wrap{
  display:flex;
  gap:.5rem;
  width:100%;
}
.ms-options .answer-input{
  flex:1;
  padding:.7rem 1rem;
  font-size:1.2rem;
  font-weight:700;
  border-radius:12px;
  background:var(--glass2);
  border:1.5px solid var(--border2);
  color:var(--text);
  text-align:center;
  outline:none;
  transition:border-color .2s;
}
.ms-options .answer-input:focus{border-color:var(--blue)}
.ms-options .answer-input.input-correct{border-color:#2ed573;background:rgba(46,213,115,0.08)}
.ms-options .answer-input.input-wrong{border-color:rgba(255,71,87,0.3);animation:ms-shake .4s ease}
.ms-options .btn-submit{
  padding:.7rem 1.4rem;
  font-size:1rem;
  font-weight:800;
  border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  border:none;
  cursor:pointer;
}

/* ── Percent Grid ── */
.pg-wrap{display:flex;flex-direction:column;align-items:center;gap:.6rem;width:100%}
.pg-counter{
  font-size:2.2rem;font-weight:900;color:var(--text1);
  transition:color .2s,transform .2s;
}
.pg-counter.pg-match{color:#2ed573;transform:scale(1.15);text-shadow:0 0 12px rgba(46,213,115,0.5)}
.pg-grid{
  display:grid;
  gap:2px;
  width:min(280px,70vw);
  padding:6px;
  background:rgba(255,255,255,0.04);
  border-radius:12px;
  touch-action:manipulation;
  user-select:none;
  -webkit-user-select:none;
}
.pg-cell{
  border-radius:4px;
  aspect-ratio:1;
  cursor:pointer;
  transition:opacity .15s,transform .15s;
  position:relative;
}
.pg-cell.pg-on{
  opacity:1;
  transform:scale(1);
}
.pg-cell.pg-on::after{
  content:'';
  position:absolute;
  top:2px;left:2px;right:2px;
  height:40%;
  background:rgba(255,255,255,0.2);
  border-radius:3px 3px 6px 6px;
}
.pg-cell.pg-off{
  opacity:0.12;
  transform:scale(0.85);
  background:#444!important;
}
.pg-target{
  font-size:1.1rem;font-weight:700;color:var(--text2);
}
.pg-target-num{color:var(--blue);font-size:1.4rem}
.pg-check-btn{margin-top:.3rem}

/* Fixed Next button for grid tasks — always visible */
.ms-next-btn.pg-next-fixed{
  position:fixed;
  bottom:1.2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:200;
  box-shadow:0 4px 20px rgba(0,0,0,0.5);
  min-width:200px;
  font-size:1.1rem;
}

/* ── Feedback ── */
.ms-feedback{
  width:100%;
  max-width:500px;
  padding:.6rem 1rem;
  border-radius:12px;
  font-size:.95rem;
  font-weight:800;
  text-align:center;
  flex-shrink:0;
}
.ms-feedback.hidden{display:none}
.ms-feedback.correct{
  color:#b8ffd0;
  background:rgba(46,213,115,0.1);
  border:1px solid rgba(46,213,115,0.18);
}
.ms-feedback.wrong{
  color:#ffd0d5;
  background:rgba(255,71,87,0.08);
  border:1px solid rgba(255,71,87,0.15);
}

/* ── Hint button (inline with question) ── */
.ms-hint-btn{
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,215,0,0.08);
  border:1.5px solid rgba(255,215,0,0.2);
  color:var(--yellow);
  font-size:1.2rem;
  cursor:pointer;
  transition:all .2s;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.ms-hint-btn:hover{background:rgba(255,215,0,0.15);transform:scale(1.1)}
.ms-hint-btn:disabled{opacity:.3;cursor:default;transform:none}

/* ── Hints area — big yellow numbers ── */
.ms-hints{
  width:100%;
  max-width:500px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.35rem;
  flex-shrink:0;
}
.ms-hint-step{
  width:100%;
  padding:.5rem .8rem;
  border-radius:12px;
  background:rgba(255,215,0,0.06);
  border:1px solid rgba(255,215,0,0.12);
  text-align:center;
  animation:ms-hint-in .3s ease;
}
.ms-hint-step.hidden{display:none}
@keyframes ms-hint-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

.ms-hint-step .ms-hint-text{
  font-size:1.25rem;
  font-weight:900;
  color:#ffd32a;
  letter-spacing:.02em;
}

/* Answer reveal — green */
.ms-hint-answer{
  background:rgba(46,213,115,0.08);
  border-color:rgba(46,213,115,0.2);
}
.ms-hint-answer .ms-hint-text{
  color:#2ed573;
}

/* ── Next button ── */
.ms-next-btn{
  width:100%;
  max-width:500px;
  padding:.75rem;
  font-size:1.05rem;
  font-weight:900;
  border-radius:12px;
  background:linear-gradient(135deg,var(--blue),var(--purple));
  color:#fff;
  border:none;
  cursor:pointer;
  transition:all .2s;
  flex-shrink:0;
  position:relative;
  overflow:hidden;
}
.ms-next-btn::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.1) 50%,transparent 60%);
  background-size:200% 100%;
  animation:mw-shimmer 2s ease-in-out infinite;
}
.ms-next-btn:hover{transform:scale(1.02)}
.ms-next-btn:active{transform:scale(0.98)}
.ms-next-btn.hidden{display:none}

/* ── Summary ── */
.ms-summary{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:1rem;
  text-align:center;
}
.ms-summary.hidden{display:none}
.ms-summary-img{
  width:clamp(120px,20vh,200px);
  height:auto;
  filter:drop-shadow(0 0 24px rgba(79,172,254,0.3));
  animation:mw-float 3s ease-in-out infinite;
}
.ms-summary-title{font-size:clamp(1.3rem,3vh,2rem);font-weight:900;color:var(--text)}
.ms-summary-text{font-size:1rem;line-height:1.6;color:var(--text2);max-width:360px}
.ms-summary-stars{
  font-size:1.2rem;font-weight:800;color:var(--yellow);
  background:rgba(255,211,42,0.08);
  padding:.4rem 1rem;
  border-radius:16px;
  border:1px solid rgba(255,211,42,0.15);
}

/* ── Desktop: wider + bigger text ── */
@media(min-width:700px){
  .ms-shell{padding:0 2.5rem}
  .ms-question{font-size:1.8rem}
  .ms-question-row{max-width:700px}
  .ms-options{max-width:580px}
  .ms-options .option-btn{padding:.85rem 1rem;font-size:1.15rem}
  .ms-options .answer-input{font-size:1.4rem;padding:.85rem}
  .ms-feedback{max-width:580px}
  .ms-hints{max-width:580px}
  .ms-hint-step .ms-hint-text{font-size:1.4rem}
  .ms-next-btn{max-width:580px}
  .ms-hint-btn{width:46px;height:46px;font-size:1.3rem}
}
/* ── Small phones ── */
@media(max-width:380px){
  .ms-shell{padding:0 .7rem}
  .ms-question{font-size:1.15rem}
  .ms-options .option-btn{padding:.55rem .6rem;font-size:.9rem}
  .ms-options .answer-input{font-size:1rem;padding:.6rem}
  .ms-task-card{gap:.5rem}
  .ms-hint-step .ms-hint-text{font-size:1rem}
  .ms-hint-btn{width:34px;height:34px;font-size:1rem}
}

/* Three chests row */
.home-chests{
  display:grid;grid-template-columns:1fr 1fr 1fr;
  gap:.75rem;width:100%;align-self:stretch;
  margin-top:.4rem;
}
.home-chest-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0.6rem 0.8rem 0.7rem;cursor:pointer;text-align:center;gap:.3rem;
  transition:all .25s ease;
  background:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border:none;
  box-shadow:none;
  border-radius:0;
  min-width:0;overflow:visible;
  position:relative;
}
.home-chest-card:hover{transform:translateY(-4px);box-shadow:none}
.home-chest-card:active{transform:scale(.97)}
.home-chest-icon{width:126px;height:126px;object-fit:contain;transition:transform .3s ease,filter .3s ease}
.daily-slot{
  position:relative;
  width:100%;
  min-height:98px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.daily-chest-visual{position:relative;z-index:1}
.daily-reward-grid{
  position:absolute;inset:0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.45rem;
  align-items:center;
  justify-items:stretch;
  padding:.15rem;
  z-index:2;
}
.daily-reward-grid-large{padding:.25rem 0}
.daily-reward-grid-single{
  grid-template-columns:1fr;
  justify-items:center;
  align-content:center;
}
.home-chest-card .daily-reward-grid-single{
  inset:0;
  width:100%;
  padding:.15rem;
}
.home-chest-card .daily-reward-grid-single .daily-reward-tile{
  width:min(100%,148px);
}
.chest-hero .daily-reward-grid-single{
  width:min(190px,calc(100vw - 80px));
}
.chest-hero .daily-reward-grid-single .daily-reward-tile{
  width:100%;
}
/* Compact tiles inside home chest cards when 4 items (2×2) */
.home-chest-card .daily-reward-grid:not(.daily-reward-grid-single) .daily-reward-tile{
  min-height:52px;
  border-radius:10px;
  padding:.25rem .15rem;
}
.home-chest-card .daily-reward-grid:not(.daily-reward-grid-single) .daily-reward-value{
  font-size:.95rem;
}
.home-chest-card .daily-reward-grid:not(.daily-reward-grid-single) .daily-reward-label{
  font-size:.5rem;
  letter-spacing:.5px;
}
.home-chest-card .daily-reward-grid:not(.daily-reward-grid-single){
  gap:.3rem;
  padding:.1rem;
}
.daily-reward-tile{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:88px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.14);
  box-shadow:0 10px 24px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;
  transform:translateY(0);
  animation:dailyTileIn .34s ease both;
}
.daily-reward-tile::before{
  content:'';
  position:absolute;
  inset:-18% auto -18% -65%;
  width:55%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.28),transparent);
  transform:skewX(-18deg);
  opacity:0;
  pointer-events:none;
}
.daily-reward-stars{
  background:linear-gradient(135deg,rgba(255,211,42,0.24),rgba(255,159,67,0.14));
  border-color:rgba(255,211,42,0.28);
}
.daily-reward-puzzle{
  background:linear-gradient(135deg,rgba(79,172,254,0.22),rgba(165,94,234,0.14));
  border-color:rgba(79,172,254,0.28);
}
.daily-reward-crystal{
  background:linear-gradient(135deg,rgba(138,43,226,0.24),rgba(79,172,254,0.14));
  border-color:rgba(138,43,226,0.28);
}
.daily-reward-crystal .daily-reward-value{font-size:1.45rem}
.daily-reward-artifact{
  background:linear-gradient(135deg,rgba(255,107,129,0.22),rgba(255,159,67,0.14));
  border-color:rgba(255,107,129,0.28);
}
.daily-reward-artifact .daily-reward-value{font-size:1.45rem}
.daily-reward-value{
  font-size:1.2rem;font-weight:900;line-height:1;color:var(--text);
  text-shadow:0 2px 10px rgba(0,0,0,0.25);
}
.daily-reward-label{
  font-size:.66rem;font-weight:800;text-transform:uppercase;letter-spacing:.8px;
  color:var(--text2);
}
.daily-reward-stars .daily-reward-value{color:var(--yellow)}
.daily-reward-puzzle .daily-reward-value{font-size:1.45rem}
.daily-open .daily-chest-visual{opacity:0;transform:scale(.75);pointer-events:none}
.daily-open .daily-reward-grid{pointer-events:none}
.daily-ready .daily-chest-visual{animation:badgePulse 2s ease-in-out infinite}
.daily-opening .daily-chest-visual{
  animation:dailyChestPop .5s cubic-bezier(.2,.9,.2,1) forwards;
}
.daily-opening .daily-reward-grid{opacity:0}
.home-chest-card.daily-opening .daily-reward-grid{transform:scale(.92)}
.chest-hero.daily-opening .daily-reward-grid{transform:translate(-50%,-50%) scale(.92)}
.daily-open .daily-reward-grid{
  filter:drop-shadow(0 10px 24px rgba(79,172,254,0.12));
}
.home-chest-card.daily-open .daily-reward-grid{
  animation:dailyRevealHome .58s cubic-bezier(.16,1,.3,1) both;
}
.chest-hero.daily-open .daily-reward-grid{
  transform-origin:center center;
  animation:dailyRevealCentered .58s cubic-bezier(.16,1,.3,1) both;
}
.daily-open .daily-reward-tile:nth-child(1){animation-delay:.08s}
.daily-open .daily-reward-tile:nth-child(1)::before{animation:dailyTileShine 1.05s ease .18s both}
.daily-open .daily-reward-tile:nth-child(2){animation-delay:.18s}
.daily-open .daily-reward-tile:nth-child(2)::before{animation:dailyTileShine 1.05s ease .28s both}
.daily-open .daily-reward-tile:nth-child(3){animation-delay:.28s}
.daily-open .daily-reward-tile:nth-child(3)::before{animation:dailyTileShine 1.05s ease .38s both}
.daily-open .daily-reward-tile:nth-child(4){animation-delay:.38s}
.daily-open .daily-reward-tile:nth-child(4)::before{animation:dailyTileShine 1.05s ease .48s both}
@keyframes dailyTileIn{
  0%{opacity:0;transform:translateY(14px) scale(.9)}
  65%{opacity:1;transform:translateY(-2px) scale(1.03)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes dailyTileShine{
  0%{opacity:0;transform:translateX(0) skewX(-18deg)}
  18%{opacity:.95}
  100%{opacity:0;transform:translateX(320%) skewX(-18deg)}
}
@keyframes dailyChestPop{
  0%{opacity:1;transform:scale(1) rotate(0)}
  35%{transform:scale(1.12) rotate(-4deg);filter:drop-shadow(0 0 28px rgba(255,211,42,0.55))}
  70%{transform:scale(.92) rotate(6deg);opacity:.9}
  100%{opacity:0;transform:scale(.72) rotate(-10deg);filter:blur(1px)}
}
@keyframes dailyRevealHome{
  0%{opacity:0;transform:translateY(18px) scale(.78)}
  55%{opacity:1;transform:translateY(-4px) scale(1.05)}
  78%{opacity:1;transform:translateY(1px) scale(.985)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes dailyRevealCentered{
  0%{opacity:0;transform:translate(-50%,calc(-50% + 18px)) scale(.78)}
  55%{opacity:1;transform:translate(-50%,calc(-50% - 4px)) scale(1.05)}
  78%{opacity:1;transform:translate(-50%,calc(-50% + 1px)) scale(.985)}
  100%{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
.daily-opening .daily-chest-visual{filter:drop-shadow(0 0 30px rgba(255,211,42,0.55))}
.daily-fly-layer{
  position:fixed;inset:0;pointer-events:none;z-index:1200;overflow:visible;
}
.daily-fly-card{
  position:absolute;left:50%;top:50%;
  width:min(32%,105px);aspect-ratio:1 / 1.08;
  border-radius:18px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.1rem;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 16px 28px rgba(0,0,0,0.26), inset 0 1px 0 rgba(255,255,255,0.12);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  opacity:0;
  transform:translate(-50%,-50%) scale(.25) rotate(0deg);
  animation:dailyFlyOut .75s cubic-bezier(.16,1,.3,1) forwards;
}
.daily-fly-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,0.18),transparent 50%);
  pointer-events:none;
}
.daily-fly-stars{background:linear-gradient(135deg,rgba(255,211,42,0.38),rgba(255,159,67,0.18));border-color:rgba(255,211,42,0.4)}
.daily-fly-crystal{background:linear-gradient(135deg,rgba(138,43,226,0.38),rgba(79,172,254,0.18));border-color:rgba(138,43,226,0.4)}
.daily-fly-crystal .daily-fly-value{font-size:1.55rem}
.daily-fly-puzzle{background:linear-gradient(135deg,rgba(79,172,254,0.34),rgba(165,94,234,0.18));border-color:rgba(79,172,254,0.38)}
.daily-fly-artifact{background:linear-gradient(135deg,rgba(255,107,129,0.35),rgba(255,159,67,0.18));border-color:rgba(255,107,129,0.38)}
.daily-fly-artifact .daily-fly-value{font-size:1.55rem}
.daily-fly-value{
  font-size:1.3rem;font-weight:900;line-height:1;color:var(--text);
  text-shadow:0 2px 10px rgba(0,0,0,0.25);
}
.daily-fly-puzzle .daily-fly-value{font-size:1.55rem}
.daily-fly-label{
  font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--text2)
}
@keyframes dailyFlyOut{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.25) rotate(0deg)}
  18%{opacity:1;transform:translate(-50%,-60%) scale(1.08) rotate(0deg)}
  55%{opacity:1;transform:translate(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px))) scale(1.03) rotate(var(--rot,0deg))}
  78%{opacity:1;transform:translate(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px))) scale(.98) rotate(var(--rot,0deg))}
  100%{opacity:1;transform:translate(calc(-50% + var(--tx,0px)),calc(-50% + var(--ty,0px))) scale(1) rotate(var(--rot,0deg))}
}
.daily-spark{
  position:fixed;width:8px;height:8px;border-radius:999px;z-index:520;
  pointer-events:none;transform:translate(-50%,-50%);
  animation:dailySparkFly .7s cubic-bezier(.16,1,.3,1) forwards;
}
.daily-halo{
  position:fixed;width:12px;height:12px;border-radius:999px;z-index:519;
  pointer-events:none;transform:translate(-50%,-50%);
  border:2px solid rgba(255,211,42,0.85);
  box-shadow:0 0 24px rgba(255,211,42,0.45), inset 0 0 18px rgba(255,211,42,0.2);
  animation:dailyHalo .65s ease-out forwards;
}
@keyframes dailySparkFly{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,0px))) scale(0)}
}
@keyframes dailyHalo{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.2)}
  65%{opacity:.55;transform:translate(-50%,-50%) scale(10)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(14)}
}
.chest-badge{
  position:absolute;top:-6px;right:-6px;
  font-size:.85rem;font-weight:900;
  color:var(--text);
  background:rgba(20,20,40,0.85);backdrop-filter:blur(12px);
  padding:4px 10px;border-radius:50px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.3px;z-index:3;
  border:1.5px solid rgba(255,255,255,0.15);
  transition:all .3s ease;
  min-width:32px;text-align:center;
  line-height:1.3;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
  white-space:nowrap;
}
/* Badge states */
.chest-badge.badge-ready{
  color:var(--yellow);border-color:rgba(255,211,42,0.4);
  background:rgba(255,211,42,0.18);
  animation:badgePulse 2s ease-in-out infinite;
}
.chest-badge.badge-done{
  color:var(--green);border-color:rgba(46,213,115,0.4);
  background:rgba(46,213,115,0.18);
}
.chest-badge.badge-locked{
  color:var(--text3);
  opacity:.7;
}
.chest-badge.badge-progress{
  color:var(--blue);border-color:rgba(79,172,254,0.3);
  background:rgba(79,172,254,0.12);
}
#home-lesson-badge,
#home-weekly-badge{display:none}
@keyframes badgePulse{
  0%,100%{transform:scale(1);box-shadow:none}
  50%{transform:scale(1.08);box-shadow:0 0 8px rgba(255,211,42,0.35)}
}
.home-chest-card .home-block-title{font-size:.8rem}
.home-chest-card .home-block-sub{font-size:.6rem}
.chest-sub{
  font-size:.7rem;font-weight:800;
  color:var(--text2);text-transform:uppercase;
  letter-spacing:.6px;margin-top:0;
}

/* ── Per-chest hover — invisible container, no bg/border ── */
#home-daily-card{background:transparent;border:1px solid rgba(255,211,42,0.18);border-radius:16px;transition:border-color .25s ease}
#home-daily-card:hover{border-color:rgba(255,211,42,0.35);box-shadow:none}
#home-lesson-card{background:transparent;border:1px solid rgba(79,172,254,0.18);border-radius:16px;transition:border-color .25s ease}
#home-lesson-card:hover{border-color:rgba(79,172,254,0.35);box-shadow:none}
#home-weekly-card{background:transparent;border:1px solid rgba(165,94,234,0.18);border-radius:16px;transition:border-color .25s ease}
#home-weekly-card:hover{border-color:rgba(165,94,234,0.35);box-shadow:none}

.home-chest-card.daily-ready .home-chest-icon{
  animation:chestFloat 2.5s ease-in-out infinite;
}
/* Shimmer on ready chests — only on the icon, not the invisible card */
.home-chest-card.daily-ready::after{
  display:none;
}
@keyframes chestGlowGold{
  0%,100%{box-shadow:0 0 16px rgba(255,211,42,0.1),0 0 32px rgba(255,211,42,0.04)}
  50%{box-shadow:0 0 28px rgba(255,211,42,0.2),0 0 56px rgba(255,211,42,0.08)}
}
@keyframes chestGlowBlue{
  0%,100%{box-shadow:0 0 16px rgba(79,172,254,0.1),0 0 32px rgba(79,172,254,0.04)}
  50%{box-shadow:0 0 28px rgba(79,172,254,0.2),0 0 56px rgba(79,172,254,0.08)}
}
@keyframes chestGlowPurple{
  0%,100%{box-shadow:0 0 16px rgba(165,94,234,0.1),0 0 32px rgba(165,94,234,0.04)}
  50%{box-shadow:0 0 28px rgba(165,94,234,0.2),0 0 56px rgba(165,94,234,0.08)}
}
@keyframes chestFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes chestShimmer{
  0%{background-position:250% 0}
  100%{background-position:-50% 0}
}

/* Chest card claimed state */
.home-chest-card.claimed{opacity:.6}
.home-chest-card.claimed .home-chest-icon{filter:grayscale(.5)}
.home-chest-card.claimed .chest-sub{color:var(--green)}

.home-block-full{width:100%;min-height:auto;padding:1.2rem;flex-direction:row;gap:1rem;justify-content:flex-start}
.home-block-full .home-block-icon{font-size:2rem}
.home-block-full .home-block-title{text-align:left}
.home-block-full .home-block-sub{text-align:left}

/* ===== TASK ===== */
/* ═══════════════════════════════════════════════════
   LESSON SCREEN — Premium Game UI
   ═══════════════════════════════════════════════════ */

#screen-task{display:none;position:relative;z-index:1}
#screen-task.active{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - var(--nav-h))}
.task-container{
  width:100%;max-width:920px;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding:1rem 1.5rem 1.5rem;flex:1;justify-content:center;
}

/* ── Progress Bar (top) ── */
.task-topbar{
  display:flex;align-items:center;gap:.8rem;width:100%;
  padding:0.4rem 0;
}
.progress-wrap{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:.6rem;width:100%;
}
.progress-track{
  flex:1 1 100%;min-width:0;height:12px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:50px;position:relative;overflow:visible;
}
.progress-fill{
  height:100%;
  background:linear-gradient(90deg,#4facfe,#00f2fe);
  border-radius:50px;transition:width .6s cubic-bezier(.4,0,.2,1);width:0%;
  box-shadow:0 0 12px rgba(79,172,254,0.35), 0 0 4px rgba(0,242,254,0.2);
  position:relative;
}
.progress-fill::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0.25) 0%,transparent 60%);
  border-radius:50px;
}
.progress-dot{
  position:absolute;top:50%;left:0%;
  transform:translate(-50%,-50%);
  width:16px;height:16px;
  border-radius:50%;
  background:radial-gradient(circle,#fff 30%,#4facfe 70%);
  box-shadow:0 0 10px rgba(79,172,254,0.5), 0 0 3px rgba(255,255,255,0.6);
  transition:left .6s cubic-bezier(.4,0,.2,1);
  z-index:2;
}
.progress-label{
  font-size:.7rem;font-weight:800;color:var(--text3);
  text-align:center;min-width:48px;letter-spacing:0.5px;
  flex-shrink:0;
}
.btn-close-lesson{
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.08)!important;
  border-radius:10px!important;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--text3);
  transition:all .2s;
}
.btn-close-lesson:hover{
  background:rgba(255,71,87,0.1)!important;
  border-color:rgba(255,71,87,0.2)!important;
  color:var(--red);
}

/* ── Task Card ── */
.task-card{
  width:100%;
  padding:1.8rem 2rem 2rem;
  text-align:center;
  display:flex;flex-direction:column;align-items:center;
  gap:.6rem;
  position:relative;
  background:linear-gradient(145deg,rgba(14,17,35,0.95),rgba(22,26,48,0.95));
  border:1px solid rgba(79,172,254,0.08);
  border-radius:20px;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.4),
    0 0 0 1px rgba(255,255,255,0.02),
    inset 0 1px 0 rgba(255,255,255,0.04);
  position:relative;
  overflow:hidden;
}
.task-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(79,172,254,0.15),rgba(0,242,254,0.1),transparent);
}

.task-badge{
  font-size:.65rem;font-weight:800;
  color:#4facfe;
  background:rgba(79,172,254,0.08);
  border:1px solid rgba(79,172,254,0.15);
  padding:.25rem .8rem;border-radius:50px;
  text-transform:uppercase;letter-spacing:2px;
}
.task-reward{
  position:absolute;
  top:0.8rem;right:0.8rem;
  font-size:.7rem;font-weight:800;
  color:#ffd32a;
  padding:.25rem .7rem;border-radius:50px;
  letter-spacing:0.5px;
  background:linear-gradient(135deg,rgba(255,211,42,0.12),rgba(255,170,40,0.08));
  border:1px solid rgba(255,211,42,0.18);
  box-shadow:0 0 12px rgba(255,211,42,0.1), 0 0 4px rgba(255,180,40,0.08);
  animation:rewardShimmer 3s ease-in-out infinite;
  z-index:2;
}
@keyframes rewardShimmer{
  0%,100%{box-shadow:0 0 8px rgba(255,211,42,0.1), 0 0 2px rgba(255,180,40,0.06);}
  50%{box-shadow:0 0 18px rgba(255,211,42,0.25), 0 0 6px rgba(255,180,40,0.15);}
}
.task-question-row{
  display:flex;align-items:flex-start;gap:.5rem;
  margin:.6rem 0 .4rem;width:100%;
}
.task-question{
  font-size:clamp(1.25rem,3.5vw,1.8rem);
  font-weight:900;line-height:1.35;flex:1;
  color:#f8f9ff;
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.task-listen-btn{
  flex:0 0 auto;width:40px;height:40px;border-radius:50%;
  background:linear-gradient(135deg,rgba(79,172,254,.2),rgba(165,94,234,.15));
  border:1.5px solid rgba(79,172,254,.3);
  color:rgba(255,255,255,.8);font-size:1.1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .2s;backdrop-filter:blur(8px);
  box-shadow:0 2px 10px rgba(0,0,0,.15);
}
.task-listen-btn:hover{transform:scale(1.1);border-color:rgba(79,172,254,.5)}
.task-listen-btn:active{transform:scale(.95)}
.task-listen-btn.speaking{
  border-color:rgba(165,94,234,.5);
  animation:listenPulse 1s ease infinite;
}
@keyframes listenPulse{
  0%,100%{box-shadow:0 2px 10px rgba(0,0,0,.15)}
  50%{box-shadow:0 2px 16px rgba(165,94,234,.3)}
}
.task-options{
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  width:100%;max-width:560px;margin-top:.3rem;
}

/* ── Option Buttons ── */
.option-btn{
  font-family:inherit;
  font-size:clamp(1rem,3vw,1.3rem);font-weight:800;
  padding:1rem .8rem;
  border:2px solid rgba(255,255,255,0.1);
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
  color:var(--text);cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  position:relative;overflow:hidden;
}
.option-btn::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(79,172,254,0.08),transparent 70%);
  opacity:0;transition:opacity .2s;
}
.option-btn:hover{
  border-color:rgba(79,172,254,0.4);
  transform:translateY(-3px);
  box-shadow:0 6px 20px rgba(79,172,254,0.15);
}
.option-btn:hover::before{opacity:1}
.option-btn:active{transform:scale(.97);box-shadow:none}

.option-btn.correct{
  border-color:#2ed573;
  background:linear-gradient(145deg,rgba(46,213,115,0.12),rgba(46,213,115,0.04));
  box-shadow:0 0 20px rgba(46,213,115,0.2);
  animation:correctPulse .5s ease;
}
.option-btn.wrong{
  border-color:var(--red);
  background:rgba(255,71,87,0.08);
  animation:shake .35s ease;
}
@keyframes correctPulse{
  0%{transform:scale(1)}30%{transform:scale(1.04)}60%{transform:scale(0.98)}100%{transform:scale(1)}
}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}
@keyframes popIn{0%{transform:scale(1)}50%{transform:scale(1.03)}100%{transform:scale(1)}}

/* ═══ NEW INTERACTIVE TASK TYPES ═══ */

/* ── Sort (drag reorder) ── */
.sort-list{
  display:flex;flex-direction:column;gap:.5rem;
  width:100%;max-width:320px;margin:0 auto .8rem;
}
.sort-item{
  display:flex;align-items:center;gap:.6rem;
  background:var(--glass);border:1px solid var(--border);
  border-radius:12px;padding:.6rem 1rem;
  font-size:1rem;font-weight:700;color:var(--text);
  cursor:grab;user-select:none;-webkit-user-select:none;
  transition:all .2s;
}
.sort-item:active{cursor:grabbing}
.sort-grip{color:rgba(255,255,255,.3);font-size:1.1rem}
.sort-ghost{opacity:.4;background:rgba(79,172,254,.15)}
.sort-correct{border-color:var(--green);background:rgba(100,220,100,.1)}
.sort-wrong{border-color:var(--red);background:rgba(255,71,87,.08);animation:shake .35s ease}

/* ── Match (tap pairs) ── */
.match-grid{
  display:flex;gap:1rem;justify-content:center;
  width:100%;margin-bottom:.8rem;
}
.match-col{display:flex;flex-direction:column;gap:.5rem;flex:0 1 auto;min-width:100px}
.match-item{
  padding:.5rem .9rem;border-radius:10px;
  background:var(--glass);border:2px solid var(--border);
  font-size:.95rem;font-weight:700;color:var(--text);
  cursor:pointer;text-align:center;transition:all .2s;
  user-select:none;-webkit-user-select:none;
}
.match-item:hover{transform:scale(1.03)}
.match-selected{border-color:rgba(79,172,254,.7);background:rgba(79,172,254,.12);box-shadow:0 0 10px rgba(79,172,254,.2)}
.match-wrong{border-color:var(--red);animation:shake .35s ease}
.match-done{
  border-color:var(--green);background:rgba(100,220,100,.1);
  opacity:.7;pointer-events:none;
}

/* ── Memory (flip cards) ── */
.memory-grid{
  display:grid;gap:.45rem;
  width:100%;max-width:340px;margin:0 auto .5rem;
}
.memory-card{
  aspect-ratio:1;border-radius:10px;
  background:var(--glass);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;cursor:pointer;position:relative;
  transition:transform .3s,border-color .3s;
  user-select:none;-webkit-user-select:none;
}
.memory-card:hover{transform:scale(1.05)}
.memory-front,.memory-back{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.4rem;font-weight:800;
  border-radius:8px;transition:opacity .25s;
}
.memory-back{opacity:0}
.memory-card.memory-flipped .memory-front{opacity:0}
.memory-card.memory-flipped .memory-back{opacity:1}
.memory-card.memory-matched{
  border-color:var(--green);background:rgba(100,220,100,.08);
  pointer-events:none;
}
.memory-card.memory-matched .memory-front{opacity:0}
.memory-card.memory-matched .memory-back{opacity:1}

/* ── Pattern (complete sequence) ── */
.pattern-seq{
  font-size:1.6rem;font-weight:800;text-align:center;
  letter-spacing:.3em;margin-bottom:.8rem;
  color:var(--text);
}
.pattern-blank{
  display:inline-block;padding:.1rem .5rem;
  border:2px dashed rgba(255,215,100,.4);border-radius:8px;
  color:rgba(255,215,100,.6);min-width:2rem;text-align:center;
}
.pattern-options{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}

/* ── Word Build (letter tiles) ── */
.word-build-hint{
  font-size:.8rem;font-weight:700;color:rgba(255,255,255,.5);
  text-align:center;margin-bottom:.5rem;
}
.word-build-list{
  display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;
  margin-bottom:.8rem;
}
.word-letter{
  width:44px;height:48px;border-radius:10px;
  background:var(--glass);border:2px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.3rem;font-weight:900;color:var(--text);
  cursor:grab;user-select:none;-webkit-user-select:none;
  transition:all .2s;
}
.word-letter:active{cursor:grabbing}

/* ── Feedback Bar ── */
.feedback-bar{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:1.2rem 1.5rem;width:100%;
  border-radius:18px;
  animation:feedbackSlide .3s cubic-bezier(.4,0,.2,1);
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}
.feedback-bar.feedback-correct{
  flex-direction:row;
  padding:.7rem 1.2rem;
  background:rgba(46,213,115,0.06);
  border-color:rgba(46,213,115,0.12);
}
.feedback-bar.feedback-wrong{
  background:rgba(255,71,87,0.08);
  border:2px solid rgba(255,71,87,0.3);
  box-shadow:0 0 30px rgba(255,71,87,0.12), 0 4px 20px rgba(0,0,0,0.3);
}
.feedback-bar.hidden{display:none}
.feedback-icon{font-size:1.3rem}
.feedback-text{font-size:.85rem;font-weight:700;letter-spacing:0.2px;color:rgba(255,255,255,0.85)}

/* Wrong answer — big prominent block */
.feedback-bar.feedback-wrong .feedback-icon{font-size:2rem}
.feedback-bar.feedback-wrong .feedback-text{
  font-size:1.15rem;
  line-height:1.5;
  text-align:center;
  color:#fff;
}
.feedback-next-btn{
  display:none;
  margin-top:.5rem;
  padding:.7rem 2rem;
  font-family:inherit;
  font-size:1rem;
  font-weight:800;
  color:#fff;
  background:linear-gradient(135deg,rgba(79,172,254,0.2),rgba(0,242,254,0.15));
  border:2px solid rgba(79,172,254,0.35);
  border-radius:50px;
  cursor:pointer;
  transition:all .2s;
  letter-spacing:0.5px;
}
.feedback-next-btn:hover{
  background:linear-gradient(135deg,rgba(79,172,254,0.3),rgba(0,242,254,0.2));
  border-color:rgba(79,172,254,0.5);
  transform:translateY(-2px);
  box-shadow:0 4px 16px rgba(79,172,254,0.2);
}
.feedback-next-btn:active{transform:scale(.97)}
.feedback-bar.feedback-wrong .feedback-next-btn{display:inline-block}
@keyframes feedbackSlide{
  from{opacity:0;transform:translateY(8px) scale(0.98)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* ── Quest Type Input ── */
.quest-input-wrap{
  display:flex;flex-direction:column;gap:.6rem;
  width:100%;max-width:560px;
}
.quest-type-input{
  width:100%;padding:1rem 1.2rem;
  font-family:inherit;font-size:1.4rem;font-weight:700;
  text-align:center;
  background:rgba(255,255,255,0.06);
  border:2px solid rgba(255,255,255,0.15);
  border-radius:16px;color:var(--text);
  outline:none;transition:border-color .2s;
}
.quest-type-input:focus{border-color:rgba(108,99,255,0.5)}
.quest-type-input::placeholder{color:var(--text3);font-weight:400}
.quest-submit-btn{
  padding:.8rem;font-size:1.1rem;border-radius:14px;
}
@keyframes screenIn{
  from{opacity:0;transform:translateX(16px) scale(0.97)}
  to{opacity:1;transform:translateX(0) scale(1)}
}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── Rating Bar ── */
.rating-bar{
  width:100%;padding:.5rem 0;
  animation:fadeUp .3s ease;
}
.rating-bar.hidden{display:none}
.rating-label{
  font-size:.7rem;color:var(--text3);margin-bottom:.4rem;
  font-weight:700;letter-spacing:0.5px;text-align:center;
}
.rating-options{display:flex;gap:.4rem}
.rate-btn{
  flex:1;flex-direction:column;gap:3px;
  padding:.6rem .3rem;font-size:1.1rem;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:14px;color:var(--text);
  transition:all .2s;
}
.rate-btn span{font-size:.5rem;font-weight:700;color:var(--text3);letter-spacing:0.3px}
.rate-btn:hover{
  border-color:rgba(79,172,254,0.3);
  background:rgba(79,172,254,0.06);
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
}
.rate-btn:active{transform:scale(.96)}

/* ===== VICTORY ===== */
#screen-victory{position:relative}
#confetti-canvas{position:fixed;inset:0;pointer-events:none;z-index:50}
.victory-container{
  text-align:center;max-width:480px;z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding:2rem 1.5rem;
}
.victory-icon{font-size:3.5rem;animation:bounce .8s ease infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.victory-title{
  font-size:1.8rem;font-weight:900;
  background:linear-gradient(135deg,var(--yellow),var(--orange));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.victory-reward{font-size:1.4rem;font-weight:900;color:var(--yellow)}
.victory-stats{padding:1rem 1.5rem;font-size:.85rem;line-height:1.8;color:var(--text2);width:100%}
.victory-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center}
.victory-teaser{font-size:.8rem;color:var(--text3);font-weight:600}

/* ===== SHOP ===== */
.shop-cat{
  height:50px;width:auto;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3));
  animation:catBob 2.5s ease-in-out infinite;
}
@keyframes catBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media(min-width:640px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1024px){.shop-grid{grid-template-columns:repeat(4,1fr)}}

.shop-card{
  background:var(--glass2);border:1px solid var(--border);border-radius:var(--r);
  padding:1rem .7rem;text-align:center;cursor:pointer;transition:all .18s;
}
.shop-card:hover{background:var(--glass3);transform:translateY(-3px)}
.shop-card[data-tier="budget"]:hover{border-color:var(--green);box-shadow:0 4px 15px rgba(46,213,115,0.15)}
.shop-card[data-tier="mid"]:hover{border-color:#4facfe;box-shadow:0 4px 15px rgba(79,172,254,0.15)}
.shop-card[data-tier="premium"]:hover{border-color:var(--purple);box-shadow:0 4px 20px rgba(165,94,234,0.2)}
.shop-card[data-tier="luxury"]:hover{border-color:var(--yellow);box-shadow:0 4px 25px rgba(255,211,42,0.2)}
.shop-card.disabled{opacity:.45;cursor:pointer;position:relative;overflow:hidden}
.shop-card.disabled::after{content:'🔒';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.5rem;opacity:.6;pointer-events:none}
.shop-card.disabled .shop-card-icon,
.shop-card.disabled .shop-card-name,
.shop-card.disabled .shop-card-price{filter:blur(2px)}
.shop-card-icon{font-size:2rem;margin-bottom:.3rem}
.shop-card-name{font-weight:700;font-size:.85rem;margin-bottom:.15rem}
.shop-card-price{font-weight:800;font-size:.75rem;color:var(--yellow)}
.shop-history{padding-top:.5rem}
.shop-history h3{font-size:.85rem;color:var(--text3);margin-bottom:.3rem}
#shop-history-list{font-size:.75rem;color:var(--text3);line-height:1.8}

/* ===== MAP ===== */
/* ===== GALAXY MAP ===== */
.galaxy-map{
  position:relative;
  width:100%;
  max-width:960px;
  margin:0 auto;
  padding:0.5rem 0;
}
.galaxy-paths{
  position:absolute;
  top:0;left:0;
  width:100%;height:100%;
  pointer-events:none;
  z-index:1;
  overflow:visible;
}
.galaxy-paths .gpath{
  fill:none;
  stroke:rgba(255,255,255,0.08);
  stroke-width:2;
  stroke-dasharray:8 6;
  stroke-linecap:round;
}
.galaxy-paths .gpath.done{
  stroke:rgba(46,213,115,0.4);
  filter:drop-shadow(0 0 3px rgba(46,213,115,0.3));
}
.galaxy-paths .gpath.active{
  stroke:rgba(255,211,42,0.4);
  stroke-dasharray:10 5;
  filter:drop-shadow(0 0 5px rgba(255,211,42,0.4));
  animation:pathPulse 2s ease-in-out infinite;
}
@keyframes pathPulse{0%,100%{opacity:.5;stroke-dashoffset:0}50%{opacity:1;stroke-dashoffset:15}}

.galaxy-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0.8rem 0;
  padding:0.5rem 0;
}

.galaxy-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0.3rem;
  cursor:pointer;
  transition:transform .3s, filter .3s;
  position:relative;
  padding:0.5rem;
  border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(255,255,255,0.02),transparent);
  border:1px solid transparent;
}
.galaxy-node:not(.locked):hover{
  background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));
  border-color:rgba(255,255,255,0.06);
}
.galaxy-node:hover{
  transform:scale(1.06);
}
.galaxy-node.locked{
  filter:grayscale(0.7) brightness(0.35);
  cursor:not-allowed;
}
.galaxy-node.locked:hover{transform:none}
.galaxy-node.locked .galaxy-img{animation:none}
.galaxy-node.locked .galaxy-label{opacity:.35}
.galaxy-node.locked .galaxy-progress{opacity:.25}

.galaxy-node.done .galaxy-img{
  filter:drop-shadow(0 0 15px rgba(46,213,115,0.5));
}
.galaxy-node.current .galaxy-img{
  filter:drop-shadow(0 0 22px rgba(255,211,42,0.6));
  animation:galaxyPulse 2.5s ease-in-out infinite;
}
@keyframes galaxyPulse{
  0%,100%{filter:drop-shadow(0 0 18px rgba(255,211,42,0.4));transform:translateY(0)}
  50%{filter:drop-shadow(0 0 30px rgba(255,211,42,0.7));transform:translateY(-8px)}
}

.galaxy-img{
  width:90%;
  max-width:260px;
  max-height:200px;
  object-fit:contain;
  height:auto;
  transition:filter .3s;
}

.galaxy-label{
  font-size:.72rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:var(--text);
  text-align:center;
  opacity:.9;
  text-shadow:0 0 12px rgba(0,0,0,0.7);
  margin-top:0;
  padding:.15rem .5rem;
  border-radius:6px;
  background:rgba(0,0,0,0.2);
}
.galaxy-node.current .galaxy-label{color:var(--yellow)}
.galaxy-node.done .galaxy-label{color:var(--green)}

.galaxy-progress{
  font-size:.62rem;
  color:var(--text3);
  font-weight:700;
  letter-spacing:.3px;
}
.galaxy-node.done .galaxy-progress{color:var(--green)}
.galaxy-node.current .galaxy-progress{color:var(--yellow)}

.galaxy-lock{
  position:absolute;
  top:40%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:2rem;
  filter:drop-shadow(0 0 10px rgba(0,0,0,0.9));
  opacity:.6;
}

/* Explicit ordering for snake path: row1=1,2,3 row2=6,5,4 row3=7,8,9 */
.galaxy-grid .galaxy-node:nth-child(1){order:1}
.galaxy-grid .galaxy-node:nth-child(2){order:2}
.galaxy-grid .galaxy-node:nth-child(3){order:3}
.galaxy-grid .galaxy-node:nth-child(4){order:6}
.galaxy-grid .galaxy-node:nth-child(5){order:5}
.galaxy-grid .galaxy-node:nth-child(6){order:4}
.galaxy-grid .galaxy-node:nth-child(7){order:7}
.galaxy-grid .galaxy-node:nth-child(8){order:8}
.galaxy-grid .galaxy-node:nth-child(9){order:9}

/* Mobile */
@media(max-width:480px){
  .galaxy-grid{gap:0.3rem 0}
  .galaxy-img{max-width:160px}
  .galaxy-label{font-size:.55rem;letter-spacing:.8px}
  .galaxy-lock{font-size:1.5rem}
}
@media(min-width:769px){
  .galaxy-grid{gap:0.8rem 0}
  .galaxy-img{max-width:280px}
  .galaxy-label{font-size:.75rem}
}

/* ===== GALAXY DETAIL ===== */
#screen-galaxy .page-wrap{
  max-width:100%;
  padding:0 1.5rem;
}
.galaxy-detail-header{
  text-align:center;
  padding:0.8rem 0;
  position:relative;
}
.gd-back{
  position:absolute;
  left:0;top:0.8rem;
}
.gd-title-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
}
.gd-title{
  font-size:1.6rem;
  font-weight:900;
  background:linear-gradient(135deg,var(--yellow),#a78bfa);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-transform:uppercase;
  letter-spacing:3px;
}
.gd-wallet{
  margin-top:.4rem;
  font-size:.85rem;
  font-weight:700;
  color:var(--yellow);
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  background:rgba(255,211,42,0.08);
  padding:.3rem 1rem;
  border-radius:20px;
  border:1px solid rgba(255,211,42,0.15);
}

/* 4 puzzle boards — full width grid */
.gd-boards{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
  width:100%;
  margin:1rem auto;
}

/* Single puzzle board card */
.gd-board{
  background:linear-gradient(145deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:1.2rem;
  position:relative;
  transition:all .3s;
  backdrop-filter:blur(10px);
}
.gd-board:hover{
  border-color:rgba(255,255,255,0.12);
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  transform:translateY(-2px);
}
.gd-board.gd-board-complete{
  border-color:rgba(46,213,115,0.3);
  box-shadow:0 0 30px rgba(46,213,115,0.1);
}
.gd-board-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:0.8rem;
}
.gd-board-name{
  font-size:.85rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:1.5px;
  color:rgba(255,255,255,0.7);
}
.gd-board-complete .gd-board-name{color:var(--green)}
.gd-board-progress{
  font-size:.7rem;
  font-weight:700;
  color:var(--muted);
  background:rgba(255,255,255,0.05);
  padding:.25rem .7rem;
  border-radius:20px;
}
.gd-board-complete .gd-board-progress{color:var(--green);background:rgba(46,213,115,0.1)}

/* Progress bar under header */
.gd-board-bar{
  height:3px;
  background:rgba(255,255,255,0.06);
  border-radius:3px;
  margin-bottom:0.8rem;
  overflow:hidden;
}
.gd-board-bar-fill{
  height:100%;
  border-radius:3px;
  background:linear-gradient(90deg, var(--yellow), #a78bfa);
  transition:width .6s cubic-bezier(.4,0,.2,1);
  box-shadow:0 0 8px rgba(255,211,42,0.4);
}
.gd-board-complete .gd-board-bar-fill{
  background:linear-gradient(90deg, var(--green), #66bb6a);
  box-shadow:0 0 8px rgba(46,213,115,0.4);
}

/* Puzzle grid inside a board (5 cols x 4 rows = 20 cells) */
.gd-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:4px;
  border-radius:10px;
  overflow:hidden;
}

/* Puzzle cell */
.gd-cell{
  aspect-ratio:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  transition:all .25s;
  border-radius:6px;
  cursor:default;
}

/* Revealed piece */
.gd-cell.gd-done{
  background-color:rgba(0,0,0,0.15);
}
.gd-cell.gd-done:hover{
  transform:scale(1.06);
  z-index:2;
  box-shadow:0 0 16px rgba(255,255,255,0.12);
}
.gd-cell-check{
  font-size:.6rem;
  color:rgba(46,213,115,0.8);
  text-shadow:0 0 6px rgba(46,213,115,0.5);
  position:absolute;
  bottom:3px;right:4px;
}

/* Placeable cell (has puzzles available) */
.gd-cell.gd-placeable{
  background:rgba(255,211,42,0.04);
  border:2px solid rgba(255,211,42,0.2);
  cursor:pointer;
  animation:gdCellPulse 2.5s ease-in-out infinite;
}
.gd-cell.gd-placeable:hover{
  border-color:rgba(255,211,42,0.6);
  box-shadow:0 0 20px rgba(255,211,42,0.2);
  transform:scale(1.08);
  background:rgba(255,211,42,0.08);
}
@keyframes gdCellPulse{
  0%,100%{box-shadow:0 0 5px rgba(255,211,42,0.05)}
  50%{box-shadow:0 0 15px rgba(255,211,42,0.15)}
}
.gd-cell-plus{
  font-size:1.4rem;
  color:rgba(255,211,42,0.4);
  font-weight:200;
  line-height:1;
}

/* Locked cell — dark silhouette */
.gd-cell.gd-locked{
  background-image:var(--board-img);
  background-size:500% 400%;
  filter:brightness(0.12) saturate(0.3);
  border-radius:6px;
}
.gd-cell-lock{
  font-size:.55rem;
  opacity:.12;
  filter:brightness(3);
}

/* Completed board */
.gd-board-complete .gd-grid{
  box-shadow:0 0 30px rgba(46,213,115,0.15);
  border-radius:10px;
}
.gd-board-badge{
  position:absolute;
  top:-10px;right:-10px;
  font-size:1.6rem;
  filter:drop-shadow(0 0 8px rgba(46,213,115,0.6));
  z-index:3;
}

/* Reveal overlay */
.gd-reveal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.9);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  animation:gdFadeIn .4s ease;
}
.gd-reveal-overlay.hidden{display:none}
@keyframes gdFadeIn{from{opacity:0}to{opacity:1}}
.gd-reveal-card{
  text-align:center;
  animation:gdRevealPop .5s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes gdRevealPop{from{transform:scale(0.5);opacity:0}to{transform:scale(1);opacity:1}}
.gd-reveal-title{
  font-size:1.6rem;
  font-weight:900;
  color:var(--yellow);
  margin-bottom:1.2rem;
  text-shadow:0 0 20px rgba(255,211,42,0.3);
}
.gd-reveal-img{
  max-width:min(85vw,500px);
  max-height:55vh;
  border-radius:16px;
  box-shadow:0 0 60px rgba(255,211,42,0.2);
  margin-bottom:1rem;
}
.gd-reveal-name{
  font-size:1rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:1.2rem;
}

/* Mobile: stack vertically */
@media(max-width:600px){
  #screen-galaxy .page-wrap{padding:0 .8rem}
  .gd-title{font-size:1.2rem;letter-spacing:2px}
  .gd-boards{grid-template-columns:1fr;gap:1rem}
  .gd-board{padding:.8rem}
  .gd-grid{gap:3px}
  .gd-cell{border-radius:4px}
  .gd-cell-plus{font-size:1.1rem}
}
/* Tablet */
@media(min-width:601px) and (max-width:1024px){
  #screen-galaxy .page-wrap{padding:0 1.2rem}
  .gd-boards{gap:1.2rem}
}
/* Large desktop */
@media(min-width:1400px){
  .gd-boards{gap:2rem}
  .gd-board{padding:1.5rem}
  .gd-grid{gap:5px}
  .gd-cell{border-radius:8px}
  .gd-board-name{font-size:.95rem}
}

/* ===== STATS ===== */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem}
@media(min-width:768px){.stats-grid{grid-template-columns:repeat(3,1fr)}}

.stat-card{
  background:var(--glass2);border:1px solid var(--border);border-radius:var(--r);
  padding:1.2rem;text-align:center;transition:transform .2s;
}
.stat-card:hover{transform:translateY(-2px)}
.stat-clickable{cursor:pointer}
.stat-clickable:active{transform:scale(.96)}
.stat-card-value{font-size:1.6rem;font-weight:900;margin-bottom:.15rem}
.stat-card-label{font-size:.65rem;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px}
.stat-mini .stat-card-value{font-size:1.2rem}

.stats-section-title{
  grid-column:1/-1;
  font-size:1rem;font-weight:900;color:var(--text);
  padding:.5rem 0 0;
}

/* ===== MEDALS ===== */
.medals-grid{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(90px,1fr));
  gap:.5rem;
}
@media(min-width:768px){.medals-grid{grid-template-columns:repeat(5,1fr)}}

.medal{
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  padding:.7rem .3rem;border-radius:var(--r);
  text-align:center;transition:all .2s;
  position:relative;
}
.medal-locked{
  background:var(--glass);border:1px solid var(--border);
  opacity:.4;filter:grayscale(1);
}
.medal-locked .medal-icon{font-size:1.5rem;filter:brightness(0.5)}
.medal-locked .medal-name{font-size:.55rem;font-weight:600;color:var(--text3)}

.medal-unlocked{
  background:var(--glass2);border:1px solid var(--border2);
  position:relative;overflow:visible;
}
.medal-unlocked .medal-icon{font-size:1.8rem}
.medal-unlocked .medal-name{font-size:.6rem;font-weight:700;color:var(--text)}

.medal-unlocked::after{
  content:'';position:absolute;inset:0;
  border-radius:var(--r);
  box-shadow:0 0 8px rgba(79,172,254,0.08);
  animation:medalGlow 4s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes medalGlow{0%{opacity:.3}100%{opacity:.7}}
.medal-unlocked:hover{transform:scale(1.05)}

/* ===== INPUT ===== */
.input-wrap{display:flex;flex-direction:column;gap:.6rem;align-items:center;width:100%}
.answer-input{
  font-family:inherit;font-size:1.4rem;font-weight:800;text-align:center;
  padding:.75rem 1.2rem;
  border:2px solid rgba(255,255,255,0.1);border-radius:16px;
  background:rgba(255,255,255,0.04);color:var(--text);
  width:100%;max-width:220px;outline:none;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  letter-spacing:2px;
}
.answer-input:focus{
  border-color:rgba(79,172,254,0.5);
  box-shadow:0 0 20px rgba(79,172,254,0.15), 0 0 4px rgba(79,172,254,0.1);
  background:rgba(79,172,254,0.04);
}
.answer-input.input-correct{
  border-color:#2ed573;
  background:rgba(46,213,115,0.08);
  box-shadow:0 0 16px rgba(46,213,115,0.15);
}
.answer-input.input-wrong{
  border-color:var(--red);
  background:rgba(255,71,87,0.06);
  box-shadow:0 0 12px rgba(255,71,87,0.1);
}
.btn-submit{
  font-family:inherit;font-size:.9rem;font-weight:800;padding:.65rem 1.6rem;
  background:linear-gradient(135deg,#4facfe,#00f2fe);
  color:#fff;border:none;border-radius:14px;cursor:pointer;
  transition:all .2s cubic-bezier(.4,0,.2,1);
  box-shadow:0 4px 14px rgba(79,172,254,0.25);
  letter-spacing:0.5px;
}
.btn-submit:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(79,172,254,0.35);
}
.btn-submit:active{transform:scale(.97);box-shadow:0 2px 8px rgba(79,172,254,0.2)}
.btn-submit:disabled{opacity:.4;box-shadow:none}
.tf-btn{font-size:1.05rem!important}

/* ===== AUDIO ===== */
.audio-player{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.5rem}
.audio-status{font-size:.65rem;color:var(--text3);font-weight:600}
.audio-next{margin-top:.5rem}
.audio-task-response{margin-top:.7rem;animation:fadeUp .25s ease}

/* ===== SURVEY ===== */
.report-section{width:100%;max-width:480px;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.survey-progress{font-size:.7rem;color:var(--text3);font-weight:700}
.survey-card{padding:1.2rem;animation:popUp .25s ease}
.survey-question{font-size:.95rem;font-weight:800;margin-bottom:.7rem;line-height:1.5}
.survey-options{display:flex;flex-direction:column;gap:.4rem}
.survey-opt{
  font-family:inherit;font-size:.8rem;font-weight:700;padding:.6rem .9rem;text-align:left;
  background:var(--glass);border:2px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);cursor:pointer;transition:all .15s;
}
.survey-opt:hover{border-color:var(--blue);background:rgba(79,172,254,0.06)}
.survey-opt.selected{border-color:var(--green);background:rgba(46,213,115,0.08)}
.survey-input{
  font-family:inherit;font-size:.8rem;font-weight:600;padding:.5rem .7rem;width:100%;
  background:var(--glass);border:2px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);outline:none;resize:vertical;
}
.survey-input:focus{border-color:var(--blue)}
.survey-nav{display:flex;gap:.6rem;justify-content:space-between;margin-top:.5rem}
.survey-done{text-align:center;padding:.8rem}
.survey-done-icon{font-size:2rem;margin-bottom:.3rem}
.survey-done-text{font-size:.9rem;font-weight:700;color:var(--green)}

/* ===== PARENT SETUP ===== */
.setup-card{padding:1.4rem}
.setup-question{font-size:1rem;font-weight:800;margin-bottom:1rem;line-height:1.5}
.setup-options{display:flex;flex-direction:column;gap:.4rem}
.setup-opt{
  font-family:inherit;font-size:.85rem;font-weight:700;padding:.7rem .9rem;text-align:left;
  background:var(--glass);border:2px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);cursor:pointer;transition:all .15s;
}
.setup-opt:hover{border-color:var(--blue);background:rgba(79,172,254,0.06)}
.setup-opt.selected{border-color:var(--green);background:rgba(46,213,115,0.08)}
.setup-opt-input{
  font-family:inherit;font-size:.85rem;padding:.6rem .8rem;width:100%;
  background:var(--glass);border:2px solid var(--border);border-radius:var(--r-sm);
  color:var(--text);outline:none;
}
.setup-opt-input:focus{border-color:var(--blue)}
.setup-nav{display:flex;gap:.6rem;justify-content:space-between}

/* ===== ONBOARDING ===== */
.onb-prestart{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  height:100%;gap:1rem;text-align:center;padding:2rem;
}
.onb-hero-img{
  width:98px;height:auto;
  filter:drop-shadow(0 0 30px rgba(79,172,254,0.3)) drop-shadow(0 10px 20px rgba(0,0,0,0.4));
  animation:heroFloat 3s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-12px)}
}
.onb-prestart-title{font-size:2.2rem;font-weight:900;
  background:linear-gradient(135deg,#fff,#ccc);-webkit-background-clip:text;
  -webkit-text-fill-color:transparent;background-clip:text}
.onb-prestart-sub{font-size:.95rem;color:var(--text2);font-weight:700}
.onb-play-btn{font-size:1.1rem!important;padding:.9rem 2.5rem!important}

/* Spinner */
.onb-spinner{
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.onb-spinner-ring{
  width:40px;height:40px;
  border:3px solid #e5e7eb;
  border-top-color:#6366f1;
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.onb-spinner-text{
  font-size:.85rem;color:#9ca3af;font-weight:600;
}

/* Onboarding video */
.onb-video-container{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:#ffffff;
  z-index:10;
}
.onb-video-container video{
  border-radius:0;
  background:#ffffff;
}
.onb-video-hint{
  position:absolute;bottom:40px;left:50%;transform:translateX(-50%);
  font-size:0.75rem;font-weight:700;color:rgba(255,255,255,0.4);
  letter-spacing:0.1em;text-transform:uppercase;
}

.onb-container{
  width:100%;max-width:520px;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  padding:1.5rem;
}

/* Astro + speech bubble */
.onb-slide{
  display:flex;align-items:flex-end;gap:.8rem;width:100%;
  animation:popUp .3s ease;
}
@keyframes popUp{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.onb-astro{
  width:100px;height:auto;flex-shrink:0;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3));
  animation:astroTalk .8s ease-in-out infinite alternate;
}
@keyframes astroTalk{
  0%{transform:translateY(0) rotate(0)}
  100%{transform:translateY(-4px) rotate(2deg)}
}
.onb-speech{
  flex:1;padding:1.2rem;position:relative;
  border-radius:var(--r) var(--r) var(--r) 4px;
}
.onb-speech::before{
  content:'';position:absolute;left:-8px;bottom:16px;
  width:0;height:0;
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  border-right:8px solid var(--border2);
}
.onb-speech-text{
  font-size:1rem;font-weight:700;line-height:1.6;color:var(--text);
}
.onb-audio-bar{
  display:flex;align-items:center;gap:.4rem;margin-top:.5rem;
}
.onb-audio-status{
  font-size:.65rem;color:var(--text3);font-weight:600;
}

/* Visual area (icons for each slide) */
.onb-visual-area{
  font-size:3rem;min-height:80px;
  display:flex;align-items:center;justify-content:center;gap:.8rem;
  animation:fadeIn .3s ease;
}
.onb-visual-area img{max-height:80px;border-radius:var(--r)}

.onb-dots{display:flex;gap:.5rem}
.onb-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--glass);border:1px solid var(--border);
  transition:all .25s;
}
.onb-dot.active{
  background:var(--yellow);border-color:var(--yellow);
  transform:scale(1.3);
  box-shadow:0 0 10px rgba(255,211,42,0.3);
}
.onb-nav{display:flex;gap:.8rem;width:100%}
.onb-nav .btn{flex:1}

/* ===== MODAL ===== */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);
  display:flex;align-items:center;justify-content:center;z-index:200;backdrop-filter:blur(6px)}
.modal-overlay.hidden{display:none}
.modal-card{padding:1.8rem;max-width:360px;width:90%;text-align:center}
.modal-body{font-size:1rem;font-weight:700;margin-bottom:1.2rem;line-height:1.4}
.modal-actions{display:flex;gap:.6rem;justify-content:center}

/* ===== POPUP ===== */
.info-popup{position:fixed;inset:0;background:rgba(0,0,0,0.6);
  display:flex;align-items:center;justify-content:center;z-index:500;
  cursor:pointer;backdrop-filter:blur(6px);animation:fadeIn .15s ease}
.info-popup-card{padding:2.5rem 1.5rem 2rem;max-width:380px;width:90%;text-align:center;cursor:default;position:relative;animation:popUp .25s ease;background:var(--bg2);border:1px solid var(--border2)}
.info-popup-close{
  position:absolute;top:.6rem;right:.6rem;
  width:36px;height:36px;border-radius:50%;
  background:var(--glass2);border:1px solid var(--border);
  color:var(--text2);font-size:1.2rem;font-weight:700;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:all .15s;z-index:10;
}
.info-popup-close:hover{color:var(--text);background:var(--glass3);transform:scale(1.1)}
.info-popup-avatar{width:65px;height:65px;border-radius:50%;object-fit:cover;border:2px solid var(--blue);margin-bottom:.4rem}
.info-popup-title{font-size:1.1rem;font-weight:900;margin-bottom:.2rem}
.info-popup-subtitle{font-size:.7rem;color:var(--text3);margin-bottom:.5rem}
.info-popup-stat{font-size:1.6rem;font-weight:900;margin-bottom:.1rem}
.info-popup-label{font-size:.65rem;color:var(--text3);font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.info-popup-bar{width:100%;height:6px;background:var(--glass);border-radius:50px;margin:.4rem 0;overflow:hidden}
.info-popup-bar-fill{height:100%;border-radius:50px;transition:width .3s}
.info-popup-detail{font-size:.75rem;color:var(--text2);line-height:1.5;margin-top:.4rem}

/* ===== STAR BURST ===== */
/* Star burst — anchored to reward badge */
.star-burst{
  position:absolute;
  pointer-events:none;z-index:300;
  font-size:1.1rem;font-weight:900;color:#ffd32a;
  white-space:nowrap;
  text-shadow:0 0 8px rgba(255,211,42,0.5);
}
.star-burst.hidden{display:none}

/* Burst particles around reward badge */
.burst-ring{
  position:absolute;top:50%;left:50%;
  width:60px;height:60px;
  transform:translate(-50%,-50%) scale(0);
  border-radius:50%;
  border:2px solid rgba(255,211,42,0.4);
  pointer-events:none;
  animation:burstRing .7s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes burstRing{
  0%{transform:translate(-50%,-50%) scale(0);opacity:1;border-width:3px}
  100%{transform:translate(-50%,-50%) scale(2.5);opacity:0;border-width:0.5px}
}
.burst-text{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.6);
  animation:burstText .8s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes burstText{
  0%{transform:translate(-50%,-50%) scale(0.6);opacity:0}
  30%{transform:translate(-50%,-50%) scale(1.3);opacity:1}
  60%{transform:translate(-50%,-80%) scale(1.1);opacity:1}
  100%{transform:translate(-50%,-120%) scale(0.9);opacity:0}
}
.burst-sparkle{
  position:absolute;width:4px;height:4px;border-radius:50%;
  background:#ffd32a;pointer-events:none;
  animation:burstSparkle .6s ease-out forwards;
}
@keyframes burstSparkle{
  0%{transform:translate(0,0) scale(1);opacity:1}
  100%{transform:translate(var(--dx,10px),var(--dy,-10px)) scale(0);opacity:0}
}
@keyframes rewardPop{
  0%{transform:scale(1)}
  40%{transform:scale(1.25)}
  70%{transform:scale(0.95)}
  100%{transform:scale(1)}
}

/* ===== BOTS / ACHIEVEMENTS ===== */
.bots-progress-wrap{width:100%}
.bots-progress-label{
  font-size:.85rem;font-weight:800;color:var(--text2);margin-bottom:.4rem;
}
.bots-progress-label span{color:var(--yellow)}
.bots-progress-track{
  width:100%;height:10px;background:var(--glass2);
  border:1px solid var(--border);border-radius:50px;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(0,0,0,0.3);
}
.bots-progress-fill{
  height:100%;width:0%;border-radius:50px;
  background:linear-gradient(90deg,var(--green),var(--blue),var(--purple));
  transition:width .6s ease;
  box-shadow:0 0 12px rgba(46,213,115,0.25),0 0 4px rgba(79,172,254,0.2);
  position:relative;
}
.bots-progress-fill::after{
  content:'';position:absolute;inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,0.2),transparent);
}

.bots-filters{
  display:flex;gap:.35rem;flex-wrap:wrap;
}
.btn-filter{
  font-size:.7rem;padding:.38rem .85rem;
  background:var(--glass);border:1px solid var(--border);
  color:var(--text3);border-radius:50px;
  transition:all .2s;
}
.btn-filter:hover{color:var(--text);background:var(--glass2);border-color:var(--border2)}
.btn-filter.active{color:var(--text);background:var(--glass3);border-color:var(--border3);box-shadow:0 2px 10px rgba(79,172,254,0.08)}
.btn-filter[data-rarity="rare"].active{color:var(--blue);border-color:rgba(79,172,254,0.3);background:rgba(79,172,254,0.08)}
.btn-filter[data-rarity="epic"].active{color:var(--purple);border-color:rgba(165,94,234,0.3);background:rgba(165,94,234,0.08)}
.btn-filter[data-rarity="legendary"].active{color:var(--yellow);border-color:rgba(255,211,42,0.3);background:rgba(255,211,42,0.08)}

.bots-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(100px,1fr));
  gap:.7rem;
  padding-bottom:2rem;
}
@media(min-width:768px){.bots-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}
@media(min-width:1200px){.bots-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}}

.bot-cell{
  aspect-ratio:1;border-radius:var(--r);position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  cursor:pointer;transition:all .25s ease;
  border:2px solid var(--border);
  background:linear-gradient(135deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
  padding:.3rem;
}
.bot-cell:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(0,0,0,0.3)}

/* rarity borders + tinted backgrounds */
.bot-cell[data-rarity="common"]{border-color:var(--border2);background:linear-gradient(135deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01))}
.bot-cell[data-rarity="rare"]{border-color:rgba(79,172,254,0.3);background:linear-gradient(135deg,rgba(79,172,254,0.06),rgba(79,172,254,0.01))}
.bot-cell[data-rarity="epic"]{border-color:rgba(165,94,234,0.35);background:linear-gradient(135deg,rgba(165,94,234,0.06),rgba(165,94,234,0.01))}
.bot-cell[data-rarity="legendary"]{border-color:rgba(255,211,42,0.35);background:linear-gradient(135deg,rgba(255,211,42,0.06),rgba(255,211,42,0.01))}

/* unlocked glow */
.bot-cell.unlocked[data-rarity="common"]:hover{box-shadow:0 0 18px rgba(255,255,255,0.1),inset 0 1px 0 rgba(255,255,255,0.05)}
.bot-cell.unlocked[data-rarity="rare"]:hover{box-shadow:0 0 24px rgba(79,172,254,0.2),inset 0 1px 0 rgba(79,172,254,0.08)}
.bot-cell.unlocked[data-rarity="epic"]:hover{box-shadow:0 0 24px rgba(165,94,234,0.25),inset 0 1px 0 rgba(165,94,234,0.08)}
.bot-cell.unlocked[data-rarity="legendary"]:hover{box-shadow:0 0 30px rgba(255,211,42,0.3),inset 0 1px 0 rgba(255,211,42,0.1)}

/* rarity corner badge */
.bot-rarity{
  position:absolute;top:4px;right:4px;
  font-size:.48rem;font-weight:800;text-transform:uppercase;letter-spacing:.6px;
  padding:2px 6px;border-radius:50px;
  background:rgba(0,0,0,0.5);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.06);
}
.bot-cell[data-rarity="common"] .bot-rarity{color:#aaa}
.bot-cell[data-rarity="rare"] .bot-rarity{color:var(--blue)}
.bot-cell[data-rarity="epic"] .bot-rarity{color:var(--purple)}
.bot-cell[data-rarity="legendary"] .bot-rarity{color:var(--yellow)}

.bot-img{
  width:65%;height:auto;object-fit:contain;
  transition:transform .2s;
}
.bot-cell:hover .bot-img{transform:scale(1.08)}

/* locked state */
.bot-cell.locked{opacity:.7}
.bot-cell.locked .bot-img{filter:brightness(0.6)}
/* Sequential unlock states */
.bot-cell.next-unlock{
  opacity:1;
  border:2px solid rgba(138,43,226,0.6);
  box-shadow:0 0 18px rgba(138,43,226,0.25);
  animation:botNextPulse 2s ease-in-out infinite;
}
.bot-cell.next-unlock.can-afford{
  border-color:rgba(138,43,226,0.8);
  box-shadow:0 0 22px rgba(138,43,226,0.35);
}
.bot-cell.next-unlock.cant-afford{
  border-color:rgba(138,43,226,0.4);
}
.bot-cell.next-unlock .bot-img{filter:brightness(0.7) saturate(0.5)}
.bot-cell.future-locked{
  opacity:.4;
  filter:grayscale(.4);
  pointer-events:auto;
  cursor:not-allowed;
}
.bot-cell.future-locked .bot-img{filter:brightness(0.4) grayscale(.6)}
.bot-cell.future-locked .bot-price{color:var(--text3);font-size:.55rem}
@keyframes botNextPulse{
  0%,100%{box-shadow:0 0 14px rgba(138,43,226,0.2)}
  50%{box-shadow:0 0 24px rgba(138,43,226,0.4)}
}
.bot-price{
  font-size:.6rem;font-weight:800;color:#8a2be2;
  margin-top:.15rem;
}
.bot-name{
  font-size:.6rem;font-weight:700;color:var(--text);
  text-align:center;margin-top:.2rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;opacity:.9;
}
.bot-cell.locked .bot-name{color:var(--text3)}

/* ===== EPIC UNLOCK ANIMATION ===== */

/* Phase 1: shake & rise */
@keyframes unlockShake{
  0%{transform:translateY(0) rotate(0)}
  10%{transform:translateY(-2px) rotate(-2deg)}
  20%{transform:translateY(0) rotate(2deg)}
  30%{transform:translateY(-3px) rotate(-3deg)}
  40%{transform:translateY(0) rotate(3deg)}
  50%{transform:translateY(-5px) rotate(-2deg)}
  60%{transform:translateY(-8px) rotate(1deg)}
  70%{transform:translateY(-12px) rotate(0)}
  80%{transform:translateY(-15px) rotate(0) scale(1.05)}
  90%{transform:translateY(-15px) rotate(0) scale(1.1)}
  100%{transform:translateY(-15px) rotate(0) scale(1.15)}
}

/* Phase 2: burst flash */
@keyframes unlockBurst{
  0%{transform:translateY(-15px) scale(1.15);filter:brightness(1)}
  30%{transform:translateY(-15px) scale(1.3);filter:brightness(3)}
  50%{transform:translateY(-15px) scale(1.4);filter:brightness(5)}
  70%{transform:translateY(0) scale(1.1);filter:brightness(2)}
  100%{transform:translateY(0) scale(1);filter:brightness(1)}
}

/* Phase 3: glow ring */
@keyframes unlockGlow{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
  20%{box-shadow:0 0 30px 10px rgba(255,255,255,0.6),0 0 60px 20px rgba(255,255,255,0.3)}
  50%{box-shadow:0 0 40px 15px rgba(255,255,255,0.4),0 0 80px 30px rgba(255,255,255,0.15)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}
}

/* Rarity-specific glow colors */
.bot-cell.unlocking[data-rarity="common"]{--glow-color:rgba(255,255,255,0.5)}
.bot-cell.unlocking[data-rarity="rare"]{--glow-color:rgba(79,172,254,0.6)}
.bot-cell.unlocking[data-rarity="epic"]{--glow-color:rgba(165,94,234,0.7)}
.bot-cell.unlocking[data-rarity="legendary"]{--glow-color:rgba(255,211,42,0.8)}

.bot-cell.unlocking{
  animation:unlockShake 0.8s ease forwards;
  z-index:10;
  pointer-events:none;
}
.bot-cell.unlocking-burst{
  animation:unlockBurst 0.6s ease forwards;
  z-index:10;
  pointer-events:none;
}
.bot-cell.unlocking-burst::before{
  content:'';position:absolute;inset:-8px;
  border-radius:var(--r);
  animation:unlockGlow 0.8s ease forwards;
  pointer-events:none;
}

/* Particles */
.unlock-particle{
  position:absolute;width:6px;height:6px;
  border-radius:50%;pointer-events:none;z-index:20;
  animation:particleFly 0.7s ease-out forwards;
}
@keyframes particleFly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--px),var(--py)) scale(0)}
}

/* Reveal image */
@keyframes revealBot{
  0%{opacity:0;transform:scale(0.3) rotate(-10deg)}
  60%{opacity:1;transform:scale(1.15) rotate(3deg)}
  80%{transform:scale(0.95) rotate(-1deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}
.bot-cell .bot-img.revealing{
  animation:revealBot 0.5s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* ===== PAGE TOOLBAR (back + narrator) ===== */
.page-toolbar{
  display:flex;align-items:center;gap:.5rem;width:100%;
}
.toolbar-back{
  display:inline-flex;align-items:center;justify-content:center;gap:.3rem;
  padding:.5rem .9rem;align-self:stretch;
  background:linear-gradient(135deg,rgba(11,13,26,0.92),rgba(24,28,51,0.92));
  backdrop-filter:blur(16px);
  border:1px solid rgba(79,172,254,0.1);
  border-radius:var(--r);
  cursor:pointer;transition:all .2s;
  font-family:inherit;font-size:.8rem;font-weight:700;
  color:var(--text2);user-select:none;
}
.toolbar-back:hover{background:var(--glass3);color:var(--text);transform:translateY(-1px)}
.toolbar-back:active{transform:scale(.97)}

.toolbar-stars{
  display:inline-flex;align-items:center;gap:.3rem;align-self:stretch;
  padding:.5rem .9rem;margin-left:auto;
  background:linear-gradient(135deg,rgba(11,13,26,0.92),rgba(24,28,51,0.92));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,211,42,0.15);
  border-radius:var(--r);
  font-size:.9rem;font-weight:800;color:var(--yellow);
}

/* ===== PAGE NARRATOR ===== */
.narrator{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.4rem 1.2rem .4rem .4rem;
  background:linear-gradient(135deg,rgba(11,13,26,0.92),rgba(24,28,51,0.92));
  backdrop-filter:blur(16px);
  border:1px solid rgba(79,172,254,0.1);
  border-radius:var(--r);
  cursor:pointer;transition:all .25s ease;
  user-select:none;-webkit-user-select:none;
}
.narrator:hover{
  background:var(--glass3);border-color:var(--border3);
  transform:translateY(-2px);box-shadow:0 6px 20px rgba(79,172,254,0.12);
}
.narrator:active{transform:scale(.97)}

.narrator-cat{
  width:48px;height:48px;object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.3));
  transition:transform .25s;
}
.narrator:hover .narrator-cat{transform:scale(1.08)}
.narrator.playing .narrator-cat{animation:catTalk 0.6s ease-in-out infinite}
@keyframes catTalk{
  0%,100%{transform:scale(1) rotate(0deg)}
  25%{transform:scale(1.05) rotate(-3deg)}
  75%{transform:scale(1.05) rotate(3deg)}
}

.narrator-body{display:flex;flex-direction:column;gap:.1rem}
.narrator-label{
  font-size:.8rem;font-weight:800;color:var(--text);
  transition:all .2s;
}
.narrator-hint{
  font-size:.6rem;font-weight:600;color:var(--text3);
  transition:all .2s;
}

.narrator-waves{
  display:none;align-items:center;gap:2px;height:18px;margin-left:auto;
}
.narrator-waves span{
  display:block;width:3px;border-radius:3px;
  background:var(--blue);
  animation:wave 1s ease-in-out infinite;
}
.narrator-waves span:nth-child(1){height:5px;animation-delay:0s}
.narrator-waves span:nth-child(2){height:10px;animation-delay:.1s}
.narrator-waves span:nth-child(3){height:16px;animation-delay:.2s}
.narrator-waves span:nth-child(4){height:10px;animation-delay:.3s}
.narrator-waves span:nth-child(5){height:5px;animation-delay:.4s}
@keyframes wave{
  0%,100%{transform:scaleY(.4);opacity:.5}
  50%{transform:scaleY(1);opacity:1}
}

/* playing state */
.narrator.playing{
  background:rgba(79,172,254,0.08);
  border-color:rgba(79,172,254,0.25);
  box-shadow:0 0 20px rgba(79,172,254,0.1);
}
.narrator.playing .narrator-label{color:var(--blue)}
.narrator.playing .narrator-hint{color:var(--blue);opacity:.7}
.narrator.playing .narrator-waves{display:flex}

/* ===== DAILY LOGIN PAGE ===== */
.daily-page{
  --daily-stage-w:360px;
  --daily-reward-w:300px;
  --daily-reward-gap:.6rem;
  --daily-reward-min-h:120px;
  min-height:calc(100vh - var(--nav-h) - 3rem);
  justify-content:center;
  gap:1rem;
}
.daily-page .page-header{margin-bottom:.1rem}
.daily-page-toolbar{
  justify-content:center;
  flex-wrap:wrap;
  max-width:340px;
  margin-bottom:.15rem;
}
.daily-login-stage{
  position:relative;
  width:min(100%,var(--daily-stage-w));
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.9rem;
  margin:0 auto;
  padding:1rem 0 .2rem;
}
.daily-login-stage::before{
  content:'';
  position:absolute;
  inset:10% -10% auto;
  height:220px;
  border-radius:999px;
  background:radial-gradient(circle at center,rgba(79,172,254,0.12),rgba(165,94,234,0.08) 42%,transparent 72%);
  filter:blur(18px);
  pointer-events:none;
  z-index:0;
}
.daily-login-stage > *{position:relative;z-index:1}
.daily-login-stage .chest-message{max-width:340px}
.daily-login-stage .chest-days{flex-wrap:wrap}

/* ===== WEEKLY CHEST ===== */
.chest-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(360px,100%);
  min-height:260px;
  margin:0 auto;
  padding:1rem 0;
  overflow:visible;
  cursor:pointer;
}
.chest-hero:hover .chest-hero-img{transform:scale(1.05)}
.chest-hero:active .chest-hero-img{transform:scale(0.97)}
.chest-hero-img{
  width:160px;height:auto;
  filter:drop-shadow(0 0 20px rgba(79,172,254,0.25));
  transition:all .2s;
}
.chest-hero .daily-reward-grid{
  inset:50% auto auto 50%;
  width:min(var(--daily-reward-w),calc(100vw - 48px));
  transform:translate(-50%,-50%);
  gap:var(--daily-reward-gap);
  justify-items:stretch;
  align-content:center;
  padding:0;
}
.daily-reward-grid-large .daily-reward-tile{
  min-height:var(--daily-reward-min-h);
  border-radius:20px;
}
.daily-reward-grid-large .daily-reward-value{font-size:1.6rem}
.daily-reward-grid-large .daily-reward-puzzle .daily-reward-value{font-size:2rem}
@keyframes chestShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-5deg)}75%{transform:rotate(5deg)}}
/* Chest ready — glow + shake everywhere */
.chest-ready{
  animation:chestGlow 1.5s ease-in-out infinite, chestShakeReady 2s ease-in-out infinite!important;
  filter:drop-shadow(0 0 25px rgba(255,211,42,0.6))!important;
}
.chest-locked{
  /* Static, no dimming — just sits there with a lock icon in top-right */
  opacity:1;
  filter:none;
}
/* Lock icon circle — top-right corner of the chest card */
.home-chest-card.chest-locked-state::after,
.chest-hero.chest-locked-state::after{
  content:'🔒';
  position:absolute;
  top:8px;
  right:8px;
  left:auto;
  transform:none;
  width:48px;
  height:48px;
  padding:0;
  border-radius:50%;
  background:rgba(10,12,24,0.82);
  border:1.5px solid rgba(255,255,255,0.18);
  color:var(--text2);
  font-size:1.6rem;
  line-height:48px;
  text-align:center;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  pointer-events:none;
  z-index:4;
}
@keyframes chestGlow{
  0%,100%{filter:drop-shadow(0 0 15px rgba(255,211,42,0.3))}
  50%{filter:drop-shadow(0 0 30px rgba(255,211,42,0.6))}
}
@keyframes chestShakeReady{
  0%,100%{transform:rotate(0) translateY(0)}
  10%{transform:rotate(-2deg) translateY(-2px)}
  20%{transform:rotate(2deg) translateY(0)}
  30%{transform:rotate(-1deg) translateY(-1px)}
  40%{transform:rotate(0)}
}

/* Chest page opening animation */
.chest-hero-img.chest-opening{
  animation:chestOpenEpic 1.2s ease forwards;
}
@keyframes chestOpenEpic{
  0%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 10px rgba(255,211,42,0.3))}
  20%{transform:scale(1.05) rotate(-3deg)}
  40%{transform:scale(1.1) rotate(3deg);filter:drop-shadow(0 0 30px rgba(255,211,42,0.5))}
  60%{transform:scale(1.15) rotate(-2deg);filter:drop-shadow(0 0 50px rgba(255,211,42,0.7))}
  80%{transform:scale(1.2) rotate(0);filter:drop-shadow(0 0 60px rgba(255,211,42,0.9)) brightness(1.5)}
  100%{transform:scale(1) rotate(0);filter:drop-shadow(0 0 20px rgba(255,211,42,0.4))}
}

/* Flash overlay */
.chest-flash{
  position:fixed;inset:0;background:rgba(255,211,42,0.6);
  z-index:500;pointer-events:none;
  animation:flashBurst .5s ease-out forwards;
}
@keyframes flashBurst{
  0%{opacity:1}
  100%{opacity:0}
}

.chest-message{
  font-size:1rem;font-weight:700;color:var(--text2);
  text-align:center;line-height:1.6;
}

.chest-days{
  display:flex;gap:.5rem;justify-content:center;padding:.5rem 0;
}
.chest-day{
  width:48px;height:48px;border-radius:var(--r-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px solid var(--border);
  background:var(--glass);
  transition:all .2s;
  gap:2px;
}
.chest-day-num{font-size:.6rem;font-weight:700;color:var(--text3)}
.chest-day-icon{font-size:1rem}
.chest-day.done{
  border-color:var(--green);background:rgba(46,213,115,0.1);
}
.chest-day.done .chest-day-icon{color:var(--green)}
.chest-day.today{
  border-color:var(--yellow);background:rgba(255,211,42,0.1);
  box-shadow:0 0 12px rgba(255,211,42,0.15);
}
.chest-day.today .chest-day-num{color:var(--yellow)}
.chest-day.locked{
  opacity:.3;
}
.chest-day-7{
  border-color:var(--yellow);background:rgba(255,211,42,0.05);
}
.chest-day-7 .chest-day-icon{font-size:1.3rem}

.chest-reward-info{
  text-align:center;font-size:.85rem;color:var(--text3);font-weight:600;
  padding:.5rem;
}

/* ===== INLINE ICONS ===== */
.icon-inline{width:18px;height:18px;object-fit:contain;vertical-align:middle;margin-right:1px}
.icon-inline-sm{width:14px;height:14px;object-fit:contain;vertical-align:middle;margin-right:1px}
.icon-inline-lg{width:24px;height:24px;object-fit:contain;vertical-align:middle;margin-right:2px}

/* ===== UTILITIES ===== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.hidden{display:none!important}

/* ===== RESPONSIVE ===== */

@media(max-width:767px){
  .topnav .topnav-links{display:none}
  .topnav .topnav-title{display:none}
  .topnav{height:50px}
  .topnav-inner{padding:0 1rem}
  body{padding-top:50px;padding-bottom:var(--bnav-h)}
  .bottomnav{display:flex}
  .screen{padding:1rem;min-height:calc(100vh - 50px - var(--bnav-h))}
  body.nav-hidden{padding-bottom:0}

  .daily-page{
    --daily-stage-w:300px;
    --daily-reward-w:250px;
    --daily-reward-gap:.5rem;
    --daily-reward-min-h:96px;
    min-height:calc(100vh - 50px - var(--bnav-h) - 2rem);
    gap:.85rem;
  }
  .daily-page-toolbar{
    max-width:100%;
    gap:.45rem;
  }
  .daily-login-stage{
    width:min(100%,var(--daily-stage-w));
    gap:.75rem;
    padding:.45rem 0 .1rem;
  }
  .daily-login-stage::before{
    inset:14% -14% auto;
    height:185px;
  }
  .daily-login-stage .chest-hero{
    width:min(var(--daily-stage-w),100%);
    min-height:210px;
    padding:.35rem 0 .15rem;
  }
  .daily-login-stage .daily-reward-grid-large .daily-reward-tile{border-radius:18px}
  .daily-login-stage .daily-reward-grid-single{width:min(176px,calc(100vw - 84px))}
  .daily-login-stage .daily-reward-grid-large .daily-reward-value{font-size:1.45rem}
  .daily-login-stage .daily-reward-grid-large .daily-reward-puzzle .daily-reward-value{font-size:1.7rem}
  .daily-login-stage .chest-message{
    max-width:300px;
    font-size:.95rem;
    line-height:1.5;
  }
  .daily-login-stage .chest-days{gap:.4rem}
  .daily-login-stage .chest-day{width:44px;height:44px}

  .home-hero-img{height:120px}
  .home-hero-title{font-size:1.5rem}
  .home-hero{gap:.5rem}
  .home-blocks{gap:.5rem}
  .home-block{padding:1rem .7rem;min-height:130px}
  .home-block-icon{font-size:2rem}
  .home-block-icon-img{width:52px;height:52px}
  .home-block-title{font-size:.85rem}
}

@media(max-width:380px){
  .daily-page{
    --daily-stage-w:280px;
    --daily-reward-w:228px;
    --daily-reward-gap:.45rem;
    --daily-reward-min-h:88px;
  }
  .daily-login-stage{width:min(100%,var(--daily-stage-w))}
  .daily-login-stage .chest-hero{
    width:min(var(--daily-stage-w),100%);
    min-height:196px;
  }
  .daily-login-stage .daily-reward-grid-large .daily-reward-value{font-size:1.25rem}
  .daily-login-stage .daily-reward-grid-single{width:min(160px,calc(100vw - 92px))}
  .daily-login-stage .daily-reward-grid-large .daily-reward-puzzle .daily-reward-value{font-size:1.5rem}
  .daily-login-stage .daily-reward-label{font-size:.58rem}
}

@media(min-width:768px) and (max-width:1023px){
  .topnav-inner{padding:0 1.2rem}
  .nav-label{display:none}
}

@media(min-width:1200px){
  .page-wrap{max-width:1100px}
  .home-wrap{max-width:960px}
}

/* ═══ CHARACTER SYSTEM ═══ */
.lesson-layout {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  width: 100%;
  min-height: 340px;
  position: relative;
}

.character-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
  min-width: 180px;
  flex-shrink: 0;
  position: relative;
  padding-top: 0.3rem;
}

/* Subtle glow behind character */
.character-panel::before {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(79,172,254,0.12) 0%, rgba(165,94,234,0.06) 50%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(20px);
}

.character-img {
  width: 160px;
  height: auto;
  object-fit: contain;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 6px 20px rgba(0,0,0,0.4)) drop-shadow(0 2px 8px rgba(79,172,254,0.1));
  position: relative;
  z-index: 1;
}

.character-img.pose-swap {
  opacity: 0;
  transform: scale(0.92) translateY(4px);
}

.speech-bubble {
  background: linear-gradient(145deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 0.65rem 0.85rem;
  margin-top: 0.6rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgba(255,255,255,0.9);
  max-width: 190px;
  text-align: center;
  position: relative;
  z-index: 1;
  animation: bubbleIn 0.4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.speech-bubble::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 7px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background: rgba(255,255,255,0.1);
}

@keyframes bubbleIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Card Stage (deck + active card) ── */
.card-stage {
  flex: 1;
  min-width: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card-stage .task-card {
  width: 100%;
}

.task-image-area {
  background: rgba(255,255,255,0.03);
  border: 2px dashed rgba(255,255,255,0.1);
  border-radius: 16px;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
  padding: 1.2rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
  line-height: 1.4;
  font-style: italic;
}

.task-image-area img {
  max-width: 100%;
  max-height: 220px;
  border-radius: 12px;
}

/* Pose label (dev mode) */
.pose-label {
  display:none !important;
  font-size: 0.5rem;
  color: rgba(79,172,254,0.3);
  margin-top: 0.25rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  text-align: center;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 1;
}

/* Mobile: character on top */
@media (max-width: 767px) {
  .lesson-layout {
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
  }
  .character-panel {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    padding: 0.4rem 0.8rem;
    min-width: unset;
    background: rgba(255,255,255,0.02);
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.04);
  }
  .character-panel::before {
    width: 60px; height: 60px; top: 50%; left: 40px;
    transform: translate(-50%, -50%);
  }
  .character-img {
    width: 72px;
    flex-shrink: 0;
  }
  .speech-bubble {
    margin-top: 0;
    max-width: none;
    flex: 1;
    text-align: left;
    font-size: 0.75rem;
    padding: 0.5rem 0.7rem;
    border-radius: 12px;
  }
  .speech-bubble::before { display: none; }
  .pose-label { display: none; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .character-panel { width: 160px; min-width: 160px; }
  .character-img { width: 140px; }
}

/* Desktop */
@media (min-width: 1024px) {
  .character-panel { width: 220px; min-width: 220px; }
  .character-img { width: 200px; }
  .speech-bubble { max-width: 210px; font-size: 0.82rem; }
}

/* ═══════════════════════════════════════════
   CARD DECK SYSTEM
   ═══════════════════════════════════════════ */

/* ── Deck Stack ── */
.card-deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  gap: 0.8rem;
  padding: 1rem;
  transition: transform 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.card-deck:active { transform: scale(0.97); }

.deck-stack {
  position: relative;
  width: 180px;
  height: 230px;
}

.deck-card {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background:
    url('img/cards/deck_top.webp') center/contain no-repeat,
    linear-gradient(145deg, #0c0f22, #1a1e3a);
  border: 2px solid rgba(79,172,254,0.12);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.dc-3 { transform: rotate(-3deg) translate(-4px, 4px); opacity: 0.5; }
.dc-2 { transform: rotate(1.5deg) translate(2px, 2px); opacity: 0.7; }
.dc-1 { transform: rotate(0deg); z-index: 2; }

.deck-count {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--text2);
  letter-spacing: 1px;
}

.deck-hint {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--blue);
  animation: hintPulse 2s ease-in-out infinite;
}

@keyframes hintPulse {
  0%, 100% { opacity: 0.6; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-2px); }
}

/* Deck glow */
.card-deck.glow .dc-1 {
  animation: deckGlow 1.8s ease-in-out infinite;
}
@keyframes deckGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 15px rgba(79,172,254,0.15); }
  50% { box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 35px rgba(79,172,254,0.4), 0 0 60px rgba(0,242,254,0.15); }
}

/* ── Card Back Overlay ── */
.card-back-overlay {
  position: absolute;
  inset: 0;
  z-index: 15;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  overflow: hidden;
}

/* ── Card back designs (pure CSS) ── */
.card-back-overlay[data-type="standard"] {
  background: linear-gradient(135deg, #0a1540, #1a3a8a, #2962ff);
}
.card-back-overlay[data-type="video"] {
  background: linear-gradient(135deg, #1a0530, #4a148c, #9c27b0);
}
.card-back-overlay[data-type="thinking"] {
  background: linear-gradient(135deg, #051a0a, #1b5e20, #43a047);
}
.card-back-overlay[data-type="mission"] {
  background: linear-gradient(135deg, #1a0c00, #bf360c, #ff6d00);
}
.card-back-overlay[data-type="reward"] {
  background: linear-gradient(135deg, #1a1200, #e65100, #ffd600);
}

/* Shine sweep */
.cb-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,0.08) 45%,
    rgba(255,255,255,0.15) 50%,
    rgba(255,255,255,0.08) 55%,
    transparent 60%
  );
  animation: cbShineSweep 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
@keyframes cbShineSweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Corner pattern + border */
.cb-pattern {
  position: absolute;
  inset: 8px;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  pointer-events: none;
  z-index: 1;
}
.cb-pattern::before,
.cb-pattern::after {
  content: '';
  position: absolute;
  width: 30px; height: 30px;
  border-color: rgba(255,255,255,0.2);
  border-style: solid;
}
.cb-pattern::before {
  top: 6px; left: 6px;
  border-width: 2px 0 0 2px;
  border-radius: 4px 0 0 0;
}
.cb-pattern::after {
  bottom: 6px; right: 6px;
  border-width: 0 2px 2px 0;
  border-radius: 0 0 4px 0;
}

/* Icon */
.cb-icon {
  font-size: clamp(2.5rem, 8vw, 4rem);
  z-index: 2;
  filter: drop-shadow(0 4px 16px rgba(0,0,0,0.4));
  animation: cbIconFloat 2s ease-in-out infinite;
}
@keyframes cbIconFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-4px) scale(1.05); }
}

/* Label */
.cb-label {
  font-size: clamp(0.65rem, 2vw, 0.85rem);
  font-weight: 800;
  color: rgba(255,255,255,0.7);
  letter-spacing: 3px;
  text-transform: uppercase;
  z-index: 2;
}

/* Card back flip away */
.card-back-overlay.flip-away {
  animation: cbFlipAway 0.45s ease-in forwards;
}
@keyframes cbFlipAway {
  0%   { transform: perspective(800px) rotateY(0deg); opacity: 1; }
  100% { transform: perspective(800px) rotateY(90deg); opacity: 0; }
}

/* Card back flip on (for reward reveal) */
.card-back-overlay.flip-on {
  animation: cbFlipOn 0.45s ease-out forwards;
}
@keyframes cbFlipOn {
  0%   { transform: perspective(800px) rotateY(-90deg); opacity: 0; }
  100% { transform: perspective(800px) rotateY(0deg); opacity: 1; }
}

/* ── Card Draw / Exit Animations ── */
.task-card.draw-in {
  animation: cardDrawIn 0.4s cubic-bezier(.4,0,.2,1);
}
@keyframes cardDrawIn {
  0%   { opacity: 0; transform: scale(0.88) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.task-card.card-exit {
  animation: cardSlideOut 0.35s ease-in forwards;
}
@keyframes cardSlideOut {
  0%   { opacity: 1; transform: translateX(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50px) scale(0.94); }
}

.task-card.card-darken {
  filter: brightness(0.4);
  transition: filter 0.6s ease;
}

/* ── Voice Badge ── */
.voice-badge {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.65rem;
  background: linear-gradient(135deg, rgba(79,172,254,0.1), rgba(165,94,234,0.06));
  border: 1px solid rgba(79,172,254,0.18);
  border-radius: 50px;
  cursor: pointer;
  z-index: 2;
  transition: all 0.25s;
  margin-bottom: 0.3rem;
}
.voice-badge:hover {
  background: linear-gradient(135deg, rgba(79,172,254,0.2), rgba(165,94,234,0.12));
  border-color: rgba(79,172,254,0.35);
  transform: scale(1.05);
}
.voice-badge:active { transform: scale(0.95); }

.voice-badge.playing {
  background: linear-gradient(135deg, rgba(79,172,254,0.25), rgba(165,94,234,0.18));
  border-color: rgba(79,172,254,0.45);
  box-shadow: 0 0 16px rgba(79,172,254,0.2);
}

.vb-icon { font-size: 0.85rem; }

.vb-waves {
  display: none;
  gap: 2px;
  align-items: center;
  height: 14px;
}
.voice-badge.playing .vb-waves { display: flex; }
.voice-badge.playing .vb-icon { display: none; }

.vb-waves span {
  width: 2.5px;
  background: #4facfe;
  border-radius: 2px;
  animation: vbWave 0.55s ease-in-out infinite;
}
.vb-waves span:nth-child(1) { height: 5px; animation-delay: 0s; }
.vb-waves span:nth-child(2) { height: 9px; animation-delay: 0.08s; }
.vb-waves span:nth-child(3) { height: 13px; animation-delay: 0.16s; }
.vb-waves span:nth-child(4) { height: 7px; animation-delay: 0.24s; }

@keyframes vbWave {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.8); }
}

/* Mobile voice badge */
@media (max-width: 767px) {
  .voice-badge {
    position: absolute;
    top: 0.3rem;
    right: 0.3rem;
    margin-bottom: 0;
    padding: 0.25rem 0.5rem;
  }
  .character-panel { position: relative; }
  .card-stage { width: 100%; }
}

/* ── Reward Overlay ── */
.reward-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: fadeIn 0.4s ease;
}
.reward-overlay.hidden { display: none; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.reward-card {
  background: linear-gradient(145deg, rgba(20,10,50,0.95), rgba(40,20,80,0.95));
  border: 2px solid rgba(255,211,42,0.25);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  min-width: 260px;
  max-width: 340px;
  box-shadow: 0 0 40px rgba(255,211,42,0.15), 0 8px 32px rgba(0,0,0,0.5);
}

.reward-card.flip-in {
  animation: rewardFlipIn 0.5s ease-out;
}
@keyframes rewardFlipIn {
  0%   { transform: perspective(800px) rotateY(-90deg) scale(0.8); opacity: 0; }
  100% { transform: perspective(800px) rotateY(0deg) scale(1); opacity: 1; }
}

.reward-title {
  font-size: 3rem;
  animation: bounce 0.8s ease infinite;
}

.reward-items {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  justify-content: center;
}

.reward-item {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(255,211,42,0.15), rgba(255,170,40,0.08));
  border: 2px solid rgba(255,211,42,0.3);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 0 20px rgba(255,211,42,0.2);
}

.reward-item.pop-in {
  animation: rewardPop 0.4s cubic-bezier(.3,1.5,.7,1);
}
@keyframes rewardPop {
  0%   { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.reward-total {
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--yellow);
  min-height: 2rem;
}
.reward-total.pop-in {
  animation: rewardPop 0.4s cubic-bezier(.3,1.5,.7,1);
}

/* ═══════════════════════════════════════════════════
   LESSON SLIDES SCREEN
   ═══════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════
   LESSON BOOK — Magical Artifact Storybook
   ═══════════════════════════════════════════════════ */

/* ── Phase 1: Book Entry ── */
.book-entry{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 60%,rgba(15,20,50,1) 0%,rgba(6,8,22,1) 70%);
  overflow:hidden;z-index:101;
  touch-action:none;
}
.book-entry-particles{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1.5px 1.5px at 10% 20%,rgba(255,215,100,.4),transparent),
    radial-gradient(1px 1px at 30% 70%,rgba(79,172,254,.3),transparent),
    radial-gradient(2px 2px at 60% 15%,rgba(255,215,100,.35),transparent),
    radial-gradient(1px 1px at 80% 55%,rgba(165,94,234,.3),transparent),
    radial-gradient(1.5px 1.5px at 45% 85%,rgba(255,215,100,.3),transparent),
    radial-gradient(1px 1px at 90% 30%,rgba(79,172,254,.25),transparent);
  animation:particleDrift 12s ease-in-out infinite alternate;
}
@keyframes particleDrift{
  0%{transform:translateY(0) scale(1);opacity:.6}
  100%{transform:translateY(-8px) scale(1.02);opacity:1}
}

.book-entry-scene{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  position:relative;z-index:1;
  padding:1rem;
}

/* Character guide at entry */
.book-entry-guide{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  position:absolute;right:-180px;top:50%;transform:translateY(-60%);
}
.book-entry-char{
  width:98px;height:auto;object-fit:contain;
  filter:drop-shadow(0 8px 32px rgba(0,0,0,.6));
  animation:guideFloat 4s ease-in-out infinite;
}
@keyframes guideFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.book-entry-speech{
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.04));
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,215,100,.15);
  border-radius:14px;
  padding:.5rem .9rem;
  font-size:.78rem;font-weight:700;
  color:rgba(255,255,255,.85);
  max-width:170px;text-align:center;
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  animation:bubbleIn .6s ease .3s both;
}

/* Book artifact */
.book-artifact{
  cursor:pointer;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  transition:transform .3s;
}
.book-artifact:hover{transform:scale(1.03)}
.book-artifact:active{transform:scale(.97)}

.book-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:300px;height:300px;
  background:radial-gradient(circle,rgba(255,215,100,.15) 0%,rgba(79,172,254,.08) 40%,transparent 70%);
  border-radius:50%;pointer-events:none;
  animation:bookPulse 3s ease-in-out infinite;
}
@keyframes bookPulse{
  0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
}

.book-cover{
  width:240px;height:320px;
  position:relative;
  perspective:800px;
}
.book-spine{
  position:absolute;left:0;top:5%;height:90%;width:20px;
  background:linear-gradient(180deg,#2a1810 0%,#1a0f08 50%,#2a1810 100%);
  border-radius:3px 0 0 3px;
  box-shadow:inset -2px 0 6px rgba(0,0,0,.5);
  z-index:2;
}
.book-front{
  position:absolute;left:18px;top:0;right:0;bottom:0;
  background:linear-gradient(145deg,#1a2444 0%,#0d1528 40%,#1a1a3e 100%);
  border-radius:4px 12px 12px 4px;
  border:2px solid rgba(255,215,100,.2);
  box-shadow:
    0 8px 40px rgba(0,0,0,.5),
    0 0 60px rgba(79,172,254,.08),
    inset 0 0 40px rgba(255,215,100,.03);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;overflow:hidden;
}

/* Metal corners */
.book-metal-corners span{
  position:absolute;width:24px;height:24px;
  border:2px solid rgba(255,215,100,.4);
}
.book-metal-corners span:nth-child(1){top:8px;left:8px;border-right:none;border-bottom:none;border-radius:4px 0 0 0}
.book-metal-corners span:nth-child(2){top:8px;right:8px;border-left:none;border-bottom:none;border-radius:0 4px 0 0}
.book-metal-corners span:nth-child(3){bottom:8px;left:8px;border-right:none;border-top:none;border-radius:0 0 0 4px}
.book-metal-corners span:nth-child(4){bottom:8px;right:8px;border-left:none;border-top:none;border-radius:0 0 4px 0}

/* Rune lines */
.book-rune-lines{
  position:absolute;inset:0;pointer-events:none;
}
.book-rune-lines span{
  position:absolute;
  background:linear-gradient(90deg,transparent,rgba(79,172,254,.15),transparent);
  height:1px;
}
.book-rune-lines span:nth-child(1){top:30%;left:15%;right:15%}
.book-rune-lines span:nth-child(2){top:50%;left:20%;right:20%;background:linear-gradient(90deg,transparent,rgba(255,215,100,.12),transparent)}
.book-rune-lines span:nth-child(3){top:70%;left:15%;right:15%}

/* Title plate */
.book-title-plate{
  position:relative;z-index:1;
  text-align:center;padding:0 1.2rem;
}
.book-title-text{
  font-size:1.05rem;font-weight:900;
  color:rgba(255,215,100,.9);
  text-shadow:0 0 20px rgba(255,215,100,.3);
  letter-spacing:.03em;
}
.book-title-sub{
  font-size:.65rem;font-weight:700;
  color:rgba(79,172,254,.7);
  margin-top:.25rem;
}

/* Center gem */
.book-gem{
  width:16px;height:16px;position:relative;z-index:1;
  background:radial-gradient(circle,rgba(79,172,254,.8),rgba(165,94,234,.6));
  border-radius:50%;
  box-shadow:0 0 12px rgba(79,172,254,.4),0 0 24px rgba(79,172,254,.15);
  animation:gemGlow 2s ease-in-out infinite alternate;
}
@keyframes gemGlow{
  0%{box-shadow:0 0 12px rgba(79,172,254,.4),0 0 24px rgba(79,172,254,.15)}
  100%{box-shadow:0 0 18px rgba(79,172,254,.6),0 0 40px rgba(79,172,254,.25)}
}

.book-open-hint{
  font-size:.7rem;font-weight:800;
  color:rgba(255,215,100,.6);
  letter-spacing:.15em;text-transform:uppercase;
  animation:hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse{
  0%,100%{opacity:.5}
  50%{opacity:1}
}

/* Entry progress dots */
.book-entry-progress{
  display:flex;gap:.5rem;
}
.bep-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.1);
}
.bep-dot.bep-active{
  background:rgba(255,215,100,.6);
  border-color:rgba(255,215,100,.4);
  box-shadow:0 0 8px rgba(255,215,100,.3);
}

/* ── Book opening animation ── */
.book-entry.opening .book-glow{
  animation:bookOpenGlow 1.2s ease forwards;
}
@keyframes bookOpenGlow{
  0%{opacity:.6;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.8)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.5)}
}
.book-entry.opening .book-cover{
  animation:bookOpenFlip 1s ease .2s forwards;
  transform-origin:left center;
}
@keyframes bookOpenFlip{
  0%{transform:rotateY(0);filter:brightness(1)}
  40%{filter:brightness(1.4)}
  100%{transform:rotateY(-120deg);opacity:0;filter:brightness(1)}
}
.book-entry.opening .book-entry-guide{
  animation:guideFadeOut .6s ease .6s forwards;
}
@keyframes guideFadeOut{to{opacity:0;transform:translateY(-60%) translateX(30px)}}
.book-entry.opening{
  animation:entryFadeOut .4s ease 1s forwards;
}
@keyframes entryFadeOut{
  to{opacity:0;pointer-events:none}
}

/* ── Phase 2: Book Reader ── */
.book-reader{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  background:radial-gradient(ellipse at 50% 40%,rgba(15,20,50,.95),rgba(6,8,22,1) 70%);
  z-index:100;
  animation:readerFadeIn .6s ease;
  overflow:hidden;
  touch-action:none;
  -webkit-overflow-scrolling:auto;
}
@keyframes readerFadeIn{from{opacity:0}to{opacity:1}}

/* Top bar */
.br-topbar{
  display:flex;align-items:center;gap:.8rem;
  padding:.5rem 1rem;
  background:rgba(6,8,22,.85);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,215,100,.06);
  flex-shrink:0;z-index:10;
}
.br-title{
  flex:1;font-size:.9rem;font-weight:800;
  color:var(--text);text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.br-counter{
  font-size:.6rem;font-weight:800;color:rgba(255,215,100,.7);
  background:rgba(255,215,100,.08);padding:.2rem .6rem;border-radius:50px;
  border:1px solid rgba(255,215,100,.12);
}

/* Main layout */
.br-main{
  flex:0 1 auto;display:flex;align-items:center;justify-content:center;
  gap:0;padding:.7rem 1rem .35rem;
  width:100%;max-width:1240px;
  margin:0 auto;
  min-height:0;overflow:visible;
  position:relative;
}

/* Guide character */
.br-guide{display:none}
.br-char-img{
  width:98px;height:auto;object-fit:contain;
  filter:drop-shadow(0 6px 24px rgba(0,0,0,.5));
  transition:all .5s cubic-bezier(.4,0,.2,1);
}
.br-char-img.pose-shift{
  animation:poseShift .5s ease;
}
@keyframes poseShift{
  0%{opacity:1;transform:scale(1)}
  40%{opacity:.6;transform:scale(.95)}
  100%{opacity:1;transform:scale(1)}
}
.br-speech{
  background:linear-gradient(145deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  padding:.45rem .7rem;
  font-size:.7rem;line-height:1.4;font-weight:700;
  color:rgba(255,255,255,.85);
  text-align:center;max-width:150px;
  box-shadow:0 4px 16px rgba(0,0,0,.25);
  animation:bubbleIn .4s ease;
}
/* ── Side Audio Button (right of book) ── */
/* ── Page-level audio button (inside content page header) ── */
.brfp-content-header{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  flex:0 0 auto;
}
.brfp-page-audio{
  display:flex;align-items:center;gap:.25rem;
  cursor:pointer;transition:all .3s;
}
.brfp-page-audio-circle{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,rgba(165,94,234,.2),rgba(79,172,254,.14));
  border:2px solid rgba(165,94,234,.25);
  display:flex;align-items:center;justify-content:center;
  transition:all .3s;
  box-shadow:0 2px 10px rgba(0,0,0,.2),0 0 10px rgba(165,94,234,.1);
}
.brfp-page-audio:hover .brfp-page-audio-circle{
  transform:scale(1.1);
  border-color:rgba(165,94,234,.45);
  box-shadow:0 2px 14px rgba(0,0,0,.3),0 0 16px rgba(165,94,234,.2);
}
.brfp-page-audio.playing .brfp-page-audio-circle{
  border-color:rgba(165,94,234,.55);
  box-shadow:0 2px 14px rgba(0,0,0,.3),0 0 20px rgba(165,94,234,.35);
  animation:pageAudioPulse 2s ease infinite;
}
@keyframes pageAudioPulse{
  0%,100%{box-shadow:0 2px 14px rgba(0,0,0,.3),0 0 18px rgba(165,94,234,.3)}
  50%{box-shadow:0 2px 18px rgba(0,0,0,.35),0 0 28px rgba(165,94,234,.5)}
}
.brfp-page-audio-img{
  width:24px;height:24px;object-fit:contain;
  filter:drop-shadow(0 1px 4px rgba(0,180,255,.3));
}
.brfp-page-audio-waves{
  display:none;gap:1.5px;align-items:flex-end;height:12px;
}
.brfp-page-audio.playing .brfp-page-audio-waves{display:flex}
.brfp-page-audio-waves span{
  width:2.5px;border-radius:2px;
  background:rgba(165,94,234,.8);
  animation:pageAudioWave .6s ease-in-out infinite alternate;
}
.brfp-page-audio-waves span:nth-child(1){height:3px;animation-delay:0s}
.brfp-page-audio-waves span:nth-child(2){height:6px;animation-delay:.1s}
.brfp-page-audio-waves span:nth-child(3){height:12px;animation-delay:.2s}
.brfp-page-audio-waves span:nth-child(4){height:6px;animation-delay:.3s}
.brfp-page-audio-waves span:nth-child(5){height:3px;animation-delay:.4s}
@keyframes pageAudioWave{
  0%{height:2px}100%{height:12px}
}

/* Book viewport */
.br-book-viewport{
  flex:0 1 auto;max-width:none;width:100%;position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:0;
  perspective:1200px;
}

.br-book-shell{
  width:100%;max-width:100%;
  position:relative;
  display:flex;align-items:center;justify-content:center;
  min-height:0;
}

.br-flip-book{
  width:min(100%,720px);
  position:relative;
}
.br-flip-book.stf__parent{
  filter:drop-shadow(0 14px 48px rgba(0,0,0,.45));
}
.br-flip-book .stf__block,
.br-flip-book .stf__item,
.br-flip-book canvas{
  border-radius:22px;
}
.br-book-light{
  position:absolute;top:-20%;left:50%;transform:translateX(-50%);
  width:120%;height:60%;
  background:radial-gradient(ellipse,rgba(255,215,100,.05) 0%,transparent 70%);
  pointer-events:none;
}

.br-flip-page{
  background:linear-gradient(160deg,#111b34 0%,#0a1122 100%);
  border:1px solid rgba(255,255,255,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  border-radius:22px;
  overflow:hidden;
}
.br-flip-page::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 0%,rgba(255,215,100,.06),transparent 35%),
    linear-gradient(180deg,rgba(255,255,255,.03),transparent 24%);
  pointer-events:none;
}
/* ── Old single-page layout (kept for compat) ── */
.brfp-inner{
  position:relative;
  display:flex;flex-direction:column;
  height:100%;
  padding:1.4rem 1.2rem 1.1rem;
  gap:1rem;
  color:rgba(255,255,255,.85);
}
.brfp-media{
  min-height:42%;
  display:flex;align-items:center;justify-content:center;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border:1px solid rgba(255,255,255,.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  overflow:hidden;
}
.brfp-img{
  width:100%;height:100%;max-height:250px;object-fit:contain;
}

/* ═══════════════════════════════════════════════════
   TWO-PAGE LAYOUT: Image Page + Content Page
   ═══════════════════════════════════════════════════ */

/* ── Image page (fills entire page) ── */
.br-flip-page--image{
  padding:0 !important;
  overflow:hidden;
}
.brfp-image-fill{
  position:relative;
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.brfp-full-img{
  width:100%;height:100%;
  object-fit:cover;
  border-radius:22px;
}
.brfp-full-placeholder{
  width:100%;height:100%;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:1rem;
  background:linear-gradient(145deg,
    rgba(79,172,254,0.1) 0%,
    rgba(165,94,234,0.12) 40%,
    rgba(79,172,254,0.06) 100%);
  position:relative;
}
.brfp-full-placeholder::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,215,100,.06), transparent 50%),
    radial-gradient(circle at 70% 75%, rgba(79,172,254,.06), transparent 50%);
  pointer-events:none;
}
.brfp-full-emoji{
  font-size:clamp(4rem,10vw,7rem);
  filter:drop-shadow(0 12px 32px rgba(0,0,0,.45));
  animation:emojiFloat 4s ease-in-out infinite;
}
@keyframes emojiFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
.brfp-full-desc{
  font-size:clamp(.6rem,1.4vw,.75rem);
  color:rgba(255,255,255,.4);
  text-align:center;
  padding:0 1.5rem;
  max-width:85%;
  font-style:italic;
  line-height:1.6;
}
.brfp-page-num--img{
  position:absolute;bottom:.6rem;right:.8rem;
  color:rgba(255,255,255,.15);
}

/* ── Content page ── */
.br-flip-page--content{
  padding:0 !important;
}
.brfp-content-inner{
  position:relative;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  height:100%;
  padding:1rem 1.2rem .6rem;
  gap:.5rem;
  color:rgba(255,255,255,.85);
  overflow-y:auto;
  overflow-x:hidden;
}
.brfp-content-top{
  flex:0 0 auto;
  display:flex;flex-direction:column;
  align-items:center;justify-content:flex-start;
  gap:.45rem;
  text-align:center;
  width:100%;
}
.brfp-slide-num{
  font-size:.5rem;font-weight:900;
  letter-spacing:.15em;text-transform:uppercase;
  color:rgba(79,172,254,.6);
  background:rgba(79,172,254,.06);
  padding:.15rem .7rem;
  border-radius:50px;
  border:1px solid rgba(79,172,254,.1);
}
.brfp-divider{
  width:40px;height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,215,100,.3),transparent);
  border-radius:2px;
}
.brfp-kw-section{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  width:100%;flex:0 0 auto;
}
.brfp-kw-label{
  font-size:.5rem;font-weight:900;
  letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,215,100,.5);
}
.brfp-keywords{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  justify-content:center;
}
.brfp-keywords li{
  font-size:clamp(.78rem,1.8vw,.95rem);
  font-weight:800;
  color:rgba(255,255,255,0.92);
  background:linear-gradient(135deg,rgba(255,215,100,.08),rgba(79,172,254,.06));
  padding:.25rem .7rem;
  border-radius:10px;
  border:1px solid rgba(255,215,100,.14);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  transition:transform .15s;
}
.brfp-keywords li:hover{
  transform:scale(1.05);
}
/* Keyword gating states */
.brfp-kw-section.kw-hidden{
  opacity:0;pointer-events:none;max-height:0;overflow:hidden;
  transition:opacity .4s,max-height .4s;
}
.brfp-kw-section.kw-visible{
  opacity:1;pointer-events:auto;max-height:200px;
  transition:opacity .5s ease .1s,max-height .5s ease;
  animation:kwReveal .6s ease;
}
@keyframes kwReveal{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:translateY(0)}
}
.brfp-keywords li{
  cursor:pointer;
  user-select:none;-webkit-user-select:none;
  transition:transform .2s,border-color .3s,background .3s,box-shadow .3s,opacity .3s;
}
/* Locked — not yet reachable */
.brfp-keywords li.kw-locked{
  opacity:.35;pointer-events:none;cursor:default;
  filter:grayscale(.5);
}
/* Active — ready to tap */
.brfp-keywords li.kw-active{
  border-color:rgba(255,215,100,.45);
  box-shadow:0 0 12px rgba(255,215,100,.2),0 2px 8px rgba(0,0,0,.15);
  animation:kwPulse 1.5s ease infinite;
}
@keyframes kwPulse{
  0%,100%{box-shadow:0 0 12px rgba(255,215,100,.2),0 2px 8px rgba(0,0,0,.15)}
  50%{box-shadow:0 0 20px rgba(255,215,100,.35),0 2px 12px rgba(0,0,0,.2)}
}
/* Speaking — currently being pronounced */
.brfp-keywords li.kw-speaking{
  border-color:rgba(165,94,234,.5);
  background:linear-gradient(135deg,rgba(165,94,234,.12),rgba(79,172,254,.08));
  box-shadow:0 0 14px rgba(165,94,234,.25),0 2px 8px rgba(0,0,0,.15);
  animation:kwSpeaking .6s ease infinite alternate;
  transform:scale(1.05);
}
@keyframes kwSpeaking{
  0%{box-shadow:0 0 14px rgba(165,94,234,.25),0 2px 8px rgba(0,0,0,.15)}
  100%{box-shadow:0 0 22px rgba(165,94,234,.4),0 2px 12px rgba(0,0,0,.2)}
}
/* Clicked/done — green */
.brfp-keywords li.kw-clicked{
  border-color:rgba(100,220,100,.6) !important;
  background:linear-gradient(135deg,rgba(100,220,100,.12),rgba(100,220,100,.06)) !important;
  box-shadow:0 0 10px rgba(100,220,100,.15),0 2px 8px rgba(0,0,0,.12) !important;
  opacity:1 !important;filter:none !important;pointer-events:none;
  animation:kwPop .35s ease;
}
@keyframes kwPop{
  0%{transform:scale(1)}40%{transform:scale(1.15)}100%{transform:scale(1)}
}
/* Next button unlock animation */
#br-next{
  transition:all .35s ease;
}
#br-next.br-next-ready{
  animation:nextReady .5s ease;
}
@keyframes nextReady{
  0%{transform:scale(.8);opacity:0}50%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}
}

/* ── (Legacy placeholder kept) ── */
.brfp-img-placeholder{
  width:100%;height:100%;min-height:180px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg, rgba(79,172,254,0.08), rgba(165,94,234,0.08));
  border-radius:18px;
  position:relative;
  overflow:hidden;
}
.brfp-img-emoji{
  font-size:5rem;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,0.4));
  margin-bottom:0.8rem;
}
.brfp-img-desc{
  font-size:0.65rem;
  color:rgba(255,255,255,0.45);
  text-align:center;
  padding:0 1rem;
  max-width:90%;
  font-style:italic;
  line-height:1.5;
}
/* ── Typewriter text ── */
.brfp-typewriter{
  font-size:clamp(.68rem,1.6vw,.82rem);
  line-height:1.55;
  color:rgba(255,255,255,.7);
  font-weight:600;
  font-style:italic;
  text-align:left;
  padding:0 .4rem 0 .6rem;
  min-height:0;
  max-height:5.5rem;
  overflow-y:auto;
  border-left:2px solid rgba(79,172,254,.4);
  width:100%;flex:0 1 auto;
}
.brfp-typewriter:empty{
  display:none !important;
}

/* ── Narrator head in audio button ── */
.brfp-narrator-head{
  width:52px;height:52px;
  object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,180,255,.3));
  transition:transform .3s ease;
}
.brfp-audio-btn:hover .brfp-narrator-head{
  transform:scale(1.1);
}
.brfp-audio-btn:active .brfp-narrator-head{
  transform:scale(.95);
}

.brfp-audio-btn{
  margin-top:1rem;
  display:flex;flex-direction:column;align-items:center;gap:0.5rem;
  cursor:pointer;
  padding:0.8rem 1.2rem;
  background:linear-gradient(135deg, rgba(79,172,254,0.15), rgba(165,94,234,0.15));
  border:1px solid rgba(255,255,255,0.15);
  border-radius:12px;
  transition:all 0.2s ease;
  user-select:none;
}
.brfp-audio-btn:hover{
  background:linear-gradient(135deg, rgba(79,172,254,0.25), rgba(165,94,234,0.25));
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(79,172,254,0.2);
}
.brfp-audio-btn:active{
  transform:translateY(0);
}
.brfp-audio-icon{
  font-size:1.6rem;
}
.brfp-audio-waves{
  display:flex;gap:3px;align-items:center;
  height:20px;
}
.brfp-audio-waves span{
  width:4px;
  background:linear-gradient(180deg, rgba(79,172,254,0.8), rgba(165,94,234,0.8));
  border-radius:2px;
  animation:wave 0.6s ease-in-out infinite;
}
.brfp-audio-waves span:nth-child(2){animation-delay:0.1s}
.brfp-audio-waves span:nth-child(3){animation-delay:0.2s}
.brfp-audio-waves span:nth-child(4){animation-delay:0.3s}
.brfp-audio-waves span:nth-child(5){animation-delay:0.4s}
.brfp-audio-waves span:nth-child(6){animation-delay:0.5s}
@keyframes wave{
  0%, 100%{height:4px}
  50%{height:18px}
}
.brfp-audio-label{
  font-size:0.7rem;
  font-weight:700;
  color:rgba(255,255,255,0.75);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.brfp-emoji{
  font-size:4rem;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.32));
}
.brfp-visual-hint{
  margin-top:.5rem;
  font-size:.6rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(79,172,254,.6);
}
.brfp-copy{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:0.85rem;
  text-align:center;
}
.brfp-copy .brfp-title{
  margin:0;
}
.brfp-copy .brfp-body{
  margin:0;
}
.brfp-copy > *:not(.brfp-title):not(.brfp-body) {
  margin-top:0.5rem;
}
.brfp-title{
  font-size:clamp(.95rem,2.2vw,1.2rem);
  font-weight:900;line-height:1.2;
  color:rgba(255,215,100,.94);
  text-shadow:0 0 18px rgba(255,215,100,.14);
}
.brfp-body{
  font-size:clamp(.78rem,1.8vw,.92rem);
  line-height:1.5;
  color:rgba(255,255,255,.76);
}
.brfp-page-num{
  position:absolute;
  bottom:6px;right:10px;
  font-size:.55rem;font-weight:800;
  color:rgba(255,255,255,.22);
}

/* Legacy book styles kept below for fallback/transition */
/* Pages */
.br-page{
  flex:1;min-height:360px;
  display:flex;flex-direction:column;
  position:relative;overflow:hidden;
}
.br-page-left{
  background:linear-gradient(160deg,#0f1832 0%,#0a1020 100%);
  border-right:1px solid rgba(255,255,255,.03);
  border-radius:6px 0 0 6px;
}
.br-page-right{
  background:linear-gradient(160deg,#0d1629 0%,#080e1e 100%);
  border-radius:0 12px 12px 0;
}
.br-page-content{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  padding:1.5rem;
  gap:.8rem;
  transition:opacity .35s ease, transform .35s ease;
}
.br-page-content.page-exit-left{
  opacity:0;transform:translateX(-30px);
}
.br-page-content.page-enter-right{
  opacity:0;transform:translateX(30px);
}
.br-page-content.page-exit-right{
  opacity:0;transform:translateX(30px);
}
.br-page-content.page-enter-left{
  opacity:0;transform:translateX(-30px);
}
.br-page-number{
  position:absolute;bottom:.4rem;font-size:.5rem;font-weight:700;
  color:rgba(255,255,255,.15);
}
.br-pn-left{left:.6rem}
.br-pn-right{right:.6rem}

/* Spine */
.br-book-spine{
  width:5px;flex-shrink:0;
  background:linear-gradient(180deg,rgba(255,215,100,.1),rgba(255,215,100,.03),rgba(255,215,100,.1));
  box-shadow:0 0 8px rgba(0,0,0,.3);
  position:relative;
}
.br-book-spine::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 0%,rgba(255,215,100,.06) 50%,transparent 100%);
}

/* Page content styling */
.br-page .br-img{
  width:100%;max-height:60%;object-fit:contain;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.02);
  box-shadow:0 4px 20px rgba(0,0,0,.2);
}
.br-page .br-title{
  font-size:clamp(1rem,2.5vw,1.3rem);font-weight:900;
  color:rgba(255,215,100,.9);
  text-align:center;line-height:1.3;
  text-shadow:0 0 20px rgba(255,215,100,.12);
}
.br-page .br-body{
  font-size:clamp(.78rem,2vw,.92rem);font-weight:600;
  color:rgba(255,255,255,.72);
  text-align:center;line-height:1.65;
  max-width:260px;
}
.br-page .br-emoji-big{
  font-size:3.5rem;
  filter:drop-shadow(0 4px 16px rgba(0,0,0,.3));
  animation:emojiPop .5s cubic-bezier(.4,0,.2,1);
}
@keyframes emojiPop{
  0%{transform:scale(0);opacity:0}
  60%{transform:scale(1.15)}
  100%{transform:scale(1);opacity:1}
}
.br-page .br-visual-hint{
  font-size:.6rem;font-weight:700;
  color:rgba(79,172,254,.45);
  text-transform:uppercase;letter-spacing:.1em;
}

/* Page turn overlay — sweeping light */
.br-page-turn{
  position:absolute;inset:0;pointer-events:none;
  z-index:5;overflow:hidden;
}
.br-page-turn.turn-forward::after{
  content:'';position:absolute;top:0;bottom:0;
  width:80px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),rgba(255,215,100,.04),transparent);
  animation:turnSweepForward .5s ease forwards;
}
@keyframes turnSweepForward{
  0%{right:100%;opacity:0}
  30%{opacity:1}
  100%{right:-80px;opacity:0}
}
.br-page-turn.turn-backward::after{
  content:'';position:absolute;top:0;bottom:0;
  width:80px;
  background:linear-gradient(270deg,transparent,rgba(255,255,255,.06),rgba(255,215,100,.04),transparent);
  animation:turnSweepBackward .5s ease forwards;
}
@keyframes turnSweepBackward{
  0%{left:100%;opacity:0}
  30%{opacity:1}
  100%{left:-80px;opacity:0}
}

/* Bottom nav */
.br-bottom{
  display:flex;align-items:center;justify-content:center;gap:1rem;
  width:100%;max-width:1240px;
  margin:0 auto;
  padding:.2rem 1rem .8rem;
  background:transparent;
  border-top:none;
  flex-shrink:0;
}
.br-nav-btn{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;padding:0;
  min-width:unset;
  transition:all .2s;
}
.br-nav-btn:active{transform:scale(.9)}
.br-dots{
  display:flex;gap:.35rem;flex-wrap:wrap;justify-content:center;
}
.br-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.06);
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.br-dot.active{
  background:rgba(255,215,100,.7);border-color:rgba(255,215,100,.5);
  transform:scale(1.4);
  box-shadow:0 0 10px rgba(255,215,100,.3);
}
.br-dot.done{
  background:var(--green);border-color:var(--green);
}

/* ── Phase 3: Book Finish ── */
.book-finish{
  position:fixed;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at 50% 50%,rgba(15,20,50,1),rgba(6,8,22,1) 70%);
  z-index:102;
  animation:finishFadeIn .8s ease;
  touch-action:none;
}
@keyframes finishFadeIn{from{opacity:0}to{opacity:1}}
.bf-glow{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(255,215,100,.1) 0%,rgba(79,172,254,.05) 40%,transparent 70%);
  border-radius:50%;
  animation:bookPulse 3s ease-in-out infinite;
}
.bf-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:1.8rem;
  text-align:center;
  padding:2rem;
}
.bf-char{
  width:98px;height:auto;object-fit:contain;
  filter:drop-shadow(0 8px 32px rgba(0,0,0,.5));
  animation:guideFloat 4s ease-in-out infinite;
}
.bf-speech{
  font-size:1.05rem;font-weight:800;
  color:rgba(255,255,255,.9);
  max-width:300px;line-height:1.5;
  text-shadow:0 2px 12px rgba(0,0,0,.3);
}
.bf-btn{
  font-size:1rem;padding:.85rem 2.5rem;
  background:linear-gradient(135deg,rgba(255,215,100,.15),rgba(79,172,254,.1));
  border:1px solid rgba(255,215,100,.25);
  color:rgba(255,215,100,.9);
  font-weight:800;
  border-radius:50px;
  cursor:pointer;
  transition:all .3s;
  box-shadow:0 4px 20px rgba(255,215,100,.1);
}
.bf-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 30px rgba(255,215,100,.2);
  border-color:rgba(255,215,100,.4);
}
.bf-btn:active{transform:scale(.96)}

/* Book artifact card on finish screen */
.bf-book-artifact{
  display:flex;align-items:center;justify-content:center;
  margin:.6rem 0;
}
.bf-artifact-card{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:120px;aspect-ratio:1/1.15;
  background:linear-gradient(135deg,rgba(138,43,226,0.22),rgba(79,172,254,0.12));
  border:2px solid rgba(138,43,226,0.35);
  border-radius:18px;
  padding:.8rem .5rem;
  box-shadow:0 8px 30px rgba(138,43,226,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
  animation:bfArtifactIn .6s cubic-bezier(.16,1,.3,1) both;
}
.bf-artifact-icon{font-size:2.2rem;line-height:1;margin-bottom:.2rem}
.bf-artifact-num{
  font-size:1.2rem;font-weight:900;color:#8a2be2;
  text-shadow:0 0 12px rgba(138,43,226,0.4);
}
.bf-artifact-title{
  font-size:.6rem;font-weight:700;color:var(--text2);
  text-align:center;margin-top:.15rem;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
@keyframes bfArtifactIn{
  0%{opacity:0;transform:scale(.5) translateY(20px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}

/* ── Mobile responsive ── */
@media(max-width:767px){
  .book-entry-scene{gap:1rem}
  .book-entry-guide{
    position:relative;right:auto;top:auto;transform:none;
    flex-direction:row;gap:.6rem;align-items:center;
    order:-1;
  }
  .book-entry-char{width:55px}
  .book-entry-speech{font-size:.68rem;max-width:200px}
  .book-cover{width:180px;height:240px}
  .book-title-text{font-size:.85rem}
  .book-glow{width:220px;height:220px}

  .br-topbar{padding:.4rem .8rem}
  .br-title{font-size:.8rem}
  .br-main{
    flex-direction:column;gap:.4rem;padding:.4rem .5rem;
  }
  .brfp-page-audio-circle{width:30px;height:30px}
  .brfp-page-audio-img{width:20px;height:20px}
  .brfp-page-audio-waves span{width:2px}
  .brfp-page-audio-waves{height:10px}

  .br-book-viewport{perspective:800px}
  .br-flip-book{width:min(100%,460px)}
  .brfp-inner{padding:1rem .9rem .85rem}
  .brfp-media{min-height:38%}
  .brfp-img{max-height:180px}
  .brfp-emoji{font-size:3rem}
  .brfp-title{font-size:.92rem}
  .brfp-body{font-size:.76rem;max-width:none}
  .brfp-content-inner{padding:.8rem .8rem .5rem;gap:.4rem}
  .brfp-full-emoji{font-size:clamp(3.5rem,9vw,5rem)}
  .brfp-keywords li{font-size:.82rem;padding:.3rem .7rem}

  .br-bottom{padding:.5rem .8rem .7rem;gap:.6rem}
  .br-nav-btn{width:40px;height:40px;font-size:.9rem}
  .br-dot{width:6px;height:6px}

  .bf-char{width:80px}
  .bf-speech{font-size:.9rem;max-width:260px}
  .bf-btn{font-size:.9rem;padding:.7rem 2rem}
}
@media(min-width:768px) and (max-width:1023px){
  .book-entry-guide{right:-140px}
  .book-entry-char{width:98px}
}

/* ═══════════════════════════════════════════════════
   COLLECTION PAGE — Museum v2
   ═══════════════════════════════════════════════════ */

.col-page{padding-bottom:3rem;padding-top:.3rem}
.col-toolbar{margin-bottom:.5rem}

/* ── Summary strip ── */
.col-summary{
  display:flex;align-items:center;justify-content:center;gap:1.6rem;
  padding:.7rem 1rem;
  margin-bottom:.5rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--glass);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.col-stat{
  display:flex;align-items:center;gap:.4rem;
  font-size:.78rem;font-weight:800;color:var(--text2);
}
.col-stat-val{
  font-size:1rem;font-weight:1000;color:#fff;
  font-variant-numeric:tabular-nums;
}
.col-stat-icon{font-size:1rem}

/* ── Sticky Tab Bar ── */
.col-tabs{
  position:sticky;
  top:var(--nav-h);
  z-index:40;
  display:flex;
  margin:0 0 1rem;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border2);
  background:linear-gradient(180deg, rgba(18,22,40,.96), rgba(8,11,22,.98));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 8px 32px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
}
.col-tab{
  flex:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.18rem;
  padding:.7rem .3rem .6rem;
  font:inherit;font-size:.72rem;font-weight:800;
  color:var(--text3);
  background:none;border:none;
  cursor:pointer;
  transition:color .25s, background .25s;
  position:relative;
}
.col-tab+.col-tab::before{
  content:'';
  position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:rgba(255,255,255,.06);
}
.col-tab:hover{
  color:var(--text2);
  background:rgba(255,255,255,.03);
}
.col-tab.active{
  color:#fff;
  background:linear-gradient(180deg, rgba(79,172,254,.15), rgba(79,172,254,.04));
}
.col-tab.active::after{
  content:'';
  position:absolute;bottom:0;left:16%;right:16%;height:3px;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg, var(--blue), #00c6fb);
  box-shadow:0 0 10px rgba(79,172,254,.45);
}
.col-tab.active+.col-tab::before{background:transparent}
.col-tab-icon{font-size:1.05rem;line-height:1}
.col-tab-label{font-size:.68rem;letter-spacing:.03em}
.col-tab-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:18px;
  padding:0 .4rem;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  font-size:.58rem;font-weight:900;
  color:var(--text3);
  margin-top:.1rem;
}
.col-tab.active .col-tab-count{
  background:rgba(79,172,254,.2);
  color:rgba(255,255,255,.85);
}

/* ── Content Grid ── */
.col-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:.75rem;
  animation:colFadeIn .3s ease;
}
@keyframes colFadeIn{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}

/* ── Capsule (unlocked) ── */
.col-capsule{
  position:relative;
  display:flex;flex-direction:column;align-items:center;
  padding:1.1rem .6rem .85rem;
  border-radius:20px;
  border:1px solid var(--border2);
  background:linear-gradient(135deg, rgba(11,13,26,.92), rgba(24,28,51,.92));
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 4px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
  cursor:pointer;
  transition:all .25s ease;
  text-align:center;
  overflow:hidden;
}
.col-capsule::before{
  content:'';
  position:absolute;inset:0;
  border-radius:20px;
  background:radial-gradient(ellipse at 50% 0%, rgba(79,172,254,.06), transparent 60%);
  pointer-events:none;
}
.col-capsule:hover{
  transform:translateY(-3px);
  border-color:rgba(79,172,254,.25);
  box-shadow:0 8px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(79,172,254,.08), inset 0 1px 0 rgba(255,255,255,.06);
}
.col-capsule:active{transform:scale(.97)}

/* Book capsule in collection */
.col-book-capsule{
  border-color:rgba(138,43,226,0.3);
  background:linear-gradient(135deg, rgba(138,43,226,.12), rgba(79,172,254,.08), rgba(11,13,26,.92));
  padding:.9rem .5rem .7rem;
  gap:0;
}
.col-book-capsule:hover{
  border-color:rgba(138,43,226,0.5);
  box-shadow:0 8px 28px rgba(138,43,226,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
.col-book-capsule:hover .col-book-img{
  transform:scale(1.05) translateY(-3px);
  filter:drop-shadow(0 8px 20px rgba(138,43,226,.3));
}

/* Book cover thumbnail */
.col-book-cover{
  width:110px;height:142px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.col-book-img{
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));
  transition:transform .3s ease, filter .3s ease;
}

/* Thin divider line */
.col-book-divider{
  width:85%;height:1px;margin:.55rem auto .45rem;
  background:linear-gradient(90deg, transparent, rgba(138,43,226,.4), rgba(79,172,254,.35), rgba(138,43,226,.4), transparent);
}

/* Label plate below the line */
.col-book-plate{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:0 .2rem;
  max-width:100%;
}
.col-book-plate-ring{
  position:relative;
  width:28px;height:28px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
}
/* spinning conic-gradient ring around the number */
.col-book-plate-ring::before{
  content:'';
  position:absolute;inset:0;
  border-radius:50%;
  padding:2px;
  background:conic-gradient(
    from var(--plate-angle, 0deg),
    #8b5cf6, #4facfe, #ffd32a, #ff6b6b, #8b5cf6
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite:exclude;
  animation:plateRingSpin 3s linear infinite;
}
@keyframes plateRingSpin{
  to{ --plate-angle:360deg; }
}
@property --plate-angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
.col-book-plate-num{
  color:#fff;
  font-size:.82rem;font-weight:1000;
  position:relative;z-index:1;
  text-shadow:0 1px 4px rgba(0,0,0,.5);
}
.col-book-plate-title{
  color:#d4bfff;
  font-size:.62rem;font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ── Generic collection item capsule (medals, cards, artifacts, trophies) ── */
.col-item-capsule{
  border-color:rgba(180,150,80,.2);
  background:linear-gradient(135deg, rgba(120,90,40,.1), rgba(80,60,30,.06), rgba(11,13,26,.92));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:.9rem .5rem .7rem;
  gap:0;
  transition:all .25s cubic-bezier(.4,0,.2,1);
}
.col-item-capsule:hover{
  border-color:rgba(180,150,80,.35);
  background:linear-gradient(135deg, rgba(140,100,50,.15), rgba(100,70,40,.08), rgba(15,17,30,.95));
  box-shadow:0 8px 28px rgba(120,90,40,.15), 0 0 20px rgba(165,94,234,.08), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(-2px);
}
.col-item-cover{
  width:110px;height:142px;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.col-item-img{
  width:100%;height:100%;
  object-fit:contain;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.45));
  transition:transform .3s ease, filter .3s ease;
}
.col-item-locked{
  cursor:default;opacity:.7;
}
.col-item-locked .col-item-img{
  filter:grayscale(1) brightness(.6) drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.col-item-locked:hover{
  transform:none;
  border-color:rgba(180,150,80,.2);
  box-shadow:0 4px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.col-item-locked:hover .col-item-img{
  transform:none;
  filter:grayscale(1) brightness(.6) drop-shadow(0 4px 14px rgba(0,0,0,.45));
}

/* ── Locked book preview ── */
.col-book-locked{
  cursor:default;
  opacity:.7;
}
.col-book-locked:hover{
  transform:none;
  border-color:rgba(138,43,226,0.3);
  box-shadow:0 4px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.col-book-locked .col-book-img{
  filter:grayscale(1) brightness(.6) drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.col-book-locked:hover .col-book-img{
  transform:none;
  filter:grayscale(1) brightness(.6) drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.col-book-locked .col-book-divider{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}
.col-book-locked .col-book-plate-title{
  color:rgba(255,255,255,.3);
}
.col-book-lock{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;
  filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));
}

/* ── Lesson styles (similar to books but with lesson theme) ── */
.col-lesson-capsule{
  border-color:rgba(255,183,77,0.3);
  background:linear-gradient(135deg, rgba(255,183,77,.12), rgba(255,120,80,.08), rgba(11,13,26,.92));
}
.col-lesson-capsule:hover{
  border-color:rgba(255,183,77,0.5);
  box-shadow:0 8px 28px rgba(255,183,77,.15), inset 0 1px 0 rgba(255,255,255,.06);
}
.col-lesson-capsule:hover .col-item-img{
  transform:scale(1.05) translateY(-3px);
  filter:drop-shadow(0 8px 20px rgba(255,183,77,.3));
}

/* Locked lesson */
.col-lesson-locked{
  cursor:default;
  opacity:.7;
}
.col-lesson-locked:hover{
  transform:none;
  border-color:rgba(255,183,77,0.3);
  box-shadow:0 4px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04);
}
.col-lesson-locked .col-item-img{
  filter:grayscale(1) brightness(.6) drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.col-lesson-locked:hover .col-item-img{
  transform:none;
  filter:grayscale(1) brightness(.6) drop-shadow(0 4px 14px rgba(0,0,0,.45));
}
.col-lesson-locked .col-book-divider{
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}
.col-lesson-locked .col-book-plate-title{
  color:rgba(255,255,255,.3);
}

/* ── Book Rise-from-Shelf Animation ── */
.book-rise-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(4,6,16,0);
  transition:background .4s ease;
  pointer-events:all;
}
.book-rise-overlay.active{
  background:rgba(4,6,16,.85);
}
.book-rise-overlay.fading{
  opacity:0;
  transition:opacity .3s ease;
}
.book-rise-cover{
  position:fixed;
  transition:all .7s cubic-bezier(.22,1,.36,1);
  z-index:10000;
  filter:drop-shadow(0 0 0 transparent);
}
.book-rise-cover img{
  width:100%;height:100%;object-fit:contain;
  display:block;
}
.book-rise-cover.book-rise-active{
  left:50% !important;
  top:50% !important;
  width:220px !important;
  height:284px !important;
  transform:translate(-50%, -50%);
  filter:drop-shadow(0 20px 50px rgba(138,43,226,.35)) drop-shadow(0 0 30px rgba(79,172,254,.2));
}
.book-rise-cover.book-rise-open{
  filter:drop-shadow(0 0 60px rgba(255,207,86,.5)) drop-shadow(0 0 100px rgba(138,43,226,.4));
  transform:translate(-50%, -50%) scale(1.1);
  opacity:.8;
}
@media (max-width:600px){
  .col-book-cover{width:85px;height:110px}
  .col-item-cover{width:85px;height:110px}
  .col-book-plate{font-size:.56rem}
  .book-rise-cover.book-rise-active{
    width:180px !important;height:232px !important;
  }
}

/* featured */
.col-capsule.featured{border-color:rgba(255,207,86,.25)}
.col-capsule.featured::before{background:radial-gradient(ellipse at 50% 0%, rgba(255,207,86,.1), transparent 60%)}
.col-capsule.featured:hover{border-color:rgba(255,207,86,.4);box-shadow:0 8px 28px rgba(0,0,0,.35), 0 0 16px rgba(255,207,86,.08)}

/* color accents per category */
.col-capsule.accent-gold{border-color:rgba(255,211,42,.18)}
.col-capsule.accent-gold::before{background:radial-gradient(ellipse at 50% 0%, rgba(255,211,42,.08), transparent 55%)}
.col-capsule.accent-red{border-color:rgba(255,71,87,.18)}
.col-capsule.accent-red::before{background:radial-gradient(ellipse at 50% 0%, rgba(255,71,87,.08), transparent 55%)}
.col-capsule.accent-blue{border-color:rgba(79,172,254,.18)}
.col-capsule.accent-blue::before{background:radial-gradient(ellipse at 50% 0%, rgba(79,172,254,.08), transparent 55%)}
.col-capsule.accent-purple{border-color:rgba(165,94,234,.18)}
.col-capsule.accent-purple::before{background:radial-gradient(ellipse at 50% 0%, rgba(165,94,234,.08), transparent 55%)}

.col-cap-dome{
  width:88px;height:88px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  background:var(--glass);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:.55rem;
  position:relative;
  overflow:hidden;
  transition:border-color .25s;
}
.col-capsule:hover .col-cap-dome{border-color:rgba(79,172,254,.15)}
.col-cap-dome::after{
  content:'';position:absolute;
  left:12%;right:12%;bottom:6px;height:10px;border-radius:50%;
  background:radial-gradient(circle, rgba(79,172,254,.1), transparent 70%);
  pointer-events:none;
}
.col-cap-icon{font-size:2.4rem;position:relative;z-index:1;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}
.col-cap-img{
  width:60px;height:60px;object-fit:contain;position:relative;z-index:1;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.35));
}

.col-cap-name{
  font-size:.76rem;font-weight:900;color:var(--text);
  margin-bottom:.15rem;line-height:1.3;
}
.col-cap-meta{
  font-size:.58rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--text3);
}

/* ── Mini progress bar inside capsule ── */
.col-cap-bar{
  width:80%;height:4px;
  border-radius:99px;
  background:rgba(255,255,255,.06);
  margin-top:.4rem;
  overflow:hidden;
}
.col-cap-bar-fill{
  height:100%;border-radius:99px;
  background:linear-gradient(90deg, var(--blue), #00c6fb);
  transition:width .4s ease;
}

/* ── Locked Capsule ── */
.col-capsule.locked{cursor:default;border-color:var(--border)}
.col-capsule.locked::before{background:none}
.col-capsule.locked:hover{transform:none;border-color:var(--border);box-shadow:0 4px 18px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.04)}
.col-capsule.locked .col-cap-dome{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.05)}
.col-capsule.locked .col-cap-dome::after{display:none}
.col-cap-lock{font-size:1.8rem;font-weight:1000;color:rgba(255,255,255,.12);position:relative;z-index:1}
.col-capsule.locked .col-cap-name{color:var(--text3)}

/* ── Empty state ── */
.col-empty{
  grid-column:1/-1;
  padding:2.5rem 1.5rem;
  border-radius:20px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(11,13,26,.92), rgba(24,28,51,.92));
  color:var(--text3);
  text-align:center;
  font-size:.85rem;font-weight:700;
}

/* ── Detail overlay ── */
.col-detail-overlay{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,6,16,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:colFadeIn .2s ease;
}
.col-detail-card{
  width:min(340px, 88vw);
  padding:1.8rem 1.4rem 1.4rem;
  border-radius:24px;
  border:1px solid var(--border2);
  background:linear-gradient(135deg, rgba(11,13,26,.96), rgba(24,28,51,.96));
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  box-shadow:0 24px 64px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.04);
  text-align:center;
  animation:colPopIn .3s cubic-bezier(.22,1,.36,1);
  position:relative;overflow:hidden;
}
.col-detail-card::before{
  content:'';position:absolute;inset:0;border-radius:24px;
  background:radial-gradient(ellipse at 50% 0%, rgba(79,172,254,.08), transparent 50%);
  pointer-events:none;
}
@keyframes colPopIn{
  from{opacity:0;transform:scale(.92) translateY(10px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.col-detail-dome{
  width:110px;height:110px;margin:0 auto .9rem;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:var(--glass);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.col-detail-dome::after{
  content:'';position:absolute;
  left:15%;right:15%;bottom:8px;height:12px;border-radius:50%;
  background:radial-gradient(circle, rgba(79,172,254,.14), transparent 70%);
}
.col-detail-icon{font-size:3.2rem;position:relative;z-index:1;filter:drop-shadow(0 2px 10px rgba(0,0,0,.3))}
.col-detail-img{width:72px;height:72px;object-fit:contain;position:relative;z-index:1;filter:drop-shadow(0 6px 16px rgba(0,0,0,.35))}
.col-detail-name{font-size:1.1rem;font-weight:1000;color:var(--text);margin-bottom:.3rem;position:relative}
.col-detail-desc{font-size:.78rem;line-height:1.7;color:var(--text2);margin-bottom:1.2rem;position:relative}
.col-detail-close{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  padding:.55rem 1.8rem;
  border-radius:var(--r);
  border:1px solid var(--border2);
  background:linear-gradient(135deg, rgba(11,13,26,.92), rgba(24,28,51,.92));
  color:var(--text2);font:inherit;font-size:.82rem;font-weight:800;
  cursor:pointer;transition:all .2s;backdrop-filter:blur(10px);
}
.col-detail-close:hover{background:var(--glass3);color:var(--text);border-color:var(--border3);transform:translateY(-1px)}

/* ── Responsive ── */
@media (max-width:600px){
  .col-grid{grid-template-columns:repeat(2, 1fr);gap:.6rem}
  .col-hero-img{width:min(120px, 32vw)}
  .col-tab{padding:.65rem .2rem}
  .col-tab-icon{font-size:.95rem}
  .col-tab-label{font-size:.62rem}
  .col-cap-dome{width:76px;height:76px;border-radius:18px}
  .col-cap-icon{font-size:2rem}
  .col-capsule{padding:.9rem .5rem .7rem;border-radius:16px}
  .col-summary{gap:.8rem;padding:.6rem .7rem}
  .col-stat{font-size:.7rem}
  .col-stat-val{font-size:.88rem}
}

/* ── Sensei Intro Popup ─────────────────────────── */
.sensei-popup-overlay{
  position:fixed;inset:0;z-index:9999;
  background:rgba(8,6,20,.88);
  display:flex;align-items:center;justify-content:center;
  animation:senseiOverlayIn .4s ease both;
}
.sensei-popup-overlay.hidden{display:none}
@keyframes senseiOverlayIn{
  0%{opacity:0}
  100%{opacity:1}
}
.sensei-popup-card{
  position:relative;
  width:min(380px,90vw);
  background:linear-gradient(150deg,rgba(30,25,65,.92),rgba(18,15,42,.96));
  backdrop-filter:blur(20px);
  border:1.5px solid rgba(140,120,255,.25);
  border-radius:28px;
  padding:2.2rem 1.5rem 2rem;
  display:flex;flex-direction:column;align-items:center;gap:1.4rem;
  box-shadow:0 12px 60px rgba(90,60,255,.3),inset 0 1px 0 rgba(255,255,255,.06);
  animation:senseiCardIn .5s ease both .15s;
}
@keyframes senseiCardIn{
  0%{opacity:0;transform:translateY(40px) scale(.9)}
  100%{opacity:1;transform:translateY(0) scale(1)}
}
.sensei-popup-char{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
}
.sensei-popup-img{
  width:160px;height:auto;
  filter:drop-shadow(0 6px 28px rgba(120,100,255,.45));
  animation:senseiFloat 4s ease-in-out infinite;
}
@keyframes senseiFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
.sensei-popup-name{
  font-family:'Luckiest Guy',cursive;
  font-size:1.8rem;
  color:#c4b0ff;
  text-shadow:0 2px 16px rgba(140,110,255,.5);
  letter-spacing:.04em;
}
/* Wave bars — voice hologram */
.sensei-popup-wave-wrap{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  min-height:60px;
}
.sensei-wave-bars{
  display:flex;align-items:center;justify-content:center;gap:3px;
  height:48px;
}
.sensei-wave-bars span{
  display:block;
  width:4px;
  background:linear-gradient(180deg,#a78bfa,#7c3aed);
  border-radius:4px;
  height:12px;
  animation:senseiBar 1.2s ease-in-out infinite;
}
.sensei-wave-bars span:nth-child(1){animation-delay:0s;height:10px}
.sensei-wave-bars span:nth-child(2){animation-delay:.08s;height:18px}
.sensei-wave-bars span:nth-child(3){animation-delay:.16s;height:28px}
.sensei-wave-bars span:nth-child(4){animation-delay:.24s;height:38px}
.sensei-wave-bars span:nth-child(5){animation-delay:.32s;height:44px}
.sensei-wave-bars span:nth-child(6){animation-delay:.40s;height:38px}
.sensei-wave-bars span:nth-child(7){animation-delay:.48s;height:48px}
.sensei-wave-bars span:nth-child(8){animation-delay:.56s;height:38px}
.sensei-wave-bars span:nth-child(9){animation-delay:.64s;height:44px}
.sensei-wave-bars span:nth-child(10){animation-delay:.72s;height:38px}
.sensei-wave-bars span:nth-child(11){animation-delay:.80s;height:28px}
.sensei-wave-bars span:nth-child(12){animation-delay:.88s;height:18px}
.sensei-wave-bars span:nth-child(13){animation-delay:.96s;height:28px}
.sensei-wave-bars span:nth-child(14){animation-delay:1.04s;height:18px}
.sensei-wave-bars span:nth-child(15){animation-delay:1.12s;height:10px}
@keyframes senseiBar{
  0%,100%{transform:scaleY(.3);opacity:.5}
  50%{transform:scaleY(1);opacity:1}
}
.sensei-wave-bars.paused span{animation-play-state:paused;opacity:.25}
.sensei-wave-status{
  font-size:.8rem;
  color:var(--text2,#a09cb0);
}
/* Buttons */
.sensei-popup-buttons{
  display:flex;gap:1rem;width:100%;
  animation:senseiButtonsIn .4s ease both;
}
.sensei-popup-buttons.hidden{display:none}
@keyframes senseiButtonsIn{
  0%{opacity:0;transform:translateY(16px)}
  100%{opacity:1;transform:translateY(0)}
}
.sensei-btn-yes{
  flex:1;
  padding:.9rem 1.2rem;
  font-size:1.1rem;font-weight:800;
  border-radius:14px;
  background:linear-gradient(135deg,#7c3aed,#6d28d9);
  color:#fff;
  border:none;cursor:pointer;
  box-shadow:0 4px 20px rgba(124,58,237,.4);
  transition:transform .15s,box-shadow .15s;
}
.sensei-btn-yes:hover{transform:translateY(-2px);box-shadow:0 6px 28px rgba(124,58,237,.5)}
.sensei-btn-yes:active{transform:translateY(0)}
.sensei-btn-no{
  padding:.9rem 1.5rem;
  font-size:1rem;font-weight:700;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:var(--text2,#a09cb0);
  border:1px solid rgba(255,255,255,.1);
  cursor:pointer;
  transition:background .15s;
}
.sensei-btn-no:hover{background:rgba(255,255,255,.1)}
/* Lesson block in Sensei-waiting mode */
.action-lesson.sensei-waiting .home-block-icon-img{
  animation:senseiFloat 4s ease-in-out infinite;
  filter:drop-shadow(0 4px 16px rgba(120,100,255,.4));
}
.action-lesson.sensei-waiting{
  border:1.5px solid rgba(140,120,255,.3);
  box-shadow:0 0 24px rgba(110,80,255,.15);
}
@media (max-width:600px){
  .sensei-popup-card{padding:1.6rem 1.2rem 1.5rem;border-radius:22px}
  .sensei-popup-img{width:130px}
  .sensei-popup-name{font-size:1.5rem}
  .sensei-wave-bars span{width:3px}
  .sensei-btn-yes{font-size:1rem;padding:.8rem 1rem}
  .sensei-btn-no{font-size:.9rem;padding:.8rem 1.2rem}
}

/* ══════════════════════════════════════════════════
   QUEST RENDERERS — Visual Task Components
   ══════════════════════════════════════════════════ */

/* ── Audio MC play button ── */
.quest-audio-play-btn{
  display:flex;align-items:center;gap:.6rem;
  background:linear-gradient(135deg,rgba(79,172,254,.2),rgba(79,172,254,.1));
  border:1.5px solid rgba(79,172,254,.4);
  border-radius:14px;padding:.7rem 1.4rem;margin:0 auto .8rem;
  color:#fff;font-size:1rem;font-weight:600;cursor:pointer;
  transition:all .3s ease;
}
.quest-audio-play-btn:hover{background:rgba(79,172,254,.25);border-color:rgba(79,172,254,.6)}
.quest-audio-play-btn.playing .audio-icon{animation:audioPulse 1s ease-in-out infinite}
@keyframes audioPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}

/* ── Image MC grid ── */
.quest-img-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.6rem;
  width:100%;max-width:420px;margin:0 auto;
}
.quest-img-btn{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.12);
  border-radius:16px;padding:.8rem .6rem;
  cursor:pointer;transition:all .25s ease;
  min-height:110px;justify-content:center;
}
.quest-img-btn:hover{background:rgba(79,172,254,.1);border-color:rgba(79,172,254,.35)}
.quest-img-btn:active{transform:scale(.96)}
.quest-img-btn.correct{border-color:#43e97b;background:rgba(67,233,123,.12);box-shadow:0 0 16px rgba(67,233,123,.2)}
.quest-img-btn.wrong{border-color:#ff6b6b;background:rgba(255,107,107,.12);box-shadow:0 0 16px rgba(255,107,107,.2)}
.quest-img-btn.selected{border-color:#4facfe;background:rgba(79,172,254,.15)}
.quest-img-btn-svg{
  width:72px;height:72px;flex-shrink:0;
}
.quest-img-btn-label{
  font-size:.82rem;color:rgba(255,255,255,.8);text-align:center;
  line-height:1.2;font-weight:500;
}

/* ── Option with icon ── */
.option-btn-with-icon{text-align:left;justify-content:flex-start}
.quest-opt-icon{font-size:1.3rem;margin-right:.3rem}

/* ── Pattern strip ── */
.quest-pattern-strip{
  margin:0 auto .6rem;padding:.4rem;text-align:center;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}

/* ── Match (drag-and-drop) ── */
.quest-match-container{
  display:flex;gap:.8rem;width:100%;max-width:420px;margin:0 auto .8rem;
  min-height:120px;align-items:flex-start;
}
.quest-match-col{display:flex;flex-direction:column;gap:.5rem;flex:1}
.quest-match-lines{width:24px;flex-shrink:0}
.quest-match-item{
  padding:.7rem .8rem;border-radius:12px;font-size:.9rem;font-weight:600;
  cursor:pointer;transition:all .2s ease;text-align:center;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.15);
  color:#fff;
}
.quest-match-item:hover{border-color:rgba(79,172,254,.4)}
.quest-match-item.selected{border-color:#4facfe;background:rgba(79,172,254,.15);box-shadow:0 0 12px rgba(79,172,254,.2)}
.quest-match-item.matched{border-color:rgba(255,215,0,.4);background:rgba(255,215,0,.08)}
.quest-match-item.correct{border-color:#43e97b;background:rgba(67,233,123,.12)}
.quest-match-item.wrong{border-color:#ff6b6b;background:rgba(255,107,107,.12)}
/* Override grid layout for sort/match containers */
.task-options:has(.quest-sort-container),.task-options:has(.quest-match-container){
  display:flex;flex-direction:column;align-items:stretch;
}
.quest-match-submit,.quest-sort-submit{
  display:block;margin:.6rem auto 0;padding:.6rem 1.6rem;width:auto;max-width:220px;
  background:linear-gradient(135deg,#4facfe,#00f2fe);
  border:none;border-radius:12px;color:#ffffff;
  font-size:1rem;font-weight:700;cursor:pointer;
  transition:all .2s ease;
}
.quest-match-submit:disabled,.quest-sort-submit:disabled{
  opacity:.4;cursor:not-allowed;
}
.quest-match-submit:hover:not(:disabled),.quest-sort-submit:hover:not(:disabled){transform:scale(1.03)}

/* ── Sort / Sequence (draggable) ── */
.quest-sort-container{
  display:flex;flex-direction:column;gap:.5rem;
  width:100%;max-width:380px;margin:0 auto;
}
.quest-sort-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.65rem .8rem;border-radius:12px;
  background:rgba(255,255,255,.06);border:1.5px solid rgba(255,255,255,.12);
  color:#fff;font-size:.95rem;cursor:grab;
  transition:all .2s ease;user-select:none;
  -webkit-user-select:none;
}
.quest-sort-item.dragging{opacity:.5;border-color:#4facfe;background:rgba(79,172,254,.15)}
.quest-sort-handle{color:rgba(255,255,255,.3);font-size:1.1rem;cursor:grab}
.quest-sort-text{flex:1}
.quest-sort-num{
  background:rgba(255,255,255,.1);border-radius:50%;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;flex-shrink:0;
}
.quest-sort-item.correct{border-color:#43e97b;background:rgba(67,233,123,.1)}
.quest-sort-item.wrong{border-color:#ff6b6b;background:rgba(255,107,107,.1)}

/* ── Maze ── */
.quest-maze-wrap{
  display:flex;justify-content:center;margin:0 auto .6rem;
}

/* ── Responsive ── */
@media (max-width:600px){
  .quest-img-btn{min-height:90px;padding:.6rem .4rem}
  .quest-img-btn-svg{width:56px;height:56px}
  .quest-img-btn-label{font-size:.72rem}
  .quest-match-container{gap:.4rem}
  .quest-match-item{padding:.5rem .6rem;font-size:.82rem}
  .quest-sort-item{padding:.5rem .6rem;font-size:.88rem}
}

/* ═══════════════════════════════════════════════════
   SENSEI CHAT PAGE — 3-block layout
   [1] Full-width slide image
   [2] Sensei (left) + Content (right)
   ═══════════════════════════════════════════════════ */

.sensei-chat-page {
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  overflow: visible;
  width: 100%;
}

/* ── [1] Full-width slide image ── */
.sensei-slide-full {
  position: relative;
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
  background: #000;
  display: none;
}
.sensei-slide-img-full {
  width: 100%;
  display: block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ── [2] Main area: Sensei + Content ── */
.sensei-chat-main {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  max-width: 900px;
  margin: .6rem auto 0;
  padding: 0 1.5rem;
  width: 100%;
}

/* ── LEFT: Character ── */
.sensei-character-col {
  flex: 0 0 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: sticky;
  top: 1.5rem;
  align-self: flex-start;
}

.sensei-character-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.sensei-character-img {
  width: 98px;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.3));
  transition: transform .15s ease;
  animation: charFloat 4s ease-in-out infinite;
  flex-shrink: 0;
  cursor: pointer;
}
.sensei-character-img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 8px 32px rgba(124,58,237,0.3));
}
.sensei-character-img:active {
  transform: scale(.94);
}

@keyframes charFloat {
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}

/* ── Nav buttons ── */
.sensei-char-nav {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-top: .6rem;
  flex-shrink: 0;
  width: 100%;
}
.sensei-char-nav-btn {
  padding: .4rem .6rem;
  border-radius: 12px;
  border: 1px solid rgba(180,150,100,.25);
  background: rgba(20,12,35,.6);
  color: rgba(240,225,200,.7);
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  backdrop-filter: blur(6px);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  text-align: center;
}
.sensei-char-nav-btn:hover {
  background: rgba(40,25,60,.7);
  border-color: rgba(200,170,110,.5);
  color: rgba(255,240,215,.9);
}

/* ── RIGHT: Content column ── */
.sensei-content-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

/* ── Speech bubble ── */
.sensei-speech-bubble {
  display: none;
  position: relative;
  background: linear-gradient(135deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  padding: 1rem 1.2rem;
  width: 100%;
  min-height: 50px;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* Bubble tail pointing left to Sensei */
.sensei-speech-bubble::before {
  content: '';
  position: absolute;
  top: 20px;
  left: -10px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 12px solid rgba(255,255,255,0.10);
}

.sensei-speech-text {
  font-size: .95rem;
  line-height: 1.5;
  color: var(--text, #f1f2f6);
  font-weight: 600;
}

/* ── Typing dots ── */
.sensei-typing-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: flex-start;
  padding: .5rem 0;
}
.sensei-typing-dots span {
  width: 8px; height: 8px;
  background: var(--text3, #5c5f72);
  border-radius: 50%;
  animation: typingBounce 1.4s ease-in-out infinite;
}
.sensei-typing-dots span:nth-child(2){animation-delay:.2s}
.sensei-typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typingBounce {
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-8px);opacity:1}
}

/* ── Understand block ── */
.sensei-understand-wrap {
  width: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: slideDown .35s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes slideDown {
  0%{opacity:0;transform:translateY(-16px)}
  100%{opacity:1;transform:translateY(0)}
}
.sensei-understand-wrap .sensei-question-text {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text, #f1f2f6);
  margin-bottom: .8rem;
}
.sensei-understand-wrap .sensei-question-options {
  display: flex;
  gap: .5rem;
}
.sensei-understand-wrap .sensei-answer-btn {
  flex: 1;
  min-width: 120px;
  font-size: .9rem;
  padding: .75rem 1.2rem;
}

/* ── Question block ── */
.sensei-question-wrap {
  width: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 2px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 1.2rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  animation: slideDown .35s cubic-bezier(.22,.61,.36,1) both;
}
.sensei-question-header {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  margin-bottom: .8rem;
}
.sensei-question-header .sensei-question-text {
  flex: 1;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text, #f1f2f6);
  cursor: pointer;
}
.sensei-question-header .sensei-question-text:hover {
  opacity: .85;
}
.sensei-question-header .sensei-question-text.playing {
  background: linear-gradient(90deg, var(--purple, #a55eea) 0%, var(--blue, #4facfe) 33%, var(--purple, #a55eea) 66%, var(--blue, #4facfe) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmerText 1.5s linear infinite;
}
@keyframes shimmerText {
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.sensei-question-wrap .sensei-question-options {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: stretch;
}
.sensei-question-wrap .sensei-question-feedback {
  margin-top: .7rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--text2, #a4a8b8);
}
.sensei-question-wrap .sensei-question-next {
  margin-top: .8rem;
}

/* ── Answer buttons (shared) ── */
.sensei-btn-row {
  display: flex;
  gap: .7rem;
  flex-wrap: wrap;
}
.sensei-answer-btn {
  flex: 1;
  min-width: 120px;
  padding: .85rem 1.2rem;
  font-size: .92rem;
  font-weight: 700;
  border-radius: 20px;
  cursor: pointer;
  transition: all .2s ease;
  backdrop-filter: blur(8px);
  font-family: inherit;
  user-select: none;
  background: rgba(30,18,50,0.7);
  border: 1px solid rgba(180,150,100,0.3);
  color: rgba(240,225,200,0.82);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  position: relative;
  overflow: hidden;
}
.sensei-answer-btn:hover:not(:disabled) {
  background: rgba(40,25,60,0.8);
  border-color: rgba(200,170,110,0.5);
  color: rgba(255,240,215,0.95);
  box-shadow: 0 0 20px rgba(200,160,80,.15);
  transform: translateY(-1px);
}
.sensei-answer-btn:active {
  background: rgba(60,35,20,0.8);
  border-color: rgba(220,180,100,0.6);
  color: #f0d88a;
  box-shadow: 0 0 28px rgba(200,150,60,.25), inset 0 0 12px rgba(200,150,60,.1);
  transform: translateY(0);
}
.sensei-answer-btn:disabled {
  opacity: .5;
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* Button variants */
.sensei-btn-yes {
  background: rgba(10,60,40,.5);
  border-color: rgba(80,200,120,.3);
  color: #a0e8c0;
}
.sensei-btn-yes:hover:not(:disabled) {
  background: rgba(10,70,45,.6);
  border-color: rgba(100,220,140,.45);
  color: #b8f0d0;
}
.sensei-btn-no {
  background: rgba(60,20,20,.5);
  border-color: rgba(200,100,100,.25);
  color: #e8b0b0;
}
.sensei-btn-no:hover:not(:disabled) {
  background: rgba(70,25,25,.6);
  border-color: rgba(220,120,120,.35);
  color: #f0c0c0;
}
.sensei-btn-option {
  background: rgba(30,18,50,0.7);
  border-color: rgba(180,150,100,0.3);
  color: rgba(240,225,200,0.82);
}
.sensei-btn-option:hover:not(:disabled) {
  background: rgba(40,25,60,0.8);
  border-color: rgba(200,170,110,0.5);
  color: rgba(255,240,215,0.95);
}

/* ── Unified button with inline audio icon ── */
.sensei-btn-with-audio {
  display: flex !important;
  align-items: center;
  gap: 0;
  padding: 0 !important;
  overflow: hidden;
}
.sba-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .85rem 0 .85rem 1.2rem;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
.sba-divider {
  width: 1px;
  height: 24px;
  background: rgba(180,150,100,0.2);
  flex-shrink: 0;
}
.sba-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  flex-shrink: 0;
  font-size: .8rem;
  color: rgba(200,170,120,0.7);
  cursor: pointer;
  transition: all .2s ease;
  padding: .85rem 0;
}
.sba-icon:hover {
  color: #f0d88a;
  background: rgba(200,160,80,0.12);
}
.sba-icon.playing {
  color: #f0d88a;
  background: rgba(200,160,80,0.2);
  animation: audioPulse 1.2s ease-in-out infinite;
}

/* ── Audio icon on slide ── */
.sensei-audio-icon {
  width: 38px;
  height: 34px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  color: rgba(255,255,255,.6);
  font-size: .85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s ease;
  padding: 0;
  font-family: inherit;
  flex-shrink: 0;
  z-index: 2;
}
.sensei-audio-icon:hover {
  background: rgba(124,58,237,.35);
  border-color: rgba(124,58,237,.5);
  color: #fff;
  transform: scale(1.08);
}
.sensei-audio-icon.playing {
  background: rgba(124,58,237,.4);
  border-color: rgba(124,58,237,.55);
  color: #fff;
  animation: audioPulse 1.2s ease-in-out infinite;
}
@keyframes audioPulse {
  0%,100%{box-shadow:0 0 0 0 rgba(124,58,237,.4)}
  50%{box-shadow:0 0 0 12px rgba(124,58,237,0)}
}
.sensei-replay-icon {
  position: absolute;
  bottom: 12px;
  left: 12px;
}

/* Slide counter & stars */
.sensei-slide-counter {
  position: absolute;
  top: 12px;
  left: 14px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 4px 10px;
  font-size: .75rem;
  color: rgba(255,255,255,.7);
  font-weight: 600;
  z-index: 15;
}
.sensei-stars-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(20,12,35,0.82);
  border: 1px solid rgba(200,160,80,.3);
  border-radius: 10px;
  padding: 3px 10px;
  font-size: .8rem;
  font-weight: 800;
  color: #f0d88a;
  z-index: 15;
  display: flex;
  align-items: center;
  gap: 4px;
  backdrop-filter: blur(6px);
}
.sensei-stars-badge.pulse {
  animation: starPulse .5s ease-out;
}
@keyframes starPulse {
  0%{transform:scale(1)}
  50%{transform:scale(1.3)}
  100%{transform:scale(1)}
}

/* ── Start overlay ── */
.sensei-start-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(ellipse at 50% 40%, #141830 0%, #060816 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s ease;
  overflow: hidden;
}
.sensei-start-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.sensei-start-card {
  text-align: center;
  animation: senseiCardIn .5s ease both;
}
@keyframes senseiCardIn {
  from { opacity: 0; transform: scale(.9) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.sensei-start-img {
  width: 98px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,.4));
  animation: charFloat 4s ease-in-out infinite;
  cursor: pointer;
  transition: transform .15s ease;
}
.sensei-start-img:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 8px 32px rgba(124,58,237,0.3));
}
.sensei-start-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--text, #f1f2f6);
  margin-bottom: .4rem;
}
.sensei-start-sub {
  font-size: .9rem;
  color: var(--text2, #a4a8b8);
  margin-bottom: 1.5rem;
}
.sensei-start-btn {
  background: linear-gradient(180deg, rgba(10,50,35,.8) 0%, rgba(8,35,25,.9) 100%);
  border: 1px solid rgba(80,200,120,.35);
  color: #a0e8c0;
  font-size: 1.2rem;
  font-weight: 800;
  padding: .9rem 2.5rem;
  border-radius: 20px;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
  animation: senseiButtonsIn .4s ease both .3s;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  box-shadow: 0 0 20px rgba(40,160,80,.1), inset 0 1px 0 rgba(255,255,255,.04);
}
@keyframes senseiButtonsIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.sensei-start-btn:hover {
  transform: translateY(-2px);
  border-color: rgba(100,220,140,.5);
  box-shadow: 0 0 32px rgba(40,160,80,.2), inset 0 1px 0 rgba(255,255,255,.06);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .sensei-chat-main {
    flex-direction: row;
    align-items: flex-start;
    gap: .6rem;
    padding: 0 .4rem;
    margin: .3rem auto 0;
  }
  .sensei-character-col {
    flex: 0 0 70px;
    position: sticky;
    top: .5rem;
  }
  .sensei-character-wrap {
    flex-direction: column;
    gap: .4rem;
    align-items: center;
  }
  .sensei-char-nav {
    flex-direction: column;
    width: 100%;
  }
  .sensei-char-nav-btn {
    font-size: .65rem;
    padding: .3rem .4rem;
  }
  .sensei-content-col {
    flex: 1;
    min-width: 0;
  }
  .sensei-speech-bubble::before {
    display: none;
  }
  .sensei-question-options {
    flex-direction: column;
  }
  .sensei-character-img {
    width: 60px;
  }
  .sensei-speech-text {
    font-size: .8rem;
  }
  .sensei-answer-btn {
    font-size: .82rem;
    padding: .7rem 1rem;
  }
  .sba-text {
    padding: .65rem 0 .65rem .8rem;
  }
  .sba-icon {
    width: 36px;
    padding: .65rem 0;
  }
}

@media (max-width: 400px) {
  .sensei-character-img { width: 80px; }
  .sensei-speech-text { font-size: .85rem; }
  .sensei-answer-btn { font-size: .82rem; padding: .7rem 1rem; }
}
  background: linear-gradient(135deg,rgba(79,172,254,0.25),rgba(79,172,254,0.1));
  border: 1.5px solid rgba(79,172,254,0.3);
  color: #4facfe; font-size: 1.3rem;
  transition: all .2s ease;
  position: relative; overflow: visible;
}
.replay-audio-btn:hover {
  background: linear-gradient(135deg,rgba(79,172,254,0.35),rgba(79,172,254,0.16));
  box-shadow: 0 0 20px rgba(79,172,254,0.2);
}
.replay-audio-btn.playing {
  background: linear-gradient(135deg,rgba(165,94,234,0.35),rgba(165,94,234,0.16));
  border-color: rgba(165,94,234,0.5);
  color: #c08dff;
}
/* Sound wave bars inside play button */
.replay-audio-btn .replay-waves {
  display: none; align-items: flex-end; gap: 3px; height: 22px;
}
.replay-audio-btn.playing .replay-btn-icon { display: none; }
.replay-audio-btn.playing .replay-waves { display: flex; }
.replay-audio-btn .replay-waves span {
  width: 4px; border-radius: 2px;
  background: #c08dff;
  animation: replayWave 0.8s ease-in-out infinite;
}
.replay-audio-btn .replay-waves span:nth-child(1) { height: 10px; animation-delay: 0s; }
.replay-audio-btn .replay-waves span:nth-child(2) { height: 18px; animation-delay: 0.15s; }
.replay-audio-btn .replay-waves span:nth-child(3) { height: 12px; animation-delay: 0.3s; }
.replay-audio-btn .replay-waves span:nth-child(4) { height: 20px; animation-delay: 0.45s; }
.replay-audio-btn .replay-waves span:nth-child(5) { height: 8px; animation-delay: 0.6s; }
@keyframes replayWave {
  0%,100% { transform: scaleY(0.5); opacity: 0.5; }
  50% { transform: scaleY(1.2); opacity: 1; }
}

.replay-nav {
  display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem;
  background: var(--glass2);
  border-top: 1px solid var(--border2);
}
.replay-nav .btn {
  flex: 1; font-size: .9rem; padding: .8rem;
}
.replay-close-btn {
  flex-shrink: 0;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border-radius: var(--r);
  background: linear-gradient(135deg,rgba(255,71,87,0.2),rgba(255,71,87,0.08));
  border: 1.5px solid rgba(255,71,87,0.25);
  color: #ff6b77; font-size: 1.2rem; font-weight: 700;
  transition: all .2s ease;
  font-family: inherit;
}
.replay-close-btn:hover {
  background: linear-gradient(135deg,rgba(255,71,87,0.3),rgba(255,71,87,0.14));
  box-shadow: 0 0 20px rgba(255,71,87,0.2);
  color: #ff8a94;
}

/* ── Particle canvas background ── */
#particle-canvas {
  position:fixed;
  inset:0;
  z-index:5;
  pointer-events:none;
}

/* ── Clock Game ── */
.cg-page {
  max-width: 720px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 4px;
  padding: 2px .5rem .5rem;
  min-height: calc(100vh - 64px);
}
.cg-scene {
  position: relative; flex: 0 1 auto;
  border-radius: 12px; overflow: hidden;
  background: #0a0a1a;
  display: flex; align-items: center; justify-content: center;
}
.cg-scene-img {
  width: 100%; height: auto; display: block;
  max-height: 60vh;
}
/* Stars badge — top-right of scene */
.cg-stars {
  position: absolute; top: 6px; right: 6px;
  background: rgba(20,12,35,0.82);
  border: 1px solid rgba(200,160,80,.3);
  border-radius: 10px; padding: 3px 10px;
  font-size: .8rem; font-weight: 800; color: #f0d88a;
  z-index: 20; display: flex; align-items: center; gap: 4px;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 12px rgba(180,140,60,.12);
}
/* Level badge — bottom-right of scene */
.cg-level-badge {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(20,12,35,0.82);
  border: 1px solid rgba(79,172,254,.35);
  border-radius: 10px; padding: 3px 12px;
  font-size: .78rem; font-weight: 700; color: #4facfe;
  z-index: 20;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 10px rgba(79,172,254,.15);
}
.cg-stars.pulse {
  animation: starPulse .5s ease-out;
}
@keyframes starPulse {
  0% { transform: scale(1.4); color: #fff; box-shadow: 0 0 30px rgba(255,215,0,.5); }
  100% { transform: scale(1); color: #f0d88a; box-shadow: 0 0 12px rgba(180,140,60,.12); }
}
.cg-title {
  display: none;
}
.cg-spinner {
  display: flex; gap: 0; flex-shrink: 0;
  background: rgba(20,12,35,0.72);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(180,150,100,0.25);
  border-radius: 18px;
  overflow: hidden;
}
.cg-spin-btn {
  flex: 1; min-width: 0; height: 42px; border-radius: 0; border: none;
  border-right: 1px solid rgba(180,150,100,0.18);
  background: transparent;
  color: rgba(240,225,200,0.65); font-size: .8rem; font-weight: 600;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .2s; user-select: none;
  -webkit-user-select: none; font-family: inherit; white-space: nowrap;
  letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.cg-spin-btn:last-child { border-right: none; }
.cg-spin-btn:hover {
  background: rgba(180,150,100,0.1);
  color: rgba(255,240,210,0.9);
}
.cg-spin-btn:active {
  background: rgba(180,150,100,0.2);
  color: #f0d88a;
  box-shadow: inset 0 0 12px rgba(200,170,100,.15);
}
.cg-jump-btn {
  color: rgba(220,200,160,0.55);
  font-size: .82rem;
}
.cg-jump-btn:hover {
  color: #e8d5a3;
}
.cg-jump-btn:active {
  background: rgba(200,160,80,.2);
  color: #f0d88a;
}

.cg-task-box {
  flex-shrink: 0;
  background: rgba(20,12,35,0.72);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(180,150,100,0.25);
  border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 0 24px rgba(140,100,40,.08), inset 0 1px 0 rgba(255,255,255,.03);
}
.cg-question {
  font-size: 1.1rem; font-weight: 600; color: rgba(255,245,225,0.95);
  margin-bottom: 12px; line-height: 1.5;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.cg-answers {
  display: flex; gap: 8px;
}
.cg-answers .btn {
  flex: 1; text-align: center; padding: .75rem .9rem;
  font-size: .85rem; min-width: 0; font-weight: 600;
  background: rgba(30,18,50,0.7);
  border: 1px solid rgba(180,150,100,0.3);
  border-radius: 22px;
  color: rgba(240,225,200,0.82);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  transition: all .25s;
  position: relative; overflow: hidden;
}
.cg-answers .btn::after {
  content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,220,150,.08) 0%, transparent 70%);
  pointer-events: none;
}
.cg-answers .btn:hover {
  background: rgba(40,25,60,0.8);
  border-color: rgba(200,170,110,0.5);
  color: rgba(255,240,215,0.95);
  box-shadow: 0 0 20px rgba(200,160,80,.15);
}
.cg-answers .btn:active {
  background: rgba(60,35,20,0.8);
  border-color: rgba(220,180,100,0.6);
  color: #f0d88a;
  box-shadow: 0 0 28px rgba(200,150,60,.25), inset 0 0 12px rgba(200,150,60,.1);
}

.cg-result {
  display: none;  /* result now shown in answers row */
}

/* Selected/chosen answer — gold, correct — emerald, next — glow */
.cg-answers .btn.cg-chosen,
.sensei-answer-btn.cg-chosen {
  background: rgba(60,35,20,0.8);
  border-color: rgba(220,180,100,0.6);
  color: #f0d88a;
  box-shadow: 0 0 28px rgba(200,150,60,.25), inset 0 0 12px rgba(200,150,60,.1);
}
.cg-answers .btn.cg-correct-lit,
.sensei-answer-btn.cg-correct-lit {
  background: rgba(10,60,40,.7) !important;
  border-color: rgba(80,200,120,.5) !important;
  color: #ffffff !important;
  opacity: 1 !important;
  text-shadow: 0 0 14px rgba(255,255,255,.5) !important;
  box-shadow: 0 0 24px rgba(40,160,80,.2) !important;
}
.cg-answers .btn.cg-next-inline,
.sensei-answer-btn.cg-next-inline {
  background: linear-gradient(180deg, rgba(20,30,60,.8) 0%, rgba(16,22,50,.9) 100%);
  border: 1px solid rgba(100,180,200,.35);
  color: rgba(200,230,245,.9);
  box-shadow: 0 0 20px rgba(80,160,200,.1), inset 0 1px 0 rgba(255,255,255,.04);
  animation: nextGlow 2s ease-in-out infinite;
}
@keyframes nextGlow {
  0%, 100% { border-color: rgba(100,180,200,.35); box-shadow: 0 0 20px rgba(80,160,200,.1), inset 0 1px 0 rgba(255,255,255,.04); }
  50% { border-color: rgba(140,210,230,.55); box-shadow: 0 0 32px rgba(80,180,220,.25), inset 0 1px 0 rgba(255,255,255,.08); }
}
.cg-answers .btn.cg-next-inline:hover,
.sensei-answer-btn.cg-next-inline:hover {
  border-color: rgba(140,210,230,.5);
  box-shadow: 0 0 32px rgba(80,180,220,.2), inset 0 1px 0 rgba(255,255,255,.06);
  animation: none;
}

.cg-digital-time {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: rgba(10,10,26,.9); border: 1px solid rgba(79,172,254,.3);
  border-radius: 10px; padding: 3px 12px;
  font-size: 1rem; font-weight: 900; font-variant-numeric: tabular-nums;
  color: #4facfe; letter-spacing: 2px;
  z-index: 15;
  font-family: 'SF Mono', 'Courier New', monospace;
}
.cg-clock-labels {
  position: absolute; z-index: 15;
  display: flex; gap: 4px;
  padding: 3px 10px;
  background: rgba(10,10,26,.75); border-radius: 8px;
}
.cg-cal-overlay,
.cg-clock-overlay {
  position: absolute; pointer-events: none;
}
.cg-cal-overlay { inset: 0; pointer-events: none; }
.cg-clock-overlay { pointer-events: auto; }
.cg-cal-panel {
  display: flex; flex-direction: column; gap: .3rem;
  padding: .8rem; background: var(--glass2);
  border-radius: var(--r); border: 1px solid var(--border2);
}
.cg-cal-panel input[type=range] { width: 100%; }

/* ── Clock Game Confetti ── */
.cg-confetti {
  position: fixed; z-index: 9999;
  border-radius: 2px;
  pointer-events: none;
  animation: cgConfettiFly 1s ease-out forwards;
}
@keyframes cgConfettiFly {
  0%   { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.3); opacity: 0; }
}

/* ── Clock Target Glow ── */
.cg-target-glow {
  position: absolute; border-radius: 50%;
  pointer-events: none; z-index: 5;
  background: radial-gradient(circle, rgba(46,213,115,.25) 0%, rgba(46,213,115,.08) 60%, transparent 80%);
  animation: cgGlowPulse 1.5s ease-in-out infinite;
}
@keyframes cgGlowPulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* ── Second Hand Controls (inside scene, bottom-center) ── */
.cg-second-ctrl {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  background: rgba(10,8,30,0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 28px;
  padding: 6px 10px 6px 18px;
  z-index: 25;
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
}
.cg-second-btn {
  padding: .55rem 1.8rem; border-radius: 22px; border: none;
  background: #e74c3c;
  color: #fff; font-size: .9rem; font-weight: 800;
  cursor: pointer; transition: all .2s;
  letter-spacing: .5px; text-shadow: 0 1px 2px rgba(0,0,0,.3);
  box-shadow: 0 2px 8px rgba(231,76,60,.4);
  min-width: 80px;
}
.cg-second-btn:hover { transform: scale(1.05); box-shadow: 0 4px 14px rgba(231,76,60,.5); }
.cg-second-btn.running {
  background: #27ae60;
  box-shadow: 0 2px 12px rgba(39,174,96,.5);
}
.cg-second-btn.running:hover {
  box-shadow: 0 4px 18px rgba(39,174,96,.6);
}
.cg-second-digital {
  font-size: 1rem; font-weight: 700; color: #fff;
  font-family: 'Courier New', monospace;
  letter-spacing: 1.5px;
  min-width: 75px; text-align: center;
}

/* ── Hint button — bottom-left of scene ── */
.cg-hint-btn {
  position: absolute; bottom: 6px; left: 6px;
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(20,12,35,.82); border: 1px solid rgba(240,216,138,.3);
  color: #f0d88a; font-size: 1rem;
  cursor: pointer; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(6px);
  transition: all .2s;
  padding: 0; line-height: 1;
}
.cg-hint-btn:hover {
  background: rgba(240,216,138,.15);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(240,216,138,.25);
}
.cg-hint-btn:active { transform: scale(.95); }