/* ==========================================================================
   Bright Path Gamified Learning — Stylesheet
   Visual identity carried over from the existing tuition management system
   (soft pastel lavender / pink / maize / blue / celadon) and extended with
   gamified components (badges, avatars, virtual room, battle, jeopardy).
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --bg:#FAF8FE;
  --bg-soft:#F4EFFA;
  --surface:#FFFFFF;
  --surface-2:#FBF9FE;
  --surface-3:#F7F2FD;
  --text:#2C2A36;
  --muted:#615E6A;
  --soft-text:#8C8893;
  --border:#E8E3EF;
  --border-strong:#D6CFE2;

  --lavender:#EFE6FB;
  --pink:#FBCFE0;
  --maize:#FDEF81;
  --blue:#B6E2FD;
  --celadon:#ADD6AE;

  --lavender-soft:#F7F1FE;
  --pink-soft:#FDE6EE;
  --maize-soft:#FFF7C2;
  --blue-soft:#DAEEFE;
  --celadon-soft:#DFEEDF;

  --deep-lavender:#6F4EA0;
  --deep-pink:#9F4B6B;
  --deep-blue:#2F6F9F;
  --deep-green:#3E7A50;
  --deep-mustard:#927A1D;

  --danger:#B93838;
  --danger-soft:#FBE3E3;
  --warning:#C9852A;
  --warning-soft:#FBEBC9;
  --info:#2F6F9F;
  --info-soft:#DAEEFE;
  --success:#3E7A50;
  --success-soft:#DFEEDF;

  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px; --r-pill:999px;
  --shadow-soft:0 12px 32px rgba(44,42,54,.08);
  --shadow-card:0 4px 14px rgba(44,42,54,.06);
  --shadow-pop:0 18px 40px rgba(111,78,160,.18);

  --font:"Inter","Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --font-display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;

  --header-h:64px;
  --sidebar-w:248px;
  --content-max:1320px;
}

/* ---------- 2. Base ------------------------------------------------------ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  color:var(--text);
  background:var(--bg);
  background-image:
    radial-gradient(1100px 500px at 90% -10%,var(--lavender-soft) 0%,transparent 60%),
    radial-gradient(900px 460px at -10% 30%,var(--blue-soft) 0%,transparent 55%),
    radial-gradient(1000px 600px at 50% 110%,var(--pink-soft) 0%,transparent 60%);
  background-attachment:fixed;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  line-height:1.45;
}
a{color:var(--deep-lavender);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:800;color:var(--text);margin:0 0 .4em}
h1{font-size:1.9rem;letter-spacing:-.01em}
h2{font-size:1.45rem}
h3{font-size:1.18rem}
h4{font-size:1.02rem}
.muted{color:var(--muted)}
.soft{color:var(--soft-text)}
.small{font-size:.82rem}
.tiny{font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}
hr{border:none;border-top:1px solid var(--border);margin:18px 0}

/* ---------- 3. App shell ------------------------------------------------- */
.app{min-height:100vh;display:flex;flex-direction:column}
body.has-app-shell{height:100vh;overflow:hidden}
body.has-app-shell .app{height:100vh;min-height:0;overflow:hidden}
.header{
  position:sticky;top:0;z-index:60;
  flex:0 0 var(--header-h);
  height:var(--header-h);
  display:flex;align-items:center;gap:14px;
  padding:0 22px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-family:var(--font-display);font-size:1.05rem}
.brand-mark{
  width:36px;height:36px;border-radius:11px;
  background:linear-gradient(135deg,var(--lavender) 0%,var(--blue) 100%);
  display:grid;place-items:center;color:var(--deep-lavender);font-weight:900;
  box-shadow:inset 0 0 0 2px rgba(111,78,160,.25);
}
.brand-sub{font-size:.72rem;color:var(--muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.spacer{flex:1}
.header .pill{
  display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);font-weight:700;font-size:.85rem;color:var(--deep-blue);
}
.userchip{
  display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-pill);font-weight:700;font-size:.9rem
}
.userchip .avatar-sm{width:30px;height:30px;border-radius:50%}

.shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;gap:0;flex:1;min-height:0}
.sidebar{
  padding:18px 14px 30px;
  border-right:1px solid var(--border);
  background:rgba(255,255,255,.55);
  min-height:calc(100vh - var(--header-h));
}
body.has-app-shell .shell{height:calc(100vh - var(--header-h));overflow:hidden}
body.has-app-shell .sidebar{
  height:100%;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
.sidebar h6{
  margin:18px 8px 8px;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--soft-text);font-weight:700
}
.nav{display:flex;flex-direction:column;gap:2px}
.nav a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;
  color:var(--text);font-weight:600;font-size:.92rem;text-decoration:none;
}
.nav a:hover{background:var(--surface-3);text-decoration:none}
.nav a.active{background:linear-gradient(90deg,var(--lavender) 0%,var(--lavender-soft) 100%);color:var(--deep-lavender)}
.nav a .icon{width:22px;text-align:center}
.content{padding:26px 32px 60px;max-width:var(--content-max);width:100%;min-height:0}
body.has-app-shell .content{
  height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
body.has-app-shell .content [id]{scroll-margin-top:18px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px;flex-wrap:wrap}
.page-head h1{margin:0}
.page-head .lede{color:var(--muted);max-width:680px;margin:6px 0 0}

/* ---------- 4. Layout helpers ------------------------------------------- */
.grid{display:grid;gap:18px}
.cols-2{grid-template-columns:1fr 1fr}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.cols-12{grid-template-columns:repeat(12,1fr)}
.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}
.col-span-4{grid-column:span 4}
.col-span-5{grid-column:span 5}
.col-span-6{grid-column:span 6}
.col-span-7{grid-column:span 7}
.col-span-8{grid-column:span 8}
.col-span-9{grid-column:span 9}
.col-span-12{grid-column:span 12}
.row{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.between{justify-content:space-between}
.center{justify-content:center}
.stack{display:flex;flex-direction:column;gap:14px}
.stack-sm{display:flex;flex-direction:column;gap:8px}

@media (max-width:980px){
  .cols-3,.cols-4{grid-template-columns:1fr 1fr}
  .col-span-3,.col-span-4,.col-span-5,.col-span-6,.col-span-7,.col-span-8,.col-span-9{grid-column:span 12}
  .shell{grid-template-columns:1fr}
  .sidebar{display:none}
}
@media (max-width:640px){
  .cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
  .content{padding:18px 16px 60px}
}

/* ---------- 5. Card / panel --------------------------------------------- */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:22px;
  box-shadow:var(--shadow-card);
  position:relative;
}
.card.hero{
  background:
    radial-gradient(600px 220px at 0% 0%,var(--lavender-soft) 0%,transparent 60%),
    radial-gradient(500px 220px at 100% 100%,var(--pink-soft) 0%,transparent 60%),
    var(--surface);
}
.card.tinted-blue{background:linear-gradient(180deg,var(--blue-soft) 0%,#fff 100%)}
.card.tinted-pink{background:linear-gradient(180deg,var(--pink-soft) 0%,#fff 100%)}
.card.tinted-maize{background:linear-gradient(180deg,var(--maize-soft) 0%,#fff 100%)}
.card.tinted-celadon{background:linear-gradient(180deg,var(--celadon-soft) 0%,#fff 100%)}
.card.tinted-lav{background:linear-gradient(180deg,var(--lavender-soft) 0%,#fff 100%)}
.card-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;gap:10px}
.card-title h3,.card-title h2{margin:0}

/* ---------- 6. Buttons -------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 16px;border-radius:12px;
  font-weight:700;font-size:.92rem;font-family:inherit;
  cursor:pointer;border:1px solid transparent;
  transition:transform .12s ease,background .15s,box-shadow .15s;
  text-decoration:none;
}
.btn:hover{transform:translateY(-1px);text-decoration:none}
.btn-primary{background:var(--deep-lavender);color:#fff}
.btn-primary:hover{background:#5d3f8c;color:#fff}
.btn-soft{background:var(--lavender-soft);color:var(--deep-lavender);border-color:var(--lavender)}
.btn-soft:hover{background:var(--lavender)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{background:var(--surface-3)}
.btn-success{background:var(--deep-green);color:#fff}
.btn-warn{background:var(--warning);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-info{background:var(--deep-blue);color:#fff}
.btn-sm{padding:6px 12px;font-size:.82rem}
.btn-lg{padding:14px 24px;font-size:1.02rem}
.btn-block{width:100%;justify-content:center}
.btn-pill{border-radius:var(--r-pill)}
.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* ---------- 7. Chips / badges / status ---------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--muted);
  font-size:.78rem;font-weight:700;border:1px solid var(--border)
}
.chip.is-pink{background:var(--pink-soft);color:var(--deep-pink);border-color:#F6C7D6}
.chip.is-blue{background:var(--blue-soft);color:var(--deep-blue);border-color:#C9E4FB}
.chip.is-green{background:var(--celadon-soft);color:var(--deep-green);border-color:#C7E2C7}
.chip.is-maize{background:var(--maize-soft);color:var(--deep-mustard);border-color:#F0DE9A}
.chip.is-lav{background:var(--lavender-soft);color:var(--deep-lavender);border-color:var(--lavender)}
.chip.is-grey{background:#F1EEF6;color:var(--muted);border-color:#E1DCEB}
.chip.is-danger{background:var(--danger-soft);color:var(--danger);border-color:#F3C7C7}

.status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-pill);font-size:.74rem;font-weight:700}
.status::before{content:"";width:8px;height:8px;border-radius:50%;background:#888}
.status.studying{background:var(--celadon-soft);color:var(--deep-green)} .status.studying::before{background:var(--deep-green);box-shadow:0 0 0 4px rgba(62,122,80,.18)}
.status.resting{background:var(--maize-soft);color:var(--deep-mustard)} .status.resting::before{background:var(--deep-mustard)}
.status.idle{background:#F1EEF6;color:var(--muted)} .status.idle::before{background:var(--soft-text)}
.status.offline{background:#EFEEF2;color:#8C8893} .status.offline::before{background:#B5B0BC}
.status.completed{background:var(--blue-soft);color:var(--deep-blue)} .status.completed::before{background:var(--deep-blue);box-shadow:0 0 0 4px rgba(47,111,159,.18)}

/* ---------- 8. Stats / KPI ---------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:16px 18px;position:relative;overflow:hidden
}
.stat::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:var(--lavender)}
.stat.is-pink::before{background:var(--pink)}
.stat.is-blue::before{background:var(--blue)}
.stat.is-green::before{background:var(--celadon)}
.stat.is-maize::before{background:var(--maize)}
.stat .label{color:var(--muted);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.stat .label,.stat .value,.stat .delta{display:block}
.stat .value{font-family:var(--font-display);font-weight:800;font-size:1.7rem;margin-top:6px}
.stat .delta{font-size:.78rem;color:var(--deep-green);font-weight:700;margin-top:2px}
.stat .delta.is-down{color:var(--danger)}
@media (max-width:880px){.stats{grid-template-columns:1fr 1fr}}

/* ---------- 9. Avatars --------------------------------------------------- */
/* Initials-style avatar (used in lists / sidebar) */
.avatar{
  display:inline-grid;place-items:center;
  width:48px;height:48px;border-radius:50%;
  font-family:var(--font-display);font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--deep-lavender) 0%,var(--deep-blue) 100%);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.35);
  flex-shrink:0;position:relative;
}

/* Tier palette tokens */
.tier-common    { --tier-accent:#B5B8C2; --tier-soft:#ECECF3; --tier-deep:#7C8092; }
.tier-uncommon  { --tier-accent:#7BBA82; --tier-soft:#DFF5E6; --tier-deep:#3E7A50; }
.tier-rare      { --tier-accent:#6FB4F0; --tier-soft:#E6F0FF; --tier-deep:#2F6F9F; }
.tier-epic      { --tier-accent:#9F7AE0; --tier-soft:#EDE4FF; --tier-deep:#6F4EA0; }
.tier-legendary { --tier-accent:#E2B53D; --tier-soft:#FFF2CC; --tier-deep:#A87A0F; }
.tier-mythic    { --tier-accent:#F08AB6; --tier-soft:#FFE0EE; --tier-deep:#C7588B; }

/* Mascot SVG container */
.bp-mascot, .bp-frame, .bp-glow, .bp-stack { line-height:0 }
.bp-mascot svg, .bp-frame svg, .bp-glow svg { width:100%; height:100%; display:block }

/* Tier rarity chip */
.bp-tier{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 12px;border-radius:var(--r-pill);
  font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--tier-soft);color:var(--tier-deep);
  border:1px solid color-mix(in srgb,var(--tier-accent) 35%,#fff);
}
.bp-tier::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--tier-accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--tier-accent) 25%,#fff)}

/* Profile title chip (themed by tier) */
.bp-title{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 16px;border-radius:var(--r-pill);
  font-family:var(--font-display);font-weight:800;font-size:.92rem;letter-spacing:.01em;
  background:var(--tier-soft);
  color:var(--tier-deep);
  border:1.5px solid color-mix(in srgb,var(--tier-accent) 40%,#fff);
  box-shadow:0 4px 12px color-mix(in srgb,var(--tier-accent) 15%,transparent),inset 0 0 0 1px rgba(255,255,255,.7);
}
.bp-title-big{padding:10px 22px;font-size:1.05rem}
.bp-title-edge{font-size:.9em;opacity:.85;filter:drop-shadow(0 1px 0 rgba(255,255,255,.6))}
.bp-title-text{position:relative;z-index:1}
.bp-title-common    { --tier-accent:#B5B8C2; --tier-soft:#ECECF3; --tier-deep:#5C6071 }
.bp-title-uncommon  { --tier-accent:#7BBA82; --tier-soft:#DFF5E6; --tier-deep:#2D6440 }
.bp-title-rare      { --tier-accent:#6FB4F0; --tier-soft:#E6F0FF; --tier-deep:#225D89 }
.bp-title-epic      { --tier-accent:#9F7AE0; --tier-soft:#EDE4FF; --tier-deep:#5b3f99;
  background:linear-gradient(135deg,#F4ECFF,#EAD9FF) }
.bp-title-legendary { --tier-accent:#E2B53D; --tier-soft:#FFF2CC; --tier-deep:#8E660A;
  background:linear-gradient(135deg,#FFF6D8,#FFE5A6);
  box-shadow:0 6px 14px rgba(226,181,61,.25),inset 0 0 0 1px #fff }
.bp-title-mythic    { --tier-accent:#F08AB6; --tier-soft:#FFE0EE; --tier-deep:#A8467F;
  background:linear-gradient(135deg,#FFE9F2,#FFD7E5,#E5D5FF);
  box-shadow:0 6px 14px rgba(240,138,182,.30),inset 0 0 0 1px #fff }

/* Collection card (avatar / frame / glow / title) */
.col-card{
  background:var(--surface);
  border:1.5px solid var(--border);
  border-radius:var(--r-lg);
  padding:18px 14px 14px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  position:relative;text-align:center;
  transition:transform .15s,box-shadow .15s,border-color .15s;
}
.col-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-pop);border-color:var(--tier-accent,var(--border))}
.col-card.is-locked{opacity:.65;filter:grayscale(.35)}
.col-card.is-equipped{
  border-color:var(--tier-accent,var(--deep-lavender));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--tier-accent,var(--deep-lavender)) 18%,transparent),var(--shadow-card);
}
.col-card .col-tier{position:absolute;top:10px;left:10px}
.col-card .col-equipped-pill{
  position:absolute;top:10px;right:10px;
  font-size:.66rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  background:var(--deep-green);color:#fff;padding:3px 10px;border-radius:var(--r-pill);
}
.col-card h4{margin:6px 0 0;font-size:1rem}
.col-card .col-tag{font-size:.78rem;color:var(--muted);min-height:34px;line-height:1.3}
.col-card .col-art{
  width:140px;height:140px;display:grid;place-items:center;margin-top:6px;
  background:radial-gradient(circle at 50% 50%,var(--tier-soft) 0%,transparent 70%);
  border-radius:50%;
}
.col-card .col-meta{display:flex;flex-direction:column;gap:6px;width:100%;margin-top:auto}
.col-card .col-actions{display:flex;gap:6px;width:100%;margin-top:6px}
.col-card .col-actions .btn{flex:1;justify-content:center}
.col-card .col-req{font-size:.74rem;color:var(--muted);font-weight:600}

/* Tier section header */
.tier-row{
  display:grid;grid-template-columns:220px 1fr;gap:18px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:18px;margin-bottom:14px;
}
.tier-row .tier-side{
  background:var(--tier-soft);border-radius:var(--r-md);padding:14px;
  border:1px solid color-mix(in srgb,var(--tier-accent) 25%,#fff);
}
.tier-row .tier-side h3{margin:0 0 4px;color:var(--tier-deep);font-family:var(--font-display);letter-spacing:.04em}
.tier-row .tier-side p{margin:0;color:var(--tier-deep);opacity:.85;font-size:.84rem}
.tier-row .tier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px}
.tier-row .tier-dots{display:flex;gap:5px;margin-top:10px}
.tier-row .tier-dots span{width:10px;height:10px;border-radius:50%;background:#fff;border:1px solid color-mix(in srgb,var(--tier-accent) 30%,#fff)}
.tier-row .tier-dots span.on{background:var(--tier-accent);border-color:var(--tier-accent)}
@media(max-width:780px){.tier-row{grid-template-columns:1fr}}

/* Equipped showcase (used in dashboard / login / parent view) */
.bp-stack{position:relative}
.avatar.sm{width:34px;height:34px;font-size:.85rem}
.avatar.md{width:48px;height:48px;font-size:.95rem}
.avatar.lg{width:72px;height:72px;font-size:1.4rem}
.avatar.xl{width:104px;height:104px;font-size:2.2rem}
.avatar.tone-pink{background:linear-gradient(135deg,#F471A0 0%,#9F4B6B 100%)}
.avatar.tone-blue{background:linear-gradient(135deg,#7CC1F2 0%,#2F6F9F 100%)}
.avatar.tone-green{background:linear-gradient(135deg,#7BBA82 0%,#3E7A50 100%)}
.avatar.tone-maize{background:linear-gradient(135deg,#E8C95C 0%,#927A1D 100%)}
.avatar.tone-lav{background:linear-gradient(135deg,#A985D6 0%,#6F4EA0 100%)}
.avatar.tone-coral{background:linear-gradient(135deg,#F3956F 0%,#B95B36 100%)}
.avatar.tone-teal{background:linear-gradient(135deg,#5FCFC0 0%,#2A766D 100%)}
.avatar.tone-rose{background:linear-gradient(135deg,#F7A6BD 0%,#A84266 100%)}

/* Avatar identity card frames */
.avatar-frame{
  position:relative;display:inline-block;border-radius:50%;padding:5px;
  background:conic-gradient(from 200deg,var(--lavender),var(--pink),var(--maize),var(--blue),var(--lavender));
  box-shadow:0 8px 24px rgba(111,78,160,.2);
}
.avatar-frame.frame-gold{background:conic-gradient(from 200deg,#FCE38A,#F38181,#FCE38A,#F2C744)}
.avatar-frame.frame-emerald{background:conic-gradient(from 200deg,#7BBA82,#6FE7B7,#3E7A50,#A8E6CF)}
.avatar-frame.frame-galaxy{background:conic-gradient(from 200deg,#5b3a96,#9F4B6B,#2F6F9F,#5b3a96)}
.avatar-frame.frame-spring{background:conic-gradient(from 200deg,#FBCFE0,#FDEF81,#ADD6AE,#B6E2FD,#FBCFE0)}

.avatar-character{
  width:100%;height:100%;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#FFE7BC 0%,#F2BC8E 65%);
  position:relative;overflow:hidden;
}
.avatar-character::before{
  /* hair */
  content:"";position:absolute;left:8%;right:8%;top:8%;height:55%;border-radius:50% 50% 36% 36%;
  background:#3A2A22;
}
.avatar-character.h-blonde::before{background:#D9B26A}
.avatar-character.h-auburn::before{background:#7E3F1F}
.avatar-character.h-black::before{background:#1F1B22}
.avatar-character.h-pink::before{background:#E27DA9}
.avatar-character::after{
  /* shirt */
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:var(--deep-blue);
}
.avatar-character.s-pink::after{background:var(--deep-pink)}
.avatar-character.s-green::after{background:var(--deep-green)}
.avatar-character.s-lav::after{background:var(--deep-lavender)}
.avatar-character.s-maize::after{background:var(--deep-mustard)}
.avatar-eye{
  position:absolute;width:6px;height:6px;background:#2C2A36;border-radius:50%;top:42%;
}
.avatar-eye.l{left:32%}.avatar-eye.r{right:32%}
.avatar-mouth{
  position:absolute;left:42%;top:55%;width:16%;height:6%;border-radius:0 0 8px 8px;
  background:#9F4B6B;
}

/* Profile glow ring */
.glow-aura{
  position:absolute;inset:-10px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(253,239,129,.7),transparent 70%);
  filter:blur(8px);z-index:-1;
}
.glow-aura.aura-rose{background:radial-gradient(closest-side,rgba(251,207,224,.85),transparent 70%)}
.glow-aura.aura-celadon{background:radial-gradient(closest-side,rgba(173,214,174,.85),transparent 70%)}
.glow-aura.aura-galaxy{background:radial-gradient(closest-side,rgba(111,78,160,.6),transparent 70%)}

/* ---------- 10. Progress / level rings ---------------------------------- */
.progress{height:10px;background:var(--surface-3);border-radius:var(--r-pill);overflow:hidden;border:1px solid var(--border)}
.progress > span{display:block;height:100%;background:linear-gradient(90deg,var(--deep-lavender),var(--deep-pink));border-radius:var(--r-pill)}
.progress.is-blue > span{background:linear-gradient(90deg,var(--deep-blue),#7CC1F2)}
.progress.is-green > span{background:linear-gradient(90deg,var(--deep-green),#7BBA82)}
.progress.is-maize > span{background:linear-gradient(90deg,var(--deep-mustard),#FDEF81)}

.ring{
  --p:0; --size:140px; --stroke:14px;
  width:var(--size);height:var(--size);border-radius:50%;
  background:
    conic-gradient(var(--deep-lavender) calc(var(--p)*1%),var(--surface-3) 0);
  display:grid;place-items:center;position:relative;
}
.ring::before{
  content:"";position:absolute;inset:var(--stroke);background:#fff;border-radius:50%;
  box-shadow:inset 0 0 0 1px var(--border);
}
.ring > .ring-inner{position:relative;text-align:center;font-family:var(--font-display);font-weight:800;font-size:1.6rem}
.ring > .ring-inner small{display:block;font-size:.7rem;color:var(--muted);font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:4px}

.ring.green{background:conic-gradient(var(--deep-green) calc(var(--p)*1%),var(--surface-3) 0)}
.ring.blue{background:conic-gradient(var(--deep-blue) calc(var(--p)*1%),var(--surface-3) 0)}
.ring.maize{background:conic-gradient(var(--deep-mustard) calc(var(--p)*1%),var(--surface-3) 0)}

/* XP meter (ribbon style) */
.xp-meter{
  background:linear-gradient(135deg,#fff,#FBF9FE);
  border:1px solid var(--border);border-radius:var(--r-md);padding:14px 18px;
}
.xp-meter .row{justify-content:space-between}
.xp-meter .progress{margin-top:8px}

/* ---------- 11. Badge gallery ------------------------------------------- */
.badge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.badge-card{
  position:relative;text-align:center;padding:22px 16px 18px;
  border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);
  box-shadow:var(--shadow-card);overflow:hidden;
}
.badge-card.locked{opacity:.78;filter:grayscale(.55)}
.badge-card.locked .badge-icon{background:#EDEAF3 !important;color:var(--soft-text) !important}
.badge-card .ribbon{
  position:absolute;top:14px;right:-32px;transform:rotate(40deg);
  background:var(--deep-pink);color:#fff;font-size:.65rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 38px;box-shadow:0 4px 10px rgba(159,75,107,.25)
}
.badge-card .ribbon.is-new{background:var(--deep-green)}
.badge-icon{
  width:88px;height:88px;border-radius:50%;margin:0 auto 12px;
  display:grid;place-items:center;font-size:2.4rem;
  background:radial-gradient(circle at 30% 30%,#fff,var(--lavender) 80%);
  box-shadow:inset 0 0 0 4px #fff,0 8px 18px rgba(111,78,160,.18);
  position:relative;
}
.badge-icon.is-pink{background:radial-gradient(circle at 30% 30%,#fff,var(--pink) 80%)}
.badge-icon.is-blue{background:radial-gradient(circle at 30% 30%,#fff,var(--blue) 80%)}
.badge-icon.is-green{background:radial-gradient(circle at 30% 30%,#fff,var(--celadon) 80%)}
.badge-icon.is-maize{background:radial-gradient(circle at 30% 30%,#fff,var(--maize) 80%)}
.badge-icon.is-fire{background:radial-gradient(circle at 30% 30%,#FFE5C0,#F38181 80%)}
.badge-icon.is-galaxy{background:radial-gradient(circle at 30% 30%,#D6BBF5,#6F4EA0 80%);color:#fff}

.badge-card h4{margin:0 0 4px}
.badge-card .badge-desc{font-size:.83rem;color:var(--muted);min-height:42px;margin-bottom:8px}
.badge-card .badge-progress{margin-top:8px}
.badge-card .badge-progress small{display:block;text-align:right;font-size:.72rem;color:var(--muted);margin-top:4px}

/* Avatar collection cards */
.avatar-collection{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px}
.avatar-tile{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:14px;text-align:center;position:relative;overflow:hidden;
}
.avatar-tile.equipped{box-shadow:0 0 0 2px var(--deep-lavender),var(--shadow-card)}
.avatar-tile.locked{opacity:.6;filter:grayscale(.4)}
.avatar-tile .avatar{margin:0 auto}
.avatar-tile .avatar-frame{margin:0 auto}
.avatar-tile h5{font-size:.92rem;margin:10px 0 2px}
.avatar-tile .micro{font-size:.7rem;color:var(--muted)}

/* ---------- 12. Virtual focus room -------------------------------------- */
.focus-room{
  background:
    radial-gradient(700px 320px at 50% 0%,rgba(255,255,255,.55),transparent 70%),
    linear-gradient(180deg,#F0E6FA 0%,#E5D8F7 100%);
  border-radius:var(--r-xl);
  padding:24px 22px 30px;
  position:relative;overflow:hidden;
  border:1px solid var(--border);
}
.focus-room .room-header{
  position:relative;z-index:5;
  display:flex;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;gap:14px;margin-bottom:18px;
}
.focus-room .room-header h2{margin:0;color:var(--deep-lavender);font-size:1.45rem}
.focus-room .room-header .room-meta{
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  background:rgba(255,255,255,.7);
  border:1px solid color-mix(in srgb,var(--deep-lavender) 18%,#fff);
  border-radius:var(--r-md);padding:10px 14px;backdrop-filter:blur(6px);
  max-width:100%;
}
.focus-room .room-header .room-meta .row{justify-content:flex-end;gap:6px;flex-wrap:wrap}
/* Decorative scene runs as a banner UNDER the header, never behind chips */
.focus-scene{
  position:relative;z-index:1;
  height:140px;margin-bottom:14px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fff7ec 0%,#f6e9c3 60%,#dcc7e8 100%);
  border:1px solid color-mix(in srgb,var(--deep-lavender) 18%,#fff);
  box-shadow:inset 0 -6px 0 rgba(111,78,160,.08);
  overflow:hidden;
}
.focus-scene .window{
  position:absolute;left:4%;top:18px;width:28%;height:96px;
  background:linear-gradient(180deg,#cfe6f9 0%,#fff5e8 60%,#fbe2c5 100%);
  border-radius:14px;border:6px solid #fff;
  box-shadow:inset 0 0 0 3px var(--lavender),0 8px 22px rgba(111,78,160,.15);
}
.focus-scene .window::before, .focus-scene .window::after{
  content:"";position:absolute;background:#fff;
}
.focus-scene .window::before{left:50%;top:0;bottom:0;width:6px;transform:translateX(-50%)}
.focus-scene .window::after{left:0;right:0;top:50%;height:6px;transform:translateY(-50%)}
.focus-scene .shelf{
  position:absolute;right:4%;top:24px;width:28%;height:80px;
  background:#fff;border:6px solid #fff;border-radius:8px;overflow:hidden;
  box-shadow:inset 0 0 0 3px var(--lavender),0 8px 22px rgba(111,78,160,.15);
}
.focus-scene .shelf::before{
  content:"";position:absolute;inset:6px;
  background:repeating-linear-gradient(90deg,#9F4B6B 0 8px,#FCE38A 8px 18px,#3E7A50 18px 28px,#2F6F9F 28px 38px,#FBCFE0 38px 48px,#fff 48px 54px);
  border-radius:4px;
}
.focus-scene .plant{
  position:absolute;left:36%;top:40px;width:46px;height:70px;
}
.focus-scene .plant::before{
  content:"";position:absolute;left:8px;right:8px;bottom:0;height:24px;background:#caa37a;border-radius:0 0 6px 6px;border:2px solid #8a6b50;
}
.focus-scene .plant::after{
  content:"";position:absolute;left:0;right:0;top:0;bottom:24px;
  background:radial-gradient(circle at 30% 30%,#9CD49F,#3E7A50);
  border-radius:50% 50% 30% 30%;
}
.focus-scene .lamp{
  position:absolute;left:54%;bottom:14px;width:40px;height:64px;
}
.focus-scene .lamp::before{
  content:"";position:absolute;left:0;right:0;top:0;height:30px;
  background:linear-gradient(180deg,#FACE6A 0%,#E2B53D 100%);
  clip-path:polygon(20% 100%,80% 100%,100% 0,0 0);
  border-radius:6px 6px 0 0;
}
.focus-scene .lamp::after{
  content:"";position:absolute;left:46%;top:30px;width:8%;height:24px;background:#3A2A55;
  border-radius:2px;box-shadow:0 24px 0 -2px #3A2A55;
}
.focus-floor{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  padding:18px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.55);
  border:1px dashed rgba(111,78,160,.25);
}
@media (max-width:780px){.focus-floor{grid-template-columns:repeat(2,1fr)}}
.focus-seat{
  background:rgba(255,255,255,.85);
  border-radius:var(--r-md);padding:12px 12px 10px;text-align:center;
  border:1px solid var(--border);position:relative;
}
.focus-seat.empty{background:repeating-linear-gradient(135deg,#fff,#fff 8px,#F4EFFA 8px,#F4EFFA 16px);color:var(--soft-text)}
.focus-seat .seat-desk{
  height:8px;border-radius:0 0 6px 6px;background:#caa37a;margin:8px -4px -4px;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.08);
}
.focus-seat h6{margin:6px 0 2px;font-size:.85rem;font-weight:700}
.focus-seat .seat-time{font-size:.72rem;color:var(--muted);font-weight:700}
.focus-seat .status{margin-top:6px}

/* ---------- 13. Battle interface ---------------------------------------- */
.battle-stage{
  background:linear-gradient(180deg,#FBF9FE 0%,#F4EFFA 100%);
  border-radius:var(--r-xl);padding:30px 24px;border:1px solid var(--border);position:relative;overflow:hidden;
}
.battle-stage::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(420px 200px at 0% 0%,rgba(182,226,253,.55),transparent 60%),
    radial-gradient(420px 200px at 100% 100%,rgba(251,207,224,.55),transparent 60%);
  pointer-events:none;
}
.battle-split{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;position:relative}
.battle-side{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;text-align:center;
  box-shadow:var(--shadow-card)
}
.battle-side.is-self{background:linear-gradient(180deg,#fff 0%,var(--blue-soft) 100%)}
.battle-side.is-foe{background:linear-gradient(180deg,#fff 0%,var(--pink-soft) 100%)}
.battle-side .avatar-frame{margin:0 auto 10px}
.battle-vs{
  width:90px;height:90px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#fff,var(--lavender) 80%);
  border:6px solid #fff;box-shadow:0 8px 22px rgba(111,78,160,.25);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:1.6rem;color:var(--deep-lavender);
}
.battle-score{font-family:var(--font-display);font-weight:900;font-size:2.3rem;margin:8px 0 2px}
@media (max-width:780px){.battle-split{grid-template-columns:1fr;gap:12px} .battle-vs{margin:auto}}

.countdown{
  position:absolute;inset:0;display:grid;place-items:center;z-index:5;background:rgba(247,242,253,.92);
  font-family:var(--font-display);font-size:7rem;font-weight:900;color:var(--deep-lavender);
}

/* ---------- 14. Jeopardy / Class Challenge board ------------------------ */
.jeopardy-board{
  display:grid;grid-template-columns:repeat(5,1fr);gap:8px;
  background:#1a1830;border-radius:var(--r-lg);padding:8px;
}
.jeopardy-cat{
  background:var(--deep-lavender);color:#fff;text-align:center;font-weight:800;
  padding:14px 10px;border-radius:10px;font-family:var(--font-display);font-size:.95rem;text-transform:uppercase;letter-spacing:.04em;
}
.jeopardy-tile{
  background:linear-gradient(180deg,#322a5f 0%,#1f1c3d 100%);
  color:#FDEF81;text-align:center;font-family:var(--font-display);font-weight:900;font-size:1.6rem;
  padding:24px 8px;border-radius:10px;cursor:pointer;border:2px solid transparent;
  transition:transform .15s,border-color .15s;
}
.jeopardy-tile:hover{transform:translateY(-2px);border-color:var(--maize)}
.jeopardy-tile.used{opacity:.25;cursor:default;background:#2a2548}
.jeopardy-tile .special{font-size:.7rem;color:#fff;display:block;margin-top:4px;letter-spacing:.06em}
.jeopardy-tile.special-double{box-shadow:inset 0 0 0 2px #FCE38A}
.jeopardy-tile.special-wild{background:linear-gradient(180deg,#9F4B6B 0%,#5b3a96 100%);color:#fff}
.jeopardy-tile.special-light{background:linear-gradient(180deg,#2F6F9F 0%,#1F2A56 100%)}

/* Buzzer for student phone view */
.phone-frame{
  max-width:380px;margin:0 auto;background:#1a1830;border-radius:42px;padding:22px;
  box-shadow:0 30px 60px rgba(26,24,48,.35);
}
.phone-screen{
  background:linear-gradient(180deg,#FBF9FE 0%,#F4EFFA 100%);
  border-radius:28px;padding:22px 18px;min-height:540px;
  display:flex;flex-direction:column;gap:14px;
}
.buzz-button{
  width:220px;height:220px;border-radius:50%;border:none;cursor:pointer;
  background:radial-gradient(circle at 30% 30%,#FF8FAB,var(--deep-pink));
  color:#fff;font-family:var(--font-display);font-weight:900;font-size:2.4rem;letter-spacing:.06em;
  box-shadow:0 18px 36px rgba(159,75,107,.4),inset 0 0 0 6px #fff;
  margin:0 auto;transition:transform .1s;
}
.buzz-button:active{transform:scale(.95)}
.buzz-button:disabled{background:#E0DAEB;color:#A09BAA;cursor:not-allowed;box-shadow:none}

/* ---------- 15. Learning map / route ------------------------------------ */
.level-path{
  position:relative;padding:20px 10px;
  background:linear-gradient(180deg,#FBF9FE,#F4EFFA);
  border-radius:var(--r-xl);border:1px solid var(--border);
  min-height:520px;
}
.level-node{
  position:absolute;width:80px;height:80px;border-radius:50%;
  background:var(--surface);border:3px dashed var(--border-strong);
  display:grid;place-items:center;font-family:var(--font-display);font-weight:900;font-size:1.4rem;color:var(--soft-text);
}
.level-node.done{background:var(--celadon);color:#fff;border:3px solid var(--deep-green);box-shadow:0 6px 16px rgba(62,122,80,.25)}
.level-node.current{background:linear-gradient(135deg,var(--maize) 0%,#FDC15F 100%);color:#7a5400;border:3px solid #C9852A;box-shadow:0 0 0 8px rgba(253,239,129,.55),0 6px 16px rgba(201,133,42,.3);animation:pulse 1.6s ease-out infinite}
.level-node.boss{background:radial-gradient(circle at 30% 30%,#FBCFE0,#9F4B6B);color:#fff;border:3px solid #5b1f3a;width:108px;height:108px;font-size:1.6rem;box-shadow:0 0 0 6px rgba(159,75,107,.18),0 12px 24px rgba(159,75,107,.35)}
.level-node small{display:block;font-size:.6rem;font-weight:700;letter-spacing:.08em;color:inherit;margin-top:2px}
.level-node .level-label{position:absolute;top:88px;left:50%;transform:translateX(-50%);background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 10px;font-size:.72rem;font-weight:700;white-space:nowrap}
.level-node.boss .level-label{top:118px;background:linear-gradient(90deg,#FBCFE0,var(--maize))}

@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.04)}100%{transform:scale(1)}}

/* ---------- 16. Quiz / question card ------------------------------------ */
.quiz-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:28px 28px 22px;box-shadow:var(--shadow-card);
}
.quiz-question{font-family:var(--font-display);font-size:1.4rem;font-weight:800;margin:14px 0 18px}
.quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.quiz-options{grid-template-columns:1fr}}
.quiz-option{
  background:var(--surface-2);border:2px solid var(--border);border-radius:var(--r-md);
  padding:14px 18px;font-weight:600;font-size:1rem;cursor:pointer;text-align:left;
  display:flex;align-items:center;gap:12px;transition:border-color .15s,background .15s;
  font-family:inherit;color:var(--text);
}
.quiz-option:hover{border-color:var(--deep-lavender);background:var(--lavender-soft)}
.quiz-option.selected{border-color:var(--deep-lavender);background:var(--lavender-soft)}
.quiz-option.correct{border-color:var(--deep-green);background:var(--celadon-soft)}
.quiz-option.wrong{border-color:var(--danger);background:var(--danger-soft)}
.quiz-option .letter{
  width:32px;height:32px;border-radius:9px;background:#fff;border:1px solid var(--border);
  display:grid;place-items:center;font-weight:900;font-family:var(--font-display);
}
.quiz-option.correct .letter{background:var(--deep-green);color:#fff;border-color:var(--deep-green)}
.quiz-option.wrong .letter{background:var(--danger);color:#fff;border-color:var(--danger)}

.combo-flame{
  display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-pill);
  background:linear-gradient(90deg,#FCE38A,#F38181);color:#7a3a1a;font-weight:800;font-size:.85rem
}
.toast-xp{
  position:fixed;right:24px;top:80px;z-index:80;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:12px 18px;box-shadow:var(--shadow-pop);font-weight:800;color:var(--deep-lavender);
  display:flex;align-items:center;gap:10px;animation:slideIn .35s ease;
}
@keyframes slideIn{from{transform:translateX(120%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ---------- 17. Reward wheel ------------------------------------------- */
.wheel-wrap{position:relative;width:340px;height:340px;margin:0 auto}
.wheel{
  width:100%;height:100%;border-radius:50%;
  background:conic-gradient(
    var(--lavender) 0 45deg,
    var(--pink) 45deg 90deg,
    var(--maize) 90deg 135deg,
    var(--blue) 135deg 180deg,
    var(--celadon) 180deg 225deg,
    var(--lavender-soft) 225deg 270deg,
    var(--pink-soft) 270deg 315deg,
    var(--blue-soft) 315deg 360deg
  );
  border:10px solid #fff;
  box-shadow:0 0 0 4px var(--lavender),0 16px 40px rgba(111,78,160,.25);
  transition:transform 4s cubic-bezier(.2,.8,.2,1);
}
.wheel-pointer{
  position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:18px solid transparent;border-right:18px solid transparent;border-top:32px solid var(--deep-lavender);
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.18));
}
.wheel-hub{
  position:absolute;inset:38% 38%;border-radius:50%;background:#fff;border:6px solid var(--lavender);
  display:grid;place-items:center;font-weight:900;font-family:var(--font-display);font-size:.9rem;color:var(--deep-lavender);
  box-shadow:inset 0 0 0 2px #fff;
}

/* ---------- 18. Misc UI ------------------------------------------------- */
.kbd{display:inline-block;padding:2px 8px;border-radius:6px;background:#F1EEF6;border:1px solid var(--border);font-family:ui-monospace,monospace;font-size:.78rem}
.divider-y{width:1px;background:var(--border);align-self:stretch;margin:0 6px}
.list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.list li{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md)}
.list li .meta{margin-left:auto;text-align:right;font-size:.82rem;color:var(--muted)}

.tabs{display:flex;gap:6px;margin-bottom:16px;border-bottom:1px solid var(--border)}
.tabs a, .tabs button{
  background:none;border:none;font-family:inherit;font-weight:700;color:var(--muted);
  padding:10px 14px;border-bottom:3px solid transparent;cursor:pointer;font-size:.92rem;
}
.tabs a.active, .tabs button.active{color:var(--deep-lavender);border-bottom-color:var(--deep-lavender)}

.role-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media (max-width:880px){.role-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.role-grid{grid-template-columns:1fr}}
.role-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;
  text-align:left;display:flex;flex-direction:column;gap:10px;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s
}
.role-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-pop);text-decoration:none}
.role-card .role-icon{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;font-size:1.7rem;background:var(--lavender-soft);color:var(--deep-lavender)}
.role-card.is-blue .role-icon{background:var(--blue-soft);color:var(--deep-blue)}
.role-card.is-green .role-icon{background:var(--celadon-soft);color:var(--deep-green)}
.role-card.is-pink .role-icon{background:var(--pink-soft);color:var(--deep-pink)}

/* Heatmap (weak topics) */
.heatmap{display:grid;grid-template-columns:160px repeat(7,1fr);gap:6px;align-items:center}
.heatmap .topic{font-size:.85rem;font-weight:700}
.heatmap .cell{height:30px;border-radius:6px;background:var(--celadon-soft)}
.heatmap .cell.l1{background:#F8E5E5}
.heatmap .cell.l2{background:#F2C7C7}
.heatmap .cell.l3{background:#E89E9E}
.heatmap .cell.l4{background:#D86969}
.heatmap .cell.l5{background:#B93838}
.heatmap .cell.ok{background:var(--celadon-soft)}

/* Bar chart */
.bar-chart{display:flex;gap:14px;align-items:flex-end;height:200px;padding:0 8px;border-bottom:1px solid var(--border)}
.bar-chart .bar{flex:1;background:linear-gradient(180deg,var(--deep-lavender),#A985D6);border-radius:8px 8px 0 0;position:relative;min-height:6px;color:#fff;text-align:center;font-weight:700;font-size:.78rem}
.bar-chart .bar span{position:absolute;bottom:-22px;left:0;right:0;color:var(--muted);font-weight:700}
.bar-chart .bar.green{background:linear-gradient(180deg,var(--deep-green),#7BBA82)}
.bar-chart .bar.blue{background:linear-gradient(180deg,var(--deep-blue),#7CC1F2)}
.bar-chart .bar.pink{background:linear-gradient(180deg,var(--deep-pink),#F471A0)}
.bar-chart .bar.maize{background:linear-gradient(180deg,var(--deep-mustard),#FDEF81);color:#7a5400}

/* Calendar streak */
.streak-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.streak-cal .day{aspect-ratio:1/1;border-radius:8px;background:var(--surface-3);border:1px solid var(--border);display:grid;place-items:center;font-size:.78rem;color:var(--muted);font-weight:700}
.streak-cal .day.done{background:var(--celadon-soft);color:var(--deep-green);border-color:#C7E2C7}
.streak-cal .day.shield{background:var(--blue-soft);color:var(--deep-blue);border-color:#C9E4FB}
.streak-cal .day.miss{background:var(--danger-soft);color:var(--danger);border-color:#F3C7C7}

/* Dashboard hero specific */
.hero-row{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center}
@media (max-width:780px){.hero-row{grid-template-columns:auto 1fr}}

/* Soft accent banners */
.banner{
  background:linear-gradient(90deg,var(--lavender-soft),var(--pink-soft));
  border:1px solid var(--lavender);border-radius:var(--r-lg);padding:16px 20px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap
}
.banner .banner-icon{width:46px;height:46px;border-radius:14px;background:#fff;display:grid;place-items:center;font-size:1.4rem}

/* Form bits */
input[type="text"],input[type="number"],input[type="email"],select,textarea{
  font:inherit;color:inherit;padding:10px 14px;background:#fff;border:1px solid var(--border);border-radius:12px;width:100%;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--deep-lavender);box-shadow:0 0 0 4px rgba(111,78,160,.12)}
label{font-weight:700;font-size:.85rem;color:var(--text);display:block;margin-bottom:6px}

/* Reward chest */
.chest{
  width:120px;height:96px;margin:0 auto;
  background:linear-gradient(180deg,#7E3F1F 0%,#3A1F0F 100%);
  border-radius:14px 14px 8px 8px;position:relative;
  box-shadow:0 12px 28px rgba(58,31,15,.3),inset 0 0 0 4px #C9852A;
}
.chest::before{
  content:"";position:absolute;left:50%;top:46%;transform:translateX(-50%);
  width:18px;height:24px;background:#FCE38A;border-radius:4px;
  box-shadow:inset 0 0 0 3px #C9852A;
}

/* Print and small spacing */
.spacer-sm{height:8px}.spacer-md{height:18px}.spacer-lg{height:32px}
.text-center{text-align:center}
.flex-end{display:flex;justify-content:flex-end}

/* footer */
.foot{padding:18px 32px;color:var(--muted);font-size:.82rem;border-top:1px solid var(--border);background:#fff}

/* ---------- 19. Animations --------------------------------------------- */
@keyframes pop{from{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}
.pop{animation:pop .35s ease}
@keyframes shine{from{background-position:0% 50%}to{background-position:200% 50%}}
.shine{
  background:linear-gradient(90deg,var(--maize) 0%,#fff 30%,var(--maize) 60%);
  background-size:200% 100%;animation:shine 2.6s linear infinite;
}
.glow-text{text-shadow:0 0 12px rgba(253,239,129,.55)}

/* ---------- 20. Responsive polish pass ---------------------------------- */
body.has-app-shell .content{
  max-width:none;
  width:100%;
  min-width:0;
  padding:clamp(22px,1.7vw,34px) clamp(22px,2vw,44px) 64px;
  overflow-x:hidden;
}
body.has-app-shell .shell{min-width:0}
body.has-app-shell .shell > .content{justify-self:stretch}
body.has-app-shell .content > *{max-width:100%}
.grid > *, .hero-row > *, .card, .stat, .banner, .list li{min-width:0}
.card{max-width:100%;overflow-wrap:anywhere}
.hero-row{width:100%}
.hero-row p,
.page-head .lede,
.list li,
.stat .value{overflow-wrap:anywhere}
.row > *{min-width:0}
.btn,.chip{min-width:0}
.chip{max-width:100%;white-space:normal;overflow-wrap:anywhere}
[data-bp-equipped="stack"],
[data-bp-equipped="avatar"],
.bp-stack,
.bp-stack svg{max-width:100%}
.card:has(table){overflow-x:auto}
table{max-width:100%}
.mobile-nav-toggle{display:none}

@media (min-width:1600px){
  :root{--sidebar-w:268px}
  h1{font-size:2.05rem}
  .card{padding:24px}
}

@media (max-width:980px){
  body.has-app-shell .header{
    padding:0 12px;
    gap:8px;
  }
  .mobile-nav-toggle{
    width:42px;height:42px;border-radius:12px;border:1px solid var(--border);
    display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:var(--surface);box-shadow:var(--shadow-card);flex:0 0 auto;
  }
  .mobile-nav-toggle span{width:18px;height:2px;border-radius:999px;background:var(--deep-lavender)}
  body.has-app-shell .brand{font-size:.95rem;min-width:0}
  body.has-app-shell .brand-mark{width:34px;height:34px;border-radius:10px;flex:0 0 auto}
  body.has-app-shell .header > .pill,
  body.has-app-shell .header > .btn{display:none}
  body.has-app-shell .userchip{
    max-width:44vw;
    padding:4px 10px 4px 4px;
    gap:8px;
    font-size:.82rem;
    white-space:nowrap;
    overflow:hidden;
  }
  body.has-app-shell .userchip > span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
  }
  body.has-app-shell .userchip .brand-sub{display:none}
  body.has-app-shell .shell{grid-template-columns:1fr}
  body.has-app-shell .sidebar{
    display:block;
    position:fixed;
    top:var(--header-h);
    left:0;
    bottom:0;
    width:min(84vw,320px);
    height:auto;
    z-index:90;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(18px);
    box-shadow:18px 0 44px rgba(44,42,54,.16);
    transform:translateX(-105%);
    transition:transform .22s ease;
  }
  body.has-app-shell.nav-open .sidebar{transform:translateX(0)}
  body.has-app-shell.nav-open::before{
    content:"";
    position:fixed;
    left:0;right:0;top:var(--header-h);bottom:0;
    z-index:80;
    background:rgba(44,42,54,.25);
  }
  body.has-app-shell .content{
    max-width:none;
    padding:20px 16px 88px;
  }
  body.has-app-shell .cols-12,
  body.has-app-shell .cols-2,
  body.has-app-shell .cols-3,
  body.has-app-shell .cols-4{
    grid-template-columns:1fr;
  }
  body.has-app-shell [class*="col-span-"]{grid-column:auto}
  .page-head{
    align-items:flex-start;
    gap:12px;
    margin-bottom:16px;
  }
  .page-head > div{min-width:0}
  .page-head h1{font-size:1.72rem;line-height:1.1}
  .page-head .lede{font-size:.95rem;max-width:100%}
  .page-head > .row{
    width:100%;
    gap:8px;
  }
  .page-head > .row .btn{flex:1 1 160px;justify-content:center}
  .card{border-radius:18px;padding:18px}
  .card-title{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{padding:14px 16px}
  .stat .value{font-size:1.45rem;line-height:1.1}
  .tabs{
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:2px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tabs a,.tabs button{
    flex:0 0 auto;
    white-space:nowrap;
    padding:10px 12px;
  }
  .hero-row{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }
  .hero-row .row{justify-content:center}
  .banner{padding:14px 16px;border-radius:18px}
  .banner .banner-icon{width:40px;height:40px;border-radius:12px}
  .focus-room{padding:18px 14px 22px;border-radius:20px}
  .focus-room .room-header{gap:12px}
  .focus-room .room-header h2{font-size:1.18rem}
  .focus-room .room-meta{width:100%;align-items:flex-start}
  .room-meta .row{width:100%}
  .focus-scene{height:130px}
  .focus-scene .window{left:4%;width:36%;height:74px}
  .focus-scene .shelf{right:4%;width:30%;height:66px}
  .focus-scene .plant{left:43%;transform:scale(.82);transform-origin:bottom center}
  .focus-scene .lamp{left:58%;transform:scale(.82);transform-origin:bottom center}
  .focus-floor{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px}
  .focus-seat{padding:10px 8px 8px}
  .battle-stage,.quiz-card{border-radius:20px;padding:20px 16px}
  .jeopardy-board{min-width:680px}
  .level-path{overflow-x:auto}
  .level-path svg{min-width:620px}
  .heatmap{overflow-x:auto;grid-template-columns:140px repeat(7,42px)}
}

@media (max-width:640px){
  body.has-app-shell .content{padding:18px 12px 86px}
  body.has-app-shell .header .brand-sub{display:none}
  body.has-app-shell .brand{font-size:.9rem}
  body.has-app-shell .userchip{
    max-width:none;
    padding:4px;
    border-radius:50%;
  }
  body.has-app-shell .header .userchip > span:last-child{display:none}
  .page-head h1{font-size:1.55rem}
  .page-head > div:first-child{width:100%}
  .page-head > .row{
    display:grid;
    grid-template-columns:1fr;
  }
  .page-head > .chip{align-self:flex-start}
  .card-title > .chip{max-width:100%;justify-content:center}
  .stats{grid-template-columns:1fr}
  .row{gap:10px}
  .btn{
    min-height:42px;
    justify-content:center;
  }
  .btn-sm{min-height:36px}
  .chip{font-size:.74rem;line-height:1.2}
  #board-rows > .row{
    display:grid;
    grid-template-columns:30px 48px minmax(0,1fr);
    align-items:center;
    gap:10px !important;
  }
  #board-rows > .row > .chip{
    grid-column:2 / -1;
    justify-self:start;
  }
  #board-rows > .row > div:nth-child(3){
    min-width:0;
  }
  .list li{
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .list li .meta{
    width:100%;
    margin-left:0;
    text-align:left;
  }
  table{
    display:block;
    overflow-x:auto;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch;
  }
  th,td{white-space:nowrap}
  .focus-floor{grid-template-columns:1fr}
  .focus-scene .shelf{right:3%;width:34%}
  .focus-scene .plant{left:46%}
  .focus-scene .lamp{left:61%}
  .badge-grid,.avatar-collection{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tier-row{padding:14px}
  .tier-row .tier-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .col-card{padding:16px 10px 12px}
  .col-card .col-art{width:112px;height:112px}
  .wheel-wrap{width:min(82vw,300px);height:min(82vw,300px)}
  .phone-frame{padding:14px;border-radius:32px}
  .phone-screen{min-height:500px;border-radius:22px}
  .buzz-button{width:190px;height:190px;font-size:2rem}
}

@media (max-width:430px){
  body.has-app-shell .header{padding:0 10px}
  .mobile-nav-toggle{width:38px;height:38px}
  body.has-app-shell .brand{gap:8px}
  body.has-app-shell .brand-mark{width:32px;height:32px}
  body.has-app-shell .userchip{max-width:none;font-size:.78rem}
  body.has-app-shell .userchip .avatar,
  body.has-app-shell .userchip .bp-mascot{width:30px !important;height:30px !important}
  .card{padding:16px;border-radius:16px}
  .focus-floor{grid-template-columns:1fr}
  .badge-grid,.avatar-collection,.tier-row .tier-grid{grid-template-columns:1fr}
  .tabs{margin-left:-12px;margin-right:-12px;padding-left:12px}
}

/* ---------- 21. Fixed desktop viewport mode ----------------------------- */
html,
body{
  min-width:1200px;
  overflow-x:auto;
}

.app,
.app-wrapper,
.page-wrapper,
.main-wrapper,
.dashboard-wrapper,
.container,
body > main{
  min-width:1200px;
}

body.has-app-shell .header,
body.has-app-shell .shell{
  min-width:1200px;
}

@media (max-width:1199px){
  body.has-app-shell .header{
    padding:0 22px;
    gap:14px;
  }
  .mobile-nav-toggle{display:none}
  body.has-app-shell .brand{
    font-size:1.05rem;
    gap:10px;
  }
  body.has-app-shell .brand-mark{
    width:36px;
    height:36px;
    border-radius:11px;
  }
  body.has-app-shell .header .brand-sub,
  body.has-app-shell .header .userchip > span:last-child,
  body.has-app-shell .userchip .brand-sub{
    display:inline;
  }
  body.has-app-shell .header > .pill,
  body.has-app-shell .header > .btn{
    display:inline-flex;
  }
  body.has-app-shell .userchip{
    max-width:none;
    padding:5px 14px 5px 5px;
    gap:10px;
    border-radius:var(--r-pill);
    font-size:.9rem;
    white-space:normal;
    overflow:visible;
  }
  body.has-app-shell .userchip .avatar,
  body.has-app-shell .userchip .bp-mascot{
    width:30px;
    height:30px;
  }
  body.has-app-shell .shell{
    grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  }
  body.has-app-shell .sidebar{
    display:block;
    position:static;
    width:auto;
    height:100%;
    min-height:0;
    transform:none;
    transition:none;
    z-index:auto;
    background:rgba(255,255,255,.55);
    box-shadow:none;
    backdrop-filter:none;
  }
  body.has-app-shell.nav-open::before{display:none}
  body.has-app-shell .content{
    max-width:none;
    padding:clamp(22px,1.7vw,34px) clamp(22px,2vw,44px) 64px;
  }
  .cols-2{grid-template-columns:1fr 1fr}
  .cols-3{grid-template-columns:repeat(3,1fr)}
  .cols-4{grid-template-columns:repeat(4,1fr)}
  .cols-12{grid-template-columns:repeat(12,1fr)}
  .col-span-2{grid-column:span 2}
  .col-span-3{grid-column:span 3}
  .col-span-4{grid-column:span 4}
  .col-span-5{grid-column:span 5}
  .col-span-6{grid-column:span 6}
  .col-span-7{grid-column:span 7}
  .col-span-8{grid-column:span 8}
  .col-span-9{grid-column:span 9}
  .col-span-12{grid-column:span 12}
  .page-head{
    align-items:flex-end;
    gap:18px;
    margin-bottom:20px;
  }
  .page-head > div:first-child{width:auto}
  .page-head h1{font-size:1.9rem}
  .page-head .lede{font-size:1rem;max-width:680px}
  .page-head > .row{
    display:flex;
    width:auto;
    gap:14px;
  }
  .page-head > .row .btn{flex:0 0 auto}
  .card{border-radius:var(--r-lg);padding:22px}
  .card-title{
    align-items:center;
    flex-wrap:nowrap;
  }
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat{padding:16px 18px}
  .stat .value{font-size:1.7rem}
  .tabs{
    overflow-x:visible;
    padding-bottom:0;
  }
  .tabs a,
  .tabs button{
    flex:0 1 auto;
    padding:10px 14px;
  }
  .hero-row{
    grid-template-columns:auto 1fr auto;
    text-align:left;
    justify-items:stretch;
  }
  .hero-row .row{justify-content:flex-start}
  .focus-room{padding:26px;border-radius:var(--r-xl)}
  .focus-room .room-meta{
    width:auto;
    align-items:flex-end;
  }
  .focus-scene{height:140px}
  .focus-scene .window{left:4%;width:28%;height:82px}
  .focus-scene .shelf{right:4%;width:28%;height:70px}
  .focus-scene .plant{left:42%;transform:none}
  .focus-scene .lamp{left:55%;transform:none}
  .focus-floor{grid-template-columns:repeat(4,1fr);gap:18px;padding:18px}
  #board-rows > .row{
    display:flex;
    grid-template-columns:none;
  }
  #board-rows > .row > .chip{
    grid-column:auto;
    justify-self:auto;
  }
  .list li{
    align-items:center;
    flex-wrap:nowrap;
  }
  .list li .meta{
    width:auto;
    margin-left:auto;
    text-align:right;
  }
  table{
    display:table;
    overflow-x:visible;
    white-space:normal;
  }
  th,
  td{
    white-space:normal;
  }
  .badge-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  .avatar-collection{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .tier-row .tier-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
  .wheel-wrap{width:340px;height:340px}
  .phone-frame{padding:18px;border-radius:38px}
  .phone-screen{min-height:560px;border-radius:28px}
  .buzz-button{width:220px;height:220px;font-size:2.2rem}
}