/* ============================================================
   AVORA — app shell (phone frame, Telegram chrome, screen stack)
   Component & per-screen styles are appended by later modules.
   ============================================================ */
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--text-primary);
  /* Same colour the app is on. On a wide desktop the app is capped and centred, and a
     different backdrop behind it would read as a frame around a floating card — which is
     exactly what it used to look like. */
  background: var(--violet-abyss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none; -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
button { font-family: var(--font-ui); }

/* ---- Stage: centres the app column, full-bleed at any size ---- */
/* --vh is the height Telegram reports for its webview; 100dvh is the fallback in a plain
   browser. Telegram does not always agree with dvh, and being wrong here pushes the navbar
   off the bottom of the screen. */
#stage {
  min-height: var(--vh, 100dvh);
  display: flex; align-items: stretch; justify-content: center;
}

/* ---- Phone frame ---- */
/* A mini app fills its webview — no card, no rounded corners, no shadow. There used to be a
   phone frame here with 24px of desk around it; inside Telegram that reads as a window
   floating in a box, and on a fixed 752px height it also cut the navbar off the bottom.
   The width is still capped so the layout is not stretched across a desktop browser, and
   the page behind it is the same colour, so the cap leaves no visible edge. */
#app {
  width: 100%; max-width: var(--app-max);
  height: var(--vh, 100dvh);
  overflow: hidden;
  background: var(--violet-abyss);
  display: flex; flex-direction: column;
}

/* ---- Telegram status bar (mockup chrome) ---- */
.tg-statusbar {
  height: 28px; background: var(--violet-abyss);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; color: #fff; font-size: 13px; font-weight: 700;
}
.tg-sb-icons { font-size: 12px; opacity: .85; letter-spacing: 1px; }

/* ---- In-app header ---- */
.tg-header {
  height: 52px; background: linear-gradient(180deg, #1c1440, #160f30);
  display: flex; align-items: center; gap: 8px; padding: 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
/* Header icon buttons — one symmetric spec (equal box, centred glyphs, matching states) */
.tg-back, .tg-close, .tg-sound, .tg-profile, .tg-expand {
  width: 34px; height: 34px; flex: 0 0 auto; border: none; cursor: pointer;
  display: grid; place-items: center; line-height: 1;
  background: rgba(255,255,255,.07); border-radius: 10px; color: #EFE9FF; font-size: 16px;
  transition: background .15s var(--ease-out), transform .1s var(--ease-out), opacity .15s;
}
.tg-back { font-size: 21px; }  /* the ‹ chevron needs a touch more size to read the same weight */
.tg-expand { font-size: 18px; }
.tg-back:hover, .tg-close:hover, .tg-sound:hover, .tg-profile:hover, .tg-expand:hover { background: rgba(255,255,255,.13); }
.tg-back:active, .tg-close:active, .tg-sound:active, .tg-profile:active, .tg-expand:active { transform: scale(.9); }
.tg-sound.off { opacity: .5; }
.tg-back[hidden] { display: none; }
.tg-title { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-left: 4px; }
.tg-titlerow { display: flex; align-items: center; gap: 6px; }
.tg-demo { font-family: var(--font-display); font-weight: 800; font-size: 9px; letter-spacing: 1px; color: #08240f; background: linear-gradient(180deg, #7CE0A3, #2FA968); padding: 3px 7px; border-radius: 999px; cursor: pointer; white-space: nowrap; transition: filter .15s, transform .1s; }
.tg-demo:hover { filter: brightness(1.08); }
.tg-demo:active { transform: scale(.94); }
.tg-demo[hidden] { display: none; }
.tg-appname { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: #FFF6E4; letter-spacing: .5px; }
.tg-subtitle { font-size: 11px; color: #9C93B8; margin-top: 1px; min-height: 12px; }
/* the avatar button holds the Telegram photo edge to edge */
.tg-profile { padding: 0; overflow: hidden; }
.tg-ava { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- Language picker: a dropdown, since seven languages no longer fit as chips ---- */
.tg-lang { position: relative; flex: 0 0 auto; }
.lang-cur {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 8px; border-radius: 11px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: #EFE9FF; font-weight: 700; font-size: 12px; line-height: 1;
  transition: background .15s var(--ease-out);
}
.lang-cur:hover { background: rgba(255,255,255,.13); }
.lang-cur:active { transform: scale(.95); }
.lang-caret { opacity: .7; transition: transform .15s var(--ease-out); }
.lang-cur[aria-expanded="true"] .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  margin: 0; padding: 4px; list-style: none;
  min-width: 158px; max-height: 60vh; overflow-y: auto;
  background: #1B1338; border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.55);
}
/* in Arabic the header mirrors, so the menu hangs off the other edge */
[dir="rtl"] .lang-menu { right: auto; left: 0; }
.lang-menu[hidden] { display: none; }
.lang-menu button {
  width: 100%; display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 8px 10px; border: none; border-radius: 9px; background: transparent;
  color: #D8CFF2; font-size: 13px; text-align: start;
}
.lang-menu button:hover { background: rgba(255,255,255,.08); }
.lang-menu button.on { color: #2A1704; background: linear-gradient(180deg, #FFD866, #E0921C); font-weight: 700; }
.lang-name { white-space: nowrap; }
.lang-menu .lang-code { width: 22px; flex: 0 0 auto; font-size: 11px; font-weight: 700; opacity: .65; text-align: start; }
.lang-menu button.on .lang-code { opacity: .8; }

/* ---- "Coming soon" panel (Upgrades tab) ---- */
.soon-panel {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 48px 28px; margin-top: 40px;
}
.soon-icon { font-size: 46px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.soon-title { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: #FFF6E4; }
.soon-sub { font-size: 13px; line-height: 1.55; color: var(--text-secondary); max-width: 24em; }

/* ---- First-visit age / jurisdiction gate ---- */
.gate {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(8, 5, 20, .88); backdrop-filter: blur(6px);
  overflow-y: auto;
}
.gate-card {
  width: 100%; max-width: 360px; padding: 24px 20px 18px; text-align: center;
  background: linear-gradient(180deg, #221847, #171030);
  border: 1px solid rgba(255, 255, 255, .12); border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}
/* language row inside the card: the header's picker is behind the overlay */
.gate-langs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 16px; }
.gate-langs button {
  padding: 5px 9px; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1);
  color: #B9AFD6; font-size: 11px; font-weight: 700; letter-spacing: .3px;
}
.gate-langs button:hover { background: rgba(255, 255, 255, .12); }
.gate-langs button.on { color: #2A1704; background: var(--grad-gold); border-color: transparent; }
.gate-badge {
  width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #2A1704;
  background: var(--grad-gold); box-shadow: 0 6px 18px rgba(255, 201, 60, .3);
}
.gate-badge--no { background: linear-gradient(180deg, #F2607A, #C8102E); color: #fff; font-size: 22px; }
.gate-title { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: #FFF6E4; margin: 0 0 6px; }
.gate-lead { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 16px; }
.gate-check {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; text-align: start;
  padding: 11px 12px; margin-bottom: 8px; border-radius: 12px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .09);
  font-size: 12.5px; line-height: 1.45; color: #D8CFF2;
}
.gate-check:hover { background: rgba(255, 255, 255, .08); }
.gate-check input { width: 18px; height: 18px; flex: none; margin: 0; accent-color: #FFC93C; cursor: pointer; }
.gate-ok {
  width: 100%; margin-top: 8px; padding: 13px; border: none; border-radius: 13px; cursor: pointer;
  background: var(--grad-gold); color: #2A1704;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .3px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28); transition: opacity .15s, transform .08s var(--ease-out);
}
.gate-ok:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0, 0, 0, .28); }
.gate-ok:disabled { opacity: .4; cursor: default; box-shadow: none; }
.gate-no {
  width: 100%; margin-top: 8px; padding: 11px; cursor: pointer;
  background: none; border: 1px solid rgba(255, 255, 255, .14); border-radius: 13px;
  color: #B9AFD6; font-size: 13px;
}
.gate-no:hover { background: rgba(255, 255, 255, .06); }
.gate-no--back { margin-top: 16px; }
.gate-fine { font-size: 11px; line-height: 1.5; color: #8A80A8; margin: 14px 0 0; }

/* ---- Fairness check (recomputed in the browser; .pf-* so it cannot clash with the
       .fair-* summary panel that already lives on the result screens) ---- */
.pf {
  position: fixed; inset: 0; z-index: 9200; display: grid; place-items: end center;
  background: rgba(6, 4, 16, .74); opacity: 0; transition: opacity .2s var(--ease-out);
}
.pf.show { opacity: 1; }
.pf-sheet {
  position: relative; width: 100%; max-width: 440px; max-height: 88vh; overflow-y: auto;
  padding: 18px 16px 16px; border-radius: 20px 20px 0 0;
  background: linear-gradient(180deg, #211846, #150E2C);
  border: 1px solid rgba(255, 255, 255, .12); border-bottom: none;
  transform: translateY(18px); transition: transform .26s var(--ease-out);
}
.pf.show .pf-sheet { transform: none; }
.pf-x {
  position: absolute; top: 12px; inset-inline-end: 12px; width: 30px; height: 30px;
  display: grid; place-items: center; border: none; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: #EFE9FF; font-size: 13px;
}
.pf-title {
  margin: 0 34px 12px 0; font-family: var(--font-display); font-weight: 800;
  font-size: 17px; color: #FFF6E4;
}
.pf-wait { padding: 24px 0; text-align: center; color: var(--text-secondary); font-size: 13px; }

.pf-verdict {
  display: flex; align-items: center; gap: 9px; padding: 11px 12px; border-radius: 12px;
  font-size: 13px; font-weight: 700; line-height: 1.35;
}
.pf-verdict.ok { background: rgba(91, 230, 160, .12); border: 1px solid rgba(91, 230, 160, .35); color: #8BE8A8; }
.pf-verdict.bad { background: rgba(240, 69, 62, .12); border: 1px solid rgba(240, 69, 62, .4); color: #FF9BB0; }
.pf-verdict-i { font-size: 17px; flex: none; }
.pf-note { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--text-secondary); }

.pf-block {
  margin-top: 12px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .09);
}
.pf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; }
.pf-k { font-size: 11.5px; color: var(--text-secondary); flex: none; }
.pf-v { font-size: 12px; color: #E4DBFF; text-align: end; overflow-wrap: anywhere; }
.pf-v.mono, .pf-table .mono { font-family: ui-monospace, Menlo, Consolas, monospace; }

.pf-sub { margin: 14px 0 6px; font-size: 12px; font-weight: 700; color: #FFF6E4; }
/* the gate list can be long — it scrolls inside its own box, never the page */
.pf-table-wrap { max-height: 210px; overflow-y: auto; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .09); }
.pf-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.pf-table th, .pf-table td { padding: 6px 8px; text-align: start; }
.pf-table thead th {
  position: sticky; top: 0; background: #251B4E; color: var(--text-secondary);
  font-weight: 700; font-size: 10.5px;
}
.pf-table tbody tr { border-top: 1px solid rgba(255, 255, 255, .06); }
.pf-table tbody tr.pass td { color: #C9E8D4; }
.pf-table tbody tr.fail td { color: #FFB3C0; background: rgba(240, 69, 62, .1); }
.pf-how { margin: 12px 0 0; font-size: 11px; line-height: 1.55; color: #8A80A8; }
.pf-ok {
  width: 100%; margin-top: 14px; padding: 12px; border: none; border-radius: 12px; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 13px;
}
.pf-ok:hover { background: rgba(255, 255, 255, .19); }
/* the numbers are Latin digits: keep them left-to-right inside Arabic */
[dir="rtl"] .pf-v.mono, [dir="rtl"] .pf-table { direction: ltr; }

/* ---- Currency marks (Gram / Stars / Gifts / Coins) ---- */
.cur-i { display: block; flex: none; }
.cur-tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 6px; border-radius: 999px;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
  font-size: 12px; font-weight: 700; color: #EFE9FF; line-height: 1;
}
.cur-tag b { font-weight: 800; }
/* the wallet strip under the balance on the Menu card */
.prof-wallet { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 4px 0; }
/* balance line: mark, then the amount */
.prof-bal-val { display: inline-flex; align-items: center; gap: 7px; }
/* the bet stepper's sign slot now holds a mark instead of a glyph */
.stepper .amt .cur { display: inline-flex; align-items: center; }

/* ---- Welcome bonus: one-time wheel + promo code ---- */
.wel {
  position: fixed; inset: 0; z-index: 9500;
  display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: radial-gradient(120% 90% at 50% 0%, #6E2BD9 0%, #33116B 55%, #16092E 100%);
  opacity: 0; transition: opacity .28s var(--ease-out);
}
.wel.show { opacity: 1; }
.wel.out { opacity: 0; }
.wel-card {
  position: relative; width: 100%; max-width: 380px; text-align: center;
  padding: 20px 18px 16px; overflow: hidden;
  transform: translateY(14px) scale(.97);
  transition: transform .34s cubic-bezier(.2, .9, .25, 1.05);
}
.wel.show .wel-card { transform: none; }
/* slow halo behind the wheel — motion without anything to read */
.wel-glow {
  position: absolute; left: 50%; top: 34%; width: 320px; height: 320px; margin: -160px 0 0 -160px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 216, 102, .28) 0%, transparent 62%);
  animation: wel-breathe 3.4s ease-in-out infinite;
}
@keyframes wel-breathe { 0%, 100% { transform: scale(1); opacity: .75; } 50% { transform: scale(1.14); opacity: 1; } }

.wel-kicker {
  display: inline-block; padding: 4px 12px; margin-bottom: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #FFE79A;
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase;
}
.wel-title {
  margin: 0 0 6px; font-family: var(--font-display); font-weight: 800; font-size: 21px;
  line-height: 1.2; color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .35);
}
.wel-sub { margin: 0 0 14px; font-size: 12.5px; color: rgba(255, 255, 255, .78); }

.wel-stage { position: relative; width: min(300px, 78vw); margin: 0 auto 14px; aspect-ratio: 1; }
.wel-ring {
  position: absolute; inset: 0; border-radius: 50%; padding: 7px;
  background: linear-gradient(180deg, #FFE79A, #E0921C);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .45), 0 0 0 3px rgba(255, 255, 255, .16) inset;
}
.wel-disc {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  /* 4.2s — welcome.js waits exactly this long before showing the prize */
  transition: transform 4.2s cubic-bezier(.12, .72, 0, 1);
}
.wel-hub {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border-radius: 50%; background: linear-gradient(180deg, #fff, #E7DCFF);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .4);
}
.wel-pointer {
  position: absolute; left: 50%; top: -8px; width: 0; height: 0; margin-left: -13px; z-index: 3;
  border-left: 13px solid transparent; border-right: 13px solid transparent;
  border-top: 26px solid #fff; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .5));
}

.wel-prize { margin-bottom: 12px; animation: wel-pop .4s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes wel-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.wel-prize-amt {
  font-family: var(--font-display); font-weight: 800; font-size: 40px; line-height: 1;
  background: linear-gradient(180deg, #FFF3C4, #FFB020);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 12px rgba(255, 176, 32, .45));
}
.wel-prize-extra { margin-top: 5px; font-size: 13px; color: #FFE79A; font-weight: 700; }
.wel-prize-note { margin-top: 4px; font-size: 11.5px; color: rgba(255, 255, 255, .7); }

.wel-spin {
  width: 100%; padding: 15px; border: none; border-radius: 15px; cursor: pointer;
  background: var(--grad-gold); color: #2A1704;
  font-family: var(--font-display); font-weight: 800; font-size: 16px; letter-spacing: .6px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .3), 0 0 26px rgba(255, 201, 60, .45);
  animation: wel-pulse 1.5s ease-in-out infinite;
}
@keyframes wel-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.wel-spin:active { transform: translateY(2px); box-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.wel-spin:disabled { animation: none; opacity: .75; cursor: default; }

.wel-promo, .wel-done { opacity: 0; transform: translateY(8px); }
.wel-promo.in, .wel-done.in { animation: wel-rise .38s var(--ease-out) .12s both; }
@keyframes wel-rise { to { opacity: 1; transform: none; } }
.wel-promo {
  padding: 13px; border-radius: 15px; text-align: start;
  background: rgba(0, 0, 0, .26); border: 1px solid rgba(255, 255, 255, .13);
}
.wel-promo-title { font-size: 12.5px; font-weight: 700; color: #EFE9FF; margin-bottom: 8px; }
.wel-promo-row { display: flex; gap: 8px; }
.wel-promo-input {
  flex: 1; min-width: 0; padding: 11px 12px; border-radius: 11px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
}
.wel-promo-input::placeholder { color: rgba(255, 255, 255, .42); letter-spacing: .4px; font-weight: 400; text-transform: none; }
.wel-promo-input:focus { outline: none; border-color: rgba(255, 216, 102, .7); background: rgba(255, 255, 255, .13); }
.wel-promo-input:disabled { opacity: .65; }
.wel-promo-btn {
  flex: 0 0 auto; padding: 11px 15px; border: none; border-radius: 11px; cursor: pointer;
  background: rgba(255, 255, 255, .16); color: #fff; font-weight: 700; font-size: 13px;
}
.wel-promo-btn:hover { background: rgba(255, 255, 255, .24); }
.wel-promo-btn:disabled { opacity: .5; cursor: default; }
.wel-promo-msg { margin-top: 7px; font-size: 12px; line-height: 1.4; min-height: 1em; }
.wel-promo-msg.ok { color: #8BE8A8; }
.wel-promo-msg.err { color: #FF9BB0; }

.wel-done {
  width: 100%; margin-top: 12px; padding: 13px; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 14px; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 14px;
}
.wel-done:hover { background: rgba(255, 255, 255, .2); }
.wel-fine { margin: 12px 0 0; font-size: 10.5px; line-height: 1.5; color: rgba(255, 255, 255, .55); }

/* confetti burst — decorative only, removed once it has played */
.wel-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.wel-confetti i {
  position: absolute; top: 46%; width: 8px; height: 12px; border-radius: 2px;
  background: var(--c); animation: wel-fly var(--d) cubic-bezier(.15, .6, .3, 1) forwards;
}
@keyframes wel-fly {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; }
}

/* Anything that spins or flies is decoration: switch it off when the player asked for less
   motion. The wheel still lands on its result, it just stops being a show. */
@media (prefers-reduced-motion: reduce) {
  .wel-glow, .wel-spin { animation: none; }
  .wel-disc { transition-duration: .6s; }
  .wel-confetti { display: none; }
}

/* ---- Arabic: the layout mirrors, but the numbers must not ----
   Money, multipliers and distances are Latin digits with Latin symbols, so the bidi
   algorithm reorders them inside an RTL line ("+$100" came out as "$100+", "0 m" as "m 0").
   Isolating these readouts as LTR keeps them exactly as designed. */
[dir="rtl"] .coin-pill,
[dir="rtl"] .stat-value,
[dir="rtl"] .prof-bal-val,
[dir="rtl"] .tick-row,
[dir="rtl"] #hud { direction: ltr; unicode-bidi: isolate; }
/* "go forward" arrows are drawn pointing right; in Arabic forward is the other way */
[dir="rtl"] .prof-more,
[dir="rtl"] .mrow-c,
[dir="rtl"] .pbtn-arr { transform: scaleX(-1); }

/* ---- Screen viewport ---- */
#screens {
  /* Takes whatever is left under the header instead of a fixed 700px. Everything inside is
     anchored to this box — the navbar to its bottom, the panels inset with their own scroll —
     so they all follow it without further change. */
  position: relative; width: 100%; flex: 1 1 auto; min-height: 0; overflow: hidden;
  background: var(--violet-abyss);
}
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }
.screen.active > * { animation: none; }
.screen.active { animation: avora-rise var(--dur-base) var(--ease-out) both; }

/* game canvas fills its screen */
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
#hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#hud * { pointer-events: auto; }
#gameControls { position: absolute; left: 14px; right: 14px; bottom: 22px; z-index: 3; display: flex; gap: 12px; }

/* ---- Bottom navbar: SF-symbol tabs + centre fortune wheel (reference-exact) ---- */
:root {
  /* used by the fortune-wheel modal disc */
  --wheel-grad: conic-gradient(from 0deg,
    #F5993C 0 45deg, #E8557F 45deg 90deg, #F5993C 90deg 135deg, #E8557F 135deg 180deg,
    #F5993C 180deg 225deg, #E8557F 225deg 270deg, #F5993C 270deg 315deg, #E8557F 315deg 360deg);
}
#navbar {
  position: absolute; left: 8px; right: 8px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 4; display: none;
  align-items: stretch; gap: 2px;
  height: 84px;
  background: #141416;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 30px;
  padding: 8px 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.04);
}
#navbar.show { display: flex; }
.nav-side { flex: 1; min-width: 0; display: flex; align-items: stretch; gap: 2px; }
#navbar button[data-nav] {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 7px;
  border: none; background: transparent; cursor: pointer; color: #B4B4C0;
  border-radius: 18px; padding: 4px 2px 8px;
  transition: background .15s, color .15s, transform .1s;
}
#navbar button[data-nav] svg { width: 26px; height: 26px; display: block; }
#navbar .nav-label { font-family: var(--font-ui); font-weight: 500; font-size: 12px; color: #A7A7B5; white-space: nowrap; letter-spacing: -.2px; }
#navbar button[data-nav].on { background: rgba(255,255,255,.1); color: #fff; }
#navbar button[data-nav].on .nav-label { font-weight: 600; color: #fff; }
#navbar button[data-nav]:active { transform: scale(.96); }

/* ---- centre fortune wheel ---- */
.nav-wheel-col {
  width: 58px; flex: none; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px;
  padding-bottom: 8px;
}
.nav-wheel { position: relative; width: 52px; height: 52px; border: none; background: transparent; cursor: pointer; padding: 0; }
.nav-wheel-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(155deg, #FFE79A 0%, #F5B33C 45%, #C97F14 100%);
  box-shadow: 0 3px 9px rgba(0,0,0,.55), inset 0 1px 2px rgba(255,255,255,.65),
    0 0 0 2px rgba(255,208,102,.75), 0 0 13px 3px rgba(255,201,60,.5);
}
.nav-wheel-disc { position: absolute; inset: 4px; border-radius: 50%; overflow: hidden; }
.nav-wheel-disc svg { display: block; width: 100%; height: 100%; }
.nav-wheel-hub {
  position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; transform: translate(-50%,-50%);
  border-radius: 50%; border: 1.5px solid #fff; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #b8e2ff, #2b86e0 60%, #125a9e);
  box-shadow: 0 1px 3px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.9);
}
.nav-wheel-pointer {
  position: absolute; left: 50%; top: -3px; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 5.5px solid transparent; border-right: 5.5px solid transparent;
  border-top: 9px solid #FFE07A; filter: drop-shadow(0 1px 1px rgba(0,0,0,.55));
}
.nav-wheel-glow {
  position: absolute; inset: -4px; border-radius: 50%; pointer-events: none; display: none;
  box-shadow: 0 0 0 2px rgba(255,201,60,.5), 0 0 18px 4px rgba(255,201,60,.55);
  animation: nav-wheel-pulse 1.6s ease-in-out infinite;
}
.nav-wheel:active { transform: scale(.94); }
.nav-wheel-col.ready .nav-wheel-glow { display: block; }
@keyframes nav-wheel-pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }

.nav-wheel-label { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-ui); font-weight: 600; font-size: 12px; color: var(--gold-300); white-space: nowrap; }
.nav-wheel-label svg { width: 11px; height: 11px; }

/* ready badge — floats above the wheel */
.nav-wheel-badge {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 4px; z-index: 5;
  display: none; align-items: center; gap: 4px; padding: 4px 11px; border-radius: 999px; white-space: nowrap;
  background: linear-gradient(180deg, var(--gold-400), var(--gold-500)); color: #3A1E00;
  font-family: var(--font-ui); font-weight: 700; font-size: 11px; letter-spacing: .3px; text-transform: uppercase;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px rgba(0,0,0,.5), 0 0 18px rgba(255,201,60,.55);
  transform: translateX(-50%); animation: nav-cue-float 3s ease-in-out infinite;
}
.nav-wheel-col.ready .nav-wheel-badge { display: inline-flex; }
.nav-wheel-badge svg { width: 11px; height: 11px; }

/* cooldown ribbon — floats above the wheel */
.nav-wheel-ribbon {
  position: absolute; left: 50%; bottom: 100%; margin-bottom: 2px; z-index: 5; display: none; pointer-events: none;
  transform: translateX(-50%); animation: nav-cue-float 4s ease-in-out infinite;
}
.nav-wheel-col.cooldown .nav-wheel-ribbon { display: block; }
@keyframes nav-cue-float { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,-3px); } }

/* ---- Boot loader ---- */
#boot {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: var(--violet-abyss); color: var(--gold-300);
  font-family: var(--font-display); font-weight: 800; font-size: 26px; letter-spacing: 4px;
}
#boot.hidden { display: none; }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; top: 16%; transform: translateX(-50%);
  z-index: 120; display: none; max-width: 80vw;
  background: rgba(240,69,62,.94); color: #fff; padding: 10px 16px;
  border-radius: 12px; font-size: 13px; font-weight: 700;
  box-shadow: var(--shadow-md);
}
.toast.show { display: block; animation: avora-rise .18s var(--ease-out) both; }

/* ============================================================
   Components (buttons, coin, coin-pill, card, sky, mascot slot)
   ============================================================ */
.btn {
  border: none; cursor: pointer; font-family: var(--font-display); font-weight: 800;
  border-radius: var(--radius-lg); letter-spacing: .5px; color: #fff;
  transition: transform .08s var(--ease-out), filter .15s;
}
.btn--block { display: block; width: 100%; }
.btn--xl { font-size: 20px; padding: 20px; }
.btn--lg { font-size: 17px; padding: 16px; }
.btn:active { transform: translateY(3px); }
.btn--play { color: #2A1704; background: var(--grad-gold); box-shadow: var(--bevel-gold); }
.btn--success { color: #082616; background: var(--grad-green); box-shadow: var(--bevel-green); }
.btn--ghost { color: #C9C2E0; background: rgba(255,255,255,.05); border: 1px solid var(--hairline); }
.btn--play:hover, .btn--success:hover { filter: brightness(1.06); }
.btn--ghost:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.16); }
.btn--play:active, .btn--success:active { filter: brightness(1.05); }
.btn:disabled { filter: saturate(.35) brightness(.72); box-shadow: none; cursor: default; opacity: .9; }

.coin {
  display: inline-block; width: var(--coin, 22px); height: var(--coin, 22px); border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #FFF0B8, var(--gold-400) 55%, var(--gold-600));
  box-shadow: inset 0 -2px 3px rgba(150,80,0,.5), inset 0 2px 2px rgba(255,255,255,.6), 0 1px 2px rgba(0,0,0,.35);
  position: relative; vertical-align: middle;
}
.coin::after { content: "★"; position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(var(--coin,22px)*.5); color: #B96E10; }
.coin-pill {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--grad-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-sm, 0 4px 10px rgba(0,0,0,.3));
  font-weight: 800; color: #FFF6E4; font-variant-numeric: tabular-nums; font-size: 15px;
}
.coin-pill--sm { padding: 5px 10px; font-size: 13px; }

.card { background: var(--grad-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); border-radius: var(--radius-lg); }
.stat-label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--text-secondary); }
.stat-value { font-weight: 700; font-size: 22px; color: #FFF6E4; font-variant-numeric: tabular-nums; }

.sky { position: absolute; inset: 0; background: var(--grad-sky-dusk); }
.sky-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,10,31,.35), rgba(14,10,31,.05) 38%, rgba(14,10,31,.65)); }
.sky::before {
  content: ""; position: absolute; inset: 0; opacity: .55; background:
    radial-gradient(2px 2px at 20% 24%, #fff, transparent), radial-gradient(1.5px 1.5px at 68% 16%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 42% 40%, #ffe, transparent), radial-gradient(2px 2px at 84% 30%, #fff, transparent),
    radial-gradient(1px 1px at 55% 12%, #fff, transparent), radial-gradient(1.5px 1.5px at 12% 52%, #fff, transparent);
}

/* mascot slot + temporary placeholder (replaced by the procedural mascot in Task 9) */
.mascot-slot { display: grid; place-items: center; }
.mascot-ph {
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #FFF7E2, #FFD977 55%, #E0A52A);
  box-shadow: 0 10px 30px rgba(224,165,42,.45), 0 0 0 6px rgba(255,229,154,.12);
}

/* ---- Menu ---- */
.menu-logo { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); height: 86px; filter: drop-shadow(0 8px 12px rgba(6,4,16,.5)); z-index: 2; }
.menu-balance { position: absolute; top: 24px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; }
/* the balance itself is a target: it opens the Menu tab, where the full card lives */
.bal-hit { padding: 0; border: none; background: none; cursor: pointer; display: block; line-height: 0; border-radius: 999px; transition: transform .1s var(--ease-out); }
.bal-hit:active { transform: scale(.95); }
.topup-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--grad-card); color: var(--gold-300); font-size: 22px; font-weight: 800; cursor: pointer; display: grid; place-items: center; line-height: 1; box-shadow: var(--shadow-sm, 0 3px 8px rgba(0,0,0,.3)); transition: transform .1s var(--ease-out), background .15s, color .15s, border-color .15s; }
.topup-btn:hover { background: var(--grad-gold); color: #2A1704; border-color: transparent; }
.topup-btn:active { transform: scale(.9); }
.menu-mascot { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); z-index: 1; }
.menu-records { position: absolute; left: 24px; right: 24px; bottom: 276px; display: flex; overflow: hidden; z-index: 2; }
/* The mascot hangs from the top while the records hang from the bottom, so on a short screen
   they meet: the robot ends up behind the card. The app is min(752, vh-48) tall and the two
   collide once the hero drops under ~666px, i.e. below a ~766px viewport — there the mascot
   shrinks and moves up instead of overlapping. It is decoration; the records are content. */
@media (max-height: 766px) {
  .menu-mascot { top: 128px; transform: translateX(-50%) scale(.55); transform-origin: top center; }
}
.menu-records .rec { flex: 1; padding: 14px 10px; text-align: center; }
.menu-records .sep { width: 1px; background: var(--hairline); }
.menu-cta { position: absolute; left: 24px; right: 24px; bottom: 112px; z-index: 2; display: flex; flex-direction: column; gap: 9px; }
.demo-btn { width: 100%; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid rgba(61,220,151,.5); background: rgba(47,169,104,.18); color: #CFF6E2; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; font-family: var(--font-display); transition: transform .08s var(--ease-out), background .15s, border-color .15s, color .15s; }
.demo-btn:hover { background: rgba(61,220,151,.26); border-color: rgba(61,220,151,.75); }
.demo-btn:active { transform: translateY(1px); }
.demo-btn .demo-lbl { display: inline-flex; align-items: center; font-weight: 800; font-size: 14px; letter-spacing: 1px; }
.demo-btn--exit { border-color: rgba(240,69,62,.5); background: rgba(240,69,62,.14); color: #FFD9D5; }
.demo-btn--exit:hover { background: rgba(240,69,62,.22); border-color: rgba(240,69,62,.72); }
.demo-btn small { font-family: var(--font-ui); font-weight: 600; font-size: 10px; opacity: .72; letter-spacing: .2px; }

/* ---- Bet ---- */
.bet-bg { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, #2a1c52, #140d29 70%); }
/* Bet screen flows as a column so nothing ever overlaps at any viewport height:
   mascot → stake → difficulty stack from the top, START is pinned to the bottom. */
.bet-body { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; padding: 22px 24px calc(26px + env(safe-area-inset-bottom)); overflow-y: auto; scrollbar-width: none; }
.bet-body::-webkit-scrollbar { display: none; }
.bet-mascot { flex: 0 0 auto; margin: 6px auto 0; }
.bet-caption { text-align: center; }
.bet-stake { flex: 0 0 auto; margin-top: 20px; text-align: center; }
.stepper { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px; }
.stepper button { width: 52px; height: 52px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #EFE9FF; font-size: 26px; font-weight: 700; cursor: pointer; display: grid; place-items: center; line-height: 1; transition: background .15s, transform .1s; }
.stepper button:hover { background: rgba(255,255,255,.11); }
.stepper button:active { transform: scale(.94); }
.stepper .amt { display: flex; align-items: center; gap: 6px; min-width: 132px; justify-content: center; }
.stepper .amt span { font-weight: 800; font-size: 40px; color: #FFF6E4; font-variant-numeric: tabular-nums; line-height: 1; }
.stepper .amt .cur { font-weight: 800; font-size: 30px; color: #FFF6E4; opacity: .8; }
.bet-input {
  width: 86px; border: none; background: transparent; outline: none;
  font-family: var(--font-ui); font-weight: 800; font-size: 40px; line-height: 1;
  color: #FFF6E4; font-variant-numeric: tabular-nums; text-align: center;
  caret-color: var(--gold-400); padding: 0;
}
.bet-input:focus { color: #fff; }
.bet-diff { flex: 0 0 auto; margin-top: 34px; }
.diffs { display: flex; gap: 10px; }
.diff { flex: 1; padding: 12px 6px; border-radius: 14px; cursor: pointer; font-family: var(--font-ui); font-size: 15px; border: 1px solid rgba(255,255,255,.14); font-weight: 600; color: #C9C2E0; background: rgba(255,255,255,.05); }
.diff.on { border: none; font-weight: 800; box-shadow: 0 4px 0 rgba(0,0,0,.35); }
.diff--easy.on { color: #0c2417; background: linear-gradient(180deg, #7CE0A3, #2FA968); }
.diff--medium.on { color: #231204; background: linear-gradient(180deg, #FFD866, #E0921C); }
.diff--hard.on { color: #2a0d06; background: linear-gradient(180deg, #FF9A76, #D0432A); }
.diff--hardcore.on { color: #2a0512; background: linear-gradient(180deg, #FF7597, #B0203E); }
.bet-start { flex: 0 0 auto; margin-top: auto; padding-top: 26px; }

/* ---- Meta screens (Upgrade / Tasks / Rating) ---- */
.meta-bg { position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, #241a4a, #120c26 70%); }
.meta-title { position: absolute; top: 18px; left: 0; right: 0; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 22px; color: #FFF6E4; z-index: 2; }
.meta-scroll { position: absolute; top: 62px; left: 16px; right: 16px; bottom: 104px; overflow: auto; z-index: 2; }

.perk { display: flex; align-items: center; gap: 12px; padding: 12px; margin-bottom: 10px; }
.perk-icon { width: 52px; height: 52px; flex-shrink: 0; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: inset 0 2px 0 rgba(255,255,255,.3), var(--shadow-sm, 0 4px 10px rgba(0,0,0,.3)); }
.perk-icon--gold { background: var(--grad-gold); }
.perk-icon--purple { background: linear-gradient(180deg, #9A6BFF, #6B4BCE); }
.perk-icon--blue { background: linear-gradient(180deg, #5CA8FF, #2E6FE0); }
.perk-icon--green { background: var(--grad-green); }
.perk-text { flex: 1; min-width: 0; }
.perk-name { font-weight: 700; font-size: 16px; color: var(--cream-100); }
.perk-desc { font-size: 12px; color: var(--text-secondary); margin-top: 3px; }
.perk-buy { flex-shrink: 0; border: none; border-radius: 12px; padding: 10px 14px; background: var(--grad-gold); color: #2A1704; font-weight: 800; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--shadow-sm, 0 4px 10px rgba(0,0,0,.3)); }
.perk-buy.owned { background: rgba(47,169,104,.18); color: #8BE6AE; border: 1px solid rgba(139,230,174,.45); }

.tasks-empty { position: absolute; top: 62px; left: 0; right: 0; bottom: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 44px; z-index: 2; }
.tasks-icon { width: 92px; height: 92px; border-radius: 26px; background: rgba(255,255,255,.05); border: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; font-size: 42px; opacity: .55; }
.tasks-title { font-weight: 700; font-size: 17px; color: var(--cream-100); text-align: center; }
.tasks-sub { font-size: 13px; color: var(--text-secondary); text-align: center; line-height: 1.5; }

.lb-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 12px 14px; border-radius: 14px; background: var(--grad-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-card); }
.lb-row.me { border-color: rgba(255,201,60,.5); box-shadow: 0 0 0 1px rgba(255,201,60,.35), var(--shadow-card); }
.lb-rank { width: 24px; text-align: center; font-weight: 800; color: var(--gold-400); font-variant-numeric: tabular-nums; }
.lb-name { flex: 1; font-weight: 700; color: var(--cream-100); }
.lb-score { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #FFF6E4; font-variant-numeric: tabular-nums; }

/* ---- In-flight HUD ---- */
.hud-prog { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,.08); z-index: 3; }
.hud-prog-fill { height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0); background: linear-gradient(90deg, #A56BFF, var(--gold-400)); box-shadow: 0 0 10px rgba(165,107,255,.6); transition: transform .3s var(--ease-out); }
.hud-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: space-between; }
.hud-logo { height: 40px; filter: drop-shadow(0 4px 6px rgba(6,4,16,.5)); }
.hud-center { position: absolute; top: 60px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hud-dist { font-weight: 700; color: #FFF6E4; font-size: 20px; text-shadow: 0 2px 6px rgba(6,4,16,.6); font-variant-numeric: tabular-nums; }
.hud-dist .u { font-size: .6em; opacity: .8; }
.hud-mult { font-family: var(--font-display); font-weight: 800; font-size: 58px; line-height: 1; color: var(--gold-400); -webkit-text-stroke: 1.5px var(--gold-700); text-shadow: 0 3px 0 rgba(6,4,16,.4), var(--glow-gold); font-variant-numeric: tabular-nums; }
.hud-mult.pop { animation: avora-mult-pop .28s var(--ease-out); }
.hud-pot { color: var(--green-400, #5BE6A0); font-weight: 800; font-size: 15px; min-height: 18px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.fbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; }
@keyframes avora-mult-pop { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* v2 auto-runner HUD */
.hud-left { display: flex; align-items: center; gap: 8px; }
.lvl-badge { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: #2A1704; background: var(--grad-gold); padding: 4px 10px; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm, 0 3px 8px rgba(0,0,0,.3)); }
.hud-pause { width: 38px; height: 38px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(20,12,40,.5); color: #EFE9FF; font-size: 15px; cursor: pointer; backdrop-filter: blur(6px); }
.hud-pause:active { transform: scale(.94); }
.hud-coins { display: flex; align-items: center; gap: 5px; justify-content: center; margin-top: 4px; color: #FFE9A8; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.cashbtn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cash-pot { font-size: 14px; font-weight: 800; opacity: .92; }

/* ---- Result screens (Win / Loss) ---- */
.win-bg { position: absolute; inset: 0; background: radial-gradient(110% 70% at 50% 22%, #3a2a12, #160f2b 68%); }
.loss-bg { position: absolute; inset: 0; background: radial-gradient(110% 70% at 50% 22%, #3a1420, #140b22 66%); }
.win-glow { position: absolute; top: 170px; left: calc(50% - 120px); width: 240px; height: 240px; pointer-events: none; background: radial-gradient(circle, rgba(255,201,60,.5), rgba(255,201,60,0) 66%); animation: avora-glow-pulse 2.6s ease-in-out infinite; }
@keyframes avora-glow-pulse { 0%, 100% { opacity: .5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
.result-mascot { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; }
.win-mascot { top: 92px; }
.loss-mascot { top: 100px; }
.result-head { position: absolute; top: 320px; left: 0; right: 0; text-align: center; z-index: 2; animation: avora-pop .4s var(--ease-out) both; }
.result-title { font-family: var(--font-display); font-weight: 800; font-size: 40px; text-shadow: 0 3px 0 rgba(6,4,16,.4); }
.result-title.gold { color: var(--gold-400); -webkit-text-stroke: 1.5px var(--gold-700); }
.result-title.red { color: #FF8A6E; font-size: 38px; }
.result-sub { font-size: 14px; color: var(--text-secondary); margin-top: 2px; }
.result-card { position: absolute; top: 384px; left: 24px; right: 24px; padding: 14px 16px; text-align: center; z-index: 2; max-height: calc(100% - 384px - 96px); overflow-y: auto; overscroll-behavior: contain; }
.payout-amount { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.payout-amount span { font-weight: 800; font-size: 34px; color: #FFF6E4; font-variant-numeric: tabular-nums; }
.loss-dist { font-weight: 800; font-size: 32px; color: #FFF6E4; font-variant-numeric: tabular-nums; margin-top: 4px; }
.loss-dist .u { font-size: .55em; color: var(--text-secondary); }
.statrow { display: flex; gap: 12px; margin-top: 12px; }
.statblock { flex: 1; padding: 10px 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--hairline); }
.statblock .stat-label { font-size: 10px; }
.statblock-val { font-weight: 800; font-size: 20px; color: #FFF6E4; font-variant-numeric: tabular-nums; margin-top: 2px; }
.statblock-val.gold { color: var(--gold-400); }
.result-actions { position: absolute; left: 24px; right: 24px; bottom: 28px; display: flex; gap: 12px; z-index: 3; }

/* provably-fair panel */
.fairness { margin-top: 14px; text-align: left; }
.fair-toggle { width: 100%; display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--hairline); color: var(--text-secondary); border-radius: 12px; padding: 9px 12px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: var(--font-ui); }
.fair-caret { margin-left: auto; transition: transform .2s; }
.fairness.open .fair-caret { transform: rotate(180deg); }
.fair-badge.ok { color: var(--green-400, #5BE6A0); }
.fair-badge.bad { color: var(--red-500, #F0453E); }
.fair-body { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; text-align: left; }
.fair-body[hidden] { display: none; }
.fair-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11px; color: var(--text-secondary); }
.fair-row code { color: #CFC6EA; font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.fair-link { display: inline-block; margin-top: 4px; color: var(--gold-400); font-size: 12px; font-weight: 700; text-decoration: none; }

/* ---- Shared keyframes ---- */
@keyframes avora-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes avora-pop { 0% { opacity: 0; transform: scale(.7); } 60% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes avora-glow { 0%,100% { opacity: .6; transform: translate(-50%,-50%) scale(1); } 50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } }
@keyframes avora-spin { to { transform: rotate(360deg); } }

/* (The old "short screens" override lived here. It fought the base rule — three sets of
   frame styles for different sizes — and is gone now that the base does the right thing at
   every size.) */

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .screen.active, .toast.show, .result-head, .win-glow, #boot { animation: none !important; }
  .hud-prog-fill, .btn, #navbar button, .hud-pause { transition: none !important; }
}

/* ---- Live results ticker: small, translucent, top-right ---- */
#liveTicker {
  /* Top-left, under the header row so it never sits over the balance / logo. */
  position: absolute; top: 68px; left: 8px; z-index: 5;
  width: 132px; display: flex; flex-direction: column; gap: 3px;
  padding: 5px; border-radius: 12px;
  background: rgba(14,10,31,.34);
  border: 1px solid rgba(255,255,255,.07);
  backdrop-filter: blur(6px);
  pointer-events: none;            /* purely ambient — never eats a tap */
  opacity: .78;
}
#liveTicker.empty { display: none; }
.tick-row {
  display: flex; align-items: center; gap: 5px;
  font-size: 9.5px; line-height: 1.25; white-space: nowrap;
  animation: avora-rise .25s var(--ease-out) both;
}
.tick-name { flex: 1; overflow: hidden; text-overflow: ellipsis; color: #CFC6EA; font-weight: 600; }
.tick-mult { color: var(--gold-300); font-weight: 700; font-variant-numeric: tabular-nums; }
.tick-amt { font-weight: 800; font-variant-numeric: tabular-nums; }
.tick-row.win .tick-amt { color: var(--green-400, #5BE6A0); }
.tick-row.loss .tick-amt { color: #FF8A6E; }

/* Ambient by nature: show it where it adds life (menu, in flight) and stay out of the
   way on screens that own their layout or demand focus. */
#screens[data-screen="bet"] #liveTicker,
#screens[data-screen="win"] #liveTicker,
#screens[data-screen="loss"] #liveTicker,
#screens[data-screen="upgrade"] #liveTicker,
#screens[data-screen="tasks"] #liveTicker,
#screens[data-screen="more"] #liveTicker,
#screens[data-screen="rating"] #liveTicker { display: none; }

/* ---- Leaderboards (two boards) ---- */
.lb-tabs { position: absolute; top: 62px; left: 16px; right: 16px; display: flex; gap: 8px; z-index: 2; }
.lb-tab {
  flex: 1; padding: 9px 6px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--hairline); background: rgba(255,255,255,.05);
  color: #C9C2E0; font-family: var(--font-ui); font-weight: 700; font-size: 12.5px;
  transition: background .15s, color .15s;
}
.lb-tab.on { border: none; color: #2A1704; background: var(--grad-gold); box-shadow: 0 3px 0 rgba(0,0,0,.3); }
.lb-list { top: 112px !important; }
.lb-row.top .lb-rank { color: var(--gold-300); }

/* ---- Bet presets ($1 / $10 / $20 / $50) ---- */
.bet-presets { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.preset {
  min-width: 54px; padding: 8px 10px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--hairline); background: rgba(255,255,255,.05);
  color: #D7CFEC; font-family: var(--font-ui); font-weight: 800; font-size: 13px;
  font-variant-numeric: tabular-nums; transition: background .15s, color .15s, transform .08s;
}
.preset:hover { background: rgba(255,255,255,.09); }
.preset:active { transform: translateY(1px); }
.preset.on { border: none; color: #2A1704; background: var(--grad-gold); box-shadow: 0 3px 0 rgba(0,0,0,.3); }

/* ============================================================
   Company splash — animated AVORA · INTERNATIONAL GAMES logo
   (self-contained CSS/vector; plays on cold load, tap to skip)
   ============================================================ */
#splash {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: #07040e; overflow: hidden;
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
#splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }
#splash.done { display: none; }

.splash-bg {
  position: absolute; inset: 0;
  background: radial-gradient(72% 60% at 50% 45%, #241238 0%, #0c0618 58%, #05030b 100%);
}
.splash-bg::after { /* purple accent glow that breathes up under the wordmark */
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(38% 26% at 50% 55%, rgba(150,86,224,.35), transparent 70%);
  animation: splash-glow 2.6s var(--ease-in-out) both;
}
.splash-sparks { position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(1.5px 1.5px at 22% 34%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 28%, #ffe6b0, transparent),
    radial-gradient(1px 1px at 62% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 33% 68%, #e9c6ff, transparent),
    radial-gradient(1px 1px at 84% 58%, #fff, transparent);
  animation: sparks-in 2.4s var(--ease-out) .6s both;
}

.splash-logo { position: relative; text-align: center; padding: 0 22px; }

.logo-word {
  display: inline-flex;
  font-family: 'Century Gothic', 'Futura', 'Questrial', 'Trebuchet MS', var(--font-ui), sans-serif;
  font-weight: 400; font-size: clamp(38px, 12vw, 88px);
  letter-spacing: .12em; text-indent: .12em; line-height: 1; max-width: 92vw;
  background: linear-gradient(94deg, #8a5a12 0%, #f3c23f 20%, #fff3c8 40%, #f3c23f 58%, #a9741a 82%, #f0be3c 100%);
  background-size: 260% 100%; background-position: 150% 0;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.55)) drop-shadow(0 0 30px rgba(243,194,63,.32));
}
.logo-word span { display: inline-block; }

.logo-rule { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: clamp(10px, 2.4vw, 20px); }
.logo-rule .ln { height: 2px; width: clamp(56px, 18vw, 132px); border-radius: 2px; }
.logo-rule .ln.left { background: linear-gradient(90deg, transparent, #b98bff 85%); box-shadow: 0 0 8px rgba(165,107,255,.55); transform-origin: right center; }
.logo-rule .ln.right { background: linear-gradient(90deg, #b98bff 15%, transparent); box-shadow: 0 0 8px rgba(165,107,255,.55); transform-origin: left center; }
.logo-rule .dot { width: 5px; height: 5px; border-radius: 50%; background: #cdaaff;
  box-shadow: 0 0 10px 2px rgba(165,107,255,.85); }

.logo-sub {
  margin-top: clamp(10px, 2.6vw, 18px); white-space: nowrap;
  font-family: 'Century Gothic', 'Futura', 'Questrial', 'Trebuchet MS', var(--font-ui), sans-serif;
  font-weight: 500; font-size: clamp(10px, 2.9vw, 17px); letter-spacing: .38em; text-indent: .38em;
  color: #e7c579; text-shadow: 0 0 14px rgba(231,197,121,.35);
}

.splash-skip {
  position: absolute; left: 0; right: 0; bottom: calc(38px + env(safe-area-inset-bottom));
  text-align: center; font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: rgba(255,255,255,.28); opacity: 0; animation: fade-soft .6s ease 1.9s forwards;
}

/* timeline */
#splash.play .logo-word { animation: logo-shine .9s var(--ease-out) .55s both; }
#splash.play .logo-word span { animation: letter-in .5s var(--ease-out) both; }
#splash.play .logo-word span:nth-child(1) { animation-delay: .12s; }
#splash.play .logo-word span:nth-child(2) { animation-delay: .19s; }
#splash.play .logo-word span:nth-child(3) { animation-delay: .26s; }
#splash.play .logo-word span:nth-child(4) { animation-delay: .33s; }
#splash.play .logo-word span:nth-child(5) { animation-delay: .40s; }
#splash.play .logo-rule .ln { animation: rule-in .55s var(--ease-out) .6s both; }
#splash.play .logo-rule .dot { animation: dot-in .45s var(--ease-out) .75s both; }
#splash.play .logo-sub { animation: sub-in .7s var(--ease-out) .7s both; }

@keyframes letter-in { from { opacity: 0; transform: translateY(.55em); filter: blur(7px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes logo-shine { from { background-position: 150% 0; } to { background-position: 50% 0; } }
@keyframes rule-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dot-in { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes sub-in { from { opacity: 0; letter-spacing: .62em; text-indent: .62em; } to { opacity: 1; letter-spacing: .38em; text-indent: .38em; } }
@keyframes splash-glow { 0% { opacity: 0; } 55% { opacity: 1; } 100% { opacity: .8; } }
@keyframes sparks-in { 0% { opacity: 0; } 40% { opacity: .5; } 100% { opacity: .32; } }
@keyframes fade-soft { to { opacity: 1; } }

/* Reduced motion: no sequence — reveal the finished logo, then continue. */
#splash.reduced .logo-word, #splash.reduced .logo-word span, #splash.reduced .logo-sub,
#splash.reduced .logo-rule .ln, #splash.reduced .logo-rule .dot,
#splash.reduced .splash-bg::after, #splash.reduced .splash-sparks, #splash.reduced .splash-skip {
  animation: none !important; opacity: 1; transform: none; background-position: 50% 0; letter-spacing: .16em;
}
#splash.reduced .logo-rule .ln { transform: scaleX(1); }
#splash.reduced .logo-sub { opacity: 1; letter-spacing: .38em; }
@media (prefers-reduced-motion: reduce) {
  #splash { transition: opacity .3s linear; }
  #splash.out { transform: none; }
}

/* ============================================================
   Menu footer — responsible-gaming plaque (added below the hero)
   The hero keeps every component exactly where it was; the menu
   simply scrolls to reveal the footer.
   ============================================================ */
.screen[data-screen="menu"] { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.screen[data-screen="menu"]::-webkit-scrollbar { display: none; }

/* Hero = the original single-screen view; absolute children anchor to it unchanged. */
/* Fills the screen box rather than a fixed 700px, so PLAY and the records sit just above the
   navbar at any height. The floor keeps the mascot and the buttons from colliding on a very
   short viewport — below it the screen scrolls, which it always could. */
.menu-hero { position: relative; height: 100%; min-height: 560px; }

/* subtle "there's more below" cue, tucked into the gap above the navbar */
.scroll-cue {
  position: absolute; left: 0; right: 0; bottom: 104px; z-index: 1;
  text-align: center; font-size: 12px; line-height: 1; color: rgba(255,214,102,.5);
  pointer-events: none; animation: cue-bounce 1.8s var(--ease-in-out) infinite;
}
@keyframes cue-bounce { 0%,100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(3px); opacity: .7; } }

.rg-footer {
  position: relative; z-index: 1;
  padding: 22px 20px calc(var(--navbar-height) + 22px);
  background: linear-gradient(180deg, #120c22 0%, #0c0818 100%);
  border-top: 1px solid rgba(245,179,60,.14);
}
.rg-brand { display: flex; flex-direction: column; gap: 6px; }
.rg-logo {
  font-family: 'Century Gothic', 'Futura', 'Questrial', var(--font-ui), sans-serif;
  font-weight: 500; font-size: 24px; letter-spacing: .14em;
  color: #f0be3c; text-shadow: 0 0 16px rgba(243,194,63,.28); line-height: 1;
  display: inline-flex; align-items: baseline; gap: 10px;
}
.rg-logo span { font-size: 8px; letter-spacing: .32em; color: #c99a2e; font-weight: 600; }
.rg-tag { font-size: 12.5px; color: var(--text-secondary); letter-spacing: .2px; }

.rg-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; }
.rg-age {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 16px;
  background: linear-gradient(180deg, #ff5a53, #e0342d);
  color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: .5px;
  box-shadow: 0 6px 16px rgba(224,52,45,.38), inset 0 1px 0 rgba(255,255,255,.35);
}
.rg-text {
  margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: #C6BEDD;
  max-width: 62ch; text-wrap: pretty;
}
.rg-fine {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.05);
  font-size: 11px; letter-spacing: .3px; color: #968DAE;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue, .nav-wheel-glow, .nav-wheel-badge, .nav-wheel-ribbon { animation: none; }
}

/* ============================================================
   Daily fortune wheel — modal (opened from the navbar centre)
   ============================================================ */
.wheel-modal {
  position: fixed; inset: 0; z-index: 140; display: none;
  overflow-y: auto; padding: 16px;   /* scroll if the sheet is taller than the viewport */
  background: rgba(6,4,16,.72); backdrop-filter: blur(4px);
}
.wheel-modal.show { display: flex; animation: avora-rise .2s var(--ease-out) both; }
.wheel-sheet {
  position: relative; margin: auto;  /* centres, and stays fully reachable when it overflows */
  width: 100%; max-width: 340px; text-align: center;
  background: var(--grad-card); border: 1px solid var(--hairline);
  border-radius: 24px; padding: 22px 20px 20px; box-shadow: var(--shadow-lg);
}
.wheel-x {
  position: absolute; top: 12px; right: 12px; width: 32px; height: 32px;
  display: grid; place-items: center; border: none; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.07); color: #EFE9FF; font-size: 14px;
}
.wheel-x:hover { background: rgba(255,255,255,.13); }
.wheel-brand { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: 1px; color: var(--gold-300); }
.wheel-brand-sub { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.wheel-stage { position: relative; width: min(264px, 72vw); height: min(264px, 72vw); margin: 18px auto 6px; }
.wheel-pointer {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 22px solid var(--gold-400); filter: drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
.wheel-ring {
  position: absolute; inset: 0; border-radius: 50%; padding: 8px;
  background: linear-gradient(180deg, #3a2c66, #241a44);
  box-shadow: 0 12px 30px rgba(0,0,0,.5), inset 0 0 0 4px rgba(255,255,255,.06);
}
.wheel-disc {
  position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.18), inset 0 0 26px rgba(0,0,0,.35);
  transition: transform 4.1s cubic-bezier(.16,.84,.24,1); will-change: transform;
}
.wheel-disc svg { display: block; width: 100%; height: 100%; }
.wheel-hub {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2;
  width: 52px; height: 52px; border-radius: 50%; border: 4px solid #fff;
  background: radial-gradient(circle at 40% 35%, #7CC0FF, #2E6FE0 72%);
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.wheel-result { min-height: 22px; margin: 8px 0 2px; font-size: 16px; font-weight: 700; color: #FFF6E4; }
.wheel-result b { color: var(--gold-300); font-size: 19px; }
.wheel-spin { width: 100%; margin-top: 6px; }
.wheel-status { min-height: 16px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }

@media (prefers-reduced-motion: reduce) {
  .nav-wheel-disc { animation: none; }
  .wheel-disc { transition: transform 1.2s ease-out; }
}

/* ============================================================
   Daily missions (Tasks screen) + soft-currency wallet strip
   Rewards are Coins / Flight Tickets — never the bet balance.
   ============================================================ */
.meta-sub { position: absolute; top: 46px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--text-secondary); z-index: 2; }
.wallet-strip { position: absolute; top: 72px; left: 16px; right: 16px; z-index: 2; display: flex; gap: 10px; }
.wal {
  flex: 1; display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: var(--radius-md);
  background: var(--grad-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  font-variant-numeric: tabular-nums;
}
.wal b { font-size: 16px; font-weight: 800; color: #FFF6E4; }
.wal small { font-size: 10.5px; letter-spacing: .3px; color: var(--text-secondary); margin-left: auto; }
.wal-i { display: inline-flex; align-items: center; }
.wal-i--t { font-size: 15px; color: var(--green-400, #5CE8AE); }

.bonus-scroll { top: 124px !important; }
.miss-reset { margin: 4px 0 10px; text-align: center; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---- Lucky Box card (guaranteed every N rounds) ---- */
.box {
  display: flex; align-items: center; gap: 11px; padding: 12px;
  border-radius: var(--radius-lg); background: var(--grad-card);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
}
.box.is-ready { border-color: rgba(255,201,60,.45); }
.box-art {
  position: relative; width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px;
  display: grid; place-items: center; font-size: 24px;
  background: rgba(255,255,255,.05); border: 1px solid var(--hairline);
}
.box.is-ready .box-art { animation: box-bob 2.2s var(--ease-in-out) infinite; }
.box-badge {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--grad-gold); color: #2A1704; font-size: 11px; font-weight: 800; font-style: normal;
  box-shadow: 0 2px 6px rgba(0,0,0,.45);
}
.box-body { flex: 1; min-width: 0; }
.box-hint { font-size: 11px; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.box.is-ready .box-hint { color: var(--gold-300); }
.box-btn {
  border: none; border-radius: 12px; padding: 9px 14px; cursor: pointer;
  color: #2A1704; background: var(--grad-gold); box-shadow: 0 3px 0 rgba(0,0,0,.3);
  font-family: var(--font-ui); font-weight: 800; font-size: 13px; white-space: nowrap;
  animation: miss-pulse 2s var(--ease-in-out) infinite;
}
.box-btn:hover { filter: brightness(1.06); }
.box-btn:active { transform: translateY(2px); box-shadow: none; }
.box-btn:disabled { filter: saturate(.4) brightness(.8); animation: none; cursor: default; }
.box-prize {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 0; padding: 10px 12px;
  border-radius: var(--radius-md); background: rgba(255,201,60,.10); border: 1px solid rgba(255,201,60,.35);
  font-size: 13px; font-weight: 700; color: #FFF6E4;
  animation: avora-pop .38s var(--ease-out) both;
}
.box-prize-i { font-size: 19px; }
.rw--spin { color: var(--purple-200, #C9BCF0); }
@keyframes box-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-3px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .box.is-ready .box-art, .box-btn { animation: none; } .box-prize { animation: none; } }

.miss {
  display: flex; align-items: center; gap: 11px; margin-bottom: 10px; padding: 12px;
  border-radius: var(--radius-lg); background: var(--grad-card);
  border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  transition: opacity .15s;
}
.miss.done { opacity: .62; }
.miss-icon {
  width: 44px; height: 44px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center;
  font-size: 22px; background: rgba(255,255,255,.05); border: 1px solid var(--hairline);
}
.miss-body { flex: 1; min-width: 0; }
.miss-top { display: flex; align-items: center; gap: 8px; }
.miss-name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; color: var(--cream-100); }
.rw { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: var(--gold-300); font-variant-numeric: tabular-nums; }
.rw--ticket { color: var(--green-400, #5CE8AE); }
.miss-bar { margin-top: 8px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.miss-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad-gold); transition: width .4s var(--ease-out); }
.miss.done .miss-bar i { background: var(--grad-green); }
.miss-act { flex-shrink: 0; display: flex; align-items: center; }
.miss-count { font-size: 12px; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.miss-btn {
  border: none; border-radius: 12px; padding: 9px 14px; cursor: pointer;
  font-family: var(--font-ui); font-weight: 800; font-size: 13px; white-space: nowrap;
  transition: filter .15s, transform .1s;
}
.miss-btn.is-ready { color: #2A1704; background: var(--grad-gold); box-shadow: 0 3px 0 rgba(0,0,0,.3); animation: miss-pulse 2s var(--ease-in-out) infinite; }
.miss-btn.is-ready:hover { filter: brightness(1.06); }
.miss-btn.is-ready:active { transform: translateY(2px); box-shadow: none; }
.miss-btn.is-claimed { background: rgba(61,220,151,.14); color: #8BE6AE; border: 1px solid rgba(139,230,174,.4); cursor: default; }
@keyframes miss-pulse { 0%, 100% { box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 0 0 rgba(255,201,60,.5); } 50% { box-shadow: 0 3px 0 rgba(0,0,0,.3), 0 0 12px 3px rgba(255,201,60,.45); } }
@media (prefers-reduced-motion: reduce) { .miss-btn.is-ready { animation: none; } .miss-bar i { transition: none; } }

/* ============================================================
   Lucky Box opening — the celebration moment
   Four beats: anticipation → crescendo → burst → rarity reveal.
   The prize is decided server-side; this only stages it.
   Everything animated is transform / opacity / filter, and the
   expensive glow is bounded to the 300px stage.
   ============================================================ */
.case {
  position: fixed; inset: 0; z-index: 150; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 22px;
  background: radial-gradient(60% 50% at 50% 46%, rgba(38,20,74,.94), rgba(6,4,16,.97) 70%);
  opacity: 0; transition: opacity .22s var(--ease-out);
  --tier: #9E86E2;   /* rarity colour, overridden per tier */
}
.case.show { display: flex; opacity: 1; }
.case.revealed { cursor: pointer; }
.tier-uncommon { --tier: #5CE8AE; }
.tier-rare     { --tier: #E8548E; }
.tier-epic     { --tier: #F5B33C; }
.tier-legend   { --tier: #FFD866; }

.case-stage { position: relative; width: 300px; height: 300px; display: grid; place-items: center; }

/* rotating god-rays behind everything — they speed up as tension builds */
.case-rays {
  position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(255,255,255,.14) 0 6deg, transparent 6deg 30deg,
    rgba(255,255,255,.10) 30deg 34deg, transparent 34deg 60deg);
  opacity: 0; animation: case-spin 9s linear infinite;
  transition: opacity .5s var(--ease-out);
  mask-image: radial-gradient(circle, #000 30%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 72%);
}
.case.show .case-rays { opacity: .5; }
.case.crescendo .case-rays { animation-duration: 2.4s; opacity: .85; }
.case.revealed .case-rays { animation-duration: 14s; opacity: .6; }

/* halo that swells under the box, then becomes the prize aura */
.case-halo {
  position: absolute; width: 190px; height: 190px; border-radius: 50%;
  background: radial-gradient(circle, var(--tier) 0%, transparent 68%);
  opacity: .3; transform: scale(.72); filter: blur(6px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
.case.crescendo .case-halo { opacity: .62; transform: scale(1); animation: case-throb .5s var(--ease-in-out) infinite; }
.case.burst .case-halo { opacity: 1; transform: scale(1.5); animation: none; }
.case.revealed .case-halo { opacity: .34; transform: scale(1.12); animation: case-throb 2.6s var(--ease-in-out) infinite; }

/* shockwave ring on the burst */
.case-ring {
  position: absolute; width: 150px; height: 150px; border-radius: 50%;
  border: 3px solid var(--tier); opacity: 0; transform: scale(.5);
}
.case.burst .case-ring { animation: case-shock .62s var(--ease-out) forwards; }

.case-sparks { position: absolute; inset: 0; pointer-events: none; }
.case-sparks i {
  position: absolute; top: 50%; left: 50%; width: 5px; height: 5px; margin: -2.5px;
  border-radius: 50%; background: var(--tier); box-shadow: 0 0 8px var(--tier);
  animation: case-fall 1.5s var(--ease-out) infinite;
}
.case.revealed .case-sparks i { animation: case-fly .9s var(--ease-out) forwards; }

/* the box: lands, breathes, then shakes itself apart */
.case-box {
  position: relative; font-size: 92px; line-height: 1;
  filter: drop-shadow(0 14px 26px rgba(0,0,0,.6));
  animation: case-land .5s var(--ease-out) both, case-breathe 1.6s var(--ease-in-out) .5s infinite;
}
.case.crescendo .case-box { animation: case-shake .12s linear infinite; }
.case.burst .case-box { animation: case-pop .22s var(--ease-out) forwards; }
.case.revealed .case-box { display: none; }

.case-flash {
  position: absolute; inset: -40px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #fff 0%, rgba(255,236,190,.5) 30%, transparent 66%);
  opacity: 0;
}
.case.burst .case-flash { animation: case-flash .5s var(--ease-out) forwards; }

/* the prize card — its resting state is fully visible, so a stalled animation still shows the win */
.case-card {
  position: absolute; margin: 0; display: none; flex-direction: column; align-items: center; gap: 6px;
  padding: 20px 26px; border-radius: var(--radius-xl);
  background: linear-gradient(180deg, #2a2150, #171034);
  border: 1px solid var(--tier);
  box-shadow: 0 18px 46px rgba(0,0,0,.6), 0 0 44px -6px var(--tier), inset 0 1px 0 rgba(255,255,255,.1);
  overflow: hidden;
}
.case.revealed .case-card { display: flex; animation: case-rise .5s var(--ease-out) both; }
.case-icon { font-size: 58px; line-height: 1; filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.case-name {
  font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .4px;
  color: var(--tier);
}
.case-amt { display: flex; gap: 12px; font-weight: 800; font-size: 17px; color: #FFF6E4; font-variant-numeric: tabular-nums; }

/* legendary gets a slow sweeping sheen across the card */
.tier-legend.revealed .case-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.16) 50%, transparent 60%);
  animation: case-sheen 2.2s var(--ease-in-out) .5s infinite;
}

.case-hint { font-size: 12px; letter-spacing: .4px; color: var(--text-muted); min-height: 16px; }

@keyframes case-spin  { to { transform: rotate(360deg); } }
@keyframes case-throb { 0%, 100% { opacity: .42; } 50% { opacity: .72; } }
@keyframes case-land  { from { opacity: 0; transform: translateY(-52px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes case-breathe { 0%, 100% { transform: scale(1) rotate(-1.5deg); } 50% { transform: scale(1.05) rotate(1.5deg); } }
@keyframes case-shake {
  0%   { transform: translate(-3px, 1px) rotate(-5deg) scale(1.04); }
  25%  { transform: translate(4px, -2px) rotate(5deg) scale(1.07); }
  50%  { transform: translate(-4px, 2px) rotate(-6deg) scale(1.05); }
  75%  { transform: translate(3px, -1px) rotate(6deg) scale(1.08); }
  100% { transform: translate(-3px, 1px) rotate(-5deg) scale(1.04); }
}
@keyframes case-pop   { 0% { transform: scale(1.08); opacity: 1; } 45% { transform: scale(1.5); opacity: .9; } 100% { transform: scale(.2); opacity: 0; } }
@keyframes case-flash { 0% { opacity: 0; transform: scale(.5); } 18% { opacity: .85; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes case-shock { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes case-rise  { from { opacity: 0; transform: translateY(26px) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes case-fall  { 0% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.4); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 0) scale(1); } }
@keyframes case-fly   { 0% { opacity: 1; transform: translate(0, 0) scale(1); } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(.3); } }
@keyframes case-sheen { 0%, 65% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Reduced motion: the moment still happens, it just doesn't shake or flash. */
@media (prefers-reduced-motion: reduce) {
  .case-rays, .case-halo, .case-box, .case-sparks i,
  .tier-legend.revealed .case-card::after { animation: none !important; }
  .case-box { display: none; }
  .case.revealed .case-card { animation: none; }
  .case-halo { opacity: .5; transform: scale(1.12); }
}
.wal-i--s { font-size: 14px; }
/* Spend a Flight Ticket instead of the balance — secondary to the main START button. */
.ticket-btn {
  width: 100%; margin-top: 10px; padding: 12px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid rgba(61,220,151,.45); background: rgba(47,169,104,.16); color: #CFF6E2;
  font-family: var(--font-display); font-weight: 800; font-size: 14px; letter-spacing: .5px; cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s var(--ease-out);
}
.ticket-btn i { font-style: normal; padding: 1px 8px; border-radius: 999px; background: rgba(61,220,151,.22); font-size: 12px; }
.ticket-btn:hover { background: rgba(61,220,151,.26); border-color: rgba(61,220,151,.72); }
.ticket-btn:active { transform: translateY(1px); }
.ticket-btn:disabled { opacity: .6; cursor: default; }

/* ---- Win streak: three pips that fill as you bank wins in a row ---- */
.streak {
  display: flex; align-items: center; gap: 10px;
  margin: 8px 0 2px; padding: 6px 12px;   /* the payout card is height-capped — stay slim */
  border-radius: 12px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px; font-weight: 700; color: var(--text-dim, #B9AFD6);
}
.streak-lbl { letter-spacing: .2px; }
.streak-pips { display: flex; gap: 6px; margin-left: auto; }
.streak-pips i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .35);
  transition: background .25s ease, box-shadow .25s ease;
}
.streak-pips i.on {
  background: linear-gradient(180deg, #FFD866, #F5A623);
  box-shadow: 0 0 8px rgba(245, 166, 35, .55);
}
.streak-note { min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; }
.streak.is-done {
  border-color: rgba(245, 179, 60, .45);
  background: linear-gradient(180deg, rgba(245, 179, 60, .16), rgba(245, 179, 60, .06));
  color: #FFE1A3;
}
.streak.is-done .streak-note { min-width: 0; }
/* On the result card the strip rides beside the "payout" label — that card is height-capped
   and a full row of its own would push the fairness panel out of view. */
.result-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.streak--inline {
  margin: 0; padding: 3px 9px; border-radius: 999px; gap: 7px;
  font-size: 11px; background: rgba(255, 255, 255, .04);
}
.streak--inline .streak-lbl { opacity: .9; }
.streak--inline .streak-note { min-width: 0; }
.streak--inline .streak-pips i { width: 7px; height: 7px; }

/* Cashback line on the loss screen: soft currency back, never money. */
.cashback {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin: 10px 0 2px; padding: 7px 12px; border-radius: 12px;
  background: rgba(61, 220, 151, .12);
  border: 1px solid rgba(61, 220, 151, .32);
  color: #CFF6E2; font-size: 12px; font-weight: 700;
}
.cashback b { display: inline-flex; align-items: center; gap: 5px; color: #FFE1A3; }
/* Weekly mission card sits right under the Lucky Box, same rhythm. */
.week-card { margin-top: 10px; }

/* ---- Экран «Ещё»: профиль + баннер новостей (Figma node 5:3) ---- */
.more-scroll {
  position: absolute; top: 18px; left: 0; right: 0; bottom: 104px;
  padding: 0 16px;
  overflow-y: auto; overflow-x: hidden; z-index: 2; display: flex; flex-direction: column; gap: 6px;
}

.prof-card {
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(62, 0, 246, .22) 15%, rgba(10, 32, 32, .22) 57%),
              var(--grad-card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-card);
}
.prof-head { display: flex; align-items: center; gap: 8px; }
/* синяя плашка из макета обнимает аватар и имя, стрелка стоит за ней */
.prof-pill {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 6px; border-radius: 12px; background: rgba(0, 117, 255, .28);
}
.prof-ava { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.prof-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prof-who b { font-size: 14px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prof-who i { font-style: normal; font-size: 10px; color: rgba(255, 255, 255, .62); }
.prof-more { margin-left: auto; color: rgba(255, 255, 255, .75); flex: none; }

.prof-bal { margin: 12px 4px 0; }
.prof-bal-top { display: flex; align-items: center; gap: 10px; }
.prof-bal-lbl { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.prof-tag {
  padding: 2px 10px; border-radius: 999px; font-size: 9px; font-weight: 700; color: #fff;
  background: linear-gradient(90deg, #25D366 15%, #085227 81%);
}
.prof-bal-val { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 20px; color: #FFF6E4; }

.prof-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 2px 2px; min-width: 0; }
.pbtn {
  /* min-width:0 matters: a flex item refuses to shrink below its content width by default,
     so without it the pair overflowed the profile column and ran under the loyalty tile.
     The 80px basis is the wrap point: side by side wherever both labels fit, stacked on a
     320px phone instead of cutting the words in half. */
  flex: 1 1 80px; min-width: 0; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 9px 6px; border: 0; border-radius: 11px; cursor: pointer;
  font-family: var(--font-display); font-weight: 800; font-size: 12px; color: #fff;
  transition: filter .15s, transform .08s var(--ease-out);
}
.pbtn:hover { filter: brightness(1.08); }
.pbtn:active { transform: translateY(1px); }
.pbtn:disabled { opacity: .6; cursor: default; }
.pbtn--dep { background: #12B857; }
.pbtn--wd { background: #C8102E; }
/* «+» из макета — две линии, а не глиф шрифта */
.pbtn-plus { position: relative; width: 9px; height: 9px; flex: none; }
.pbtn-plus::before, .pbtn-plus::after {
  content: ''; position: absolute; background: #fff; border-radius: 1px;
}
.pbtn-plus::before { left: 0; right: 0; top: 4px; height: 1.4px; }
.pbtn-plus::after { top: 0; bottom: 0; left: 4px; width: 1.4px; }
.pbtn-arr { flex: none; }

.news-card { position: relative; border-radius: 16px; overflow: hidden; line-height: 0; }
.news-card img { width: 100%; height: auto; display: block; }
/* Соцкнопки нарисованы в баннере: прозрачные зоны нажатия поверх них. */
.news-hit {
  position: absolute; top: 53.4%; height: 32.6%;
  border-radius: 10px; -webkit-tap-highlight-color: transparent;
}
.news-hit:active { background: rgba(255, 255, 255, .14); }

/* ---- Loyalty programme (profile card, More screen) ---- */
.loy {
  margin: 10px 4px 0; padding: 10px 12px 11px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid rgba(255, 255, 255, .08);
}
.loy-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.loy-name { font-size: 11px; font-weight: 700; color: rgba(255, 255, 255, .72); letter-spacing: .2px; }
.loy-lvl {
  font-family: var(--font-display); font-weight: 800; font-size: 11px; color: #2A1704;
  background: var(--grad-gold); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.loy-bar {
  margin-top: 8px; height: 6px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, .1);
}
.loy-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad-gold); transition: width .3s var(--ease-out); }
/* one dot per tier: dim = locked, gold = ready to take, green = already taken */
.loy-tiers { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.loy-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.loy-dot.on { background: var(--grad-gold); box-shadow: 0 0 7px rgba(245, 179, 60, .6); }
.loy-dot.got { background: linear-gradient(180deg, #7CE0A3, #2FA968); }
.loy-next {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 9px; font-size: 11px; color: var(--text-secondary);
}
.loy-claim {
  width: 100%; margin-top: 9px; padding: 8px 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: none; border-radius: 10px; cursor: pointer;
  background: var(--grad-gold); color: #2A1704;
  font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: .3px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
  transition: filter .15s, transform .08s var(--ease-out);
}
.loy-claim:hover { filter: brightness(1.06); }
.loy-claim:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0, 0, 0, .28); }
.loy-claim:disabled { opacity: .65; cursor: default; }
.loy .rw { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; }
/* the reward chips inherit a muted colour elsewhere; on the gold button they must read dark */
.loy-claim .rw, .loy-claim .rw b { color: #2A1704; }

/* ---- Menu rows (About / Privacy / Terms) ---- */
.mlist { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.mrow {
  width: 100%; display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-radius: 14px; cursor: pointer;
  background: var(--grad-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  color: var(--cream-100); font-family: var(--font-ui); font-weight: 600; font-size: 14px; text-align: left;
  transition: background .15s, transform .08s var(--ease-out);
}
.mrow:hover { border-color: rgba(255, 255, 255, .18); }
.mrow:active { transform: translateY(1px); }
.mrow-i { font-size: 17px; line-height: 1; flex: none; }
.mrow-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow-c { flex: none; color: rgba(255, 255, 255, .45); }

/* Company location — always English, per brand. */
.more-foot {
  margin: 14px 0 6px; text-align: center;
  font-size: 11px; letter-spacing: .6px; color: rgba(255, 255, 255, .38);
}

/* ---- Info sheet ---- */
.sheet {
  position: fixed; inset: 0; z-index: 160; display: none;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(6, 4, 16, .74);
}
.sheet.show { display: flex; animation: avora-rise .18s var(--ease-out) both; }
.sheet-panel {
  position: relative; width: 100%; max-width: 340px;
  max-height: calc(100% - 36px); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 20px 18px 18px; border-radius: 22px;
  background: var(--grad-card); border: 1px solid var(--hairline); box-shadow: var(--shadow-lg);
}
.sheet-x {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px;
  display: grid; place-items: center; border: none; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: #EFE9FF; font-size: 13px;
}
.sheet-title {
  font-family: var(--font-display); font-weight: 800; font-size: 17px; color: #FFF6E4;
  padding-right: 34px;
}
.sheet-body { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); overflow-wrap: break-word; }
.sheet-ok {
  width: 100%; margin-top: 16px; padding: 11px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--grad-gold); color: #2A1704;
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .3px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .28);
}
.sheet-ok:active { transform: translateY(1px); box-shadow: 0 2px 0 rgba(0, 0, 0, .28); }
/* The Menu column is a flex column: without this its items shrink to fit, which squashed the
   news banner (an image whose height must follow its width) once the rows were added. */
.more-scroll > * { flex: 0 0 auto; }
/* clear the wheel badge that floats above the navbar */
.more-foot { margin-bottom: 30px; }

/* ---- Menu first block: profile on the left, loyalty tile on the right (design node 5:3) ---- */
.prof-card { display: flex; gap: 10px; align-items: stretch; }
.prof-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.prof-main .prof-acts { margin-top: auto; }

.loy-tile {
  /* 34%/104px is the widest tile that still leaves the Deposit/Withdraw pair room to sit side
     by side on a 390x844 phone — the app fits its column to a phone aspect, so a taller
     viewport makes that column narrower, not wider. */
  flex: 0 0 34%; min-width: 104px; position: relative; padding: 0; cursor: pointer;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(124, 224, 163, .45);
  background: radial-gradient(120% 90% at 50% 18%, #16451f 0%, #071309 72%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 6px 16px rgba(0, 0, 0, .45);
  transition: transform .08s var(--ease-out), border-color .15s;
}
.loy-tile:hover { border-color: rgba(124, 224, 163, .8); }
.loy-tile:active { transform: translateY(1px); }
/* The artwork carries its own rounded frame and glow, so with it in place the tile drops its
   own border and shadow — otherwise the card is framed twice. `contain` keeps the whole
   composition (crown, wordmark, three feature icons) rather than cropping it to the tile. */
.loy-tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* near-black behind the art so its own glow blends instead of sitting on a green wash */
.loy-tile:not(.noart) { border-color: transparent; box-shadow: none; background: #07120a; }
/* fallback drawing, shown until the artwork file is dropped in */
.loy-tile .tile-fb { display: none; }
.loy-tile.noart img { display: none; }
.loy-tile.noart .tile-fb {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  height: 100%; padding: 10px 8px; text-align: center;
}
.tile-crown { font-size: 26px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .6)); }
.tile-t1 { font-size: 11px; font-weight: 700; color: #EAFBEF; margin-top: 4px; }
.tile-t2 {
  font-family: var(--font-display); font-weight: 800; font-size: 13px; line-height: 1.05;
  color: #9BE870; text-shadow: 0 0 10px rgba(155, 232, 112, .45);
}
.tile-f { display: flex; gap: 6px; margin-top: 6px; font-size: 11px; font-style: normal; }
.tile-f i { font-style: normal; }
.loy-tile-badge {
  position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--grad-gold); box-shadow: 0 0 8px rgba(255, 201, 60, .8);
}
.loy-tile-badge[hidden] { display: none; }

/* ---- Promo banners (affiliate, support) ---- */
.promo {
  position: relative; width: 100%; padding: 0; cursor: pointer; display: block;
  border-radius: 16px; overflow: hidden; line-height: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  transition: transform .08s var(--ease-out), border-color .15s;
}
.promo:active { transform: translateY(1px); }
.promo img { display: block; width: 100%; height: auto; }
/* same as the tile: the banner art already has its frame and glow baked in */
.promo:not(.noart) { border-color: transparent; }
.promo .promo-fb { display: none; }
.promo.noart img { display: none; }
.promo.noart .promo-fb {
  display: flex; flex-direction: column; gap: 3px; align-items: flex-start;
  padding: 16px 18px; line-height: 1.25; text-align: left;
}
.promo-t { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: #FFF6E4; }
.promo-brand {
  font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: .5px;
  background: linear-gradient(180deg, #FFE79A, #E0921C);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.promo-s { font-size: 12px; color: rgba(255, 255, 255, .7); }
.promo-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.promo-feats i { font-style: normal; font-size: 10.5px; color: rgba(255, 255, 255, .75); }
.promo--aff.noart { background: radial-gradient(120% 140% at 12% 20%, #4b1d7a 0%, #200a3a 70%); border-color: rgba(167, 90, 255, .5); }
.promo--sup.noart { background: radial-gradient(120% 140% at 88% 25%, #0d3355 0%, #060f22 72%); border-color: rgba(90, 190, 255, .45); }

/* the loyalty panel inside the sheet has no card of its own */
.sheet-body .loy { background: none; border: 0; padding: 0; margin: 12px 0 0; }