/* ===== ממלכת טליה — יסודות ===== */
:root{
  /* צבעי בסיס */
  --bg-0:#0d0720;
  --bg-1:#160d2e;
  --bg-2:#1e1240;
  --bg-3:#2a1a55;
  --ink:#f4eeff;
  --ink-dim:#b3a6d4;
  --ink-faint:#7a6d9c;

  /* זהב מלכותי */
  --gold:#f2c661;
  --gold-hi:#ffe9a8;
  --gold-deep:#b8862c;

  /* הדגשות */
  --rose:#ff7bac;
  --violet:#a878ff;
  --teal:#4fd7c3;
  --danger:#ff6b6b;

  --line:rgba(255,255,255,.10);
  --line-strong:rgba(242,198,97,.35);
  --glass:rgba(255,255,255,.055);
  --glass-2:rgba(255,255,255,.09);

  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-full:999px;

  --shadow-1:0 4px 18px rgba(0,0,0,.35);
  --shadow-2:0 18px 50px rgba(0,0,0,.55);
  --glow-gold:0 0 24px rgba(242,198,97,.35);

  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);

  --font:"Heebo","Segoe UI",Arial,sans-serif;
}

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

html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg-0);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

#app{
  position:fixed;
  inset:0;
  background:
    radial-gradient(1200px 700px at 78% -10%, #3a1f6b 0%, transparent 60%),
    radial-gradient(900px 600px at 10% 110%, #2b1350 0%, transparent 62%),
    linear-gradient(180deg,var(--bg-1),var(--bg-0));
}

/* ---------- מסכים ---------- */
.screen{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  opacity:0;
  transform:scale(.985);
  transition:opacity .32s ease, transform .32s ease;
}
.screen.active{display:flex;opacity:1;transform:none}
.screen.leaving{opacity:0;transform:scale(1.02)}

/* ---------- טיפוגרפיה ---------- */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em}
p{margin:0}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font-family:inherit}

.hint{color:var(--ink-dim);font-size:13.5px;line-height:1.6;margin:0 0 14px}
.hint b{color:var(--gold)}

/* ---------- גלילה ---------- */
.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent}
.scroll::-webkit-scrollbar{width:6px;height:6px}
.scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:99px}
.scroll::-webkit-scrollbar-track{background:transparent}

/* ---------- עזרים ---------- */
[hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}