/* Школа · прототип карточки. Одна раскладка (эскиз Mystic), десять отделок печати. */
:root {
  --table: #121318;
  --table-2: #1b1d25;
  --ink: #1d2140;          /* навигационный синий текста карточки */
  --ink-2: #3a4c69;
  --ink-soft: #5e68a4;
  --paper: #e7e9f2;        /* текст интерфейса вокруг карточки */
  --paper-dim: #a7abc2;
  --accent: #8e64bf;       /* фиолетовый край пилюли Mystic */
  --accent-2: #8090ec;
  --line: #2a2d3a;
  --radius: 14px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--table); }
body {
  margin: 0;
  font-family: "Onest", system-ui, sans-serif;
  color: var(--paper);
  background:
    radial-gradient(120% 70% at 50% -10%, #262a3a 0%, transparent 60%),
    var(--table);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--accent); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: #34384a; border-radius: 10px; }

/* ---------- оболочка приложения ---------- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 20px 12px;
  background: rgba(18, 19, 24, .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.logo { font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
.logo b { color: var(--accent-2); }
.appbar nav { display: flex; gap: 22px; font-weight: 600; font-size: .95rem; }
.appbar nav a { color: var(--paper-dim); text-decoration: none; }
.appbar nav a[aria-current] { color: var(--paper); }
.appbar .avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #8e64bf, #5e7be0); display: grid; place-items: center; font-weight: 800; font-size: .85rem; color: #fff; }

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: none; grid-template-columns: repeat(5, 1fr);
  padding: 6px 6px max(8px, env(safe-area-inset-bottom));
  background: rgba(18, 19, 24, .92); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tabbar a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; color: var(--paper-dim); text-decoration: none; font-size: .68rem; font-weight: 600; }
.tabbar svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current] { color: var(--paper); }
.tabbar .cam { margin-top: -22px; }
.tabbar .cam span { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #9a6bd0, #5f7fe6); color: #fff; box-shadow: 0 8px 20px rgba(95,127,230,.35); }

/* ---------- экран карточки ---------- */
.stage {
  max-width: 1120px; margin: 0 auto; padding: 28px 20px 40px;
  display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; align-items: start;
}
.crumbs { grid-column: 1 / -1; margin: 0; color: var(--paper-dim); font-size: .9rem; }
.crumbs a { color: var(--paper-dim); text-underline-offset: 3px; }
.table { display: grid; justify-items: center; gap: 14px; position: sticky; top: 84px; }
.card-wrap { width: min(100%, 420px); perspective: 1100px; container-type: inline-size; }
.hint { margin: 0; color: var(--paper-dim); font-size: .85rem; }

/* ---------- карточка ---------- */
.card {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --pointer: 0;
  aspect-ratio: 63 / 88;   /* как настоящая карточка Pokémon TCG, 63x88 мм */
  width: 100%;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.16, 1, .3, 1);
  border-radius: 4.6cqw;   /* ~3 мм на 63 мм */
  box-shadow: 0 2.5cqw 6cqw rgba(0,0,0,.55), 0 .6cqw 1.4cqw rgba(0,0,0,.35);
  cursor: grab;
}
.card.is-live { transition: transform .08s linear; }
.card__face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; isolation: isolate; color: var(--ink); }
.card__frame { position: absolute; inset: 0; background: var(--frame); }
.card__glitter { position: absolute; inset: 0; background-image: var(--glitter-img); background-size: 38cqw; background-position: calc(var(--mx) * .12) calc(var(--my) * .12); mix-blend-mode: var(--glitter-blend, screen); opacity: var(--glitter, 0); filter: var(--glitter-filter, none); z-index: 1; }
.card__glint {
  position: absolute; inset: -10%; z-index: 2; pointer-events: none;
  background-image: var(--glitter-img), var(--glitter-img);
  background-size: 26cqw, 41cqw;
  background-position: calc(var(--mx) * -.6) calc(var(--my) * -.6), calc(var(--mx) * .45) calc(var(--my) * .45);
  mix-blend-mode: var(--glint-blend, color-dodge);
  filter: var(--glint-filter, brightness(1.6));
  opacity: var(--glint, 0);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, rgba(0,0,0,.55) 18%, transparent 46%);
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, rgba(0,0,0,.55) 18%, transparent 46%);
}
.card__sheen {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: var(--sheen-img, none);
  background-size: var(--sheen-size, 260% 260%);
  background-position: var(--mx) var(--my);
  mix-blend-mode: var(--sheen-blend, overlay);
  opacity: var(--sheen, 0);
}

.panel {
  position: absolute; left: 4.4%; right: 4.4%; z-index: 3;
  background: var(--panel);
  border: .25cqw solid var(--panel-edge);
  border-radius: 2.6cqw;
  box-shadow: inset 0 .3cqw .6cqw rgba(255,255,255,.35), 0 .4cqw 1cqw rgba(20,20,40,.12);
}
.head { top: 4.3cqw; height: 14cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 4.2cqw; }
.head__name { margin: 0; font-size: var(--name-size, 6.5cqw); font-weight: 800; letter-spacing: -.035em; line-height: 1.02; color: var(--ink); max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; text-wrap: balance; }
.head > div { min-width: 0; flex: 1; margin-right: 3cqw; }
.head__code { margin: .8cqw 0 0; font-size: 2.5cqw; font-weight: 700; letter-spacing: .05em; color: var(--ink); }
.head__year { font-size: 3.6cqw; font-weight: 800; color: var(--ink); }

.art {
  position: absolute; margin: 0; z-index: 3;
  left: 4.4%; right: 4.4%; top: 19.6cqw; height: 64cqw;
  border-radius: 2.6cqw; overflow: hidden;
  background: var(--art-bg);
  border: .25cqw solid var(--panel-edge);
  box-shadow: inset 0 0 3cqw rgba(30, 30, 70, .18);
}
.art__field {
  position: absolute; inset: -30%;
  background: var(--icon, #5e68a4);
  -webkit-mask-image: var(--field-img); mask-image: var(--field-img);
  -webkit-mask-size: 30cqw 20cqw; mask-size: 30cqw 20cqw;
  transform: rotate(-45deg);
  opacity: var(--field-op, .28);
}
.card[data-tier="pixel"] .card__glitter { background-image: var(--glitter-pixel); background-size: 30cqw; image-rendering: pixelated; }
.art__foil {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--art-foil, none);
  background-size: var(--art-foil-size, 240% 240%);
  background-position: calc(100% - var(--mx)) var(--my);
  mix-blend-mode: var(--art-foil-blend, color-dodge);
  opacity: var(--art-foil-op, 0);
}
.art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--glitter-img); background-size: 30cqw;
  background-position: calc(var(--mx) * -.3) calc(var(--my) * -.3);
  mix-blend-mode: screen; filter: brightness(1.5);
  opacity: var(--art-glint, 0);
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, rgba(0,0,0,.45) 30%, rgba(0,0,0,.25) 70%);
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0, rgba(0,0,0,.45) 30%, rgba(0,0,0,.25) 70%);
}
.art__item {
  position: absolute; left: 50%; top: 50%; height: 88%; width: auto; z-index: 1;
  transform: translate(-50%, -48%);
  filter: drop-shadow(0 2cqw 2.4cqw rgba(20, 20, 50, .38)) drop-shadow(0 .4cqw .6cqw rgba(20,20,50,.25));
}
.stamps { position: absolute; left: 2.6cqw; right: 2.6cqw; bottom: 2.6cqw; z-index: 2; display: flex; flex-wrap: wrap; gap: 1.4cqw; }
.stamp {
  font-size: 2.3cqw; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1;
  color: var(--ink); background: rgba(255,255,255,.88);
  border: .35cqw solid var(--ink); border-radius: 1.2cqw; padding: 1cqw 1.6cqw;
  box-shadow: 0 .4cqw 1cqw rgba(20,20,50,.2);
}
.stamp[hidden] { display: none; }
.stamp[data-stamp="first"] { background: #1d2140; color: #fff; border-color: #1d2140; }
.stamp[data-stamp="sealed"] { background: #e7f6ef; border-color: #1b7a55; color: #1b7a55; }
.stamp[data-stamp="promo"] { background: #fff1e0; border-color: #b8591b; color: #b8591b; }

.info { top: 85cqw; bottom: 4.3cqw; padding: 1.4cqw 4.2cqw 0; display: flex; flex-direction: column; overflow: hidden; }
.info > * { flex-shrink: 0; }  /* строки не сжимаются молча: переполнение видно, подгонка убирает лишнюю строку подписи */
.info__row { display: flex; align-items: center; gap: 2.6cqw; padding: 1.9cqw 0; border-bottom: .22cqw solid var(--hair); font-size: 3.5cqw; font-weight: 600; }
.info__row--brand { justify-content: space-between; padding-top: .8cqw; padding-bottom: 1.4cqw; }
.info__brand { font-size: 6cqw; font-weight: 800; letter-spacing: -.03em; }
.tierpill {
  font-size: 3.2cqw; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pill-ink, #fff); background: var(--pill-bg); border-radius: 99px;
  padding: 1.2cqw 3.8cqw; box-shadow: 0 0 0 .5cqw var(--pill-edge) inset, 0 .5cqw 1.2cqw rgba(40,20,90,.25);
}
.ico { width: 5.2cqw; height: 5.2cqw; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.gem { color: var(--accent-2); fill: color-mix(in srgb, var(--accent-2) 55%, transparent); }
.info__label { font-weight: 700; }
.stars { display: inline-flex; gap: 1.2cqw; margin-left: auto; }
.stars svg { width: 5.4cqw; height: 5.4cqw; stroke: var(--ink-2); stroke-width: 1.6; fill: none; }
.stars svg.on { fill: var(--ink-2); }
.stars svg.half { fill: url(#halfFill); }
.grade { font-size: 3cqw; font-weight: 800; color: var(--ink-soft); min-width: 7cqw; text-align: right; font-variant-numeric: tabular-nums; }
.info__full { margin: 0; padding: 1.5cqw 0; border-bottom: .22cqw solid var(--hair); font-size: 3cqw; font-weight: 700; line-height: 1.25; color: var(--ink); }
.info__full[hidden] { display: none; }
.info__flavor { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--flavor-lines, 3); overflow: hidden; }
.info__full:not([hidden]) + .info__flavor { -webkit-line-clamp: 1; }
.info__full { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* отступ только сверху: снизу у обрезки по строкам не должна проглядывать следующая строка */
.info__flavor { margin: 0 0 1.8cqw; padding: 1.8cqw 0 0; border-bottom: 0; box-shadow: 0 1.8cqw 0 -1.58cqw var(--hair); font-size: 3.2cqw; font-style: italic; font-weight: 500; line-height: 1.3; color: var(--ink); }
.info__foot { display: flex; justify-content: space-between; align-items: center; padding: 1.6cqw 0 1.8cqw; font-size: 2.35cqw; margin-top: auto; font-weight: 600; color: var(--ink); }
.info__num { display: inline-flex; align-items: center; gap: 1.2cqw; font-weight: 800; font-variant-numeric: tabular-nums; }
.shield { width: 3.6cqw; height: 3.6cqw; }

/* износ карточки по состоянию предмета */
.card__wear {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  opacity: var(--wear, 0);
  background:
    radial-gradient(9cqw 9cqw at 0 0, rgba(255,255,255,.75), transparent 70%),
    radial-gradient(8cqw 8cqw at 100% 0, rgba(255,255,255,.6), transparent 70%),
    radial-gradient(10cqw 10cqw at 100% 100%, rgba(255,255,255,.7), transparent 70%),
    radial-gradient(7cqw 7cqw at 0 100%, rgba(255,255,255,.55), transparent 70%),
    repeating-linear-gradient(115deg, transparent 0 7cqw, rgba(255,255,255,.08) 7cqw 7.3cqw);
  box-shadow: inset 0 0 0 .8cqw rgba(255,255,255,.35);
}

/* ---------- десять отделок печати (одна раскладка) ---------- */
.card {
  --frame: #d9dce6;
  --panel: rgba(236, 239, 246, .9);
  --panel-edge: rgba(150, 156, 196, .55);
  --hair: rgba(94, 104, 164, .45);
  --art-bg: #cfd4e2;
  --field-op: .28;
  --pill-bg: #5d6484;
  --pill-edge: rgba(255,255,255,.2);
}
.card[data-tier="standard"] { --frame: linear-gradient(160deg, #e4e6ee, #c9cddb); --art-bg: linear-gradient(180deg, #d6dbe8, #c3c9da); --pill-bg: #6b7292; }
.card[data-tier="holo"] {
  /* как у Pokémon: голографическое ОКНО, рамка обычная */
  --frame: linear-gradient(160deg, #e1e4ee, #c4c9da);
  --art-bg: linear-gradient(160deg, #e9e3ff, #d5ecff 45%, #ffe3f3 80%);
  --art-foil: linear-gradient(125deg, #ffb3dc 0%, #fff0b3 16%, #b8ffe0 32%, #b3d0ff 48%, #e0c2ff 64%, #ffb3dc 80%, #fff0b3 100%);
  --art-foil-op: .42; --art-foil-blend: multiply; --art-foil-size: 220% 220%;
  --art-glint: 1;
  --icon: #8a7fd6; --field-op: .2;
  --pill-bg: linear-gradient(90deg, #5d7ae0, #9c69d2);
}
.card[data-tier="reverse"] {
  /* как у Pokémon: фольга ВОКРУГ, окно с предметом матовое */
  --frame: linear-gradient(150deg, #f4f5fb, #b9bdcf 30%, #eceef7 55%, #a9aec4 80%, #e9ebf4);
  --glitter: .9; --glitter-blend: overlay;
  --sheen-img: linear-gradient(125deg, #ffc2e3 0%, #fff2c2 16%, #c7ffe6 32%, #c2daff 48%, #e6d0ff 64%, #ffc2e3 80%, #fff2c2 100%);
  --sheen-size: 240% 240%; --sheen: .45; --sheen-blend: multiply;
  --glint: .7; --glint-filter: brightness(1.6);
  --panel: rgba(240, 242, 250, .66);
  --art-bg: linear-gradient(180deg, #c9cdd9, #b8bdcc);   /* матовое окно */
  --field-op: .18; --icon: #6d7390;
  --pill-bg: linear-gradient(90deg, #4f68c8, #7f63c9);
}
.card[data-tier="reverse"] .art { box-shadow: inset 0 0 0 .5cqw rgba(255,255,255,.55), inset 0 0 3cqw rgba(30,30,70,.25); }
.card[data-tier="holo"] .art { box-shadow: inset 0 0 0 .5cqw rgba(255,255,255,.8), 0 0 0 .4cqw #c8b8ff, inset 0 0 3cqw rgba(30,30,70,.12); }
.card[data-tier="cosmos"] {
  --icon: #b9b3ff;
  --glint: .9; --glint-blend: screen;
  --frame: radial-gradient(120% 90% at 30% 20%, #5b4fb5, #1f2257 70%);
  --art-bg: radial-gradient(100% 90% at 50% 40%, #3b3a8f, #15163f 75%);
  --glitter: .9; --glitter-blend: screen;
  --art-foil: radial-gradient(circle at 30% 30%, rgba(255,255,255,.55), transparent 35%);
  --art-foil-op: .5; --field-op: .35;
  --panel: rgba(232, 234, 250, .9); --panel-edge: rgba(190, 186, 255, .6);
  --pill-bg: linear-gradient(90deg, #2b2f7a, #6a4fc2);
}
.card[data-tier="pixel"] {
  --frame: linear-gradient(160deg, #c9f5e6, #9ad9f2 50%, #c7b6f7);
  --glitter: .85; --glitter-blend: overlay;
  --sheen-img: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.9) 45%, transparent 60%);
  --sheen: .5; --sheen-blend: soft-light;
  --art-bg: linear-gradient(180deg, #d9f3ee, #c6dcf3); --pill-bg: linear-gradient(90deg, #10a37f, #3b6fd8);
}
.card[data-tier="rainbow"] {
  --glint: .6;
  --frame: linear-gradient(125deg, #ffb3d9, #ffe39a 20%, #b9ffc9 40%, #a9d6ff 60%, #d4b3ff 80%, #ffb3d9);
  --sheen-img: repeating-linear-gradient(115deg, #ff8fc9 0 6%, #ffe07a 6% 12%, #84ffc0 12% 18%, #7fb2ff 18% 24%, #c68dff 24% 30%);
  --sheen: .45; --sheen-blend: color-dodge;
  --glitter: .5; --panel: rgba(245,245,252,.86);
  --art-bg: linear-gradient(135deg, #f2dcf5, #d9ecf8); --pill-bg: linear-gradient(90deg, #ff6fae, #ffb25b, #45c98a, #4d8bff, #9a5cff);
}
.card[data-tier="gold"] {
  --icon: #a07420;
  --glint: 1; --glint-filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.7);
  --frame: linear-gradient(135deg, #f6d77a, #b8862b 30%, #f9e7a4 55%, #a97722 80%, #e9c66a);
  --glitter: 1; --glitter-blend: overlay;
  --sheen-img: linear-gradient(115deg, transparent 35%, rgba(255,247,210,.95) 48%, transparent 60%);
  --sheen: .55; --sheen-blend: soft-light;
  --panel: rgba(255, 249, 232, .92); --panel-edge: rgba(190, 150, 60, .6); --hair: rgba(150, 110, 40, .4);
  --art-bg: linear-gradient(180deg, #f7ecd0, #e3cf9f); --pill-bg: linear-gradient(90deg, #c8912b, #f2cf6b); --pill-ink: #3a2606;
}
/* Mystic по утверждённому макету: серебро + тонкие насыщенные радужные полосы по всей карточке,
   видны и в окне с предметом, и сквозь плашки - уже в покое, без наклона */
.card[data-tier="mystic"] {
  --glint: .95; --glint-filter: brightness(1.8) saturate(1.4);
  --frame: linear-gradient(160deg, #d8dae3, #b7bac8 45%, #e2e4ec);
  --glitter: 1; --glitter-blend: overlay;
  --sheen-img: repeating-linear-gradient(128deg, transparent 0 3%, #ff7fc4 4%, #ffd76a 5.2%, #7ff0b8 6.4%, #72a8ff 7.6%, #b98cff 8.8%, transparent 10% 13%);
  --sheen-size: 150% 150%;
  --sheen: .78; --sheen-blend: hard-light;
  --art-bg: linear-gradient(160deg, #cfd3dd, #b9bdd4 60%, #c9c3e2);
  --art-foil: repeating-linear-gradient(128deg, transparent 0 3%, #ff8fcf 4%, #ffe07a 5.2%, #86f3c0 6.4%, #7fb1ff 7.6%, #c29aff 8.8%, transparent 10% 13%);
  --art-foil-size: 150% 150%; --art-foil-blend: hard-light; --art-foil-op: .7;
  --panel-edge: rgba(58, 70, 120, .55);
  --panel: rgba(226, 229, 238, .5);
  --icon: #7479b8;
  --pill-bg: linear-gradient(90deg, #6e5fd1, #8684d5); --pill-edge: rgba(190,160,255,.75);
}
.card[data-tier="legendary"] {
  --icon: #ffe3a0;
  --glint: 1; --glint-filter: sepia(1) saturate(5) hue-rotate(-25deg) brightness(1.8);
  --frame: linear-gradient(145deg, #ffcf5a, #e8601c 35%, #ffd98a 55%, #b8360f 80%, #ffb347);
  --glitter: 1; --glitter-blend: overlay; --glitter-filter: contrast(1.3);
  --sheen-img: repeating-linear-gradient(120deg, transparent 0 5%, rgba(255,240,150,.95) 7%, rgba(255,120,60,.9) 10%, transparent 14%);
  --sheen: .55; --sheen-blend: color-dodge;
  --art-bg: radial-gradient(90% 80% at 50% 60%, #ffcf6b, #f06a1f 45%, #6d1a0b 90%);
  --art-foil: repeating-conic-gradient(from 0deg at 50% 60%, rgba(255,255,255,.0) 0 8deg, rgba(255,240,180,.55) 10deg, rgba(255,255,255,0) 14deg);
  --art-foil-op: .6; --art-foil-blend: screen; --field-op: .3;
  --panel: rgba(255, 243, 226, .92); --panel-edge: rgba(200, 90, 30, .55); --hair: rgba(170, 70, 20, .35);
  --pill-bg: linear-gradient(90deg, #b8360f, #f08a24, #ffcf5a); --pill-ink: #2a0c02;
}
.card[data-tier="secret"] {
  --icon: #9aa2d6;
  --glint: .8; --glint-blend: screen; --glint-filter: brightness(1.4) hue-rotate(40deg);
  --frame: linear-gradient(150deg, #3c3f4d, #14151b 45%, #4a4d5c 70%, #0f1015);
  --glitter: .7; --glitter-blend: screen;
  --sheen-img: repeating-linear-gradient(135deg, rgba(255,255,255,0) 0 1.2%, rgba(160,220,255,.55) 1.5%, rgba(255,160,230,.5) 1.8%, rgba(255,255,255,0) 2.1%);
  --sheen: .7; --sheen-blend: color-dodge;
  --art-bg: radial-gradient(100% 90% at 50% 40%, #3a3e52, #0e0f14 80%);
  --panel: rgba(28, 30, 40, .9); --panel-edge: rgba(180, 190, 230, .35); --hair: rgba(180, 190, 230, .25);
  --pill-bg: linear-gradient(90deg, #1b1c24, #3a3d4f); --pill-edge: rgba(200,210,255,.5);
  --field-op: .25;
}
.card[data-tier="secret"] .card__face,
.card[data-tier="cosmos"] .head,
.card[data-tier="secret"] .head__name { color: #eef0fb; }
.card[data-tier="secret"] { --ink: #eef0fb; --ink-2: #c9cef0; --ink-soft: #9aa2d6; }

/* ---------- панель управления ---------- */
.controls { display: grid; gap: 16px; }
.controls__title { margin: 8px 0 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.tiers { display: flex; flex-wrap: wrap; gap: 8px; }
.tiers button {
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--paper);
  background: var(--table-2); border: 1px solid var(--line); border-radius: 99px; padding: 7px 13px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.tiers button:hover { border-color: #4a4f66; }
.tiers button[aria-checked="true"] { background: #2b2440; border-color: var(--accent); }
.field { display: grid; gap: 6px; font-size: .9rem; color: var(--paper-dim); }
.field output { color: var(--paper); font-weight: 700; font-variant-numeric: tabular-nums; }
select, input[type="range"] { accent-color: var(--accent); }
select { font: inherit; color: var(--paper); background: var(--table-2); border: 1px solid var(--line); border-radius: 10px; padding: 9px 10px; }
.flags { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 14px; display: grid; gap: 10px; font-size: .9rem; margin: 0; }
.flags__why { margin: 0 0 2px; color: var(--paper-dim); font-size: .84rem; line-height: 1.45; }
.flags label { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; cursor: pointer; }
.flags input { width: 18px; height: 18px; margin-top: 2px; }
.flags b { display: block; font-weight: 700; }
.flags small { display: block; color: var(--paper-dim); font-size: .8rem; line-height: 1.4; }
.luck { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--table-2); }
.luck__top { display: flex; justify-content: space-between; font-weight: 700; }
.luck__top output { font-variant-numeric: tabular-nums; }
.luck__bar { height: 8px; border-radius: 4px; background: #262938; margin: 8px 0 6px; overflow: hidden; }
.luck__bar span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: left; border-radius: inherit; background: linear-gradient(90deg, #5f7fe6, #9a6bd0, #f2cf6b); transition: transform .4s cubic-bezier(.16,1,.3,1); }
.luck__parts { margin: 0; font-size: .8rem; color: var(--paper-dim); line-height: 1.5; font-variant-numeric: tabular-nums; }
.flags legend { color: var(--paper-dim); padding: 0 6px; }
.flags input { accent-color: var(--accent); }
.roll {
  font: inherit; font-weight: 800; font-size: 1.05rem; color: #fff; cursor: pointer;
  border: 0; border-radius: 14px; padding: 15px 18px;
  background: linear-gradient(135deg, #9a6bd0, #5f7fe6);
  box-shadow: 0 10px 24px rgba(95, 127, 230, .28);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s;
}
.roll:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(95, 127, 230, .36); }
.roll:active { transform: translateY(1px); }
.roll:disabled { opacity: .6; cursor: progress; }
.ghostlink { text-align: center; color: var(--paper); font-weight: 700; text-decoration: none; padding: 10px; border: 1px solid var(--line); border-radius: 14px; }
.ghostlink:hover { border-color: var(--accent); }
.rollnote { margin: 0; font-size: .88rem; color: var(--paper-dim); line-height: 1.45; }
.rollnote strong { color: var(--paper); }
.odds { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.odds th { text-align: left; color: var(--paper-dim); font-weight: 600; padding: 4px 0; border-bottom: 1px solid var(--line); }
.odds th:last-child, .odds td:last-child { text-align: right; }
.odds td { padding: 5px 0; border-bottom: 1px solid #1f2230; }
.odds tr.hit td { color: #fff; font-weight: 700; }
.odds .bar { display: inline-block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #5f7fe6, #9a6bd0); vertical-align: middle; margin-right: 8px; }
.proto { margin: 0; font-size: .8rem; color: #7d8199; }

/* ---------- галерея всех уровней ---------- */
.gallery { max-width: 1320px; margin: 0 auto; padding: 28px 20px 120px; }
.gallery h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.025em; margin: 0 0 6px; }
.gallery > p { color: var(--paper-dim); margin: 0 0 26px; max-width: 64ch; line-height: 1.5; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px 22px; }
.grid figure { margin: 0; display: grid; gap: 10px; align-content: start; }
.grid .card-wrap { width: 100%; }
.grid figcaption { display: grid; gap: 2px; }
.grid figcaption b { font-size: 1rem; }
.grid figcaption span { font-size: .82rem; color: var(--paper-dim); line-height: 1.4; }

/* reveal: один авторский момент - переворот при броске */
@keyframes flipin {
  0% { transform: rotateY(180deg) scale(.92); filter: brightness(1.6); }
  60% { transform: rotateY(-8deg) scale(1.02); filter: brightness(1.15); }
  100% { transform: rotateY(0) scale(1); filter: none; }
}
.card.is-reveal { animation: flipin .9s cubic-bezier(.16, 1, .3, 1); }

/* ---------- адаптация ---------- */
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; gap: 22px; padding: 16px 16px 24px; }
  .table { position: static; }
  .appbar nav { display: none; }
  .tabbar { display: grid; }
  .gallery { padding-bottom: 110px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 20px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .card, .card.is-live { transition: none; }
  .card.is-reveal { animation: none; }
}