/* Shared tokens and base. Palette comes from the mascot: teal bandana, orange fur. */
:root{
  --bg:#eef8f7; --surface:#ffffff; --ink:#12323a; --muted:#587479; --line:#cde3e1;
  --accent:#0b7b84; --accent-press:#096a72; --on-accent:#ffffff;
  --sun:#f08a24; --sun-soft:#fde8d0; --sun-ink:#7a3e05;
  --ok:#1f7a45; --ok-bg:#d9f2e2; --warn:#8a4b08; --warn-bg:#fcebd0; --sel:#d3eff0;
  --f-fa:'Vazirmatn',Tahoma,system-ui,sans-serif; --f-en:'Vazirmatn',Tahoma,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0d1d21; --surface:#14292f; --ink:#e6f4f4; --muted:#93b3b8; --line:#244148;
    --accent:#43c0c9; --accent-press:#2fa8b1; --on-accent:#06262a;
    --sun:#f5a04a; --sun-soft:#3d2b12; --sun-ink:#ffc27a;
    --ok:#7be0a1; --ok-bg:#16382a; --warn:#ffc27a; --warn-bg:#3d2b12; --sel:#1c3c44;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0d1d21; --surface:#14292f; --ink:#e6f4f4; --muted:#93b3b8; --line:#244148;
  --accent:#43c0c9; --accent-press:#2fa8b1; --on-accent:#06262a;
  --sun:#f5a04a; --sun-soft:#3d2b12; --sun-ink:#ffc27a;
  --ok:#7be0a1; --ok-bg:#16382a; --warn:#ffc27a; --warn-bg:#3d2b12; --sel:#1c3c44;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html.locked,html.locked body{overflow:hidden}
body{
  margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-fa); font-size:17px; line-height:1.7;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px));
}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);background:var(--bg);z-index:30}
button{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%}
:focus,:focus-visible{outline:none}
/* no outline boxes anywhere; keyboard users get a soft glow on real buttons only */
button:focus-visible,.btn:focus-visible,.opt:focus-visible,.tile:focus-visible,.slot:focus-visible,.speak:focus-visible,.icon-btn:focus-visible,.music:focus-visible{box-shadow:0 0 0 4px var(--sun-soft,rgba(255,180,60,.35))}
img,svg,canvas{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
[role="img"],#heroCat,#pCat{-webkit-tap-highlight-color:transparent;outline:none}
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:16px;background:var(--accent);color:var(--on-accent);
  font-weight:800;font-size:18px;padding:14px 28px;cursor:pointer;text-decoration:none;box-shadow:0 4px 0 var(--accent-press);min-width:132px}
.btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--accent-press)}
.btn:disabled{background:var(--line);color:var(--muted);box-shadow:none;cursor:default}