:root{
  --bg1:#eef2ff; --bg2:#fdf4ff;
  --ink:#1e1b4b; --muted:#6b7280;
  --card:#ffffff; --accent:#4f46e5; --accent2:#a855f7;
  --good:#16a34a; --bad:#dc2626; --warn:#f59e0b;
  --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:"Comic Sans MS","Chalkboard SE","Segoe UI Rounded",system-ui,sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg1),var(--bg2)) fixed;
  min-height:100vh; display:flex; flex-direction:column;
}
#app-header{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 16px; background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  border-bottom:3px solid var(--accent); position:sticky; top:0; z-index:50;
}
.brand{font-size:1.5rem; font-weight:800; color:var(--accent)}
.difficulty-pills{display:flex; gap:8px; margin-inline:auto}
.difficulty-pills button{
  border:2px solid #c7d2fe; background:#fff; border-radius:999px;
  padding:6px 14px; font-size:1rem; cursor:pointer; font-family:inherit;
}
.difficulty-pills button.active{background:var(--accent); color:#fff; border-color:var(--accent)}
.header-right{display:flex; align-items:center; gap:8px}
.xp{font-size:1.1rem; font-weight:700; background:#fef9c3; border:2px solid #fde047;
  border-radius:999px; padding:4px 12px}
#app-header button{cursor:pointer; font-family:inherit}
#sound-toggle,#dashboard-btn{border:2px solid #c7d2fe; background:#fff; border-radius:12px; padding:6px 10px; font-size:1rem}
main#view{flex:1; width:100%; max-width:1100px; margin:0 auto; padding:18px 16px 120px}

/* ---------- Gallery ---------- */
.gallery-hero{text-align:center; margin:8px 0 18px}
.gallery-hero h1{font-size:2rem; margin:.2em 0}
.gallery-hero p{color:var(--muted); font-size:1.1rem; margin:.2em 0}
.game-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px}
.game-card{
  background:var(--card); border-radius:var(--radius); padding:18px;
  border:3px solid #e0e7ff; cursor:pointer; text-align:center;
  transition:transform .12s, border-color .12s, box-shadow .12s;
}
.game-card:hover{transform:translateY(-4px) scale(1.02); border-color:var(--accent); box-shadow:0 10px 24px rgba(79,70,229,.18)}
.game-card .icon{font-size:3rem}
.game-card h2{margin:.4em 0 .2em; font-size:1.25rem}
.game-card p{color:var(--muted); font-size:.95rem; min-height:2.6em}
.game-card .stars{font-size:1.1rem; letter-spacing:2px}
.game-card .skills{font-size:.8rem; color:var(--accent2); margin-top:6px}

/* ---------- Game view ---------- */
.game-top{display:flex; align-items:center; gap:12px; margin-bottom:12px}
.back-btn{border:2px solid #c7d2fe; background:#fff; border-radius:12px; padding:8px 14px; font-size:1rem; cursor:pointer; font-family:inherit}
.game-title{font-size:1.4rem; font-weight:800}
.game-stage{
  position:relative; background:var(--card); border-radius:var(--radius);
  border:3px solid #e0e7ff; min-height:420px; overflow:hidden; padding:16px;
}
.hud{display:flex; gap:18px; align-items:center; margin-bottom:10px; font-size:1.15rem; font-weight:700; flex-wrap:wrap}
.hud .lives{color:var(--bad)}
.progress-track{flex:1; min-width:120px; height:14px; background:#e0e7ff; border-radius:999px; overflow:hidden}
.progress-fill{height:100%; background:linear-gradient(90deg,var(--accent),var(--accent2)); width:0%; transition:width .2s}
.big-word{font-size:2.6rem; font-weight:800; letter-spacing:4px; text-align:center; margin:10px 0}
.big-word .done{color:var(--good)}
.big-word .next{background:#fef08a; border-radius:8px; padding:0 6px; animation:pulse 1s infinite}
.big-word .todo{color:#9ca3af}
@keyframes pulse{50%{transform:scale(1.12)}}
.target-letter{font-size:5rem; font-weight:800; text-align:center; color:var(--accent)}

/* letter pop balloons */
.balloon{
  position:absolute; bottom:-90px; width:74px; height:96px; border-radius:50% 50% 50% 50%/55% 55% 45% 45%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.2rem; font-weight:800; color:#fff; text-shadow:0 2px 4px rgba(0,0,0,.3);
  cursor:default; user-select:none;
}
.balloon::after{content:""; position:absolute; bottom:-14px; left:50%; width:4px; height:16px; background:rgba(0,0,0,.25); transform:translateX(-50%)}

/* gopher */
.hole-grid{display:grid; grid-template-columns:repeat(3,110px); gap:14px; justify-content:center; margin-top:20px}
.hole{width:110px; height:110px; border-radius:50%; background:#78350f radial-gradient(circle at 50% 35%, #a16207, #78350f);
  display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden}
.gopher{font-size:3rem; position:absolute; bottom:-10px; transition:bottom .12s; user-select:none}
.gopher .gletter{position:absolute; top:-6px; right:6px; background:#fff; border-radius:50%; width:34px; height:34px;
  display:flex; align-items:center; justify-content:center; font-size:1.3rem; font-weight:800; color:var(--accent);
  border:2px solid var(--accent)}
.gopher.up{bottom:22px}
.gopher.bonked{transform:rotate(180deg) scale(.7); opacity:.4}

/* frogger pads */
.pads{display:flex; gap:10px; justify-content:center; margin:26px 0; flex-wrap:wrap}
.pad{width:86px; height:86px; border-radius:50%; background:#86efac; border:4px solid #16a34a;
  display:flex; align-items:center; justify-content:center; font-size:2.4rem; font-weight:800; color:#14532d}
.pad.current{outline:5px solid #fde047; transform:scale(1.1)}
.pad.done{background:#bbf7d0}
.frog-row{text-align:center; font-size:4rem; transition:transform .2s}
.frog-row.splash{animation:splash .5s}
@keyframes splash{50%{transform:scale(1.4) rotate(20deg); filter:hue-rotate(180deg)}}

/* bakery */
.order-queue{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:14px 0}
.order{background:#fff7ed; border:3px solid #fdba74; border-radius:14px; padding:10px 14px; min-width:150px; text-align:center}
.order .cword{font-size:1.6rem; font-weight:800; letter-spacing:2px}
.order .cword .done{color:var(--good)}
.order .timerbar{height:8px; background:#fed7aa; border-radius:99px; margin-top:8px; overflow:hidden}
.order .timerbar i{display:block; height:100%; background:var(--warn)}
.order.served{border-color:var(--good); background:#f0fdf4; transform:scale(.95); opacity:.7}

/* race */
.racer-track{margin:18px 0; padding:12px; background:#f1f5f9; border-radius:14px}
.racer-lane{display:flex; align-items:center; gap:8px; margin:10px 0}
.racer-lane .who{font-size:2rem; width:52px; text-align:center}
.racer-lane .trackline{flex:1; height:18px; background:#e2e8f0; border-radius:99px; position:relative; overflow:hidden}
.racer-lane .runner{position:absolute; top:50%; transform:translateY(-50%); font-size:1.6rem; transition:left .25s}

/* story */
.story-box{background:#fffbeb; border:3px dashed #fbbf24; border-radius:14px; padding:18px; font-size:1.35rem; line-height:2.1; max-width:640px; margin:0 auto}
.blank{display:inline-block; min-width:90px; border-bottom:3px solid var(--accent); text-align:center; font-weight:800; color:var(--accent); padding:0 8px}
.blank.filled{color:var(--good); border-color:var(--good)}
.word-bank{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:14px 0}
.word-bank button{font-size:1.2rem; padding:8px 16px; border-radius:12px; border:2px solid var(--accent); background:#fff; cursor:pointer; font-family:inherit; font-weight:700}
.word-bank button:disabled{opacity:.3}

/* maze */
.maze{display:grid; gap:0; justify-content:center; margin:10px auto}
.maze .cell{width:44px; height:44px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; font-weight:800}
.maze .wall{background:#312e81}
.maze .floor{background:#eef2ff}
.maze .player{background:#c7d2fe}
.maze .coin{background:#fef9c3}
.maze .door{background:#fde047}

/* note keys */
.piano-strip{display:flex; justify-content:center; margin:16px 0}
.pkey{width:56px; height:120px; border:2px solid #333; border-radius:0 0 8px 8px; background:#fff; margin:0 2px;
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:8px; font-weight:800; font-size:1.1rem}
.pkey.lit{background:#fef08a; transform:translateY(4px)}

/* home row lessons */
.lesson-list{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin:12px 0}
.lesson-list button{border:2px solid #c7d2fe; background:#fff; border-radius:12px; padding:10px 16px; font-size:1.05rem; cursor:pointer; font-family:inherit; font-weight:700}
.lesson-list button.locked{opacity:.4; cursor:not-allowed}
.lesson-list button.active{background:var(--accent); color:#fff}
.type-line{font-size:2rem; letter-spacing:6px; text-align:center; margin:18px 0; font-weight:700}
.type-line .done{color:var(--good)}
.type-line .next{background:#fef08a; border-radius:6px}

/* ---------- On-screen keyboard ---------- */
#osk-wrap{position:fixed; left:0; right:0; bottom:0; display:flex; justify-content:center; padding:8px 8px 12px;
  background:rgba(255,255,255,.92); border-top:3px solid var(--accent); z-index:60}
.osk{display:flex; flex-direction:column; gap:5px; align-items:center}
.osk-row{display:flex; gap:5px}
.osk-key{min-width:44px; height:52px; padding:0 10px; border-radius:10px; border:2px solid #c7d2fe; background:#fff;
  font-size:1.15rem; font-weight:800; font-family:inherit; display:flex; align-items:center; justify-content:center; color:var(--ink)}
.osk-key.space{min-width:280px}
.osk-key.lit{background:#fef08a; border-color:var(--warn); transform:scale(1.15); box-shadow:0 4px 10px rgba(245,158,11,.5)}
.osk-key.hit{background:#bbf7d0; border-color:var(--good)}
.osk-key.miss{background:#fecaca; border-color:var(--bad)}
.osk-key.f0{background:#fecaca}.osk-key.f1{background:#fed7aa}.osk-key.f2{background:#fef08a}
.osk-key.f3{background:#bbf7d0}.osk-key.f4{background:#bfdbfe}.osk-key.f5{background:#e9d5ff}
.osk-key.f6{background:#fbcfe8}.osk-key.f7{background:#fecaca}

/* ---------- Toast & overlay ---------- */
#toast-wrap{position:fixed; top:70px; left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:8px; z-index:100; pointer-events:none}
.toast{background:#1e1b4b; color:#fff; padding:10px 20px; border-radius:999px; font-size:1.1rem; font-weight:700; animation:toastin .25s}
@keyframes toastin{from{transform:translateY(-12px); opacity:0}}
#overlay-root:empty{display:none}
.overlay{position:fixed; inset:0; background:rgba(30,27,75,.55); display:flex; align-items:center; justify-content:center; z-index:200; padding:16px}
.overlay-card{background:#fff; border-radius:24px; padding:32px; text-align:center; max-width:440px; width:100%; border:4px solid var(--accent); animation:pop .3s}
@keyframes pop{from{transform:scale(.85); opacity:0}}
.overlay-card h2{font-size:1.8rem; margin:.2em 0}
.overlay-card .bigstars{font-size:3rem; letter-spacing:6px}
.overlay-card .statline{font-size:1.15rem; margin:6px 0}
.overlay-card .btnrow{display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap}
.btn{border:3px solid var(--accent); background:var(--accent); color:#fff; border-radius:14px; padding:12px 22px; font-size:1.15rem; cursor:pointer; font-family:inherit; font-weight:800}
.btn.ghost{background:#fff; color:var(--accent)}

/* dashboard */
.dash-table{width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; margin-top:12px}
.dash-table th,.dash-table td{padding:10px 12px; text-align:left; border-bottom:1px solid #e5e7eb}
.dash-table th{background:#eef2ff}
.name-row{display:flex; gap:10px; align-items:center; margin:10px 0; flex-wrap:wrap}
.name-row input{font-size:1.1rem; padding:8px 12px; border-radius:10px; border:2px solid #c7d2fe; font-family:inherit}
.hint{color:var(--muted); font-size:.95rem}
.kbd-hint{text-align:center; color:var(--muted); margin-top:8px}
@media (max-width:640px){
  .big-word{font-size:1.9rem}
  .osk-key{min-width:32px; height:46px; font-size:1rem}
  .osk-key.space{min-width:170px}
  .hole-grid{grid-template-columns:repeat(3,92px)}
  .hole{width:92px; height:92px}
}