/* Костёр BERDA — Telegram Mini App сообщества BERDA Survival.
   Токены и геометрия взяты с сайта BERDA (landing.css): тёмный ink, панели, «пиксельные» срезанные углы
   вместо скруглений (правило стиля BERDA), Russo One для заголовков, JetBrains Mono для текста. */

@font-face { font-family: "Russo One"; src: url(fonts/russo-one-cyrillic.woff2) format("woff2"); font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Russo One"; src: url(fonts/russo-one-latin.woff2) format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212; }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; src: url(fonts/jetbrains-mono-cyrillic.woff2) format("woff2"); font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 100 800; src: url(fonts/jetbrains-mono-latin.woff2) format("woff2"); font-display: swap; unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2212; }

:root {
  --ink: #070c18; --panel: #0e182c; --panel-2: #13213a; --panel-3: #1a2b48;
  --line: rgba(127, 176, 230, .14); --line-2: rgba(127, 176, 230, .26);
  --cream: #eeede6; --muted: #8aa0bd; --dim: #5f7594;
  --red: #ff4a2e; --red-d: #a52a17; --blue: #4c84bd; --blue-hi: #7fb0e6;
  --gold: #ffc94a; --gold-d: #b9871a; --green: #7ddc6a; --green-d: #3f8a33; --violet: #a98bff; --violet-d: #6447c2;
  --orange: #ff8a3d; --cyan: #4ecbff;
  --acc: var(--gold); --acc-rgb: 255, 201, 74;
  --display: "Russo One", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --n: polygon(0 8px, 8px 8px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 8px, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 8px), 0 calc(100% - 8px));
  --ns: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  --safe-top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px));
  --tabs-h: 64px;
  color-scheme: dark;
}
[data-tab="home"], [data-tab="activity"] { --acc: var(--gold); --acc-rgb: 255, 201, 74; }
[data-tab="tasks"] { --acc: var(--green); --acc-rgb: 125, 220, 106; }
[data-tab="shop"] { --acc: var(--violet); --acc-rgb: 169, 139, 255; }
[data-tab="games"] { --acc: var(--orange); --acc-rgb: 255, 138, 61; }
[data-tab="top"], [data-tab="profile"] { --acc: var(--cyan); --acc-rgb: 78, 203, 255; }
[data-tab="support"] { --acc: var(--blue-hi); --acc-rgb: 127, 176, 230; }
[data-tab="admin"], [data-tab="raids"] { --acc: var(--red); --acc-rgb: 255, 74, 46; }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--ink); }
body { color: var(--cream); font: 400 14px/1.5 var(--mono); overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
input, textarea, select { font: inherit; color: var(--cream); user-select: text; -webkit-user-select: text; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 400; }
p { margin: 0; }
svg { display: block; }
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; flex: none; }
.ico.fill { fill: currentColor; stroke: none; }

/* ── оболочка ── */
.app { position: fixed; inset: 0; display: flex; flex-direction: column; height: var(--tg-viewport-stable-height, 100%); }
.app::before { /* фоновое свечение секции + пиксельная сетка */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(var(--acc-rgb), .16), transparent 60%),
    linear-gradient(rgba(127, 176, 230, .035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(127, 176, 230, .035) 1px, transparent 1px) 0 0 / 24px 24px;
  transition: background .4s;
}
.hdr { position: relative; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(10px + var(--safe-top)) 16px 10px; background: linear-gradient(var(--ink) 60%, rgba(7, 12, 24, 0)); }
.ava { width: 40px; height: 40px; display: grid; place-items: center; font: 18px var(--display); color: var(--ink); background: var(--acc); clip-path: var(--ns); flex: none; transition: background .3s; position: relative; overflow: hidden; }
.ava img { width: 100%; height: 100%; object-fit: cover; }
.hdr-who { min-width: 0; flex: 1; }
.hdr-name { font: 15px/1.15 var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-rank { display: flex; align-items: center; gap: 6px; font: 600 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hdr-rank i { width: 8px; height: 8px; background: currentColor; display: inline-block; }
.bal { position: relative; display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 8px; background: rgba(255, 201, 74, .1); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .35); clip-path: var(--ns); color: var(--gold); }
.bal .ico { width: 22px; height: 22px; }
.bal b { font: 17px/1 var(--display); color: var(--cream); font-variant-numeric: tabular-nums; }
.bal-float { position: absolute; right: 8px; top: -2px; font: 13px var(--display); color: var(--gold); pointer-events: none; animation: floatUp 1.1s ease-out forwards; }
@keyframes floatUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-26px); opacity: 0; } }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); color: var(--muted); }
.icon-btn:active { transform: translateY(1px); }

.view { position: relative; z-index: 1; flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 4px 16px calc(var(--tabs-h) + var(--safe-bottom) + 20px); overscroll-behavior: contain; }
.view > * + *, .page-in > * + * { margin-top: 14px; }
.page-in { animation: pageIn .32s cubic-bezier(.2, .8, .2, 1); }
@keyframes pageIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.tabs { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr); height: calc(var(--tabs-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: rgba(10, 17, 32, .96); box-shadow: inset 0 1px 0 var(--line); backdrop-filter: blur(10px); }
.tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--dim); font: 9.5px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; transition: color .2s; }
.tab .ico { width: 24px; height: 24px; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.tab::before { content: ""; position: absolute; top: 0; left: 26%; right: 26%; height: 3px; background: var(--tc); transform: scaleX(0); transition: transform .25s; }
.tab.on { color: var(--tc); }
.tab.on::before { transform: scaleX(1); }
.tab.on .ico { transform: translateY(-2px) scale(1.08); }
.tab .dot { position: absolute; top: 9px; left: calc(50% + 8px); width: 8px; height: 8px; background: var(--red); box-shadow: 0 0 0 2px #0a1120; }

/* ── типографика ── */
.tagline { font: 600 11px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--acc); display: flex; align-items: center; gap: 8px; }
.tagline::before { content: "//"; color: var(--dim); letter-spacing: 0; }
.h1 { font-size: 26px; line-height: 1.05; text-transform: uppercase; text-shadow: 2px 2px 0 rgba(var(--acc-rgb), .35); margin-top: 6px; }
.h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .02em; display: flex; align-items: center; gap: 8px; }
.h2 .ico { color: var(--acc); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin: 22px 0 10px; }
.sec-head .more { font: 600 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--blue-hi); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.num { font-family: var(--display); font-variant-numeric: tabular-nums; }
.gold { color: var(--gold); } .green { color: var(--green); } .red { color: var(--red); } .violet { color: var(--violet); } .cyan { color: var(--cyan); }

/* ── карточки ── */
.card { position: relative; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--n); padding: 14px; }
.card.hl { box-shadow: inset 0 0 0 1px var(--line), inset 0 3px 0 var(--acc); }
.card.glow { background: linear-gradient(160deg, rgba(var(--acc-rgb), .14), var(--panel) 55%); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .3); }
.card.tap { transition: transform .12s, background .2s; }
.card.tap:active { transform: scale(.98); }
.row { display: flex; align-items: center; gap: 10px; }
.row.between { justify-content: space-between; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stack > * + * { margin-top: 10px; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; background: rgba(127, 176, 230, .12); color: var(--blue-hi); clip-path: var(--ns); white-space: nowrap; }
.chip .ico { width: 13px; height: 13px; stroke-width: 2.6; }
.chip.acc { background: rgba(var(--acc-rgb), .14); color: var(--acc); }
.chip.gold { background: rgba(255, 201, 74, .14); color: var(--gold); }
.chip.green { background: rgba(125, 220, 106, .14); color: var(--green); }
.chip.red { background: rgba(255, 74, 46, .16); color: #ff7a63; }
.chip.violet { background: rgba(169, 139, 255, .16); color: var(--violet); }

/* ── кнопки ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 18px; font: 14px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--cream); background: var(--panel-3); clip-path: var(--ns); transition: transform .08s, filter .15s, background .15s; white-space: nowrap; position: relative; }
.btn .ico { width: 18px; height: 18px; stroke-width: 2.6; }
.btn:active:not(:disabled) { transform: translateY(2px); }
.btn.block { width: 100%; }
.btn.sm { height: 36px; padding: 0 12px; font-size: 12px; }
.btn.primary { background: var(--red); color: #fff; box-shadow: inset 0 -4px 0 var(--red-d); padding-bottom: 3px; }
.btn.gold { background: var(--gold); color: #2a1d00; box-shadow: inset 0 -4px 0 var(--gold-d); padding-bottom: 3px; }
.btn.green { background: var(--green); color: #0b2207; box-shadow: inset 0 -4px 0 var(--green-d); padding-bottom: 3px; }
.btn.violet { background: var(--violet); color: #160b33; box-shadow: inset 0 -4px 0 var(--violet-d); padding-bottom: 3px; }
.btn.ghost { background: rgba(7, 12, 24, .35); box-shadow: inset 0 0 0 2px var(--line-2); }
.btn:disabled:not(.loading) { background: var(--panel-2); color: var(--dim); box-shadow: inset 0 0 0 1px var(--line); cursor: default; padding-bottom: 0; }
.btn.loading { color: transparent !important; pointer-events: none; }
.btn.loading .ico { opacity: 0; }
.btn.loading::after { content: ""; position: absolute; width: 18px; height: 18px; border: 3px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.18); } }

/* ── сегментная полоса прогресса (как полосы HP/еды в игре BERDA) ── */
.seg { display: flex; gap: 3px; height: 10px; }
.seg i { flex: 1; background: rgba(127, 176, 230, .12); position: relative; overflow: hidden; }
.seg i b { position: absolute; inset: 0 auto 0 0; background: var(--sc, var(--acc)); transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.seg.xl { height: 14px; gap: 4px; }
.seg.thin { height: 6px; gap: 2px; }

/* ── баланс-герой ── */
.hero { padding: 18px 16px 16px; }
.hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.hero-bal { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.hero-bal .ico { width: 38px; height: 38px; color: var(--gold); filter: drop-shadow(0 0 12px rgba(255, 201, 74, .45)); }
.hero-bal b { font: 44px/1 var(--display); font-variant-numeric: tabular-nums; text-shadow: 3px 3px 0 rgba(255, 201, 74, .25); }
.hero-sub { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.hero-sub b { color: var(--cream); font-weight: 600; }

/* серия отметок */
.streak { margin-top: 14px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--line); }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin: 10px 0 12px; }
.day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 54px; background: var(--panel-2); clip-path: var(--ns); font: 600 10px/1 var(--mono); color: var(--dim); position: relative; }
.day b { font: 13px/1 var(--display); color: var(--muted); }
.day.done { background: rgba(255, 201, 74, .16); color: var(--gold); }
.day.done b { color: var(--gold); }
.day.done::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; background: var(--gold); }
.day.now { background: var(--gold); color: #3a2900; animation: dayPulse 1.6s ease-in-out infinite; }
.day.now b { color: #2a1d00; }
.day.x2 b::after { content: " x2"; font-size: 9px; }
@keyframes dayPulse { 50% { transform: translateY(-3px); } }

/* ранг */
.rank { display: flex; gap: 12px; align-items: center; }
.rank-badge { width: 56px; height: 56px; display: grid; place-items: center; background: rgba(var(--rc-rgb, 127, 176, 230), .15); color: var(--rc); clip-path: var(--n); flex: none; position: relative; }
.rank-badge .ico { width: 30px; height: 30px; }
.rank-badge span { position: absolute; bottom: 3px; right: 6px; font: 12px var(--display); }
.rank-info { flex: 1; min-width: 0; }
.rank-name { font: 18px/1.1 var(--display); text-transform: uppercase; margin-top: 4px; }
.rank-next { font-size: 11.5px; color: var(--muted); margin: 3px 0 8px; }

/* статы */
.stat { padding: 12px; }
.stat-v { font: 24px/1 var(--display); font-variant-numeric: tabular-nums; margin-top: 6px; }
.stat-l { font: 600 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat-l .ico { width: 14px; height: 14px; color: var(--acc); }
.stat-s { font-size: 11px; color: var(--dim); margin-top: 4px; }

/* график */
.chart-tabs { display: flex; gap: 6px; }
.chart-tabs button { height: 28px; padding: 0 10px; font: 600 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); clip-path: var(--ns); }
.chart-tabs button.on { color: var(--ink); background: var(--acc); }
.chart { position: relative; margin-top: 12px; }
.chart svg { width: 100%; height: 130px; overflow: visible; }
.chart .bar { transition: opacity .2s; }
.chart .tip { position: absolute; top: -6px; transform: translateX(-50%); padding: 4px 8px; background: var(--cream); color: var(--ink); font: 600 11px/1.2 var(--mono); white-space: nowrap; pointer-events: none; clip-path: var(--ns); }
.chart-total { font-size: 12px; color: var(--muted); }
.chart-total b { color: var(--cream); font: 15px var(--display); }

/* цели */
.goal { padding: 12px 14px; }
.goal-t { font: 13.5px/1.25 var(--display); }
.goal-p { font-size: 11.5px; color: var(--muted); margin: 3px 0 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* правила */
.rules { display: grid; gap: 1px; background: var(--line); clip-path: var(--n); }
.rule { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--panel); }
.rule .ico { width: 18px; height: 18px; color: var(--acc); justify-self: center; }
.rule-t { font-size: 12.5px; line-height: 1.25; }
.rule-h { font-size: 10.5px; color: var(--dim); line-height: 1.3; margin-top: 2px; }
.rule-v { font: 15px var(--display); color: var(--gold); }

/* достижения */
.ach-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.ach { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); text-align: center; }
.ach-i { width: 40px; height: 40px; display: grid; place-items: center; background: rgba(255, 201, 74, .14); color: var(--gold); clip-path: var(--ns); }
.ach-i .ico { width: 22px; height: 22px; }
.ach-t { font: 600 9.5px/1.2 var(--mono); color: var(--muted); min-height: 23px; }
.ach.locked .ach-i { background: var(--panel-2); color: var(--dim); }
.ach.locked .ach-t { color: var(--dim); }

/* журнал */
.ledger { display: grid; gap: 1px; background: var(--line); clip-path: var(--n); }
.lg { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; background: var(--panel); }
.lg-i { width: 30px; height: 30px; display: grid; place-items: center; background: var(--panel-2); clip-path: var(--ns); color: var(--muted); }
.lg-i .ico { width: 16px; height: 16px; }
.lg-t { font-size: 12.5px; line-height: 1.2; }
.lg-s { font-size: 10.5px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.lg-v { font: 14px var(--display); font-variant-numeric: tabular-nums; }
.lg-v.plus { color: var(--green); } .lg-v.minus { color: #ff7a63; }

/* ── задания ── */
.task { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 12px; }
.task-i { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(var(--acc-rgb), .14); color: var(--acc); clip-path: var(--ns); }
.task-i .ico { width: 22px; height: 22px; }
.task-t { font: 14px/1.2 var(--display); }
.task-d { font-size: 11.5px; color: var(--muted); margin: 3px 0 8px; line-height: 1.35; }
.task-f { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.task-f .seg { flex: 1; }
.task-c { font: 600 11px var(--mono); color: var(--muted); white-space: nowrap; }
.task.done { opacity: .62; }
.task.done .task-i { background: rgba(125, 220, 106, .18); color: var(--green); }
.timer { font: 600 10.5px var(--mono); letter-spacing: .08em; color: var(--dim); text-transform: uppercase; display: inline-flex; gap: 5px; align-items: center; }
.timer .ico { width: 12px; height: 12px; }

.ref-link { display: flex; align-items: center; gap: 8px; margin: 12px 0; padding: 0 0 0 12px; height: 44px; background: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); clip-path: var(--ns); }
.ref-link code { flex: 1; font: 12px var(--mono); color: var(--blue-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ref-link button { height: 100%; width: 46px; display: grid; place-items: center; background: var(--panel-3); color: var(--cream); }
.ref-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: 12px; }
.ref-stats div { background: var(--panel); padding: 8px; text-align: center; }
.ref-stats b { display: block; font: 20px var(--display); }
.ref-stats span { font: 600 9.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.field { display: block; width: 100%; height: 46px; padding: 0 14px; background: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--line-2); clip-path: var(--ns); outline: none; font-size: 14px; }
.field:focus { box-shadow: inset 0 0 0 2px var(--acc); }
textarea.field { height: 120px; padding: 12px 14px; resize: vertical; font-size: 12px; }
select.field { appearance: none; }
.code-big { font: 34px/1 var(--display); letter-spacing: .18em; color: var(--gold); text-align: center; padding: 16px 0; background: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .35); clip-path: var(--ns); margin: 10px 0; }
.steps { counter-reset: s; display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.steps li { text-align: left; counter-increment: s; display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; font-size: 12.5px; line-height: 1.4; }
.steps li::before { content: counter(s); width: 26px; height: 26px; display: grid; place-items: center; background: rgba(var(--acc-rgb), .16); color: var(--acc); font: 13px var(--display); clip-path: var(--ns); }

/* ── магазин ── */
.cats { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats button { flex: none; height: 34px; padding: 0 14px; font: 12px var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); }
.cats button.on { color: #160b33; background: var(--violet); box-shadow: none; }
.items { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.item { display: flex; flex-direction: column; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--n); overflow: hidden; position: relative; transition: transform .12s; }
.item:active { transform: scale(.97); }
.item-art { position: relative; aspect-ratio: 1 / .86; display: grid; place-items: center; background: radial-gradient(70% 70% at 50% 45%, rgba(var(--rr), .35), rgba(var(--rr), .06) 70%), var(--panel-2); overflow: hidden; }
.item-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 8px 8px; pointer-events: none; }
.item-art svg, .item-art img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); transition: transform .3s; }
.item:hover .item-art svg { transform: translateY(-3px) rotate(-2deg); }
.item-rar { position: absolute; left: 8px; top: 8px; z-index: 1; font: 600 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; padding: 5px 6px; background: rgba(7, 12, 24, .7); color: rgb(var(--rr)); clip-path: var(--ns); }
.item-left { position: absolute; right: 8px; top: 8px; z-index: 1; font: 600 9px/1 var(--mono); letter-spacing: .08em; padding: 5px 6px; background: rgba(7, 12, 24, .7); color: var(--muted); clip-path: var(--ns); }
.item-b { padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.item-t { font: 13px/1.2 var(--display); min-height: 31px; }
.price { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; background: rgba(255, 201, 74, .12); color: var(--gold); clip-path: var(--ns); font: 15px var(--display); margin-top: auto; }
.price .ico { width: 16px; height: 16px; }
.price.cant { background: var(--panel-2); color: var(--dim); }
.item.soon .item-art > svg { filter: grayscale(1) brightness(.5); }
.ribbon { position: absolute; right: -30px; top: 16px; z-index: 2; transform: rotate(35deg); width: 120px; text-align: center; padding: 4px 0; font: 10px var(--display); letter-spacing: .12em; color: #160b33; background: var(--violet); }
.ribbon.out { background: var(--dim); color: var(--ink); }
.ribbon.own { background: var(--green); color: #0b2207; }
.sheet-art { margin: 0 0 14px; height: 200px; width: 100%; aspect-ratio: auto; clip-path: var(--n); }
.sheet-art svg { width: 60%; height: 80%; }

.promo { padding: 14px; text-align: center; }
.promo-code { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0; padding: 14px 10px; background: var(--ink); box-shadow: inset 0 0 0 2px dashed; outline: 2px dashed rgba(255, 201, 74, .5); outline-offset: -6px; font: 20px/1 var(--display); letter-spacing: .08em; color: var(--gold); user-select: all; -webkit-user-select: all; word-break: break-all; }
.purchase { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 12px; align-items: center; }
.purchase .mini-art { width: 48px; height: 48px; display: grid; place-items: center; background: rgba(var(--rr), .2); clip-path: var(--ns); }
.purchase .mini-art svg { width: 36px; height: 36px; }
.purchase code { font: 13px var(--display); color: var(--gold); letter-spacing: .06em; }

/* ── игры ── */
.seg-ctl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); }
.seg-ctl button { height: 38px; font: 12.5px var(--display); text-transform: uppercase; letter-spacing: .04em; color: var(--muted); clip-path: var(--ns); display: flex; align-items: center; justify-content: center; gap: 6px; }
.seg-ctl button .ico { width: 16px; height: 16px; }
.seg-ctl button.on { background: var(--orange); color: #2b1100; }
.wheel-wrap { position: relative; width: min(84vw, 330px); aspect-ratio: 1; margin: 6px auto 0; }
.wheel-wrap::before { content: ""; position: absolute; inset: -10px; background: radial-gradient(circle, rgba(255, 138, 61, .22), transparent 68%); }
.wheel { position: absolute; inset: 0; will-change: transform; }
.wheel svg { width: 100%; height: 100%; }
.wheel-ptr { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 2; width: 34px; height: 40px; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .5)); }
.wheel-ptr.tick { animation: ptrTick .12s; }
@keyframes ptrTick { 50% { transform: translateX(-50%) rotate(-14deg); } }
.wheel-hub { position: absolute; inset: 39%; z-index: 2; display: grid; place-items: center; background: var(--ink); box-shadow: inset 0 0 0 3px var(--orange); clip-path: var(--n); color: var(--gold); }
.wheel-hub .ico { width: 34px; height: 34px; }
.odds { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); clip-path: var(--ns); }
.odds div { background: var(--panel); padding: 7px 4px; text-align: center; }
.odds b { display: block; font: 13px var(--display); }
.odds span { font: 600 10px var(--mono); color: var(--muted); }
.odds i { display: inline-block; width: 8px; height: 8px; margin-right: 4px; vertical-align: 0; }

.crates { display: grid; gap: 10px; }
.crate { display: grid; grid-template-columns: 92px 1fr; gap: 14px; align-items: center; padding: 12px; }
.crate-art { width: 92px; height: 92px; display: grid; place-items: center; background: radial-gradient(circle, rgba(var(--rr), .35), transparent 70%), var(--panel-2); clip-path: var(--n); }
.crate-art svg { width: 76px; height: 76px; filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .4)); animation: crateIdle 3.2s ease-in-out infinite; }
@keyframes crateIdle { 50% { transform: translateY(-4px) rotate(-1.5deg); } }
.crate-t { font: 16px/1.15 var(--display); text-transform: uppercase; }
.crate-d { font-size: 11px; color: var(--muted); margin: 4px 0 10px; }

.reel-box { position: relative; height: 128px; margin: 6px -4px 0; background: var(--ink); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); overflow: hidden; }
.reel-box::before, .reel-box::after { content: ""; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none; }
.reel-box::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.reel-box::after { right: 0; background: linear-gradient(-90deg, var(--ink), transparent); }
.reel-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%); background: var(--gold); z-index: 3; box-shadow: 0 0 12px var(--gold); }
.reel { position: absolute; top: 12px; left: 0; display: flex; gap: 6px; will-change: transform; }
.reel-it { width: 98px; height: 104px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: linear-gradient(rgba(var(--rr), .28), rgba(var(--rr), .06)); box-shadow: inset 0 -3px 0 rgb(var(--rr)); clip-path: var(--ns); }
.reel-it svg { width: 52px; height: 52px; }
.reel-it b { font: 12px var(--display); }
.reel-it.win { animation: winPop .5s .1s both; }
@keyframes winPop { 50% { transform: scale(1.1); } }
.drops { display: grid; gap: 1px; background: var(--line); clip-path: var(--ns); }
.drop { display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center; padding: 7px 10px; background: var(--panel); }
.drop svg { width: 30px; height: 30px; }
.drop-t { font-size: 12.5px; }
.drop-c { font: 13px var(--display); color: var(--muted); }

.quiz-q { font: 17px/1.3 var(--display); margin: 10px 0 14px; }
.quiz-opts { display: grid; gap: 8px; }
.quiz-opt { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 10px 12px; text-align: left; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); font-size: 13.5px; transition: background .2s, transform .1s; }
.quiz-opt:active { transform: scale(.98); }
.quiz-opt i { width: 26px; height: 26px; display: grid; place-items: center; flex: none; font: 12px var(--display); font-style: normal; background: var(--panel-3); clip-path: var(--ns); }
.quiz-opt.ok { background: rgba(125, 220, 106, .22); box-shadow: inset 0 0 0 2px var(--green); }
.quiz-opt.bad { background: rgba(255, 74, 46, .18); box-shadow: inset 0 0 0 2px var(--red); animation: shake .4s; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.quiz-dots { display: flex; gap: 4px; }
.quiz-dots i { width: 22px; height: 6px; background: var(--panel-3); }
.quiz-dots i.ok { background: var(--green); } .quiz-dots i.bad { background: var(--red); } .quiz-dots i.cur { background: var(--orange); }
.fair { font-size: 11px; color: var(--muted); word-break: break-all; }
.fair code { color: var(--blue-hi); font-size: 10.5px; }

/* ── топ ── */
.podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 8px; align-items: end; margin-top: 8px; }
.pod { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.pod .ava { width: 52px; height: 52px; font-size: 22px; background: var(--pc); }
.pod-n { font: 12px/1.15 var(--display); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pod-p { font: 600 11px var(--mono); color: var(--muted); }
.pod-b { width: 100%; display: grid; place-items: center; background: linear-gradient(rgba(var(--pcr), .35), rgba(var(--pcr), .08)); box-shadow: inset 0 3px 0 var(--pc); clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% 100%, 0 100%); font: 28px var(--display); color: var(--pc); }
.pod.p1 .pod-b { height: 104px; } .pod.p2 .pod-b { height: 78px; } .pod.p3 .pod-b { height: 60px; }
.pod.p1 .ava { width: 62px; height: 62px; }
.crown { color: var(--gold); width: 28px; height: 22px; margin-bottom: -4px; animation: crownBob 2.4s ease-in-out infinite; }
@keyframes crownBob { 50% { transform: translateY(-3px); } }
.lb { display: grid; gap: 1px; background: var(--line); clip-path: var(--n); }
.lb-r { display: grid; grid-template-columns: 30px 34px 1fr auto; gap: 10px; align-items: center; padding: 9px 12px; background: var(--panel); }
.lb-r.me { background: linear-gradient(90deg, rgba(78, 203, 255, .18), var(--panel)); box-shadow: inset 3px 0 0 var(--cyan); }
.lb-pl { font: 14px var(--display); color: var(--muted); text-align: center; }
.lb-r .ava { width: 34px; height: 34px; font-size: 14px; background: var(--panel-3); color: var(--cream); }
.lb-n { font: 13px/1.2 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-s { font-size: 10.5px; color: var(--dim); }
.lb-v { font: 14px var(--display); color: var(--cyan); font-variant-numeric: tabular-nums; }
.me-bar { position: sticky; bottom: 0; margin-top: 10px; z-index: 3; }
.prizes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.prizes div { flex: none; padding: 8px 10px; background: var(--panel-2); clip-path: var(--ns); text-align: center; min-width: 58px; }
.prizes b { display: block; font: 13px var(--display); color: var(--gold); }
.prizes span { font: 600 10px var(--mono); color: var(--muted); }

/* ── шторка / тосты / оверлеи ── */
.sheet-bg { position: fixed; inset: 0; z-index: 50; background: rgba(3, 6, 12, .66); opacity: 0; transition: opacity .25s; }
.sheet-bg.on { opacity: 1; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; max-height: 88%; overflow-y: auto; padding: 10px 16px calc(18px + var(--safe-bottom)); background: var(--panel); box-shadow: inset 0 3px 0 var(--acc); clip-path: polygon(0 10px, 10px 10px, 10px 0, calc(100% - 10px) 0, calc(100% - 10px) 10px, 100% 10px, 100% 100%, 0 100%); transform: translateY(100%); transition: transform .32s cubic-bezier(.2, .9, .25, 1); overscroll-behavior: contain; }
.sheet.on { transform: none; }
.sheet-grab { width: 44px; height: 4px; margin: 2px auto 12px; background: var(--line-2); }
.sheet-x { position: absolute; right: 12px; top: 14px; z-index: 5; }
.sheet h3 { font-size: 20px; text-transform: uppercase; padding-right: 44px; }
.sheet .desc { font-size: 12.5px; color: var(--muted); margin: 6px 0 14px; line-height: 1.45; }
.toasts { position: fixed; left: 16px; right: 16px; top: calc(12px + var(--safe-top)); z-index: 80; display: grid; gap: 8px; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--cream); color: var(--ink); font: 600 13px/1.3 var(--mono); clip-path: var(--ns); box-shadow: inset 4px 0 0 var(--tc, var(--blue)); animation: toastIn .3s cubic-bezier(.2, .9, .3, 1.3); }
.toast .ico { color: var(--tc, var(--blue)); }
.toast.out { animation: toastOut .25s forwards; }
@keyframes toastIn { from { transform: translateY(-20px); opacity: 0; } }
@keyframes toastOut { to { transform: translateY(-20px); opacity: 0; } }
#fx { position: fixed; inset: 0; z-index: 90; pointer-events: none; width: 100%; height: 100%; }
.reward { text-align: center; padding: 6px 0 4px; }
.reward-art { width: 150px; height: 150px; margin: 0 auto; display: grid; place-items: center; background: radial-gradient(circle, rgba(var(--rr, 255, 201, 74), .45), transparent 68%); animation: rewardIn .6s cubic-bezier(.2, 1.4, .4, 1); }
.reward-art svg { width: 110px; height: 110px; }
.reward-art .burst { position: absolute; }
.reward-v { font: 40px/1 var(--display); color: var(--gold); text-shadow: 3px 3px 0 rgba(0, 0, 0, .4); margin: 6px 0 4px; }
@keyframes rewardIn { from { transform: scale(.3) rotate(-20deg); opacity: 0; } }
.empty { text-align: center; padding: 26px 16px; color: var(--muted); font-size: 12.5px; }
.empty .ico { width: 34px; height: 34px; margin: 0 auto 8px; color: var(--dim); }
.skel { background: linear-gradient(90deg, var(--panel) 0%, var(--panel-2) 50%, var(--panel) 100%) 0 0 / 200% 100%; animation: skel 1.2s linear infinite; clip-path: var(--n); }
@keyframes skel { to { background-position: -200% 0; } }
.err-screen { position: fixed; inset: 0; display: grid; place-items: center; text-align: center; padding: 30px; z-index: 100; background: var(--ink); }
.banner { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: rgba(255, 74, 46, .12); box-shadow: inset 3px 0 0 var(--red); font-size: 12px; clip-path: var(--ns); }

/* ── админка ── */
.adm-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 2px; scrollbar-width: none; }
.adm-tabs button { flex: none; height: 32px; padding: 0 12px; font: 11.5px var(--display); text-transform: uppercase; color: var(--muted); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); }
.adm-tabs button.on { background: var(--red); color: #fff; box-shadow: none; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.kpi { padding: 10px 12px; }
.kpi b { display: block; font: 22px var(--display); font-variant-numeric: tabular-nums; }
.kpi span { font: 600 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tbl { display: grid; gap: 1px; background: var(--line); clip-path: var(--ns); }
.tbl > div { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--panel); font-size: 12px; align-items: center; }
.form { display: grid; gap: 8px; }
.form label { font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); display: grid; gap: 4px; }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.form label.row { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.form input[type=checkbox] { width: 20px; height: 20px; flex: none; accent-color: var(--red); margin: 0; }

@media (min-width: 520px) { .view { max-width: 520px; margin: 0 auto; width: 100%; } .tabs { max-width: 520px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ── объяснения: онбординг и интро разделов ── */
.guide { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--ink); opacity: 0; transition: opacity .3s; padding: calc(12px + var(--safe-top)) 16px calc(14px + var(--safe-bottom)); }
.guide.on { opacity: 1; }
.guide::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(110% 55% at 50% 0%, rgba(var(--acc-rgb), .22), transparent 62%), linear-gradient(rgba(127, 176, 230, .035) 1px, transparent 1px) 0 0 / 24px 24px, linear-gradient(90deg, rgba(127, 176, 230, .035) 1px, transparent 1px) 0 0 / 24px 24px; }
.guide > * { position: relative; }
.g-top { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.g-dots { flex: 1; display: flex; gap: 4px; }
.g-dots i { flex: 1; height: 6px; background: rgba(127, 176, 230, .16); transition: background .3s; }
.g-dots i.done { background: rgba(var(--acc-rgb), .55); }
.g-dots i.cur { background: var(--acc); }
.g-skip { display: inline-flex; align-items: center; gap: 4px; height: 32px; padding: 0 10px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); clip-path: var(--ns); }
.g-skip .ico { width: 14px; height: 14px; }
.g-stage { flex: 1; min-height: 0; overflow: hidden; display: flex; }
.g-slide { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-top: 10px; }
.g-slide.from-right { animation: gIn .38s cubic-bezier(.2, .8, .2, 1); }
.g-slide.from-left { animation: gInL .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes gIn { from { opacity: 0; transform: translateX(40px); } }
@keyframes gInL { from { opacity: 0; transform: translateX(-40px); } }
.g-art { flex: none; margin-top: auto; min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px 0 14px; animation: gArt .6s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes gArt { from { transform: scale(.85); opacity: 0; } }
.g-body { padding-bottom: 8px; margin-bottom: auto; }
.g-title { font-size: 26px; line-height: 1.05; text-transform: uppercase; margin: 6px 0 10px; text-shadow: 2px 2px 0 rgba(var(--acc-rgb), .35); }
.g-text { font-size: 15px; line-height: 1.55; color: #d6e0ee; }
.g-text b { color: var(--gold); font-weight: 600; }
.g-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.g-list li { padding-left: 18px; position: relative; }
.g-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; background: var(--acc); }
.g-note { display: flex; gap: 8px; align-items: center; margin-top: 12px; padding: 10px 12px; font-size: 12.5px; background: rgba(255, 201, 74, .1); box-shadow: inset 3px 0 0 var(--gold); clip-path: var(--ns); color: var(--cream); }
.g-note .ico { color: var(--gold); width: 18px; height: 18px; }
.g-foot { display: grid; grid-template-columns: 52px 1fr; gap: 10px; padding-top: 10px; }
.g-back { padding: 0; }
.g-next { height: 54px; font-size: 16px; }
.g-ring { display: none; position: relative; width: 30px; height: 30px; }
.g-ring svg { width: 30px; height: 30px; }
.g-ring rect { fill: none; stroke: var(--gold); stroke-width: 3; stroke-dasharray: 100; stroke-dashoffset: 100; }
.g-ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 14px var(--display); color: var(--cream); }
.g-next.locked { background: var(--panel-2) !important; color: var(--muted) !important; box-shadow: inset 0 0 0 1px var(--line) !important; padding-bottom: 0 !important; }
.g-next.locked .g-ring { display: block; }
/* иллюстрации */
.g-hero { position: relative; width: 170px; height: 170px; display: grid; place-items: center; filter: drop-shadow(0 0 26px rgba(255, 201, 74, .45)); }
.g-hero > svg { width: 140px; height: 140px; animation: heroBob 2.6s ease-in-out infinite; }
@keyframes heroBob { 50% { transform: translateY(-8px) rotate(-3deg); } }
.g-orb { position: absolute; color: var(--gold); animation: orb 3.2s ease-in-out infinite; }
.g-orb .ico { width: 30px; height: 30px; }
.g-orb.o1 { left: -18px; top: 20px; } .g-orb.o2 { right: -20px; top: 4px; animation-delay: -1s; } .g-orb.o3 { right: -6px; bottom: 6px; animation-delay: -2s; }
@keyframes orb { 50% { transform: translateY(-10px) scale(1.15); } }
.g-post { width: 100%; padding: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--n); display: grid; gap: 7px; }
.g-post-h { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.g-post-h .ico { width: 16px; height: 16px; color: var(--acc); }
.g-post-h b { color: var(--cream); font: 12.5px var(--display); }
.g-post-t { font: 14px/1.3 var(--display); margin-bottom: 2px; }
.g-msg { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; }
.g-ava { width: 26px; height: 26px; display: grid; place-items: center; font: 12px var(--display); background: var(--panel-3); clip-path: var(--ns); }
.g-bub { padding: 6px 9px; font-size: 12.5px; line-height: 1.35; background: var(--panel-2); clip-path: var(--ns); }
.g-bub b { display: block; font: 11px var(--display); color: var(--blue-hi); }
.g-rep { display: block; font-style: normal; font-size: 10.5px; color: var(--dim); }
.g-val { min-width: 42px; text-align: center; padding: 5px 6px; font: 14px var(--display); clip-path: var(--ns); }
.g-msg.ok .g-val { background: rgba(125, 220, 106, .16); color: var(--green); }
.g-msg.bad .g-val { background: rgba(255, 74, 46, .14); color: #ff7a63; }
.g-msg.bad .g-bub { opacity: .7; }
.g-pod { display: flex; align-items: flex-end; gap: 6px; height: 150px; width: 100%; max-width: 330px; }
.g-pod > div { flex: 1; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 8px 0; background: linear-gradient(rgba(var(--acc-rgb), .35), rgba(var(--acc-rgb), .07)); box-shadow: inset 0 3px 0 var(--acc); }
.g-pod b { font: 17px var(--display); color: var(--gold); }
.g-pod span { font: 13px var(--display); color: var(--muted); }
.g-pod.top > div { justify-content: flex-start; } .g-pod.top .p1 { height: 100%; } .g-pod.top .p2 { height: 72%; } .g-pod.top .p3 { height: 55%; }
.g-pod.top b { font-size: 28px; color: var(--cyan); margin-top: 10px; }
.g-timer { display: inline-flex; align-items: center; gap: 6px; font: 600 12px var(--mono); color: var(--muted); letter-spacing: .04em; }
.g-timer .ico { width: 16px; height: 16px; color: var(--acc); }
.g-reacts { width: 100%; display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; padding-right: 2px; }
.g-reacts span { font-size: 11.5px; padding: 4px 7px; background: var(--panel-2); clip-path: var(--ns); }
.g-reacts b { font: 14px var(--display); color: var(--green); padding: 4px 8px; background: rgba(125, 220, 106, .16); clip-path: var(--ns); }
.g-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: 100%; }
.g-strip > div { position: relative; height: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--panel-2); clip-path: var(--ns); font: 600 11px var(--mono); color: var(--dim); }
.g-strip b { font: 13px var(--display); color: var(--muted); }
.g-strip .done { background: rgba(255, 201, 74, .16); } .g-strip .done b { color: var(--gold); }
.g-strip .now { background: var(--gold); color: #3a2900; animation: dayPulse 1.6s ease-in-out infinite; } .g-strip .now b { color: #2a1d00; }
.g-strip .x { box-shadow: inset 0 0 0 2px var(--gold); }
.g-strip i { position: absolute; top: 2px; right: 3px; font: 9px var(--display); font-style: normal; color: var(--gold); }
.g-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.g-chips.col { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
.g-chips.col .chip { height: 34px; font-size: 11px; justify-content: flex-start; }
.g-anon { display: flex; gap: 5px; align-items: center; }
.g-anon span { width: 26px; height: 26px; display: grid; place-items: center; font: 13px var(--display); background: var(--panel-3); color: var(--dim); clip-path: var(--ns); }
.g-anon em { font-style: normal; font-size: 11.5px; color: var(--muted); margin-left: 4px; }
.g-goal { font-size: 12.5px; color: var(--muted); text-align: center; }
.g-goal b { color: var(--cream); font-family: var(--display); font-weight: 400; }
.g-rules { width: 100%; display: grid; gap: 1px; background: var(--line); clip-path: var(--n); }
.g-rules > div { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: center; padding: 8px 12px; background: var(--panel); font-size: 12.5px; }
.g-rules code { font: 12px var(--mono); color: var(--blue-hi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-rules span { color: var(--muted); }
.g-rules b { font: 15px var(--display); color: #ff7a63; }
.g-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 330px; }
.g-items > div { aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle, rgba(var(--rr), .35), rgba(var(--rr), .06) 70%), var(--panel-2); clip-path: var(--n); }
.g-items svg { width: 68%; height: 68%; }
.g-crates { display: flex; gap: 14px; justify-content: center; }
.g-crates svg { width: 52px; height: 52px; filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .4)); }
.g-crates.big svg { width: 84px; height: 84px; animation: crateIdle 3.2s ease-in-out infinite; }
.g-big { width: 132px; height: 132px; display: grid; place-items: center; background: var(--panel-2); background: radial-gradient(circle, color-mix(in srgb, var(--gc) 30%, transparent), transparent 70%), var(--panel-2); color: var(--gc); clip-path: var(--n); }
.g-big .ico { width: 64px; height: 64px; stroke-width: 2; }
.g-task { width: 100%; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 10px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--n); }
.g-task .g-big { width: 64px; height: 64px; } .g-task .g-big .ico { width: 30px; height: 30px; }
.g-task b { font: 13.5px var(--display); display: block; margin-bottom: 4px; }
.g-friends { display: flex; align-items: center; gap: 10px; }
.g-friends .g-big { width: 96px; height: 96px; } .g-friends .g-big .ico { width: 44px; height: 44px; }
.g-friends > span .ico { width: 30px; height: 30px; color: var(--muted); }
.g-ranks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.g-ranks > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; background: var(--panel); background: color-mix(in srgb, var(--rc) 14%, var(--panel)); color: var(--rc); clip-path: var(--n); text-align: center; }
.g-ranks .ico { width: 34px; height: 34px; } .g-ranks b { font: 18px var(--display); } .g-ranks span { font: 600 9.5px/1.2 var(--mono); color: var(--cream); }
.g-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; width: 100%; max-width: 300px; }
.g-bars i { flex: 1; background: rgba(var(--acc-rgb), .45); }
.g-flow { display: flex; align-items: center; gap: 12px; }
.g-flow > div:first-child { width: 110px; height: 110px; display: grid; place-items: center; background: radial-gradient(circle, rgba(var(--rr), .35), transparent 70%), var(--panel-2); clip-path: var(--n); }
.g-flow > div:first-child svg { width: 78px; height: 78px; }
.g-flow > .ico { width: 28px; height: 28px; color: var(--muted); }
.g-code { padding: 14px 12px; font: 17px var(--display); letter-spacing: .08em; color: var(--gold); background: var(--ink); outline: 2px dashed rgba(255, 201, 74, .5); outline-offset: -5px; }
.g-code.big { font-size: 24px; padding: 16px 24px; }
.g-art .steps { width: 100%; max-width: 340px; }
/* ссылка «Как это работает?» и строка помощи на «Активности» */
.howto { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 44px; margin-top: 20px; font: 600 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue-hi); background: transparent; box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); }
.howto .ico { width: 18px; height: 18px; color: var(--acc); }
.help-line { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; text-align: left; background: rgba(var(--acc-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb), .3); clip-path: var(--ns); }
.help-line .q { width: 30px; height: 30px; flex: none; display: grid; place-items: center; font: 17px var(--display); color: var(--ink); background: var(--acc); clip-path: var(--ns); }
.help-line span { flex: 1; font-size: 13px; line-height: 1.3; }
.help-line span b { display: block; font: 13.5px var(--display); color: var(--cream); font-weight: 400; }
.help-line span i { font-style: normal; font-size: 11.5px; color: var(--muted); }
.help-line > .ico { color: var(--muted); }
/* таймер викторины */
.quiz-timer { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; }
.quiz-timer .seg { flex: 1; }
.quiz-timer .qt-n { font: 14px var(--display); min-width: 34px; text-align: right; font-variant-numeric: tabular-nums; }
.quiz-timer.urgent .qt-n { color: var(--red); animation: pulse .5s infinite; }

/* ════════ Итерация 4: Главная, привязка BERDA, профиль, конкурс, поддержка ════════ */
/* главная: отметка дня */
.hc { display: flex; align-items: center; gap: 12px; padding: 14px; }
.hc-l { flex: 1; min-width: 0; }
.hc-t { display: flex; align-items: center; gap: 8px; font: 16px/1.1 var(--display); text-transform: uppercase; }
.hc-t .ico { color: var(--orange); width: 22px; height: 22px; }
.hc-s { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.hc-s b { color: var(--cream); }
.mini-days { display: flex; gap: 4px; }
.mini-days i { width: 18px; height: 8px; background: rgba(127, 176, 230, .16); }
.mini-days i.done { background: var(--gold); }
.mini-days i.now { background: transparent; box-shadow: inset 0 0 0 2px var(--gold); animation: pulse 1.4s infinite; }
.hc .btn { flex: none; }
.banner.event { background: linear-gradient(100deg, rgba(255, 138, 61, .2), rgba(255, 138, 61, .05)); box-shadow: inset 3px 0 0 var(--orange); }
.banner.event .ico { color: var(--orange); }
.banner.event b { color: var(--cream); font-weight: 600; }
.banner.ok { background: rgba(125, 220, 106, .1); box-shadow: inset 3px 0 0 var(--green); }
.banner.info { background: rgba(127, 176, 230, .1); box-shadow: inset 3px 0 0 var(--blue-hi); }
.banner .ico { flex: none; }

/* привязка аккаунта */
.link-nudge, .link-banner { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; background: linear-gradient(100deg, rgba(255, 74, 46, .2), rgba(255, 74, 46, .05)); box-shadow: inset 0 0 0 1px rgba(255, 74, 46, .45); clip-path: var(--n); }
.link-nudge > .ico:first-child { color: var(--red); width: 24px; height: 24px; }
.link-nudge span, .lb-t { flex: 1; min-width: 0; }
.link-nudge b, .lb-t b { display: block; font: 14px/1.2 var(--display); text-transform: uppercase; }
.link-nudge i, .lb-t i { display: block; font-style: normal; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.link-nudge > .ico:last-child, .link-banner > .ico:last-child { color: var(--muted); }
.link-banner { animation: linkPulse 2s ease-in-out infinite; }
@keyframes linkPulse { 0%, 100% { box-shadow: inset 0 0 0 1px rgba(255, 74, 46, .45); } 50% { box-shadow: inset 0 0 0 2px var(--red), 0 0 0 0 transparent; filter: brightness(1.12); } }
.lb-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--red); color: #fff; clip-path: var(--ns); }
.lb-ic .ico { width: 22px; height: 22px; }
.linked-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 12px; color: var(--muted); background: rgba(125, 220, 106, .08); box-shadow: inset 3px 0 0 var(--green); clip-path: var(--ns); }
.linked-bar .ico { color: var(--green); width: 16px; height: 16px; }
.linked-bar b { color: var(--cream); font-weight: 600; }
.link-sheet { text-align: center; }
.ls-ic { width: 64px; height: 64px; margin: 4px auto 10px; display: grid; place-items: center; background: rgba(255, 74, 46, .16); color: var(--red); clip-path: var(--n); }
.ls-ic .ico { width: 32px; height: 32px; }
.link-sheet .steps { text-align: left; }
.ls-dot { display: inline-block; width: 8px; height: 8px; background: var(--green); vertical-align: 1px; margin-left: 4px; animation: pulse 1s infinite; }
.ls-alt { margin-top: 12px; text-align: left; font-size: 12.5px; color: var(--muted); }
.ls-alt summary { cursor: pointer; list-style: none; padding: 8px 0; color: var(--blue-hi); }
.ls-alt summary::-webkit-details-marker { display: none; }
.ls-alt summary::before { content: "+ "; }
.ls-alt[open] summary::before { content: "− "; }

/* рейд */
.raid-card { display: flex; align-items: center; gap: 12px; background: linear-gradient(100deg, rgba(255, 74, 46, .22), var(--panel) 70%); box-shadow: inset 0 0 0 1px rgba(255, 74, 46, .5); }
.raid-card > .ico { width: 28px; height: 28px; color: var(--red); animation: pulse .9s infinite; }
.raid-card b { font: 14px var(--display); }

/* друзья */
.friends-card { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: linear-gradient(100deg, rgba(125, 220, 106, .16), var(--panel) 70%); box-shadow: inset 0 0 0 1px rgba(125, 220, 106, .35); }
.fc-ic { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: rgba(125, 220, 106, .2); color: var(--green); clip-path: var(--ns); }
.fc-ic .ico { width: 26px; height: 26px; }
.fc-b { flex: 1; min-width: 0; }
.fc-t { font: 15px/1.15 var(--display); text-transform: uppercase; }
.fc-s { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.fc-s b { color: var(--gold); font-weight: 600; }
.fc-p { font: 600 10.5px var(--mono); letter-spacing: .04em; color: var(--green); margin-top: 5px; }
.fc-tiers { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.fc-tiers span { font: 12px var(--display); color: var(--gold); padding: 3px 6px; background: rgba(255, 201, 74, .12); clip-path: var(--ns); }
.fc-tiers i { width: 10px; height: 2px; background: var(--line-2); }
.friends-card > .ico:last-child { color: var(--muted); }
.tiers { display: grid; gap: 1px; background: var(--line); clip-path: var(--ns); }
.tier { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px 12px; background: var(--panel-2); }
.tier-n { width: 28px; height: 28px; display: grid; place-items: center; font: 13px var(--display); color: var(--green); background: rgba(125, 220, 106, .16); clip-path: var(--ns); }
.tier-t { font-size: 12.5px; line-height: 1.3; }
.tier-t i { display: block; font-style: normal; font-size: 10.5px; color: var(--dim); }
.tier b { font: 15px var(--display); }
.friend { padding: 10px 12px; }
.fr-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fr-steps span { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 4px 7px; color: var(--dim); background: var(--panel-2); clip-path: var(--ns); }
.fr-steps span .ico { width: 12px; height: 12px; }
.fr-steps span.ok { color: var(--green); background: rgba(125, 220, 106, .12); }

/* мини-топ и лента */
.top-mini { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; }
.top-mini .h2 { flex: none; }
.tm-ava { display: flex; flex: 1; }
.tm-ava .ava { width: 30px; height: 30px; font-size: 13px; margin-left: -6px; box-shadow: 0 0 0 2px var(--panel); }
.tm-ava .ava:first-child { margin-left: 0; }
.top-mini > .ico:last-child { color: var(--muted); }
.feed { padding: 4px 12px; }
.feed-r { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; }
.feed-r + .feed-r { box-shadow: inset 0 1px 0 var(--line); }
.feed-i { width: 28px; height: 28px; display: grid; place-items: center; background: rgba(var(--acc-rgb), .12); color: var(--acc); clip-path: var(--ns); }
.feed-i .ico { width: 15px; height: 15px; }
.feed-t { font-size: 12.5px; line-height: 1.3; }
.feed-a { font: 600 10px var(--mono); color: var(--dim); white-space: nowrap; }

/* профиль: карточка игрока */
.pcard { position: relative; padding: 16px; background: radial-gradient(100% 70% at 100% 0%, color-mix(in srgb, var(--rc, var(--cyan)) 26%, transparent), transparent 65%), linear-gradient(var(--panel-2), var(--panel)); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 3px 0 var(--rc, var(--cyan)); clip-path: var(--n); }
.pc-top { display: flex; align-items: center; gap: 12px; }
.ava.big { width: 64px; height: 64px; font-size: 30px; background: var(--rc, var(--cyan)); }
.pc-who { flex: 1; min-width: 0; }
.pc-name { font: 20px/1.1 var(--display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-rank { display: flex; align-items: center; gap: 6px; font: 600 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--rc, var(--cyan)); margin-top: 4px; }
.pc-rank i { width: 8px; height: 8px; background: currentColor; }
.pc-brand { color: var(--orange); opacity: .8; }
.pc-brand .ico { width: 28px; height: 28px; }
.pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); margin-top: 14px; clip-path: var(--ns); }
.pc-stats > div { background: rgba(7, 12, 24, .55); padding: 10px 6px; text-align: center; }
.pc-stats b { display: block; font: 20px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.pc-stats span { font: 600 9.5px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.pc-stats.sm b { font-size: 16px; }
.pc-game { display: block; width: 100%; margin-top: 12px; padding: 10px; text-align: left; background: rgba(78, 203, 255, .07); box-shadow: inset 0 0 0 1px rgba(78, 203, 255, .3); clip-path: var(--ns); }
.pc-gt { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.pc-gt .ico { width: 16px; height: 16px; color: var(--cyan); }
.pc-gt b { color: var(--cream); font: 13px var(--display); }
.pc-game .pc-stats { margin-top: 8px; }
.pc-link { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.pc-link .ico { color: var(--red); width: 22px; height: 22px; }
.rank-mini { padding: 12px 14px; }
.rank-mini .seg { margin-top: 8px; }
.list-card { display: grid; gap: 1px; background: var(--line); clip-path: var(--n); }
.li { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; text-align: left; background: var(--panel); transition: background .15s; }
.li:active { background: var(--panel-2); }
.li > .ico:first-child { color: var(--acc); }
.li > span:not(.chip) { flex: 1; min-width: 0; font: 13.5px/1.2 var(--display); }
.li > span i { display: block; font: 400 11px var(--mono); font-style: normal; color: var(--muted); margin-top: 2px; }
.li > .ico:last-child { color: var(--dim); width: 16px; height: 16px; }
.set-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel); cursor: pointer; }
.set-row > span { flex: 1; min-width: 0; }
.set-row b { display: block; font: 13.5px/1.2 var(--display); font-weight: 400; }
.set-row i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; }
.tgl { appearance: none; -webkit-appearance: none; flex: none; width: 46px; height: 26px; margin: 0; position: relative; background: var(--panel-3); clip-path: var(--ns); cursor: pointer; transition: background .2s; }
.tgl::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; background: var(--muted); transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), background .2s; }
.tgl:checked { background: var(--acc); }
.tgl:checked::after { transform: translateX(20px); background: var(--ink); }
.card-preview { display: block; width: 100%; max-width: 280px; margin: 10px auto 0; clip-path: var(--n); box-shadow: 0 0 0 1px var(--line-2); }

/* загрузка файла (скриншот к обращению) */
.upload { display: flex; align-items: center; justify-content: center; gap: 8px; height: 70px; font: 600 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--blue-hi); background: rgba(127, 176, 230, .06); outline: 2px dashed var(--line-2); outline-offset: -6px; clip-path: var(--ns); cursor: pointer; text-align: center; padding: 0 12px; }
.upload span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80%; }

/* поддержка */
.cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cats-grid button { height: 40px; font: 12px var(--display); text-transform: uppercase; color: var(--muted); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); }
.cats-grid button.on { color: var(--ink); background: var(--blue-hi); box-shadow: none; }
.sug { margin-top: 10px; background: rgba(127, 176, 230, .08); box-shadow: inset 3px 0 0 var(--blue-hi); }
.chat { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding: 10px; margin-top: 10px; background: var(--ink); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--n); overscroll-behavior: contain; user-select: text; -webkit-user-select: text; }
.chat.adm { max-height: 40vh; }
.msg { max-width: 84%; padding: 8px 10px; font-size: 13px; line-height: 1.4; clip-path: var(--ns); }
.msg b { display: block; font: 11px var(--display); color: var(--blue-hi); margin-bottom: 2px; }
.msg p { white-space: pre-line; word-break: break-word; }
.msg img { display: block; max-width: 100%; max-height: 220px; margin-top: 6px; clip-path: var(--ns); }
.msg span { display: block; font: 600 9.5px var(--mono); color: var(--dim); margin-top: 4px; text-align: right; }
.msg.user { align-self: flex-end; background: rgba(127, 176, 230, .16); }
.msg.admin { align-self: flex-start; background: var(--panel-2); box-shadow: inset 3px 0 0 var(--blue-hi); }
.msg.system { align-self: center; max-width: 100%; background: transparent; color: var(--dim); font-size: 11.5px; text-align: center; padding: 2px 6px; }
.msg.system span { display: none; }
.chat-in { display: grid; grid-template-columns: 1fr 52px; gap: 6px; margin-top: 8px; }
.chat-in .btn { padding: 0; }

/* магазин: статусы выдачи */
.dlv { display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 12px; text-align: left; font-size: 12.5px; line-height: 1.4; clip-path: var(--ns); }
.dlv .ico { flex: none; }
.dlv.green { background: rgba(125, 220, 106, .12); box-shadow: inset 3px 0 0 var(--green); } .dlv.green .ico { color: var(--green); }
.dlv.gold { background: rgba(255, 201, 74, .1); box-shadow: inset 3px 0 0 var(--gold); } .dlv.gold .ico { color: var(--gold); }
.dlv.red { background: rgba(255, 74, 46, .12); box-shadow: inset 3px 0 0 var(--red); } .dlv.red .ico { color: var(--red); }
.dlv-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 600 11px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.dlv-row .ico { width: 14px; height: 14px; }
.dlv-row.green { color: var(--green); } .dlv-row.gold { color: var(--gold); } .dlv-row.red { color: #ff7a63; }
.my-buys { width: 100%; text-align: left; margin-top: 16px !important; }

/* админка: экономика, конкурсы, выдачи */
.lg-dot { display: inline-block; width: 8px; height: 8px; margin: 0 4px 0 8px; vertical-align: 0; }
.lg-dot.gold { background: var(--gold); } .lg-dot.red { background: var(--red); }
.hh-card.on { box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .5), inset 0 3px 0 var(--gold); }
.econ-tbl > div { display: grid; grid-template-columns: 1fr repeat(3, 38px) 66px; gap: 6px; }
.econ-tbl > div > span:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.econ-tbl > div > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.econ-tbl .th { font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.econ-tbl .bad { background: rgba(255, 74, 46, .1); }
.dlv-card { padding: 12px; }

/* онбординг: новые иллюстрации */
.g-camp .g-big { width: 140px; height: 140px; animation: heroBob 2.6s ease-in-out infinite; }
.g-camp .g-big .ico { width: 72px; height: 72px; }
.g-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 340px; }
.g-tiers > div { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 4px; background: var(--panel); box-shadow: inset 0 -3px 0 var(--green); clip-path: var(--n); text-align: center; }
.g-tiers > div:nth-child(2) { padding-top: 18px; } .g-tiers > div:nth-child(3) { padding-top: 26px; box-shadow: inset 0 -3px 0 var(--gold); }
.g-tiers span { color: var(--green); } .g-tiers span .ico { width: 26px; height: 26px; }
.g-tiers b { font: 22px var(--display); color: var(--gold); }
.g-tiers i { font: 600 10px/1.2 var(--mono); font-style: normal; color: var(--muted); }
.g-game { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line-2); clip-path: var(--n); text-align: center; max-width: 170px; }
.g-game > .ico { color: var(--cyan); width: 26px; height: 26px; }
.g-game b { font: 14px var(--display); }
.g-game span { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.g-game code { font: 18px var(--display); letter-spacing: .14em; color: var(--gold); padding: 6px 8px; background: var(--ink); outline: 2px dashed rgba(255, 201, 74, .45); outline-offset: -4px; }
.g-raid { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 340px; padding: 12px; background: linear-gradient(100deg, rgba(255, 74, 46, .25), var(--panel) 75%); box-shadow: inset 0 0 0 1px rgba(255, 74, 46, .5); clip-path: var(--n); }
.g-raid > .ico { width: 30px; height: 30px; color: var(--red); animation: pulse .9s infinite; }
.g-raid b { display: block; font: 14px var(--display); }
.g-raid span { font-size: 11px; color: var(--muted); }
.g-task > div > span.small { display: block; }
.g-card { display: grid; grid-template-columns: 80px 1fr; gap: 12px; align-items: center; width: 100%; max-width: 340px; padding: 12px; background: var(--panel); box-shadow: inset 0 3px 0 var(--cyan); clip-path: var(--n); }
.g-card .g-big { width: 80px; height: 80px; } .g-card .g-big .ico { width: 40px; height: 40px; }
.g-card b { display: block; font: 14px/1.2 var(--display); }
.g-card span { font-size: 11.5px; color: var(--muted); }

/* ════════ Итерация 5: оповещения о рейдах на Главной, ивенты, настоящие иконки предметов ════════ */
.raid-alerts { display: block; width: 100%; background: linear-gradient(100deg, rgba(255, 74, 46, .14), var(--panel) 70%); box-shadow: inset 0 0 0 1px rgba(255, 74, 46, .35); }
.raid-alerts.on { background: linear-gradient(100deg, rgba(125, 220, 106, .12), var(--panel) 70%); box-shadow: inset 0 0 0 1px rgba(125, 220, 106, .3); }
.raid-alerts.nolink { background: linear-gradient(100deg, rgba(255, 201, 74, .1), var(--panel) 70%); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .28); }
.ra-head { display: flex; align-items: flex-start; gap: 12px; }
.ra-head > .chip { flex: none; margin-top: 2px; }
.ra-ic { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: rgba(255, 74, 46, .18); color: var(--red); clip-path: var(--ns); }
.raid-alerts.on .ra-ic { background: rgba(125, 220, 106, .18); color: var(--green); }
.raid-alerts.nolink .ra-ic { background: rgba(255, 201, 74, .16); color: var(--gold); }
.ra-ic .ico { width: 24px; height: 24px; }
.ra-b { flex: 1; min-width: 0; }
.ra-t { font: 15px/1.15 var(--display); text-transform: uppercase; }
.ra-s { font-size: 11.5px; color: var(--muted); margin-top: 3px; line-height: 1.35; }
.ra-rows { display: grid; gap: 2px; margin-top: 12px; }
.ra-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(7, 12, 24, .45); cursor: pointer; }
.ra-row:first-child { clip-path: polygon(6px 0, calc(100% - 6px) 0, calc(100% - 6px) 6px, 100% 6px, 100% 100%, 0 100%, 0 6px, 6px 6px); }
.ra-row:last-child { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 6px calc(100% - 6px), 0 calc(100% - 6px)); }
.ra-row > span { flex: 1; min-width: 0; }
.ra-row b { display: block; font: 13px/1.2 var(--display); font-weight: 400; }
.ra-row i { display: block; font-style: normal; font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.3; }
.ra-row.locked { opacity: .62; }
.ra-row.locked .tgl { pointer-events: none; }
.ra-link { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font: 600 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--blue-hi); }
.ra-link .ico { width: 13px; height: 13px; }
.mini-days i.x { background: rgba(255, 201, 74, .32); }
.mini-days i.x.done { background: var(--orange); }
.set-row.hours { cursor: default; flex-wrap: wrap; }
.set-row.hours.off { opacity: .45; pointer-events: none; }
.hrs { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); flex: none !important; }
.field.sm { display: inline-block; width: auto; height: 32px; padding: 0 8px; font: 600 12px var(--mono); }
.dlv-sorry { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.4; color: var(--cream); background: rgba(255, 74, 46, .1); box-shadow: inset 3px 0 0 var(--red); clip-path: var(--ns); }
.dlv-sorry .ico { flex: none; width: 15px; height: 15px; color: #ff7a63; margin-top: 1px; }
.miss-art { width: 100%; height: 100%; display: grid; place-items: center; color: var(--muted); }
.miss-art .ico { width: 64px; height: 64px; opacity: .6; }
.goal[data-url] { cursor: pointer; }
.ev-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 6px; }
.ev-grid label { font: 600 9.5px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); display: grid; gap: 3px; }
.ev-grid .field { height: 36px; padding: 0 6px; font-size: 13px; }
.ev-type .row label.row { text-transform: none; }
/* иконки предметов из игры (PNG) — везде, где раньше был пиксель-арт */
.purchase .mini-art img { width: 42px; height: 42px; object-fit: contain; }
.reel-it img { width: 56px; height: 56px; object-fit: contain; }
.drop img { width: 30px; height: 30px; object-fit: contain; }
.reward-art img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)); }
.g-flow > div:first-child img { width: 86px; height: 86px; object-fit: contain; }
.lb-r img { width: 40px; height: 40px; object-fit: contain; }

/* ── итерация 7: игры в магазине, вкладка «Рейды», кнопка «назад» на подстраницах ── */
.back-bar { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px; margin-bottom: -4px; font: 12px var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); align-self: flex-start; }
.back-bar .ico { width: 16px; height: 16px; }
.cats-row { display: flex; align-items: center; gap: 8px; }
.cats-row .cats { flex: 1; min-width: 0; margin-right: 0; padding-right: 4px; }
.games-btn { flex: none; position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; font: 12px var(--display); letter-spacing: .04em; text-transform: uppercase; color: #2a1200; background: var(--orange); clip-path: var(--ns); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25); }
.games-btn .ico { width: 17px; height: 17px; }
.games-btn .dot { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; background: var(--red); box-shadow: 0 0 0 2px var(--orange); }
.tgl:disabled { opacity: .45; cursor: not-allowed; }
.tgl.big { width: 58px; height: 32px; }
.tgl.big::after { width: 24px; height: 24px; }
.tgl.big:checked::after { transform: translateX(26px); }
.raid-hero { background: linear-gradient(110deg, rgba(255, 74, 46, .16), var(--panel) 72%); box-shadow: inset 0 0 0 1px rgba(255, 74, 46, .35); }
.raid-hero.on { background: linear-gradient(110deg, rgba(125, 220, 106, .14), var(--panel) 72%); box-shadow: inset 0 0 0 1px rgba(125, 220, 106, .32); }
.raid-hero.nolink { background: linear-gradient(110deg, rgba(255, 201, 74, .12), var(--panel) 72%); box-shadow: inset 0 0 0 1px rgba(255, 201, 74, .3); }
.rh-top { display: flex; align-items: center; gap: 12px; }
.rh-ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; background: rgba(255, 74, 46, .18); color: var(--red); clip-path: var(--ns); }
.raid-hero.on .rh-ic { background: rgba(125, 220, 106, .18); color: var(--green); }
.raid-hero.nolink .rh-ic { background: rgba(255, 201, 74, .16); color: var(--gold); }
.rh-ic .ico { width: 28px; height: 28px; }
.rh-b { flex: 1; min-width: 0; }
.rh-t { font: 16px/1.15 var(--display); text-transform: uppercase; }
.rh-s { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.35; }
.rh-warn { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 10px; font-size: 12px; background: rgba(255, 201, 74, .1); box-shadow: inset 3px 0 0 var(--gold); clip-path: var(--ns); }
.rh-warn span { flex: 1; }
.rh-warn .ico { color: var(--gold); width: 16px; height: 16px; flex: none; }
.rh-who { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.rh-who .ico { width: 15px; height: 15px; }
.raid-quiet.locked { opacity: .6; }
.raid-quiet .set-row b { display: flex; align-items: center; gap: 6px; }
.raid-quiet .set-row b .ico { width: 15px; height: 15px; color: var(--violet); }
.set-row.link { width: 100%; text-align: left; }
.raid-sample { background: var(--panel-2); }
.rs-from { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.rs-from .ico { width: 16px; height: 16px; color: var(--orange); }
.rs-from span { color: var(--dim); font: 600 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.rs-msg { margin-top: 8px; padding: 10px 12px; font-size: 13px; line-height: 1.5; background: var(--ink); box-shadow: inset 0 0 0 1px var(--line); clip-path: var(--ns); }
.rs-kb { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; margin-top: 4px; }
.rs-kb span { padding: 8px 4px; text-align: center; font: 600 11px var(--mono); color: var(--blue-hi); background: rgba(127, 176, 230, .12); clip-path: var(--ns); }
.rs-kb span.wide { grid-column: 1 / -1; }
.raid-hist { padding: 4px 12px; }
.rh-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.rh-row + .rh-row { box-shadow: 0 -1px 0 var(--line); }
.rh-dot { width: 30px; height: 30px; flex: none; display: grid; place-items: center; color: var(--red); background: rgba(255, 74, 46, .14); clip-path: var(--ns); }
.rh-dot .ico { width: 16px; height: 16px; }
.rh-main { flex: 1; min-width: 0; }
.rh-main b { display: block; font: 13px var(--display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rh-main span { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.rh-when { flex: none; text-align: right; font: 600 10.5px var(--mono); color: var(--dim); }
.rh-when i { display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-style: normal; color: var(--violet); margin-top: 3px; }
.rh-when i .ico { width: 11px; height: 11px; }
/* длинные имена/ники и коды без пробелов не распирают экран (найдено обходом на 360 px) */
.card, .list-card, .tbl, .sheet, .feed-t, .dlv-card { overflow-wrap: anywhere; }
.tbl > div > span { min-width: 0; }
.tbl > div > b { flex: none; }
.chart-tabs { flex-wrap: wrap; }
/* Supply station and first-skin tutorial. */
.starter-banner{margin:16px 0;padding:18px;border:1px solid #d4b160;background:linear-gradient(120deg,#302b1b,#141e21);box-shadow:inset 3px 0 #ffd05a}.starter-banner p{margin:9px 0 14px;line-height:1.6;color:#e7e0cb;font-size:13px}.starter-step,.wheel-kicker{font:10px 'JetBrains Mono',monospace;letter-spacing:1.5px;color:#d8bc77}.starter-welcome{text-align:center;padding:16px 4px}.starter-welcome h3{text-align:center;padding:0}.starter-art{height:160px;margin:12px auto}.starter-art img,.starter-art svg{width:100%;height:100%;object-fit:contain}.starter-coins{position:relative;font:32px 'Russo One';color:var(--gold);padding:18px;margin-bottom:10px}.starter-coins i{position:absolute;left:50%;top:55%;font-style:normal;font-size:22px;animation:starter-coin 1.2s ease-out both;animation-delay:calc(var(--i)*70ms);--dx:calc((var(--i) - 4)*22px)}@keyframes starter-coin{from{opacity:0;transform:translate(-50%,40px) scale(.3)}30%{opacity:1}to{opacity:0;transform:translate(var(--dx),-130px) rotate(40deg) scale(.7)}}.item.starter-focus{position:relative;border:2px solid #ffd05a;animation:starter-beacon 1.9s ease-in-out infinite;box-shadow:0 0 20px #d4a33155}.item.starter-focus:after{content:'НАЖМИ • ТВОЙ ПЕРВЫЙ СКИН';display:block;padding:9px 3px;background:#ffd05a;color:#211b0d;font:bold 9px 'JetBrains Mono';text-align:center}.item.starter-locked{opacity:.28;filter:grayscale(.9);cursor:not-allowed}.item.starter-locked:after{content:'ПОСЛЕ ПЕРВОГО СКИНА';display:block;font:9px 'JetBrains Mono';padding:8px;color:#a0abb3}@keyframes starter-beacon{50%{border-color:#fff1b7;box-shadow:0 0 24px #e5b34899}}.survival-wheel{background:radial-gradient(ellipse at 50% 40%,#46503b44,transparent 60%),repeating-linear-gradient(135deg,#ffffff02 0 1px,transparent 1px 7px),#101c1b;border-color:#74795b;box-shadow:inset 0 0 40px #0008}.wheel-kicker{text-align:center;font-size:9px;letter-spacing:1px;margin-bottom:18px}.survival-wheel .wheel-wrap{filter:drop-shadow(0 12px 10px #0009)}.survival-wheel .wheel-hub{width:48px;height:48px;background:radial-gradient(circle at 35% 30%,#768371,#1b2b25 65%);border:2px solid #bcab70;box-shadow:0 3px 8px #000b}.wheel-disclaimer{margin:14px 0;text-align:center;line-height:1.6}.crate{background:linear-gradient(135deg,#28352b,#111a1c 65%);border-color:#546354;overflow:hidden;position:relative}.crate:before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:rgb(var(--rr));opacity:.7}.crate-art{filter:drop-shadow(0 8px 5px #0008)}.supply-art{width:100%;height:100%;shape-rendering:geometricPrecision}.crate-d{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:10px;line-height:1.6}.odds b{min-width:0}.odds span{white-space:nowrap;flex-shrink:0}@media(prefers-reduced-motion:reduce){.starter-focus,.starter-coins i{animation:none!important}.starter-coins i{display:none}}