/*
 * kit.css — Fluffy Star design system: tokens + base + shared atoms (SPEC §2). Owned by the hub.
 * RTL via logical properties only. Area stylesheets (hub.css, runner.css, ui.css, …) build on these tokens.
 *
 * Atoms:   .card  .glass  .btn (+ .btn-gold .btn-mint .btn-sky .btn-soft .btn-ghost, .btn-lg .btn-sm .btn-round)
 *          .chip (wallet/counter pill)  .badge (notification dot/count)  .num (LTR number island)
 *          .kbd (key hint)  .veil (full-screen dim)  .pop-in / .float-y (motion helpers)
 * Tokens:  colours, game accents (--g-runner …), radii, shadows, motion curves, safe-area insets.
 */

:root {
  /* surfaces */
  --bg: #1b1440; --bg-2: #241a5c; --ink: #fff; --ink-2: #e7e2ff; --muted: #a59de0; --ink-dark: #2a1f5e;
  /* brand */
  --brand: #ff5fa2; --brand-2: #7b5cff; --gold: #ffc93c; --gold-2: #ff9f1c; --mint: #3ee6b5; --sky: #4cc3ff; --danger: #ff5a5a;
  /* per-game accents (portals, results, HUD tints) */
  --g-runner: #ff7a3c; --g-skyroll: #4cc3ff; --g-tiles: #b06cff; --g-band: #ff4f8b; --g-popstar: #ffcf3c;
  --g-influencer: #3ee6b5; --g-whois: #7b8cff;
  /* glass */
  --card: rgba(34, 24, 86, .66); --card-brd: rgba(255, 255, 255, .16); --glass: rgba(255, 255, 255, .14);
  --glass-hi: rgba(255, 255, 255, .28); --glass-brd: rgba(255, 255, 255, .32);
  /* shape */
  --radius: 22px; --radius-sm: 14px; --radius-xs: 10px; --pill: 999px;
  --shadow: 0 18px 40px rgba(10, 4, 40, .45); --shadow-sm: 0 6px 16px rgba(10, 4, 40, .35);
  --text-shadow: 0 2px 0 rgba(20, 8, 60, .35);
  /* type */
  --font-display: 'Fredoka', 'Rubik', system-ui, sans-serif;
  --font-text: 'Rubik', 'Fredoka', system-ui, sans-serif;
  /* motion */
  --ease-out: cubic-bezier(.2, .9, .25, 1); --ease-back: cubic-bezier(.34, 1.56, .64, 1); --ease-in: cubic-bezier(.5, 0, .75, 0);
  /* safe areas (logical: s = inline-start side of the screen in LTR terms is set below per direction) */
  --safe-t: env(safe-area-inset-top); --safe-b: env(safe-area-inset-bottom);
  --safe-l: env(safe-area-inset-left); --safe-r: env(safe-area-inset-right);
  --safe-s: var(--safe-l); --safe-e: var(--safe-r);
}
[dir="rtl"] { --safe-s: var(--safe-r); --safe-e: var(--safe-l); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font-text); overscroll-behavior: none; }
body { overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-font-smoothing: antialiased; }
button { font-family: inherit; }
#app, #stage, #ui { position: fixed; inset: 0; }
#stage canvas { display: block; }
#ui { pointer-events: none; }
#ui > * { pointer-events: auto; }
#toasts { position: fixed; inset-block-start: calc(12px + var(--safe-t)); inset-inline: 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; z-index: 50; }

/* boot */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; background: radial-gradient(120% 90% at 50% 20%, #3a2a8f 0%, #1b1440 60%); z-index: 100; transition: opacity .6s ease; }
.boot.gone { opacity: 0; pointer-events: none; }
.boot-title { font: 700 clamp(34px, 7vw, 64px)/1 var(--font-display); letter-spacing: .5px; text-shadow: 0 6px 0 rgba(0,0,0,.25); }
html.lang-en .boot-title .he, html:not(.lang-en) .boot-title .en { display: none; }
.boot-bar { width: min(320px, 70vw); height: 10px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 4%; background: linear-gradient(90deg, var(--brand), var(--gold)); border-radius: inherit; transition: width .25s ease; }

/* surfaces */
.card { background: var(--card); border: 1px solid var(--card-brd); border-radius: var(--radius); box-shadow: var(--shadow); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 20px; }
.glass {
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.10));
  border: 1.5px solid var(--glass-brd); box-shadow: 0 8px 24px rgba(20, 8, 60, .28), inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter: blur(12px) saturate(1.3); -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.veil { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 40%, rgba(27,20,64,.55), rgba(12,6,36,.82)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* buttons: chunky, rounded, with press depth */
.btn {
  --b-top: #ff7ab4; --b-bot: #ff3d8b; --b-edge: #b51f60;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 600 18px/1 var(--font-display); color: #fff; letter-spacing: .2px; text-shadow: var(--text-shadow);
  border: 0; border-radius: 16px; padding: 14px 22px; min-height: 48px;
  background: linear-gradient(180deg, var(--b-top), var(--b-bot));
  box-shadow: 0 5px 0 var(--b-edge), 0 10px 20px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.35);
  cursor: pointer; transition: transform .08s ease, box-shadow .08s ease, filter .15s ease;
}
.btn::after { content: ''; position: absolute; inset: 3px 6px auto; height: 42%; border-radius: 12px 12px 40% 40%; background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0)); pointer-events: none; }
.btn:hover { filter: brightness(1.07); }
.btn:active, .btn.is-pressed { transform: translateY(4px); box-shadow: 0 1px 0 var(--b-edge), 0 4px 10px rgba(0,0,0,.25), inset 0 2px 0 rgba(255,255,255,.3); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn[disabled] { filter: grayscale(.7) brightness(.8); cursor: default; }
.btn-gold { --b-top: #ffe066; --b-bot: #ffb31f; --b-edge: #c27400; color: #5a2c00; text-shadow: 0 1px 0 rgba(255,255,255,.45); }
.btn-mint { --b-top: #6ff5cc; --b-bot: #19c995; --b-edge: #0b8a66; }
.btn-sky { --b-top: #79d6ff; --b-bot: #2e9bff; --b-edge: #1561b8; }
.btn-violet { --b-top: #a58bff; --b-bot: #6a46ff; --b-edge: #3c22a8; }
.btn-soft { --b-top: rgba(255,255,255,.3); --b-bot: rgba(255,255,255,.14); --b-edge: rgba(20,8,60,.45); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-ghost { background: transparent; box-shadow: none; border: 2px solid var(--glass-brd); }
.btn-ghost::after { display: none; }
.btn-lg { font-size: 24px; padding: 18px 34px; min-height: 64px; border-radius: 20px; }
.btn-sm { font-size: 15px; padding: 9px 14px; min-height: 38px; border-radius: 12px; }
.btn-round { width: 56px; height: 56px; min-height: 0; padding: 0; border-radius: 50%; }
.btn-round::after { inset: 4px 8px auto; border-radius: 50% 50% 40% 40%; }
.btn svg { width: 1.3em; height: 1.3em; flex: none; filter: drop-shadow(0 1px 0 rgba(20,8,60,.3)); }

/* chips: wallet counters, small pills */
.chip {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding-inline: 6px 14px; border-radius: var(--pill);
  font: 700 18px/1 var(--font-display); color: #fff; text-shadow: var(--text-shadow);
  background: linear-gradient(180deg, rgba(40,26,110,.78), rgba(28,18,84,.78)); border: 1.5px solid rgba(255,255,255,.22);
  box-shadow: 0 4px 0 rgba(15,6,50,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.chip .chip-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; }
.chip .chip-ico svg { width: 24px; height: 24px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.25)); }
.chip.is-bump { animation: chip-bump .45s var(--ease-back); }
@keyframes chip-bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

.badge {
  position: absolute; inset-block-start: -4px; inset-inline-end: -4px; min-width: 22px; height: 22px; padding: 0 6px;
  display: grid; place-items: center; border-radius: var(--pill); background: linear-gradient(180deg, #ff6b6b, #e8304a);
  font: 700 13px/1 var(--font-display); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3);
  animation: badge-pulse 2s ease-in-out infinite;
}
.badge:empty { min-width: 14px; height: 14px; padding: 0; }
.badge.badge-online { background: linear-gradient(180deg, #5cf2a2, #16c26a); }
@keyframes badge-pulse { 50% { transform: scale(1.12); } }

.kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 7px; font: 600 13px/1 var(--font-text); background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); box-shadow: 0 2px 0 rgba(0,0,0,.25); }

.fatal { position: absolute; inset: 0; margin: auto; width: min(420px, 90vw); height: fit-content; text-align: center; }
bdi.num, .num { unicode-bidi: isolate; direction: ltr; font-variant-numeric: tabular-nums; }

/* motion helpers */
.pop-in { animation: pop-in .5s var(--ease-back) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.6) translateY(10px); } to { opacity: 1; transform: none; } }
.fade-in { animation: fade-in .35s ease both; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.float-y { animation: float-y 3s ease-in-out infinite; }
@keyframes float-y { 50% { transform: translateY(-6px); } }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

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