/* style.css, one stylesheet for every page.
   Big targets, big letters, high contrast: this is used by children on tablets.

   Colours are all tokens so the page works in three viewer states: no stamp
   (system preference decides), data-theme="light", and data-theme="dark". */

:root{
  /* light, a warm, paper-like ground biased towards the orange accent */
  --bg:#fff8ef; --card:#ffffff; --sunken:#f1ece4;
  --ink:#2d2a3e; --muted:#6b6678; --line:#ece5da;
  --accent:#c9550c; --accent-ink:#ffffff; --accent-soft:#ffe9d6; --accent-deep:#a8490c;
  --hard:#ece3d6; --hard-accent:#93400a;
  --ne:#dc143c; --hi:#e07800;
  --good:#18a558; --good-soft:#dff5e8; --good-ink:#0d7a41;
  --bad:#d13438;  --bad-soft:#fde8e8;  --bad-ink:#b3272b;
  --hero-a:#fff2e0; --hero-b:#ffe6ec; --hero-line:#ffd9c2;
  --note-bg:#eef6ff; --note-line:#d3e6fb; --note-rail:#3d7fd6;
  --warm-bg:#fff6e5; --warm-line:#ffe1ab; --warm-rail:#b57500;
  --ne-bg:#fff3f4; --ne-line:#ffd3d8; --hi-bg:#fff7ec; --hi-line:#ffe2bd;
  --tray-bg:#fffdf9;
  --shadow:0 2px 0 #e8dfd2, 0 8px 24px rgba(80,60,30,.10);
  --radius:20px;
  --deva:'Noto Sans Devanagari','Kohinoor Devanagari','Devanagari Sangam MN','Nirmala UI','Mangal',sans-serif;
  --ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color-scheme:light;
}
/* dark for the viewer's system setting, an explicit light choice still wins */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#1c1815; --card:#272120; --sunken:#332b28;
    --ink:#f6ece1; --muted:#b3a496; --line:#3d3430;
    --accent:#ff9448; --accent-ink:#2a1608; --accent-soft:#4a2e19; --accent-deep:#ffb884;
    --hard:#171310; --hard-accent:#8a4415;
    --ne:#ff6b7f; --hi:#ffb04d;
    --good:#4ec97f; --good-soft:#16351f; --good-ink:#7ee0a3;
    --bad:#ff7d80;  --bad-soft:#3d1d1e;  --bad-ink:#ffa9ab;
    --hero-a:#33231a; --hero-b:#331d23; --hero-line:#4d332a;
    --note-bg:#1b2735; --note-line:#2c3f56; --note-rail:#5f9be0;
    --warm-bg:#332816; --warm-line:#4d3d1f; --warm-rail:#e0a63d;
    --ne-bg:#332023; --ne-line:#4d2d33; --hi-bg:#33281a; --hi-line:#4d3a22;
    --tray-bg:#211c1a;
    --shadow:0 2px 0 #120f0d, 0 8px 24px rgba(0,0,0,.45);
    color-scheme:dark;
  }
}
/* dark chosen explicitly, beats a light OS */
:root[data-theme="dark"]{
  --bg:#1c1815; --card:#272120; --sunken:#332b28;
  --ink:#f6ece1; --muted:#b3a496; --line:#3d3430;
  --accent:#ff9448; --accent-ink:#2a1608; --accent-soft:#4a2e19; --accent-deep:#ffb884;
  --hard:#171310; --hard-accent:#8a4415;
  --ne:#ff6b7f; --hi:#ffb04d;
  --good:#4ec97f; --good-soft:#16351f; --good-ink:#7ee0a3;
  --bad:#ff7d80;  --bad-soft:#3d1d1e;  --bad-ink:#ffa9ab;
  --hero-a:#33231a; --hero-b:#331d23; --hero-line:#4d332a;
  --note-bg:#1b2735; --note-line:#2c3f56; --note-rail:#5f9be0;
  --warm-bg:#332816; --warm-line:#4d3d1f; --warm-rail:#e0a63d;
  --ne-bg:#332023; --ne-line:#4d2d33; --hi-bg:#33281a; --hi-line:#4d3a22;
  --tray-bg:#211c1a;
  --shadow:0 2px 0 #120f0d, 0 8px 24px rgba(0,0,0,.45);
  color-scheme:dark;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); min-height:100vh;
  font-family:var(--ui); font-size:16px; line-height:1.55; -webkit-text-size-adjust:100%;
}
.deva{font-family:var(--deva); font-weight:600}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}
a{color:var(--accent)}

/* ------------------------------------------------------------------ chrome */
.site-header{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:12px 20px; background:var(--card); border-bottom:2px solid var(--line);
  position:sticky; top:0; z-index:50;
}
.brand{display:flex; align-items:center; gap:9px; font-weight:800; font-size:19px; text-decoration:none; color:var(--ink)}
.brand .logo{font-size:24px}
.nav-links{display:flex; gap:4px; flex-wrap:wrap; margin-left:auto}
.nav-links a{
  padding:8px 14px; border-radius:999px; text-decoration:none; color:var(--muted);
  font-weight:600; font-size:15px; white-space:nowrap;
}
.nav-links a:hover{background:var(--accent-soft); color:var(--accent-deep)}
.nav-links a.active{background:var(--accent); color:var(--accent-ink)}

.lang-switch{display:flex; background:var(--sunken); border-radius:999px; padding:3px; gap:2px}
.lang-switch button{
  border:0; background:none; cursor:pointer; font:inherit; font-weight:700; font-size:14px;
  padding:7px 14px; border-radius:999px; color:var(--muted); display:flex; align-items:center; gap:6px;
}
.lang-switch button[aria-pressed="true"]{
  background:var(--card); color:var(--ink); box-shadow:inset 0 0 0 2px var(--tint,var(--accent));
}

main{max-width:1080px; margin:0 auto; padding:24px 20px 80px}
.section{margin-top:40px}
h1{font-size:clamp(28px,5vw,42px); line-height:1.15; margin:0 0 12px; text-wrap:balance}
h2{font-size:26px; margin:0 0 6px; text-wrap:balance}
h3{margin:0 0 6px; font-size:18px; text-wrap:balance}
.sub{color:var(--muted); margin:0 0 20px}
.tiny{font-size:13px; color:var(--muted)}

/* ------------------------------------------------------------------ pieces */
.btn{
  font:inherit; font-weight:700; font-size:16px; cursor:pointer;
  border:0; border-radius:14px; padding:13px 22px; background:var(--accent); color:var(--accent-ink);
  box-shadow:0 3px 0 var(--hard-accent); transition:transform .06s, box-shadow .06s;
}
.btn:active{transform:translateY(3px); box-shadow:0 0 0 var(--hard-accent)}
.btn-outline{background:var(--card); color:var(--ink); box-shadow:0 3px 0 var(--line); border:2px solid var(--line)}
.btn-outline:active{transform:translateY(3px); box-shadow:0 0 0 var(--line)}
.btn-ghost{background:none; color:var(--muted); box-shadow:none; padding:8px 12px}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none}

.card{
  background:var(--card); border:2px solid var(--line); border-radius:var(--radius);
  padding:20px; box-shadow:var(--shadow);
}
.grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.row{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

.pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent-deep); font-weight:700; font-size:13px;
}
.pill.ok{background:var(--good-soft); color:var(--good-ink)}
.pill.no{background:var(--bad-soft); color:var(--bad-ink)}

/* ------------------------------------------------------------------- hero */
.hero{
  display:grid; grid-template-columns:1fr auto; gap:24px; align-items:center;
  background:linear-gradient(135deg,var(--hero-a),var(--hero-b)); border:2px solid var(--hero-line);
  border-radius:28px; padding:32px;
}
.hero-emoji{font-size:96px; line-height:1}
@media(max-width:640px){ .hero{grid-template-columns:1fr} .hero-emoji{font-size:64px} }

/* --------------------------------------------------------------- progress */
.xpbar{height:12px; background:var(--sunken); border-radius:999px; overflow:hidden; margin-top:8px}
.xpbar > i{display:block; height:100%; background:linear-gradient(90deg,var(--hi),var(--accent)); border-radius:999px; transition:width .4s}
.stat{display:flex; flex-direction:column; gap:2px; min-width:96px}
.stat b{font-size:28px; line-height:1.1; font-variant-numeric:tabular-nums}
.stat span{font-size:13px; color:var(--muted)}

/* ------------------------------------------------------------ letter grid */
.letters{display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.tile{
  position:relative; cursor:pointer; border:2px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:18px; padding:14px 8px 10px; text-align:center; font:inherit;
  box-shadow:0 2px 0 var(--hard); transition:transform .08s, border-color .12s;
}
.tile:hover{border-color:var(--accent); transform:translateY(-2px)}
.tile:active{transform:translateY(1px); box-shadow:none}
.tile .ch{font-family:var(--deva); font-size:44px; line-height:1.15; font-weight:600; display:block}
.tile .tr{font-size:13px; color:var(--muted); font-weight:700}
.tile.on{border-color:var(--accent); background:var(--accent-soft)}
.tile .dot{position:absolute; top:7px; right:9px; font-size:12px}
.tile.speaking{animation:pulse .5s ease}
@keyframes pulse{50%{transform:scale(1.09)}}

.group-head{display:flex; align-items:baseline; gap:10px; margin:26px 0 10px; flex-wrap:wrap}
.group-head .bar{width:8px; height:22px; border-radius:4px; display:inline-block}
.group-head h3{margin:0}
.group-head .native{font-family:var(--deva); color:var(--muted); font-weight:600}

/* ------------------------------------------------------------ detail card */
.detail{display:grid; grid-template-columns:auto 1fr; gap:24px; align-items:center}
.detail .big{font-family:var(--deva); font-size:110px; line-height:1; font-weight:600; text-align:center}
.detail .ex{display:flex; align-items:center; gap:14px; margin-top:14px; padding-top:14px; border-top:2px dashed var(--line)}
.detail .ex .j{font-size:44px}
@media(max-width:560px){ .detail{grid-template-columns:1fr} .detail .big{font-size:88px} }

/* ------------------------------------------------------------------- tabs */
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px}
.tabs button{
  font:inherit; font-weight:700; cursor:pointer; border:2px solid var(--line); background:var(--card);
  border-radius:999px; padding:9px 18px; color:var(--muted);
}
.tabs button[aria-selected="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}

/* ------------------------------------------------------------- word cards */
.wordcard{display:flex; align-items:center; gap:14px; cursor:pointer; text-align:left; width:100%; color:var(--ink)}
.wordcard .j{font-size:40px; flex:none}
.wordcard .w{font-family:var(--deva); font-size:26px; font-weight:600; line-height:1.3}
.wordcard .t{font-size:13px; color:var(--muted); font-weight:600}
.wordcard .e{font-size:14px}

/* --------------------------------------------------------- sentence cards */
.sent{padding:18px 20px}
.sent .s{font-family:var(--deva); font-size:28px; font-weight:600; line-height:1.6}
.sent .t{color:var(--muted); font-size:14px; font-weight:600; margin-top:2px}
.sent .e{margin-top:6px}
.note{
  background:var(--note-bg); border:2px solid var(--note-line); border-left:6px solid var(--note-rail);
  border-radius:14px; padding:14px 16px; margin:14px 0; font-size:15px;
}
.note.warm{background:var(--warm-bg); border-color:var(--warm-line); border-left-color:var(--warm-rail)}
.compare{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px}
@media(max-width:640px){ .compare{grid-template-columns:1fr} }
.compare > div{border-radius:14px; padding:14px; border:2px solid var(--line)}
.compare .lang-side{background:var(--sunken); border-color:var(--line); border-top:4px solid var(--tint,var(--accent))}
.side-tag{font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)}

/* --------------------------------------------------------------- practice */
.quiz{max-width:660px; margin:0 auto}
.quiz .prompt{text-align:center; padding:30px 20px}
.quiz .prompt .big{font-family:var(--deva); font-size:96px; line-height:1.1; font-weight:600}
.quiz .prompt .j{font-size:88px; line-height:1.1}
.choices{display:grid; gap:12px; grid-template-columns:1fr 1fr; margin-top:20px}
@media(max-width:520px){ .choices{grid-template-columns:1fr} }
.choice{
  font:inherit; cursor:pointer; border:3px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:16px; padding:18px 14px; text-align:center; font-weight:700;
  box-shadow:0 3px 0 var(--hard); transition:transform .08s;
}
.choice:hover:not(:disabled){border-color:var(--accent)}
.choice:active:not(:disabled){transform:translateY(2px)}
.choice .deva{font-size:32px; display:block}
.choice.right{border-color:var(--good); background:var(--good-soft)}
.choice.wrong{border-color:var(--bad); background:var(--bad-soft)}
.choice:disabled{cursor:default}

.progressdots{display:flex; gap:6px; justify-content:center; margin-bottom:18px; flex-wrap:wrap}
.progressdots i{width:11px; height:11px; border-radius:50%; background:var(--sunken); display:block}
.progressdots i.ok{background:var(--good)} .progressdots i.no{background:var(--bad)}
.progressdots i.now{background:var(--accent); transform:scale(1.35)}

.tray{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; min-height:64px;
      padding:12px; border:3px dashed var(--line); border-radius:16px; background:var(--tray-bg)}
.chip{
  font:inherit; font-family:var(--deva); font-size:26px; font-weight:600; cursor:pointer;
  border:2px solid var(--line); background:var(--card); color:var(--ink);
  border-radius:12px; padding:8px 14px; box-shadow:0 2px 0 var(--hard);
}
.chip:active{transform:translateY(2px); box-shadow:none}
.tray.right{border-color:var(--good); border-style:solid; background:var(--good-soft)}
.tray.wrong{border-color:var(--bad); border-style:solid; background:var(--bad-soft)}
.tray .chip.sm{font-size:20px; padding:6px 10px}

/* ---------------------------------------------------------------- history */
.timeline{position:relative; padding-left:36px}
.timeline::before{content:''; position:absolute; left:13px; top:8px; bottom:8px; width:4px;
                  background:linear-gradient(var(--hero-line),var(--accent)); border-radius:4px}
.timeline .step{position:relative; margin-bottom:22px}
.timeline .step::before{content:attr(data-emoji); position:absolute; left:-36px; top:-2px;
  width:30px; height:30px; border-radius:50%; background:var(--card); border:3px solid var(--accent);
  display:grid; place-items:center; font-size:15px}
.timeline .when{font-size:13px; font-weight:800; color:var(--accent-deep); letter-spacing:.03em}

/* --------------------------------------------------------------- feedback */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(120%);
  background:var(--ink); color:var(--bg); padding:13px 22px; border-radius:999px; font-weight:700;
  box-shadow:0 10px 30px rgba(0,0,0,.25); transition:transform .25s; z-index:100; pointer-events:none;
}
.toast.show{transform:translateX(-50%) translateY(0)}
.voice-note{margin-top:10px}

.empty{text-align:center; padding:50px 20px; color:var(--muted)}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; animation:none!important} }

/* --------------------------------------------------------------- write pad */
.pad-wrap{
  position:relative; margin:0 auto; border:3px dashed var(--line); border-radius:20px;
  background:var(--tray-bg); touch-action:none; overflow:hidden;
}
.pad-rule{                                  /* the shirorekha to hang letters from */
  position:absolute; left:8%; right:8%; top:24%; height:4px;
  background:var(--accent); opacity:.28; border-radius:2px;
}
.pad-guide{
  position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  color:var(--ink); opacity:.16; transition:opacity .2s; line-height:1;
}
.pad-guide.off{opacity:0}
#pad{position:relative; z-index:1; display:block; touch-action:none; cursor:crosshair}

/* ------------------------------------------------------------ voice picker */
.voice-pick{display:flex; flex-direction:column; gap:4px; font-weight:700}
.voice-pick select{
  font:inherit; font-size:13px; font-weight:600; padding:6px 8px; border-radius:10px;
  border:2px solid var(--line); background:var(--card); color:var(--ink); max-width:240px;
}

/* ---------------------------------------------------------- record studio */
.rec-row{padding:12px 16px}
.rec-btn.recording{background:var(--bad); color:#fff; box-shadow:0 3px 0 var(--bad-ink); animation:rec 1s infinite}
@keyframes rec{50%{opacity:.6}}
.mic-dot{color:var(--good-ink); font-weight:800}