/* Созвездие — визуальный язык «звёздного атласа»:
   чернильная ночь, лавандовые линии карты, одна золотая звезда. */

:root {
  --night: #13103A;
  --night-deep: #0A0922;
  --night-hi: #1E1A52;
  --silver: #C9C3F2;
  --line: rgba(201, 195, 242, .14);
  --line-hi: rgba(201, 195, 242, .28);
  --plate: rgba(201, 195, 242, .05);
  --plate-hi: rgba(201, 195, 242, .09);
  --gold: #FFCB47;
  --gold-deep: #F29A1D;
  --gold-ink: #2B1A00;
  --rose: #FF8FB1;
  --mint: #6FF0C8;
  --danger: #FF7A8A;
  --text: #F3F0FF;
  --muted: #A49EC9;
  --dim: #6F6A99;
  --r-common: #B8B3D6;
  --r-rare: #6FB8FF;
  --r-epic: #C08BFF;
  --r-legendary: #FFCB47;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* модульная шкала 1.25 от 15px */
  --t-xs: 12px; --t-sm: 13.5px; --t-md: 15px; --t-lg: 18.75px; --t-xl: 23.4px; --t-2xl: 29.3px; --t-3xl: 36.6px;

  --r-tile: 18px;
  --r-sheet: 26px;
  --r-chip: 8px;
  --nav-h: 62px;
  --safe-t: calc(var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-b: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(90% 55% at 50% 22%, #262066 0%, transparent 70%),
    linear-gradient(180deg, var(--night) 0%, var(--night-deep) 100%) fixed;
  background-color: var(--night-deep);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--t-md);
  line-height: 1.45;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
  font-variant-numeric: lining-nums;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:focus-visible, [data-action]:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 12px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 800; margin: 0; letter-spacing: 0; }
.num { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }

#sky, #fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#sky { z-index: 0; }
#fx { z-index: 60; }

/* ============ Каркас ============ */
#app { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; transition: opacity .6s; }
#app.loading { opacity: 0; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + var(--safe-t)) 16px 6px;
}
.me { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; }
.me-ava { width: 40px; height: 40px; flex: none; }
.me-text { display: flex; flex-direction: column; min-width: 0; }
.me-name { font-weight: 700; font-size: var(--t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 44vw; }
.me-title { font-size: var(--t-xs); font-weight: 600; }

.balance { display: flex; align-items: center; gap: 8px; padding: 4px 2px; transition: transform .3s var(--ease-spring); cursor: pointer; }
.balance.bump { transform: scale(1.14); }
.balance-num { font-family: var(--serif); font-weight: 800; font-size: var(--t-xl); font-variant-numeric: lining-nums tabular-nums; line-height: 1; }

.star-ico {
  display: inline-block; width: 22px; height: 22px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE38A'/%3E%3Cstop offset='1' stop-color='%23F29A1D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2.6l2.75 5.9 6.45.75-4.78 4.4 1.3 6.37L12 16.8l-5.72 3.22 1.3-6.37-4.78-4.4 6.45-.75z' fill='url(%23g)' stroke='url(%23g)' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.star-ico.sm { width: 14px; height: 14px; vertical-align: -2px; }
.star-ico.md { width: 18px; height: 18px; vertical-align: -3px; }

#pages { flex: 1; position: relative; overflow: hidden; }
.page {
  position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden;
  padding: 4px 16px calc(var(--nav-h) + var(--safe-b) + 28px);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease-out, visibility 0s .22s;
  scrollbar-width: none;
}
.page::-webkit-scrollbar { display: none; }
.page.active { opacity: 1; visibility: visible; transition: opacity .22s ease-out; }

/* ============ Таб-бар: прижат к низу, активная вкладка отмечена звездой ============ */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  height: calc(var(--nav-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(10, 9, 34, .97);
  border-top: 1px solid var(--line);
}
.tab-glow { display: none; }
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--dim); font-size: 11px; font-weight: 600; transition: color .2s;
}
.tab svg { width: 23px; height: 23px; }
.tab.active { color: var(--text); }
.tab.active svg { color: var(--gold); }
.tab.active::before {
  content: ""; position: absolute; top: -1px; left: 50%; width: 26px; height: 2px; margin-left: -13px;
  background: var(--gold); border-radius: 0 0 2px 2px; box-shadow: 0 0 10px var(--gold);
}
.tab-dot {
  position: absolute; top: 7px; left: calc(50% + 7px); min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--rose); color: #2A0612; font-size: 10px; font-weight: 800; line-height: 16px; text-align: center;
  box-shadow: 0 0 0 2px var(--night-deep);
}
.tab-dot.plain { min-width: 8px; width: 8px; height: 8px; padding: 0; top: 10px; }

/* ============ Базовые элементы ============ */
.page-head { margin: 10px 2px 18px; }
.page-head h1 { font-size: var(--t-2xl); line-height: 1.1; }
.page-head p { margin: 6px 0 0; color: var(--muted); font-size: var(--t-sm); max-width: 34em; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 2px 8px; }
.section-title h3 { font-size: var(--t-lg); }
.section-title span { color: var(--muted); font-size: var(--t-sm); font-variant-numeric: tabular-nums; }

.card { position: relative; background: var(--plate); border: 1px solid var(--line); border-radius: var(--r-tile); padding: 16px; }
.card.tap { transition: background .2s, transform .15s var(--ease-out); }
.card.tap:active { background: var(--plate-hi); transform: scale(.98); }

/* Список-каталог: строки с тонкими разделителями внутри одной пластины */
.list { background: var(--plate); border: 1px solid var(--line); border-radius: var(--r-tile); overflow: hidden; }
.list > * + * { border-top: 1px solid var(--line); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 700; font-size: var(--t-sm);
  transition: transform .12s var(--ease-out), opacity .2s; white-space: nowrap;
}
.btn:active { transform: scale(.95); }
.btn.block { width: 100%; height: 52px; font-size: var(--t-md); }
.btn.sm { height: 34px; padding: 0 14px; font-size: 13px; }
.btn-gold { color: var(--gold-ink); background: linear-gradient(180deg, #FFDC73, var(--gold) 55%, #F7B236); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55); }
.btn-violet { color: var(--text); background: var(--night-hi); border: 1px solid var(--line-hi); }
.btn-ghost { color: var(--text); background: transparent; border: 1px solid var(--line-hi); }
.btn-done { color: var(--mint); background: transparent; border: 1px solid rgba(111, 240, 200, .35); }
.btn[disabled], .btn.disabled { opacity: .4; pointer-events: none; }
.btn.glow { animation: beckon 2.4s ease-in-out infinite; }
@keyframes beckon { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 0 rgba(255, 203, 71, .45); } 50% { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 7px rgba(255, 203, 71, 0); } }

.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: var(--r-chip); font-size: var(--t-xs); font-weight: 600; border: 1px solid var(--line-hi); color: var(--silver); white-space: nowrap; }
.chip.gold { color: var(--gold); border-color: rgba(255, 203, 71, .45); }
.chip.green { color: var(--mint); border-color: rgba(111, 240, 200, .4); }
.chip.violet { color: var(--r-epic); border-color: rgba(192, 139, 255, .45); }
.chip.cyan { color: var(--r-rare); border-color: rgba(111, 184, 255, .45); }

.bar { height: 6px; border-radius: 99px; background: rgba(201, 195, 242, .12); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: inherit; background: var(--silver); transition: width .4s var(--ease-out); }
.bar.gold > i { background: var(--gold); }

.empty { text-align: center; color: var(--muted); padding: 26px 16px; font-size: var(--t-sm); }
.empty .big { font-size: 40px; margin-bottom: 6px; }

/* ============ Аватар с рамкой ============ */
.ava { position: relative; display: inline-block; border-radius: 50%; flex: none; }
.ava img, .ava .ava-fallback {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: grid; place-items: center;
  font-family: var(--serif); font-weight: 800; color: var(--night);
  background: linear-gradient(160deg, var(--silver), #8C84C9);
}
.ava .ring {
  position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
}
.ava .ring.spin { animation: spin 3.2s linear infinite; }
.ava.has-frame img, .ava.has-frame .ava-fallback { box-shadow: 0 0 0 2px var(--night-deep); }
.ava .ring-glow { position: absolute; inset: -5px; border-radius: 50%; filter: blur(7px); opacity: .45; pointer-events: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ============ Главная: планисфера и кликер ============ */
.hero { position: relative; display: flex; flex-direction: column; align-items: center; }
.boost-badge { position: absolute; top: 2px; right: 0; z-index: 3; }
.clicker { position: relative; width: min(84vw, 330px); aspect-ratio: 1; margin: 4px auto 2px; display: grid; place-items: center; touch-action: manipulation; cursor: pointer; }
.clicker .chart, .clicker .constel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.clicker .chart circle, .clicker .chart line { fill: none; stroke: var(--silver); vector-effect: non-scaling-stroke; }
.constel line { stroke: var(--silver); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .75; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .35s ease-out forwards; }
.constel circle { fill: #fff; animation: starIn .35s var(--ease-spring) both; transform-box: fill-box; transform-origin: center; }
.constel.done line { stroke: var(--gold); opacity: 1; transition: stroke .2s; }
.constel.done circle { fill: var(--gold); }
.constel.fade { opacity: 0; transition: opacity .7s ease-in; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes starIn { from { transform: scale(0); } }
.clicker .star-btn { position: relative; width: 56%; height: 56%; z-index: 2; }
.clicker .star-btn svg { width: 100%; height: 100%; overflow: visible; }
.clicker .star-btn.hit { animation: squish .2s ease-out; }
.clicker.tired .star-btn { filter: saturate(.3) brightness(.75); }
@keyframes squish { 35% { transform: scale(.9, .87); } 70% { transform: scale(1.04); } }

.mascot .eyes { transform-origin: 50% 47%; animation: blink 6s infinite; }
@keyframes blink { 0%, 95%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
.zzz { position: absolute; right: 24%; top: 20%; font-family: var(--serif); font-style: italic; font-weight: 700; color: var(--muted); z-index: 3; }
.zzz span { position: absolute; animation: zzz 2.6s ease-out infinite; opacity: 0; }
.zzz span:nth-child(2) { animation-delay: .85s; font-size: 1.2em; }
.zzz span:nth-child(3) { animation-delay: 1.7s; font-size: 1.4em; }
@keyframes zzz { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(16px, -38px); opacity: 0; } }

.skin-hue svg { animation: hue 6s linear infinite; }
.skin-pulse .s-glow { animation: glowPulse 1.8s ease-in-out infinite; }
@keyframes hue { to { filter: hue-rotate(360deg); } }
@keyframes glowPulse { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }

.energy { width: 100%; max-width: 340px; margin: 0 auto; }
.energy-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; font-size: var(--t-sm); }
.energy-top .left { display: flex; align-items: baseline; gap: 6px; font-weight: 700; }
.energy-top .left .num { font-size: var(--t-lg); }
.energy-top .bolt { color: var(--gold); }
.energy .bar > i { background: linear-gradient(90deg, var(--gold-deep), var(--gold)); transition: width .25s; }
.energy-sub { margin-top: 8px; text-align: center; font-size: var(--t-xs); color: var(--muted); }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.mini-card { display: flex; flex-direction: column; gap: 6px; min-height: 144px; }
.mini-card .mc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.mini-card .mc-title { font-family: var(--serif); font-weight: 800; font-size: var(--t-lg); line-height: 1.15; }
.mini-card .mc-sub { color: var(--muted); font-size: var(--t-xs); }
.mini-card .mc-art { font-size: 28px; line-height: 1; }
.mini-card .btn { margin-top: auto; width: 100%; }
.mini-card.ready { border-color: rgba(255, 203, 71, .5); }
.flame { font-size: 26px; display: inline-block; }
.flame.off { filter: grayscale(1) opacity(.45); }

.league-card { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 14px 16px; }
.league-card .tier-ico, .tier-big {
  flex: none; display: grid; place-items: center; border-radius: 50%;
  border: 1.5px solid var(--tier-c, var(--silver)); background: color-mix(in srgb, var(--tier-c, #9AA3BF) 14%, transparent);
}
.league-card .tier-ico { width: 48px; height: 48px; font-size: 24px; }
.league-card .lg-rank { font-family: var(--serif); font-size: var(--t-xl); font-weight: 800; line-height: 1; }
.league-card .lg-meta { color: var(--muted); font-size: var(--t-xs); }
.chev { color: var(--dim); font-size: 22px; }

/* ============ Задания (строки каталога) ============ */
.task { display: flex; align-items: center; gap: 13px; padding: 14px; }
.task .t-ico { width: 42px; height: 42px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 21px; border: 1px solid var(--line-hi); }
.task .t-title { font-weight: 700; font-size: var(--t-md); }
.task .t-desc { color: var(--muted); font-size: var(--t-xs); margin-top: 1px; }
.task .t-reward { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; font-family: var(--serif); font-weight: 800; font-size: var(--t-sm); color: var(--gold); }
.task .bar { margin-top: 8px; height: 4px; }
.task.done { opacity: .5; }
.task.claimable { background: rgba(255, 203, 71, .07); }
.task .btn { flex: none; }

/* ============ Игры ============ */
.game-card { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; padding: 16px; min-height: 124px; overflow: hidden; }
.game-card .g-art { width: 92px; height: 92px; flex: none; display: grid; place-items: center; }
.game-card h3 { font-size: var(--t-xl); line-height: 1.1; }
.game-card p { margin: 5px 0 10px; color: var(--muted); font-size: var(--t-sm); }
.mini-wheel { width: 90px; height: 90px; }
.riddle-tiles { display: flex; gap: 5px; }
.riddle-tiles span { width: 28px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-family: var(--serif); font-weight: 800; font-size: 18px; color: var(--silver); border: 1px solid var(--line-hi); }

/* Колесо */
.wheel-wrap { position: relative; width: min(82vw, 330px); aspect-ratio: 1; margin: 8px auto 18px; }
.wheel-wrap::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #13103A; }
.wheel-rotor { position: absolute; inset: 0; will-change: transform; backface-visibility: hidden; }
.wheel-rotor svg, .wheel-overlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.wheel-overlay { pointer-events: none; }
.wheel-pointer { position: absolute; top: -10px; left: 50%; width: 32px; height: 42px; margin-left: -16px; z-index: 3; transform-origin: 50% 20%; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45)); }
.wheel-lights circle { fill: var(--silver); opacity: .5; }
.wheel-spinning .wheel-lights circle { animation: bulb .3s steps(1) infinite; }
.wheel-spinning .wheel-lights circle:nth-child(odd) { animation-delay: .15s; }
@keyframes bulb { 0% { fill: var(--gold); opacity: 1; } 50% { fill: var(--silver); opacity: .4; } }

/* Сундук */
.chest-stage { position: relative; height: 240px; display: grid; place-items: center; margin: 4px 0 10px; }
.chest-stage .rays {
  position: absolute; width: 340px; height: 340px; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, var(--ray, rgba(255, 203, 71, .3)) 0 6deg, transparent 6deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  transition: opacity .5s; animation: spin 16s linear infinite;
}
.chest-stage.revealed .rays { opacity: 1; }
.chest-svg { width: 160px; height: 160px; position: relative; z-index: 1; transition: transform .3s, opacity .3s; }
.chest-svg.shake { animation: shake .8s ease-in-out; }
.chest-svg .lid { transform-origin: 20% 46%; transition: transform .5s var(--ease-spring); }
.chest-svg.open .lid { transform: rotate(-28deg) translate(-6px, -18px); }
.chest-stage.revealed .chest-svg { transform: scale(.6) translateY(90px); opacity: 0; }
@keyframes shake {
  0%, 100% { transform: rotate(0); } 10% { transform: rotate(-6deg) scale(1.02); } 20% { transform: rotate(6deg); } 30% { transform: rotate(-8deg) scale(1.04); }
  40% { transform: rotate(8deg); } 50% { transform: rotate(-10deg) scale(1.06); } 60% { transform: rotate(10deg); } 70% { transform: rotate(-6deg) scale(1.08); } 85% { transform: rotate(3deg) scale(1.1); }
}
.flash { position: fixed; inset: 0; z-index: 70; background: #FFF6D8; pointer-events: none; animation: flash .6s ease-out forwards; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }
.reveal-card {
  position: absolute; z-index: 2; width: 188px; padding: 16px 14px; border-radius: var(--r-tile); text-align: center;
  background: var(--night); border: 1.5px solid var(--rc);
  box-shadow: 0 0 36px color-mix(in srgb, var(--rc) 45%, transparent);
  animation: cardIn .7s var(--ease-spring) both;
}
.reveal-card .rc-rarity { font-size: var(--t-xs); font-weight: 700; color: var(--rc); }
.reveal-card .rc-art { height: 90px; display: grid; place-items: center; margin: 8px 0; font-size: 54px; }
.reveal-card .rc-name { font-family: var(--serif); font-weight: 800; font-size: var(--t-lg); }
@keyframes cardIn { 0% { transform: scale(.3) rotateY(180deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.odds { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.odds div { text-align: center; padding: 9px 4px; font-size: 11px; font-weight: 600; }
.odds div + div { border-left: 1px solid var(--line); }
.odds b { display: block; font-family: var(--serif); font-size: var(--t-md); font-weight: 800; }

/* Загадка */
.riddle-slots { display: flex; justify-content: center; gap: 12px; margin: 10px 0 16px; }
.riddle-slot { width: 68px; height: 76px; border-radius: 16px; display: grid; place-items: center; font-size: 34px; border: 1.5px dashed var(--line-hi); transition: border-color .2s, background .2s; }
.riddle-slot.filled { border-style: solid; border-color: var(--silver); background: var(--plate-hi); }
.riddle-keys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 14px; }
.riddle-keys button { height: 52px; border-radius: 14px; font-size: 25px; border: 1px solid var(--line-hi); transition: transform .12s, opacity .2s; }
.riddle-keys button:active { transform: scale(.9); }
.riddle-keys button.used { opacity: .25; }
.riddle-history { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 16px; }
.rh-row { display: flex; justify-content: center; gap: 8px; }
.rh-row span { width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; font-size: 23px; border: 1.5px solid transparent; }
.rh-row .hit { border-color: var(--mint); background: rgba(111, 240, 200, .14); }
.rh-row .near { border-color: var(--gold); background: rgba(255, 203, 71, .12); }
.rh-row .miss { border-color: var(--line); opacity: .5; }
.legend { display: flex; justify-content: center; gap: 14px; font-size: var(--t-xs); color: var(--muted); flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ============ Магазин: коллекционные пластины ============ */
.seg { display: flex; gap: 18px; margin-bottom: 16px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.seg button { position: relative; padding: 8px 0 11px; font-weight: 600; font-size: var(--t-md); color: var(--muted); white-space: nowrap; }
.seg button.active { color: var(--text); }
.seg button.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--gold); }
.shop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item {
  display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12px 12px 12px; gap: 6px; overflow: hidden;
  border-color: color-mix(in srgb, var(--rc) 40%, transparent);
}
.item .i-rarity { align-self: stretch; text-align: left; font-size: var(--t-xs); font-weight: 600; color: var(--rc); }
.item .i-art { height: 92px; width: 100%; display: grid; place-items: center; }
.item .i-name { font-family: var(--serif); font-weight: 800; font-size: var(--t-md); }
.item .i-desc { font-size: 11.5px; color: var(--muted); min-height: 16px; }
.item .btn { width: 100%; margin-top: 4px; }
.item.equipped { border-color: var(--mint); }
.item.legendary::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 227, 138, .13) 48%, transparent 60%); background-size: 260% 100%;
  animation: sheen 4s ease-in-out infinite;
}
@keyframes sheen { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
.title-pill {
  display: inline-block; padding: 5px 12px; border-radius: 999px; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: var(--t-sm);
  color: var(--rc); border: 1px solid color-mix(in srgb, var(--rc) 55%, transparent);
}
.cons-art { font-size: 46px; }

/* ============ Друзья ============ */
.invite-hero { padding: 20px 18px 18px; margin-top: 8px; border-color: var(--line-hi); }
.invite-hero h2 { font-size: var(--t-2xl); line-height: 1.1; max-width: 12em; }
.invite-hero .perks { list-style: none; padding: 0; margin: 16px 0 18px; display: flex; flex-direction: column; gap: 10px; }
.invite-hero .perk { display: grid; grid-template-columns: 74px 1fr; align-items: baseline; gap: 10px; font-size: var(--t-sm); color: var(--muted); }
.invite-hero .perk b { font-family: var(--serif); font-size: var(--t-lg); color: var(--gold); font-weight: 800; }
.invite-actions { display: flex; gap: 8px; }
.invite-actions .btn-gold { flex: 1; }
.invite-actions .btn-ghost { width: 52px; height: 52px; padding: 0; }
.stats3 { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-tile); }
.stat { padding: 14px 8px; text-align: center; }
.stats3 .stat + .stat { border-left: 1px solid var(--line); }
.stat b { display: block; font-family: var(--serif); font-size: var(--t-xl); font-weight: 800; }
.stat span { font-size: var(--t-xs); color: var(--muted); }
.milestone { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.milestone .m-art { width: 72px; height: 48px; flex: none; display: grid; place-items: center; }
.friend { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.friend .f-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.friend .f-sub { font-size: var(--t-xs); color: var(--muted); }

/* ============ Нижний лист ============ */
.sheet-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(6, 5, 20, .65); animation: fadeIn .25s ease-out; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: calc(100% - var(--safe-t) - 12px); overflow-y: auto; overscroll-behavior: contain;
  padding: 10px 18px calc(22px + var(--safe-b));
  background: var(--night); border-top: 1px solid var(--line-hi); border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: 0 -24px 60px rgba(0, 0, 0, .5);
  animation: sheetUp .42s var(--ease-out); scrollbar-width: none;
}
.sheet.closing { animation: sheetDown .28s ease-in forwards; }
.sheet-backdrop.closing { animation: fadeOut .28s ease-in forwards; }
.sheet .grab { width: 40px; height: 4px; border-radius: 9px; background: var(--line-hi); margin: 0 auto 14px; }
.sheet .close-x { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; color: var(--muted); border: 1px solid var(--line); }
.sheet h2 { font-size: var(--t-xl); text-align: center; line-height: 1.15; }
.sheet .sub { text-align: center; color: var(--muted); font-size: var(--t-sm); margin: 6px auto 14px; max-width: 30em; }
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes sheetDown { to { transform: translateY(100%); } }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes fadeOut { to { opacity: 0; } }

/* Ежедневный бонус */
.daily-head { text-align: center; margin-bottom: 16px; }
.daily-head .flame { font-size: 40px; }
.daily-head .streak-num { font-family: var(--serif); font-size: 64px; font-weight: 900; line-height: 1; color: var(--gold); }
.days { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-bottom: 14px; }
.day {
  position: relative; border-radius: 14px; padding: 9px 4px 8px; text-align: center; border: 1px solid var(--line);
  display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: var(--muted);
}
.day b { font-family: var(--serif); font-size: var(--t-md); font-weight: 800; color: var(--text); }
.day.big { grid-column: span 2; flex-direction: row; justify-content: center; gap: 10px; font-size: var(--t-xs); }
.day.big b { font-size: var(--t-lg); }
.day.claimed { border-color: rgba(111, 240, 200, .4); color: var(--mint); }
.day.claimed::after { content: "✓"; position: absolute; top: 3px; right: 7px; color: var(--mint); font-weight: 900; font-size: 12px; }
.day.today { border: 1.5px solid var(--gold); background: rgba(255, 203, 71, .1); color: var(--gold); }
.freeze-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; }
.freeze-row .fz { font-size: 24px; }
.warn { padding: 10px 12px; border-radius: 12px; font-size: var(--t-sm); margin-bottom: 12px; border: 1px solid rgba(255, 122, 138, .4); color: #FFB3BD; }
.warn.info { border-color: var(--line-hi); color: var(--silver); }

/* Лига */
.league-head { text-align: center; }
.tier-big { width: 80px; height: 80px; margin: 2px auto 10px; font-size: 40px; border-width: 2px; box-shadow: 0 0 36px color-mix(in srgb, var(--tier-c) 40%, transparent); }
.tiers { display: flex; align-items: center; justify-content: center; gap: 0; margin: 12px 0 16px; }
.tiers span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 17px; border: 1px solid var(--line); opacity: .4; }
.tiers span + span { margin-left: 14px; position: relative; }
.tiers span + span::before { content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 1px; background: var(--line-hi); }
.tiers span.cur { opacity: 1; border-color: var(--tier-c); transform: scale(1.18); }
.tiers span.past { opacity: .8; }
.lb-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; }
.lb-row.me { background: rgba(255, 203, 71, .08); }
.lb-rank { width: 26px; text-align: center; font-family: var(--serif); font-weight: 800; font-size: var(--t-md); color: var(--muted); }
.lb-rank.medal { font-size: 19px; }
.lb-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lb-title { font-size: 11px; font-weight: 600; }
.lb-pts { font-family: var(--serif); font-weight: 800; display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.zone { display: flex; align-items: center; gap: 8px; padding: 6px 12px; font-size: 11.5px; font-weight: 600; }
.zone::before, .zone::after { content: ""; flex: 1; border-top: 1px dashed currentColor; opacity: .5; }
.zone.up { color: var(--mint); }
.zone.down { color: var(--danger); }

/* Профиль */
.profile-head { text-align: center; margin: 6px 0 18px; }
.profile-head .ava { width: 92px; height: 92px; }
.profile-head .ava .ring { inset: -5px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5.5px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5.5px), #000 calc(100% - 5px)); }
.profile-head h2 { margin-top: 12px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--r-tile); overflow: hidden; }
.stats-grid .stat { text-align: left; padding: 12px 14px; border-top: 1px solid var(--line); }
.stats-grid .stat:nth-child(-n+2) { border-top: 0; }
.stats-grid .stat:nth-child(even) { border-left: 1px solid var(--line); }
.stats-grid .stat b { font-size: var(--t-lg); }

/* Онбординг и итоги */
.onb { text-align: center; padding: 6px 4px 0; }
.onb .onb-art { height: 140px; display: grid; place-items: center; margin-bottom: 6px; }
.onb h2 { font-size: var(--t-2xl); }
.onb p { color: var(--muted); margin: 10px auto 18px; max-width: 26em; }
.onb-list { display: flex; flex-direction: column; text-align: left; margin: 14px 0 18px; border: 1px solid var(--line); border-radius: var(--r-tile); overflow: hidden; }
.onb-list div { display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-weight: 600; }
.onb-list div + div { border-top: 1px solid var(--line); }
.onb-list div span:first-child { font-size: 20px; }
.dots { display: flex; justify-content: center; gap: 6px; margin-bottom: 14px; }
.dots i { width: 6px; height: 6px; border-radius: 9px; background: var(--line-hi); transition: all .3s; }
.dots i.on { width: 20px; background: var(--gold); }
.reward-big { text-align: center; padding: 6px 0; }
.reward-big .rb-amount { font-family: var(--serif); font-size: 46px; font-weight: 900; display: inline-flex; align-items: center; gap: 10px; color: var(--gold); }
.reward-big .star-ico { width: 38px; height: 38px; }

/* ============ Тосты и эффекты ============ */
#toasts { position: fixed; top: calc(12px + var(--safe-t)); left: 16px; right: 16px; z-index: 80; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  padding: 10px 16px; border-radius: 999px; font-weight: 600; font-size: var(--t-sm); max-width: 100%;
  background: var(--night-hi); border: 1px solid var(--line-hi); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: toastIn .35s var(--ease-spring);
}
.toast.leaving { animation: toastOut .3s ease-in forwards; }
.toast.bump { animation: toastBump .3s var(--ease-spring); }
@keyframes toastBump { 50% { transform: scale(1.04); } }
.toast.err { border-color: rgba(255, 122, 138, .6); }
.toast.ok { border-color: rgba(255, 203, 71, .6); }
@keyframes toastIn { from { transform: translateY(-16px) scale(.94); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-10px); opacity: 0; } }

.float-num {
  position: fixed; z-index: 61; pointer-events: none; font-family: var(--serif); font-weight: 900; font-size: 26px;
  color: var(--gold); text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
  animation: floatUp .9s var(--ease-out) forwards;
}
@keyframes floatUp { 0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translate(-50%, -80%) scale(1.05); } 100% { transform: translate(-50%, -240%); opacity: 0; } }
.fly-star { position: fixed; z-index: 62; width: 22px; height: 22px; pointer-events: none; margin: -11px 0 0 -11px; }

/* ============ Заставка ============ */
#splash { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 16px; background: var(--night-deep); transition: opacity .6s, visibility .6s; }
#splash.hide { opacity: 0; visibility: hidden; }
.splash-star {
  width: 64px; height: 64px; animation: splashIn 1.4s var(--ease-out) infinite alternate;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23FFE38A'/%3E%3Cstop offset='1' stop-color='%23F29A1D'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M12 2.6l2.75 5.9 6.45.75-4.78 4.4 1.3 6.37L12 16.8l-5.72 3.22 1.3-6.37-4.78-4.4 6.45-.75z' fill='url(%23g)' stroke='url(%23g)' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.splash-name { font-family: var(--serif); font-weight: 800; font-size: var(--t-2xl); }
@keyframes splashIn { from { transform: scale(.85); opacity: .6; } to { transform: scale(1.05); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@media (max-width: 360px) {
  .page { padding-left: 12px; padding-right: 12px; }
  .riddle-slot { width: 58px; height: 66px; }
  .game-card .g-art { width: 72px; height: 72px; }
  .mini-wheel { width: 70px; height: 70px; }
}

/* ============ Промо-окно: падающая звезда → карточка ============ */
.promo-backdrop {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px 20px;
  padding-top: calc(24px + var(--safe-t)); padding-bottom: calc(24px + var(--safe-b));
  background: radial-gradient(70% 50% at 50% 45%, rgba(38, 32, 102, .55), rgba(6, 5, 20, .82));
  animation: fadeIn .35s ease-out;
}
.promo-backdrop.closing { animation: fadeOut .3s ease-in forwards; }
.promo-streak { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.promo-streak line { stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: streak .55s cubic-bezier(.6, 0, .9, .5) forwards; }
.promo-streak circle { opacity: 0; animation: streakHead .55s cubic-bezier(.6, 0, .9, .5) forwards; }
@keyframes streak { 0% { stroke-dashoffset: 1; opacity: 1; } 70% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes streakHead { 0% { opacity: 1; } 100% { opacity: 0; } }

.promo-card {
  position: relative; width: 100%; max-width: 360px; padding: 26px 22px 18px; text-align: center; border-radius: 30px;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255, 203, 71, .16), transparent 60%),
    linear-gradient(180deg, #1E1A52 0%, #13103A 100%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 203, 71, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0; transform: scale(.6) translateY(20px);
  animation: promoIn .7s var(--ease-spring) .45s forwards;
}
.promo-backdrop.closing .promo-card { animation: promoOut .25s ease-in forwards; }
@keyframes promoIn { to { opacity: 1; transform: none; } }
@keyframes promoOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.92) translateY(10px); } }

.promo-orb { position: relative; width: 148px; height: 148px; margin: -2px auto 14px; display: grid; place-items: center; }
.promo-orb .p-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: spin 60s linear infinite; }
.promo-orb .p-ring circle, .promo-orb .p-ring line { fill: none; stroke: var(--gold); vector-effect: non-scaling-stroke; }
.promo-orb .p-glow { position: absolute; inset: 16%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 203, 71, .45), transparent 70%); filter: blur(6px); }
.promo-orb .p-star { position: relative; width: 62%; height: 62%; animation: promoFloat 3.4s ease-in-out infinite 1.2s; }
@keyframes promoFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.promo-orb .p-spark { position: absolute; width: 10px; height: 10px; background: var(--gold); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: twinkle 2.4s ease-in-out infinite; }
.promo-orb .p-spark:nth-of-type(1) { top: 10%; right: 14%; animation-delay: 1.1s; }
.promo-orb .p-spark:nth-of-type(2) { bottom: 16%; left: 8%; width: 7px; height: 7px; animation-delay: 1.8s; }
.promo-orb .p-spark:nth-of-type(3) { top: 30%; left: 2%; width: 6px; height: 6px; background: var(--silver); animation-delay: 2.4s; }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }

.promo-title { font-family: var(--serif); font-weight: 900; font-size: var(--t-2xl); line-height: 1.1; margin: 0 auto; max-width: 13em; }
.promo-text { color: var(--muted); font-size: var(--t-md); line-height: 1.5; margin: 10px auto 20px; max-width: 26em; white-space: pre-line; }
.promo-go { position: relative; overflow: hidden; height: 56px; font-size: 16.5px; }
.promo-go::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  animation: goShine 2.8s ease-in-out infinite 1.4s;
}
@keyframes goShine { 0% { left: -60%; } 45%, 100% { left: 130%; } }
.promo-later { display: block; margin: 10px auto 0; padding: 8px 16px; color: var(--dim); font-size: var(--t-sm); font-weight: 600; }
.promo-card { pointer-events: none; }
.promo-backdrop.ready .promo-card { pointer-events: auto; }

/* ============ Ивент ============ */
.event-banner {
  display: flex; align-items: center; gap: 10px; margin: 2px 0 6px; padding: 10px 14px; border-radius: 14px;
  background: linear-gradient(90deg, rgba(255, 143, 177, .16), rgba(255, 203, 71, .14));
  border: 1px solid rgba(255, 203, 71, .4); font-size: var(--t-sm);
}
.event-banner .ev-star { color: var(--gold); font-size: 18px; }
.event-banner b { font-family: var(--serif); font-weight: 800; }
.event-banner .ev-left { color: var(--muted); font-size: var(--t-xs); white-space: nowrap; }

/* ============ Обсерватория ============ */
.obs-card { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 14px 16px; }
.obs-card .obs-art {
  width: 50px; height: 50px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 25px;
  border: 1.5px solid rgba(255, 203, 71, .5); background: radial-gradient(circle, rgba(255, 203, 71, .18), transparent 70%);
}
.obs-card .mc-sub { margin: 1px 0 8px; }
.obs-card .bar { height: 5px; }
.obs-card .obs-btn { min-width: 76px; }
.obs-card.ready { border-color: rgba(255, 203, 71, .6); }
.obs-card.ready .obs-art { animation: obsPing 2.4s ease-in-out infinite; }
@keyframes obsPing { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 203, 71, .4); } 50% { box-shadow: 0 0 0 8px rgba(255, 203, 71, 0); } }
.obs-card + .home-grid { margin-top: 10px; }

/* ============ Квесты на главной ============ */
.quests-card { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 16px; }
.quests-card.ready { border-color: rgba(255, 203, 71, .5); }
.q-pips { display: flex; gap: 6px; }
.q-pips span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; border: 1px solid var(--line-hi); opacity: .55; }
.q-pips span.ready { opacity: 1; border-color: var(--gold); background: rgba(255, 203, 71, .12); }
.q-pips span.on { opacity: 1; border-color: var(--mint); background: rgba(111, 240, 200, .12); }
.quest-bonus .t-ico { border-color: rgba(255, 203, 71, .5); }

.home-card { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 14px 16px; border-style: dashed; border-color: var(--line-hi); }

/* ============ Улучшения ============ */
.upgrade { display: flex; align-items: center; gap: 13px; padding: 14px; }
.upgrade .t-ico { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 21px; border: 1px solid var(--line-hi); }
.upgrade .t-title { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upgrade .t-desc { color: var(--muted); font-size: var(--t-xs); margin-top: 3px; }
.upgrade .t-desc b { color: var(--gold); }
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 7px; height: 7px; border-radius: 2px; background: rgba(201, 195, 242, .18); transform: rotate(45deg); }
.pips i.on { background: var(--gold); }
.shop-note { color: var(--muted); font-size: var(--t-xs); margin: 12px 4px 0; line-height: 1.5; }

/* ============ Шеринг и настройки ============ */
.share-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.share-row .btn { height: 44px; font-size: 13px; padding: 0 10px; }
.story-btn { margin-top: 8px; height: 46px; font-size: var(--t-sm); }
.setting { display: flex; align-items: center; gap: 12px; padding: 14px; cursor: pointer; }
.setting .t-title { font-weight: 700; }
.setting .t-desc { color: var(--muted); font-size: var(--t-xs); margin-top: 2px; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 28px; border-radius: 99px; background: rgba(201, 195, 242, .2); position: relative; transition: background .2s; cursor: pointer; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .25s var(--ease-spring); }
.switch:checked { background: var(--gold); }
.switch:checked::after { transform: translateX(18px); }
.switch:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.ev-x { font-size: 11px; padding: 2px 6px; border-radius: 6px; background: rgba(43, 26, 0, .15); }

/* ============ Созвездия (кланы) ============ */
.seg-top { margin-top: 8px; }
.clan-emblem { width: 38px; height: 38px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; font-size: 19px; border: 1px solid var(--line-hi); }
.clan-emblem.big {
  width: 76px; height: 76px; font-size: 38px; margin: 2px auto 10px; display: grid;
  border: 1.5px solid rgba(255, 203, 71, .55); background: radial-gradient(circle, rgba(255, 203, 71, .16), transparent 70%);
  box-shadow: 0 0 32px rgba(255, 203, 71, .18);
}
.clan-hero, .clan-head { text-align: center; padding: 22px 18px 18px; }
.clan-hero h2, .clan-head h2 { font-size: var(--t-2xl); line-height: 1.1; }
.clan-hero p { color: var(--muted); margin: 10px auto 18px; max-width: 28em; }
.clan-head .sub { margin: 6px 0 10px; }
.clan-score { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 4px 0 12px; }
.clan-score .num { font-size: var(--t-3xl); font-weight: 900; color: var(--gold); line-height: 1; }
.clan-score .muted { font-size: var(--t-sm); margin-left: 4px; }
.clan-row { display: flex; align-items: center; gap: 11px; padding: 10px 12px; cursor: pointer; }
.clan-row.me { background: rgba(255, 203, 71, .08); }
.text-input {
  width: 100%; height: 52px; padding: 0 16px; border-radius: 14px; margin: 4px 0 14px;
  background: var(--plate-hi); border: 1px solid var(--line-hi); color: var(--text); font: inherit; font-size: 17px;
  user-select: text; -webkit-user-select: text;
}
.text-input:focus { outline: none; border-color: var(--gold); }
.emblems { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 16px; }
.emblems button { height: 48px; border-radius: 14px; font-size: 22px; border: 1px solid var(--line-hi); }
.emblems button.active { border-color: var(--gold); background: rgba(255, 203, 71, .14); }

/* ============ Сезонный пропуск ============ */
.season-card { display: flex; align-items: center; gap: 14px; margin-top: 10px; padding: 14px 16px; }
.season-card.ready { border-color: rgba(255, 203, 71, .55); }
.season-card .mc-sub { margin: 1px 0 8px; }
.season-card .bar { height: 5px; }
.season-lvl {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center; position: relative;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, #FFE38A, var(--gold-deep));
}
.season-lvl .num { font-size: var(--t-lg); font-weight: 900; color: var(--gold-ink); }
.season-lvl.big { width: 76px; height: 76px; margin: 2px auto 10px; }
.season-lvl.big .num { font-size: var(--t-2xl); }
.season-head { text-align: center; margin-bottom: 16px; }
.season-tier { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.season-tier .st-num { width: 26px; text-align: center; font-weight: 800; color: var(--muted); }
.season-tier .st-art { width: 58px; height: 46px; flex: none; display: grid; place-items: center; }
.season-tier .t-title { font-weight: 700; font-size: var(--t-sm); }
.season-tier .t-desc { color: var(--muted); font-size: var(--t-xs); }
.season-tier.done { opacity: .5; }
.season-tier.ready { background: rgba(255, 203, 71, .08); }
.season-tier.ready .st-num { color: var(--gold); }
.season-tier.special { background: color-mix(in srgb, var(--rc) 10%, transparent); }
.season-tier.special .t-title { color: var(--rc); }
.season-tier:not(.ready):not(.done) .st-art { filter: saturate(.5) brightness(.8); }
.st-lock { font-size: 15px; opacity: .6; width: 34px; text-align: center; }
.sr-stars { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 12px; }
.sr-stars .star-ico { width: 20px; height: 20px; }
.sr-emoji { font-size: 26px; }
.sr-item { transform: scale(.5); transform-origin: center; width: 100%; height: 100%; display: grid; place-items: center; }

/* ============ Вывод ============ */
.top-right { display: flex; align-items: center; gap: 10px; }
.wd-btn {
  height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--gold-ink);
  background: linear-gradient(180deg, #FFDC73, var(--gold) 55%, #F7B236); box-shadow: 0 0 16px rgba(255, 203, 71, .35);
}
.wd-btn:active { transform: scale(.95); }
.wallet-head { text-align: center; margin: 4px 0 8px; }
.wallet-head .w-label { color: var(--muted); font-size: var(--t-sm); }
.wallet-head .w-balance { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 6px; }
.wallet-head .w-balance .num { font-size: 48px; font-weight: 900; color: var(--gold); line-height: 1; }
.wallet-head .w-balance .star-ico { width: 38px; height: 38px; }
.wallet-head .w-sub { color: var(--muted); font-size: var(--t-sm); max-width: 26em; margin: 0 auto; }
.wd-cond { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.wd-cond .t-title { font-weight: 700; }
.wd-cond .t-desc { color: var(--muted); font-size: var(--t-xs); margin-top: 1px; }
.wd-cond .bar { margin-top: 8px; height: 4px; }
.wd-step { width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 800; border: 1.5px solid var(--line-hi); color: var(--muted); }
.wd-cond.done .wd-step { border-color: var(--mint); color: var(--mint); background: rgba(111, 240, 200, .1); }
.wd-cond.done .t-title { color: var(--muted); }
.wd-check { color: var(--mint); font-weight: 900; font-size: 18px; width: 34px; text-align: center; }
.shake-x { animation: shakeX .5s ease-in-out; }
@keyframes shakeX { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.gift-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gift { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 8px 10px; border-radius: var(--r-tile); border: 1px solid var(--line); background: var(--plate); text-align: center; }
.gift.can { border-color: rgba(255, 203, 71, .45); }
.gift .btn { width: 100%; height: 32px; font-size: 12px; padding: 0 4px; margin-top: 4px; overflow: hidden; text-overflow: ellipsis; }
.gift-art { width: 58px; height: 58px; display: grid; place-items: center; font-size: 36px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 203, 71, .22), transparent 70%); }
.gift-art.big { width: 110px; height: 110px; font-size: 68px; margin: 4px auto 10px; }
.gift-art.sent span { animation: giftFly 1.2s var(--ease-spring) both; display: inline-block; }
@keyframes giftFly { 0% { transform: scale(.3) rotate(-20deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: none; } }
.gift-tg { font-size: 10.5px; color: var(--muted); }
.gift-price { font-weight: 800; font-size: var(--t-md); color: var(--gold); display: flex; align-items: center; gap: 3px; }
.wd-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; }
.wd-row .t-title { font-weight: 700; font-size: var(--t-sm); }
.wd-row .t-desc { color: var(--muted); font-size: var(--t-xs); }
.wd-emoji { font-size: 26px; width: 34px; text-align: center; }
.wd-pending { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 10px 0 0; border-radius: var(--r-tile); border: 1px solid rgba(255, 203, 71, .45); background: rgba(255, 203, 71, .07); font-size: var(--t-sm); }
.wd-pending .t-desc { color: var(--muted); font-size: var(--t-xs); margin-top: 2px; }
.wd-pending-dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(255, 203, 71, .6); animation: obsPing 1.8s ease-in-out infinite; }
.wd-confirm { text-align: center; padding-top: 4px; }
.wd-confirm .sub b { color: var(--gold); }
.wd-steps { display: flex; justify-content: center; gap: 8px; margin: 4px 0 18px; font-size: 11.5px; color: var(--muted); }
.wd-steps div { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 92px; }
.wd-steps span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-hi); font-weight: 800; }
.wd-steps .on { color: var(--text); }
.wd-steps .on span { border-color: var(--gold); background: var(--gold); color: var(--gold-ink); }
.wd-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; padding: 14px 16px; border-color: rgba(255, 203, 71, .5); background: rgba(255, 203, 71, .06); }
.wd-banner .t-title { font-weight: 800; }
.wd-banner .t-desc { color: var(--muted); font-size: var(--t-xs); margin: 2px 0 8px; }
.wd-banner.done .t-desc { margin-bottom: 0; }
.wd-banner .bar { height: 5px; }
@media (max-width: 360px) { .gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wd-btn { padding: 0 9px; } }