:root{
  --ink:#16324f;
  --teal:#24b7a6;
  --yellow:#ffd66b;
  --coral:#ff8b76;
  --blue:#4d88ff;
  --cream:#fffdf6;
  --mist:#eef8fb;
  --purple:#8c6adf;
  --green:#71bf84;
  --orange:#f6a85f;
  --rose:#e878a7;
}
*{box-sizing:border-box}
body{margin:0;width:100%;overflow-x:hidden;font-family:'DM Sans',sans-serif;color:var(--ink)}
.display-font{font-family:'Fraunces',serif}
.page-shell{
  width:100%;
  min-height:100vh;
  background:
    radial-gradient(circle at 8% 8%, rgba(255,214,107,.22), transparent 18%),
    radial-gradient(circle at 92% 12%, rgba(36,183,166,.16), transparent 22%),
    linear-gradient(180deg,#f5fcff 0%,#fffdf6 100%);
}
.hero-card{background:linear-gradient(135deg,#173653 0%,#1d5f7c 100%);position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;right:-70px;bottom:-110px;width:260px;height:260px;border-radius:999px;background:rgba(255,255,255,.08)}
.hero-card::after{content:"";position:absolute;top:-70px;right:26%;width:160px;height:160px;border-radius:999px;background:rgba(255,214,107,.14)}
.soft-card{background:rgba(255,255,255,.92);border:1px solid rgba(22,50,79,.08);box-shadow:0 18px 50px rgba(23,54,83,.08);backdrop-filter:blur(8px)}
.topic-btn{transition:all .25s ease;border:1px solid transparent}
.topic-btn:hover{transform:translateY(-2px);border-color:#bcebe5}
.topic-btn.active{background:#173653;color:#fff;box-shadow:0 14px 26px rgba(22,50,79,.16)}
.topic-btn.active .topic-icon{background:#ffd66b;color:#173653}
.lesson-panel{display:none}
.lesson-panel.active{display:block;animation:rise .35s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.phrase-card{position:relative;overflow:hidden}
.phrase-card::after{content:"";position:absolute;right:-22px;bottom:-26px;width:88px;height:88px;border-radius:999px;background:rgba(255,255,255,.16)}
.progress-step{transition:all .25s ease;background:#e5eef2;color:#77909e}
.progress-step.active{background:#24b7a6;color:#fff;transform:scale(1.05)}
.progress-step.done{background:#c9eee8;color:#13766d}
.focus-ring:focus-visible{outline:3px solid #ffd66b;outline-offset:3px}
@media (max-width: 1000px){
  .hero-grid{grid-template-columns:1fr!important}
  .hero-image-wrap{height:230px}
  .main-grid{grid-template-columns:1fr!important}
  .topic-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .topic-list .topic-btn{margin:0!important}
}
/* ── MUSIC PLAYER BAR STYLES ── */
.music-player-bar {
  transition: all .3s ease;
  display: flex;
  flex-direction: column;
}
.album-art-mini {
  animation: subtle-pulse 2s ease-in-out infinite;
}
@keyframes subtle-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}
.btn-play-mini:hover {
  box-shadow: 0 6px 16px rgba(140, 106, 223, 0.35) !important;
  transform: scale(1.05);
}
.btn-play-mini:active {
  transform: scale(0.95);
}
.btn-play-mini.playing {
  animation: pulse-play .8s ease-in-out infinite;
}
@keyframes pulse-play {
  0%, 100% { box-shadow: 0 4px 12px rgba(140, 106, 223, 0.25); }
  50% { box-shadow: 0 6px 20px rgba(140, 106, 223, 0.4); }
}
.btn-lyrics:hover,
.btn-expand:hover {
  background: rgba(140, 106, 223, 0.2) !important;
  transform: scale(1.05);
}
.progress-bar-mini-container:hover {
  height: 3px !important;
}
.focus-ring:focus-visible {
  outline: 3px solid #ffd66b;
  outline-offset: 2px;
}

/* ── LYRICS SECTION STYLES ── */
.lyrics-section {
  animation: slideDown .4s ease-out;
}
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 600px;
  }
}
.lyrics-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 106, 223, 0.3) transparent;
}
.lyrics-content::-webkit-scrollbar {
  width: 6px;
}
.lyrics-content::-webkit-scrollbar-track {
  background: transparent;
}
.lyrics-content::-webkit-scrollbar-thumb {
  background: rgba(140, 106, 223, 0.3);
  border-radius: 3px;
}
.lyrics-content::-webkit-scrollbar-thumb:hover {
  background: rgba(140, 106, 223, 0.5);
}
.lyrics-text {
  word-break: break-word;
  text-align: center;
  font-weight: 500;
  letter-spacing: 0.5px;
}
.btn-download:hover {
  box-shadow: 0 6px 20px rgba(140, 106, 223, 0.3);
  transform: translateY(-2px);
}
.btn-download:active {
  transform: scale(0.98);
}
.btn-close-lyrics:hover {
  background: rgba(140, 106, 223, 0.2) !important;
  transform: rotate(90deg);
}

@media (max-width: 640px) {
  .music-player-bar {
    padding: 12px !important;
  }
  .album-art-mini {
    width: 48px !important;
    height: 48px !important;
  }
  .btn-play-mini {
    width: 38px !important;
    height: 38px !important;
  }
  .btn-lyrics,
  .btn-expand {
    width: 32px !important;
    height: 32px !important;
  }
  .lyrics-section {
    padding: 16px !important;
  }
  .lyrics-content {
    max-height: 400px !important;
  }
  .lyrics-text {
    font-size: 14px !important;
  }
}

@media (max-width: 640px){
  .topic-list{grid-template-columns:1fr}
  .album-art-container{
    width:100%!important
  }
  .album-art{
    width:150px!important;
    height:150px!important
  }
  .album-art i{
    width:60px!important;
    height:60px!important
  }
  .controls-section{
    gap:12px!important
  }
  .btn-play{
    width:52px!important;
    height:52px!important
  }
  .btn-control{
    width:40px!important;
    height:40px!important
  }
  .progress-track{overflow-x:auto;padding-bottom:4px}
}
/* ── Section tabs (wrap to multiple lines) ───── */
.stabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:4px 2px}
.stab{flex-shrink:0;display:flex;align-items:center;gap:7px;border-radius:50px;padding:9px 18px;font-size:14px;font-weight:600;background:#fff;border:1.5px solid rgba(22,50,79,.1);color:#16324f;cursor:pointer;transition:all .2s ease;white-space:nowrap}
.stab:hover{border-color:#24b7a6;box-shadow:0 4px 12px rgba(36,183,166,.15)}
.stab.on{background:#173653;color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(22,50,79,.22)}
/* ── Section panels ──────────────────────────── */
.spanel{display:none}
.spanel.on{display:block;animation:secrise .35s ease both}
@keyframes secrise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
/* ── Flashcards ─────────────────────────────── */
.fcscene{perspective:900px;cursor:pointer}
.fcinner{position:relative;width:100%;height:210px;transition:transform .55s cubic-bezier(.4,0,.2,1);transform-style:preserve-3d}
.fcscene.flip .fcinner{transform:rotateY(180deg)}
.fcfront,.fcback{position:absolute;inset:0;border-radius:22px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fcback{transform:rotateY(180deg)}
/* ── Exercises ──────────────────────────────── */
.exinp{border:2px solid #d4e5ec;border-radius:10px;padding:9px 14px;font-size:16px;font-family:inherit;outline:none;transition:border-color .2s,background .2s;min-width:90px;max-width:160px;text-align:center}
.exinp:focus{border-color:#24b7a6}
.exinp.ok{border-color:#5cb87a;background:#f0fdf4;color:#166534}
.exinp.err{border-color:#ff8b76;background:#fff1f0;color:#9b2216;animation:exshake .4s ease}
@keyframes exshake{0%,100%{transform:translateX(0)}25%,75%{transform:translateX(-5px)}50%{transform:translateX(5px)}}
/* ── Match Game ─────────────────────────────── */
.mcard{cursor:pointer;transition:all .2s ease;border:2px solid rgba(22,50,79,.1);border-radius:14px;padding:14px 16px;font-weight:600;font-size:14px;text-align:center;background:#fff;line-height:1.4}
.mcard:hover:not(.matched){transform:translateY(-3px);box-shadow:0 8px 20px rgba(22,50,79,.1)}
.mcard.sel{border-color:#4d88ff;background:#eef4ff;color:#4d88ff;transform:scale(1.02)}
.mcard.matched{border-color:#5cb87a;background:#f0fdf4;color:#166534;pointer-events:none}
.mcard.bad{border-color:#ff8b76;background:#fff1f0;animation:exshake .4s ease}
/* ── Quiz ───────────────────────────────────── */
.qopt{cursor:pointer;transition:all .2s ease;border:2px solid rgba(22,50,79,.1);border-radius:14px;padding:14px 18px;font-size:15px;font-weight:500;background:#fff;display:block;width:100%;text-align:left}
.qopt:hover:not(.locked){border-color:#24b7a6;background:#ecfbf8}
.qopt.correct{border-color:#5cb87a!important;background:#f0fdf4!important;color:#166534!important}
.qopt.wrong{border-color:#ff8b76!important;background:#fff1f0!important;color:#9b2216!important}
.qopt.locked{pointer-events:none}
/* ── Story / dialogue ───────────────────────── */
.chat{display:flex;flex-direction:column;gap:16px}
.bwrap{display:flex;gap:10px;align-items:flex-end}
.bwrap.r{flex-direction:row-reverse}
.bubble{border-radius:20px;padding:13px 17px;max-width:80%;line-height:1.6;font-size:15px}
.bubble.bl{background:#4d88ff;color:#fff;border-bottom-left-radius:4px}
.bubble.tl{background:#24b7a6;color:#fff;border-bottom-right-radius:4px}
.av{width:38px;height:38px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px}
/* ── Inputs / profile cards ─────────────────── */
.pinp{width:100%;border:2px solid #d4e5ec;border-radius:10px;padding:10px 14px;font-size:15px;font-family:inherit;outline:none;transition:border-color .2s}
.pinp:focus{border-color:#24b7a6}
.pinp.ok{border-color:#5cb87a;background:#f0fdf4}
.pinp.err{border-color:#ff8b76;background:#fff1f0;animation:exshake .4s ease}
#profCard,#epCard{background:linear-gradient(135deg,#173653,#1a7899);color:#fff;border-radius:22px;padding:28px;position:relative;overflow:hidden;min-height:300px}
#profCard::after,#epCard::after{content:"";position:absolute;right:-40px;bottom:-50px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.06)}
/* ── Listen & Choose ────────────────────────── */
.lcbtn{cursor:pointer;transition:all .2s ease;border:2px solid rgba(22,50,79,.1);border-radius:16px;padding:18px;font-weight:600;font-size:16px;text-align:center;background:#fff}
.lcbtn:hover:not(.locked){transform:translateY(-3px);border-color:#24b7a6;box-shadow:0 8px 20px rgba(36,183,166,.14)}
.lcbtn.correct{border-color:#5cb87a!important;background:#f0fdf4!important;color:#166534!important}
.lcbtn.wrong{border-color:#ff8b76!important;background:#fff1f0!important;color:#9b2216!important}
.lcbtn.locked{pointer-events:none}
/* ── Spin wheel ─────────────────────────────── */
#wheel{transition:transform 4s cubic-bezier(.17,.67,.32,1.34)}
/* ── Memory game ────────────────────────────── */
.memscene{perspective:700px;aspect-ratio:1/1;cursor:pointer}
.meminner{position:relative;width:100%;height:100%;transition:transform .45s;transform-style:preserve-3d}
.memscene.open .meminner{transform:rotateY(180deg)}
.memface{position:absolute;inset:0;border-radius:16px;display:flex;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;font-weight:700}
.memfront{background:linear-gradient(135deg,#173653,#1a7899);color:#fff;font-size:30px}
.memback{background:#fff;border:2px solid #d4e5ec;transform:rotateY(180deg);font-size:clamp(13px,3.4vw,17px);text-align:center;padding:8px;color:#173653;flex-direction:column;gap:4px}
.memscene.done .memback{border-color:#5cb87a;background:#f0fdf4;color:#166534}
.memscene.done{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.07)}100%{transform:scale(1)}}
/* ── Challenge ──────────────────────────────── */
.star{font-size:34px;transition:transform .3s ease,opacity .3s ease;opacity:.25;filter:grayscale(1)}
.star.on{opacity:1;filter:none;transform:scale(1.18)}
/* ── Responsive helpers ─────────────────────── */
@media(max-width:640px){
  .fcgrid{grid-template-columns:1fr 1fr!important}
  .actgrid{grid-template-columns:1fr!important}
  .lcgrid{grid-template-columns:1fr 1fr!important}
  #profLayout,#tfLayout,#spinLayout{grid-template-columns:1fr!important}
}
@media(max-width:420px){.fcgrid{grid-template-columns:1fr!important}}