@font-face {
  font-family: "Vazirmatn";
  src: url("../assets/fonts/Vazirmatn-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #0b0b0d;
  --surface: #2a2a2e;
  --surface-2: #1d1d20;
  --line: #5c5c62;
  --line-soft: #3a3a3f;
  --text: #f1ece4;
  --muted: #9d9ba0;
  --cream: #f6ecd9;
  --orange: #ee8a3a;
  --orange-deep: #c9621f;
  --orange-line: #d8732b;
  --green: #5fcf72;
  --red: #ef5a50;
  --radius-lg: 22px;
  --radius: 14px;
  --gutter: 16px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--noise), radial-gradient(ellipse at top, #17171a, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }

.icon { width: 20px; height: 20px; flex: none; }
.text-orange { color: var(--orange); }
.text-green { color: var(--green); }

.dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
}

.desktop-only { display: none !important; }

.page {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px var(--gutter) calc(32px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Shared surfaces */
.panel {
  background: var(--noise), linear-gradient(180deg, #313135, #242427);
  border: 2px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .35);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-weight: 800;
  white-space: nowrap;
  transition: transform .15s ease, filter .15s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }

/* Designer clay button (originals in design/buttons-original/). Both SVGs embed the same clay
   texture and crop its central strip, which is what cover + center reproduces at any size.
   The SVG filter stack (drop shadow, light inner highlight, dark inner shadow) is redone as box-shadow. */
.btn--clay {
  color: #2b1404;
  font-weight: 900;
  background: #e07a2c url("../assets/img/btn-clay.webp") center / cover no-repeat;
  text-shadow: 0 1px 0 rgba(255, 217, 168, .45);
  box-shadow:
    inset -2px 3px 6px rgba(255, 224, 184, .55),
    inset 2px -4px 8px rgba(89, 33, 5, .6),
    0 6px 14px rgba(0, 0, 0, .55);
  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}
.btn--clay:hover { filter: brightness(1.07) saturate(1.05); transform: translateY(-1px); }
.btn--clay:active {
  filter: brightness(.95);
  transform: translateY(1px);
  /* Pressed: light edge flips to the bottom, dark edge to the top, drop shadow tightens. */
  box-shadow:
    inset 1px -2px 5px rgba(255, 224, 184, .35),
    inset -1px 4px 9px rgba(89, 33, 5, .65),
    0 2px 6px rgba(0, 0, 0, .55);
}
.btn--clay:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
/* Disabled: drained of colour and flattened, so it never reads as clickable clay. */
.btn--clay:disabled,
.btn--clay[aria-disabled="true"] {
  color: rgba(43, 20, 4, .7);
  text-shadow: none;
  filter: grayscale(.85) brightness(.62);
  opacity: .8;
  transform: none;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45);
  cursor: not-allowed;
}
.btn--clay[aria-busy="true"] { cursor: progress; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.badge--green { color: var(--green); background: rgba(95, 207, 114, .1); border-color: rgba(95, 207, 114, .45); }
.badge--points { color: var(--orange); background: rgba(238, 138, 58, .12); border-color: rgba(238, 138, 58, .45); border-radius: 999px; padding: 4px 12px; }
.badge--muted { color: #e1a26a; background: rgba(0, 0, 0, .3); border-color: var(--line-soft); border-radius: 999px; padding: 4px 12px; }
.badge--live { color: var(--green); background: rgba(95, 207, 114, .12); border-radius: 999px; padding: 4px 12px; }
.badge--live .dot { width: 6px; height: 6px; animation: pulse 1.6s ease-in-out infinite; }

@keyframes pulse { 50% { opacity: .3; } }

.section-title {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.5;
}

/* 1. Top bar (like the Wheel of Luck's): «بازگشت به توایکس» (right) + «ورود» / points pill (left) */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
}

.back-twox {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 4px 12px 4px 5px;
  border: 1px solid rgba(214, 214, 222, .32);
  border-radius: 999px;
  background: rgba(20, 20, 24, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
}
.back-twox__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: var(--orange);
}
.back-twox__icon .icon { width: 13px; height: 13px; }
.back-twox__label { overflow: hidden; text-overflow: ellipsis; }
.back-twox:hover { border-color: rgba(214, 214, 222, .6); }
.back-twox:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.points-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 14px;
  border: 1px solid rgba(216, 115, 43, .65);
  border-radius: 999px;
  background: linear-gradient(180deg, #2c1b10, #160e09);
  box-shadow: 0 0 14px rgba(216, 115, 43, .22), inset 0 1px 0 rgba(255, 200, 150, .12);
  color: var(--orange);
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
}
.points-pill[hidden] { display: none; }
.badge--online[hidden] { display: none; } /* a game not on yet (games.js GAME_ENABLED) */
.points-pill:hover { border-color: var(--orange); }
.points-pill:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.points-pill__coin { width: 20px; height: 20px; flex: none; filter: drop-shadow(0 0 4px rgba(238, 138, 58, .45)); }
.points-pill__value { min-width: 2ch; font-variant-numeric: tabular-nums; }
.points-pill[data-state="loading"] .points-pill__value,
.points-pill[data-state="error"] .points-pill__value { color: var(--muted); }

/* Account slot: «ورود» for guests, the points pill once logged in. */
.topbar__auth { flex: none; display: flex; align-items: center; }
.topbar__auth:not([data-state]) { visibility: hidden; }
.topbar__auth[data-state="user"] .auth-login { display: none; }
.topbar__auth[data-state="guest"] .points-pill { display: none; }

.auth-login {
  padding: 5px 22px;
  border: 0;
  font-family: inherit;
  font-size: 12.5px;
  line-height: 1.6;
  cursor: pointer;
}
/* Same clay look, with the shadows scaled down to the ~30px pill. */
.auth-login.btn--clay {
  box-shadow:
    inset -1px 2px 4px rgba(255, 224, 184, .55),
    inset 1px -3px 5px rgba(89, 33, 5, .6),
    0 4px 10px rgba(0, 0, 0, .5);
}
.auth-login.btn--clay:active {
  box-shadow:
    inset 1px -1px 3px rgba(255, 224, 184, .35),
    inset -1px 3px 6px rgba(89, 33, 5, .65),
    0 1px 4px rgba(0, 0, 0, .5);
}



/* 2. Hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 22px 18px;
  border: 3px solid var(--orange-line);
  border-radius: var(--radius-lg);
  background: #111114;
  box-shadow: 0 0 24px rgba(216, 115, 43, .25);
  display: flex;
  flex-direction: column;
}

.hero__art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 15% center;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(10, 10, 12, .75), rgba(10, 10, 12, .1) 70%);
}

.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

.hero__title {
  color: var(--cream);
  font-size: 46px;
  font-weight: 900;
  line-height: 1.15;
  text-shadow: 0 3px 0 rgba(0, 0, 0, .45), 0 0 18px rgba(0, 0, 0, .6);
}
.hero__title span { display: block; }

.hero__subtitle {
  margin-top: 8px;
  color: var(--orange);
  font-size: 17px;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .7);
}

.hero__cta {
  margin-top: auto;
  margin-inline-start: 0;
  padding: 10px 44px;
  font-size: 16px;
}

/* 5. Games */
.games { display: flex; flex-direction: column; gap: 14px; }
.games .section-title { margin-top: 6px; }
.games__grid { display: flex; flex-direction: column; gap: 12px; }

.game {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 3px solid var(--orange-line);
  border-radius: var(--radius-lg);
  background: var(--noise), linear-gradient(180deg, #232326, #1b1b1d);
  box-shadow: 0 0 18px rgba(216, 115, 43, .15);
}

.game__media {
  position: relative;
  order: 2;
  flex: 0 0 44%;
  border-radius: 12px;
  overflow: hidden;
}
.game__media img { width: 100%; height: 100%; object-fit: cover; }

.game__tag {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 1px 8px;
  border-radius: 8px;
  background: rgba(10, 10, 12, .8);
  border: 1px solid rgba(255, 255, 255, .15);
  font-size: 10px;
}

.game__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.game__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.game__title { color: var(--cream); font-size: 19px; font-weight: 900; }
.game__head .badge { font-size: 10px; padding: 0 6px; }
.badge--online { font-variant-numeric: tabular-nums; transition: opacity .18s ease; }
.badge--online.is-changing { opacity: .25; }
.game__desc { color: var(--muted); font-size: 12px; }
.game__prize { color: var(--muted); font-size: 12px; }
.game__prize b { color: var(--orange); font-weight: 800; }
.game__btn { margin-top: auto; align-self: flex-end; padding: 7px 26px; font-size: 13px; }
/* A switched-off game's «به‌زودی!» (games.js) is grey from the first paint, not faded in from orange. */
.game__btn[aria-disabled="true"] { transition: none; }

/* Mobile cards, as designed: image on the right (tag in its top-right corner); on its left the title
   with the online badge beside it, the description, and «بازی کن» at the bottom-left. All three cards
   get the height of the tallest one. Desktop (768px+) has its own layout further down. */
@media (max-width: 767px) {
  .games__grid { display: grid; grid-auto-rows: 1fr; gap: 12px; }
  .game { align-items: stretch; gap: 10px; padding: 10px; min-height: 136px; border-radius: 18px; }
  .game__media { order: 0; flex: 0 0 46%; min-height: 112px; border-radius: 12px; }
  .game__media img { position: absolute; inset: 0; }
  .game__tag { top: 6px; right: 6px; }
  .game__body { gap: 4px; padding-top: 2px; }
  .game__head { flex-wrap: nowrap; gap: 6px; }
  .game__title { font-size: 17px; line-height: 1.5; white-space: nowrap; }
  .game__head .badge { flex: none; font-size: 9.5px; padding: 0 5px; }
  .game__desc { font-size: 11.5px; line-height: 1.7; }
  .game__btn { align-self: flex-end; padding: 6px 20px; }
  /* «به‌زودی!» is ~1px wider than «بازی کن»: trim it so the button keeps the same size. */
  .game__btn[aria-disabled="true"] { padding-inline: 19.45px; }
}
@media (max-width: 359px) {
  .game__media { flex-basis: 43%; }
  .game__title { font-size: 15.5px; }
  .game__head { gap: 4px; }
}

/* 6. Chest */
.chest {
  display: grid;
  grid-template-columns: auto auto 1fr;
  grid-template-areas:
    "art text  text"
    "art timer btn";
  align-items: center;
  gap: 8px 12px;
  padding: 12px;
  border: 3px solid var(--orange-line);
  border-radius: var(--radius-lg);
  background: var(--noise), linear-gradient(180deg, #2c2c30, #222225);
  box-shadow: 0 0 18px rgba(216, 115, 43, .2);
  position: relative;
}

.chest__art {
  grid-area: art;
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 12px;
}
.chest__text { grid-area: text; }
.chest__title { color: var(--cream); font-size: 15px; font-weight: 900; }
.chest__desc { color: var(--muted); font-size: 11px; }

.chest__btn {
  grid-area: btn;
  justify-self: end;
  padding: 7px 18px;
  font-size: 12.5px;
}

.chest__timer {
  grid-area: timer;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: 2px;
}
.chest__timer small { color: var(--muted); font-size: 10px; }

.timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: #0c0c0e;
  font-weight: 900;
  font-size: 15px;
  color: var(--orange);
  font-variant-numeric: tabular-nums;
}
.timer .dot { background: var(--orange); box-shadow: 0 0 8px var(--orange); width: 6px; height: 6px; }

/* Chest «به‌زودی!» (chest.js, CHEST_ENABLED false): grey from the first paint, the size of the ایکس‌باز
   «به‌زودی!» above it (mobile and desktop rules below). The timer is hidden but keeps its room, so
   nothing else moves on mobile; desktop drops it. */
.chest__btn[aria-disabled="true"] { transition: none; }
.chest--soon .chest__timer { visibility: hidden; }

/* Mobile chest banner, as designed: square chest on the right spanning the text block; title and
   subtitle beside it; bottom row: timer pill (caption «تا باز شدن» above it, green dot) then the
   clay button on the left. Nothing wraps from 320px up. Desktop (768px+) has its own layout. */
@media (max-width: 767px) {
  .chest {
    /* The chest takes the room the bottom row leaves: ~57px at 320, ~71px at 375, ~82px at 414. */
    --chest-art: clamp(56px, 26.5vw - 28px, 92px);
    grid-template-columns: var(--chest-art) auto 1fr;
    gap: 6px 10px;
    padding: 14px 12px 14px 14px;
    border-radius: 18px;
  }
  .chest__art {
    align-self: center;
    width: var(--chest-art);
    height: auto;
    aspect-ratio: 1;
    border-radius: 12px;
  }
  .chest__text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
  .chest__title, .chest__desc { white-space: nowrap; }
  .chest__title { font-size: 15px; line-height: 1.6; }
  .chest__desc { font-size: 11px; line-height: 1.7; }
  .chest__timer { align-self: end; gap: 3px; }
  .chest__timer small { font-size: 10px; line-height: 1.5; }
  .chest .timer { gap: 6px; padding: 3px 10px; border-width: 1.5px; font-size: 13.5px; }
  .chest .timer .dot { background: var(--green); box-shadow: 0 0 6px var(--green); }
  .chest__btn { align-self: end; padding: 7px 14px; font-size: clamp(11px, 3.1vw, 12.5px); white-space: nowrap; }
  /* «به‌زودی!»: the mobile game button's size (.game__btn + its «به‌زودی!» trim), still bottom-left. */
  .chest--soon .chest__btn { padding: 6px 19.45px; font-size: 13px; }
}
@media (max-width: 359px) {
  .chest { gap: 6px 8px; padding-inline: 10px 10px; }
  .chest__title { font-size: 14px; }
  .chest__desc { font-size: 10.5px; }
  .chest .timer { padding-inline: 9px; font-size: 13px; }
  .chest__btn { padding-inline: 10px; }
}
/* Mobile «به‌زودی!» chest: one column with the game cards above it. Same box as .game (10px padding,
   18px corners, 136px min), the image as .game__media (46% / 43% below 360px, 112px min, 12px corners,
   right side), the title and subtitle as .game__title / .game__desc, the button as the ایکس‌باز one
   (bottom-left). The timer's room isn't kept here. The flag-on chest keeps the layout above. */
@media (max-width: 767px) {
  .chest.chest--soon {
    grid-template-columns: 46% 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "art text"
      "art btn";
    align-items: stretch;
    gap: 0 10px;
    padding: 10px;
    min-height: 136px;
    border-radius: 18px;
  }
  .chest--soon .chest__art { width: 100%; height: 100%; min-height: 112px; aspect-ratio: auto; object-fit: cover; border-radius: 12px; }
  .chest--soon .chest__timer { display: none; }
  .chest--soon .chest__text { gap: 4px; padding-top: 2px; }
  .chest--soon .chest__title { font-size: 17px; line-height: 1.5; }
  .chest--soon .chest__desc { font-size: 11.5px; line-height: 1.7; white-space: normal; }
  .chest--soon .chest__btn { align-self: end; justify-self: end; }
}
@media (max-width: 359px) {
  .chest.chest--soon { grid-template-columns: 43% 1fr; padding-inline: 10px; }
  .chest--soon .chest__title { font-size: 15.5px; }
}

/* 6b. Rewards «امتیازت رو تتر طلا کن». Mobile (as designed): stacked rows, coin on the right, title
   and description beside it, «دریافت جایزه» on the left. Desktop (768px+): three cards side by side.
   The subtitle and the reward titles stay on one line from 320px up. */
.rewards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 14px 16px;
  border: 3px solid var(--orange-line);
  border-radius: 20px;
  background: var(--noise), linear-gradient(180deg, #2e2e32, #232326);
  box-shadow: 0 0 18px rgba(216, 115, 43, .2);
  scroll-margin-top: 16px;
}
.rewards [hidden] { display: none !important; }
/* Title and score share the first row; the subtitle gets the full width under them. */
.rewards__head { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; }
.rewards__heading { display: contents; }
.rewards__title {
  color: var(--cream);
  font-size: clamp(16px, 2.5vw + 8px, 18px); /* 16px at 320, 18 from 400 */
  font-weight: 900;
  line-height: 1.6;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 10px rgba(0, 0, 0, .45);
}
.rewards__title:focus { outline: none; } /* focused only programmatically, after «نقدشون کن» */
.rewards__sub {
  grid-column: 1 / -1;
  margin-top: 2px;
  color: var(--muted);
  font-size: clamp(12px, 1.25vw + 8px, 13px); /* 12px at 320, 13 from 400 */
  font-weight: 600;
  line-height: 1.7;
  white-space: nowrap;
}
.rewards__score { grid-row: 1; grid-column: 2; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.rewards__score b { color: var(--orange); font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rewards__list { display: flex; flex-direction: column; gap: 11px; }
.rewards__empty { padding: 18px 8px; color: var(--muted); font-size: 13px; text-align: center; }
.rewards__error { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 8px; color: var(--muted); font-size: 13px; }
.rewards__retry { padding: 8px 22px; border: 0; font-family: inherit; font-size: 13px; cursor: pointer; }

.reward {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 105px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 15px;
  background: linear-gradient(180deg, #212124, #1a1a1c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), inset 0 6px 12px rgba(0, 0, 0, .25);
}
.reward__coin {
  width: 52px;
  height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 4px 10px rgba(236, 181, 42, .25));
}
.reward__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.reward__title {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--cream);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.3;
  white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .5);
}
.reward__amount { color: var(--orange); font-size: 22px; line-height: 1; }
.reward__desc { color: var(--muted); font-size: 11.5px; font-weight: 500; line-height: 1.55; }
.reward__action { display: flex; }
/* reward.svg: the clay pill at 83×32 (same texture as btn-clay.webp, see .btn--clay). */
.reward__btn { min-width: 83px; height: 32px; padding: 0 9px; border: 0; font-family: inherit; font-size: 12px; cursor: pointer; }

.reward--skeleton { pointer-events: none; }
.reward--skeleton > span { border-radius: 8px; background: linear-gradient(90deg, #232326 0, #2e2e32 50%, #232326 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.reward--skeleton > .reward__coin { border-radius: 50%; filter: none; }
.reward-skeleton__line { height: 14px; max-width: 70%; }
.reward-skeleton__pill { width: 86px; height: 32px; border-radius: 999px !important; }

@media (max-width: 359px) {
  .rewards { padding-inline: 10px; }
  .reward { grid-template-columns: 44px 1fr auto; gap: 8px; padding: 11px 10px; }
  .reward__coin { width: 44px; height: 44px; }
  .reward__btn { min-width: 0; padding-inline: 10px; font-size: 12px; }
  .reward__title { font-size: 14px; }
  .reward__amount { font-size: 19px; }
}

/* 7. Missions */
.missions { display: flex; flex-direction: column; gap: 16px; }

.missions__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  color: var(--cream);
  font-size: 20px;
  font-weight: 900;
}
.missions__title .icon { width: 22px; height: 22px; }
.missions { scroll-margin-top: 16px; }
.missions__title:focus { outline: none; } /* focused only programmatically, after a scroll-to-section */

.mission-group { padding: 16px 14px; }

.mission-group__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.mission-group__head h3 { color: var(--cream); font-size: 18px; font-weight: 900; }
.mission-group__head p { color: var(--muted); font-size: 11.5px; }
.mission-group__head .badge { margin-inline-start: auto; align-self: flex-start; margin-top: 8px; }

.mission-group__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  color: var(--orange);
  background: radial-gradient(circle at 50% 40%, #3a2412, #1a120c);
  border: 2px solid rgba(216, 115, 43, .7);
  box-shadow: 0 0 14px rgba(216, 115, 43, .35);
}
.mission-group__icon .icon { width: 24px; height: 24px; }

.mission-group__rows { display: grid; gap: 10px; }

.mission {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 10px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #202023, #19191b);
}

.mission__icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 10px;
  background: #151517;
  border: 1px solid var(--line-soft);
  color: var(--orange);
}
.mission__icon .icon { width: 18px; height: 18px; }

.mission__title { flex: 1; font-size: 13px; font-weight: 600; line-height: 1.5; }
.mission .badge { flex: none; }

/* Open missions are links: the whole row is the target (new tab). Completed rows are plain divs. */
a.mission { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
a.mission:hover { border-color: rgba(238, 138, 58, .55); background: linear-gradient(180deg, #252528, #1c1c1e); }
a.mission:active { transform: translateY(1px); }
a.mission:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.mission--done .mission__title { color: var(--muted); }
.mission--done .mission__icon { color: var(--muted); }
/* An odd number of rows: the first one spans both columns on desktop, so the grid has no hole. */
.mission-group__rows > :first-child:nth-last-child(odd) { grid-column: 1 / -1; }
/* «احضار در شبکه‌ها» follows its design instead: Instagram | Telegram, X | بله, روبیکا (last row half). */
.mission-group__rows[data-mission-group="social"] > :first-child { grid-column: auto; }
.missions [hidden] { display: none !important; }

/* Claimable: the row itself isn't a link; its clay button claims the points. */
.mission__claim { flex: none; padding: 7px 14px; border: 0; font-family: inherit; font-size: 12px; cursor: pointer; }
.mission--claimable { border-color: rgba(238, 138, 58, .55); }

/* Loading placeholders: same footprint as a row, never clickable. */
.mission-skeleton {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 60px;
  padding: 8px 10px;
  border: 2px solid var(--line-soft);
  border-radius: var(--radius);
  background: #1b1b1d;
}
.mission-skeleton > span { border-radius: 8px; background: linear-gradient(90deg, #232326 0, #2e2e32 50%, #232326 100%); background-size: 200% 100%; animation: shimmer 1.3s linear infinite; }
.mission-skeleton__icon { width: 38px; height: 38px; flex: none; border-radius: 10px !important; }
.mission-skeleton__line { flex: 1; max-width: 55%; height: 12px; }
.mission-skeleton__pill { width: 74px; height: 24px; margin-inline-start: auto; border-radius: 999px !important; }
@keyframes shimmer { to { background-position: -200% 0; } }

.missions__error { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 16px; text-align: center; }
.missions__error p { color: var(--cream); font-size: 14px; font-weight: 700; }
.missions__retry { padding: 9px 28px; border: 0; font-family: inherit; font-size: 13px; cursor: pointer; }

.mission--hot .badge--points { color: var(--green); background: rgba(95, 207, 114, .12); border-color: rgba(95, 207, 114, .45); }

/* 8. Feed */
/* 7b. «امتیازهات رو به جایزه تبدیل نکردی؟» reminder: the chest banner's frame, one line from 320px up. */
.cashout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 66px;
  padding: 12px;
  border: 3px solid var(--orange-line);
  border-radius: 18px;
  background: var(--noise), linear-gradient(180deg, #2c2c30, #222225);
  box-shadow: 0 0 18px rgba(216, 115, 43, .2);
}
.cashout__text {
  min-width: 0;
  color: var(--cream);
  font-size: clamp(12px, 4.55vw - 2.55px, 15px); /* 12px at 320, 14.5 at 375, 15 from 390 */
  font-weight: 900;
  white-space: nowrap;
}
.cashout__btn { flex: none; padding: 8px clamp(10px, 7.3vw - 13.4px, 20px); font-size: clamp(11px, 2.73vw + 2.27px, 13px); }

.feed { padding: 16px 14px; margin-top: 30px; }

.feed__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.feed__head h2 { color: var(--cream); font-size: 18px; font-weight: 900; }

.phone { font-weight: 800; letter-spacing: .3px; }

.prize {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--green);
  font-weight: 800;
  font-size: 12.5px;
  white-space: nowrap;
}

.feed__coin { width: 18px; height: 18px; flex: none; filter: drop-shadow(0 0 3px rgba(238, 138, 58, .4)); }

@keyframes feed-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}
.feed .is-new { animation: feed-in .45s ease-out; }

.feed__list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px;
}
.feed__list li > div { display: flex; flex-direction: column; align-items: flex-start; }
.feed__list .phone { font-size: 14px; }
.feed__list small { color: var(--muted); font-size: 11.5px; }

/* ---------- Desktop ---------- */
@media (min-width: 768px) {
  .desktop-only { display: revert !important; }
  .mobile-only { display: none !important; }

  body { font-size: 14px; }

  .page {
    max-width: 1204px;
    padding: 24px 24px 60px;
    gap: 20px;
  }

  /* Top bar */
  .topbar { min-height: 44px; }
  .back-twox { padding: 5px 14px 5px 6px; font-size: 13.5px; }
  .back-twox__icon { width: 24px; height: 24px; }
  .points-pill { padding-block: 5px; font-size: 15px; }
  .auth-login { padding: 6px 28px; font-size: 13px; }

  /* Hero */
  .hero {
    min-height: 370px;
    padding: 0 48px;
    justify-content: center;
  }
  .hero__art {
    inset: 0 auto 0 0;
    width: 62%;
    object-position: left center;
    -webkit-mask-image: linear-gradient(to left, transparent 0, #000 22%);
            mask-image: linear-gradient(to left, transparent 0, #000 22%);
  }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 75% 50%, rgba(70, 70, 80, .25), transparent 60%);
  }
  .hero::after { display: none; }
  .hero__content { flex: 0; align-items: flex-start; }
  .hero__title { font-size: 52px; }
  .hero__title span { display: inline; }
  .hero__subtitle { font-size: 26px; margin-top: 4px; }
  .hero__cta { margin-top: 48px; padding: 12px 84px; font-size: 16px; }

  /* Games */
  .games {
    padding: 20px;
    gap: 18px;
    background: var(--noise), linear-gradient(180deg, #313135, #242427);
    border: 2px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 30px rgba(0, 0, 0, .35);
  }
  .games .section-title { font-size: 22px; margin-top: 0; }
  .games__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

  .game { flex-direction: column; padding: 0; gap: 0; overflow: hidden; }
  .game__media { order: 0; flex: none; border-radius: 0; aspect-ratio: 345 / 175; }
  .game__tag { top: 12px; right: 12px; font-size: 11px; padding: 2px 10px; }
  .game__body { padding: 14px 18px 18px; gap: 8px; }
  .game__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .game__title { font-size: 26px; line-height: 1.3; }
  .game__head .badge { font-size: 11px; padding: 1px 8px; }
  .game__desc { color: var(--text); font-size: 13px; }
  .game__prize { margin-bottom: 6px; } /* the space above the button when there's none to spare */
  /* Pinned to the bottom, so the three buttons line up whatever is above them (ایکس‌باز has no badge). */
  .game__btn { align-self: stretch; margin-top: auto; padding: 10px; font-size: 15px; }

  /* Chest */
  .chest {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 14px 20px;
  }
  .chest__art { width: 188px; height: 117px; border-radius: 14px; }
  .chest__text { flex: 1; display: flex; flex-direction: column; gap: 20px; }
  .chest__title { font-size: 24px; }
  .chest__desc { font-size: 14px; font-weight: 600; }
  .chest__btn { order: 1; padding: 12px 40px; font-size: 15px; }
  .chest__timer { order: 2; flex-direction: column; align-items: center; gap: 8px; margin-inline-end: 28px; }
  .chest__timer small { font-size: 11px; }
  /* «به‌زودی!»: no timer; the button takes its place on the left (same 28px from the padding). */
  .chest--soon .chest__timer { display: none; }
  /* «به‌زودی!»: the ایکس‌باز button's box and edges, as one column with it. The chest and .games are
     the same width W; in .games the button is (W − 2×22 [border + padding] − 2×18 [grid gaps]) / 3
     − 2×21 [card border + body padding], starting 22 + 21 = 43px from the left edge. Here 100% is
     W − 46 (3px border + 20px padding a side): width (100% − 34px) / 3 − 42px, 20px from the padding. */
  .chest--soon .chest__btn {
    flex: none;
    width: calc((100% - 34px) / 3 - 42px);
    margin-inline-end: 20px;
    padding: 10px;
    font-size: 15px;
  }
  .timer { padding: 10px 24px; font-size: 22px; }
  .timer .dot { width: 8px; height: 8px; }

  /* Rewards: three cards side by side, content centred, full-width button at the bottom */
  .rewards { gap: 16px; padding: 22px 20px 20px; border-radius: var(--radius-lg); }
  .rewards__title { font-size: 21px; }
  .rewards__sub { grid-column: 1; font-size: 13.5px; }
  .rewards__score { font-size: 12.5px; }
  .rewards__score b { font-size: 17px; }
  .rewards__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .reward {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-height: 220px;
    padding: 22px 16px 16px;
    border-radius: var(--radius);
    text-align: center;
  }
  .reward__coin { width: 58px; height: 58px; }
  .reward__body { flex: 1; align-items: center; gap: 14px; margin-top: 16px; }
  .reward__title { justify-content: center; font-size: 15px; }
  .reward__amount { font-size: 22px; }
  .reward__desc { font-size: 12.5px; }
  .reward__action { align-self: stretch; margin-top: 18px; }
  .reward__btn { flex: 1; height: 36px; padding: 0 9px; font-size: 13.5px; }
  .reward--skeleton { justify-content: center; gap: 16px; }
  .reward-skeleton__line { width: 70%; }
  .reward-skeleton__pill { align-self: stretch; width: auto; height: 36px; margin-top: auto; }

  /* Missions */
  .missions { gap: 22px; }
  .missions__title { font-size: 24px; margin: 14px 0 6px; }
  .mission-group { padding: 22px 20px; }
  .mission-group__head h3 { font-size: 21px; }
  .mission-group__head p { font-size: 12.5px; }
  .mission-group__icon { width: 58px; height: 58px; }
  .mission-group__rows { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mission { min-height: 58px; }
  .mission-skeleton { min-height: 58px; }
  .mission__title { font-size: 13.5px; }

  /* Feed */
  .cashout { min-height: 70px; padding: 12px 20px; border-radius: 16px; }
  .cashout__text { font-size: 15px; }
  .cashout__btn { padding: 6px 15px; font-size: 13px; }

  .feed { padding: 20px 18px; margin-top: 0; }
  .feed__head h2 { font-size: 21px; }

  .feed__table {
    display: table !important;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    margin-top: -8px;
    font-size: 13px;
  }
  .feed__table th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 500;
    padding: 0 16px;
  }
  .feed__table td {
    padding: 8px 16px;
    background: linear-gradient(180deg, #202023, #19191b);
    border-block: 2px solid var(--line);
    white-space: nowrap;
  }
  .feed__table th:nth-child(1), .feed__table td:nth-child(1) { text-align: right; width: 30%; }
  .feed__table th:nth-child(2), .feed__table td:nth-child(2) { text-align: center; }
  .feed__table th:nth-child(3), .feed__table td:nth-child(3) { text-align: right; width: 16%; }
  .feed__table th:nth-child(4), .feed__table td:nth-child(4) { text-align: right; width: 12%; color: var(--muted); }
  .feed__table td:first-child { border-right: 2px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; }
  .feed__table td:last-child { border-left: 2px solid var(--line); border-radius: var(--radius) 0 0 var(--radius); }
  .feed__table td:nth-child(2) { font-weight: 600; }
  .feed__user { display: flex; align-items: center; gap: 12px; }

  .avatar {
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #f8b46c, #e98a35);
  }
}

/* ---------- Toast ---------- */
/* Top of the page. RTL row: status icon (right), text, close (left); a 4px bar on the right edge. */
.toast {
  --toast-accent: var(--orange);
  position: fixed;
  left: 50%;
  top: calc(14px + env(safe-area-inset-top));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: min(420px, calc(100% - 32px));
  padding: 10px 12px 10px 10px;
  border: 1px solid var(--line-soft);
  border-right: 4px solid var(--toast-accent);
  border-radius: 12px;
  background: rgba(24, 24, 27, .97);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -12px);
  transition: opacity .2s ease, transform .2s ease;
}
.toast.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.toast[data-type="success"] { --toast-accent: var(--green); }
.toast[data-type="error"] { --toast-accent: var(--red); }
.toast__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--toast-accent) 18%, transparent);
  color: var(--toast-accent);
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
}
.toast__icon::before { content: "!"; }
.toast[data-type="success"] .toast__icon::before { content: "✓"; }
.toast[data-type="error"] .toast__icon::before { content: "×"; }
.toast__text { flex: 1; text-align: right; line-height: 1.6; }
.toast__link {
  color: var(--orange);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.toast__link:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.toast__close {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.toast__close svg { width: 14px; height: 14px; }
.toast__close:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }

/* ---------- Referral sheet (club doc §1.11): bottom sheet up to 480px, modal above ---------- */
.rs { position: fixed; inset: 0; z-index: 55; }
.rs[hidden] { display: none !important; }
.rs__overlay { position: absolute; inset: 0; background: rgba(4, 4, 6, .72); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.rs__sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 92vh;
  overflow-y: auto;
  padding: 12px 20px calc(22px + env(safe-area-inset-bottom));
  border: 3px solid var(--orange-line);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: var(--noise), linear-gradient(180deg, #2e2e32, #1c1c1f 70%);
  box-shadow: 0 -10px 40px rgba(216, 115, 43, .25);
  text-align: center;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.rs.is-open .rs__overlay { opacity: 1; }
.rs.is-open .rs__sheet { transform: none; }
.rs__grip { display: block; width: 44px; height: 5px; margin: 0 auto 6px; border-radius: 3px; background: var(--line); }
.rs__close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: #151517;
  color: var(--text);
  cursor: pointer;
}
.rs__close svg { width: 16px; height: 16px; }
.rs__art {
  width: 190px;
  height: 190px;
  margin-top: 8px;
  object-fit: contain;
  /* Transparent coins: a glow that follows their shape, not a box. */
  filter: drop-shadow(0 10px 24px rgba(216, 115, 43, .35));
}
.rs__title { margin-top: 16px; color: var(--cream); font-size: 19px; font-weight: 900; }
.rs__text { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.8; }
.rs__label { align-self: stretch; margin-top: 18px; color: var(--text); font-size: 12.5px; font-weight: 700; text-align: right; }
.rs__code {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 10px;
  margin-top: 8px;
  padding: 6px 6px 6px 14px;
  border: 2px solid var(--line);
  border-radius: 14px;
  background: #151517;
}
.rs__code-value { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--cream); font-size: 16px; font-weight: 800; letter-spacing: .02em; text-align: left; }
.rs__copy {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--orange-line);
  border-radius: 10px;
  background: rgba(238, 138, 58, .1);
  color: var(--orange);
  cursor: pointer;
}
.rs__copy .icon { width: 18px; height: 18px; }
.rs__share { align-self: stretch; gap: 8px; margin-top: 18px; padding: 13px; border: 0; font-family: inherit; font-size: 15px; cursor: pointer; }
.rs__share .icon { width: 18px; height: 18px; }
.rs__history {
  align-self: stretch;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
.rs__history:hover { border-color: var(--orange-line); color: var(--cream); }
.rs__close:focus-visible, .rs__copy:focus-visible, .rs__history:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

@media (min-width: 481px) {
  .rs__sheet {
    top: 50%;
    bottom: auto;
    width: 405px;
    margin: 0 auto;
    padding: 18px 24px 24px;
    border-bottom: 3px solid var(--orange-line);
    border-radius: 16px;
    opacity: 0;
    transform: translateY(-46%);
    transition: transform .25s ease, opacity .25s ease;
  }
  .rs.is-open .rs__sheet { transform: translateY(-50%); opacity: 1; }
  .rs__grip { display: none; }
}

/* ---------- Reward confirm dialog «مطمئنی؟»: bottom sheet up to 767px, centred modal above ---------- */
.rw-sheet { position: fixed; inset: 0; z-index: 56; }
.rw-sheet[hidden], .rw-sheet [hidden] { display: none !important; }
.rw-sheet__overlay { position: absolute; inset: 0; background: rgba(4, 4, 6, .72); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; }
.rw-sheet__panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 92vh;
  overflow-y: auto;
  padding: 12px 20px calc(22px + env(safe-area-inset-bottom));
  border: 3px solid var(--orange-line);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: var(--noise), radial-gradient(ellipse at 50% 0, rgba(238, 138, 58, .16), transparent 60%), linear-gradient(180deg, #2e2e32, #1c1c1f 70%);
  box-shadow: 0 -10px 40px rgba(216, 115, 43, .25);
  text-align: center;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.rw-sheet.is-open .rw-sheet__overlay { opacity: 1; }
.rw-sheet.is-open .rw-sheet__panel { transform: none; }
.rw-sheet__grip { display: block; width: 44px; height: 5px; margin: 0 auto 6px; border-radius: 3px; background: var(--line); }
.rw-sheet__close {
  position: absolute;
  top: 12px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: #151517;
  color: var(--text);
  cursor: pointer;
}
.rw-sheet__close svg { width: 16px; height: 16px; }
.rw-sheet__close:disabled { opacity: .4; cursor: not-allowed; }
.rw-sheet__coin {
  width: 96px;
  height: 96px;
  margin-top: 10px;
  object-fit: contain;
  filter: drop-shadow(0 8px 22px rgba(236, 181, 42, .4));
}
/* The two faces (confirm / not enough) lay out like the panel itself. */
.rw-sheet__face { align-self: stretch; display: flex; flex-direction: column; align-items: center; }
.rw-sheet__title { margin-top: 14px; color: var(--cream); font-size: 21px; font-weight: 900; }
.rw-sheet__text { margin-top: 8px; color: var(--text); font-size: 14px; line-height: 1.9; }
.rw-sheet__balance {
  margin-top: 12px;
  padding: 6px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  background: #151517;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/* Not enough points: «امتیاز فعلی» / «امتیاز لازم» side by side, then what's missing in orange. */
.rw-sheet__points { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.rw-sheet__points > div {
  min-width: 112px;
  padding: 8px 14px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: #151517;
}
.rw-sheet__points dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.rw-sheet__points dd { margin: 2px 0 0; color: var(--cream); font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.rw-sheet__missing { margin-top: 12px; color: var(--orange); font-size: 15px; font-weight: 900; }
.rw-sheet__error {
  align-self: stretch;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(239, 90, 80, .5);
  border-radius: 12px;
  background: rgba(239, 90, 80, .1);
  color: #ff9c94;
  font-size: 13px;
  line-height: 1.7;
}
.rw-sheet__actions { align-self: stretch; display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.rw-sheet__confirm { gap: 8px; padding: 13px; border: 0; font-family: inherit; font-size: 15px; cursor: pointer; }
.rw-sheet__cancel {
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.rw-sheet__cancel:hover:not(:disabled) { border-color: var(--orange-line); color: var(--cream); }
.rw-sheet__cancel:disabled { opacity: .5; cursor: not-allowed; }
.rw-sheet__close:focus-visible, .rw-sheet__cancel:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.rw-sheet__spinner { display: none; width: 16px; height: 16px; border: 2px solid rgba(43, 20, 4, .35); border-top-color: #2b1404; border-radius: 50%; animation: rw-spin .8s linear infinite; }
.rw-sheet__confirm[aria-busy="true"] .rw-sheet__spinner { display: inline-block; }
/* The pending confirm stays legible (not the drained disabled look): it is working, not unavailable. */
.rw-sheet__confirm[aria-busy="true"]:disabled { color: #2b1404; filter: brightness(.9); opacity: 1; }
@keyframes rw-spin { to { transform: rotate(360deg); } }

@media (min-width: 768px) {
  .rw-sheet__panel {
    top: 50%;
    bottom: auto;
    width: 420px;
    margin: 0 auto;
    padding: 22px 28px 26px;
    border-bottom: 3px solid var(--orange-line);
    border-radius: 22px;
    box-shadow: 0 0 40px rgba(216, 115, 43, .25), 0 30px 80px rgba(0, 0, 0, .6);
    opacity: 0;
    transform: translateY(-46%) scale(.97);
    transition: transform .25s ease, opacity .25s ease;
  }
  .rw-sheet.is-open .rw-sheet__panel { transform: translateY(-50%); opacity: 1; }
  .rw-sheet__grip { display: none; }
  .rw-sheet__actions { flex-direction: row-reverse; }
  .rw-sheet__actions > * { flex: 1; }
}

/* ---------- Login sheet ---------- */
.ls { position: fixed; inset: 0; z-index: 50; }
.ls [hidden], .ls[hidden] { display: none !important; }

.ls__overlay {
  position: absolute;
  inset: 0;
  background: rgba(4, 4, 6, .72);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .25s ease;
}

.ls__sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-width: 480px;
  max-height: 92vh;
  margin: 0 auto;
  overflow-y: auto;
  padding: 14px 20px calc(24px + env(safe-area-inset-bottom));
  border: 3px solid var(--orange-line);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: var(--noise), linear-gradient(180deg, #2e2e32, #1c1c1f 70%);
  box-shadow: 0 -10px 40px rgba(216, 115, 43, .25), 0 -2px 0 rgba(255, 255, 255, .04) inset;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.2, .8, .2, 1), bottom .15s ease;
}
.ls.is-open .ls__overlay { opacity: 1; }
.ls.is-open .ls__sheet { transform: none; }

.ls__grip {
  display: block;
  width: 44px;
  height: 5px;
  margin: 0 auto 10px;
  border-radius: 3px;
  background: var(--line);
}

.ls__close {
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line-soft);
  border-radius: 50%;
  background: #151517;
  color: var(--muted);
  cursor: pointer;
}
.ls__close svg { width: 16px; height: 16px; }
.ls__close:hover { color: var(--text); }

.ls__badge {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 4px auto 10px;
  border-radius: 50%;
  border: 2px solid rgba(216, 115, 43, .7);
  background: radial-gradient(circle at 50% 40%, #3a2412, #1a120c);
  box-shadow: 0 0 18px rgba(216, 115, 43, .4);
  color: var(--cream);
}
.ls__badge .icon { width: 30px; height: 30px; }

.ls__step { display: flex; flex-direction: column; gap: 12px; }

.ls__title {
  color: var(--cream);
  font-size: 21px;
  font-weight: 900;
  text-align: center;
}
.ls__lead { color: var(--muted); font-size: 13px; text-align: center; }
.ls__lead b { color: var(--text); font-weight: 800; unicode-bidi: isolate; }

.ls__input, .ls__digit {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: #121214;
  color: var(--text);
  font-family: inherit;
  font-weight: 700;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ls__input { height: 52px; padding: 0 16px; font-size: 16px; text-align: left; }
.ls__input::placeholder { color: #66646a; font-weight: 400; font-size: 14px; }
.ls__input:focus, .ls__digit:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(238, 138, 58, .18);
}

.ls__otp {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 56px));
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.ls__digit { height: 60px; padding: 0; font-size: 26px; font-weight: 900; text-align: center; caret-color: var(--orange); }

.ls__error {
  min-height: 1.6em;
  margin-top: -4px;
  color: var(--red);
  font-size: 12.5px;
  font-weight: 600;
}
.ls__error:empty { min-height: 0; margin-top: -8px; }

.ls__link, .ls__resend {
  align-self: center;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--orange);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.ls__link:hover, .ls__resend:hover { text-decoration: underline; }
.ls__resend[aria-disabled="true"],
.ls__resend:disabled { color: var(--muted); opacity: .7; cursor: not-allowed; text-decoration: none; }
.ls__resend[aria-busy="true"] { cursor: progress; }

.ls__submit {
  width: 100%;
  padding: 13px;
  border: 0;
  font-family: inherit;
  font-size: 16px;
  cursor: pointer;
}

.ls__terms { color: var(--muted); font-size: 11.5px; text-align: center; }
.ls__terms a { color: var(--orange); font-weight: 700; }

@media (min-width: 768px) {
  .ls__sheet {
    top: 50%;
    bottom: auto;
    width: 440px;
    padding: 22px 28px 28px;
    border-bottom: 3px solid var(--orange-line);
    border-radius: 26px;
    box-shadow: 0 0 40px rgba(216, 115, 43, .25), 0 30px 80px rgba(0, 0, 0, .6);
    transform: translateY(-46%) scale(.97);
    opacity: 0;
    transition: transform .25s ease, opacity .25s ease;
  }
  .ls.is-open .ls__sheet { transform: translateY(-50%); opacity: 1; }
  .ls__grip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ls__sheet, .ls__overlay, .toast, .rs__sheet, .rs__overlay, .rw-sheet__panel, .rw-sheet__overlay { transition: none; }
  .reward--skeleton > span, .rw-sheet__spinner { animation: none; }
  .mission-skeleton > span { animation: none; }
  .feed .is-new { animation: none; }
  .badge--online { transition: none; }
}