:root {
  --ink: #0f172a;
  --muted: #5c6478;
  --line: #e0e7ff;
  --panel: #ffffff;
  --panel-soft: #f5f7ff;
  --page-glow: rgba(79, 70, 229, 0.12);
  --page-start: #f8faff;
  --page-mid: #eef2ff;
  --page-end: #f5f8ff;
  --panel-translucent: rgba(255, 255, 255, 0.94);
  --control-bg: #ffffff;
  --soft-button: #f3efff;
  --track-bg: #ece9f4;
  --indigo: #4f46e5;
  --indigo-light: #6366f1;
  --indigo-dark: #312e81;
  --indigo-deep: #1e1b4b;
  --blue: #3b82f6;
  --green: #14b86a;
  --orange: #ff8b1a;
  --pink: #ef477f;
  --gold: #ffc83d;
  --shadow: 0 18px 50px rgba(30, 27, 75, 0.14);
}

.xp-challenge-hero,
.xp-challenge-game {
  margin-top: 22px;
  padding: 28px;
  border: 1px solid rgba(139, 92, 246, 0.34);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(30, 41, 91, 0.96), rgba(49, 46, 129, 0.94), rgba(8, 47, 73, 0.96));
  box-shadow: 0 20px 55px rgba(49, 46, 129, 0.2);
}

.xp-challenge-hero { color: #fff; }
.xp-challenge-hero h2 { margin: 6px 0 8px; font-size: 34px; }
.xp-challenge-hero p { color: #dbeafe; }
.xp-challenge-rewards { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.xp-challenge-rewards span { padding: 8px 11px; border-radius: 999px; color: #fff; background: rgba(255,255,255,.12); font-size: 12px; font-weight: 900; }
.xp-challenge-game { display: grid; justify-items: center; gap: 17px; background: var(--panel-translucent); }

.xp-target-track { position: relative; width: min(780px, 100%); height: 86px; overflow: hidden; border: 3px solid #1e3a8a; border-radius: 18px; background: linear-gradient(90deg,#dbeafe,#93c5fd 35%,#c4b5fd 50%,#93c5fd 65%,#dbeafe); box-shadow: inset 0 0 28px rgba(30,64,175,.2); }
.xp-zone-wide,.xp-zone-close,.xp-zone-perfect { position:absolute;top:0;height:100%;transform:translateX(-50%); }
.xp-zone-wide { left:50%;width:30%;background:rgba(59,130,246,.2); }
.xp-zone-close { left:50%;width:15%;background:rgba(139,92,246,.35); }
.xp-zone-perfect { left:50%;width:5%;background:linear-gradient(#e879f9,#7c3aed);box-shadow:0 0 22px #a855f7; }
.xp-moving-marker { position:absolute;z-index:3;left:4%;top:50%;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;background:linear-gradient(135deg,#0ea5e9,#7c3aed);box-shadow:0 0 20px #38bdf8;transform:translate(-50%,-50%); }
.xp-target-track.running .xp-moving-marker { animation:xpMarkerRun 1.35s ease-in-out infinite alternate; }
.xp-challenge-button { min-width:220px; }
.xp-challenge-timer,.xp-challenge-message { margin:0;font-weight:900;text-align:center; }
.xp-challenge-message { min-height:24px;color:#7c3aed; }
.xp-best-score { padding:10px 14px;border-radius:10px;color:var(--muted);background:var(--panel-soft);font-weight:800; }
@keyframes xpMarkerRun { from{left:4%;transform:translate(-50%,-50%) rotate(0)} to{left:96%;transform:translate(-50%,-50%) rotate(720deg)} }
@media(prefers-reduced-motion:reduce){.xp-target-track.running .xp-moving-marker{animation-duration:2.6s}}

/* Ambiance lumineuse générale — volontairement désactivée dans le Passe de niveau. */
body:not(:has(#levelPassView.active)) .main {
  background:
    radial-gradient(ellipse at 12% 18%, rgba(30, 64, 175, 0.28), transparent 28%),
    radial-gradient(ellipse at 82% 28%, rgba(79, 70, 229, 0.24), transparent 30%),
    radial-gradient(ellipse at 46% 82%, rgba(8, 145, 178, 0.18), transparent 34%),
    linear-gradient(135deg, var(--page-start), var(--page-mid) 48%, var(--page-end));
  background-size: 150% 150%, 160% 160%, 145% 145%, 100% 100%;
  animation: globalBlueBackground 10s ease-in-out infinite alternate;
}

body:not(:has(#levelPassView.active)) .view.active :is(section, article),
body:not(:has(#levelPassView.active)) .topbar,
body:not(:has(#levelPassView.active)) .sidebar {
  box-shadow: inset 0 0 24px rgba(37, 99, 235, 0.035), 0 0 24px rgba(79, 70, 229, 0.045);
}

body:not(:has(#levelPassView.active)) :is(
  .topbar h1,
  .topbar p,
  .view.active h1,
  .view.active h2,
  .view.active h3,
  .view.active p,
  .view.active label,
  .view.active summary,
  .connection-status,
  .nav-item
) {
  animation: globalPurpleText 5.2s linear infinite;
}

body[data-theme="dark"]:not(:has(#levelPassView.active)) :is(
  .topbar h1,
  .topbar p,
  .view.active h1,
  .view.active h2,
  .view.active h3,
  .view.active p,
  .view.active label,
  .view.active summary,
  .connection-status,
  .nav-item
) {
  --global-purple-glow: rgba(216, 180, 254, 0.78);
}

body:not(:has(#levelPassView.active)) .view.active :is(h2, h3, p):nth-child(2n) { animation-delay: -1.7s; }
body:not(:has(#levelPassView.active)) .view.active :is(h2, h3, p):nth-child(3n) { animation-delay: -3.4s; }

@keyframes globalPurpleText {
  0%, 100% { text-shadow: -10px 0 15px transparent, 0 0 0 transparent; filter: brightness(1); }
  35% { text-shadow: -3px 0 8px rgba(139, 92, 246, 0.22), 2px 0 13px rgba(168, 85, 247, 0.42); filter: brightness(1.06); }
  55% { text-shadow: 5px 0 12px var(--global-purple-glow, rgba(168, 85, 247, 0.48)), 11px 0 18px rgba(124, 58, 237, 0.22); filter: brightness(1.12); }
  75% { text-shadow: 12px 0 16px transparent, 4px 0 9px rgba(168, 85, 247, 0.18); filter: brightness(1.04); }
}

@keyframes globalBlueBackground {
  0% { background-position: 0% 10%, 100% 0%, 35% 100%, 0 0; }
  50% { background-position: 18% 32%, 76% 22%, 58% 72%, 0 0; }
  100% { background-position: 4% 48%, 92% 38%, 30% 58%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  body:not(:has(#levelPassView.active)) .main,
  body:not(:has(#levelPassView.active)) :is(.topbar h1, .topbar p, .view.active h1, .view.active h2, .view.active h3, .view.active p, .view.active label, .view.active summary, .connection-status, .nav-item) {
    animation: none;
  }
}

.lesson-card {
  margin: 16px 0 22px;
  border: 1px solid rgba(104, 126, 255, 0.38);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(69, 84, 210, 0.16), rgba(17, 28, 52, 0.72));
  overflow: hidden;
}

.lesson-card summary {
  padding: 15px 18px;
  cursor: pointer;
  color: #e9edff;
  font-weight: 800;
  list-style-position: inside;
}

.lesson-card[open] summary {
  border-bottom: 1px solid rgba(133, 150, 255, 0.22);
}

.lesson-card-content {
  display: grid;
  gap: 9px;
  padding: 16px 18px 18px;
  color: #cdd5ee;
  line-height: 1.55;
}

.lesson-card-content p { margin: 0; }
.lesson-card-content strong { color: #8fe5c0; }
.feedback span { display: inline-block; margin-top: 7px; line-height: 1.45; }

/* Animation plein écran lors du déblocage d'un niveau du Passe */
.level-unlock-overlay { --unlock:#f59e0b; --unlock-soft:#fde68a; position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:20px; overflow:hidden; color:#fff; background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--unlock) 32%,transparent),transparent 38%),rgba(3,7,18,.88); backdrop-filter:blur(12px); opacity:0; transition:opacity .22s ease; }
.level-unlock-overlay.unlocking { opacity:1; }
.tier-unlock-bronze{--unlock:#c56f32;--unlock-soft:#fdba74}.tier-unlock-silver{--unlock:#b8c4d4;--unlock-soft:#f1f5f9}.tier-unlock-gold{--unlock:#facc15;--unlock-soft:#fef08a}.tier-unlock-platinum{--unlock:#7dd3fc;--unlock-soft:#e0f2fe}.tier-unlock-diamond{--unlock:#38bdf8;--unlock-soft:#a5f3fc}.tier-unlock-champion{--unlock:#fb7185;--unlock-soft:#fda4af}.tier-unlock-elite{--unlock:#c084fc;--unlock-soft:#e9d5ff}.tier-unlock-pro{--unlock:#fb923c;--unlock-soft:#fde047}
.level-unlock-card { position:relative; isolation:isolate; display:grid; justify-items:center; gap:9px; width:min(420px,94vw); padding:32px 24px 28px; overflow:hidden; border:2px solid color-mix(in srgb,var(--unlock) 75%,white); border-radius:28px; text-align:center; background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--unlock) 25%,transparent),transparent 36%),linear-gradient(145deg,rgba(30,41,59,.97),rgba(8,15,32,.98)); box-shadow:0 0 55px color-mix(in srgb,var(--unlock) 45%,transparent),0 35px 100px rgba(0,0,0,.55); transform:translateY(30px) scale(.82); animation:levelCardArrival .55s cubic-bezier(.18,.9,.25,1.25) forwards; }
.level-unlock-card>*:not(.level-unlock-rays,.level-unlock-stars){position:relative;z-index:2}.level-unlock-rays{position:absolute;z-index:0;left:50%;top:42%;width:390px;height:390px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--unlock) 38%,transparent) 0 7deg,transparent 7deg 18deg);transform:translate(-50%,-50%);animation:levelRaysSpin 5s linear infinite}.level-unlock-stars{position:absolute;z-index:3;left:50%;top:46%;width:0;height:0}.level-unlock-stars i{--a:calc(var(--star)*20deg);position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 9px #fff,0 0 16px var(--unlock);opacity:0}.level-unlock-overlay.unlocked .level-unlock-stars i{animation:levelStarBurst 1.15s ease-out calc(var(--star)*18ms) both}
.level-unlock-eyebrow{margin:0;color:var(--unlock-soft);font-size:12px;font-weight:1000;letter-spacing:.16em;text-transform:uppercase}.level-number-medal{display:grid;place-items:center;width:132px;height:132px;border:6px solid var(--unlock-soft);border-radius:50%;color:#fff;background:linear-gradient(145deg,var(--unlock),#4f46e5);box-shadow:0 0 0 8px color-mix(in srgb,var(--unlock) 20%,transparent),0 0 38px var(--unlock);font-size:58px;font-weight:1000;text-shadow:0 4px 12px rgba(0,0,0,.28);animation:levelMedalPulse 1.3s ease-in-out infinite}
.level-padlock{position:relative;width:58px;height:50px;margin-top:-18px;border:4px solid #92400e;border-radius:10px;background:linear-gradient(145deg,#fef3c7,#fbbf24);box-shadow:0 6px 16px rgba(0,0,0,.3),0 0 18px #facc15;transform-origin:50% 100%}.level-padlock>span{position:absolute;left:50%;top:-31px;width:35px;height:37px;border:7px solid #fde68a;border-bottom:0;border-radius:20px 20px 0 0;transform:translateX(-50%);transform-origin:4px 30px}.level-padlock strong{display:grid;place-items:center;height:100%;color:#78350f}.level-unlock-overlay.unlocked .level-padlock>span{animation:padlockOpen .55s cubic-bezier(.2,.85,.3,1.3) forwards}.level-unlock-overlay.unlocked .level-padlock{animation:padlockBurst .6s ease .36s both}.level-unlock-card h2{margin:2px 0 0;font-size:31px;text-shadow:0 0 18px var(--unlock)}.level-unlock-card>p:last-child{margin:0;color:var(--unlock-soft);font-weight:900}.level-unlock-overlay:not(.unlocked) .level-unlock-card h2{opacity:0;transform:translateY(12px)}.level-unlock-overlay.unlocked .level-unlock-card h2{animation:levelTitleReveal .55s cubic-bezier(.2,.9,.25,1.25) .28s both}.level-unlock-overlay.leaving{opacity:0;transition:opacity .28s ease}
@keyframes levelCardArrival{to{transform:translateY(0) scale(1)}}@keyframes levelRaysSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes levelMedalPulse{50%{transform:scale(1.06);filter:brightness(1.25)}}@keyframes padlockOpen{55%{transform:translateX(-50%) rotate(-38deg) translate(-7px,-7px)}100%{transform:translateX(-50%) rotate(-48deg) translate(-10px,-10px)}}@keyframes padlockBurst{45%{transform:scale(1.22);filter:brightness(1.8)}100%{transform:scale(.7);opacity:0}}@keyframes levelTitleReveal{0%{opacity:0;transform:translateY(12px) scale(.85)}70%{opacity:1;transform:translateY(-4px) scale(1.08)}100%{opacity:1;transform:none}}@keyframes levelStarBurst{0%{opacity:0;transform:rotate(var(--a)) translateY(-55px) scale(.2)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-220px) scale(1.35)}}
@media(prefers-reduced-motion:reduce){.level-unlock-card,.level-unlock-rays,.level-number-medal,.level-padlock,.level-padlock>span,.level-unlock-stars i{animation-duration:.01ms!important;animation-iteration-count:1!important}}

body[data-theme="dark"] {
  --ink: #f8fafc;
  --muted: #aab4ca;
  --line: #27324d;
  --panel: #111827;
  --panel-soft: #162033;
  --page-glow: rgba(59, 130, 246, 0.14);
  --page-start: #070b16;
  --page-mid: #111827;
  --page-end: #0b1020;
  --panel-translucent: rgba(17, 24, 39, 0.96);
  --control-bg: #0f172a;
  --soft-button: #202a44;
  --track-bg: #27324d;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
}

* {
  box-sizing: border-box;
}

body.feature-animations-disabled *,body.feature-animations-disabled *::before,body.feature-animations-disabled *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
body.feature-premium-disabled .premium-promo,
body.feature-premium-disabled .premium-button,
body.feature-premium-disabled .premium-pay-link,
body.feature-premium-disabled .premium-reward,
body.feature-premium-disabled .profile-premium-line,
body.feature-premium-disabled .premium-countdown,
body.feature-premium-disabled .badge-premium,
body.feature-premium-disabled .level-pass-card:has(.premium-tag),
body.feature-premium-disabled #premiumModal{display:none!important}
.maintenance-overlay{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 50% 20%,#312e81,#111827 58%,#020617);color:#fff;text-align:center}
.maintenance-overlay.hidden{display:none}
.maintenance-card{width:min(560px,100%);padding:52px 30px;border:1px solid rgba(255,255,255,.18);border-radius:28px;background:rgba(15,23,42,.82);box-shadow:0 28px 90px rgba(37,99,235,.4);backdrop-filter:blur(18px)}
.maintenance-card h1{margin:8px 0 12px;font-size:clamp(32px,6vw,58px)}
.maintenance-card>p:last-child{color:#c7d2fe;font-size:18px;font-weight:750}
.maintenance-loader{width:70px;height:70px;margin:0 auto 24px;border:8px solid rgba(255,255,255,.14);border-top-color:#a78bfa;border-right-color:#38bdf8;border-radius:50%;animation:maintenanceSpin 1s linear infinite}
@keyframes maintenanceSpin{to{transform:rotate(360deg)}}
.series-panel{display:flex;flex-wrap:wrap;gap:9px;margin:14px 0 18px}
.series-button{padding:10px 13px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:var(--panel);font-weight:850;cursor:pointer}
.series-button.active{color:#fff;border-color:transparent;background:linear-gradient(135deg,var(--blue),var(--indigo));box-shadow:0 7px 18px rgba(79,70,229,.25)}
.series-progress{display:grid;grid-template-columns:1fr auto;gap:8px;margin:0 0 14px;padding:13px 15px;border:1px solid rgba(79,70,229,.22);border-radius:12px;background:var(--panel)}
.series-progress div{grid-column:1/-1;height:8px;overflow:hidden;border-radius:99px;background:var(--line)}
.series-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#22c55e,#38bdf8,#8b5cf6)}
.exercise-meta{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.exercise-meta span{padding:6px 9px;border-radius:999px;color:#3730a3;background:#e0e7ff;font-size:12px;font-weight:900}
.written-answer-form{display:grid;gap:8px;margin:18px 0}.written-answer-form label{font-weight:900}.written-answer-form>div{display:flex;gap:9px}.written-answer-form input{flex:1;min-height:48px;padding:0 14px;border:2px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);font:inherit}
.exercise-hint{margin:14px 0;padding:11px 13px;border-radius:10px;background:rgba(56,189,248,.08)}.exercise-hint summary{cursor:pointer;font-weight:900}.exercise-hint p{color:var(--muted)}
.series-summary{padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.series-summary h2{font-size:38px}.series-summary h3{margin:20px 0 6px}.series-summary-stats{display:flex;flex-wrap:wrap;gap:10px}.series-summary-stats span{padding:9px 12px;border-radius:9px;background:rgba(34,197,94,.11);font-weight:850}.series-recommendation{margin:20px 0;padding:14px;border-left:4px solid #8b5cf6;background:rgba(139,92,246,.09)}

/* Les avatars équipés gardent leur apparence même si les styles généraux
   de .avatar-button et .profile-avatar sont déclarés plus loin. */
.avatar-button.skin-fox,.profile-avatar.skin-fox{background:linear-gradient(145deg,#fdba74,#ea580c)!important}
.avatar-button.skin-robot,.profile-avatar.skin-robot{background:linear-gradient(145deg,#cbd5e1,#334155)!important}
.avatar-button.skin-wizard,.profile-avatar.skin-wizard{background:linear-gradient(145deg,#c084fc,#581c87)!important}
.avatar-button.skin-king,.profile-avatar.skin-king{background:linear-gradient(145deg,#fef08a,#ca8a04)!important}
.avatar-button.skin-ninja,.profile-avatar.skin-ninja{background:linear-gradient(145deg,#374151,#030712)!important}
.avatar-button.skin-panda,.profile-avatar.skin-panda{background:linear-gradient(145deg,#f8fafc,#94a3b8)!important;color:#111827}
.avatar-button.skin-dragon,.profile-avatar.skin-dragon{background:linear-gradient(145deg,#86efac,#15803d)!important}
.avatar-button.skin-phoenix,.profile-avatar.skin-phoenix{background:radial-gradient(circle at 50% 30%,#fde047,#f97316 48%,#991b1b)!important}
.avatar-button.skin-galaxy,.profile-avatar.skin-galaxy{background:radial-gradient(circle at 35% 25%,#e0e7ff,#6366f1 35%,#1e1b4b 82%)!important}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, var(--page-glow), transparent 32%),
    linear-gradient(135deg, var(--page-start) 0%, var(--page-mid) 48%, var(--page-end) 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.banned-account-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #0f172a; color: white; text-align: center; }
.banned-account-screen > div { width: min(100%, 480px); padding: 42px; border: 1px solid rgba(248,113,113,.45); border-radius: 18px; background: rgba(30,41,59,.92); box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.banned-account-screen strong { display: inline-grid; place-items: center; width: 70px; height: 70px; border-radius: 20px; background: linear-gradient(135deg,#ef4444,#7c3aed); font-size: 38px; }

.admin-access-banner{position:fixed;z-index:130;top:12px;left:50%;display:flex;align-items:center;gap:12px;width:min(760px,calc(100% - 24px));padding:11px 15px;border:1px solid rgba(250,204,21,.7);border-radius:12px;color:#fff;background:linear-gradient(135deg,#312e81,#7c3aed);box-shadow:0 12px 35px rgba(49,46,129,.35);transform:translateX(-50%)}.admin-access-banner span{flex:1;font-size:13px}.admin-access-banner a{padding:7px 10px;border-radius:8px;color:#312e81;background:#fde68a;font-size:12px;font-weight:900;text-decoration:none}@media(max-width:650px){.admin-access-banner{align-items:flex-start;flex-wrap:wrap}.admin-access-banner span{flex-basis:100%;order:3}}

.admin-notification-overlay{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px;background:rgba(3,7,18,.88);backdrop-filter:blur(12px);animation:chestFadeIn .25s ease both}.admin-notification-overlay section{display:grid;justify-items:center;gap:10px;width:min(460px,94vw);padding:34px 28px;border:2px solid #f87171;border-radius:24px;color:#fff;text-align:center;background:radial-gradient(circle at 50% 0,rgba(239,68,68,.3),transparent 42%),linear-gradient(145deg,#1e293b,#0f172a);box-shadow:0 0 42px rgba(239,68,68,.38),0 30px 90px rgba(0,0,0,.55);animation:mobileCardIn .45s cubic-bezier(.2,.9,.25,1.2) both}.admin-notification-overlay section>span{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;color:#7f1d1d;background:linear-gradient(145deg,#fef2f2,#fca5a5);box-shadow:0 0 25px rgba(248,113,113,.7);font-size:44px;font-weight:1000}.admin-notification-overlay p{margin:0;color:#fca5a5;font-size:12px;font-weight:1000;letter-spacing:.14em;text-transform:uppercase}.admin-notification-overlay h2{margin:2px 0;font-size:28px}.admin-notification-overlay strong{font-size:19px;line-height:1.45}.admin-notification-overlay button{margin-top:12px;padding:12px 24px;border:0;border-radius:10px;color:#fff;background:linear-gradient(135deg,#ef4444,#b91c1c);font-weight:900;cursor:pointer}.admin-notification-overlay.closing{animation:chestFadeOut .25s ease forwards}

button,
input,
select {
  font: inherit;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100vh;
  padding: 26px 22px;
  overflow: hidden;
  color: white;
  background: linear-gradient(180deg, #0f172a 0%, #1e1b4b 55%, #0c1229 100%);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 31px;
  font-weight: 900;
  letter-spacing: 0;
}

.brand strong {
  color: #a5b4fc;
}

.brand-mark {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 13px;
  color: white;
  background: linear-gradient(135deg, var(--indigo-light), var(--indigo));
  box-shadow: 0 14px 30px rgba(79, 70, 229, 0.35);
}

.nav-list {
  display: grid;
  gap: 10px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  min-height: 48px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  font-weight: 800;
  text-align: left;
}

.nav-item.active,
.nav-item:hover {
  color: white;
  background: linear-gradient(135deg, var(--indigo-light), var(--indigo));
}

.icon {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 42%, transparent));
  transition: transform 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.home-icon { color: #60a5fa; }
.book-icon { color: #fbbf24; }
.quiz-icon { color: #fb7185; }
.pass-icon { color: #c084fc; }
.reward-icon { color: #fb923c; }
.shop-icon { color: #38bdf8; }
.rank-icon { color: #facc15; }
.profile-icon { color: #a78bfa; }
.skins-icon { color: #f472b6; }

.nav-item:hover .icon,
.nav-item.active .icon {
  opacity: 1;
  filter: drop-shadow(0 0 9px color-mix(in srgb, currentColor 72%, transparent));
  transform: scale(1.1);
}

.skins-icon::before {
  position: absolute;
  left: 3px;
  top: 7px;
  width: 16px;
  height: 12px;
  border: 2px solid currentColor;
  border-radius: 4px 4px 7px 7px;
  background: color-mix(in srgb, currentColor 18%, transparent);
  content: "";
}

.skins-icon::after {
  position: absolute;
  left: 7px;
  top: 1px;
  width: 8px;
  height: 9px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
  content: "";
}

.home-icon::before,
.book-icon::before,
.quiz-icon::before,
.rank-icon::before,
.reward-icon::before,
.profile-icon::before {
  position: absolute;
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 5px;
  content: "";
}

.reward-icon::after {
  position: absolute;
  left: 5px;
  top: 9px;
  width: 12px;
  height: 8px;
  border: 2px solid currentColor;
  border-top-width: 5px;
  border-radius: 2px;
  content: "";
}


.pass-icon::before {
  position: absolute;
  inset: 4px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
}

.pass-icon::after {
  position: absolute;
  left: 10px;
  top: 4px;
  width: 2px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  transform-origin: bottom;
  transform: rotate(34deg);
  content: "";
}

.home-icon::after {
  position: absolute;
  left: 4px;
  top: 0;
  width: 14px;
  height: 14px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  content: "";
}

.book-icon::before {
  border-radius: 3px;
  box-shadow: 8px 0 0 -6px currentColor;
}

.quiz-icon::after {
  position: absolute;
  left: 8px;
  top: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.rank-icon::before {
  inset: 12px 3px 3px;
  border-radius: 3px;
}

.rank-icon::after {
  position: absolute;
  left: 9px;
  top: 4px;
  width: 4px;
  height: 15px;
  background: currentColor;
  box-shadow: -7px 6px 0 -1px currentColor, 7px -2px 0 1px currentColor;
  content: "";
}

.profile-icon::before {
  inset: 12px 4px 2px;
  border-radius: 10px 10px 3px 3px;
}

.profile-icon::after {
  position: absolute;
  left: 7px;
  top: 3px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
  content: "";
}

.hidden {
  display: none !important;
}

.welcome-profile-modal {
  width: min(520px, calc(100% - 28px));
  max-height: calc(100dvh - 28px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 26px;
  color: var(--ink);
  background: transparent;
  box-shadow: 0 34px 100px rgba(30, 27, 75, 0.46);
}

.welcome-profile-modal::backdrop {
  background: radial-gradient(circle at 50% 18%, rgba(99, 102, 241, 0.64), rgba(15, 23, 42, 0.88));
  backdrop-filter: blur(10px);
}

.welcome-profile-card {
  display: grid;
  gap: 13px;
  padding: 30px;
  border: 1px solid rgba(129, 140, 248, 0.42);
  border-radius: 26px;
  background: linear-gradient(145deg, var(--panel), var(--panel-soft));
}

.welcome-profile-logo {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #312e81);
  box-shadow: 0 12px 26px rgba(79, 70, 229, 0.34);
  font-size: 31px;
  font-weight: 1000;
}

.welcome-profile-card .eyebrow { margin: 3px 0 -8px; }
.welcome-profile-card h2 { margin: 0; font-size: clamp(30px, 8vw, 42px); }
.welcome-profile-intro { margin: -4px 0 4px; color: var(--muted); line-height: 1.5; }
.welcome-profile-card label { display: grid; gap: 7px; color: var(--ink); font-weight: 900; }
.welcome-profile-card input {
  width: 100%;
  min-height: 50px;
  padding: 0 14px;
  border: 2px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: var(--control-bg);
  font: inherit;
}
.welcome-profile-card input:focus { outline: 3px solid rgba(99, 102, 241, 0.2); border-color: var(--indigo-light); }
.welcome-profile-error { min-height: 20px; margin: -2px 0; color: var(--pink); font-size: 13px; font-weight: 850; }
.welcome-profile-create { width: 100%; min-height: 51px; }
.welcome-profile-create:disabled { cursor: wait; opacity: 0.65; }
.welcome-profile-later { justify-self: center; }
.welcome-profile-reward {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 11px;
  margin-top: 4px;
  padding: 16px;
  border: 1px solid rgba(245, 158, 11, 0.34);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(250, 204, 21, 0.14), rgba(99, 102, 241, 0.1));
}
.welcome-profile-reward strong { display: block; color: var(--ink); }
.welcome-profile-reward p { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.welcome-profile-reward b { color: #b45309; }
.welcome-reward-diamond { width: 28px; height: 28px; margin: auto; background: linear-gradient(135deg, #67e8f9, #3b82f6 55%, #6366f1); clip-path: polygon(50% 0, 94% 35%, 72% 100%, 28% 100%, 6% 35%); filter: drop-shadow(0 4px 7px rgba(59, 130, 246, 0.35)); }
.welcome-reward-coin { width: 30px; height: 30px; margin: auto; border: 4px solid #f59e0b; border-radius: 50%; background: #fde047; box-shadow: inset 0 0 0 3px #fbbf24, 0 4px 8px rgba(180, 83, 9, 0.24); }

@media (max-width: 520px) {
  .welcome-profile-modal { width: calc(100% - 18px); max-height: calc(100dvh - 18px); }
  .welcome-profile-card { gap: 10px; padding: 22px 18px; border-radius: 22px; }
  .welcome-profile-logo { width: 48px; height: 48px; border-radius: 15px; font-size: 26px; }
  .welcome-profile-reward { grid-template-columns: 30px 1fr; padding: 13px; }
  .welcome-reward-coin { display: none; }
}

.premium-payment-hint {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.secondary-button.wide {
  display: block;
  width: 100%;
  margin-top: 10px;
  border: 2px solid var(--indigo);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--control-bg);
  color: var(--indigo);
  font-weight: 900;
  cursor: pointer;
}

.secondary-button.wide:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


.mascot {
  position: relative;
  width: 180px;
  height: 230px;
  margin: auto auto 12px;
}

.mascot-head,
.mascot-body,
.mascot-book {
  position: absolute;
}

.mascot-head {
  left: 32px;
  top: 18px;
  width: 118px;
  height: 105px;
  border-radius: 48% 48% 43% 43%;
  background: #f9fbff;
  box-shadow: inset 0 -10px 0 rgba(79, 70, 229, 0.12);
}

.mascot-head::before,
.mascot-head::after {
  position: absolute;
  top: 30px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #7a44f3;
  content: "";
}

.mascot-head::before {
  left: -11px;
}

.mascot-head::after {
  right: -11px;
}

.mascot-eye {
  position: absolute;
  top: 42px;
  width: 24px;
  height: 28px;
  border-radius: 50%;
  background: var(--indigo-deep);
}

.mascot-eye.left {
  left: 28px;
}

.mascot-eye.right {
  right: 28px;
}

.mascot-eye::after {
  position: absolute;
  left: 6px;
  top: 5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
  content: "";
}

.mascot-smile {
  position: absolute;
  left: 51px;
  top: 72px;
  width: 18px;
  height: 12px;
  border-bottom: 4px solid #ff8b1a;
  border-radius: 0 0 20px 20px;
}

.mascot-body {
  left: 24px;
  top: 105px;
  width: 132px;
  height: 116px;
  border-radius: 45px 45px 36px 36px;
  background: linear-gradient(135deg, #7d41ff, #5631c9);
}

.mascot-book {
  left: 54px;
  top: 145px;
  width: 80px;
  height: 58px;
  border-radius: 5px;
  background: linear-gradient(90deg, #ffcf3d 50%, #ff9e25 50%);
  transform: rotate(-8deg);
}

.main {
  min-width: 0;
  padding: 30px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--indigo);
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  letter-spacing: 0;
}

h1 {
  margin: 0;
  font-size: clamp(29px, 4vw, 46px);
  line-height: 1.05;
}

h2 {
  margin: 0;
  font-size: 24px;
}

h3 {
  margin: 0;
}

.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.stat-pill,
.premium-button,
.avatar-button,
.theme-toggle,
.primary-button,
.text-button,
.icon-button {
  border: 0;
  border-radius: 8px;
  font-weight: 900;
}

.pay-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 42px;
  padding: 0 14px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.flame,
.coin {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.diamond-currency {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #e0faff 5%, #38bdf8 45%, #2563eb 95%);
  clip-path: polygon(50% 0, 92% 30%, 72% 100%, 28% 100%, 8% 30%);
  filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.45));
}

.diamond-pill {
  color: #2563eb;
}

.shop-icon::before {
  content: "◆";
  color: currentColor;
  font-size: 21px;
}

.shop-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 24px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-translucent);
  box-shadow: var(--shadow);
}

.shop-hero p,
.skin-card p { color: var(--muted); font-weight: 700; }

.shop-balance {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--panel);
  font-weight: 900;
}

.skin-shop-grid { display: grid; gap: 28px; margin-top: 20px; }
.shop-category { display: grid; gap: 16px; }
.shop-category-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.shop-category-price { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: 8px; background: var(--panel); color: var(--muted); font-weight: 900; }
.shop-category-price .coin { flex: 0 0 auto; }
.skin-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }
.skin-card { display: grid; justify-items: center; gap: 14px; padding: 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); text-align: center; box-shadow: var(--shadow); }
.skin-preview { display: grid; place-items: center; position: relative; z-index: 0; width: 100px; height: 100px; border-radius: 18px; color: white; background: linear-gradient(135deg, var(--blue), var(--indigo)); font-size: 42px; font-weight: 1000; }
.shop-message { min-height: 28px; color: var(--indigo); font-weight: 900; }

.diamond-exchange { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px; margin-top: 20px; padding: 22px; border: 2px solid rgba(56, 189, 248, 0.35); border-radius: 8px; background: linear-gradient(135deg, rgba(250, 204, 21, 0.1), rgba(56, 189, 248, 0.12)); box-shadow: var(--shadow); }
.diamond-exchange-visual { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-radius: 8px; background: var(--panel); font-size: 19px; }
.diamond-exchange-visual .coin, .diamond-exchange-visual .diamond-currency { flex: 0 0 auto; width: 23px; height: 23px; }
.exchange-arrow { color: var(--indigo); font-size: 25px; font-weight: 1000; }
.diamond-exchange-copy h2, .diamond-exchange-copy p { margin: 0; }
.diamond-exchange-copy > p:last-child { margin-top: 5px; color: var(--muted); font-weight: 700; }
.diamond-exchange-button { white-space: nowrap; }
.diamond-exchange-message { grid-column: 2 / -1; min-height: 22px; margin: 0; color: var(--indigo); font-weight: 900; }

.skin-fox { position: relative; overflow: visible; box-shadow: inset 0 -16px 0 rgba(194, 65, 12, 0.72), 0 0 0 3px #fb923c; }
.skin-fox::before, .skin-fox::after { position: absolute; z-index: -1; top: -17px; width: 31px; height: 34px; background: #f97316; clip-path: polygon(50% 0, 100% 100%, 0 78%); content: ""; }
.skin-fox::before { left: 4px; transform: rotate(-12deg); }
.skin-fox::after { right: 4px; transform: rotate(12deg); }
.skin-preview.skin-fox { z-index: 0; }
.skin-preview.skin-fox::before, .skin-preview.skin-fox::after { z-index: 1; }

.skin-robot { position: relative; overflow: visible; border-radius: 12px; box-shadow: inset 0 0 0 5px #94a3b8, inset 0 -16px 0 #475569, 0 0 0 3px #38bdf8; }
.skin-robot::before { position: absolute; left: 50%; top: -20px; width: 4px; height: 20px; background: #64748b; transform: translateX(-50%); content: ""; }
.skin-robot::after { position: absolute; left: 50%; top: -25px; width: 11px; height: 11px; border-radius: 50%; background: #22d3ee; box-shadow: 0 0 10px #22d3ee; transform: translateX(-50%); content: ""; }

.skin-wizard { position: relative; overflow: visible; box-shadow: inset 0 -18px 0 rgba(88, 28, 135, 0.82), 0 0 0 3px #a855f7; }
.skin-wizard::before { position: absolute; z-index: 2; left: 50%; top: -35px; width: 78px; height: 48px; background: linear-gradient(135deg, #c084fc, #6b21a8); clip-path: polygon(50% 0, 70% 65%, 100% 78%, 78% 100%, 18% 100%, 0 78%, 32% 65%); transform: translateX(-50%); content: ""; }
.skin-wizard::after { position: absolute; z-index: 3; left: 50%; top: -13px; width: 11px; height: 11px; border-radius: 50%; background: #fde047; box-shadow: 20px 7px 0 -2px #f0abfc, -22px 9px 0 -3px #7dd3fc; transform: translateX(-50%); content: ""; }

.skin-king { position: relative; overflow: visible; box-shadow: inset 0 -18px 0 rgba(146, 64, 14, 0.75), 0 0 0 3px #facc15; }
.skin-king::before { position: absolute; z-index: 2; left: 50%; top: -29px; width: 76px; height: 38px; background: linear-gradient(135deg, #fef08a, #eab308); clip-path: polygon(0 20%, 25% 55%, 38% 0, 55% 55%, 78% 5%, 100% 25%, 90% 100%, 10% 100%); transform: translateX(-50%); content: ""; }
.skin-king::after { position: absolute; z-index: 3; left: 50%; top: -8px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: -22px 0 #3b82f6, 22px 0 #22c55e; transform: translateX(-50%); content: ""; }

.skin-ninja { position: relative; overflow: visible; box-shadow: inset 0 21px 0 #111827, inset 0 -15px 0 #312e81, 0 0 0 3px #1f2937; }
.skin-ninja::before { position: absolute; z-index: 2; left: -9px; top: 13px; width: calc(100% + 18px); height: 13px; background: #dc2626; transform: rotate(-3deg); content: ""; }
.skin-ninja::after { position: absolute; right: -25px; top: 17px; width: 34px; height: 12px; background: #dc2626; clip-path: polygon(0 0, 100% 25%, 68% 100%, 0 65%); content: ""; }

.skin-panda { position: relative; overflow: visible; box-shadow: inset 18px 12px 0 rgba(17, 24, 39, 0.88), inset -18px 12px 0 rgba(17, 24, 39, 0.88), 0 0 0 3px #111827; }
.skin-panda::before, .skin-panda::after { position: absolute; z-index: 1; top: -17px; width: 32px; height: 32px; border-radius: 50%; background: #111827; content: ""; }
.skin-panda::before { left: 2px; }
.skin-panda::after { right: 2px; }

.skin-dragon { position: relative; overflow: visible; box-shadow: inset 0 -18px 0 rgba(21, 128, 61, 0.8), 0 0 0 3px #166534; }
.skin-dragon::before, .skin-dragon::after { position: absolute; z-index: 1; top: -21px; width: 28px; height: 37px; background: #facc15; clip-path: polygon(50% 0, 100% 100%, 0 78%); content: ""; }
.skin-dragon::before { left: 5px; transform: rotate(-18deg); }
.skin-dragon::after { right: 5px; transform: rotate(18deg); }

.special-shop-category { padding: 22px; border: 2px solid rgba(245, 158, 11, 0.35); border-radius: 8px; background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(168, 85, 247, 0.08)); }
.special-skin-card { position: relative; border-color: rgba(245, 158, 11, 0.5); }
.special-skin-label { padding: 5px 9px; border-radius: 999px; color: #92400e; background: #fef3c7; font-size: 12px; font-weight: 1000; text-transform: uppercase; }
.premium-exclusive-label { color: #fff; background: linear-gradient(135deg, #7c3aed, #2563eb); box-shadow: 0 5px 15px rgba(124, 58, 237, 0.3); }
.pro-exclusive-label { color: #fff; background: linear-gradient(135deg, #111827, #f97316 55%, #fde047); box-shadow: 0 5px 18px rgba(249, 115, 22, 0.38); }
.skin-phoenix { position: relative; overflow: visible; box-shadow: inset 0 -20px 0 rgba(194, 65, 12, 0.8), 0 0 0 4px #f59e0b, 0 0 24px rgba(249, 115, 22, 0.75); }
.skin-phoenix::before, .skin-phoenix::after { position: absolute; z-index: 1; top: -23px; width: 35px; height: 52px; background: linear-gradient(#fde047, #ef4444); clip-path: polygon(50% 0, 100% 70%, 62% 100%, 0 74%); content: ""; }
.skin-phoenix::before { left: -3px; transform: rotate(-19deg); }
.skin-phoenix::after { right: -3px; transform: rotate(19deg); }
.skin-galaxy { position: relative; overflow: visible; box-shadow: inset 0 -18px 0 rgba(49, 46, 129, 0.85), 0 0 0 4px #8b5cf6, 0 0 26px rgba(59, 130, 246, 0.8); }
.skin-galaxy::before { position: absolute; inset: -10px; border: 3px solid #60a5fa; border-radius: 50%; transform: rotate(-18deg); content: ""; }
.skin-galaxy::after { position: absolute; left: 11px; top: 8px; width: 7px; height: 7px; border-radius: 50%; background: white; box-shadow: 58px 8px #fde047, 24px 62px #67e8f9, 67px 55px white; content: ""; }

.premium-skin-category { position: relative; overflow: hidden; padding: 26px; border: 2px solid rgba(168, 85, 247, 0.65); border-radius: 8px; background: radial-gradient(circle at 50% 0, rgba(250, 204, 21, 0.2), transparent 38%), linear-gradient(135deg, rgba(76, 29, 149, 0.18), rgba(14, 165, 233, 0.14)); box-shadow: 0 20px 55px rgba(109, 40, 217, 0.18); }
.premium-skin-category::before { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,.75) 1px, transparent 1.5px); background-size: 28px 28px; opacity: .35; content: ""; animation: celestialStars 5s linear infinite; }
.premium-skin-category > * { position: relative; z-index: 1; }
.premium-skin-price { color: #7e22ce; border: 1px solid rgba(168, 85, 247, 0.35); background: rgba(250, 245, 255, 0.9); }
.premium-skin-grid { grid-template-columns: minmax(260px, 430px); justify-content: center; }
.premium-skin-grid .skin-card { border: 2px solid rgba(250, 204, 21, 0.7); background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(245,243,255,.94)); box-shadow: 0 18px 50px rgba(109, 40, 217, 0.25); }

.skin-celestial { position: relative; z-index: 0; overflow: visible; color: #fff; background: radial-gradient(circle at 50% 35%, #fef08a, #a855f7 48%, #1e1b4b 88%) !important; box-shadow: inset 0 -18px 0 rgba(30, 27, 75, 0.55), 0 0 0 4px #fde047, 0 0 18px #c084fc, 0 0 42px rgba(56, 189, 248, 0.9); animation: celestialPulse 2.2s ease-in-out infinite; }
.skin-celestial::before { position: absolute; z-index: 2; left: 50%; top: -37px; width: 88px; height: 45px; background: linear-gradient(135deg, #fff7ae, #facc15 55%, #f59e0b); clip-path: polygon(0 30%, 22% 58%, 35% 0, 51% 58%, 70% 3%, 82% 58%, 100% 27%, 91% 100%, 8% 100%); filter: drop-shadow(0 0 9px #fde047); transform: translateX(-50%); content: ""; }
.skin-celestial::after { position: absolute; z-index: -1; left: 50%; top: 44%; width: 154px; height: 93px; background: linear-gradient(90deg, #38bdf8, #f0abfc 46%, #fde047); clip-path: polygon(50% 48%, 100% 0, 83% 48%, 100% 100%, 57% 68%, 50% 100%, 43% 68%, 0 100%, 17% 48%, 0 0); filter: drop-shadow(0 0 13px #a855f7); opacity: .9; transform: translate(-50%, -50%); content: ""; }

@keyframes celestialPulse { 0%, 100% { filter: brightness(1); transform: translateY(0); } 50% { filter: brightness(1.18); transform: translateY(-3px); } }
@keyframes celestialStars { from { background-position: 0 0; } to { background-position: 28px 28px; } }

.pro-skin-category { position: relative; overflow: hidden; padding: 26px; border: 2px solid rgba(249, 115, 22, 0.65); border-radius: 8px; background: radial-gradient(circle at 50% 0, rgba(254, 240, 138, 0.22), transparent 38%), linear-gradient(135deg, rgba(17, 24, 39, 0.2), rgba(249, 115, 22, 0.14)); box-shadow: 0 20px 55px rgba(249, 115, 22, 0.18); }
.pro-skin-category > * { position: relative; z-index: 1; }
.pro-skin-price { color: #9a3412; border: 1px solid rgba(249, 115, 22, 0.35); background: rgba(255, 247, 237, 0.94); }
.skin-prolegend { position: relative; z-index: 0; overflow: visible; color: white; background: radial-gradient(circle at 50% 35%, #fde047, #f97316 35%, #111827 76%) !important; box-shadow: inset 0 -20px 0 rgba(0,0,0,.55), 0 0 0 4px #111827, 0 0 0 7px #f97316, 0 0 38px rgba(250,204,21,.85); animation: proLegendPulse 2s ease-in-out infinite; }
.skin-prolegend::before { position: absolute; z-index: 2; left: 50%; top: -34px; width: 92px; height: 45px; background: linear-gradient(135deg, #111827, #f97316 50%, #fde047); clip-path: polygon(0 70%, 17% 25%, 34% 66%, 50% 0, 66% 66%, 83% 25%, 100% 70%, 90% 100%, 10% 100%); filter: drop-shadow(0 0 9px #f97316); transform: translateX(-50%); content: ""; }
.skin-prolegend::after { position: absolute; z-index: -1; left: 50%; top: 50%; width: 158px; height: 110px; background: conic-gradient(from 0deg, #ef4444, #facc15, #22c55e, #38bdf8, #8b5cf6, #ef4444); clip-path: polygon(50% 42%, 100% 0, 78% 48%, 100% 100%, 57% 68%, 50% 100%, 43% 68%, 0 100%, 22% 48%, 0 0); filter: drop-shadow(0 0 15px #facc15); opacity: .9; transform: translate(-50%, -50%); content: ""; }
@keyframes proLegendPulse { 0%,100% { filter: brightness(1); transform: scale(1); } 50% { filter: brightness(1.25); transform: scale(1.035) translateY(-3px); } }

@media (max-width: 700px) { .shop-hero, .shop-category-heading { align-items: flex-start; flex-direction: column; } }
@media (max-width: 800px) { .diamond-exchange { grid-template-columns: 1fr; align-items: start; } .diamond-exchange-message { grid-column: 1; } }

.flame {
  background: linear-gradient(135deg, #ff3d45, #ffc83d);
}

.coin {
  background: radial-gradient(circle at 30% 30%, #fff1a4, #ffc83d 55%, #f29022);
}

.premium-promo {
  margin-top: 28px;
  padding: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(255, 139, 26, 0.1));
  border: 2px solid rgba(79, 70, 229, 0.25);
}

.premium-promo-head h2 {
  margin: 0 0 6px;
  font-size: 22px;
}

.premium-promo-tag {
  margin: 0 0 16px;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}

.premium-benefits-list {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
  padding-left: 22px;
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}

.premium-promo.premium-owned {
  border-color: rgba(20, 184, 106, 0.45);
  background: linear-gradient(135deg, rgba(20, 184, 106, 0.1), rgba(79, 70, 229, 0.08));
}

.premium-active-banner {
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(20, 184, 106, 0.15);
  color: #0d7a4d;
  font-weight: 800;
  text-align: center;
}

.profile-premium-line {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.profile-pass-level {
  color: var(--indigo);
  font-weight: 1000;
}

.profile-premium-line.is-premium {
  color: #0d7a4d;
}

.premium-countdown {
  margin: 8px 0 16px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel-translucent);
  font-size: 13px;
  font-weight: 900;
}

.premium-countdown.active {
  color: #166534;
  border-color: rgba(34, 197, 94, .38);
  background: rgba(34, 197, 94, .1);
}

.premium-button.premium-active {
  background: linear-gradient(135deg, #14b86a, #0d9f5b);
  color: #fff;
}

.premium-button,
a.premium-button {
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  color: white;
  font-weight: 800;
  text-decoration: none;
  background: linear-gradient(135deg, #ef477f, var(--indigo));
}

.premium-pay-link.primary-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.premium-pay-link {
  cursor: pointer;
}

.avatar-button,
.icon-button,
.theme-toggle {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
}

.theme-toggle {
  border: 0;
  color: var(--ink);
  background: var(--panel);
  box-shadow: var(--shadow);
}

.theme-toggle span {
  line-height: 1;
  font-size: 20px;
  font-weight: 1000;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.level-hero {
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 270px;
  gap: 24px;
  align-items: center;
  min-height: 210px;
  padding: 28px 30px;
  overflow: hidden;
  border-radius: 8px;
  color: white;
  background: linear-gradient(125deg, #06122d, #10245b 42%, #17164b 72%, #050d25);
  box-shadow: var(--shadow);
}

.level-hero::before,
.level-hero::after {
  position: absolute;
  z-index: 0;
  inset: -75%;
  pointer-events: none;
  content: "";
}

.level-hero::before {
  background:
    radial-gradient(ellipse at 18% 74%, rgba(30, 64, 175, 0.92), transparent 25%),
    radial-gradient(ellipse at 48% 25%, rgba(37, 99, 235, 0.68), transparent 28%),
    radial-gradient(ellipse at 78% 68%, rgba(49, 46, 129, 0.82), transparent 27%),
    radial-gradient(ellipse at 55% 90%, rgba(8, 145, 178, 0.48), transparent 32%);
  filter: blur(18px);
  animation: homeBlueFlames 7s ease-in-out infinite alternate;
}

.level-hero::after {
  background: conic-gradient(from 20deg, transparent 0 28%, rgba(99, 102, 241, 0.18) 36%, transparent 45% 70%, rgba(14, 165, 233, 0.15) 78%, transparent 88%);
  animation: homeHeroAura 16s linear infinite;
}

.level-copy {
  position: relative;
  z-index: 2;
}

.level-copy h2 {
  margin: 10px 0 8px;
  font-size: 34px;
}

.level-copy h2,
.level-copy > p,
.account-count,
.daily-goal p,
.daily-goal > strong,
.daily-goal > span {
  color: transparent;
  background: linear-gradient(105deg, #fff 0%, #dbeafe 34%, #a855f7 45%, #f5d0fe 51%, #8b5cf6 58%, #dbeafe 68%, #fff 100%);
  background-size: 290% 100%;
  background-position: 110% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(168, 85, 247, 0.2));
  animation: homePurpleTextShine 3.8s linear infinite;
}

.level-copy > p { animation-delay: -1.1s; }
.account-count { animation-delay: -2.2s; }
.daily-goal p { animation-delay: -0.6s; }
.daily-goal > strong { animation-delay: -1.7s; }
.daily-goal > span { animation-delay: -2.7s; }

.level-copy p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
}

.home-update {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 24px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, 0.32);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.13), rgba(139, 92, 246, 0.12)), var(--panel-translucent);
  box-shadow: var(--shadow);
}

.home-update::after {
  position: absolute;
  right: -48px;
  top: -58px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.12);
  content: "";
  pointer-events: none;
}

.home-update-icon {
  position: relative;
  z-index: 1;
  display: grid;
  flex: 0 0 54px;
  width: 54px;
  height: 54px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #8b5cf6);
  box-shadow: 0 10px 24px rgba(79, 70, 229, 0.28);
  font-size: 25px;
}

.home-update > div {
  position: relative;
  z-index: 1;
}

.home-update-label {
  margin: 0 0 3px;
  color: var(--indigo-light);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.home-update h2 {
  margin: 0 0 5px;
  font-size: 23px;
}

.home-update div > p:last-child {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.double-rewards-event {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  margin-top: 18px;
  padding: 22px 24px;
  overflow: hidden;
  border: 1px solid rgba(251, 146, 60, .5);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(120deg, #7c2d12, #ea580c 48%, #f59e0b);
  box-shadow: 0 16px 38px rgba(234, 88, 12, .24);
}

.double-rewards-badge {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 2px solid rgba(255,255,255,.65);
  border-radius: 16px;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 0 18px rgba(255,255,255,.14);
  font-size: 25px;
  font-weight: 1000;
}

.double-rewards-label { margin: 0 0 3px; color: #ffedd5; font-size: 11px; font-weight: 1000; letter-spacing: .12em; text-transform: uppercase; }
.double-rewards-event h2 { margin: 0 0 4px; color: #fff; font-size: 23px; }
.double-rewards-event div > p:last-child { margin: 0; color: #fff7ed; font-weight: 700; }
.double-rewards-event > strong { padding: 11px 14px; border-radius: 10px; color: #7c2d12; background: #fff; font-size: 20px; font-variant-numeric: tabular-nums; }
.double-rewards-event.hidden { display: none; }

.account-count {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.84;
}

.account-count strong {
  color: inherit;
}

.mini-track {
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.34);
}

.mini-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ffc83d, #ff8b1a);
}

.rocket-scene {
  position: relative;
  z-index: 2;
  height: 190px;
}

.rocket {
  position: absolute;
  left: 64px;
  top: 20px;
  width: 62px;
  height: 118px;
  border-radius: 48% 48% 18px 18px;
  background: linear-gradient(90deg, #f8fbff 0 48%, #e6ecff 48% 100%);
  transform: rotate(25deg);
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.2);
}

.rocket::before,
.rocket::after {
  position: absolute;
  bottom: 8px;
  width: 28px;
  height: 42px;
  background: #ff4939;
  content: "";
}

.rocket::before {
  left: -18px;
  border-radius: 22px 0 12px 22px;
}

.rocket::after {
  right: -18px;
  border-radius: 0 22px 22px 12px;
}

.rocket span {
  position: absolute;
  left: 18px;
  top: 26px;
  width: 26px;
  height: 26px;
  border: 5px solid #1295ee;
  border-radius: 50%;
  background: #b9eeff;
}

.cloud {
  position: absolute;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
}

.cloud-one {
  left: 20px;
  bottom: 18px;
  width: 130px;
  height: 42px;
}

.cloud-two {
  left: 82px;
  bottom: 2px;
  width: 110px;
  height: 35px;
  opacity: 0.85;
}

.daily-goal {
  position: relative;
  z-index: 2;
  padding: 22px;
  border-radius: 8px;
  background: rgba(15, 23, 42, 0.62);
  box-shadow: inset 0 0 25px rgba(59, 130, 246, 0.12), 0 0 28px rgba(30, 64, 175, 0.12);
}

@keyframes homePurpleTextShine {
  from { background-position: 110% 50%; }
  to { background-position: -110% 50%; }
}

@keyframes homeBlueFlames {
  0% { transform: translate(-7%, 7%) rotate(-4deg) scale(0.96); opacity: 0.68; }
  50% { transform: translate(8%, -7%) rotate(5deg) scale(1.1); opacity: 1; }
  100% { transform: translate(-2%, -12%) rotate(-2deg) scale(1.03); opacity: 0.8; }
}

@keyframes homeHeroAura { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .level-hero::before,
  .level-hero::after,
  .level-copy h2,
  .level-copy > p,
  .account-count,
  .daily-goal p,
  .daily-goal > strong,
  .daily-goal > span { animation: none; }
}

.daily-goal p {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, 0.72);
}

.daily-goal > strong {
  display: block;
  margin-bottom: 14px;
}

.daily-goal span strong {
  display: inline;
  margin: 0;
}

.mini-track {
  height: 10px;
  margin-bottom: 9px;
}

.setup-panel,
.section-heading,
.dashboard-grid,
.course-layout,
.quiz-panel,
.profile-layout {
  margin-top: 24px;
}

.wardrobe-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  padding: 26px;
  border: 1px solid rgba(244, 114, 182, 0.35);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(244, 114, 182, 0.12), rgba(124, 58, 237, 0.12)), var(--panel-translucent);
  box-shadow: var(--shadow);
}

.wardrobe-hero p { margin: 7px 0 0; color: var(--muted); font-weight: 700; }
.wardrobe-avatar-panel { display: grid; justify-items: center; gap: 8px; min-width: 150px; }
.wardrobe-avatar-panel .profile-avatar { width: 104px; height: 104px; font-size: 48px; }
.wardrobe-avatar-panel strong { color: var(--indigo); }

.avatar-customization-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 20px;
}

.avatar-customization-panel > div,
.owned-skins-panel {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-translucent);
  box-shadow: var(--soft-shadow);
}

.avatar-customization-panel p { color: var(--muted); font-weight: 700; }
.owned-skins-panel { margin-top: 20px; overflow: hidden; }
.owned-skins-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 28px 18px;
  margin-top: 18px;
  padding: 22px 20px 30px;
  border: 8px solid #8b5a2b;
  border-radius: 14px;
  background-color: #f5dfbd;
  background-image: linear-gradient(90deg, rgba(120,72,30,.08) 1px, transparent 1px), linear-gradient(rgba(255,255,255,.25), rgba(120,72,30,.08));
  background-size: 34px 100%, 100% 100%;
  box-shadow: inset 0 0 22px rgba(92,51,20,.24), 0 16px 32px rgba(45,28,14,.2);
}
.skin-shelf-summary { grid-column: 1 / -1; color: #5b3518; font-weight: 900; text-align: left; }
.skin-shelf-summary strong { display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin-right: 7px; border-radius: 50%; color: white; background: #8b5a2b; }
.owned-skin-card {
  position: relative;
  min-width: 0;
  padding: 18px 12px 16px;
  border-color: rgba(120,72,30,.28);
  background: rgba(255,255,255,.9);
  box-shadow: 0 8px 14px rgba(85,48,18,.16);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.owned-skin-card::after {
  position: absolute;
  right: -10px;
  bottom: -15px;
  left: -10px;
  height: 13px;
  border: 2px solid #6f431f;
  border-radius: 3px;
  background: linear-gradient(#b8793f, #7a481f);
  box-shadow: 0 6px 8px rgba(72,38,12,.28);
  content: "";
}
.owned-skin-card:hover { transform: translateY(-5px); }
.owned-skin-card .skin-preview { width: 88px; height: 88px; font-size: 38px; }
.owned-skin-card h3 { font-size: 16px; }
.owned-skin-card p { min-height: 34px; font-size: 12px; }
.owned-skin-card .primary-button { width: 100%; padding: 10px 8px; font-size: 13px; }
.shelf-owned-label { position: absolute; z-index: 3; top: 8px; right: 8px; padding: 4px 7px; border-radius: 999px; color: #166534; background: #dcfce7; font-size: 10px; font-weight: 1000; text-transform: uppercase; }
.equipped-owned-skin { border: 2px solid rgba(34, 197, 94, 0.72); background: linear-gradient(135deg, rgba(34,197,94,.13), var(--panel)); box-shadow: 0 10px 28px rgba(34,197,94,.16); }

@media (max-width: 800px) {
  .wardrobe-hero { align-items: flex-start; flex-direction: column; }
  .avatar-customization-panel { grid-template-columns: 1fr; }
  .owned-skins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 12px; padding-inline: 12px; }
}

.setup-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
}

.setup-panel.hidden {
  display: none;
}

.setup-panel p,
.section-heading p {
  margin: 6px 0 0;
  color: var(--muted);
}

.setup-form,
.profile-form {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

input,
select {
  min-height: 44px;
  min-width: 180px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--control-bg);
  outline: none;
}

input:focus,
select:focus {
  border-color: var(--indigo);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.12);
}

.primary-button {
  min-height: 44px;
  padding: 0 18px;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  box-shadow: 0 12px 25px rgba(79, 70, 229, 0.22);
}

.primary-button.wide {
  width: 100%;
}

.text-button {
  min-height: 38px;
  padding: 0 14px;
  color: var(--indigo);
  background: var(--soft-button);
}

.section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.section-heading.compact {
  margin-top: 0;
}

.subject-grid,
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.subject-card,
.chapter-card,
.quest-card,
.leaderboard-card,
.quiz-panel,
.profile-card,
.badges-panel,
.leaderboard-wide,
.subject-tabs {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-translucent);
  box-shadow: var(--shadow);
}

.subject-card,
.chapter-card {
  display: grid;
  gap: 12px;
  padding: 18px;
}

.subject-card {
  min-height: 190px;
}

.subject-icon {
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border-radius: 8px;
  color: white;
  font-size: 22px;
  font-weight: 1000;
}

.subject-card h3,
.chapter-card h3 {
  font-size: 17px;
}

.subject-card p,
.chapter-card p,
.quest-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.subject-progress {
  display: grid;
  gap: 7px;
}

.subject-progress div {
  overflow: hidden;
  height: 8px;
  border-radius: 999px;
  background: var(--track-bg);
}

.subject-progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
}

.card-button {
  min-height: 40px;
  border: 0;
  border-radius: 8px;
  color: white;
  font-weight: 900;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 20px;
}

.quest-list,
.quest-board {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.quest-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
}

.quest-symbol,
.badge-symbol {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  color: white;
  font-weight: 1000;
  background: linear-gradient(135deg, var(--orange), var(--gold));
}

.quest-reward {
  padding: 8px 10px;
  border-radius: 999px;
  color: #aa4c00;
  background: #fff2df;
  font-weight: 900;
}

.quest-cycle-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 24px 0 18px;
  padding: 22px;
  border: 1px solid rgba(79, 70, 229, 0.25);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.12), rgba(56, 189, 248, 0.1));
}

.combined-quest-banner {
  margin-top: 28px;
}

.quest-cycle-timer {
  display: inline-flex;
  width: fit-content;
  margin-top: 8px;
  padding: 7px 11px;
  border-radius: 8px;
  color: var(--indigo);
  background: var(--panel);
  font-weight: 1000;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .quest-cycle-banner { align-items: flex-start; flex-direction: column; }
}

.leaderboard-card,
.leaderboard-wide {
  padding: 18px;
}

.reward-panel {
  display: grid;
  justify-items: center;
  gap: 22px;
  margin-top: 24px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-translucent);
  box-shadow: var(--shadow);
  text-align: center;
}

.reward-panel p {
  margin: 6px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.timed-chests-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  width: min(100%, 880px);
}

.timed-chest-card {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.timed-chest-card .reward-message {
  margin-top: 0;
}

.xp-wheel-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  align-items: center;
  gap: 28px;
  width: min(100%, 880px);
  padding: 26px 30px;
  overflow: hidden;
  border: 1px solid rgba(99, 102, 241, 0.32);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(79, 70, 229, 0.13), rgba(14, 165, 233, 0.08)), var(--panel);
  text-align: left;
}

.xp-wheel-copy .reward-message {
  margin-top: 12px;
}

.xp-wheel-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 250px;
  height: 250px;
  margin: auto;
  filter: drop-shadow(0 16px 22px rgba(30, 41, 59, 0.24));
}

.xp-wheel-pointer {
  position: absolute;
  z-index: 4;
  top: -8px;
  left: 50%;
  width: 0;
  height: 0;
  border-right: 15px solid transparent;
  border-left: 15px solid transparent;
  border-top: 34px solid #fbbf24;
  transform: translateX(-50%);
  filter: drop-shadow(0 3px 2px rgba(120, 53, 15, 0.35));
}

.xp-wheel {
  --wheel-rotation: 0deg;
  position: relative;
  width: 224px;
  height: 224px;
  padding: 0;
  border: 9px solid #f8fafc;
  border-radius: 50%;
  color: white;
  background: repeating-conic-gradient(from -22.5deg, #6366f1 0deg 45deg, #06b6d4 45deg 90deg);
  box-shadow: 0 0 0 5px #fbbf24, inset 0 0 24px rgba(15, 23, 42, 0.2);
  transform: rotate(var(--wheel-rotation));
  transition: transform 4s cubic-bezier(.12, .68, .08, 1);
  cursor: pointer;
}

.xp-wheel:not(:disabled):hover {
  box-shadow: 0 0 0 7px #fbbf24, 0 0 28px rgba(99, 102, 241, 0.42), inset 0 0 24px rgba(15, 23, 42, 0.2);
}

.xp-wheel:disabled:not(.spinning) {
  cursor: not-allowed;
  filter: saturate(.65);
}

.xp-wheel > span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64px;
  margin-left: -32px;
  color: white;
  font-size: 12px;
  font-weight: 1000;
  text-align: center;
  text-shadow: 0 2px 4px rgba(15, 23, 42, .45);
  transform: translateY(-50%) rotate(calc(var(--i) * 45deg)) translateY(-76px) rotate(calc(var(--i) * -45deg));
}

.xp-wheel > strong {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 5px solid #fbbf24;
  border-radius: 50%;
  color: #312e81;
  background: white;
  box-shadow: 0 5px 14px rgba(30, 41, 59, .3);
  transform: translate(-50%, -50%);
}

@media (max-width: 720px) {
  .xp-wheel-card { grid-template-columns: 1fr; padding: 22px 16px; text-align: center; }
  .xp-wheel-stage { transform: scale(.9); margin-block: -10px; }
}

.reward-chest {
  position: relative;
  width: 150px;
  height: 125px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.reward-chest:disabled {
  cursor: default;
}

.chest-lid,
.chest-body,
.chest-lock {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 16px 32px rgba(79, 70, 229, 0.24);
}

.chest-lid {
  top: 18px;
  width: 116px;
  height: 38px;
  border: 4px solid #8a4d16;
  border-radius: 12px 12px 6px 6px;
  background: linear-gradient(135deg, #ffc83d, #ff8b1a);
  transition: transform 0.2s ease;
}

.chest-body {
  bottom: 12px;
  width: 130px;
  height: 70px;
  border: 4px solid #8a4d16;
  border-radius: 8px;
  background: linear-gradient(135deg, #ffb020, #e76f00);
}

.chest-lock {
  bottom: 42px;
  width: 28px;
  height: 30px;
  border-radius: 5px;
  background: linear-gradient(135deg, #fef3c7, #ffc83d);
}

.reward-chest:not(:disabled):hover .chest-lid,
.reward-chest.opened .chest-lid {
  transform: translate(-50%, -12px) rotate(-4deg);
}

.chest-opening-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 45%, rgba(79, 70, 229, 0.28), transparent 42%), rgba(5, 8, 22, 0.82);
  backdrop-filter: blur(10px) saturate(1.2);
  animation: chestFadeIn 0.28s ease both;
}

.chest-opening-card {
  position: relative;
  isolation: isolate;
  display: grid;
  justify-items: center;
  gap: 12px;
  width: min(460px, 100%);
  min-height: 500px;
  padding: 30px 26px 26px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 24px;
  color: white;
  background:
    radial-gradient(circle at 50% 34%, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(135deg, rgba(30, 41, 59, 0.96), rgba(15, 23, 42, 0.96));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.5), inset 0 1px rgba(255, 255, 255, 0.16);
  animation: mobileCardIn 0.45s cubic-bezier(.2,.9,.25,1.2) both;
}

.chest-opening-card > *:not(.chest-aurora, .chest-fire-aura, .chest-light-rays, .chest-flash, .chest-shockwaves, .chest-sparkles, .chest-particles) { position: relative; z-index: 3; }

.chest-light-rays { position: absolute; z-index: 0; left: 50%; top: 45%; width: 420px; height: 420px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(250,204,21,.24) 0 8deg, transparent 8deg 18deg); opacity: 0; transform: translate(-50%, -50%) scale(.35); }
.chest-flash { position: absolute; z-index: 6; inset: 0; border-radius: inherit; pointer-events: none; background: white; opacity: 0; }
.chest-particles { position: absolute; z-index: 5; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; }
.chest-particles i { --angle: calc(var(--particle) * 16.364deg); position: absolute; width: 10px; height: 10px; border-radius: 3px; background: hsl(calc(28 + var(--particle) * 8) 98% 64%); box-shadow: 0 0 12px currentColor; opacity: 0; transform: rotate(var(--angle)) translateY(0) scale(.2); }

.chest-aurora { position:absolute; z-index:-1; inset:-35%; pointer-events:none; opacity:.38; background:conic-gradient(from 0deg,#7c3aed,#0ea5e9,#22c55e,#facc15,#f97316,#ec4899,#7c3aed); filter:blur(42px) saturate(1.45); animation:chestAuroraIdle 5s linear infinite; }
.chest-fire-aura { position:absolute; z-index:1; left:50%; top:52%; width:245px; height:245px; border-radius:50%; pointer-events:none; opacity:0; background:radial-gradient(circle,rgba(255,255,255,.98) 0 5%,#fde047 13%,rgba(249,115,22,.75) 30%,rgba(239,68,68,.25) 50%,transparent 70%); filter:blur(7px); transform:translate(-50%,-50%) scale(.3); }
.chest-shockwaves { position:absolute; z-index:2; left:50%; top:52%; width:0; height:0; pointer-events:none; }
.chest-shockwaves i { position:absolute; left:0; top:0; width:150px; height:150px; border:4px solid rgba(253,224,71,.9); border-radius:50%; opacity:0; transform:translate(-50%,-50%) scale(.2); box-shadow:0 0 22px #fbbf24,inset 0 0 20px rgba(255,255,255,.65); }
.chest-sparkles { position:absolute; z-index:7; left:50%; top:51%; width:0; height:0; pointer-events:none; }
.chest-sparkles i { --spark-angle:calc(var(--spark) * 15deg); position:absolute; width:5px; height:22px; border-radius:999px; opacity:0; background:linear-gradient(#fff,#fde047,transparent); box-shadow:0 0 8px #fff,0 0 14px #facc15; transform:rotate(var(--spark-angle)) translateY(-70px) scale(.2); }

.cinematic-chest {
  width: 210px;
  height: 170px;
  transform: scale(1);
  filter: drop-shadow(0 20px 22px rgba(0,0,0,.32));
  animation: chestPopIn 0.6s cubic-bezier(.18,.9,.28,1.25) both, chestIdle 1.8s ease-in-out .65s infinite;
}

.cinematic-chest .chest-lid {
  width: 160px;
  height: 52px;
}

.cinematic-chest .chest-body {
  width: 178px;
  height: 92px;
}

.cinematic-chest .chest-lock {
  bottom: 55px;
  width: 34px;
  height: 38px;
}

.chest-opening-help {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  animation: helpPulse 1.25s ease-in-out infinite;
}

.chest-tap-ring { position: absolute !important; z-index: 1 !important; left: 50%; top: 47%; width: 180px; height: 180px; border: 3px solid rgba(250,204,21,.35); border-radius: 50%; transform: translate(-50%, -50%); animation: tapRing 1.45s ease-out infinite; }

.chest-reward-result {
  display: grid;
  gap: 5px;
  justify-items: center;
  opacity: 0;
  transform: translateY(18px) scale(.82);
}

.chest-reward-result > span { color: #fde68a; font-size: 13px; font-weight: 1000; letter-spacing: .08em; text-transform: uppercase; }
.chest-opening-reward { min-height: 30px; font-size: 22px; text-align: center; text-shadow: 0 3px 14px rgba(250,204,21,.45); }

.reward-burst {
  position: relative;
  width: 230px;
  height: 0;
  pointer-events: none;
}

.reward-burst span {
  position: absolute;
  left: 50%;
  top: -92px;
  display: grid;
  min-width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 50%;
  color: #422006;
  background: linear-gradient(135deg, #fef3c7, #f59e0b);
  box-shadow: 0 0 24px rgba(245, 158, 11, 0.85);
  font-weight: 1000;
  opacity: 0;
}

.reward-burst span:nth-child(1) {
  transform: translateX(-50%);
}

.reward-burst span:nth-child(2) {
  color: white;
  background: linear-gradient(135deg, #22c55e, #0ea5e9);
}

.reward-burst span:nth-child(3) {
  background: linear-gradient(135deg, #fef9c3, #facc15);
}

.chest-opening-overlay.releasing .reward-burst span:nth-child(1) {
  animation: rewardFlyLeft 1.05s ease forwards;
}

.chest-opening-overlay.releasing .reward-burst span:nth-child(2) {
  animation: rewardFlyUp 1.05s ease forwards;
}

.chest-opening-overlay.releasing .reward-burst span:nth-child(3) {
  animation: rewardFlyRight 1.05s ease forwards;
}

.chest-opening-overlay.opening .cinematic-chest { animation: chestShake .42s ease both; }
.chest-opening-overlay.opening .chest-tap-ring,
.chest-opening-overlay.opening .chest-opening-help { opacity: 0; }
.chest-opening-overlay.releasing .chest-light-rays { animation: lightRaysBurst 1.8s ease-out both; }
.chest-opening-overlay.releasing .chest-flash { animation: chestFlash .55s ease-out both; }
.chest-opening-overlay.releasing .chest-particles i { animation: particleBurst 1.25s cubic-bezier(.15,.75,.25,1) calc(var(--particle) * 16ms) both; }
.chest-opening-overlay.releasing .chest-fire-aura { animation:fireAuraBurst 1.8s cubic-bezier(.1,.75,.2,1) both; }
.chest-opening-overlay.releasing .chest-shockwaves i { animation:chestShockwave 1.35s ease-out both; }
.chest-opening-overlay.releasing .chest-shockwaves i:nth-child(2) { animation-delay:.16s; }
.chest-opening-overlay.releasing .chest-shockwaves i:nth-child(3) { animation-delay:.32s; }
.chest-opening-overlay.releasing .chest-sparkles i { animation:sparkleExplosion 1.7s cubic-bezier(.12,.72,.18,1) calc(var(--spark) * 12ms) both; }
.chest-opening-overlay.releasing .cinematic-chest { animation: chestVictory 1.25s cubic-bezier(.18,.9,.3,1.2) both; }
.chest-opening-overlay.releasing .cinematic-chest .chest-lid { animation: lidLaunch .75s cubic-bezier(.15,.8,.2,1.2) both; }
.chest-opening-overlay.releasing .chest-reward-result {
  animation: rewardTextIn 0.55s cubic-bezier(.18,.9,.25,1.25) .48s forwards;
}

.chest-opening-overlay.releasing .chest-opening-help {
  opacity: 0;
}

.chest-opening-overlay.closing { animation: chestFadeOut .3s ease forwards; }

.reward-message {
  min-height: 28px;
  font-weight: 900;
}

.reward-timer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 8px 0 0;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel);
  font-size: 14px;
  font-weight: 1000;
}

.reward-timer.ready {
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.1);
}

.global-leaderboard-panel {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-translucent);
  box-shadow: var(--shadow);
}

.global-leaderboard-panel .section-heading { margin: 0 0 16px; }
.global-leaderboard-list { display: grid; gap: 9px; }
.global-leader-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.global-leader-row.me { border-color: #6366f1; background: rgba(99,102,241,.09); }
.global-leader-rank { color: var(--indigo); font-size: 18px; font-weight: 1000; text-align: center; }
.global-leader-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.global-leader-avatar { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; color: #fff; font-weight: 1000; }
.global-leader-identity strong,.global-leader-identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-leader-identity small { margin-top: 2px; color: var(--muted); font-size: 12px; }
.global-leader-level { color: var(--muted); font-size: 12px; font-weight: 900; }
.global-leader-xp { color: var(--indigo); white-space: nowrap; font-weight: 1000; }

@media (max-width: 600px) {
  .global-leaderboard-panel { padding: 14px; }
  .global-leader-row { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 11px 9px; }
  .global-leader-level { display: none; }
  .global-leader-xp { font-size: 12px; }
}

.level-pass-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 20px;
  margin-top: 24px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(245, 158, 11, 0.16), rgba(124, 58, 237, 0.12)),
    var(--panel-translucent);
  box-shadow: var(--shadow);
}

.level-pass-hero p {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.past-chest-panel {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 16px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.past-chest-panel strong {
  font-size: 18px;
}

.pass-tier-overview {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 16px;
  margin-top: 18px;
}

.current-pass-tier {
  display: grid;
  gap: 3px;
  padding: 17px;
  border: 2px solid transparent;
  border-radius: 8px;
  color: white;
  box-shadow: var(--shadow);
}

.current-pass-tier span,
.current-pass-tier small { font-weight: 800; opacity: 0.9; }
.current-pass-tier strong { font-size: 25px; }

.pass-tier-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}

.pass-tier-chip {
  display: grid;
  min-height: 45px;
  place-items: center;
  padding: 7px;
  border: 2px solid transparent;
  border-radius: 8px;
  color: white;
  font-size: 12px;
  font-weight: 1000;
  text-align: center;
  opacity: 0.72;
}

.pass-tier-chip.active { border-color: white; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.22); opacity: 1; transform: translateY(-2px); }

.tier-bronze { background: linear-gradient(135deg, #d58a51, #7c3f17); }
.tier-silver { background: linear-gradient(135deg, #e2e8f0, #64748b); }
.tier-gold { background: linear-gradient(135deg, #fde68a, #d97706); }
.tier-platinum { background: linear-gradient(135deg, #e0f2fe, #64748b 58%, #334155); }
.tier-diamond { background: linear-gradient(135deg, #cffafe, #38bdf8 48%, #2563eb); }
.tier-champion { background: linear-gradient(135deg, #fb7185, #7c3aed 58%, #312e81); }
.tier-elite { background: linear-gradient(135deg, #c084fc, #581c87 55%, #111827); }
.tier-pro { background: linear-gradient(135deg, #fef08a, #f97316 42%, #dc2626 72%, #7c3aed); }

@media (max-width: 800px) {
  .pass-tier-overview { grid-template-columns: 1fr; }
  .pass-tier-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.level-pass-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.level-pass-card {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--soft-shadow);
}

.level-pass-card.locked {
  filter: none;
  opacity: 0.84;
}

.level-pass-card.claimed {
  border-color: rgba(34, 197, 94, 0.45);
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), var(--panel));
}

.level-pass-card.premium-locked {
  border-color: rgba(79, 70, 229, 0.32);
  background:
    linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(245, 158, 11, 0.08)),
    var(--panel);
  filter: none;
  opacity: 1;
}

.level-pass-card[class*="tier-card-"] {
  border-color: var(--tier-border);
  background:
    linear-gradient(110deg, var(--tier-soft), transparent 62%),
    var(--panel);
  box-shadow: inset 5px 0 0 var(--tier-color), var(--soft-shadow);
}

.level-pass-card[class*="tier-card-"]:not(.claimed) {
  border-width: 2px;
  border-color: var(--tier-color);
  background:
    linear-gradient(105deg, var(--tier-strong), var(--tier-soft) 46%, transparent 82%),
    var(--panel);
  box-shadow: inset 8px 0 0 var(--tier-color), inset 0 0 24px var(--tier-glow), 0 7px 20px var(--tier-glow), var(--soft-shadow);
}

.level-pass-card[class*="tier-card-"]:not(.claimed) .level-pass-rank {
  box-shadow: 0 0 16px var(--tier-color);
}

.level-pass-card[class*="tier-card-"].claimed {
  border-color: rgba(34, 197, 94, 0.88);
  background:
    linear-gradient(110deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.12) 58%, transparent),
    linear-gradient(110deg, var(--tier-soft), transparent 62%),
    var(--panel);
  box-shadow: inset 7px 0 0 #22c55e, inset 0 0 28px rgba(34, 197, 94, 0.14), 0 0 20px rgba(34, 197, 94, 0.2), var(--soft-shadow);
}

.level-pass-card[class*="tier-card-"].claimed::after {
  position: absolute;
  right: 12px;
  top: 10px;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  color: white;
  background: linear-gradient(135deg, #4ade80, #15803d);
  box-shadow: 0 0 13px rgba(34, 197, 94, 0.72);
  font-size: 15px;
  font-weight: 1000;
  content: "✓";
}

.level-pass-card.claimed .quest-reward {
  color: white;
  border: 1px solid rgba(134, 239, 172, 0.8);
  background: linear-gradient(135deg, #22c55e, #15803d);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.28);
  opacity: 1;
}

.tier-card-bronze { --tier-color: #c56f32; --tier-border: rgba(197,111,50,.75); --tier-soft: rgba(181,101,45,.3); --tier-strong: rgba(181,101,45,.42); --tier-glow: rgba(181,101,45,.24); }
.tier-card-silver { --tier-color: #b8c4d4; --tier-border: rgba(184,196,212,.8); --tier-soft: rgba(148,163,184,.3); --tier-strong: rgba(203,213,225,.4); --tier-glow: rgba(148,163,184,.24); }
.tier-card-gold { --tier-color: #facc15; --tier-border: rgba(250,204,21,.82); --tier-soft: rgba(234,179,8,.3); --tier-strong: rgba(250,204,21,.4); --tier-glow: rgba(234,179,8,.25); }
.tier-card-platinum { --tier-color: #7dd3fc; --tier-border: rgba(125,211,252,.82); --tier-soft: rgba(186,230,253,.3); --tier-strong: rgba(125,211,252,.38); --tier-glow: rgba(125,211,252,.23); }
.tier-card-diamond { --tier-color: #38bdf8; --tier-border: rgba(56,189,248,.84); --tier-soft: rgba(14,165,233,.32); --tier-strong: rgba(56,189,248,.42); --tier-glow: rgba(14,165,233,.27); }
.tier-card-champion { --tier-color: #fb7185; --tier-border: rgba(251,113,133,.82); --tier-soft: rgba(168,85,247,.3); --tier-strong: rgba(225,29,72,.4); --tier-glow: rgba(225,29,72,.25); }
.tier-card-elite { --tier-color: #c084fc; --tier-border: rgba(192,132,252,.84); --tier-soft: rgba(126,34,206,.32); --tier-strong: rgba(147,51,234,.42); --tier-glow: rgba(126,34,206,.28); }
.tier-card-pro { --tier-color: #fb923c; --tier-border: rgba(251,146,60,.88); --tier-soft: rgba(239,68,68,.32); --tier-strong: rgba(249,115,22,.44); --tier-glow: rgba(249,115,22,.3); }

.level-pass-rank {
  display: grid;
  min-height: 48px;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, #f59e0b, #7c3aed);
  font-weight: 1000;
}

.level-pass-rank span,
.level-pass-rank small { display: block; text-align: center; }
.level-pass-rank small { font-size: 11px; opacity: 0.92; }

.level-pass-card h3 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 18px;
}

.premium-tag {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  font-size: 11px;
  font-weight: 1000;
}

.level-pass-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-weight: 700;
}

.level-pass-loader {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel-soft);
  text-align: center;
  font-weight: 900;
}

.level-pass-loader.complete {
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
}

.past-chest {
  filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.52));
}

.past-chest .chest-lid {
  border-color: #78350f;
  background: linear-gradient(135deg, #fef3c7, #d97706 48%, #92400e);
}

.past-chest .chest-body {
  border-color: #78350f;
  background: linear-gradient(135deg, #fbbf24, #b45309 52%, #78350f);
}

.past-chest .chest-lock {
  background: linear-gradient(135deg, #fff7ed, #f59e0b);
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.85);
}

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

@keyframes chestFadeOut {
  to { opacity: 0; transform: scale(1.025); }
}

@keyframes mobileCardIn {
  0% { opacity: 0; transform: translateY(32px) scale(.9); }
  72% { opacity: 1; transform: translateY(-5px) scale(1.015); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes chestPopIn {
  from { transform: translateY(18px) scale(0.86); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes chestIdle {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-7px) scale(1.015); }
}

@keyframes helpPulse {
  0%, 100% { opacity: .68; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes tapRing {
  0% { opacity: .65; transform: translate(-50%, -50%) scale(.72); }
  75%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}

@keyframes chestShake {
  0% { transform: translateX(0) rotate(0) scale(1); }
  18% { transform: translateX(-8px) rotate(-3deg) scale(1.03); }
  36% { transform: translateX(9px) rotate(3deg) scale(1.05); }
  54% { transform: translateX(-6px) rotate(-2deg) scale(1.07); }
  72% { transform: translateX(5px) rotate(2deg) scale(1.09); }
  100% { transform: translateX(0) rotate(0) scale(1.1); }
}

@keyframes chestVictory {
  0% { transform: scale(1.1); filter: brightness(1) drop-shadow(0 18px 22px rgba(0,0,0,.3)); }
  28% { transform: translateY(-16px) scale(1.2); filter: brightness(1.65) drop-shadow(0 0 35px #fde047); }
  62% { transform: translateY(3px) scale(1.08); }
  100% { transform: translateY(0) scale(1.04); filter: brightness(1.18) drop-shadow(0 0 18px rgba(250,204,21,.7)); }
}

@keyframes lidLaunch {
  0% { transform: translate(-50%, 0) rotate(0); }
  45% { transform: translate(-50%, -55px) rotate(-12deg) scale(1.08); }
  100% { transform: translate(-50%, -38px) rotate(-7deg) scale(1.03); }
}

@keyframes lightRaysBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0) scale(.25); }
  22% { opacity: .95; }
  100% { opacity: .18; transform: translate(-50%, -50%) rotate(70deg) scale(1.35); }
}

@keyframes chestFlash {
  0% { opacity: 0; }
  16% { opacity: .92; }
  100% { opacity: 0; }
}

@keyframes particleBurst {
  0% { opacity: 0; transform: rotate(var(--angle)) translateY(0) scale(.2); }
  14% { opacity: 1; }
  72% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(-185px) rotate(210deg) scale(1.15); }
}

@keyframes chestAuroraIdle {
  to { transform: rotate(360deg) scale(1.08); }
}

@keyframes fireAuraBurst {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.22); filter: blur(10px) brightness(1); }
  18% { opacity: 1; transform: translate(-50%,-50%) scale(.72); filter: blur(5px) brightness(1.8); }
  48% { opacity: .92; transform: translate(-50%,-50%) scale(1.22); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.7); filter: blur(15px) brightness(1.2); }
}

@keyframes chestShockwave {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.15); }
  15% { opacity: .95; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.75); border-width: 1px; }
}

@keyframes sparkleExplosion {
  0% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(-45px) scale(.15); }
  15% { opacity: 1; }
  60% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--spark-angle)) translateY(-245px) rotate(180deg) scale(1.25); }
}

@keyframes rewardFlyLeft {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-160px, -120px) scale(1.05); }
}

@keyframes rewardFlyUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -160px) scale(1.1); }
}

@keyframes rewardFlyRight {
  0% { opacity: 0; transform: translate(-50%, 0) scale(0.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(112px, -120px) scale(1.05); }
}

@keyframes rewardTextIn {
  0% { opacity: 0; transform: translateY(18px) scale(.82); }
  70% { opacity: 1; transform: translateY(-4px) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .cinematic-chest,
  .chest-opening-card,
  .chest-opening-help,
  .chest-tap-ring,
  .chest-opening-overlay.releasing .chest-light-rays,
  .chest-opening-overlay.releasing .chest-particles i { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

.diamond-reward {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(100%, 420px);
  margin-top: 12px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.diamond-reward h3 {
  font-size: 24px;
}

.diamond-chest {
  filter: drop-shadow(0 0 20px rgba(56, 189, 248, 0.55));
}

.diamond-chest::before,
.diamond-chest::after {
  position: absolute;
  z-index: 3;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e0faff;
  box-shadow: 0 0 18px #7dd3fc;
  content: "";
}

.diamond-chest::before {
  left: 22px;
  top: 20px;
}

.diamond-chest::after {
  right: 18px;
  top: 52px;
}

.diamond-chest .chest-lid {
  border-color: #0369a1;
  background: linear-gradient(135deg, #e0faff, #7dd3fc 48%, #38bdf8);
}

.diamond-chest .chest-body {
  border-color: #0369a1;
  background: linear-gradient(135deg, #bae6fd, #38bdf8 52%, #0ea5e9);
}

.diamond-chest .chest-lock {
  background: linear-gradient(135deg, #ffffff, #a5f3fc);
  box-shadow: 0 0 22px rgba(125, 211, 252, 0.9);
}

.pro-chest-reward {
  width: min(100%, 520px);
  padding: 26px 20px 10px;
  border: 2px solid rgba(249, 115, 22, 0.5);
  border-radius: 12px;
  background: radial-gradient(circle at 50% 60%, rgba(250, 204, 21, 0.18), transparent 42%), linear-gradient(135deg, rgba(17, 24, 39, 0.12), rgba(249, 115, 22, 0.12));
  box-shadow: 0 18px 48px rgba(249, 115, 22, 0.16);
}

.pro-chest {
  filter: drop-shadow(0 0 18px rgba(249, 115, 22, 0.72)) drop-shadow(0 0 30px rgba(250, 204, 21, 0.35));
}

.pro-chest .chest-lid {
  border-color: #111827;
  background: linear-gradient(135deg, #fef08a, #f97316 48%, #dc2626);
}

.pro-chest .chest-body {
  border-color: #111827;
  background: linear-gradient(135deg, #fde047, #f97316 45%, #7f1d1d 85%);
  box-shadow: inset 0 -12px 18px rgba(17, 24, 39, 0.3), 0 16px 32px rgba(249, 115, 22, 0.35);
}

.pro-chest .chest-lock {
  background: linear-gradient(135deg, #ffffff, #fde047 45%, #f97316);
  box-shadow: 0 0 20px #fde047;
}

.silver-chest {
  filter: drop-shadow(0 0 16px rgba(148, 163, 184, 0.55));
}

.bronze-chest {
  filter: drop-shadow(0 0 18px rgba(180, 83, 9, 0.5));
}

.bronze-chest .chest-lid {
  border-color: #78350f;
  background: linear-gradient(135deg, #fcd9a8, #cd7f32 50%, #92400e);
}

.bronze-chest .chest-body {
  border-color: #78350f;
  background: linear-gradient(135deg, #e8a75d, #b5651d 52%, #78350f);
}

.bronze-chest .chest-lock {
  background: linear-gradient(135deg, #fff7ed, #d99551);
  box-shadow: 0 0 18px rgba(217, 149, 81, 0.85);
}

@media (max-width: 700px) {
  .timed-chests-row {
    grid-template-columns: 1fr;
  }
}

.silver-chest .chest-lid {
  border-color: #64748b;
  background: linear-gradient(135deg, #ffffff, #cbd5e1 48%, #94a3b8);
}

.silver-chest .chest-body {
  border-color: #64748b;
  background: linear-gradient(135deg, #e2e8f0, #cbd5e1 52%, #94a3b8);
}

.silver-chest .chest-lock {
  background: linear-gradient(135deg, #ffffff, #e2e8f0);
  box-shadow: 0 0 18px rgba(226, 232, 240, 0.9);
}

.green-chest {
  filter: drop-shadow(0 0 18px rgba(34, 197, 94, 0.5));
}

.green-chest::before,
.green-chest::after {
  position: absolute;
  z-index: 3;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #dcfce7;
  box-shadow: 0 0 16px #86efac;
  content: "";
}

.green-chest::before {
  left: 24px;
  top: 22px;
}

.green-chest::after {
  right: 22px;
  top: 58px;
}

.green-chest .chest-lid {
  border-color: #166534;
  background: linear-gradient(135deg, #bbf7d0, #22c55e 52%, #16a34a);
}

.green-chest .chest-body {
  border-color: #166534;
  background: linear-gradient(135deg, #86efac, #22c55e 52%, #15803d);
}

.green-chest .chest-lock {
  background: linear-gradient(135deg, #ffffff, #dcfce7);
  box-shadow: 0 0 18px rgba(134, 239, 172, 0.9);
}

.premium-chest {
  filter: drop-shadow(0 0 22px rgba(168, 85, 247, 0.66));
}

.premium-chest::before,
.premium-chest::after {
  position: absolute;
  z-index: 3;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f5d0fe;
  box-shadow: 0 0 18px #d946ef, 0 0 30px rgba(168, 85, 247, 0.65);
  content: "";
}

.premium-chest::before {
  left: 20px;
  top: 24px;
}

.premium-chest::after {
  right: 20px;
  top: 58px;
}

.premium-chest .chest-lid {
  border-color: #581c87;
  background: linear-gradient(135deg, #f5d0fe, #c084fc 48%, #7c3aed);
}

.premium-chest .chest-body {
  border-color: #581c87;
  background: linear-gradient(135deg, #e879f9, #a855f7 52%, #6d28d9);
}

.premium-chest .chest-lock {
  background: linear-gradient(135deg, #ffffff, #f0abfc);
  box-shadow: 0 0 24px rgba(217, 70, 239, 0.9);
}

.friends-panel {
  margin-top: 24px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-translucent);
  box-shadow: var(--shadow);
}

.combined-friends-panel {
  margin-top: 22px;
}

.friends-panel p {
  margin: 6px 0 0;
  color: var(--muted);
}

.friends-list {
  display: grid;
  gap: 12px;
  margin-top: 18px;
}

.friend-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.friend-avatar {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  font-weight: 1000;
}

.friend-card h3 {
  margin: 0;
}

.friend-card strong {
  color: var(--indigo);
}

.leader-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  min-height: 46px;
  padding: 0 10px;
  border-radius: 8px;
  font-weight: 800;
}

.leader-row.me {
  color: var(--indigo);
  background: #f1ebff;
}

.leader-rank {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--indigo);
}

.course-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 20px;
}

.subject-tabs {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
}

.subject-tab {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  text-align: left;
}

.subject-tab.active {
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
}

.chapters-panel {
  min-width: 0;
}

.chapter-card {
  min-height: 170px;
}

.pedagogical-card {
  align-content: start;
  min-height: 360px;
}

.chapter-card-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chapter-status {
  padding: 6px 9px;
  border-radius: 999px;
  color: var(--indigo);
  background: var(--soft-button);
  font-size: 11px;
  font-weight: 900;
}

.chapter-completed {
  border-color: rgba(20, 184, 106, 0.58);
  box-shadow: 0 12px 30px rgba(20, 184, 106, 0.14);
}

.chapter-completed .chapter-status {
  color: #087945;
  background: #c9f7df;
}

.pedagogy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pedagogy-tags span {
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 11px;
  font-weight: 800;
}

.course-method {
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--panel-soft);
}

.course-method summary {
  cursor: pointer;
  color: var(--indigo);
  font-size: 13px;
  font-weight: 900;
}

.course-method p {
  margin-top: 9px;
  line-height: 1.45;
}

.course-method .course-tip {
  color: var(--green);
  font-weight: 700;
}

.pedagogical-card .card-button {
  align-self: end;
  margin-top: auto;
}

.quiz-panel {
  padding: 24px;
}

.quiz-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.difficulty-panel {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.difficulty-button {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: var(--control-bg);
  font-weight: 900;
}

.difficulty-button.active,
.difficulty-button:hover {
  color: white;
  border-color: var(--indigo);
  background: var(--indigo);
}

.exercise-box {
  display: grid;
  gap: 18px;
  padding: 22px;
  border-radius: 8px;
  background: var(--panel-soft);
}

.curriculum-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid rgba(79, 70, 229, 0.22);
  border-radius: 8px;
  color: var(--indigo);
  background: rgba(79, 70, 229, 0.08);
  font-size: 13px;
  font-weight: 850;
}

@media (max-width: 700px) {
  .curriculum-strip { align-items: flex-start; flex-direction: column; }
}

.exercise-question {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
}

.answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.answer-button {
  min-height: 56px;
  border: 2px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--control-bg);
  font-weight: 900;
}

.answer-button:hover {
  border-color: var(--indigo);
}

.answer-button.correct {
  color: #075d37;
  border-color: var(--green);
  background: #dcfff0;
}

.answer-button.wrong {
  color: #a11d36;
  border-color: var(--pink);
  background: #fff0f4;
}

.feedback {
  min-height: 28px;
  margin: 0;
  font-weight: 900;
}

.profile-layout {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 20px;
}

.profile-card,
.badges-panel {
  padding: 22px;
}

.profile-avatar {
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  border: 0;
  border-radius: 8px;
  color: white;
  background: linear-gradient(135deg, var(--blue), var(--indigo));
  font-size: 42px;
  font-weight: 1000;
  cursor: pointer;
}

.avatar-letter-picker {
  display: grid;
  grid-template-columns: repeat(6, 38px);
  gap: 8px;
  margin-top: 12px;
}

.avatar-letter {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: var(--panel);
  font-weight: 1000;
  cursor: pointer;
}

.avatar-letter:hover {
  color: white;
  border-color: var(--indigo);
  background: linear-gradient(135deg, var(--blue), var(--indigo));
}

.avatar-color-lock {
  margin-top: 12px;
  font-size: 13px;
  font-weight: 800;
}

.avatar-color-picker {
  display: grid;
  grid-template-columns: repeat(5, 34px);
  gap: 8px;
  margin-top: 10px;
}

.avatar-color {
  width: 34px;
  height: 34px;
  border: 2px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.55);
}

.avatar-color.active,
.avatar-color:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.profile-card h2 {
  margin-top: 16px;
}

.profile-card p {
  margin: 5px 0 18px;
  color: var(--muted);
}

.profile-form {
  align-items: stretch;
}

.profile-form-title {
  margin: 20px 0 0;
  font-size: 18px;
}

.profile-save-result {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 6px;
  width: 100%;
  margin-top: 10px;
  padding: 18px;
  border: 1px solid rgba(99, 102, 241, 0.62);
  border-radius: 14px;
  background: linear-gradient(145deg, #071329, #101b3d 55%, #07152f);
  box-shadow: inset 0 0 35px rgba(37, 99, 235, 0.18), 0 12px 30px rgba(3, 10, 30, 0.28);
}

.profile-save-result::before,
.profile-save-result::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -55%;
  pointer-events: none;
}

.profile-save-result::before {
  background:
    radial-gradient(ellipse at 25% 70%, rgba(30, 64, 175, 0.7), transparent 30%),
    radial-gradient(ellipse at 72% 28%, rgba(37, 99, 235, 0.55), transparent 28%),
    radial-gradient(ellipse at 55% 90%, rgba(14, 116, 144, 0.38), transparent 34%);
  filter: blur(12px);
  animation:profileBlueFlames 6s ease-in-out infinite alternate;
}

.profile-save-result::after {
  background: conic-gradient(from 60deg, transparent 0 32%, rgba(124, 58, 237, 0.2) 39%, transparent 47% 72%, rgba(59, 130, 246, 0.17) 80%, transparent 88%);
  animation: profileAuraSpin 12s linear infinite;
}

.profile-save-result strong,
.profile-save-result span {
  position: relative;
  z-index: 1;
  width: fit-content;
  color: transparent;
  background: linear-gradient(105deg, #f8fafc 0%, #cbd5e1 35%, #a855f7 46%, #f5d0fe 52%, #8b5cf6 58%, #cbd5e1 68%, #f8fafc 100%);
  background-size: 280% 100%;
  background-position: 100% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 7px rgba(168, 85, 247, 0.22));
  animation: profilePurpleShine 3.4s linear infinite;
}

.profile-save-result strong {
  font-size: 18px;
  text-shadow: 0 0 18px rgba(139, 92, 246, 0.28);
}

.profile-save-result span {
  font-weight: 700;
}

.profile-save-result span:nth-of-type(2n) { animation-delay: -1.1s; }
.profile-save-result span:nth-of-type(3n) { animation-delay: -2.2s; }

.profile-tier-badge {
  --tier-color: #b96832;
  --tier-soft: #f5c49f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 14px;
  padding: 11px 14px;
  border: 1px solid color-mix(in srgb, var(--tier-color) 68%, white);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tier-color) 74%, #111827), var(--tier-color));
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--tier-soft) 22%, transparent), 0 8px 22px color-mix(in srgb, var(--tier-color) 22%, transparent);
}

.profile-tier-badge span { color: var(--tier-soft); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.profile-tier-badge strong { color: #fff; font-size: 17px; }
.profile-tier-badge.tier-bronze { --tier-color:#b96832;--tier-soft:#fed7aa; }
.profile-tier-badge.tier-silver { --tier-color:#8492a6;--tier-soft:#f1f5f9; }
.profile-tier-badge.tier-gold { --tier-color:#d99b0b;--tier-soft:#fef08a; }
.profile-tier-badge.tier-platinum { --tier-color:#5d8da8;--tier-soft:#dbeafe; }
.profile-tier-badge.tier-diamond { --tier-color:#168dcc;--tier-soft:#a5f3fc; }
.profile-tier-badge.tier-champion { --tier-color:#b53f78;--tier-soft:#fbcfe8; }
.profile-tier-badge.tier-elite { --tier-color:#7040b8;--tier-soft:#e9d5ff; }
.profile-tier-badge.tier-pro { --tier-color:#d4491f;--tier-soft:#fde68a; animation:profileProTierGlow 2s ease-in-out infinite; }
@keyframes profileProTierGlow { 50% { filter:brightness(1.28);box-shadow:0 0 28px rgba(249,115,22,.62); } }

.xp-stat-pill {
  position: relative;
  isolation: isolate;
  min-width: 150px;
  overflow: visible;
  border: 1px solid rgba(192, 132, 252, 0.72);
  color: #fff;
  background: radial-gradient(circle at 18% 50%,rgba(249,115,22,.3),transparent 25%),linear-gradient(120deg,#080d24,#25104f 48%,#0c2550);
  box-shadow: inset 0 0 24px rgba(139,92,246,.22),0 0 0 1px rgba(59,130,246,.18),0 8px 28px rgba(76,29,149,.32);
  animation: xpPillPower 2.4s ease-in-out infinite;
}

.xp-stat-pill::before {
  position: absolute;
  z-index: -1;
  inset: -2px;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--xp-angle,0deg),#f97316,#fde047,#e879f9,#7c3aed,#38bdf8,#f97316);
  content: "";
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:xpBorderSpin 3s linear infinite;
}

.xp-stat-pill::after {
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(105deg,transparent 10%,rgba(255,255,255,.02) 35%,rgba(255,255,255,.65) 48%,rgba(216,180,254,.45) 54%,transparent 68%);
  transform:translateX(-130%);
  content:"";
  animation:xpPillSweep 2.8s ease-in-out infinite;
}

.xp-stat-pill .flame {
  position:relative;
  z-index:2;
  width:29px;
  height:34px;
  border-radius:70% 35% 65% 45%;
  background:radial-gradient(circle at 55% 68%,#fff7ae 0 13%,#facc15 14% 31%,#fb7185 48%,#7c3aed 78%);
  box-shadow:0 0 12px #facc15,0 0 24px #f97316,0 0 38px rgba(168,85,247,.72);
  transform:rotate(8deg);
  animation:xpFlameDance .75s ease-in-out infinite alternate;
}

.xp-stat-pill strong,.xp-stat-pill b {
  position:relative;
  z-index:2;
  color:transparent;
  background:linear-gradient(100deg,#fff,#dbeafe 28%,#fde68a 42%,#fff 50%,#e879f9 62%,#c4b5fd 76%,#fff);
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 0 7px rgba(216,180,254,.42));
  animation:xpTextLegend 2.2s linear infinite;
}
.xp-stat-pill strong{font-size:20px}.xp-stat-pill b{font-size:15px;letter-spacing:.08em}
.xp-energy-ring{position:absolute;z-index:1;left:10px;width:48px;height:48px;border:1px solid rgba(253,224,71,.38);border-radius:50%;box-shadow:0 0 18px rgba(249,115,22,.42);animation:xpEnergyRing 1.6s ease-out infinite}
.xp-sparkles{position:absolute;inset:0;pointer-events:none}.xp-sparkles i{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff;box-shadow:0 0 8px #e879f9;opacity:0}.xp-sparkles i:nth-child(1){left:16%;top:8%;animation:xpSpark 1.8s .1s infinite}.xp-sparkles i:nth-child(2){left:43%;top:80%;animation:xpSpark 2.1s .7s infinite}.xp-sparkles i:nth-child(3){left:68%;top:12%;animation:xpSpark 1.7s 1.1s infinite}.xp-sparkles i:nth-child(4){left:88%;top:66%;animation:xpSpark 2.3s .4s infinite}.xp-sparkles i:nth-child(5){left:58%;top:45%;animation:xpSpark 1.9s 1.4s infinite}
@property --xp-angle{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes xpBorderSpin{to{--xp-angle:360deg}}@keyframes xpPillSweep{0%,30%{transform:translateX(-130%)}70%,100%{transform:translateX(130%)}}@keyframes xpPillPower{50%{transform:translateY(-2px) scale(1.025);filter:brightness(1.17);box-shadow:inset 0 0 30px rgba(139,92,246,.34),0 0 34px rgba(124,58,237,.42)}}@keyframes xpFlameDance{to{transform:rotate(-6deg) scale(.9,1.1);filter:brightness(1.3)}}@keyframes xpTextLegend{from{background-position:110% 50%}to{background-position:-110% 50%}}@keyframes xpEnergyRing{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.35);opacity:0}}@keyframes xpSpark{0%{opacity:0;transform:translateY(8px) scale(.3)}35%{opacity:1}100%{opacity:0;transform:translateY(-16px) scale(1.4)}}
@media(prefers-reduced-motion:reduce){.xp-stat-pill,.xp-stat-pill::before,.xp-stat-pill::after,.xp-stat-pill .flame,.xp-stat-pill strong,.xp-stat-pill b,.xp-energy-ring,.xp-sparkles i{animation:none}}

.boss-nav-icon::before { content:"♛";color:#f97316;font-size:22px; }
.boss-arena { display:grid;grid-template-columns:minmax(260px,.72fr) minmax(420px,1.28fr);gap:24px;min-height:590px;padding:30px;overflow:hidden;border:1px solid rgba(249,115,22,.45);border-radius:24px;background:radial-gradient(circle at 20% 45%,rgba(249,115,22,.25),transparent 30%),linear-gradient(145deg,#130b2e,#25104b 50%,#071b38);box-shadow:0 25px 70px rgba(30,10,60,.35); }
.boss-stage { position:relative;display:grid;place-items:center;min-height:480px; }
.boss-aura { position:absolute;width:330px;height:330px;border-radius:50%;background:repeating-conic-gradient(rgba(249,115,22,.45) 0 7deg,transparent 7deg 18deg);filter:blur(2px);animation:bossAuraSpin 12s linear infinite; }
.boss-character { position:relative;z-index:2;width:230px;height:250px;border:7px solid #fb923c;border-radius:45% 45% 38% 38%;background:radial-gradient(circle at 50% 35%,#7c3aed,#312e81 55%,#0f172a);box-shadow:inset 0 -35px 0 rgba(0,0,0,.34),0 0 55px rgba(249,115,22,.55);animation:bossFloat 2.6s ease-in-out infinite; }
.boss-horn { position:absolute;top:-55px;width:78px;height:85px;background:linear-gradient(#fde68a,#f97316);clip-path:polygon(50% 0,100% 100%,0 78%); }
.boss-horn.left{left:10px;transform:rotate(-18deg)}.boss-horn.right{right:10px;transform:rotate(18deg)}
.boss-eye { position:absolute;top:82px;width:36px;height:25px;border-radius:50%;background:#fde047;box-shadow:0 0 20px #facc15; }
.boss-eye.left{left:45px}.boss-eye.right{right:45px}.boss-eye::after{display:block;width:9px;height:20px;margin:auto;border-radius:50%;background:#111827;content:""}
.boss-mouth { position:absolute;left:50%;bottom:58px;width:88px;height:36px;border-bottom:8px solid #fb923c;border-radius:50%;transform:translateX(-50%); }
.boss-level-medal { position:absolute;z-index:3;bottom:28px;padding:10px 18px;border:2px solid #fde68a;border-radius:999px;color:#fff;background:linear-gradient(135deg,#c2410c,#7c2d12);box-shadow:0 0 24px rgba(249,115,22,.7);font-weight:900}.boss-level-medal strong{font-size:22px}
.boss-panel { align-self:center;display:grid;gap:16px;padding:28px;border:1px solid rgba(196,181,253,.32);border-radius:20px;color:#fff;background:rgba(15,23,42,.8);backdrop-filter:blur(12px); }
.boss-panel h2{margin:0;font-size:32px}.boss-speech{position:relative;padding:17px 20px;border-radius:14px;color:#312e81;background:#fff;font-size:17px;font-weight:900}.boss-speech::before{position:absolute;left:-15px;top:22px;border-width:10px 16px 10px 0;border-style:solid;border-color:transparent #fff transparent transparent;content:""}
.boss-question{min-height:34px;margin:0!important;color:#fff!important;font-size:22px;font-weight:1000}.boss-answers{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.boss-answers button{padding:14px 10px;border:1px solid rgba(255,255,255,.3);border-radius:11px;color:#fff;background:linear-gradient(135deg,#4f46e5,#7c3aed);font-weight:1000;cursor:pointer}.boss-answers button:hover{filter:brightness(1.25);transform:translateY(-2px)}.boss-answers button:disabled{opacity:.65}
.boss-start-button{width:fit-content}.boss-timer{margin:0!important;color:#fca5a5!important;font-weight:900}.boss-reward-reminder{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:11px;color:#fde68a;background:rgba(249,115,22,.14);font-weight:800}.boss-best{margin:0!important;color:#c4b5fd!important;font-weight:900}
@keyframes bossAuraSpin{to{transform:rotate(360deg)}}@keyframes bossFloat{50%{transform:translateY(-12px) scale(1.025);filter:brightness(1.16)}}
@media(max-width:880px){.boss-arena{grid-template-columns:1fr}.boss-stage{min-height:380px}.boss-answers{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.boss-aura,.boss-character{animation:none}}
.boss-chest-section{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:20px;background:var(--panel-translucent);box-shadow:var(--shadow)}
.boss-chest-100 .boss-treasure{background:linear-gradient(#22d3ee,#2563eb);box-shadow:0 0 30px rgba(34,211,238,.58)}.boss-chest-100 .boss-treasure span{background:linear-gradient(#a5f3fc,#3b82f6)}.boss-chest-100.unlocked{border-color:#22d3ee!important;box-shadow:0 0 36px rgba(34,211,238,.52)!important}.boss-chest-300{background:radial-gradient(circle at 50% 20%,rgba(250,204,21,.2),transparent 35%),linear-gradient(145deg,#2e1065,#111827)!important}.boss-chest-300 .boss-treasure{background:linear-gradient(135deg,#facc15,#f97316,#a855f7);box-shadow:0 0 36px rgba(250,204,21,.68)}.boss-chest-300 .boss-treasure span{background:linear-gradient(90deg,#fef08a,#fb923c,#e879f9)}.boss-chest-300.unlocked{border-color:#fde047!important;box-shadow:0 0 45px rgba(250,204,21,.62),0 0 70px rgba(168,85,247,.28)!important}
.boss-chest-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.boss-chest-card{position:relative;display:grid;justify-items:center;gap:10px;padding:24px;overflow:hidden;border:2px solid #64748b;border-radius:18px;text-align:center;background:linear-gradient(145deg,#1e293b,#0f172a);box-shadow:inset 0 0 32px rgba(0,0,0,.34);filter:saturate(.55)}.boss-chest-card h3,.boss-chest-card p{margin:0;color:#fff!important}.boss-chest-requirement{padding:6px 10px;border-radius:999px;color:#e2e8f0;background:rgba(255,255,255,.1);font-size:11px;font-weight:1000;text-transform:uppercase}.boss-treasure{position:relative;width:124px;height:88px;margin:12px 0 4px;border:5px solid #78350f;border-radius:12px 12px 20px 20px;background:linear-gradient(#f59e0b,#b45309);box-shadow:inset 0 -18px 0 rgba(120,53,15,.32),0 12px 24px rgba(0,0,0,.3)}.boss-treasure span{position:absolute;left:-5px;top:-28px;width:124px;height:42px;border:5px solid #78350f;border-radius:55px 55px 9px 9px;background:linear-gradient(#fcd34d,#f59e0b)}.boss-treasure strong{position:absolute;z-index:2;left:50%;top:27px;display:grid;place-items:center;width:40px;height:40px;border:4px solid #78350f;border-radius:10px;color:#78350f;background:#fde68a;transform:translateX(-50%)}.boss-chest-50 .boss-treasure{background:linear-gradient(#a855f7,#4f46e5);box-shadow:0 0 28px rgba(168,85,247,.5)}.boss-chest-50 .boss-treasure span{background:linear-gradient(#e879f9,#8b5cf6)}.boss-chest-card.unlocked{filter:none;border-color:#facc15;box-shadow:0 0 30px rgba(250,204,21,.35);animation:bossChestReady 1.8s ease-in-out infinite}.boss-chest-50.unlocked{border-color:#c084fc;box-shadow:0 0 34px rgba(168,85,247,.52)}.boss-chest-card.claimed{filter:saturate(.45);opacity:.72;border-color:#22c55e}.boss-chest-card.opening .boss-treasure{animation:bossTreasureOpen .85s cubic-bezier(.2,.9,.25,1.3)}.boss-chest-message{min-height:22px!important;color:#86efac!important;font-weight:900}@keyframes bossChestReady{50%{transform:translateY(-4px);filter:brightness(1.16)}}@keyframes bossTreasureOpen{45%{transform:scale(1.16) rotate(-3deg);filter:brightness(1.8)}100%{transform:none}}@media(max-width:760px){.boss-chest-grid{grid-template-columns:1fr}}

.combined-section-heading {
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: linear-gradient(135deg, var(--panel), var(--panel-soft));
}

.combined-section-heading h2 {
  margin: 5px 0 7px;
  font-size: 28px;
}

.combined-section-heading p:last-child {
  margin: 0;
  color: var(--muted);
}

#mySkinsView.combined-skins-view {
  position: relative;
  margin-top: 34px;
  padding-top: 34px;
  border-top: 2px solid var(--line);
}

#mySkinsView.combined-skins-view::before {
  content: "Deuxième partie · Mes skins";
  position: absolute;
  top: -14px;
  left: 22px;
  padding: 5px 12px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--indigo), #8b5cf6);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
}

@keyframes profilePurpleShine {
  from { background-position: 110% 50%; }
  to { background-position: -110% 50%; }
}

@keyframes profileBlueFlames {
  0% { transform: translate(-8%, 8%) rotate(-4deg) scale(0.95); opacity: 0.65; }
  50% { transform: translate(7%, -6%) rotate(5deg) scale(1.08); opacity: 1; }
  100% { transform: translate(-2%, -11%) rotate(-2deg) scale(1.02); opacity: 0.78; }
}

@keyframes profileAuraSpin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .profile-save-result::before,
  .profile-save-result::after,
  .profile-save-result strong,
  .profile-save-result span { animation: none; }
}

.badge-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.badge-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.badge-card.unlocked .badge-symbol {
  position: relative;
  z-index: 2;
}

.badge-card.badge-level150.unlocked {
  border-color: rgba(56, 189, 248, 0.48);
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.11), var(--panel));
  box-shadow: 0 8px 22px rgba(56, 189, 248, 0.12);
}

.badge-card.badge-level150.unlocked .badge-symbol {
  background: linear-gradient(135deg, #94a3b8, #38bdf8 52%, #2563eb);
  box-shadow: 0 0 13px rgba(56, 189, 248, 0.48);
  animation: badgeSoftShine 3.4s ease-in-out infinite;
}

.badge-card.badge-premium.unlocked {
  border-color: rgba(192, 132, 252, 0.72);
  background: radial-gradient(circle at 85% 10%, rgba(250, 204, 21, 0.2), transparent 30%), linear-gradient(135deg, rgba(124, 58, 237, 0.2), rgba(37, 99, 235, 0.1)), var(--panel);
  box-shadow: 0 10px 32px rgba(124, 58, 237, 0.28), inset 0 0 18px rgba(250, 204, 21, 0.08);
  animation: premiumBadgeGlow 2.1s ease-in-out infinite;
}

.badge-card.badge-premium.unlocked::after {
  position: absolute;
  z-index: 0;
  inset: -70% -30%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.6) 48%, transparent 56%);
  transform: translateX(-65%) rotate(8deg);
  animation: badgeSweep 2.8s ease-in-out infinite;
  content: "";
}

.badge-card.badge-premium.unlocked .badge-symbol {
  background: linear-gradient(135deg, #fde047, #a855f7 48%, #2563eb);
  box-shadow: 0 0 18px #c084fc, 0 0 30px rgba(250, 204, 21, 0.55);
}

.badge-card.badge-creator.unlocked {
  border: 2px solid #fbbf24;
  color: white;
  background: radial-gradient(circle at 80% 15%, rgba(255,255,255,.45), transparent 22%), linear-gradient(135deg, #312e81, #7c3aed 48%, #db2777);
  box-shadow: 0 0 24px rgba(250, 204, 21, .48), 0 14px 38px rgba(124, 58, 237, .36);
  animation: premiumBadgeGlow 1.7s ease-in-out infinite;
}

.badge-card.badge-creator.unlocked .badge-symbol {
  color: #312e81;
  background: linear-gradient(135deg, #fff7ae, #fbbf24);
  box-shadow: 0 0 20px rgba(253, 224, 71, .85);
}


.badge-card.badge-proTier.unlocked {
  border-color: rgba(249, 115, 22, 0.82);
  background: radial-gradient(circle at 50% 100%, rgba(239, 68, 68, 0.3), transparent 48%), linear-gradient(135deg, rgba(17, 24, 39, 0.96), rgba(124, 45, 18, 0.65));
  color: white;
  box-shadow: 0 12px 38px rgba(239, 68, 68, 0.32), inset 0 -8px 22px rgba(249, 115, 22, 0.2);
  animation: proBadgeFire 1.55s ease-in-out infinite;
}

.badge-card.badge-proTier.unlocked::before,
.badge-card.badge-proTier.unlocked::after {
  position: absolute;
  z-index: 0;
  bottom: -18px;
  width: 80px;
  height: 85px;
  background: linear-gradient(0deg, #dc2626, #f97316 55%, #fde047);
  clip-path: polygon(50% 0, 65% 40%, 88% 20%, 80% 70%, 100% 100%, 0 100%, 18% 64%, 8% 38%, 38% 55%);
  filter: blur(.3px) drop-shadow(0 0 8px #f97316);
  opacity: .72;
  content: "";
  animation: badgeFlame 1.15s ease-in-out infinite alternate;
}

.badge-card.badge-proTier.unlocked::before { left: -14px; }
.badge-card.badge-proTier.unlocked::after { right: -14px; animation-delay: -.55s; transform: scaleX(-1); }
.badge-card.badge-proTier.unlocked .badge-symbol { color: #111827; background: linear-gradient(135deg, #fef08a, #f97316 50%, #ef4444); box-shadow: 0 0 20px #f97316, 0 0 38px rgba(239, 68, 68, 0.65); font-size: 12px; }
.badge-card.badge-proTier.unlocked p { position: relative; z-index: 2; color: #fed7aa; }
.badge-card.badge-proTier.unlocked h3 { position: relative; z-index: 2; }

@keyframes badgeSoftShine { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.16); box-shadow: 0 0 18px rgba(56,189,248,.62); } }
@keyframes premiumBadgeGlow { 0%,100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(-2px); filter: brightness(1.12); } }
@keyframes badgeSweep { 0%,30% { transform: translateX(-65%) rotate(8deg); opacity: 0; } 55% { opacity: .85; } 80%,100% { transform: translateX(70%) rotate(8deg); opacity: 0; } }
@keyframes proBadgeFire { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.2); box-shadow: 0 14px 44px rgba(249,115,22,.46); } }
@keyframes badgeFlame { from { transform: translateY(6px) scale(.9); } to { transform: translateY(-5px) scale(1.08); } }

.badge-card.locked {
  opacity: 0.42;
  filter: grayscale(1);
}

.badge-card h3 {
  margin-top: 10px;
  font-size: 15px;
}

.badge-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.modal {
  width: min(460px, calc(100vw - 30px));
  max-height: min(90vh, 820px);
  overflow: auto;
  border: 0;
  border-radius: 8px;
  padding: 0;
  box-shadow: var(--shadow);
}

.modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.modal form {
  padding: 24px;
}

.modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.price {
  margin: 18px 0;
  color: var(--indigo);
  font-size: 36px;
  font-weight: 1000;
}

.price span {
  color: var(--muted);
  font-size: 16px;
}

.premium-list {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding-left: 22px;
  color: var(--muted);
  font-weight: 700;
}

.premium-checkout {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid rgba(79, 70, 229, .2);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(238, 242, 255, .92), rgba(255, 255, 255, .98));
}

.premium-checkout-head {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
}

.premium-checkout-head > span {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: rgba(20, 184, 106, .14);
}

.premium-checkout-head strong,
.premium-checkout-head small {
  display: block;
}

.premium-checkout-head small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.premium-payment-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(79, 70, 229, .09);
}

.premium-payment-tab {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  color: var(--muted);
  background: transparent;
  font-weight: 900;
  cursor: pointer;
}

.premium-payment-tab.active {
  color: var(--indigo);
  background: var(--panel);
  box-shadow: 0 5px 14px rgba(49, 46, 129, .13);
}

.premium-payment-tab:disabled {
  cursor: not-allowed;
  opacity: .52;
}

.premium-payment-panel {
  min-height: 46px;
}

.premium-card-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.premium-payment-hint[data-status="success"],
.premium-payment-hint[data-status="ready"] { color: #15803d; }
.premium-payment-hint[data-status="warning"] { color: #b45309; }
.premium-payment-hint[data-status="error"] { color: #b91c1c; }
.premium-payment-hint[data-status="loading"] { color: var(--indigo); }

body[data-theme="dark"] .premium-checkout {
  background: linear-gradient(145deg, rgba(49, 46, 129, .34), rgba(15, 23, 42, .96));
}

@media (max-width: 1060px) {
  .app-shell {
    grid-template-columns: 92px minmax(0, 1fr);
  }

  .sidebar {
    padding: 18px 12px;
  }

  .brand span:not(.brand-mark),
  .nav-item {
    font-size: 0;
  }

  .nav-item {
    justify-content: center;
    padding: 0;
  }

  .mascot {
    display: none;
  }

  .level-hero {
    grid-template-columns: minmax(0, 1fr) 180px;
  }

  .daily-goal {
    grid-column: 1 / -1;
  }

  .subject-grid,
  .chapter-grid,
  .badge-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .level-pass-hero,
  .profile-layout {
    grid-template-columns: 1fr;
  }

  .level-pass-hero {
    display: grid;
  }
}

@media (max-width: 720px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    z-index: 10;
    display: block;
    height: auto;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }

  .brand {
    display: none;
  }

  .nav-list {
    grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
    gap: 4px;
  }

  .nav-item {
    min-height: 54px;
  }

  .main {
    padding: 18px 14px calc(94px + env(safe-area-inset-bottom));
  }

  .topbar,
  .setup-panel,
  .section-heading,
  .quiz-header {
    align-items: stretch;
    flex-direction: column;
  }

  .top-actions {
    justify-content: flex-start;
  }

  .level-hero {
    grid-template-columns: 1fr;
    padding: 22px;
  }

  .rocket-scene {
    display: none;
  }

  .level-copy h2 {
    font-size: 26px;
  }

  .subject-grid,
  .chapter-grid,
  .badge-grid,
  .answer-grid {
    grid-template-columns: 1fr;
  }

  .level-pass-card {
    grid-template-columns: 1fr;
  }

  .level-pass-card .quest-reward {
    width: fit-content;
  }

  .course-layout {
    grid-template-columns: 1fr;
  }

  .subject-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .quest-card {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .quest-reward {
    grid-column: 2;
    width: fit-content;
  }

  input,
  select {
    min-width: 0;
    width: 100%;
  }
}

/* Les petits téléphones affichent les neuf onglets sur deux rangées. */
@media (max-width: 520px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  .nav-list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .main {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
  }

  .xp-stat-pill {
    min-width: 0;
    overflow: hidden;
  }

  .quest-cycle-timer {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .reward-panel {
    padding: 18px 14px;
  }

  .timed-chests-row,
  .timed-chest-card,
  .xp-wheel-card,
  .reward-xp-challenge,
  .diamond-reward {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .xp-wheel-stage {
    max-width: 100%;
  }

  .xp-challenge-hero,
  .xp-challenge-game {
    padding: 20px 14px;
  }

  .xp-challenge-button {
    min-width: 0;
    width: 100%;
  }

  .home-update {
    align-items: flex-start;
    gap: 13px;
    padding: 18px;
  }

  .home-update-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    font-size: 21px;
  }

  .home-update h2 {
    font-size: 20px;
  }

  .double-rewards-event {
    grid-template-columns: auto 1fr;
    gap: 13px;
    padding: 18px;
  }

  .double-rewards-badge { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; }
  .double-rewards-event h2 { font-size: 20px; }
  .double-rewards-event > strong { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}