/* OpenDyslexic webfonts */
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Italic.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'OpenDyslexic';
  src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-BoldItalic.woff') format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* Design tokens */
:root{
  --font-dyslexic:'OpenDyslexic', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --font-standard: ui-rounded, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  /* Light & Playful Theme - Enhanced */
  --bg:#fdfdff; --bg-soft:#f4f6ff; --text:#333; --muted:#7c8db0;
  --primary:#8b78ff; --primary-ink:#fff; --accent:#ffca78; --accent-2:#82e9de;
  --card:#ffffff; --ring:rgba(139, 120, 255, 0.4); 
  --shadow:0 8px 25px rgba(149, 157, 184, 0.2);
  --shadow-soft:0 4px 12px rgba(149, 157, 184, 0.15);
  --shadow-intense:0 12px 40px rgba(139, 120, 255, 0.25);
  --success:#58d68d; --danger:#ff6b6b; --info:#6cb2eb;
  
  /* Enhanced Gradients */
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, #a78bfa 50%, var(--accent) 100%);
  --gradient-soft: linear-gradient(135deg, var(--bg-soft) 0%, rgba(139, 120, 255, 0.05) 100%);
  --gradient-card: linear-gradient(135deg, var(--card) 0%, rgba(255, 255, 255, 0.8) 100%);

  /* Motion tokens - Enhanced */
  --ease-in-out: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --fast: 200ms;
  --norm: 300ms;
  --slow: 500ms;
  --ultra-slow: 800ms;
}
.theme-dark{
  --bg:#1a1c2c; --bg-soft:#25283d; --text:#e0e0e6; --muted:#8a94b5;
  --primary:#9d8dff; --primary-ink:#fff; --accent:#ffcf8a; --accent-2:#8de6d9;
  --card:#2f324d; --ring:rgba(157, 141, 255, 0.5); 
  --shadow:0 10px 30px rgba(0,0,0,.3);
  --shadow-soft:0 6px 20px rgba(0,0,0,.2);
  --shadow-intense:0 15px 50px rgba(157, 141, 255, 0.3);
  --success:#6ee3a1; --danger:#ff7f7f; --info:#80c1f1;
  
  /* Dark theme gradients */
  --gradient-primary: linear-gradient(135deg, var(--primary) 0%, #b8a7ff 50%, var(--accent) 100%);
  --gradient-soft: linear-gradient(135deg, var(--bg-soft) 0%, rgba(157, 141, 255, 0.1) 100%);
  --gradient-card: linear-gradient(135deg, var(--card) 0%, rgba(47, 50, 77, 0.9) 100%);
}

/* Accessibility utilities */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary);
  color: var(--primary-ink);
  padding: 8px;
  border-radius: 4px;
  text-decoration: none;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* Enhanced focus indicators */
*:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Base - Enhanced */
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-current);
  font-size:18px; line-height:1.6; letter-spacing:.2px;
  transition:background var(--norm) var(--ease-smooth), color var(--norm) var(--ease-smooth);
  overflow-x: hidden;
}

/* Enhanced scroll behavior */
html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: var(--bg-soft); }
::-webkit-scrollbar-thumb { 
  background: var(--gradient-primary); 
  border-radius: 10px; 
  border: 2px solid var(--bg-soft);
}
::-webkit-scrollbar-thumb:hover { 
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); 
}
.dyslexic-font{--font-current:var(--font-dyslexic)}
.standard-font{--font-current:var(--font-standard)}
*{box-sizing:border-box}
a{color:var(--primary); text-decoration:none; transition: color var(--fast) ease;}
a:hover{color:var(--accent);}
button,input,select,textarea{font:inherit; color:inherit}

/* Navbar - Enhanced */
header.navbar{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg-soft) 85%, transparent);
  border-bottom:1px solid color-mix(in srgb, var(--text) 8%, transparent);
  backdrop-filter: blur(12px) saturate(1.8);
  transition: all var(--norm) var(--ease-smooth);
}

header.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-soft);
  opacity: 0.5;
  z-index: -1;
}

.nav-inner{max-width:1200px; margin:0 auto; padding:12px 20px; display:flex; gap:16px; align-items:center}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; transition: transform var(--fast) var(--ease-bounce);}
.brand:hover { transform: translateY(-2px) scale(1.02); }
.brand .logo{
  width:40px; height:40px; display:grid; place-items:center; 
  background:var(--gradient-primary); 
  border-radius:14px; 
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: all var(--norm) var(--ease-bounce);
}
.brand .logo:hover {
  box-shadow: var(--shadow-intense), inset 0 1px 0 rgba(255,255,255,0.4);
  transform: rotate(-5deg) scale(1.05);
}
.brand span{font-size:22px; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.spacer{flex:1}
.toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center}

.segmented{display:inline-flex; border-radius:18px; background:var(--bg); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); overflow:hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
.segmented button{padding:8px 16px; background:transparent; border:0; cursor:pointer; font-weight: 500; transition:background var(--fast) var(--ease-in-out), color var(--fast) var(--ease-in-out)}
.segmented button[aria-pressed="true"]{background:var(--primary); color:var(--primary-ink)}

.toggle{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:18px; border:1px solid color-mix(in srgb, var(--text) 10%, transparent); background:var(--bg); cursor:pointer; transition:all var(--fast) var(--ease-in-out)}
.toggle:hover{transform:translateY(-2px); box-shadow: var(--shadow);}
.slider{display:flex; align-items:center; gap:8px; padding:8px 14px; border-radius:18px; border:1px solid color-mix(in srgb, var(--text) 10%, transparent); background:var(--bg);}
.slider input[type="range"]{width:150px; -webkit-appearance: none; appearance: none; background: transparent; cursor: pointer;}
.slider input[type="range"]::-webkit-slider-runnable-track { background: color-mix(in srgb, var(--primary) 20%, var(--bg-soft)); height: 8px; border-radius: 4px; }
.slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -4px; background-color: var(--primary); height: 16px; width: 16px; border-radius: 50%; }

.btn{--_bg:var(--primary); --_ink:var(--primary-ink); 
  padding:12px 20px; border-radius:16px; border:0; 
  background:var(--gradient-primary); color:var(--_ink); cursor:pointer; 
  font-weight: 600; font-size: 15px;
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.2); 
  transition:all var(--norm) var(--ease-bounce);
  position: relative;
  overflow: hidden;
}

/* Small button variant for compact actions (e.g., Apply) */
.btn.small{ padding:8px 12px; font-size:14px; border-radius:12px; }

.btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.3);
  border-radius: 50%;
  transition: all var(--slow) var(--ease-out-back);
  transform: translate(-50%, -50%);
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn:hover{
  transform:translateY(-4px) scale(1.02); 
  box-shadow:var(--shadow-intense), inset 0 1px 0 rgba(255,255,255,0.3);
}
.btn:active{
  transform:translateY(-1px) scale(0.98); 
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.2);
}
.btn.secondary{
  background:var(--gradient-card); color:var(--text); 
  border:1px solid color-mix(in srgb, var(--text) 12%, transparent);
  box-shadow: var(--shadow-soft);
}

/* Ensure readable contrast in light theme for subtle buttons */
.theme-light .btn.secondary{ color:#222; border-color: color-mix(in srgb, var(--text) 18%, transparent); }
.theme-light .btn.ghost{ color:#222; border-color: color-mix(in srgb, var(--text) 35%, transparent); }
.theme-light .toggle{ color:#222; border-color: color-mix(in srgb, var(--text) 16%, transparent); }
.theme-light .segmented{ border-color: color-mix(in srgb, var(--text) 14%, transparent); }
.btn.ghost{
  background:transparent; color:var(--text); 
  border:2px dashed color-mix(in srgb, var(--text) 25%, transparent); 
  box-shadow:none;
  transition: all var(--norm) var(--ease-bounce);
}
.btn.ghost:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border-color: var(--primary);
  color: var(--primary);
}
.btn:focus-visible{outline:3px solid var(--ring); outline-offset:3px}

/* Hovercards (Profile & History) */
.hovercard{position:relative}
.hovercard > .trigger{display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:18px; background:var(--bg); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); cursor:pointer; transition: all var(--fast) ease;}
.hovercard > .trigger:hover{transform:translateY(-2px); box-shadow: var(--shadow);}
.hovercard .menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:300px; background:var(--card); border:1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius:16px; box-shadow:var(--shadow); padding:14px; display:none; opacity:0; transform:translateY(-8px) scale(.95); transition:opacity var(--norm) var(--ease-in-out), transform var(--norm) var(--ease-in-out); z-index: 110;
}
.hovercard.open .menu{display:block; opacity:1; transform:translateY(0) scale(1)}
.avatar{width:40px; height:40px; border-radius:50%; background:linear-gradient(45deg, var(--primary), var(--accent)); display:grid; place-items:center; color:#fff; font-weight:700; border:2px solid var(--card);}
.menu h4{margin:.4rem 0 .6rem 0}
.menu .row{display:flex; align-items:center; gap:12px; padding:10px; border-radius:12px; cursor:pointer; transition: background var(--fast) ease;}
.menu .row:hover{background:var(--bg-soft)}
.chip{padding:8px 14px; border-radius:16px; background:var(--bg); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); cursor:pointer; font-weight: 500; transition:all var(--fast) ease;}
.chip:hover{transform:translateY(-2px); box-shadow: var(--shadow);}
.chip[aria-selected="true"]{background:var(--accent); color: var(--primary-ink); border-color: transparent;}

/* History hovercard: scoped tweaks so only history menu is affected */
#historyHC .menu{ width: min(90vw, 420px); max-height: 70vh; }
#historyHC .menu #historyList{ max-height: 320px; overflow: auto; -webkit-overflow-scrolling: touch; padding-right: 6px; }
#historyHC .menu .row{ align-items: flex-start; }
#historyHC .menu #historyList .pill{ white-space: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }

/* Subtle scrollbar for history list */
#historyHC .menu #historyList::-webkit-scrollbar{ width: 10px; }
#historyHC .menu #historyList::-webkit-scrollbar-track{ background: var(--bg-soft); border-radius: 10px; }
#historyHC .menu #historyList::-webkit-scrollbar-thumb{ background: color-mix(in srgb, var(--text) 20%, transparent); border-radius: 10px; border: 2px solid var(--bg-soft); }


/* Layout wrappers - Enhanced */
main{max-width:1200px; margin:0 auto; padding:30px 20px 90px}
.surface{
  background:var(--gradient-card); 
  border:1px solid color-mix(in srgb, var(--text) 8%, transparent); 
  border-radius:28px; 
  box-shadow:var(--shadow), inset 0 1px 0 rgba(255,255,255,0.1); 
  overflow:hidden;
  transition: all var(--norm) var(--ease-smooth);
  position: relative;
}

.surface::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  opacity: 0.8;
}

.surface:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-intense), inset 0 1px 0 rgba(255,255,255,0.2);
}

.panel{padding:28px; position: relative;}
.panel h3{
  margin:0 0 15px; font-size:22px; 
  background: var(--gradient-primary); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text;
  font-weight: 700;
}

/* Reading zone */
.workbench{display:grid; grid-template-columns:1fr 1.2fr; gap:24px; margin-top:18px}
textarea.input{width:100%; min-height:250px; resize:vertical; border-radius:18px; padding:18px; background:var(--bg-soft); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); transition: all var(--fast) ease;}
textarea.input:focus{border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring);}
.reading-toolbar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:14px 18px; border-bottom:1px solid color-mix(in srgb, var(--text) 8%, transparent); background:var(--bg-soft)}
.reading-surface{padding:24px; font-size:var(--fs,18px); line-height:var(--lh,1.7); letter-spacing:var(--ls,.2px); max-width:var(--measure,70ch)}
ruby rt{font-size:.75em; color:var(--accent); font-weight: 600;}
.meter-row{display:flex; gap:16px; align-items:center}
.pill{ padding: 6px 12px; background: var(--bg-soft); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--muted); border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); }
.bar > span{display:block; height: 10px; background: linear-gradient(90deg, var(--accent), var(--primary)); border-radius: 5px; transition:width var(--slow) var(--ease-out-back)}
.ruler{position:absolute; left:0; right:0; height:2.4em; pointer-events:none; background:color-mix(in srgb, var(--accent) 25%, transparent); border-top:2px solid var(--accent); border-bottom:2px solid var(--accent); display:none; transition: top 0.1s ease-out; }
.ruler.on{display:block}

/* Reading overlays (gentle page tints) */
.reading-surface.overlay-cream{ background: #fff7e6; }
.reading-surface.overlay-mint{ background: #e9fff5; }
.reading-surface.overlay-peach{ background: #ffefe6; }
.reading-surface.overlay-sky{ background: #eaf4ff; }

 /* Dark theme adjustments for overlays (use subtle tints on dark cards) */
 .theme-dark .reading-surface.overlay-cream{ background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
 .theme-dark .reading-surface.overlay-mint{ background: color-mix(in srgb, var(--accent-2) 10%, var(--card)); }
 .theme-dark .reading-surface.overlay-peach{ background: color-mix(in srgb, var(--danger) 10%, var(--card)); }
 .theme-dark .reading-surface.overlay-sky{ background: color-mix(in srgb, var(--info) 10%, var(--card)); }

/* Syllable coloring (alternating soft accents) */
.syc{ padding: 0 2px; border-radius: 6px; }
.sy1{ background: color-mix(in srgb, var(--accent) 25%, transparent); }
.sy2{ background: color-mix(in srgb, var(--primary) 20%, transparent); }
.sy3{ background: color-mix(in srgb, var(--accent-2) 22%, transparent); }

/* b/d/p/q orientation helpers */
.bdpq{ display: inline-block; padding: 0 3px; border-radius: 6px; font-weight: 800; }
.bdpq.b{ background: color-mix(in srgb, var(--success) 25%, transparent); }
.bdpq.d{ background: color-mix(in srgb, var(--danger) 20%, transparent); }
.bdpq.p{ background: color-mix(in srgb, var(--info) 22%, transparent); }
.bdpq.q{ background: color-mix(in srgb, var(--primary) 22%, transparent); }

/* Focus mode — hide chrome, keep text zen */
.focus-mode header.navbar{ opacity: .25; pointer-events: none; }
.focus-mode #workbench > .surface:first-child{ display:none; }
.focus-mode #secComprehension, .focus-mode #secGames, .focus-mode .report, .focus-mode footer{ display:none; }
.focus-mode .reading-toolbar > *{ display:none; }
.focus-mode .reading-toolbar > #previewLabel,
.focus-mode .reading-toolbar > #btnRead,
.focus-mode .reading-toolbar > #btnPause,
.focus-mode .reading-toolbar > #btnStop,
.focus-mode .reading-toolbar > #btnRuler,
.focus-mode .reading-toolbar > #btnFocus{ display:inline-flex; }

/* QA + Games */
.qa-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:18px}
details{
    background:var(--card);
    border:1px solid color-mix(in srgb, var(--text) 8%, transparent);
    border-radius:18px;
    padding: 18px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
}
details summary{cursor:pointer; font-weight:700; font-size: 22px; color: var(--primary); list-style-type: '🧸'; padding-left: 10px;}
details[open] summary { list-style-type: '📖'; }
details .qa-grid, details .games {padding-top: 15px;}
/* Vocabulary card */
.vocab-card{
  background: var(--bg-soft);
  border: 1px solid color-mix(in srgb, var(--text) 8%, transparent);
  border-radius: 16px;
  padding: 14px 16px;
  margin: 6px 0 14px;
}
.vocab-card h4{margin: 0 0 8px; color: var(--primary); font-size:18px}
.vocab-card ul{margin:0; padding-left: 18px; display:grid; gap:6px}
.vocab-card li{line-height:1.5}
.vocab-card .v-word{color: var(--primary); font-weight:700}
.vocab-card .v-def{color: var(--muted)}
/* Games grid + cards */
.games{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:20px}
.game{
  position:relative; overflow:hidden;
  background:var(--bg-soft);
  border:1px solid transparent;
  border-radius:20px; padding:20px;
  transition:transform var(--norm) var(--ease-in-out), box-shadow var(--norm) var(--ease-in-out)
}
.game:hover{transform:translateY(-5px); box-shadow: var(--shadow);}
.game h3{margin:0 0 10px; font-size:20px; color: var(--primary);}
.game .actions{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:15px}

/* Spelling game: slots & tiles */
#spellSlots{display:flex; flex-wrap: wrap; gap:10px; margin:12px 0}
.slot{display:grid; place-items:center; width:48px; height:56px; padding:0 6px; border-radius:12px;
  border:2px dashed var(--primary); background:var(--bg);
  font-weight:800; font-size: 24px; user-select:none; transition:all var(--fast) var(--ease-in-out)}
.slot.filled{border-style:solid; background:var(--accent); color: var(--primary-ink); transform: scale(1.1);}
#spellTiles{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.tile{padding:12px 16px; border-radius:12px; background:var(--primary); color:var(--primary-ink); border:0; cursor:grab; font-weight: 700;
  box-shadow:0 4px 10px rgba(0,0,0,0.1); transition:all var(--fast) var(--ease-out-back)}
.tile:active{cursor:grabbing; transform: scale(0.95);}
.tile:hover{transform:translateY(-3px); box-shadow:0 6px 14px rgba(0,0,0,0.15);}

/* Reward overlay */
.reward-overlay{position:fixed; inset:0; display:grid; place-items:center; backdrop-filter:saturate(1.2) blur(8px);
  background:color-mix(in srgb, var(--bg-soft) 60%, transparent); opacity:0; transform:scale(.9); visibility: hidden; transition:opacity var(--norm) var(--ease-in-out), transform var(--norm) var(--ease-in-out), visibility var(--norm); z-index:1100}
.reward-overlay.on{opacity:1; transform:scale(1); visibility: visible;}
.reward-card{position:relative; background:var(--card); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); border-radius:24px; padding:28px 32px; box-shadow:var(--shadow); text-align:center; animation:pop-in var(--slow) var(--ease-out-back)}
.reward-card h3{margin:8px 0 10px; color: var(--success); font-size: 26px;}
.big-word{font-size:clamp(32px, 6vw, 52px); font-weight:900; letter-spacing:3px; margin:8px 0 16px; color: var(--primary); text-transform: uppercase;}
.reward-card .btn{margin-top:8px}
.reward-card .stars{position:absolute; top:-15px; left: 50%; transform: translateX(-50%); font-size:32px; opacity:.9; animation:sparkle-anim 1.5s ease-in-out infinite}
@keyframes pop-in{from{transform:translateY(10px) scale(.95); opacity:0} to{transform:translateY(0) scale(1); opacity:1}}
@keyframes sparkle-anim{0%,100%{transform: scale(1) rotate(0deg);} 50%{transform: scale(1.3) rotate(15deg);}}

/* Login View - Enhanced */
.login-wrap{max-width:1200px; margin:0 auto; padding:30px 20px 90px}
.login-grid{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(20px, 4vw, 32px); align-items:center}
.login-card{
  background:var(--gradient-card); 
  border:1px solid color-mix(in srgb, var(--text) 8%, transparent); 
  border-radius:28px; 
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.1); 
  padding:clamp(28px, 5vw, 44px); 
  transition:all var(--slow) var(--ease-bounce);
  position: relative;
  overflow: hidden;
}

.login-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 45deg, transparent, rgba(139, 120, 255, 0.1), transparent);
  animation: rotate-bg 8s linear infinite;
  opacity: 0;
  transition: opacity var(--slow) ease;
}

.login-card:hover::before {
  opacity: 1;
}

.login-card:hover{
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-intense), inset 0 1px 0 rgba(255,255,255,0.2);
}

.login-card h2{
  margin:.2rem 0 15px 0; font-size:clamp(26px, 3.5vw, 34px); 
  background: var(--gradient-primary); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text;
  position: relative;
  z-index: 1;
}

@keyframes rotate-bg {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.login-card .field{
  display:flex; align-items:center; gap:12px; 
  background:var(--gradient-soft); 
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent); 
  border-radius:16px; padding:14px 16px;
  transition: all var(--norm) var(--ease-smooth);
  position: relative;
  z-index: 1;
}

.login-card .field:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--ring), var(--shadow-soft);
  transform: translateY(-2px);
}

.login-card .field span {
  font-size: 18px;
  transition: transform var(--fast) var(--ease-bounce);
}

.login-card .field:focus-within span {
  transform: scale(1.1) rotate(5deg);
}

.login-card input{
  border:0; outline:0; background:transparent; width:100%; 
  transition:all var(--fast) ease;
  font-size: 16px;
}
.login-card input:focus-visible{box-shadow:none}
.top-hero{
  border-radius:32px; 
  background:var(--gradient-soft); 
  border:1px solid color-mix(in srgb, var(--text) 8%, transparent); 
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,0.1); 
  margin:24px 0;
  position: relative;
  overflow: hidden;
}

.top-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(139, 120, 255, 0.1), transparent 70%),
              radial-gradient(circle at 80% 80%, rgba(255, 202, 120, 0.1), transparent 70%);
  opacity: 0.8;
  z-index: 0;
}

.top-hero .wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(20px,4vw,32px); 
  align-items:center; padding:clamp(28px,6vw,54px);
  position: relative;
  z-index: 1;
}
.top-hero h1{
  font-size:clamp(38px, 5.5vw, 64px); line-height:1.15; margin:0 0 12px; 
  letter-spacing:-1px;
  background: var(--gradient-primary); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent; 
  background-clip: text;
  font-weight: 800;
}
.top-hero p{margin:0 0 18px; font-size:clamp(18px, 2.5vw, 24px); color:var(--muted); line-height: 1.5;}
.hero-ctas{display:flex; flex-wrap:wrap; gap:16px; margin-top:20px}
.visual{text-align:center; position: relative;}
.visual img{
  max-width:100%; height:auto; border-radius: 24px; 
  box-shadow: var(--shadow-intense);
  transition: all var(--slow) var(--ease-smooth);
}
.visual img:hover {
  transform: scale(1.05) rotate(1deg);
  box-shadow: var(--shadow-intense), 0 0 50px rgba(139, 120, 255, 0.3);
}
.hero-card{background:var(--card); border:1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius:24px; padding:28px; box-shadow:var(--shadow)}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 16px}
.badge{font-size:14px; padding:8px 14px; border-radius:16px; background:var(--bg-soft); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); font-weight: 500;}


/* Responsive - Enhanced Mobile-First */

/* Touch improvements for mobile */
@media (max-width: 768px) {
  body {
    font-size: 16px;
    line-height: 1.5;
  }
  
  /* Larger touch targets */
  .btn {
    min-height: 48px;
    padding: 14px 20px;
    font-size: 16px;
  }
  
  .toggle, .segmented button {
    min-height: 44px;
    padding: 12px 16px;
  }
  
  /* Stack navigation items */
  .toolbar {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  
  .nav-inner {
    padding: 12px 16px;
    flex-direction: column;
    gap: 12px;
  }
  
  .brand {
    align-self: center;
  }
  
  /* Mobile-optimized layout */
  main {
    padding: 20px 16px 60px;
  }
  
  .workbench {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .surface {
    border-radius: 20px;
  }
  
  .panel {
    padding: 20px;
  }
  
  /* Mobile login improvements */
  .login-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .top-hero .wrap {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
  }
  
  .hero-ctas {
    justify-content: center;
  }
  
  .visual {
    text-align: center;
    margin-top: 20px;
  }
  
  /* Mobile reading interface */
  .reading-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  
  .reading-toolbar > * {
    flex: none;
  }
  
  .slider {
    justify-content: space-between;
  }
  
  /* Mobile mascot */
  .breeze-buddy {
    width: 100px;
    height: 100px;
    bottom: 20px;
    right: 20px;
  }
  
  .buddy-speech {
    right: 20px;
    left: 20px;
    bottom: 140px;
    max-width: none;
  }
  
  /* Mobile games */
  .games {
    grid-template-columns: 1fr;
  }
  
  .qa-grid {
    grid-template-columns: 1fr;
  }
  
  /* Hide some elements on very small screens */
  .meter-row {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  
  .badges {
    justify-content: center;
  }
}

/* Medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
  .workbench {
    grid-template-columns: 1fr 1fr;
  }
  
  .login-grid {
    gap: 20px;
  }
  
  .games {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }
}

/* Large screens */
@media (min-width: 1025px) {
  .workbench {
    grid-template-columns: 1fr 1.3fr;
  }
  
  .games {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
  
  /* Enhanced hover states on desktop */
  .surface:hover {
    transform: translateY(-4px);
  }
}

/* Tablet landscape optimizations */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .top-hero .wrap {
    grid-template-columns: 1fr 1fr;
  }
  
  .login-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .brand .logo {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Dark mode preferences */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .breeze-buddy {
    animation: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .btn {
    border: 2px solid currentColor;
  }
  
  .surface {
    border-width: 2px;
  }
}

/* Print styles */
@media print {
  .navbar,
  .toolbar,
  .breeze-buddy,
  .buddy-speech,
  #globalLoader {
    display: none !important;
  }
  
  .surface {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
}

/* Sparkle accents for games */
.sparkle{pointer-events:none; position:absolute; inset:0; background:
  radial-gradient(8px 8px at 15% 25%, color-mix(in srgb, var(--accent) 50%, transparent), transparent),
  radial-gradient(10px 10px at 75% 55%, color-mix(in srgb, var(--primary) 40%, transparent), transparent),
  radial-gradient(6px 6px at 45% 85%, color-mix(in srgb, var(--accent-2) 55%, transparent), transparent);
  opacity:0; filter:blur(.5px); transition:opacity var(--norm) var(--ease-in-out), transform var(--norm) var(--ease-in-out)
}
.game:hover .sparkle{opacity:.5; transform:scale(1.1) rotate(-5deg);}

/* Global Cute Loader */
#globalLoader{position:fixed; inset:0; display:grid; place-items:center; backdrop-filter:saturate(1.2) blur(8px); background:color-mix(in srgb, var(--bg-soft) 60%, transparent); z-index:1000}
#globalLoader[hidden]{display:none}
#globalLoader .loader-wrap{display:flex; flex-direction: column; gap:14px; align-items: center; background:var(--card); border:1px solid color-mix(in srgb, var(--text) 10%, transparent); padding:20px 24px; border-radius:20px; box-shadow:var(--shadow)}
#globalLoader .loader-mascot{position:relative; width:60px; height:60px; border-radius:18px; background:linear-gradient(45deg, var(--primary), var(--accent)); box-shadow:var(--shadow); animation:floaty 1.8s ease-in-out infinite}
#globalLoader .eye{position:absolute; top:22px; width:12px; height:12px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(0,0,0,0.1) inset; animation: blink 3s infinite ease-in-out;}
#globalLoader .eye:first-child{left:16px}
#globalLoader .eye:last-child{right:16px}
#globalLoader .loader-text{font-weight:700; font-size: 18px;}
@keyframes floaty{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes blink{0%, 90%, 100%{transform: scaleY(1);} 95%{transform: scaleY(0.1);}}

/* Fill-in-the-blank reveal */
.reveal-word{display:inline-block; padding:2px 8px; margin: 0 4px; border-radius:10px; background:color-mix(in srgb, var(--accent) 35%, transparent); transform:scale(.9); opacity:.0;
  box-shadow:0 4px 12px rgba(0,0,0,0.1); transition:all var(--norm) var(--ease-out-back)}
.reveal-word.on{transform:scale(1.05); opacity:1}

/* Quiz hearts pop */
.heartbar{display: flex; gap: 10px; margin-bottom: 15px;}
.heart{width: 30px; height: 30px; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23cccccc" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>'); background-size: contain; background-repeat: no-repeat; transition: all var(--norm) ease-in-out;}
.heart.on{background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e57373" stroke="%23c62828" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>');}
.heart.pop{animation:heart-pop .5s var(--ease-out-back)}
@keyframes heart-pop{0%{transform:scale(1)}50%{transform:scale(1.4) rotate(10deg)}100%{transform:scale(1) rotate(0deg)}}

/* =========================
   Story Mode
   ========================= */
.story-mode-view {
  display: none; /* Hidden by default */
  padding: 30px 0;
}
.story-mode-view.active {
  display: block;
}
.story-book {
  background-color: #f3e9d2;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4c4a2' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  border: 10px solid #8c5e3c;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3), inset 0 0 15px rgba(0,0,0,0.2);
  padding: 40px;
  max-width: 900px;
  margin: auto;
}
.theme-dark .story-book #btnExitStoryMode{
  color: #2b2b2b; /* dark ink for light paper */
  background: rgba(255,255,255,0.8);
  border-color: rgba(0,0,0,0.35);
}
.theme-dark .story-book #btnExitStoryMode:hover{
  background: rgba(255,255,255,0.95);
}
.story-page {
  font-family: 'Georgia', serif;
  font-size: 22px;
  line-height: 1.8;
  color: #4a3f35;
  text-align: justify;
  column-count: 2;
  column-gap: 40px;
  column-rule: 1px solid #d4c4a2;
}
.story-page p {
  margin-bottom: 1.5em;
}
.story-page p:first-of-type::first-letter {
  font-size: 3em;
  float: left;
  line-height: 1;
  margin-right: 0.1em;
  color: #8c5e3c;
  font-weight: bold;
}
.story-mode-active .workbench {
  display: none;
}

/* =========================
   Breeze Buddy Mascot - Enhanced
   ========================= */
.breeze-buddy {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 84px;
  height: 84px;
  z-index: 1000;
  transition: all var(--norm) var(--ease-bounce);
  cursor: pointer;
  background: var(--gradient-primary);
  border-radius: 50%;
  box-shadow: var(--shadow-intense), inset 0 2px 0 rgba(255,255,255,0.3);
  display: grid;
  place-items: center;
  animation: float-buddy 3s ease-in-out infinite;
}

.breeze-buddy:hover {
  transform: scale(1.15) rotate(-8deg);
  box-shadow: var(--shadow-intense), 0 0 30px rgba(139, 120, 255, 0.5);
  animation-play-state: paused;
}

.breeze-buddy::before {
  content: '🤖';
  font-size: 38px;
  animation: buddy-blink 4s ease-in-out infinite;
}

.breeze-buddy::after {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
  border: 3px solid var(--accent);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.8);
  transition: all var(--norm) var(--ease-bounce);
}

.breeze-buddy:hover::after {
  opacity: 1;
  transform: scale(1);
  animation: pulse-ring 1.5s ease-in-out infinite;
}

@keyframes float-buddy {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
}

@keyframes buddy-blink {
  0%, 85%, 100% { transform: scaleY(1); }
  90% { transform: scaleY(0.1); }
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* Mascot speech bubble */
.buddy-speech {
  position: absolute;
  bottom: 160px;
  right: 30px;
  background: var(--gradient-card);
  border: 1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 20px;
  padding: 16px 20px;
  max-width: 250px;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  transform: translateY(20px) scale(0.8);
  transition: all var(--norm) var(--ease-bounce);
  z-index: 999;
}

.buddy-speech.show {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.buddy-speech::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: 20px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--card);
}

/* Buddy Chat overlay (blocks page and blurs background) */
.buddy-chat-overlay{
  position: fixed;
  inset: 0;
  background: color-mix(in srgb, var(--bg-soft) 60%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  z-index: 1090;
  opacity: 0;
  transition: opacity var(--norm) var(--ease-smooth);
}
.buddy-chat-overlay.on{ opacity: 1; }
.buddy-chat-overlay[hidden]{ display:none; }

/* Buddy Chat panel (centered modal) */
.buddy-chat-panel{
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(70vw, 1200px);
  height: min(70vh, 720px);
  background: var(--gradient-card);
  border:1px solid color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 24px;
  box-shadow: var(--shadow-intense);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
  transform: translateY(10px) scale(0.98);
  opacity: 0;
  transition: all var(--norm) var(--ease-bounce);
  z-index: 1100;
}
.buddy-chat-panel.on{ opacity:1; transform: translateY(0) scale(1); }
.buddy-chat-panel[hidden]{ display:none; }

.bcp-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; background: var(--bg-soft); border-bottom:1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.bcp-title{ font-weight: 800; color: var(--primary); }
.bcp-close{ background:transparent; border:0; cursor:pointer; font-size:18px; padding:6px 8px; border-radius:10px; }
.bcp-close:hover{ background: color-mix(in srgb, var(--primary) 10%, transparent); }

.bcp-body{
  padding:16px; overflow:auto; background: var(--card);
}
.bcp-form{
  display:flex; gap:8px; padding:10px; background: var(--bg-soft); border-top:1px solid color-mix(in srgb, var(--text) 10%, transparent);
}
.bcp-input{
  flex:1; border:1px solid color-mix(in srgb, var(--text) 12%, transparent); border-radius:14px; padding:10px 12px; background:var(--bg);
}
.bcp-send{ min-width: 80px; }

.bcp-row{ display:flex; margin:8px 0; }
.bcp-row.me{ justify-content:flex-end; }
.bcp-row.buddy{ justify-content:flex-start; }
.bcp-bubble{ max-width: 80%; padding:10px 14px; border-radius: 16px; box-shadow: var(--shadow-soft); }
.bcp-row.me .bcp-bubble{ background: var(--primary); color: var(--primary-ink); border-top-right-radius: 4px; }
.bcp-row.buddy .bcp-bubble{ background: var(--bg-soft); color: var(--text); border-top-left-radius: 4px; }

/* Markdown styling inside assistant bubbles */
.bcp-bubble pre.bcp-code{ background: #1116; color: var(--primary-ink); padding: 10px 12px; border-radius: 12px; overflow: auto; border:1px solid color-mix(in srgb, var(--text) 12%, transparent); }
.bcp-bubble code{ background: color-mix(in srgb, var(--text) 12%, transparent); padding: 2px 6px; border-radius: 6px; }
.bcp-bubble a{ color: var(--primary); text-decoration: underline; }
.bcp-bubble ul{ margin: 8px 0 8px 18px; padding: 0; }
.bcp-bubble li{ margin: 4px 0; }
.bcp-bubble h1, .bcp-bubble h2, .bcp-bubble h3{ margin: 8px 0 6px; line-height: 1.2; }
.bcp-code-wrap{ position: relative; }
.bcp-code-wrap .copy-btn{
  position: absolute; top: 8px; right: 8px;
  font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--text) 15%, transparent);
  background: var(--bg); cursor: pointer;
}
.bcp-code-wrap .copy-btn:hover{ background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* Typing indicator */
.bcp-typing{ display:inline-flex; align-items:center; gap:8px; }
.bcp-typing-mascot{ display:inline-block; font-size: 18px; }
.bcp-typing-text{ font-weight: 700; color: var(--primary); }
.dot{ display:inline-block; width:8px; height:8px; background: color-mix(in srgb, var(--primary) 40%, transparent); border-radius:50%; animation: bdots 1.2s infinite ease-in-out; }
.dot.d2{ animation-delay: .15s }
.dot.d3{ animation-delay: .3s }
@keyframes bdots { 0%, 80%, 100% { transform: scale(0.6); opacity:.6 } 40% { transform: scale(1); opacity:1 } }

/* Disabled input state */
.bcp-input:disabled{ opacity:.7; cursor:not-allowed; }

@media (max-width: 768px){
  .buddy-chat-panel{ width: min(96vw, 540px); height: min(75vh, 580px); }
}