/* =====================================================================
   Tілашар — design system
   Structure ported from the Bayan Sulu Kids app (Duolingo-grade game UI):
   Nunito 700–900, 3D press buttons, hard-offset shadows, chunky cards,
   badge answers. Colours are Tілашар's own: Kazakh sky-blue + gold.
   ===================================================================== */

:root{
  /* brand */
  --brand:#00A6D6;  --brand-dk:#0083AB;  --brand-lt:#E1F5FC;  --brand-xl:#B9E7F7;
  /* semantic */
  --green:#2BC77E;  --green-dk:#1CA364;  --green-lt:#E4F9F0;
  --red:#FF5A5F;    --red-dk:#DB3F45;    --red-lt:#FFECED;
  --gold:#FFC53D;   --gold-dk:#DFA11C;   --gold-lt:#FFF4D8;
  --violet:#7C6BF2; --violet-dk:#6152D6; --violet-lt:#EDEBFE;
  --flame:#FF7A1A;  --flame-dk:#D95F09;

  /* neutrals */
  --ink:#2A2F3A;    --slate:#67707F;  --mist:#A6AEBC;
  --cloud:#E3E7EE;  --fog:#F6F8FB;    --panel:#FFFFFF;  --page:#EDF1F6;

  --lock:#C3CAD6;
  --shadow-soft:0 10px 30px rgba(22,40,66,.10);
  --shadow-hard:0 4px 0 var(--cloud);
  --radius:18px;
  --frame:480px;
}

:root[data-theme="dark"]{
  --brand-lt:#0C3543;  --brand-xl:#12495C;
  --green-lt:#10382A;  --red-lt:#40221F;  --gold-lt:#3D2F10;  --violet-lt:#251F47;
  --ink:#F1F5FA;  --slate:#A3AEBE;  --mist:#737E8F;
  --cloud:#2D3543; --fog:#1B212B;   --panel:#232B36;  --page:#141A22;
  --lock:#49525F;
  --shadow-soft:0 14px 34px rgba(0,0,0,.45);
  --shadow-hard:0 4px 0 rgba(0,0,0,.35);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --brand-lt:#0C3543;  --brand-xl:#12495C;
    --green-lt:#10382A;  --red-lt:#40221F;  --gold-lt:#3D2F10;  --violet-lt:#251F47;
    --ink:#F1F5FA;  --slate:#A3AEBE;  --mist:#737E8F;
    --cloud:#2D3543; --fog:#1B212B;   --panel:#232B36;  --page:#141A22;
    --lock:#49525F;
    --shadow-soft:0 14px 34px rgba(0,0,0,.45);
    --shadow-hard:0 4px 0 rgba(0,0,0,.35);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--page); color:var(--ink);
  font-family:Nunito,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-weight:700; -webkit-font-smoothing:antialiased; line-height:1.45;
}
img{max-width:100%}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
a{color:var(--brand);text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:-.02em;line-height:1.15}
p{margin:0}
.hidden{display:none!important}
[hidden]{display:none!important}
.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}

/* ── BUTTONS — 3D press (Bayan Sulu / Duolingo) ─────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border-radius:16px;font-weight:900;font-size:1rem;letter-spacing:.02em;
  padding:15px 28px;width:100%;text-align:center;color:#fff;
  background:var(--brand); border-bottom:4px solid var(--brand-dk);
  transition:transform .08s, border-bottom-width .08s, filter .15s;
}
.btn:hover{filter:brightness(1.04)}
.btn:active:not(:disabled){transform:translateY(4px);border-bottom-width:0}
.btn:disabled{background:var(--cloud);border-bottom-color:var(--cloud);color:var(--mist);cursor:default}
.btn--green{background:var(--green);border-bottom-color:var(--green-dk)}
.btn--gold{background:var(--gold);border-bottom-color:var(--gold-dk);color:#5C4200}
.btn--red{background:var(--red);border-bottom-color:var(--red-dk)}
.btn--violet{background:var(--violet);border-bottom-color:var(--violet-dk)}
.btn--ghost{
  background:transparent;color:var(--slate);
  border:2.5px solid var(--cloud);border-bottom-width:2.5px;
}
.btn--ghost:hover{background:var(--fog);filter:none}
.btn--ghost:active:not(:disabled){transform:translateY(2px);border-bottom-width:2.5px}
.btn--sm{padding:11px 18px;font-size:.88rem;border-radius:13px;width:auto}
.btn--wide{width:100%}
.btn--upper{text-transform:uppercase;letter-spacing:.06em}

/* ── CARDS ──────────────────────────────────────────────────────── */
.card{background:var(--panel);border:2px solid var(--cloud);border-radius:var(--radius);padding:20px}
.card--raised{box-shadow:var(--shadow-hard)}
.card--soft{border:none;box-shadow:var(--shadow-soft)}

/* ── ANSWER BUTTONS ─────────────────────────────────────────────── */
.answer{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:var(--panel);color:var(--ink);
  border:2.5px solid var(--cloud);border-bottom:5px solid var(--cloud);
  border-radius:15px;padding:15px 16px;min-height:60px;
  font-weight:800;font-size:1rem;
  transition:transform .08s,border-bottom-width .08s,background .12s;
}
.answer:active:not(:disabled){transform:translateY(3px);border-bottom-width:2px}
.answer:disabled{cursor:default}
.answer.is-picked{border-color:var(--brand);border-bottom-color:var(--brand-dk);background:var(--brand-lt)}
.answer.is-right{background:var(--green-lt);border-color:var(--green);border-bottom-color:var(--green-dk);color:var(--green-dk)}
.answer.is-wrong{background:var(--red-lt);border-color:var(--red);border-bottom-color:var(--red-dk);color:var(--red-dk)}
.answer.is-dim{opacity:.35}
.answer__badge{
  width:30px;height:30px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:.78rem;
  background:var(--fog);color:var(--slate);border:2px solid var(--cloud);
}
.answer.is-picked .answer__badge{background:var(--brand);color:#fff;border-color:var(--brand-dk)}
.answer.is-right  .answer__badge{background:var(--green);color:#fff;border-color:var(--green-dk)}
.answer.is-wrong  .answer__badge{background:var(--red);color:#fff;border-color:var(--red-dk)}
.answer__text{flex:1}

/* ── PROGRESS BAR ───────────────────────────────────────────────── */
.track{background:var(--cloud);border-radius:99px;height:14px;overflow:hidden;position:relative}
.track__fill{
  height:100%;background:var(--green);border-radius:99px;position:relative;
  transition:width .5s cubic-bezier(.34,1.56,.64,1);
}
.track__fill::after{
  content:'';position:absolute;top:3px;left:6px;right:6px;height:4px;
  background:rgba(255,255,255,.45);border-radius:99px;
}

/* ── CHIPS / BADGES ─────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--panel);border:2px solid var(--cloud);border-bottom-width:3px;
  border-radius:99px;padding:6px 13px;font-weight:900;font-size:.92rem;
}
.chip--flame{color:var(--flame)}
.chip--gem{color:var(--brand)}
.chip--gold{background:var(--gold);border-color:var(--gold-dk);color:#5C4200}
.pill{
  display:inline-flex;align-items:center;gap:6px;border-radius:99px;
  padding:5px 12px;font-size:.76rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase;
}
.pill--brand{background:var(--brand-lt);color:var(--brand-dk)}
.pill--green{background:var(--green-lt);color:var(--green-dk)}
.pill--gold{background:var(--gold-lt);color:var(--gold-dk)}

/* ── FORM FIELDS ────────────────────────────────────────────────── */
.field{display:block;margin-bottom:14px}
.field__label{display:block;font-size:.78rem;font-weight:900;letter-spacing:.06em;
  text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.field__input{
  width:100%;font-family:inherit;font-size:1rem;font-weight:700;color:var(--ink);
  background:var(--panel);border:2.5px solid var(--cloud);border-radius:14px;
  padding:14px 15px;outline:none;transition:border-color .15s;
}
.field__input::placeholder{color:var(--mist);font-weight:700}
.field__input:focus{border-color:var(--brand)}
.field.is-bad .field__input{border-color:var(--red)}
.field__error{display:none;margin-top:6px;font-size:.82rem;font-weight:800;color:var(--red-dk)}
.field.is-bad .field__error{display:block}

/* ── ICON BUTTON ────────────────────────────────────────────────── */
.iconbtn{
  width:40px;height:40px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
  background:var(--panel);border:2px solid var(--cloud);border-bottom-width:3px;
  transition:transform .08s;
}
.iconbtn:active{transform:translateY(2px);border-bottom-width:2px}

/* ── LANGUAGE TOGGLE ────────────────────────────────────────────── */
.langtog{display:inline-flex;background:var(--panel);border:2px solid var(--cloud);
  border-bottom-width:3px;border-radius:99px;padding:3px}
.langtog button{padding:6px 12px;border-radius:99px;font-weight:900;font-size:.8rem;color:var(--slate)}
.langtog button.on{background:var(--brand);color:#fff}

/* ── ANIMATIONS ─────────────────────────────────────────────────── */
.a-pop{animation:popIn .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes popIn{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}
.a-up{animation:fadeUp .3s ease-out both}
@keyframes fadeUp{from{transform:translateY(16px);opacity:0}to{transform:translateY(0);opacity:1}}
.a-shake{animation:shake .45s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translateX(-3px)}20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
.a-float{animation:float 3.4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.a-bob{animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.a-pulse{animation:pulseSoft 2.5s ease-in-out infinite}
@keyframes pulseSoft{0%,100%{box-shadow:0 0 0 0 rgba(0,166,214,.35)}50%{box-shadow:0 0 0 12px rgba(0,166,214,0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}