/* ============================================================
   LingoThai — base.css
   Design tokens, reset, themes (kid/adult × light/dark), shell
   ============================================================ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}

:root{
  /* brand */
  --brand-1:#FF7A45;
  --brand-2:#FF4D7D;
  --brand-grad:linear-gradient(135deg,var(--brand-1),var(--brand-2));

  /* semantic */
  --ok:#16A34A;   --ok-bg:#E9FBEF;  --ok-line:#A7E9BD;  --ok-deep:#12803B;
  --bad:#E23D3D;  --bad-bg:#FEEEEC; --bad-line:#F7C6C1; --bad-deep:#B21F1F;
  --warn:#F59E0B; --warn-bg:#FFF7E4;
  --info:#4D6BFF; --info-bg:#EEF2FF; --info-deep:#3348C8;
  --gold:#F0A500;

  /* level accents */
  --lv-kg:#F59E0B; --lv-elem:#0EA5E9; --lv-teen:#8B5CF6; --lv-adult:#0D9488;

  /* surface (light) */
  --ink:#252E4D; --ink-2:#5C678F; --ink-3:#8D96B5;
  --page:#FFF9F1;
  --card:#FFFFFF;
  --sunk:#FBF6EE;
  --line:#EFE5D8;
  --line-2:#E3D7C6;

  /* geometry */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-xl:30px; --r-pill:999px;
  --sh-1:0 4px 14px rgba(37,46,77,.07);
  --sh-2:0 10px 30px rgba(37,46,77,.10);
  --sh-3:0 20px 52px rgba(37,46,77,.16);
  --sh-btn:0 5px 0;

  /* motion */
  --sp:cubic-bezier(.34,1.56,.64,1);
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.16s; --t:.28s; --t-slow:.5s;

  /* type */
  /* Google fonts first; the rest of the stack keeps Thai readable offline
     (Leelawadee UI on Windows, Noto Sans Thai on Android/Linux, Thonburi on iOS) */
  --f-head:'Mitr','Prompt','Leelawadee UI','Noto Sans Thai','Sarabun',Thonburi,'Segoe UI',sans-serif;
  --f-body:'Prompt','Leelawadee UI','Noto Sans Thai','Sarabun',Thonburi,'Segoe UI',sans-serif;
  --fs-hero:1.9rem; --fs-h1:1.4rem; --fs-h2:1.15rem; --fs-h3:1rem;
  --fs-body:.94rem; --fs-sm:.82rem; --fs-xs:.72rem;

  /* layout */
  --shell:660px;
  --pad:18px;
  --appbar-h:60px;
  --tabbar-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);

  /* playfulness knobs — overridden by adult mode */
  --bounce:1;
  --blob-op:.45;
  --card-r:var(--r-lg);
}

/* ---------- ADULT MODE: calmer, tighter, less bounce ---------- */
[data-mode="adult"]{
  --brand-1:#0F766E;
  --brand-2:#0EA5E9;
  --page:#F7F9FC;
  --sunk:#F1F5F9;
  --line:#E2E8F0;
  --line-2:#CBD5E1;
  --ink:#1E293B; --ink-2:#54637A; --ink-3:#8895A8;
  --r-lg:18px; --r-xl:22px;
  --card-r:var(--r-md);
  --bounce:0;
  --blob-op:.20;
  --fs-hero:1.6rem;
}

/* ---------- DARK ---------- */
@media (prefers-color-scheme:dark){
  [data-theme="auto"]{
    --ink:#EEF2FB; --ink-2:#A7B1CE; --ink-3:#7A85A6;
    --page:#151A2B; --card:#1E2437; --sunk:#252C42;
    --line:#303853; --line-2:#3D46660;
    --ok-bg:#12301F; --ok-line:#1E5C36;
    --bad-bg:#331A19; --bad-line:#6B2A26;
    --info-bg:#1B2246; --warn-bg:#332913;
    --sh-1:0 4px 14px rgba(0,0,0,.32);
    --sh-2:0 10px 30px rgba(0,0,0,.40);
    --sh-3:0 20px 52px rgba(0,0,0,.52);
    --blob-op:.20;
  }
}
[data-theme="dark"]{
  --ink:#EEF2FB; --ink-2:#A7B1CE; --ink-3:#7A85A6;
  --page:#151A2B; --card:#1E2437; --sunk:#252C42;
  --line:#303853; --line-2:#3D4666;
  --ok-bg:#12301F; --ok-line:#1E5C36;
  --bad-bg:#331A19; --bad-line:#6B2A26;
  --info-bg:#1B2246; --warn-bg:#332913;
  --sh-1:0 4px 14px rgba(0,0,0,.32);
  --sh-2:0 10px 30px rgba(0,0,0,.40);
  --sh-3:0 20px 52px rgba(0,0,0,.52);
  --blob-op:.20;
}

/* ---------- text scale ---------- */
[data-textsize="lg"]{--fs-body:1.06rem;--fs-sm:.92rem;--fs-xs:.8rem;--fs-h1:1.55rem;--fs-h2:1.28rem}
[data-textsize="xl"]{--fs-body:1.18rem;--fs-sm:1rem;--fs-xs:.88rem;--fs-h1:1.7rem;--fs-h2:1.4rem}

html{font-size:16px;-webkit-text-size-adjust:100%}
body{
  font-family:var(--f-body);
  font-size:var(--fs-body);
  line-height:1.7;
  color:var(--ink);
  background:var(--page);
  min-height:100dvh;
  overflow-x:hidden;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4,h5,.head{font-family:var(--f-head);line-height:1.4;font-weight:600}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
button{border:none;background:none;cursor:pointer}
/* never below 16px: iOS zooms the whole page when focusing a smaller field,
   which is why the viewport tag used to block pinch-zoom outright */
input,textarea,select{background:var(--card);border:2px solid var(--line);border-radius:var(--r-sm);padding:10px 14px;color:var(--ink);outline:none;transition:border-color var(--t-fast);font-size:max(16px,1rem)}
input:focus,textarea:focus,select:focus{border-color:var(--brand-1)}
a{color:var(--brand-1)}
ul,ol{padding-left:1.25em}
:focus-visible{outline:3px solid var(--info);outline-offset:2px;border-radius:6px}
::selection{background:color-mix(in srgb,var(--brand-1) 28%,transparent)}

/* scrollbars */
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:99px}
*::-webkit-scrollbar-track{background:transparent}

/* ============ BACKGROUND ============ */
.bg-decor{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:var(--blob-op);animation:blobDrift 16s ease-in-out infinite alternate}
.b1{width:440px;height:440px;background:#FFD9A0;top:-140px;left:-130px}
.b2{width:400px;height:400px;background:#FFC4D6;bottom:-120px;right:-120px;animation-delay:-5s}
.b3{width:320px;height:320px;background:#BFD7FF;top:44%;left:62%;animation-delay:-10s}
[data-mode="adult"] .b1{background:#A7E8DE}
[data-mode="adult"] .b2{background:#B9DDF7}
[data-mode="adult"] .b3{background:#CFE3FF}
@keyframes blobDrift{from{transform:translate(0,0) scale(1)}to{transform:translate(46px,-34px) scale(1.14)}}

/* ============ BOOT ============ */
.boot{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--page);transition:opacity .45s,visibility .45s}
.boot.gone{opacity:0;visibility:hidden}
.boot-mascot{font-size:4.6rem;animation:bob 2.2s ease-in-out infinite}
.boot-name{font-family:var(--f-head);font-weight:700;font-size:1.7rem}
.boot-name b{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.boot-bar{width:190px;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.boot-bar i{display:block;height:100%;width:36%;border-radius:99px;background:var(--brand-grad);animation:bootSlide 1.15s var(--ease) infinite}
@keyframes bootSlide{0%{transform:translateX(-110%)}100%{transform:translateX(320%)}}
.boot-msg{font-size:var(--fs-sm);color:var(--ink-2)}

/* ============ SHELL ============ */
.appbar{
  position:sticky;top:0;z-index:60;height:var(--appbar-h);
  display:flex;align-items:center;gap:9px;
  padding:0 var(--pad);
  max-width:var(--shell);margin:0 auto;
  background:color-mix(in srgb,var(--page) 82%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.avatar-btn{width:40px;height:40px;flex:none;border-radius:14px;background:var(--card);border:2px solid var(--line);display:grid;place-items:center;font-size:1.35rem;box-shadow:var(--sh-1);transition:transform var(--t-fast)}
.avatar-btn:active{transform:scale(.9)}
.appbar-meta{flex:1;min-width:0}
.appbar-name{font-family:var(--f-head);font-size:.86rem;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xp-line{display:flex;align-items:center;gap:6px}
.xp-bar{flex:1;max-width:110px;height:7px;border-radius:99px;background:var(--line);overflow:hidden}
.xp-bar i{display:block;height:100%;border-radius:99px;background:var(--brand-grad);width:0;transition:width .8s var(--ease)}
#xp-text{font-size:var(--fs-xs);color:var(--ink-2);white-space:nowrap}
.stat-pill{display:inline-flex;align-items:center;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;font-size:var(--fs-sm);font-weight:600;box-shadow:var(--sh-1);white-space:nowrap}
.stat-pill.pop{animation:pillPop .55s var(--sp)}
@keyframes pillPop{40%{transform:scale(1.22);background:var(--warn-bg)}}
.icon-btn{width:40px;height:40px;flex:none;border-radius:14px;background:var(--card);border:1px solid var(--line);display:grid;place-items:center;font-size:1.05rem;box-shadow:var(--sh-1);transition:var(--t-fast)}
.icon-btn:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.icon-btn:active{transform:scale(.9)}

.view{max-width:var(--shell);margin:0 auto;padding:0 var(--pad) calc(var(--tabbar-h) + var(--safe-b) + 30px)}
body.no-tabs .view{padding-bottom:36px}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  height:calc(var(--tabbar-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:flex;align-items:stretch;
  max-width:var(--shell);margin:0 auto;
  background:color-mix(in srgb,var(--card) 90%,transparent);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  border-radius:var(--r-lg) var(--r-lg) 0 0;
  box-shadow:0 -6px 24px rgba(37,46,77,.08);
}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:var(--ink-3);position:relative;transition:color var(--t-fast)}
.tab .ti{font-size:1.35rem;transition:transform var(--t) var(--sp);filter:grayscale(.55);opacity:.7}
.tab .tl{font-size:.65rem;font-weight:600}
.tab.on{color:var(--brand-1)}
.tab.on .ti{transform:translateY(-3px) scale(1.16);filter:none;opacity:1}
.tab.on::after{content:"";position:absolute;top:6px;width:32px;height:3px;border-radius:99px;background:var(--brand-grad)}
.tbadge{position:absolute;top:6px;right:calc(50% - 24px);min-width:18px;height:18px;padding:0 5px;border-radius:99px;background:var(--bad);color:#fff;font-size:.6rem;font-weight:700;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.25)}

/* ============ SHARED ANIMATIONS ============ */
@keyframes bob{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes pop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.1)}100%{transform:scale(1);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}18%{transform:translateX(-9px)}36%{transform:translateX(9px)}54%{transform:translateX(-6px)}72%{transform:translateX(6px)}}
@keyframes pulseRing{0%,100%{box-shadow:0 0 0 0 rgba(77,107,255,.34)}50%{box-shadow:0 0 0 20px rgba(77,107,255,0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.anim-in{animation:fadeUp .34s var(--ease)}
.anim-pop{animation:pop .42s var(--sp)}

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

/* utility */
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.col{display:flex;flex-direction:column}
.grow{flex:1}
.center{text-align:center}
.muted{color:var(--ink-2)}
.tiny{font-size:var(--fs-xs)}
.sm{font-size:var(--fs-sm)}
.mt{margin-top:14px}.mt2{margin-top:24px}.mb{margin-bottom:14px}
.hide{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}