/* «Наклейки ББШ» (/collection/) — пакетик дня и альбом наклеек внутри
   обычной страницы сайта: шапка, подвал, og-теги и метрика приходят из
   общего шаблона (build_collection), этот файл оформляет только
   <main class="sticker-shell">, все правила скоупятся под него. Перенос
   прототипа «Пакетик ББШ»: одна тёмная тема, ночная Балтика.

   Карточки масштабируются в процентах своей ширины: --cu = 1% ширины в px,
   рамка считается от --cu, начинка (.in) — от ширины внутри рамки, как в
   прототипе с cqw. В веере и на столе ширина известна заранее, там --cu
   задан здесь; для
   ячеек альбома и летящей наклейки его по offsetWidth ставит stickers.js,
   он же вешает .is-small на узкие карточки (≤ 125px). Контейнерные запросы
   не используются: в части браузеров они отдавали карточке в веере ширину
   в разы меньше настоящей. Шрифты — OFL, лежат локально
   (CSP: font-src 'self'), лицензии рядом в /assets/fonts/. */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/oswald-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-600-cyrillic.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/oswald-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-400-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-500-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/ibm-plex-mono-600-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: italic; font-weight: 900; font-display: swap; src: url("/assets/fonts/playfair-display-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
.sticker-shell {
  --night: #08121c;
  --sea: #0f2c44;
  --sea-2: #1d4e6e;
  --ink: #f4f7fa;
  --mute: #a9bccb;
  --line: #24425c;
  --amber: #f2b84b;
  --amber-ink: #1b1207;
  --rust: #8a4532;
  --paper: #e9e3d6;
  --display: 'Oswald', 'Arial Narrow', sans-serif;
  --numeral: 'Playfair Display', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  color-scheme: dark;
  background: var(--night); color: var(--ink); font-family: var(--body); }
.sticker-shell button { font: inherit; color: inherit; }
.sticker-shell button:focus-visible, .sticker-shell .st-card:focus-visible, .sticker-shell .st-sticker:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sticker-shell .sticker-app { height: calc(100vh - var(--header-h, 77px)); height: calc(100svh - var(--header-h, 77px)); scroll-margin-top: var(--header-h, 77px); min-height: 620px; max-height: 960px; max-width: 460px; margin: 0 auto; display: flex; flex-direction: column; padding-inline: 16px; box-sizing: border-box; }
.sticker-shell .view { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sticker-shell .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px 10px; }
.sticker-shell .st-brand { font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: 0.08em; }
.sticker-shell .st-brand small { display: block; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; color: var(--mute); }
.sticker-shell .ghost { background: transparent; border: 1px solid var(--line); border-radius: 22px; min-height: 40px; padding: 0 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; cursor: pointer; }
.sticker-shell .ghost:hover { border-color: var(--mute); }
.sticker-shell .primary { background: var(--amber); color: var(--amber-ink); border: 0; border-radius: 26px; min-height: 50px; padding: 0 22px; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: 0.06em; cursor: pointer; }
.sticker-shell .primary:hover { filter: brightness(1.06); }
.sticker-shell .secondary { background: transparent; border: 1px solid #4b6a82; border-radius: 26px; min-height: 50px; padding: 0 20px; font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: 0.05em; cursor: pointer; }
.sticker-shell .stage { position: relative; flex: 1; min-height: 400px; }
.sticker-shell .stage-foot { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-block: 8px 18px; min-height: 120px; }
.sticker-shell .hint { font-size: 13px; color: var(--mute); text-align: center; line-height: 1.5; max-width: 32ch; }
.sticker-shell .actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sticker-shell .pack { position: absolute; left: 50%; top: 50%; width: var(--pw, 220px); aspect-ratio: 5 / 7.4; transform: translate(-50%, -50%); z-index: 3; touch-action: none; cursor: grab; filter: drop-shadow(0 26px 30px rgba(0,0,0,0.55)); }
.sticker-shell .pack:active { cursor: grabbing; }
.sticker-shell .foil { background:
    linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.28) 47%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, #17405f 0%, #0d2740 70%, #0a1f33 100%);
  background-size: 260% 100%, 100% 100%; animation: sheen 5s ease-in-out infinite; }
@keyframes sheen { 0%, 100% { background-position: 100% 0, 0 0; } 50% { background-position: 0% 0, 0 0; } }
.sticker-shell .flap { position: absolute; left: 0; right: 0; top: 0; height: 15%; border-radius: 10px 10px 0 0; overflow: hidden; z-index: 2; }
.sticker-shell .flap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 34%; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 2px, rgba(0,0,0,0.2) 2px 5px); }
.sticker-shell .flap::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: 1px; border-bottom: 2px dashed rgba(255,255,255,0.45); }
.sticker-shell .flap-label { position: absolute; left: 0; right: 0; bottom: 22%; text-align: center; white-space: nowrap; font-family: var(--mono); font-size: clamp(8px, calc(var(--pw, 220px) * 0.046), 10px); letter-spacing: 0.12em; color: rgba(255,255,255,0.75); }
.sticker-shell .tear-fill { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--p, 0) * 100%); background: var(--amber); box-shadow: 0 0 10px var(--amber); }
.sticker-shell .pbody { position: absolute; left: 0; right: 0; top: 15%; bottom: 0; border-radius: 0 0 10px 10px; overflow: hidden; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.sticker-shell .pbody::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5%; background: repeating-linear-gradient(90deg, rgba(255,255,255,0.3) 0 2px, rgba(0,0,0,0.2) 2px 5px); }
.sticker-shell .p-seal { margin-top: 13%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--amber); color: var(--amber-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: calc(var(--pw, 220px) * 0.095); box-shadow: 0 0 0 calc(var(--pw, 220px) * 0.025) rgba(242,184,75,0.25); }
.sticker-shell .p-title { margin-top: 9%; font-family: var(--display); font-weight: 700; font-size: calc(var(--pw, 220px) * 0.098); letter-spacing: 0.03em; line-height: 1.05; text-align: center; }
.sticker-shell .p-sub { margin-top: 3%; font-family: var(--mono); font-size: calc(var(--pw, 220px) * 0.046); letter-spacing: 0.14em; color: var(--mute); }
.sticker-shell .p-band { position: absolute; left: 0; right: 0; bottom: 21%; height: 6%; background: var(--rust); }
.sticker-shell .p-count { position: absolute; bottom: 9%; font-family: var(--mono); font-size: calc(var(--pw, 220px) * 0.046); letter-spacing: 0.12em; color: var(--ink); }
.sticker-shell .p-waves { position: absolute; left: 0; bottom: 4%; width: 100%; height: 14%; opacity: 0.5; }
.sticker-shell .st-card { position: absolute; left: 50%; top: 50%; width: var(--cw, 140px); aspect-ratio: 5 / 7; transform: translate(-50%, -50%); z-index: 1; padding: 0; border: 0; background: none; cursor: pointer; perspective: 900px; }
.sticker-shell .flipper { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.sticker-shell .side { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sticker-shell .side.front { transform: rotateY(180deg); }
.sticker-shell .st-badge { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); white-space: nowrap; padding: 4px 9px; border-radius: 12px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; z-index: 4; opacity: 0; }
.sticker-shell .st-badge.new { background: var(--amber); color: var(--amber-ink); }
.sticker-shell .st-badge.dup { background: #2a4258; color: var(--ink); }
.sticker-shell .st-badge.up { background: #f7e08a; color: #1d1604; }
.sticker-shell .burst { position: absolute; inset: -30%; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0; }
.sticker-shell .cardback { width: 100%; height: 100%; box-sizing: border-box; border-radius: calc(var(--u) * 5.3); padding: calc(var(--u) * 3.3); background: linear-gradient(135deg, #e6ebef 0%, #9aa7b2 38%, #f4f7f9 55%, #8794a0 100%); box-shadow: 0 14px 26px rgba(0,0,0,0.45); }
.sticker-shell .cardback .in { position: relative; height: 100%; border-radius: calc(var(--u) * 3); background: var(--sea); overflow: hidden; display: grid; place-items: center; }
.sticker-shell .cardback svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sticker-shell .cb-seal { position: relative; width: calc(var(--u) * 36); aspect-ratio: 1; border-radius: 50%; border: calc(var(--u) * 1.4) solid var(--amber); color: var(--amber); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 11); }
.sticker-shell .cb-cap { position: absolute; bottom: calc(var(--u) * 8); left: 0; right: 0; text-align: center; font-family: var(--mono); font-size: calc(var(--u) * 4); letter-spacing: 0.2em; color: var(--mute); }
.sticker-shell .face, .sticker-shell .cardback { --cu: 1.4px; --u: var(--cu); }
.sticker-shell .st-card .face, .sticker-shell .st-card .cardback { --cu: calc(var(--cw, 140px) / 100); }
.sticker-shell .st-sticker .face { --cu: 0.92px; }
.sticker-shell .face .in, .sticker-shell .cardback .in { --u: calc(var(--cu) * 0.934); }
.sticker-shell .face { width: 100%; aspect-ratio: 5 / 7; min-height: 0; box-sizing: border-box; border-radius: calc(var(--u) * 5.3); padding: calc(var(--u) * 3.3); background: var(--frame); box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 4) rgba(0,0,0,0.35); position: relative; }
.sticker-shell .face .in { position: relative; height: 100%; border-radius: calc(var(--u) * 3); background: var(--in); color: var(--ink-c); display: flex; flex-direction: column; overflow: hidden; }
.sticker-shell .f-top { display: flex; justify-content: space-between; padding: calc(var(--u) * 3) calc(var(--u) * 4) calc(var(--u) * 2.6); font-family: var(--mono); font-weight: 600; font-size: calc(var(--u) * 3.4); letter-spacing: 0.12em; color: var(--sub); }
.sticker-shell .f-photo { position: relative; height: calc(var(--u) * 64); margin: 0 calc(var(--u) * 3.3); border-radius: calc(var(--u) * 2); background: var(--photo); overflow: hidden; }
.sticker-shell .f-num { position: absolute; right: calc(var(--u) * 3); top: calc(var(--u) * -12); font-family: var(--numeral); font-style: italic; font-weight: 900; font-size: calc(var(--u) * 68); line-height: 1; color: var(--numfill); -webkit-text-stroke: calc(var(--u) * 0.7) var(--stroke); }
.sticker-shell .f-waves { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(var(--u) * 15); }
.sticker-shell .f-sil { position: absolute; left: 50%; bottom: 0; width: calc(var(--u) * 58); transform: translateX(-50%); }
.sticker-shell .f-cap { position: absolute; left: calc(var(--u) * 3); top: calc(var(--u) * 3); width: calc(var(--u) * 9.4); aspect-ratio: 1; border-radius: 50%; background: var(--capbg); color: var(--capfg); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 5); }
.sticker-shell .f-name { padding: calc(var(--u) * 3.4) calc(var(--u) * 4.6) 0; }
.sticker-shell .f-first { font-family: var(--display); font-weight: 500; font-size: calc(var(--u) * 4.3); letter-spacing: 0.14em; color: var(--sub); }
.sticker-shell .f-last { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 11); line-height: 1; letter-spacing: 0.01em; color: var(--name); white-space: nowrap; }
.sticker-shell .f-pos { margin-top: calc(var(--u) * 1.4); font-size: calc(var(--u) * 3.9); color: var(--sub); }
.sticker-shell .f-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: calc(var(--u) * 3) calc(var(--u) * 4.6) calc(var(--u) * 3.6); }
.sticker-shell .pips { display: flex; gap: calc(var(--u) * 1.8); }
.sticker-shell .pip { width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); transform: rotate(45deg); box-sizing: border-box; border: calc(var(--u) * 0.35) solid var(--pipoff); }
.sticker-shell .pip.on { background: var(--pip); border-color: var(--pip); }
.sticker-shell .f-rar { font-family: var(--mono); font-weight: 600; font-size: calc(var(--u) * 3.4); letter-spacing: 0.14em; color: var(--pip); }
.sticker-shell .shine { position: absolute; inset: 0; border-radius: calc(var(--u) * 5.3); pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 46%, transparent 60%); background-size: 260% 100%; background-position: 120% 0; mix-blend-mode: overlay; }
.sticker-shell .face.is-small .f-top, .sticker-shell .face.is-small .f-first, .sticker-shell .face.is-small .f-pos, .sticker-shell .face.is-small .f-rar, .sticker-shell .face.is-small .f-cap { display: none; }
.sticker-shell .face.is-small .f-name { padding-top: calc(var(--u) * 5); }
.sticker-shell .face.is-small .f-last { font-size: calc(var(--u) * 12.5); }
.sticker-shell .face.is-small .f-photo { height: calc(var(--u) * 74); margin-top: calc(var(--u) * 3.3); }
.sticker-shell .face.is-small .pip { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); }
.sticker-shell .face.is-small .f-foot { padding-bottom: calc(var(--u) * 5); }
.sticker-shell .r0 { --frame: #ddd2bc; --in: #f7f1e5; --ink-c: #12202e; --name: #12202e; --sub: #4d5863; --photo: #dfe6ea; --numfill: transparent; --stroke: rgba(18,32,46,0.18); --wave: #b9c8d2; --sil: #9fb0bd; --pip: #12202e; --pipoff: #8f8571; --capbg: #12202e; --capfg: #f7f1e5; }
.sticker-shell .r1 { --frame: linear-gradient(135deg, #e6ebef 0%, #9aa7b2 38%, #f4f7f9 55%, #8794a0 100%); --in: #0f2c44; --ink-c: #f4f7fa; --name: #f4f7fa; --sub: #b4c5d3; --photo: #1d4e6e; --numfill: transparent; --stroke: rgba(255,255,255,0.34); --wave: rgba(255,255,255,0.28); --sil: #0b2033; --pip: #e6ebef; --pipoff: #6f8598; --capbg: #e6ebef; --capfg: #0f2c44; }
.sticker-shell .r2 { --frame: linear-gradient(135deg, #f7cf7a 0%, #b8650f 35%, #fbe0a0 52%, #9a520c 78%, #e9a83c 100%); --in: #1b1207; --ink-c: #fbf3e4; --name: #fbf3e4; --sub: #f2c46a; --photo: radial-gradient(circle at 70% 30%, #b8650f 0%, #5a3008 45%, #2a1806 100%); --numfill: rgba(242,184,75,0.12); --stroke: rgba(247,207,122,0.6); --wave: rgba(247,207,122,0.4); --sil: #140d05; --pip: #f2b84b; --pipoff: #8a6630; --capbg: #f2b84b; --capfg: #1b1207; }
.sticker-shell .r3 { --frame: linear-gradient(135deg, #fff2b8 0%, #b8901f 30%, #f7e08a 48%, #8f6c12 70%, #f3d56e 100%); --in: #0c0c0e; --ink-c: #f5ecd0; --name: #f7e08a; --sub: #e8c766; --photo: radial-gradient(circle at 50% 35%, #3b3014 0%, #17140c 60%, #0c0c0e 100%); --numfill: rgba(232,199,102,0.14); --stroke: #e8c766; --wave: rgba(232,199,102,0.3); --sil: #000; --pip: #f7e08a; --pipoff: #6b500d; --capbg: #f7e08a; --capfg: #0c0c0e; }
.sticker-shell .progress { display: flex; flex-direction: column; gap: 6px; padding-block: 2px 12px; }
.sticker-shell .progress-row { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.sticker-shell .progress-row b { font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--ink); letter-spacing: 0.02em; }
.sticker-shell .track { height: 6px; border-radius: 3px; background: #172a3b; overflow: hidden; }
.sticker-shell .track i { display: block; height: 100%; background: var(--amber); width: 0; transition: width 0.6s ease; }
.sticker-shell .tabs { position: relative; display: flex; gap: 4px; padding: 0 10px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.sticker-shell .tabs::-webkit-scrollbar { display: none; }
/* Вкладки глав — закладки над книгой: открытая сливается со страницей. */
.sticker-shell .tab { flex: 0 0 auto; min-height: 38px; padding: 0 12px; border-radius: 10px 10px 0 0; border: 1px solid var(--line); border-bottom: 0; background: #12283a; color: var(--mute); font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; cursor: pointer; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sticker-shell .tab small { font-family: var(--mono); font-size: 10px; letter-spacing: 0; opacity: 0.8; }
.sticker-shell .tab:hover { color: var(--ink); }
.sticker-shell .tab[aria-selected="true"] { background: var(--paper); color: #2c2418; border-color: var(--paper); }
/* Книга: лист (.leaf) или разворот из двух листов с корешком (.spine).
   Сетку листа (--cols колонок по --cell) считает stickers.js по размеру
   #page; здесь только оформление. */
.sticker-shell .page { flex: 1 1 0; min-height: 0; position: relative; display: flex; perspective: 2400px; touch-action: pan-y; }
.sticker-shell .leaf { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; padding: 12px; background: linear-gradient(90deg, rgba(90,70,40,0.16), rgba(90,70,40,0) 18px), var(--paper); border-radius: 4px 14px 14px 4px; box-shadow: inset 0 0 0 1px #d4c8ad, 0 10px 24px rgba(0,0,0,0.35); color: #2c2418; }
.sticker-shell .leaf-l { border-radius: 14px 3px 3px 14px; background: linear-gradient(270deg, rgba(90,70,40,0.22), rgba(90,70,40,0) 34px), var(--paper); }
.sticker-shell .leaf-r { border-radius: 3px 14px 14px 3px; background: linear-gradient(90deg, rgba(90,70,40,0.22), rgba(90,70,40,0) 34px), var(--paper); }
.sticker-shell .spine { flex: 0 0 28px; background: linear-gradient(90deg, #6f6350, #a89a80 35%, #c9bca2 50%, #a89a80 65%, #6f6350); box-shadow: 0 10px 24px rgba(0,0,0,0.35); }
.sticker-shell .leaf-head { flex: 0 0 22px; margin-bottom: 8px; border-bottom: 1px solid #d4c8ad; font-family: var(--display); font-weight: 600; font-size: 12px; line-height: 20px; letter-spacing: 0.12em; color: #5a5348; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticker-shell .leaf-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--cols, 4), var(--cell, 70px)); grid-auto-rows: calc(var(--cell, 70px) * 1.4); column-gap: 10px; row-gap: 20px; justify-content: center; align-content: center; }
.sticker-shell .leaf-foot { flex: 0 0 14px; font-family: var(--mono); font-size: 11px; line-height: 14px; color: #8f8571; text-align: center; font-variant-numeric: tabular-nums; }
.sticker-shell .leaf-l .leaf-foot { text-align: left; }
.sticker-shell .leaf-r .leaf-foot { text-align: right; }
.sticker-shell .leaf-cover { justify-content: center; align-items: center; text-align: center; overflow: hidden; }
.sticker-shell .cover-in { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; padding: 0 16px; }
.sticker-shell .cover-in small { font-family: var(--mono); font-size: 12px; letter-spacing: 0.2em; color: var(--rust); }
.sticker-shell .cover-in h3 { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 4vw, 40px); line-height: 1.05; color: #2c2418; }
.sticker-shell .cover-in p { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: #5a5348; }
.sticker-shell .cover-count { margin-top: 8px; font-family: var(--numeral); font-style: italic; font-weight: 900; font-size: 44px; line-height: 1; color: #c3b496; font-variant-numeric: tabular-nums; }
.sticker-shell .cover-waves { width: 100%; height: 44px; margin-top: auto; opacity: 0.8; }
.sticker-shell .leaf-cover .leaf-foot { align-self: stretch; }
.sticker-shell .leaf-end { justify-content: center; align-items: center; }
.sticker-shell .end-seal { width: 96px; aspect-ratio: 1; margin-top: auto; border-radius: 50%; border: 3px solid #c9b48c; color: #c9b48c; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 28px; }
.sticker-shell .leaf-end .end-seal + .leaf-foot { margin-top: auto; align-self: stretch; }
.sticker-shell .leaf-blank { background: var(--paper); }
.sticker-shell .turn { position: absolute; z-index: 5; display: flex; transform-style: preserve-3d; transform-origin: left center; pointer-events: none; }
.sticker-shell .turn-l { transform-origin: right center; }
.sticker-shell .turn-face { position: absolute; inset: 0; display: flex; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sticker-shell .turn-face > .leaf { flex: 1; }
.sticker-shell .turn-back { transform: rotateY(180deg); }
.sticker-shell .turn-front::after, .sticker-shell .turn-back::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.12), rgba(0,0,0,0) 40%); }
.sticker-shell .book-nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 10px; }
.sticker-shell .book-btn { min-width: 48px; font-size: 16px; }
.sticker-shell .book-btn:disabled { opacity: 0.35; cursor: default; }
.sticker-shell .book-count { min-width: 12ch; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); text-align: center; font-variant-numeric: tabular-nums; }
.sticker-shell .s-no { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; color: #8f8571; }
.sticker-shell .leaf-grid .s-num { font-size: calc(var(--cell, 70px) * 0.3); }
.sticker-shell .s-tag { position: absolute; left: 50%; bottom: -17px; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; line-height: 14px; color: #8f8571; font-variant-numeric: tabular-nums; pointer-events: none; }
.sticker-shell .slot { position: relative; aspect-ratio: 5 / 7; border-radius: 7px; }
.sticker-shell .slot.empty { border: 2px dashed #bcae90; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #6b6355; box-sizing: border-box; }
.sticker-shell .s-num { font-family: var(--numeral); font-style: italic; font-weight: 900; font-size: clamp(22px, 7vw, 34px); line-height: 1; color: #c3b496; }
.sticker-shell .s-name { font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; padding: 0 4px; }
.sticker-shell .st-chip { position: absolute; right: -6px; top: -7px; min-width: 22px; height: 22px; padding: 0 5px; box-sizing: border-box; border-radius: 11px; background: var(--rust); color: #fff; font-family: var(--mono); font-size: 10px; font-weight: 600; display: grid; place-items: center; z-index: 2; }
.sticker-shell .ring { position: absolute; inset: -6px; border-radius: 10px; border: 2px solid var(--amber); pointer-events: none; opacity: 0; }
.sticker-shell .tray { padding-block: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.sticker-shell .tray-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sticker-shell .tray-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--mute); }
.sticker-shell .tray-row { display: flex; gap: 12px; min-height: 140px; align-items: center; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding: 6px 4px; margin: -6px -4px; }
.sticker-shell .tray-row::-webkit-scrollbar { display: none; }
.sticker-shell .tray-row > :first-child { margin-left: auto; }
.sticker-shell .tray-row > :last-child { margin-right: auto; }
.sticker-shell .st-sticker { flex: 0 0 auto; }
.sticker-shell .st-sticker { position: relative; width: 92px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform 0.2s ease; }
.sticker-shell .st-sticker:hover { transform: translateY(-4px) rotate(-2deg); }
.sticker-shell .st-sticker .curl { position: absolute; right: 0; bottom: 0; width: 18px; height: 18px; border-radius: 0 0 5px 0; background: linear-gradient(135deg, transparent 50%, #f1ece2 50%, #cfc6b4 100%); box-shadow: -2px -2px 4px rgba(0,0,0,0.25); }
.sticker-shell .tray-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.sticker-shell .flyer { position: fixed; z-index: 50; pointer-events: none; }
.sticker-shell .flyer .curl { position: absolute; right: 0; bottom: 0; width: 0; height: 0; border-radius: 0 0 6px 0; background: linear-gradient(135deg, transparent 50%, #f1ece2 50%, #cfc6b4 100%); box-shadow: -3px -3px 6px rgba(0,0,0,0.3); }
.sticker-shell .foot-note { font-size: 12px; color: var(--mute); text-align: center; padding-block: 0 12px; }
@media (prefers-reduced-motion: reduce) {
  .sticker-shell .foil { animation: none; }
  .sticker-shell .st-sticker, .sticker-shell .track i, .sticker-shell .zoom-flip, .sticker-shell .zoom-side { transition: none; }
}

.sticker-shell *, .sticker-shell *::before, .sticker-shell *::after { box-sizing: border-box; }
.sticker-shell h1, .sticker-shell h2, .sticker-shell h3 { margin: 0; font: inherit; color: inherit; max-width: none; letter-spacing: inherit; overflow-wrap: normal; }
.sticker-shell p { margin: 0; }
.sticker-shell [hidden] { display: none !important; }
.sticker-shell button { -webkit-tap-highlight-color: transparent; }
.sticker-shell a { color: inherit; }
.sticker-shell a:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sticker-shell .hint b { color: var(--ink); font-weight: 600; }
.sticker-shell .hint-small { font-size: 12px; }
.sticker-shell .pack-open { cursor: default; touch-action: auto; opacity: 0.55; filter: grayscale(0.35) drop-shadow(0 26px 30px rgba(0,0,0,0.55)); }
.sticker-shell .pack-open .pbody { top: 0; border-radius: 10px; }
.sticker-shell .pack-open .pbody::before { content: ""; position: absolute; left: 6px; right: 6px; top: 0; border-top: 2px dashed rgba(255,255,255,0.45); }
.sticker-shell .f-img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-50%); object-fit: contain; object-position: center bottom; }
.sticker-shell .f-img-archive { left: 0; width: 100%; transform: none; object-fit: cover; object-position: center 25%; }
.sticker-shell .f-last.f-long { font-size: calc(var(--u) * 9.2); }
.sticker-shell .face.is-small .f-last.f-long { font-size: calc(var(--u) * 10.5); }
.sticker-shell .st-brand-end { text-align: right; }
.sticker-shell .st-page-note { margin-top: 12px; font-size: 12px; line-height: 1.45; color: #5a5348; }
.sticker-shell .st-chip-float { top: auto; bottom: -8px; right: 50%; transform: translateX(50%); background: #12202e; }
.sticker-shell .slot-target { outline: 3px solid var(--amber); outline-offset: 4px; border-radius: 8px; }
.sticker-shell .sticker-about { max-width: 640px; margin: 0 auto; padding: 36px 16px 48px; border-top: 1px solid var(--line); color: var(--mute); font-size: 14px; line-height: 1.6; }
.sticker-shell .sticker-about { padding-block: 20px 32px; }
.sticker-shell .sticker-about > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; cursor: pointer; list-style: none; }
.sticker-shell .sticker-about > summary::-webkit-details-marker { display: none; }
.sticker-shell .sticker-about > summary::after { content: "+"; font-family: var(--mono); font-size: 20px; color: var(--ink); }
.sticker-shell .sticker-about[open] > summary::after { content: "−"; }
.sticker-shell .sticker-about > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }
.sticker-shell .sticker-about[open] > summary { margin-bottom: 12px; }
.sticker-shell .sticker-about h2 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: 0.06em; color: var(--ink); }
.sticker-shell .sticker-about p + p { margin-top: 10px; }
.sticker-shell .rar-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; padding: 0; list-style: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; }
.sticker-shell .rar-list li { display: flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); }
.sticker-shell .rar-list i { width: 9px; height: 9px; transform: rotate(45deg); background: var(--frame); }
.sticker-shell .rar-list .r0 i { background: #ddd2bc; }
@media (max-width: 380px) {
  .sticker-shell .sticker-app { padding-inline: 10px; }
  .sticker-shell .tray-row { gap: 8px; }
  .sticker-shell .st-sticker { width: 80px; }
}

/* Разделы альбома: легенды, тренеры, моменты, стадионы. Каркас .face общий,
   у каждого раздела своя начинка и палитра; редкость — рамка и шкала. */
.sticker-shell .f-cover { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 20%; }
.sticker-shell .primary-sm { min-height: 44px; }
.sticker-shell .hint-wide { max-width: none; }
.sticker-shell .linkish { background: none; border: 0; color: var(--mute); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-size: 13px; min-height: 36px; }
.sticker-shell .limit { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); text-align: center; font-variant-numeric: tabular-nums; }
.sticker-shell .limit b { color: var(--ink); font-weight: 600; }
.sticker-shell .limit .match { color: var(--amber); }
.sticker-shell .empty-pack { position: absolute; left: 50%; top: 50%; width: var(--pw, 220px); aspect-ratio: 5 / 7.4; transform: translate(-50%, -50%); border: 2px dashed var(--line); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 16px; }
.sticker-shell .empty-pack .clock { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.sticker-shell .empty-pack small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--mute); }
.sticker-shell .swap-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13px; }
/* На компьютере место есть: альбом шире, ячейки крупнее 125px — наклейки
   показываются целиком (цифра, факт, редкость), а не в урезанном виде. */
@media (min-width: 900px) {
  .sticker-shell .sticker-app { max-width: 1080px; padding-inline: 24px; }
  .sticker-shell .tray-row { min-height: 180px; }
  .sticker-shell .st-sticker { width: 124px; }
  .sticker-shell .hint { max-width: 48ch; }
}
.sticker-shell .slot.empty { padding: 4px; }
.sticker-shell .slot.empty.pickable { border-color: var(--rust); border-style: solid; background: rgba(138,69,50,0.07); cursor: pointer; }
.sticker-shell .slot.empty.pickable:hover { background: rgba(138,69,50,0.14); }
.sticker-shell .slot.empty.pickable:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
.sticker-shell .s-name { font-size: clamp(9px, 2.6vw, 11px); letter-spacing: 0; line-height: 1.15; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.sticker-shell .k-stat { display: flex; align-items: baseline; gap: calc(var(--u) * 2.4); margin: calc(var(--u) * 2.2) calc(var(--u) * 4.6) 0; padding: calc(var(--u) * 1.6) 0; border-top: calc(var(--u) * 0.3) solid var(--k-rule); border-bottom: calc(var(--u) * 0.3) solid var(--k-rule); }
.sticker-shell .k-stat b { font-family: var(--display); font-weight: 600; font-size: calc(var(--u) * 8); line-height: 1; white-space: nowrap; }
.sticker-shell .k-stat span { font-family: var(--mono); font-size: calc(var(--u) * 2.9); letter-spacing: 0.08em; color: var(--k-sub); line-height: 1.25; }
.sticker-shell .k-fact { margin: calc(var(--u) * 2.2) calc(var(--u) * 4.6) 0; font-size: calc(var(--u) * 3.6); line-height: 1.3; color: var(--k-sub); }
.sticker-shell .c-legend .pip.on, .sticker-shell .c-moment .pip.on, .sticker-shell .c-coach .pip.on, .sticker-shell .c-stadium .pip.on { background: var(--k-ink); border-color: var(--k-ink); }
.sticker-shell .c-legend .pip, .sticker-shell .c-moment .pip { border-color: var(--k-rule); }
.sticker-shell .c-coach .pip, .sticker-shell .c-stadium .pip { border-color: var(--k-sub); }
.sticker-shell .c-legend .f-rar, .sticker-shell .c-moment .f-rar, .sticker-shell .c-coach .f-rar, .sticker-shell .c-stadium .f-rar { color: var(--k-ink); }

.sticker-shell .c-legend { --k-ink: #2c1d0e; --k-sub: #5c4630; --k-rule: #c9b48c; --sil: #8c7452; }
.sticker-shell .c-legend .in { background: #efe4cc; color: var(--k-ink); }
.sticker-shell .c-legend .f-top { color: #6b4a2a; }
/* Портреты легенд квадратные, рамка тоже квадрат — иначе срезает лоб и подбородок. */
.sticker-shell .lg-photo { position: relative; width: calc(var(--u) * 70); aspect-ratio: 1; margin: 0 auto; background: #cdbb98; border: calc(var(--u) * 2) solid #fbf6ea; box-shadow: 0 calc(var(--u) * 0.6) calc(var(--u) * 2) rgba(70,48,20,0.25); overflow: hidden; }
.sticker-shell .lg-photo .f-cover { filter: sepia(0.35) contrast(1.05); }
.sticker-shell .lg-photo .f-sil { width: calc(var(--u) * 52); }
.sticker-shell .mount { position: absolute; width: calc(var(--u) * 9); height: calc(var(--u) * 9); background: #6b4a2a; transform: rotate(45deg); z-index: 2; }
.sticker-shell .mount.tl { left: calc(var(--u) * -4.5); top: calc(var(--u) * -4.5); }
.sticker-shell .mount.tr { right: calc(var(--u) * -4.5); top: calc(var(--u) * -4.5); }
.sticker-shell .mount.bl { left: calc(var(--u) * -4.5); bottom: calc(var(--u) * -4.5); }
.sticker-shell .mount.br { right: calc(var(--u) * -4.5); bottom: calc(var(--u) * -4.5); }
.sticker-shell .lg-name { padding: calc(var(--u) * 3) calc(var(--u) * 4.6) 0; }
.sticker-shell .lg-first { font-family: var(--display); font-weight: 500; font-size: calc(var(--u) * 4); letter-spacing: 0.12em; color: var(--k-sub); }
.sticker-shell .lg-last { font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: calc(var(--u) * 9.6); line-height: 1.02; white-space: nowrap; }
.sticker-shell .lg-last.k-long { font-size: calc(var(--u) * 7.8); }
.sticker-shell .lg-club { margin-top: calc(var(--u) * 1); font-family: var(--mono); font-weight: 600; font-size: calc(var(--u) * 3.2); letter-spacing: 0.08em; color: var(--k-sub); }

.sticker-shell .c-coach { --k-ink: #eef4ef; --k-sub: #a9c4b4; --k-rule: rgba(238,244,239,0.22); --sil: #0c241f; }
.sticker-shell .c-coach .in { background: #11302a; color: var(--k-ink); }
.sticker-shell .c-coach .f-top { color: var(--k-sub); }
.sticker-shell .co-photo { position: relative; height: calc(var(--u) * 60); margin: 0 calc(var(--u) * 3.3); border-radius: calc(var(--u) * 2); background: #1b4a40; overflow: hidden; }
.sticker-shell .co-board { position: absolute; inset: 0; width: 100%; height: 100%; }
.sticker-shell .co-name { padding: calc(var(--u) * 3) calc(var(--u) * 4.6) 0; }
.sticker-shell .co-first { font-family: var(--display); font-weight: 500; font-size: calc(var(--u) * 4); letter-spacing: 0.14em; color: var(--k-sub); }
.sticker-shell .co-last { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 10.5); line-height: 1; white-space: nowrap; }
.sticker-shell .co-last.k-long { font-size: calc(var(--u) * 8.6); }

.sticker-shell .c-moment { --k-ink: #1d1a14; --k-sub: #4e473b; --k-rule: #cdbf9f; }
.sticker-shell .c-moment .in { background: #f4efe4; color: var(--k-ink); }
.sticker-shell .c-moment .f-top { color: #6b6355; }
.sticker-shell .mo-photo { position: relative; height: calc(var(--u) * 70); margin: 0 calc(var(--u) * 3.3); border-radius: calc(var(--u) * 1.4); background: #12202e; overflow: hidden; }
.sticker-shell .mo-fallback { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; }
.sticker-shell .mo-fallback span { font-family: var(--numeral); font-style: italic; font-weight: 900; font-size: calc(var(--u) * 30); line-height: 1; color: transparent; -webkit-text-stroke: calc(var(--u) * 0.6) rgba(242,184,75,0.75); white-space: nowrap; }
.sticker-shell .mo-date { position: absolute; left: calc(var(--u) * 2.6); bottom: calc(var(--u) * 2.6); padding: calc(var(--u) * 1.2) calc(var(--u) * 2.4); background: #f4efe4; color: var(--k-ink); font-family: var(--mono); font-weight: 600; font-size: calc(var(--u) * 3.4); letter-spacing: 0.08em; z-index: 2; }
.sticker-shell .mo-title { padding: calc(var(--u) * 3) calc(var(--u) * 4.6) 0; font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 7.2); line-height: 1.04; text-wrap: balance; }
.sticker-shell .mo-text { margin: calc(var(--u) * 1.6) calc(var(--u) * 4.6) 0; font-size: calc(var(--u) * 3.6); line-height: 1.3; color: var(--k-sub); }

.sticker-shell .c-stadium { --k-ink: #e8f1f8; --k-sub: #9fbbd2; --k-rule: rgba(232,241,248,0.2); }
.sticker-shell .c-stadium .in { background: #0d2f4f; color: var(--k-ink); background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: calc(var(--u) * 6) calc(var(--u) * 6); }
.sticker-shell .c-stadium .f-top { color: var(--k-sub); }
.sticker-shell .sd-photo { position: relative; height: calc(var(--u) * 70); margin: 0 calc(var(--u) * 3.3); border-radius: calc(var(--u) * 1.4); background: #12395c; overflow: hidden; outline: calc(var(--u) * 0.4) solid rgba(232,241,248,0.35); outline-offset: calc(var(--u) * 1.2); }
.sticker-shell .sd-plan { position: absolute; inset: 0; width: 100%; height: 100%; }
.sticker-shell .sd-title { padding: calc(var(--u) * 4) calc(var(--u) * 4.6) 0; font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 8); line-height: 1.04; }
.sticker-shell .sd-sub { margin: calc(var(--u) * 1.4) calc(var(--u) * 4.6) 0; font-family: var(--mono); font-size: calc(var(--u) * 3.2); letter-spacing: 0.08em; color: var(--k-sub); }
.sticker-shell .sd-text { margin: calc(var(--u) * 1.6) calc(var(--u) * 4.6) 0; font-size: calc(var(--u) * 3.6); line-height: 1.3; color: var(--k-sub); }

.sticker-shell .face.is-small .k-fact, .sticker-shell .face.is-small .lg-first, .sticker-shell .face.is-small .lg-club, .sticker-shell .face.is-small .co-first, .sticker-shell .face.is-small .mo-text, .sticker-shell .face.is-small .sd-text, .sticker-shell .face.is-small .sd-sub, .sticker-shell .face.is-small .k-stat span { display: none; }
.sticker-shell .face.is-small .k-stat { border: 0; padding: 0; margin-top: calc(var(--u) * 1); }
.sticker-shell .face.is-small .k-stat b { font-size: calc(var(--u) * 10); }
.sticker-shell .face.is-small .lg-last { font-size: calc(var(--u) * 11); }
.sticker-shell .face.is-small .lg-last.k-long, .sticker-shell .face.is-small .co-last.k-long { font-size: calc(var(--u) * 9); }
.sticker-shell .face.is-small .co-last { font-size: calc(var(--u) * 12); }
.sticker-shell .face.is-small .mo-title, .sticker-shell .face.is-small .sd-title { font-size: calc(var(--u) * 10); }
.sticker-shell .face.is-small .lg-photo { width: auto; aspect-ratio: auto; height: calc(var(--u) * 90); margin: calc(var(--u) * 4) calc(var(--u) * 4) 0; }
.sticker-shell .face.is-small .co-photo { height: calc(var(--u) * 86); margin-top: calc(var(--u) * 3.3); }
.sticker-shell .face.is-small .mo-photo, .sticker-shell .face.is-small .sd-photo { height: calc(var(--u) * 92); margin-top: calc(var(--u) * 3.3); }
.sticker-shell .face.is-small .mo-date { font-size: calc(var(--u) * 5); }

.sticker-shell .sticker-credits { font-size: 12px; line-height: 1.5; }
.sticker-shell .sticker-credits ul { margin: 8px 0 0; padding-left: 18px; }
.sticker-shell .sticker-credits li + li { margin-top: 3px; }
.sticker-shell .sticker-credits a { text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }

/* Увеличенная наклейка из альбома */
html.zoom-lock { overflow: hidden; }
.sticker-shell .slot.owned { cursor: zoom-in; }
.sticker-shell .slot.owned:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sticker-shell.zoom { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 56px 16px 20px; box-sizing: border-box; background: rgba(4,10,16,0.86); cursor: zoom-out; }
/* Both faces must have a predictable layout even on Safari/WebKit and when
   CSS 3D layers are flattened by filters/backdrops. Use a reliable 2D face
   switch for the expanded card; the packet opening retains its animation. */
.sticker-shell .zoom-card { width: min(88vw, 400px, calc((100vh - 210px) * 5 / 7)); width: min(88vw, 400px, calc((100dvh - 210px) * 5 / 7)); cursor: pointer; }
.sticker-shell .zoom-flip { position: relative; width: 100%; }
.sticker-shell .zoom-side { position: relative; width: 100%; }
.sticker-shell .zoom-back { display: none; }
.sticker-shell .zoom-flip.is-back .zoom-front { display: none; }
.sticker-shell .zoom-flip.is-back .zoom-back { display: block; }
.sticker-shell .zoom-side .face { box-shadow: 0 24px 40px rgba(0,0,0,0.55); }
.sticker-shell .zoom-turn { min-height: 44px; font-size: 15px; cursor: pointer; }
/* Оборот наклейки — «Почему в альбоме». */
.sticker-shell .why { --cu: 3px; width: 100%; aspect-ratio: 5 / 7; border-radius: calc(var(--cu) * 5); padding: calc(var(--cu) * 3.1); background: linear-gradient(135deg, #e6ebef 0%, #9aa7b2 38%, #f4f7f9 55%, #8794a0 100%); box-shadow: 0 24px 40px rgba(0,0,0,0.55); cursor: pointer; }
.sticker-shell .why-in { height: 100%; display: flex; flex-direction: column; gap: calc(var(--cu) * 3); padding: calc(var(--cu) * 5) calc(var(--cu) * 5.4); border-radius: calc(var(--cu) * 3); background: #f7f1e5; color: #12202e; overflow-y: auto; overscroll-behavior: contain; }
.sticker-shell .why-top { display: flex; justify-content: space-between; gap: 8px; padding-bottom: calc(var(--cu) * 2.4); border-bottom: 1px solid #d4c8ad; font-family: var(--mono); font-weight: 600; font-size: max(10px, calc(var(--cu) * 3.2)); letter-spacing: 0.14em; color: var(--rust); }
.sticker-shell .why-name { font-family: var(--display); font-weight: 700; font-size: calc(var(--cu) * 8); line-height: 1.05; }
.sticker-shell .why-story { font-size: max(14px, calc(var(--cu) * 4.8)); line-height: 1.45; }
.sticker-shell .why-src { align-self: flex-start; font-family: var(--mono); font-size: max(11px, calc(var(--cu) * 3.3)); color: #1d4e6e; text-decoration: underline; text-underline-offset: 2px; }
.sticker-shell .why-links { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--cu) * 2); }
.sticker-shell .why-links a { display: block; padding: calc(var(--cu) * 2.6) calc(var(--cu) * 3.4); border-radius: calc(var(--cu) * 2); background: #12202e; color: #f4f7fa; font-family: var(--display); font-weight: 500; font-size: max(12px, calc(var(--cu) * 3.8)); line-height: 1.25; letter-spacing: 0.02em; text-decoration: none; }
.sticker-shell .why-links a:hover { background: #1d4e6e; }
.sticker-shell .why a:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }
.sticker-shell .zoom-cap { margin: 0; max-width: 40ch; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); text-align: center; }
.sticker-shell .zoom-close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: rgba(8,18,28,0.9); font-size: 26px; line-height: 1; cursor: pointer; }
.sticker-shell .zoom-close:hover { border-color: var(--mute); }

/* Легенда и тренер без фото: крупная цифра вместо пустой рамки */
.sticker-shell .k-plate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 5); text-align: center; z-index: 1; }
.sticker-shell .k-plate b { font-family: var(--numeral); font-style: italic; font-weight: 900; font-size: calc(var(--u) * 26); line-height: 0.95; white-space: nowrap; }
.sticker-shell .k-plate b.k-big-long { font-size: calc(var(--u) * 19); }
.sticker-shell .k-plate span { max-width: 90%; font-family: var(--mono); font-weight: 600; font-size: calc(var(--u) * 3.3); letter-spacing: 0.1em; line-height: 1.3; }
.sticker-shell .lg-plate { background: radial-gradient(circle at 50% 42%, #e4d4b2 0%, #cdb78e 70%, #bea67b 100%); }
.sticker-shell .lg-plate .k-plate b { color: #6b4a2a; text-shadow: 0 calc(var(--u) * 0.6) 0 rgba(251,246,234,0.7); }
.sticker-shell .lg-plate .k-plate span { color: #4e3a24; }
.sticker-shell .co-plate .co-board { opacity: 0.3; }
.sticker-shell .co-plate .k-plate b { color: var(--amber); text-shadow: 0 calc(var(--u) * 0.8) calc(var(--u) * 2) rgba(0,0,0,0.45); }
.sticker-shell .co-plate .k-plate span { color: #eef4ef; }
.sticker-shell .face.is-small .k-plate span { display: none; }
.sticker-shell .face.is-small .k-plate b { font-size: calc(var(--u) * 34); }
.sticker-shell .face.is-small .k-plate b.k-big-long { font-size: calc(var(--u) * 24); }

/* Матчевый выпуск: пакетик бонусного дня матча в своей упаковке —
   кубковая (бордо с золотом) или лиговая (морская волна). */
.sticker-shell .pack-cup .foil { background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,230,170,0.3) 47%, rgba(255,255,255,0) 58%), linear-gradient(180deg, #7a1a2c 0%, #4c1020 70%, #2e0912 100%); background-size: 260% 100%, 100% 100%; }
.sticker-shell .pack-league .foil { background: linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.28) 47%, rgba(255,255,255,0) 58%), linear-gradient(180deg, #13545a 0%, #0b363f 70%, #08262e 100%); background-size: 260% 100%, 100% 100%; }
.sticker-shell .pack-match .p-band { display: none; }
.sticker-shell .pack-match .p-count { bottom: 7%; }
.sticker-shell .pm-kicker { margin-top: 7%; padding: 0.45em 0.9em; border-radius: 3px; background: var(--amber); color: var(--amber-ink); font-family: var(--display); font-weight: 700; font-size: calc(var(--pw, 220px) * 0.05); letter-spacing: 0.12em; }
.sticker-shell .pm-teams { margin-top: 6%; width: 92%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 3%; }
.sticker-shell .pm-team { display: flex; flex-direction: column; align-items: center; gap: calc(var(--pw, 220px) * 0.025); text-align: center; }
.sticker-shell .pm-team b { font-family: var(--display); font-weight: 700; font-size: calc(var(--pw, 220px) * 0.05); line-height: 1.05; letter-spacing: 0.02em; }
.sticker-shell .pm-crest { width: calc(var(--pw, 220px) * 0.2); height: calc(var(--pw, 220px) * 0.2); object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.45)); }
.sticker-shell .pm-crest-none { display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.12); font-family: var(--display); font-weight: 700; font-size: calc(var(--pw, 220px) * 0.09); }
.sticker-shell .pm-vs { align-self: center; margin-top: calc(var(--pw, 220px) * -0.06); font-family: var(--display); font-weight: 700; font-size: calc(var(--pw, 220px) * 0.07); color: var(--amber); }
.sticker-shell .pm-comp { margin-top: 4%; font-family: var(--display); font-weight: 600; font-size: calc(var(--pw, 220px) * 0.064); letter-spacing: 0.06em; }
.sticker-shell .pm-stage, .sticker-shell .pm-when, .sticker-shell .pm-venue { width: 88%; margin-top: 2%; font-family: var(--mono); font-size: calc(var(--pw, 220px) * 0.036); letter-spacing: 0.1em; line-height: 1.35; text-align: center; text-wrap: balance; color: rgba(255,255,255,0.78); }
.sticker-shell .pm-when { margin-top: 3%; color: var(--amber); }
.sticker-shell .match-note { color: var(--amber); }

/* Разделы приложения: пакетики, альбом, обмен, награды. На телефоне
   навигация — нижняя панель приложения, на широком экране — справа в
   строке заголовка. */
.sticker-shell .sticker-app { position: relative; }
.sticker-shell .app-bar { flex: 0 0 auto; }
.sticker-shell .st-nav { flex: 0 0 auto; order: 10; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-inline: -16px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: rgba(8,18,28,0.96); }
.sticker-shell .st-nav button { min-height: 48px; padding: 4px 2px; border: 0; border-radius: 12px; background: transparent; color: var(--mute); font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: 0.04em; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1.1; }
.sticker-shell .st-nav button small { font-family: var(--mono); font-size: 10px; letter-spacing: 0; opacity: 0.85; font-variant-numeric: tabular-nums; }
.sticker-shell .st-nav button:hover { color: var(--ink); }
.sticker-shell .st-nav button[aria-current="page"] { color: var(--amber-ink); background: var(--amber); }
.sticker-shell .st-nav button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
@media (max-width: 380px) { .sticker-shell .st-nav { margin-inline: -10px; } .sticker-shell .st-nav button { font-size: 13px; } }
@media (min-width: 700px) {
  .sticker-shell .st-nav { position: absolute; top: 10px; right: 16px; margin: 0; padding: 4px; display: flex; border: 1px solid var(--line); border-radius: 26px; background: transparent; }
  .sticker-shell .st-nav button { flex-direction: row; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 22px; }
}
@media (min-width: 900px) { .sticker-shell .st-nav { right: 24px; } }

/* Экран пакетиков: слева закрытый альбом с прогрессом, справа пакетики. */
.sticker-shell .pack-layout { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sticker-shell .pack-col { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.sticker-shell .stage { min-height: 280px; }
.sticker-shell .hero-book { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 4px 0 6px; }
.sticker-shell .book-3d { flex: 0 0 auto; position: relative; width: 54px; aspect-ratio: 3 / 4; padding: 0; border: 0; background: none; cursor: pointer; perspective: 600px; }
.sticker-shell .b3-cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8%; border-radius: 3px 8px 8px 3px; color: #f4f7fa; text-align: center;
  background: linear-gradient(90deg, rgba(0,0,0,0.35) 0 6%, rgba(255,255,255,0.12) 6% 8%, transparent 8%),
    repeating-linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,0.06) 18% 24%),
    linear-gradient(160deg, #1d4e6e 0%, #0f2c44 55%, #0a1f33 100%);
  box-shadow: 4px 0 0 -1px #e9e3d6, 6px 1px 0 -1px #cfc6b4, 8px 2px 0 -1px #e9e3d6, 0 14px 22px rgba(0,0,0,0.5);
  transform: rotateY(-14deg); transform-origin: left center; transition: transform 0.3s ease; }
.sticker-shell .book-3d:hover .b3-cover, .sticker-shell .book-3d:focus-visible .b3-cover { transform: rotateY(-24deg); }
.sticker-shell .book-3d:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; border-radius: 6px; }
.sticker-shell .b3-kicker, .sticker-shell .b3-title, .sticker-shell .b3-season { display: none; }
.sticker-shell .b3-seal { width: 46%; aspect-ratio: 1; border-radius: 50%; background: var(--amber); color: var(--amber-ink); display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-size: 9px; }
.sticker-shell .b3-count { font-family: var(--mono); font-size: 10px; font-variant-numeric: tabular-nums; color: var(--mute); }
.sticker-shell .b3-count b { color: var(--ink); font-weight: 600; }
.sticker-shell .hero-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.sticker-shell .hero-cats { display: none; }
.sticker-shell .hero-hint { font-size: 12px; line-height: 1.4; color: var(--amber); }
.sticker-shell .hero-hint:empty { display: none; }
.sticker-shell .hero-open { min-height: 44px; font-size: 15px; padding: 0 16px; }
@media (min-width: 900px) {
  .sticker-shell .pack-layout { display: grid; grid-template-columns: 290px 1fr; gap: 32px; }
  .sticker-shell .hero-book { flex-direction: column; align-items: stretch; justify-content: center; gap: 22px; padding: 0 0 24px; }
  .sticker-shell .book-3d { width: 210px; align-self: center; }
  .sticker-shell .b3-cover { gap: 10px; padding: 14% 12%; border-radius: 4px 14px 14px 4px; transform: rotateY(-16deg);
    box-shadow: 6px 0 0 -1px #e9e3d6, 9px 2px 0 -1px #cfc6b4, 12px 4px 0 -1px #e9e3d6, 15px 6px 0 -1px #cfc6b4, 0 30px 40px rgba(0,0,0,0.55); }
  .sticker-shell .b3-kicker { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; color: var(--amber); }
  .sticker-shell .b3-seal { width: 40%; font-size: 22px; box-shadow: 0 0 0 5px rgba(242,184,75,0.22); }
  .sticker-shell .b3-title { display: block; font-family: var(--display); font-weight: 700; font-size: 22px; line-height: 1.05; letter-spacing: 0.03em; }
  .sticker-shell .b3-season { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; color: var(--mute); }
  .sticker-shell .b3-count { margin-top: auto; font-size: 13px; }
  .sticker-shell .b3-count b { font-family: var(--display); font-size: 26px; }
  .sticker-shell .hero-meta { align-items: stretch; gap: 12px; }
  .sticker-shell .hero-cats { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .sticker-shell .hero-cats li { display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; font-size: 13px; color: var(--mute); }
  .sticker-shell .hero-cats b { font-family: var(--mono); font-weight: 500; font-size: 12px; color: var(--ink); font-variant-numeric: tabular-nums; }
  .sticker-shell .hero-cats i { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--amber) var(--w, 0%), #172a3b var(--w, 0%)); }
  .sticker-shell .hero-cats li.is-done span { color: var(--amber); }
  .sticker-shell .hero-hint { font-size: 13px; }
  .sticker-shell .hero-open { align-self: flex-start; }
}

/* Стопка: сколько пакетиков осталось сегодня — столько и лежит. */
.sticker-shell .pack-ghost { position: absolute; left: 50%; top: 50%; width: var(--pw, 220px); aspect-ratio: 5 / 7.4; border-radius: 10px; z-index: 1; pointer-events: none; filter: brightness(0.62) drop-shadow(0 18px 22px rgba(0,0,0,0.45)); transform: translate(-50%, -50%) translate(16px, 8px) rotate(6deg); animation: none; }
.sticker-shell .pack-ghost.g2 { transform: translate(-50%, -50%) translate(28px, 16px) rotate(11deg); filter: brightness(0.45) drop-shadow(0 18px 22px rgba(0,0,0,0.45)); }
.sticker-shell .prefs { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 14px; }
.sticker-shell .prefs .linkish { font-size: 12px; font-family: var(--mono); min-height: 40px; }
.sticker-shell .linkish:disabled { opacity: 0.5; cursor: default; }
.sticker-shell.is-calm .foil { animation: none; }
.sticker-shell .cat-hint { font-size: 12px; color: var(--amber); min-height: 0; }
.sticker-shell .cat-hint:empty { display: none; }

/* Листы альбома по главам. */
.sticker-shell .leaf-k-squad { --paper: #f3f5f7; color: #12202e; }
.sticker-shell .leaf-k-squad::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; background: linear-gradient(90deg, #0f2c44 0 70%, var(--amber) 70% 78%, #0f2c44 78%); pointer-events: none; }
.sticker-shell .leaf-k-squad .leaf-head { color: #0f2c44; border-bottom-color: #c9d4dd; }
.sticker-shell .leaf-k-squad .slot.empty { border-color: #9fb0bd; color: #4d5863; }
.sticker-shell .leaf-k-squad .s-num { color: #b4c3cf; }
.sticker-shell .leaf-k-era { --paper: #ece3cf; }
.sticker-shell .leaf-k-era::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(90,70,40,0.045) 0 1px, transparent 1px 26px), radial-gradient(ellipse at 70% 20%, rgba(255,255,255,0.35), transparent 60%); }
.sticker-shell .leaf-k-stadium { --paper: #f2eee5; }
.sticker-shell .leaf-k-stadium::before { content: ""; position: absolute; inset: 0; pointer-events: none; border: 5px solid transparent; border-image: repeating-linear-gradient(45deg, #a8432f 0 9px, transparent 9px 16px, #1d4e6e 16px 25px, transparent 25px 32px) 5; opacity: 0.55; }
.sticker-shell .leaf-blank::before, .sticker-shell .leaf-blank::after { display: none; }

/* Обмен и награды — прокручиваемые панели внутри приложения. */
.sticker-shell .panel-view { overflow-y: auto; overscroll-behavior: contain; gap: 12px; padding-block: 4px 24px; }
.sticker-shell .panel-title { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: 0.05em; margin-top: 8px; }
.sticker-shell .panel-title ~ .panel-title { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sticker-shell .panel-lead { font-size: 14px; line-height: 1.55; color: var(--mute); max-width: 62ch; }
.sticker-shell .panel-note { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); }
.sticker-shell .panel-status { font-size: 13px; color: var(--amber); min-height: 1.4em; }
.sticker-shell .actions-start { justify-content: flex-start; }
.sticker-shell .btn-link { display: inline-flex; align-items: center; text-decoration: none; color: var(--ink); }
.sticker-shell .btn-link:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.sticker-shell .hint-left { text-align: left; }
.sticker-shell .trade-lists { display: grid; gap: 14px; }
@media (min-width: 700px) { .sticker-shell .trade-lists { grid-template-columns: 1fr 1fr; } }
.sticker-shell .trade-col { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.sticker-shell .trade-col h3 { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--mute); margin-bottom: 8px; }
.sticker-shell .trade-list { margin: 0; padding: 0; list-style: none; max-height: 220px; overflow-y: auto; font-size: 14px; line-height: 1.35; columns: 2 160px; column-gap: 14px; }
.sticker-shell .trade-list li { break-inside: avoid; padding: 3px 0; }
.sticker-shell .trade-list small { color: var(--amber); font-family: var(--mono); }
.sticker-shell .tl-no { display: inline-block; min-width: 2.4em; font-family: var(--mono); font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; }
.sticker-shell .backup-ask { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--amber); border-radius: 12px; font-size: 14px; line-height: 1.5; }
.sticker-shell .awards { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
@media (min-width: 700px) { .sticker-shell .awards { grid-template-columns: 1fr 1fr; } }
.sticker-shell .award { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #0c1a27; }
.sticker-shell .award.is-done { border-color: rgba(242,184,75,0.6); background: linear-gradient(135deg, rgba(242,184,75,0.14), rgba(242,184,75,0.02)); }
.sticker-shell .aw-medal { flex: 0 0 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 2px dashed var(--line); font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--mute); font-variant-numeric: tabular-nums; }
.sticker-shell .award.is-done .aw-medal { border: 0; background: var(--amber); color: var(--amber-ink); font-size: 20px; }
.sticker-shell .aw-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sticker-shell .aw-body b { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: 0.03em; }
.sticker-shell .aw-body > span:not(.aw-bar) { font-size: 13px; line-height: 1.4; color: var(--mute); }
.sticker-shell .aw-bar { display: block; height: 4px; margin-top: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--amber) var(--w, 0%), #172a3b var(--w, 0%)); }
.sticker-shell .aw-body small { font-family: var(--mono); font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.sticker-shell .award.is-done .aw-body small { color: var(--amber); }
.sticker-shell .st-toast { position: absolute; left: 50%; bottom: 84px; z-index: 30; max-width: calc(100% - 32px); padding: 10px 18px; border-radius: 22px; background: var(--amber); color: var(--amber-ink); font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.03em; box-shadow: 0 12px 26px rgba(0,0,0,0.45); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; }
.sticker-shell .st-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.sticker-shell .st-toast:empty { display: none; }
@media (min-width: 700px) { .sticker-shell .st-toast { bottom: 28px; } }
@media (prefers-reduced-motion: reduce) {
  .sticker-shell .b3-cover, .sticker-shell .st-toast { transition: none; }
}

/* Стол коллекционера: крупное имя, альбом и пакетики на подсвеченном
   столе, под альбомом — полоса статуса из настоящего прогресса. */
.sticker-shell { --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .36 0 0 0 0 .28 0 0 0 0 .16 0 0 0 .1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.sticker-shell .st-brand { font-size: 24px; line-height: 1.05; letter-spacing: 0.05em; }
.sticker-shell .st-brand small { margin-top: 4px; }
.sticker-shell .hero-book { flex-wrap: wrap; }
.sticker-shell .hero-stats { order: 3; flex: 1 0 100%; display: grid; grid-template-columns: repeat(4, 1fr); margin: 2px 0 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(15,44,68,0.45); }
.sticker-shell .hero-stats > div { min-width: 0; padding: 6px 4px; text-align: center; }
.sticker-shell .hero-stats > div + div { border-left: 1px solid var(--line); }
.sticker-shell .hero-stats dt { font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticker-shell .hero-stats dd { margin: 1px 0 0; font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 900px) {
  .sticker-shell .st-brand { font-size: 40px; letter-spacing: 0.04em; }
  .sticker-shell .st-brand small { font-size: 11px; margin-top: 6px; }
  .sticker-shell .app-bar { padding-block: 22px 14px; }
  .sticker-shell .pack-layout { position: relative; grid-template-columns: 300px 1fr; isolation: isolate; }
  .sticker-shell .pack-layout::before { content: ""; position: absolute; inset: -8px -24px 0; z-index: -1; border-radius: 28px; pointer-events: none;
    background: radial-gradient(ellipse 46% 60% at 66% 46%, rgba(29,78,110,0.55), transparent 70%), radial-gradient(ellipse 30% 50% at 16% 40%, rgba(29,78,110,0.35), transparent 70%), linear-gradient(180deg, rgba(15,44,68,0.35), rgba(8,18,28,0)); }
  .sticker-shell .book-3d { width: 200px; }
  .sticker-shell .hero-book { flex-wrap: nowrap; gap: 16px; padding-bottom: 12px; }
  .sticker-shell .hero-cats { gap: 5px; }
  .sticker-shell .hero-stats { order: 0; flex: 0 0 auto; grid-template-columns: 1fr 1fr; }
  .sticker-shell .hero-stats > div { padding: 6px 10px; text-align: left; }
  .sticker-shell .hero-stats > div:nth-child(3) { border-left: 0; }
  .sticker-shell .hero-stats > div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .sticker-shell .hero-stats dd { font-size: 18px; }
}

/* Бумага альбома: зерно поверх тона листа, отметка выпуска в подвале. */
.sticker-shell .leaf { background-image: var(--grain), linear-gradient(90deg, rgba(90,70,40,0.16), rgba(90,70,40,0) 18px); }
.sticker-shell .leaf-l { background-image: var(--grain), linear-gradient(270deg, rgba(90,70,40,0.22), rgba(90,70,40,0) 34px); }
.sticker-shell .leaf-r { background-image: var(--grain), linear-gradient(90deg, rgba(90,70,40,0.22), rgba(90,70,40,0) 34px); }
.sticker-shell .leaf-blank { background-image: var(--grain); }
.sticker-shell .leaf-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.sticker-shell .lf-mark { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: #a89b80; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticker-shell .leaf-l .lf-mark, .sticker-shell .leaf-one .lf-mark { order: 0; }
.sticker-shell .leaf-l .lf-no { order: -1; }
.sticker-shell .leaf-r .lf-no, .sticker-shell .leaf-one .lf-no { order: 1; }
.sticker-shell .leaf-cover .leaf-foot, .sticker-shell .leaf-end .leaf-foot { justify-content: center; }
.sticker-shell .leaf-one .leaf-grid { padding-bottom: 14px; }
.sticker-shell .leaf-cover .lf-mark, .sticker-shell .leaf-end .lf-mark { display: none; }

/* Пустое место: тонкая пунктирная рамка, номер и тихий силуэт. Место,
   которое можно забрать за повторы, — янтарный пунктир, а не тревожный цвет. */
.sticker-shell .slot.empty { border-width: 1.5px; border-color: #c4b697; background: rgba(255,255,255,0.22); overflow: hidden; }
.sticker-shell .slot.empty > :not(.s-sil) { position: relative; }
.sticker-shell .s-sil { position: absolute; left: 50%; top: 48%; width: 54%; transform: translate(-50%, -50%); fill: currentColor; opacity: 0.09; pointer-events: none; }
.sticker-shell .slot.empty.pickable { border-color: #c08a2c; border-style: dashed; background: rgba(242,184,75,0.12); }
.sticker-shell .slot.empty.pickable:hover { background: rgba(242,184,75,0.22); }
.sticker-shell .slot.empty.pickable:focus-visible { outline-color: #c08a2c; }
.sticker-shell .slot.empty.pickable::after { content: "\21C4"; position: absolute; top: 4px; right: 5px; font-size: 11px; line-height: 1; color: #a8741c; }
.sticker-shell .slot.owned { filter: drop-shadow(0 2px 3px rgba(60,45,20,0.28)); }

/* Альбом 2.0: пустое место тоже выглядит коллекционной ячейкой.
   Цвет страницы говорит о серии; силуэт и каталожный номер сохраняются.
   Никакие изображения или игровые данные для пустых мест не подгружаются. */
.sticker-shell .leaf-grid .slot.empty:not(.pickable)::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(84,69,48,.16);
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(255,255,255,.2), transparent 42%);
  pointer-events: none;
}
.sticker-shell .leaf-grid .slot.empty .s-num {
  font-size: clamp(19px, calc(var(--cell, 70px) * .31), 42px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sticker-shell .leaf-grid .slot.empty .s-name {
  font-size: clamp(8px, calc(var(--cell, 70px) * .12), 11px);
  line-height: 1.15;
  max-width: 100%;
  letter-spacing: .015em;
}
.sticker-shell .leaf-grid .slot.empty .s-sil { opacity: .16; }
.sticker-shell .leaf-s-squad .slot.empty:not(.pickable):not(.slot-elite) {
  background: linear-gradient(160deg, rgba(250,252,254,.85), rgba(207,224,235,.65));
  border-color: #91a9bc;
  color: #41596c;
}
.sticker-shell .leaf-s-squad .slot.empty:not(.pickable) .s-num { color: #adbecb; }
.sticker-shell .leaf-s-legend .slot.empty:not(.pickable):not(.slot-elite) {
  background: linear-gradient(155deg, rgba(255,250,233,.62), rgba(204,182,144,.25));
  border-color: #bda77c;
  color: #66533b;
}
.sticker-shell .leaf-s-legend .slot.empty:not(.pickable) .s-num { color: #c8b58f; }
.sticker-shell .leaf-s-coach .slot.empty:not(.pickable):not(.slot-elite) {
  background: linear-gradient(145deg, rgba(235,245,236,.66), rgba(170,199,181,.2));
  border-color: #87aa94;
  color: #345d4c;
}
.sticker-shell .leaf-s-coach .slot.empty:not(.pickable) .s-num { color: #9bb7a5; }
.sticker-shell .leaf-s-moment .slot.empty:not(.pickable):not(.slot-elite) {
  background: repeating-linear-gradient(0deg, rgba(105,85,51,.06) 0 1px, transparent 1px 13px), #f5eedf;
  border-color: #baaa8a;
  color: #6a5740;
}
.sticker-shell .leaf-s-moment .slot.empty:not(.pickable) .s-num { color: #d0bc96; }
.sticker-shell .leaf-s-stadium .slot.empty:not(.pickable):not(.slot-elite) {
  background: linear-gradient(0deg, rgba(20,86,125,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(20,86,125,.08) 1px, transparent 1px), #eff3f1;
  background-size: 13px 13px, 13px 13px, auto;
  border-color: #80a5b6;
  color: #34617b;
}
.sticker-shell .leaf-s-stadium .slot.empty:not(.pickable) .s-num { color: #b1c7d0; }
/* При обмене сохраняем заметный янтарный контур активной ячейки. */
.sticker-shell .leaf-grid .slot.empty.pickable { box-shadow: inset 0 0 0 1px rgba(164,110,24,.18); }

/* Телефон: навигация прилипает к низу экрана, пока видно приложение. */
@media (max-width: 699px) {
  .sticker-shell .sticker-app { height: calc(100vh - var(--app-top, var(--header-h, 77px))); height: calc(100svh - var(--app-top, var(--header-h, 77px))); min-height: 560px; }
  .sticker-shell .sticker-app:not([data-view="packView"]) { height: calc(100vh - var(--header-h, 77px)); height: calc(100svh - var(--header-h, 77px)); min-height: 620px; }
  /* Альбом: лист не ниже двух рядов наклеек; на коротком экране
     приложение становится чуть выше экрана и докручивается. */
  .sticker-shell .sticker-app[data-view="albumView"] { height: auto; max-height: none; min-height: calc(100vh - var(--header-h, 77px)); min-height: calc(100svh - var(--header-h, 77px)); }
  .sticker-shell .sticker-app[data-view="albumView"] .page { flex: 1 0 340px; }
  .sticker-shell .st-nav { position: sticky; bottom: 0; z-index: 20; }
  /* На пакетике уже написано «Тяните вдоль линии», а кнопка рядом. */
  .sticker-shell .hint-tear { display: none; }
  .sticker-shell .stage { min-height: 220px; }
  .sticker-shell .stage-foot { gap: 6px; padding-block: 4px 10px; min-height: 0; }
}

/* Вводная страница главы: номер и серия, заголовок с засечками, короткий
   текст, сколько собрано и одна наклейка главы. */
.sticker-shell .leaf-intro { justify-content: flex-start; align-items: stretch; text-align: left; }
.sticker-shell .intro-in { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: clamp(8px, 2.4vw, 22px) clamp(6px, 2vw, 20px) 0; min-height: 0; flex: 1; }
.sticker-shell .intro-kicker { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; color: #a8732a; }
.sticker-shell .leaf-intro h3 { margin: 0; font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(24px, 3.1vw, 40px); line-height: 1.08; color: #162a3d; text-wrap: balance; }
.sticker-shell .intro-lead { margin: 0; max-width: 40ch; font-size: 14px; line-height: 1.55; color: #4d5863; }
.sticker-shell .intro-range { margin: 0; padding-bottom: 12px; border-bottom: 2px solid rgba(22,42,61,0.12); font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: #6b665c; }
.sticker-shell .intro-range b { color: #162a3d; }
.sticker-shell .intro-feature { display: flex; gap: 14px; align-items: center; margin-top: auto; margin-bottom: 4px; }
.sticker-shell .if-photo { flex: 0 0 auto; width: clamp(64px, 9vw, 96px); aspect-ratio: 4 / 5; border-radius: 3px; overflow: hidden; background: #d9d2c2; display: grid; place-items: center; box-shadow: 0 2px 0 rgba(0,0,0,0.06), 0 6px 14px rgba(22,42,61,0.16); }
.sticker-shell .if-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; filter: grayscale(1) contrast(1.05) sepia(0.15); }
.sticker-shell .if-photo .s-sil { width: 60%; fill: #162a3d; opacity: 0.2; }
.sticker-shell .if-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sticker-shell .if-text small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #6b665c; }
.sticker-shell .if-text b { font-family: "Playfair Display", Georgia, serif; font-weight: 700; font-size: clamp(16px, 1.7vw, 21px); line-height: 1.15; color: #162a3d; }
.sticker-shell .if-text span { font-size: 13px; line-height: 1.45; color: #4d5863; }
.sticker-shell .leaf-intro .leaf-foot { justify-content: flex-start; }
.sticker-shell .leaf-s-squad.leaf-intro .intro-kicker { color: #1d4e6e; }
.sticker-shell .leaf-s-stadium.leaf-intro .intro-kicker { color: #a8432f; }
@media (max-width: 699px) {
  .sticker-shell .intro-in { gap: 10px; padding-top: 6px; }
  .sticker-shell .intro-lead { font-size: 13.5px; }
  .sticker-shell .if-text span { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Первый экран на компьютере: слева выпуск, крупный заголовок, вводка,
   «Листать альбом» и свой прогресс; обложка альбома лежит на столе за
   пакетиком и уходит, пока наклейки раскладываются. На телефоне и планшете
   заголовок не показывается — первый экран занимает пакетик. */
.sticker-shell .hero-head { display: none; }
@media (min-width: 900px) {
  .sticker-shell .st-brand { font-size: 22px; letter-spacing: 0.08em; }
  .sticker-shell .st-brand small { font-size: 10px; margin-top: 4px; }
  .sticker-shell .app-bar { padding-block: 18px 10px; }
  .sticker-shell .pack-layout { grid-template-columns: minmax(300px, 34%) 1fr; }
  .sticker-shell .hero-book { justify-content: center; gap: 22px; padding: 0 0 28px; }
  .sticker-shell .hero-head { display: flex; flex-direction: column; gap: 14px; order: 0; }
  .sticker-shell .hero-meta { order: 1; flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
  .sticker-shell .hero-stats { order: 2; }
  .sticker-shell .hero-cats { display: none; }
  .sticker-shell .hero-edition { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--amber); }
  .sticker-shell .hero-title { display: flex; flex-direction: column; font-family: var(--display); font-weight: 700; font-size: clamp(46px, 4.6vw, 66px); line-height: 0.98; letter-spacing: 0.01em; text-transform: uppercase; color: var(--ink); }
  .sticker-shell .ht-accent { color: var(--amber); }
  .sticker-shell .hero-lead { max-width: 34ch; font-size: 15px; line-height: 1.55; color: var(--mute); }
  .sticker-shell .hero-hint { flex: 1 0 100%; }
  .sticker-shell .pack-col { position: relative; }
  .sticker-shell .book-3d { position: absolute; z-index: 0; top: 42%; left: calc(34% + 32px + (66% - 32px) / 2 - 300px); width: 190px; transform: translateY(-50%) rotate(-7deg); transition: opacity 0.25s ease, transform 0.25s ease; }
  .sticker-shell .b3-cover { transform: rotateY(-10deg); }
  .sticker-shell .sticker-app[data-phase="tearing"] .book-3d,
  .sticker-shell .sticker-app[data-phase="revealing"] .book-3d,
  .sticker-shell .sticker-app[data-phase="revealed"] .book-3d { opacity: 0; pointer-events: none; transform: translateY(-46%) rotate(-7deg); }
  .sticker-shell .stage { z-index: 1; pointer-events: none; }
  .sticker-shell .stage > * { pointer-events: auto; }
}
@media (min-width: 1200px) {
  .sticker-shell .book-3d { width: 220px; left: calc(34% + 32px + (66% - 32px) / 2 - 360px); }
}
@media (min-width: 900px) and (prefers-reduced-motion: reduce) {
  .sticker-shell .book-3d { transition: none; }
}

/* Альбом в цифрах — под приложением, из настоящих данных выпуска. */
.sticker-shell .sticker-facts { max-width: 1080px; margin: 0 auto; padding: 22px 16px; box-sizing: border-box; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; border-top: 1px solid var(--line); }
.sticker-shell .sticker-facts li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sticker-shell .sticker-facts b { font-family: var(--display); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: 0.01em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sticker-shell .sticker-facts li:nth-child(3) b { color: var(--amber); }
.sticker-shell .sticker-facts span { font-family: var(--mono); font-size: 11px; line-height: 1.45; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mute); }
@media (min-width: 700px) {
  .sticker-shell .sticker-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 28px 24px; }
  .sticker-shell .sticker-facts li + li { padding-left: 18px; border-left: 1px solid var(--line); }
  .sticker-shell .sticker-facts b { font-size: 46px; }
}

/* Материал коллекции ББШ 2.0. Редкость определяется игровым ядром,
   здесь меняется ТОЛЬКО вид рамок и отражений. Матовая бумага остаётся
   спокойной; серебро холодное; янтарь тёплый; золото — фольга с лаком. */
.sticker-shell .face.r0 {
  background-image: var(--grain);
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2.6) rgba(0,0,0,.28);
}
.sticker-shell .face.r0 .in {
  background-image: var(--grain),
    linear-gradient(180deg, rgba(255,255,255,.35), transparent 40%);
}

/* Серебро: тонкая шлифовка, холодная светлая кромка и чистый блеск. */
.sticker-shell .face.r1 {
  background-image:
    repeating-linear-gradient(94deg, rgba(255,255,255,.14) 0 1px, rgba(70,88,106,.055) 1px 2px, transparent 2px 4px),
    linear-gradient(133deg, #edf6f8 0%, #93a8b8 28%, #f6faf9 46%, #8499ac 70%, #d3e2e8 100%);
  box-shadow:
    0 calc(var(--u) * 1.1) calc(var(--u) * 3.6) rgba(1,15,29,.4),
    inset 0 0 0 calc(var(--u) * .55) rgba(255,255,255,.7);
}
.sticker-shell .face.r1 .in {
  box-shadow: inset 0 0 0 calc(var(--u) * .55) rgba(227,241,247,.56);
}

/* Янтарь: тёплая, многослойная глубина, никакого постоянного мерцания. */
.sticker-shell .face.r2 {
  background-image:
    radial-gradient(ellipse at 15% 12%, rgba(255,244,190,.72), transparent 34%),
    radial-gradient(ellipse at 88% 82%, rgba(119,54,9,.44), transparent 42%),
    linear-gradient(137deg, #f8d785 0%, #a35510 28%, #ffd88a 49%, #8c400e 75%, #ebb55b 100%);
  box-shadow:
    0 calc(var(--u) * 1.4) calc(var(--u) * 4.2) rgba(25,15,4,.44),
    0 0 calc(var(--u) * 3.7) rgba(212,130,31,.16),
    inset 0 0 0 calc(var(--u) * .55) rgba(255,227,156,.8);
}
.sticker-shell .face.r2 .in {
  background-image:
    radial-gradient(120% 80% at 14% 0%, rgba(255,226,158,.17), transparent 58%),
    radial-gradient(100% 75% at 100% 100%, rgba(141,167,210,.11), transparent 65%),
    linear-gradient(155deg, rgba(255,255,255,.035), rgba(0,0,0,.14));
  box-shadow: inset 0 0 0 calc(var(--u) * .65) rgba(253,197,94,.45);
}
.sticker-shell .face.r2 .shine {
  opacity: .55;
  background-image: linear-gradient(115deg, transparent 35%, rgba(246,235,205,.62) 49%, transparent 61%);
  mix-blend-mode: screen;
}

/* Золото: гравированная фольга и лакированная рамка. */
.sticker-shell .face.r3:not(.c-author) {
  background-image:
    repeating-linear-gradient(130deg, rgba(255,255,255,.12) 0 calc(var(--u) * .55), transparent calc(var(--u) * .55) calc(var(--u) * 2.6)),
    linear-gradient(145deg, #fff1b0 0%, #ab7812 25%, #f9df82 46%, #75520d 68%, #f4d66d 90%, #fff5c6 100%);
  box-shadow:
    0 calc(var(--u) * 2) calc(var(--u) * 5.6) rgba(0,0,0,.48),
    0 0 calc(var(--u) * 6) rgba(248,214,104,.22),
    inset 0 0 0 calc(var(--u) * .7) rgba(255,243,186,.75);
}
.sticker-shell .face.r3:not(.c-author) .in {
  background-image:
    radial-gradient(110% 75% at 50% 0%, rgba(255,248,194,.11), transparent 68%),
    linear-gradient(170deg, rgba(255,250,220,.05), transparent 38%);
  box-shadow: inset 0 0 0 calc(var(--u) * .7) rgba(247,221,131,.58);
}
.sticker-shell .face.r3:not(.c-author) .shine { opacity: .65; }

/* Свет движется только при наведении и только когда разрешена анимация.
   Для касаний, prefers-reduced-motion и пользовательского calm — статика. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .sticker-shell:not(.is-calm) .face.r2:hover .shine,
  .sticker-shell:not(.is-calm) .face.r3:hover .shine {
    background-position: -20% 0;
    transition: background-position .85s ease-in-out;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sticker-shell .face.r2 .shine,
  .sticker-shell .face.r3 .shine { transition: none; }
}

/* Особая наклейка автора: рамка-голограмма, которая медленно переливается,
   ночная синева внутри, золотые буквы и радужный отлив поверх фото. */
.sticker-shell .face.c-author { --k-ink: #f7e08a; --k-sub: #c9c3e6; --k-rule: rgba(214,196,255,0.35); --sil: #05060f; --pip: #fff2b8; background-image: linear-gradient(115deg, #ffe9a6 0%, #9fe3ff 18%, #d7a8ff 34%, #ffd27a 50%, #8ef0d0 66%, #c8a2ff 82%, #ffe9a6 100%); background-size: 300% 300%; box-shadow: 0 calc(var(--u) * 1.5) calc(var(--u) * 6) rgba(0,0,0,0.5), 0 0 calc(var(--u) * 9) rgba(190,170,255,0.4); }
.sticker-shell .face.c-author .in { background: #07061a; background-image: radial-gradient(120% 70% at 50% 0%, #2a2160 0%, #120f2e 45%, #07061a 100%); color: var(--k-ink); box-shadow: inset 0 0 0 calc(var(--u) * 0.6) rgba(255,233,166,0.6); }
.sticker-shell .c-author .f-top { color: #e8d9ff; }
.sticker-shell .c-author .f-top span:last-child { color: #ffe9a6; }
.sticker-shell .c-author .au-photo { background: #1b1640; border-color: #ffe9a6; box-shadow: 0 0 calc(var(--u) * 4) rgba(255,233,166,0.35); }
.sticker-shell .c-author .au-photo .f-cover { filter: none; }
.sticker-shell .c-author .mount { background: linear-gradient(135deg, #ffe9a6, #b8901f); }
.sticker-shell .c-author .lg-first { color: var(--k-sub); }
.sticker-shell .c-author .lg-last { background: linear-gradient(90deg, #fff2b8, #f3c75a 45%, #fff2b8 70%, #e0b44a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sticker-shell .c-author .k-stat b { color: #ffe9a6; }
.sticker-shell .c-author .pip { border-color: #fff2b8; }
.sticker-shell .c-author .pip.on { background: #fff2b8; border-color: #fff2b8; box-shadow: 0 0 calc(var(--u) * 1.6) rgba(255,242,184,0.9); }
.sticker-shell .c-author .f-rar { color: #fff2b8; }
.sticker-shell .c-author .holo { position: absolute; inset: 0; border-radius: calc(var(--u) * 5.3); pointer-events: none; background: linear-gradient(125deg, transparent 20%, rgba(159,227,255,0.22) 35%, rgba(215,168,255,0.22) 45%, rgba(255,210,122,0.2) 55%, transparent 70%); background-size: 250% 250%; background-position: 100% 100%; mix-blend-mode: screen; }
.sticker-shell .slot-elite { border-color: #b9a1e8; border-style: solid; background: linear-gradient(135deg, rgba(159,227,255,0.12), rgba(215,168,255,0.14), rgba(255,210,122,0.12)); }
.sticker-shell .slot-elite .s-num { color: #a48fd6; }
.sticker-shell .st-badge.elite { background: linear-gradient(90deg, #ffe9a6, #9fe3ff, #d7a8ff, #ffd27a); color: #120f2e; box-shadow: 0 0 12px rgba(215,168,255,0.7); }
.sticker-shell .elite-rays { position: absolute; left: 50%; top: 50%; width: 240%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0; background: repeating-conic-gradient(from 0deg, rgba(255,242,184,0.5) 0deg 6deg, transparent 6deg 18deg, rgba(190,170,255,0.4) 18deg 24deg, transparent 24deg 36deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); }
.sticker-shell .elite-spark { position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; pointer-events: none; z-index: 6; opacity: 0; background: radial-gradient(circle, #fff 0%, #fff2b8 40%, rgba(215,168,255,0) 70%); box-shadow: 0 0 8px rgba(255,242,184,0.9); }
@keyframes elite-frame { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes elite-holo { 0%, 100% { background-position: 100% 100%; } 50% { background-position: 0% 0%; } }
@media (prefers-reduced-motion: no-preference) {
  .sticker-shell:not(.is-calm) .face.c-author { animation: elite-frame 6s ease-in-out infinite; }
  .sticker-shell:not(.is-calm) .c-author .holo { animation: elite-holo 4.5s ease-in-out infinite; }
}

/* Missing-sticker navigator: same slots and pagination, with owned cards muted. */
.sticker-shell .missing-bar { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.sticker-shell .missing-bar button { min-height: 36px; border: 1px solid var(--line); border-radius: 18px; background: transparent; color: inherit; padding: 6px 12px; cursor: pointer; }
.sticker-shell .missing-bar button[aria-pressed="true"] { border-color: var(--amber); color: var(--amber); }
.sticker-shell .missing-bar button:disabled { opacity: .35; cursor: not-allowed; }
.sticker-shell .missing-count { font-family: var(--mono); font-size: 12px; }
.sticker-shell .page.missing-only .slot.owned { opacity: .36; pointer-events: none; }
.sticker-shell .page.missing-only .slot.empty { outline: 2px solid var(--amber); outline-offset: -2px; }

/* Backup reminder sits OUTSIDE the height-constrained sticker-app,
   which has absolutely positioned desktop navigation on its top edge.
   Keep save/later in the regular flow and responsive in both languages. */
.sticker-shell .collection-backup-reminder {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-items: center;
  gap: 12px 18px;
  width: calc(100% - 32px);
  max-width: 1080px;
  margin: 14px auto 12px;
  padding: 14px 18px;
  border: 1px solid var(--amber);
  border-radius: 14px;
  background: linear-gradient(110deg, #0d2537, #102f43);
  color: var(--ink);
  box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
.sticker-shell .collection-backup-reminder[hidden] { display: none; }
.sticker-shell .collection-backup-reminder > span {
  display: block;
  min-width: 0;
  max-width: 72ch;
  font: 500 14px/1.5 var(--body);
  overflow-wrap: break-word;
}
.sticker-shell .backup-reminder-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}
.sticker-shell .collection-backup-reminder button {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 9px 16px;
  border: 1px solid #6b8da2;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font: 600 13px/1.25 var(--body);
  cursor: pointer;
  white-space: normal;
}
.sticker-shell .collection-backup-reminder .backup-reminder-save {
  border-color: var(--amber);
  background: var(--amber);
  color: var(--amber-ink);
  font-weight: 700;
}
.sticker-shell .collection-backup-reminder .backup-reminder-save:hover {
  filter: brightness(1.08);
}
.sticker-shell .collection-backup-reminder .backup-reminder-dismiss:hover {
  border-color: var(--amber);
}
@media (min-width: 1180px) {
  .sticker-shell .collection-backup-reminder {
    grid-template-columns: minmax(0,1fr) auto;
    justify-items: stretch;
  }
}
@media (max-width: 699px) {
  .sticker-shell .collection-backup-reminder {
    margin-block: 10px 12px;
    padding: 12px 14px;
    gap: 12px;
  }
  .sticker-shell .collection-backup-reminder > span { font-size: 13px; }
}
@media (max-width: 350px) {
  .sticker-shell .backup-reminder-actions { width: 100%; }
  .sticker-shell .collection-backup-reminder button { flex: 1 1 auto; }
}
.sticker-shell .collection-journal { margin: 22px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; }
.sticker-shell .collection-journal h3 { margin: 0 0 12px; }
.sticker-shell .collection-journal > ol { max-height: 380px; overflow: auto; padding-left: 24px; }
.sticker-shell .collection-journal > ol > li { margin: 0 0 14px; }
.sticker-shell .collection-journal ul { margin-top: 6px; padding-left: 16px; line-height: 1.5; }

/* Collection design v2, step 1: modern squad and archival legends.
   These rules are presentation-only: no changes to IDs or rarity mechanics. */
.sticker-shell .collector-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 1.5);
  min-height: calc(var(--u) * 10);
  padding: calc(var(--u) * 2.6) calc(var(--u) * 4.2);
  font-family: var(--mono);
  font-size: clamp(7px, calc(var(--u) * 3), 12px);
  line-height: 1.1;
  letter-spacing: 0.05em;
}
.sticker-shell .collector-series { font-weight: 700; white-space: nowrap; }
.sticker-shell .collector-id { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sticker-shell .collector-total { font-weight: 400; opacity: .65; }

/* Modern squad: vivid original cutout, larger picture, editorial nameplate. */
.sticker-shell .c-squad .collector-series { color: var(--pip); }
.sticker-shell .c-squad .squad-photo {
  height: calc(var(--u) * 82);
  margin-inline: calc(var(--u) * 2.8);
  border-radius: calc(var(--u) * 2.1) calc(var(--u) * 2.1) 0 0;
  background: radial-gradient(ellipse at 50% 90%, rgba(255,255,255,.14), transparent 60%), var(--photo);
  box-shadow: inset 0 0 calc(var(--u) * 2) rgba(0,0,0,.13);
}
.sticker-shell .c-squad .squad-photo::after {
  content: "";
  position: absolute; inset: 55% 0 0;
  background: linear-gradient(0deg, rgba(6,22,35,.16), transparent);
  pointer-events: none;
}
.sticker-shell .c-squad .squad-photo .f-num { opacity: .74; }
.sticker-shell .c-squad .squad-name {
  margin: 0 calc(var(--u) * 2.8);
  padding: calc(var(--u) * 2.2) calc(var(--u) * 2.2) 0;
  border-top: calc(var(--u) * .65) solid var(--pip);
}
.sticker-shell .c-squad .f-last {
  font-size: calc(var(--u) * 12.3);
  line-height: 1.05;
  letter-spacing: .012em;
}
.sticker-shell .c-squad .f-last.f-long { font-size: calc(var(--u) * 9.8); }
.sticker-shell .c-squad .f-pos { font-size: calc(var(--u) * 4); }

/* Legends: a restrained archival print. Original photographs remain intact. */
.sticker-shell .archive-print .in {
  background-color: #efe4cc;
  background-image:
    radial-gradient(ellipse at 75% 0%, rgba(255,255,255,.38), transparent 57%),
    repeating-linear-gradient(0deg, rgba(91,69,43,.025) 0 1px, transparent 1px 16px);
}
.sticker-shell .archive-print .collector-top {
  border-bottom: 1px solid rgba(95,72,43,.21);
  color: #654a2b;
}
.sticker-shell .archive-print .collector-id { color: #8a4532; }
.sticker-shell .archive-print .lg-photo {
  width: calc(var(--u) * 77);
  border: calc(var(--u) * 2.3) solid #faf5e9;
  background: #cdbb98;
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 2.4) rgba(66,43,18,.3);
  transform: rotate(-.65deg);
}
.sticker-shell .archive-print .lg-photo .f-cover {
  filter: sepia(.18) saturate(.82) contrast(1.06);
}
.sticker-shell .archive-print .archive-stamp {
  position: absolute;
  right: calc(var(--u) * 2.2);
  bottom: calc(var(--u) * 2.2);
  z-index: 4;
  padding: calc(var(--u) * 1.1) calc(var(--u) * 1.8);
  border: 1px solid rgba(115,47,29,.8);
  background: rgba(250,243,225,.85);
  color: #7d3a2c;
  font: 700 clamp(7px, calc(var(--u) * 2.5), 11px)/1.2 var(--mono);
  letter-spacing: .05em;
  white-space: nowrap;
  transform: rotate(-6deg);
  pointer-events: none;
}
.sticker-shell .archive-print .archive-name { padding-top: calc(var(--u) * 2.3); }
.sticker-shell .archive-print .lg-last { color: #2f2519; }
.sticker-shell .archive-print .lg-club { color: #795e40; }

/* Compact album and tray views: collection numbers remain visible, captions
   and archival stamp move aside to give the photograph maximum space. */
.sticker-shell .c-squad.is-small .collector-top,
.sticker-shell .archive-print.is-small .collector-top {
  display: flex;
  min-height: calc(var(--u) * 8);
  padding: calc(var(--u) * 1.6) calc(var(--u) * 3.5);
  font-size: clamp(6px, calc(var(--u) * 3), 8px);
  letter-spacing: 0;
}
.sticker-shell .c-squad.is-small .collector-total,
.sticker-shell .archive-print.is-small .collector-total { display: none; }
.sticker-shell .c-squad.is-small .squad-photo {
  height: calc(var(--u) * 88);
  margin-top: calc(var(--u) * 1);
}
.sticker-shell .c-squad.is-small .squad-name {
  padding-top: calc(var(--u) * 3);
}
.sticker-shell .c-squad.is-small .f-last { font-size: calc(var(--u) * 12); }
.sticker-shell .c-squad.is-small .f-last.f-long { font-size: calc(var(--u) * 9.4); }
.sticker-shell .archive-print.is-small .lg-photo {
  width: auto;
  height: calc(var(--u) * 82);
  aspect-ratio: auto;
  margin: calc(var(--u) * 3) calc(var(--u) * 4) 0;
}
.sticker-shell .archive-print.is-small .archive-stamp { display: none; }

/* Collection design v2, step 2: tactical coaches, newspaper chronology,
   Kaliningrad postcards. All photos stay real, with original focus values. */
.sticker-shell .tactics-card .collector-top,
.sticker-shell .news-card .collector-top,
.sticker-shell .postcard-card .collector-top {
  display: flex;
  min-height: calc(var(--u) * 10);
}
.sticker-shell .tactics-card .collector-series { color: #c5e2d5; }
.sticker-shell .tactics-card .collector-id { color: #f2b84b; }
.sticker-shell .tactics-card .in {
  background-color: #12332e;
  background-image: repeating-linear-gradient(0deg, transparent 0 17px, rgba(255,255,255,.022) 17px 18px);
}
.sticker-shell .tactics-card .tactics-photo {
  height: calc(var(--u) * 67);
  margin: 0 calc(var(--u) * 3.2);
  border: calc(var(--u) * .6) solid rgba(221,242,229,.3);
  background: radial-gradient(circle at 50% 50%, #285446, #102921);
  box-shadow: inset 0 0 calc(var(--u) * 5) rgba(0,0,0,.2);
}
.sticker-shell .tactics-card .co-board { opacity: .65; }
.sticker-shell .tactics-card .co-photo .f-cover {
  /* The chalkboard remains a border; the real photograph is not retouched. */
  inset: calc(var(--u) * 2.5);
  width: calc(100% - var(--u) * 5);
  height: calc(100% - var(--u) * 5);
  border-radius: calc(var(--u) * 1.2);
}
.sticker-shell .tactics-card .tactics-name {
  padding-top: calc(var(--u) * 2.5);
}
.sticker-shell .tactics-card .co-years {
  margin-top: calc(var(--u) * 1.1);
  font-family: var(--mono);
  font-size: calc(var(--u) * 3.2);
  line-height: 1.2;
  color: #b6d0c5;
}
.sticker-shell .tactics-card .k-stat { border-color: rgba(207,235,216,.3); }

/* Newspaper front page: readable headline, small archive date, subtle rules. */
.sticker-shell .news-card .in {
  background-color: #f2ead8;
  color: #261f17;
}
.sticker-shell .news-card .collector-top {
  border-bottom: calc(var(--u) * .5) double #baa889;
  color: #725741;
}
.sticker-shell .news-card .collector-id { color: #8a4532; }
.sticker-shell .news-card .news-photo {
  height: calc(var(--u) * 75);
  margin: calc(var(--u) * 3) calc(var(--u) * 3.3) 0;
  border-radius: 0;
  background-color: #172f41;
  box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 1.8) rgba(55,39,17,.23);
}
.sticker-shell .news-card .news-photo .f-cover {
  filter: saturate(.75) contrast(1.07);
}
.sticker-shell .news-card .mo-date {
  background-color: #f5eddb;
  border-left: calc(var(--u) * 1) solid #8a4532;
  font-size: calc(var(--u) * 3.3);
}
.sticker-shell .news-card .news-title {
  margin: calc(var(--u) * 2.3) calc(var(--u) * 4.2) 0;
  padding: 0 0 calc(var(--u) * 1.4);
  border-bottom: calc(var(--u) * .45) solid #bdac8a;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: calc(var(--u) * 7.2);
  line-height: 1.08;
  hyphens: auto;
  overflow-wrap: break-word;
}
.sticker-shell .news-card .mo-text { color: #5d5144; }

/* Historic stadium postcards: wide original photo, postmark and mapping ink. */
.sticker-shell .postcard-card .in {
  background-color: #0d2f4f;
  background-image: linear-gradient(120deg, rgba(106,161,192,.12), transparent 60%);
}
.sticker-shell .postcard-card .collector-top { color: #bed6e5; }
.sticker-shell .postcard-card .collector-id { color: #f2b84b; }
.sticker-shell .postcard-card .postcard-photo {
  height: calc(var(--u) * 78);
  margin-inline: calc(var(--u) * 3.5);
  border-radius: calc(var(--u) * 1.2);
  outline-offset: calc(var(--u) * .8);
  border: calc(var(--u) * 1.6) solid rgba(224,237,240,.86);
  box-shadow: 0 calc(var(--u) * 1.2) calc(var(--u) * 3) rgba(0,0,0,.25);
}
.sticker-shell .postcard-card .postcard-seal {
  position: absolute;
  right: calc(var(--u) * 2.2);
  bottom: calc(var(--u) * 2.2);
  z-index: 3;
  max-width: 94%;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 1.8);
  border: 1px solid rgba(255,255,255,.65);
  color: #fff;
  background: rgba(7,35,55,.75);
  font-family: var(--mono);
  font-size: clamp(7px, calc(var(--u) * 2.6), 11px);
  line-height: 1.2;
  letter-spacing: .03em;
  pointer-events: none;
}
.sticker-shell .postcard-card .postcard-title {
  padding-top: calc(var(--u) * 3.2);
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: calc(var(--u) * 8.1);
}

/* Miniature stickers: restore the collector header (generic is-small hides
   it) and keep portraits, headline and stadium panorama unobstructed. */
.sticker-shell .tactics-card.is-small .collector-top,
.sticker-shell .news-card.is-small .collector-top,
.sticker-shell .postcard-card.is-small .collector-top {
  display: flex;
  min-height: calc(var(--u) * 8);
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  font-size: clamp(6px, calc(var(--u) * 3), 8px);
  letter-spacing: 0;
}
.sticker-shell .tactics-card.is-small .collector-total,
.sticker-shell .news-card.is-small .collector-total,
.sticker-shell .postcard-card.is-small .collector-total { display: none; }
.sticker-shell .tactics-card.is-small .tactics-photo { height: calc(var(--u) * 82); margin-top: calc(var(--u) * 2); }
.sticker-shell .tactics-card.is-small .co-years { display: none; }
.sticker-shell .news-card.is-small .news-photo { height: calc(var(--u) * 87); margin-top: calc(var(--u) * 2); }
.sticker-shell .news-card.is-small .news-title {
  margin: calc(var(--u) * 2) calc(var(--u) * 3.8) 0;
  padding-bottom: calc(var(--u) * 1);
  font-size: calc(var(--u) * 9.7);
}
.sticker-shell .postcard-card.is-small .postcard-photo { height: calc(var(--u) * 88); margin-top: calc(var(--u) * 2); }
.sticker-shell .postcard-card.is-small .postcard-seal { display: none; }
.sticker-shell .postcard-card.is-small .postcard-title { font-size: calc(var(--u) * 9.5); }

/* Collection visual QA: guard against long real names and captions.
   Small stickers are 62-125px wide; do not let titles overlap the rarity
   footer or disappear beyond the edge. Full-size cards retain all text. */
.sticker-shell .face .f-last,
.sticker-shell .face .lg-last,
.sticker-shell .face .co-last,
.sticker-shell .face .mo-title,
.sticker-shell .face .sd-title {
  max-width: 100%;
  min-width: 0;
}
.sticker-shell .face .f-last.f-long,
.sticker-shell .face .lg-last.k-long,
.sticker-shell .face .co-last.k-long {
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.04;
}
.sticker-shell .face.is-small .f-last.f-long,
.sticker-shell .face.is-small .lg-last.k-long,
.sticker-shell .face.is-small .co-last.k-long {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.sticker-shell .news-card.is-small .news-title,
.sticker-shell .postcard-card.is-small .postcard-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
  line-height: 1.1;
}
.sticker-shell .news-card .news-title,
.sticker-shell .postcard-card .postcard-title {
  max-width: calc(100% - var(--u) * 8);
}
.sticker-shell .tactics-card.is-small .co-years,
.sticker-shell .news-card.is-small .mo-text,
.sticker-shell .postcard-card.is-small .sd-text {
  display: none;
}
/* Prevent overly wide transparent squad PNGs from extending beyond the card
   while retaining their original aspect ratio and their transparent pixels. */
.sticker-shell .c-squad .squad-photo .f-img {
  max-width: 115%;
  object-fit: contain;
}
/* The large dialog does not have the miniature two-line limits. */
.sticker-shell .zoom .face .lg-last,
.sticker-shell .zoom .face .co-last,
.sticker-shell .zoom .face .f-last,
.sticker-shell .zoom .face .news-title,
.sticker-shell .zoom .face .postcard-title {
  -webkit-line-clamp: unset;
}

/* Collection visual polish v3: more substantial basic football stickers,
   sourced archive inserts and a mobile-safe expanded sticker dialog. */

/* Squad: jersey-number watermark and quiet season imprint replace empty space.
   Use the same number already printed on the sticker; no new player facts. */
.sticker-shell .face.c-squad .in::after {
  content: attr(data-shirt);
  position: absolute;
  right: calc(var(--u) * 6);
  bottom: calc(var(--u) * 18);
  font-family: var(--display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(var(--u) * 39);
  line-height: 1;
  color: var(--name);
  opacity: .075;
  pointer-events: none;
}
.sticker-shell .c-squad .squad-detail {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(var(--u) * 3);
  margin: calc(var(--u) * 10) calc(var(--u) * 5.8) 0;
  padding-top: calc(var(--u) * 2.1);
  border-top: calc(var(--u) * .45) solid var(--pipoff);
  font-family: var(--mono);
  font-weight: 600;
  font-size: calc(var(--u) * 2.9);
  letter-spacing: .05em;
  line-height: 1.3;
  color: var(--sub);
}
.sticker-shell .c-squad .squad-detail span:last-child { text-align: right; }

/* Chronology: preserve every pixel of the authentic Intertoto document.
   Ordinary historical photographs keep the earlier cover composition. */
.sticker-shell .news-card .news-document {
  background: #e8e2d6;
}
.sticker-shell .news-card .news-document .f-cover {
  object-fit: contain;
  object-position: center center;
  filter: none;
}
.sticker-shell .face.news-card .in {
  background: #f1e9d7;
  color: #292016;
}
.sticker-shell .news-card .news-feature {
  position: relative;
  margin: calc(var(--u) * 7) calc(var(--u) * 4.3) 0;
  padding: calc(var(--u) * 2.5) 0 0;
  border-top: calc(var(--u) * .48) solid rgba(126,91,54,.4);
}
.sticker-shell .news-card .news-feature-label {
  display: block;
  margin-bottom: calc(var(--u) * 2);
  font-family: var(--mono);
  font-weight: 700;
  font-size: calc(var(--u) * 3);
  line-height: 1.2;
  letter-spacing: .07em;
  color: #8a4532;
}
.sticker-shell .news-card .news-feature-text {
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-family: var(--body);
  font-size: calc(var(--u) * 3.5);
  line-height: 1.34;
  color: #574637;
}
.sticker-shell .news-card .mo-text { color: #524637; }
/* The existing short headline/date stays readable at album thumbnail size. */
.sticker-shell .face.is-small.c-squad .squad-detail,
.sticker-shell .face.is-small.c-squad .in::after,
.sticker-shell .face.is-small.news-card .news-feature {
  display: none;
}

/* Expanded sticker: keep metadata and flip control together and visible
   above mobile bottom navigation, including safe-area display cutouts. */
.sticker-shell.zoom {
  gap: 9px;
  padding: calc(56px + env(safe-area-inset-top, 0px)) 12px
    calc(18px + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  cursor: default;
}
.sticker-shell .zoom-card {
  flex: 0 0 auto;
  width: min(88vw, 400px, calc((100vh - 270px) * 5 / 7));
  width: min(88vw, 400px, calc((100dvh - 270px) * 5 / 7));
}
.sticker-shell .zoom-info {
  width: min(88vw, 400px);
  max-width: 100%;
  padding: 9px 13px;
  border-radius: 12px;
  border: 1px solid rgba(184,207,222,.35);
  background: rgba(8,27,42,.96);
  color: #edf2f7;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  cursor: default;
}
.sticker-shell .zoom-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.sticker-shell .zoom-index {
  color: #f2b84b;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.sticker-shell .zoom-name {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.sticker-shell .zoom-attributes {
  color: #b8cad6;
  font-size: 11px;
  margin: 2px 0 0;
}
.sticker-shell .zoom-turn {
  flex: 0 0 auto;
  width: min(88vw, 400px);
  max-width: 100%;
  min-height: 44px;
  border-color: #7894a8;
  background: rgba(8,27,42,.96);
  color: #f4f7fa;
}
.sticker-shell .zoom-close {
  top: calc(12px + env(safe-area-inset-top, 0px));
  right: calc(12px + env(safe-area-inset-right, 0px));
}
@media (max-height: 650px) {
  .sticker-shell.zoom { justify-content: flex-start; }
}

/* Album paperbook v3: each leaf looks like a printed collector's edition.
   CSS-only stationery: no extra photos, external images or animations. */

/* Chapter colors are reused by the page-progress ink, not by rarity frames. */
.sticker-shell .leaf-s-squad { --leaf-accent: #285a78; }
.sticker-shell .leaf-s-legend { --leaf-accent: #916936; }
.sticker-shell .leaf-s-coach { --leaf-accent: #35725c; }
.sticker-shell .leaf-s-moment { --leaf-accent: #994d3a; }
.sticker-shell .leaf-s-stadium { --leaf-accent: #39758b; }
.sticker-shell .leaf-s-author { --leaf-accent: #8367ab; }

/* Book paper, subtly worn near the outer edge. Keep dimensions, pagination
   and the original per-chapter paper color and background texture intact. */
.sticker-shell .leaf:not(.leaf-blank) {
  box-shadow:
    inset 0 0 0 1px rgba(121,98,62,.23),
    inset 0 0 16px rgba(105,82,48,.055),
    0 8px 19px rgba(0,0,0,.33);
}
.sticker-shell .leaf-l:not(.leaf-blank) {
  background-image:
    var(--grain),
    linear-gradient(270deg, rgba(85,65,39,.24), transparent 13%, transparent 90%, rgba(255,255,255,.34));
}
.sticker-shell .leaf-r:not(.leaf-blank) {
  background-image:
    var(--grain),
    linear-gradient(90deg, rgba(85,65,39,.24), transparent 13%, transparent 90%, rgba(255,255,255,.34));
}
.sticker-shell .leaf-one:not(.leaf-blank) {
  background-image:
    var(--grain),
    linear-gradient(90deg, rgba(84,67,43,.12), transparent 9%, transparent 92%, rgba(255,255,255,.3));
}
.sticker-shell .spine {
  position: relative;
  background: linear-gradient(90deg,
    #645642 0%, #87725a 16%, #bba788 32%, #e0ccb0 49%,
    #bba788 66%, #87725a 84%, #645642 100%);
  box-shadow:
    inset 2px 0 3px rgba(39,25,12,.28),
    inset -2px 0 3px rgba(39,25,12,.28),
    0 9px 21px rgba(0,0,0,.35);
}
.sticker-shell .spine::after {
  content: "";
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, rgba(79,59,38,.42) 0 3px, transparent 3px 8px);
  opacity: .48;
  pointer-events: none;
}

/* Printed page heading: section at left, actual completion of THIS leaf at
   right, and a restrained ink line measuring progress on the page. */
.sticker-shell .leaf-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  min-width: 0;
  padding-bottom: 2px;
  border-bottom-color: rgba(94,77,51,.27);
}
.sticker-shell .leaf-head::after {
  content: "";
  position: absolute;
  height: 2px;
  width: var(--leaf-fill, 0%);
  max-width: 100%;
  bottom: -1px;
  left: 0;
  background: var(--leaf-accent, #8a6243);
  pointer-events: none;
}
.sticker-shell .leaf-head .lh-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticker-shell .leaf-head .lh-progress {
  display: inline-block;
  flex: 0 0 auto;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(255,255,255,.52);
  color: var(--leaf-accent, #8a6243);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .025em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A mounted physical sticker has its own thin backing, a little uneven
   printing and a soft cast shadow. Never resize the sticker or its slot:
   the grid/flip layout relies on an exact 5:7 footprint. */
.sticker-shell .leaf-grid .slot.owned {
  position: relative;
  isolation: isolate;
  filter: none;
}
.sticker-shell .leaf-grid .slot.owned::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -3px;
  transform: rotate(-.9deg);
  border: 1px solid rgba(78,62,42,.2);
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(218,204,178,.72));
  box-shadow: 0 2px 4px rgba(56,43,23,.22), 0 5px 9px rgba(56,43,23,.08);
  pointer-events: none;
}
.sticker-shell .leaf-grid .slot.owned .s-tag {
  min-width: 20px;
  padding: 0 5px;
  border: 1px solid rgba(142,124,93,.21);
  border-radius: 8px;
  background: rgba(249,243,229,.96);
  color: #65563f;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(77,58,29,.12);
}

/* An empty space is printed on the page, not a second pretend sticker.
   Corner registration marks are quiet enough to keep number and name clear. */
.sticker-shell .leaf-grid .slot.empty:not(.pickable)::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 2px;
  background:
    linear-gradient(to right, currentColor 9px, transparent 9px) left top / 13px 1px no-repeat,
    linear-gradient(to bottom, currentColor 9px, transparent 9px) left top / 1px 13px no-repeat,
    linear-gradient(to left, currentColor 9px, transparent 9px) right top / 13px 1px no-repeat,
    linear-gradient(to bottom, currentColor 9px, transparent 9px) right top / 1px 13px no-repeat,
    linear-gradient(to right, currentColor 9px, transparent 9px) left bottom / 13px 1px no-repeat,
    linear-gradient(to top, currentColor 9px, transparent 9px) left bottom / 1px 13px no-repeat,
    linear-gradient(to left, currentColor 9px, transparent 9px) right bottom / 13px 1px no-repeat,
    linear-gradient(to top, currentColor 9px, transparent 9px) right bottom / 1px 13px no-repeat;
  opacity: .28;
  pointer-events: none;
}

/* In missing mode, the collected cards stay visible as already mounted,
   but the page's empty printed spaces remain the strongest landmarks. */
.sticker-shell .page.missing-only .leaf-grid .slot.owned { opacity: .38; }
.sticker-shell .page.missing-only .leaf-grid .slot.empty {
  outline-width: 2px;
  outline-color: #b98431;
}

@media (max-width: 699px) {
  .sticker-shell .leaf-head { font-size: 11px; letter-spacing: .035em; }
  .sticker-shell .leaf-head .lh-progress { font-size: 9px; padding: 1px 4px; }
  .sticker-shell .leaf-grid .slot.owned::before { inset: -2px; }
  .sticker-shell .leaf-grid .slot.empty:not(.pickable)::after { inset: 4px; opacity: .22; }
}

/* Collection chapter gallery v4 — actual filled stickers on museum/annual covers.
   The chapter's archive photo still appears in the original feature block. */
.sticker-shell .leaf-intro .intro-in {
  position: relative;
  isolation: isolate;
  gap: clamp(6px, 1.2vw, 11px);
}
.sticker-shell .leaf-intro .intro-watermark {
  position: absolute;
  z-index: -1;
  right: 4%;
  top: 31%;
  font: italic 900 clamp(90px, 14vw, 190px)/.8 var(--numeral);
  letter-spacing: -.08em;
  color: var(--leaf-accent, #916936);
  opacity: .075;
  pointer-events: none;
  user-select: none;
}
.sticker-shell .leaf-intro .intro-range {
  padding-bottom: 7px;
}
.sticker-shell .intro-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.sticker-shell .intro-stat {
  min-width: 0;
  padding: clamp(6px, 1.1vw, 11px);
  border: 1px solid rgba(91,76,53,.21);
  border-radius: 4px;
  background: rgba(255,255,255,.32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.sticker-shell .intro-stat b {
  color: var(--leaf-accent, #654c30);
  font-family: var(--numeral);
  font-size: clamp(22px, 3vw, 33px);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.sticker-shell .intro-stat em {
  font: normal 600 .48em var(--mono);
  letter-spacing: -.04em;
}
.sticker-shell .intro-stat span {
  color: #655d50;
  font: 600 clamp(9px, 1vw, 11px)/1.25 var(--mono);
}
.sticker-shell .intro-showcase {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
  min-height: 0;
}
.sticker-shell .intro-mini {
  min-width: 0;
  min-height: 72px;
  padding: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(91,76,53,.21);
  border-radius: 5px;
  background: rgba(255,250,237,.62);
  box-shadow: 0 2px 4px rgba(66,49,30,.055);
}
.sticker-shell .intro-mini.is-empty {
  background: rgba(255,255,255,.16);
  border-style: dashed;
  opacity: .83;
}
.sticker-shell .intro-mini-image {
  flex: 0 0 clamp(37px, 6vw, 55px);
  width: clamp(37px, 6vw, 55px);
  aspect-ratio: 5/7;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 3px;
  background: #d5c7aa;
  color: #907b58;
  font: italic 900 22px var(--numeral);
}
.sticker-shell .intro-mini.is-empty .intro-mini-image {
  background: rgba(155,140,112,.12);
}
.sticker-shell .intro-mini-image img {
  display: block;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center 20%;
}
.sticker-shell .leaf-s-squad .intro-mini-image img {
  object-fit: contain;
  object-position: center bottom;
}
.sticker-shell .intro-mini-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sticker-shell .intro-mini-text small,
.sticker-shell .intro-mini-text span {
  color: #726654;
  font: 500 9px/1.2 var(--mono);
}
.sticker-shell .intro-mini-text b {
  color: #213447;
  font: 700 clamp(10px, 1.3vw, 13px)/1.15 var(--display);
  overflow-wrap: anywhere;
}
.sticker-shell .leaf-intro .intro-feature {
  flex: 0 0 auto;
  gap: 10px;
  margin-top: auto;
  border-top: 1px solid rgba(89,70,42,.15);
  padding-top: 7px;
}
.sticker-shell .leaf-intro .if-photo {
  width: clamp(53px, 7vw, 78px);
}
@media (max-width: 699px) {
  .sticker-shell .leaf-intro .intro-in { gap: 7px; }
  .sticker-shell .leaf-intro .intro-watermark { font-size: clamp(78px, 25vw, 132px); }
  .sticker-shell .intro-stat { padding: 6px; }
  .sticker-shell .intro-stat b { font-size: 22px; }
  .sticker-shell .intro-mini { min-height: 55px; padding: 3px; gap: 5px; }
  .sticker-shell .intro-mini-image { flex-basis: 34px; width: 34px; }
  .sticker-shell .intro-mini-text span { display: none; }
  .sticker-shell .leaf-intro .if-photo { width: 52px; }
}
@media (max-width: 699px) and (max-height: 680px) {
  .sticker-shell .leaf-intro .intro-showcase { display: none; }
}

/* Interactive paper page map. Positioned above navigation: it does not
   resize the album, so opening the map cannot repaginate its own entries. */
.sticker-shell .book-nav { position: relative; flex-wrap: wrap; }
.sticker-shell .book-map-toggle {
  padding: 6px 12px;
  min-height: 36px;
  border: 1px solid rgba(175,196,214,.35);
  border-radius: 18px;
  color: var(--ink);
  font-family: var(--display);
  font-size: 13px;
  cursor: pointer;
}
.sticker-shell .book-map-toggle[aria-expanded="true"] {
  border-color: var(--amber);
  color: var(--amber);
}
.sticker-shell .book-map-panel {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 40;
  transform: translateX(-50%);
  width: min(460px, 94vw);
  max-height: min(430px, 60dvh);
  overflow: auto;
  padding: 14px;
  box-sizing: border-box;
  border: 1px solid rgba(242,184,75,.46);
  border-radius: 15px;
  background: #101f2b;
  box-shadow: 0 16px 46px rgba(0,0,0,.64);
  color: #f2eee4;
  text-align: left;
}
.sticker-shell .book-map-panel[hidden] { display: none; }
.sticker-shell .book-map-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  justify-content: space-between;
  margin-bottom: 12px;
}
.sticker-shell .book-map-head strong {
  font: 700 15px var(--display);
}
.sticker-shell .book-map-filters { display: flex; flex-wrap: wrap; gap: 4px; }
.sticker-shell .book-map-filters button {
  padding: 6px 8px;
  border: 1px solid #456173;
  border-radius: 8px;
  font: 600 11px var(--mono);
  color: #d8e1e6;
  background: transparent;
  cursor: pointer;
}
.sticker-shell .book-map-filters button[aria-pressed="true"] {
  background: #f2b84b;
  border-color: #f2b84b;
  color: #172335;
}
.sticker-shell .book-map-pages {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 8px;
}
.sticker-shell .book-map-page {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  gap: 4px;
  padding: 5px;
  border: 1px solid rgba(177,157,123,.8);
  border-radius: 4px 9px 9px 4px;
  background: #e5dece;
  color: #243547;
  text-align: left;
  cursor: pointer;
  box-shadow: inset 3px 0 3px rgba(80,62,44,.08);
}
.sticker-shell .book-map-page.is-cover { background: #c6d0d0; }
.sticker-shell .book-map-page.is-complete { border-color: #b27b25; }
.sticker-shell .book-map-page.is-active {
  outline: 3px solid #f2b84b;
  outline-offset: 2px;
}
.sticker-shell .book-map-page small,
.sticker-shell .book-map-page-caption {
  display: block;
  font: 700 10px/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
}
.sticker-shell .book-map-page-ink {
  height: 3px;
  width: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #8d6227 0 var(--map-fill, 0%), rgba(90,77,60,.18) var(--map-fill, 0%) 100%);
}
.sticker-shell .book-map-page-caption { text-align: right; color: #645340; }
.sticker-shell .book-map-empty {
  margin: 0;
  padding: 12px 4px;
  color: #bbcad5;
  line-height: 1.5;
  font-size: 13px;
}
.sticker-shell .book-map-panel button:focus-visible {
  outline: 2px solid #f2b84b;
  outline-offset: 2px;
}
@media (max-width: 699px) {
  .sticker-shell .book-nav { gap: 6px; }
  .sticker-shell .book-map-toggle { padding: 6px 9px; font-size: 12px; }
  .sticker-shell .book-map-panel { padding: 11px; max-height: min(370px, 50dvh); }
}

/* Ink completion seals appear only when all real stickers on this leaf or
   chapter exist in state.col. No extra currency or achievement is created. */
.sticker-shell .leaf-finished-seal {
  position: absolute;
  z-index: 2;
  right: 13px;
  bottom: 19px;
  width: 72px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 4px;
  box-sizing: border-box;
  border: 2px double rgba(117,81,30,.8);
  border-radius: 50%;
  transform: rotate(-13deg);
  background: rgba(250,244,221,.83);
  color: #84602e;
  font: 700 9px/1.12 var(--mono);
  text-align: center;
  letter-spacing: .025em;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.sticker-shell .leaf-s-squad .leaf-finished-seal { color: #295a78; border-color: #295a78; }
.sticker-shell .leaf-s-coach .leaf-finished-seal { color: #35725c; border-color: #35725c; }
.sticker-shell .intro-chapter-seal {
  position: absolute;
  top: 38%;
  right: clamp(3px, 4%, 18px);
  z-index: 3;
  width: clamp(74px, 11vw, 105px);
  height: clamp(74px, 11vw, 105px);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 11px;
  border: 5px double #b48733;
  border-radius: 50%;
  background: rgba(248,232,191,.76);
  color: #78551f;
  font: 800 clamp(9px, 1.2vw, 12px)/1.2 var(--mono);
  letter-spacing: .02em;
  text-align: center;
  transform: rotate(-12deg);
  box-shadow: inset 0 0 0 3px rgba(255,251,238,.8), 0 2px 8px rgba(55,38,18,.13);
  pointer-events: none;
}
.sticker-shell .album-complete-seal {
  width: fit-content;
  margin: 6px auto;
  padding: 6px 15px;
  border: 2px double #f2b84b;
  border-radius: 30px;
  color: #f2b84b;
  background: rgba(250,212,112,.085);
  font: 800 12px var(--mono);
  letter-spacing: .06em;
}
.sticker-shell .album-complete-seal[hidden] { display: none; }
@media (max-width: 699px) {
  .sticker-shell .leaf-finished-seal {
    width: 55px;
    height: 29px;
    font-size: 7px;
    right: 6px;
    bottom: 13px;
    opacity: .8;
  }
  .sticker-shell .intro-chapter-seal {
    width: 70px;
    height: 70px;
    top: 43%;
    font-size: 9px;
    opacity: .88;
  }
}

/* Pack opening v4: a single tactile gleam for actual rare/epic/gold results.
   No permanent pulsing, no gambling-style suspense, fully skipped in calm mode. */
.sticker-shell .st-card .pack-reveal-glint {
  position: absolute;
  inset: 1px;
  z-index: 3;
  border-radius: 9px;
  background: linear-gradient(98deg,
    transparent 26%, var(--reveal-glint, rgba(255,255,255,.3)) 48%, transparent 72%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}
.sticker-shell .st-card .glint-r1 { --reveal-glint: rgba(196,227,248,.75); }
.sticker-shell .st-card .glint-r2 { --reveal-glint: rgba(250,195,101,.78); }
.sticker-shell .st-card .glint-r3 { --reveal-glint: rgba(255,236,158,.88); }
.sticker-shell .st-card.reveal-dup .st-badge.dup { border: 1px solid rgba(184,201,216,.45); }
.sticker-shell .st-card.reveal-new .st-badge.new,
.sticker-shell .st-card.reveal-up .st-badge.up {
  box-shadow: 0 2px 9px rgba(0,0,0,.25);
}
.sticker-shell.is-calm .pack-reveal-glint { display: none; }
@media (prefers-reduced-motion: reduce) {
  .sticker-shell .pack-reveal-glint { display: none; }
}

/* A shareable image is produced locally on demand; these controls never
   alter collection progress or send any data without a user-initiated share. */
.sticker-shell .zoom-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: min(88vw, 400px);
  max-width: 100%;
}
.sticker-shell .zoom-actions .zoom-turn {
  grid-column: 1 / -1;
  width: 100%;
}
.sticker-shell .zoom-actions .zoom-share,
.sticker-shell .zoom-actions .zoom-save {
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #587b90;
  border-radius: 24px;
  background: rgba(8,27,42,.96);
  color: #f2eee5;
  font: 700 13px var(--display);
  cursor: pointer;
}
.sticker-shell .zoom-actions .zoom-share {
  border-color: #f2b84b;
  color: #f2c46d;
}
.sticker-shell .zoom-actions button:disabled { opacity: .65; cursor: wait; }
.sticker-shell .intro-share {
  flex: 0 0 auto;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 0 auto;
  padding: 7px 13px;
  border: 1px solid #a47935;
  border-radius: 18px;
  background: rgba(248,231,187,.9);
  color: #654717;
  font: 700 11px/1.2 var(--mono);
  cursor: pointer;
}
.sticker-shell .intro-share:hover { background: #fff1cb; }
.sticker-shell .intro-share:focus-visible,
.sticker-shell .zoom-actions button:focus-visible {
  outline: 2px solid #f2b84b;
  outline-offset: 3px;
}
@media (max-width: 699px) {
  .sticker-shell .zoom-card {
    width: min(88vw, 400px, calc((100dvh - 315px) * 5 / 7));
  }
  .sticker-shell .zoom-actions { gap: 6px; }
  .sticker-shell .intro-share { padding: 6px 9px; font-size: 10px; }
}

/* Collection refresh — editorial magazine spreads with readable 5:7 stickers.
   The right-hand leaf always shows up to six authentic collected/empty slots. */
.sticker-shell .page { min-width: 0; }
.sticker-shell .leaf-intro .intro-in {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(90,70,40,.28) transparent;
  padding-bottom: 8px;
}
.sticker-shell .intro-editorial-note {
  flex: 0 0 auto;
  padding: 10px 13px;
  background: rgba(39,82,109,.07);
  border-left: 3px solid var(--leaf-accent, #916936);
  border-radius: 0 5px 5px 0;
  color: #32455a;
}
.sticker-shell .intro-editorial-note small {
  display: block;
  color: var(--leaf-accent, #916936);
  font: 700 9px/1.4 var(--mono);
  letter-spacing: .12em;
  margin-bottom: 4px;
}
.sticker-shell .intro-editorial-note p {
  font: 400 clamp(11px, 1.1vw, 13px)/1.45 var(--body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.sticker-shell .intro-showcase,
.sticker-shell .leaf-intro .intro-feature,
.sticker-shell .intro-stats { flex-shrink: 0; }

/* Every subsequent left leaf accompanies the six stickers on the right.
   Photographs are original catalogue assets, and only shown when collected. */
.sticker-shell .leaf-editorial {
  overflow: hidden;
  color: #162a3d;
  text-align: left;
}
.sticker-shell .ed-in {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  gap: clamp(7px, 1.1vw, 12px);
  padding: clamp(7px, 1.7vw, 18px) clamp(6px, 1.7vw, 18px) 8px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(90,70,40,.28) transparent;
  overscroll-behavior: contain;
}
.sticker-shell .ed-watermark {
  position: absolute;
  right: 2%;
  top: 17%;
  color: var(--leaf-accent, #916936);
  font: italic 900 clamp(72px, 12vw, 140px)/.8 var(--numeral);
  opacity: .07;
  user-select: none;
  pointer-events: none;
}
.sticker-shell .ed-kicker {
  position: relative;
  color: var(--leaf-accent, #916936);
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .15em;
}
.sticker-shell .leaf-editorial h3 {
  position: relative;
  margin: 0;
  color: #182e40;
  font: 700 clamp(25px, 3.25vw, 37px)/1.09 "Playfair Display", Georgia, serif;
  overflow-wrap: anywhere;
}
.sticker-shell .ed-deck {
  position: relative;
  max-width: 46ch;
  color: #50606a;
  font: 400 clamp(12px, 1.18vw, 14px)/1.48 var(--body);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sticker-shell .ed-feature {
  position: relative;
  display: grid;
  grid-template-columns: minmax(100px, 42%) minmax(0, 1fr);
  align-items: center;
  gap: clamp(10px, 1.5vw, 18px);
  padding: clamp(8px, 1.3vw, 14px);
  background: rgba(255,255,255,.3);
  border: 1px solid rgba(91,76,53,.2);
  border-radius: 7px;
}
.sticker-shell .ed-portrait {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  max-height: 210px;
  border: 5px solid #e6ded0;
  box-shadow: 0 5px 16px rgba(70,54,35,.18);
  background: #cfd8da;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sticker-shell .ed-portrait .editorial-photo {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 19%;
  z-index: 1;
}
.sticker-shell .leaf-s-squad .ed-portrait .editorial-photo {
  object-fit: contain;
  object-position: center bottom;
}
.sticker-shell .ed-portrait > .s-sil {
  width: 58%;
  max-width: 100px;
  opacity: .18;
  fill: #31516a;
}
.sticker-shell .ed-portrait-num {
  position: absolute;
  z-index: 2;
  bottom: 2px;
  right: 7px;
  font: italic 900 clamp(26px, 3.8vw, 44px) var(--numeral);
  color: rgba(25,53,74,.45);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
}
.sticker-shell .ed-feature-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sticker-shell .ed-feature-copy small {
  color: var(--leaf-accent, #916936);
  font: 700 9px/1.3 var(--mono);
  letter-spacing: .12em;
}
.sticker-shell .ed-feature-copy strong {
  color: #183146;
  font: 700 clamp(18px, 2.2vw, 25px)/1.1 var(--display);
  overflow-wrap: anywhere;
}
.sticker-shell .ed-feature-copy span {
  color: #56616b;
  font: 400 clamp(11px, 1vw, 13px)/1.4 var(--body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.sticker-shell .ed-register {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(89,70,42,.22);
}
.sticker-shell .ed-register span {
  color: #6a5e4e;
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .04em;
}
.sticker-shell .ed-register strong {
  color: var(--leaf-accent, #916936);
  white-space: nowrap;
  font: 700 14px var(--mono);
}
.sticker-shell .ed-index {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 12px;
  list-style: none;
}
.sticker-shell .ed-index li {
  display: flex;
  min-width: 0;
  gap: 6px;
  border-bottom: 1px solid rgba(91,76,53,.12);
  padding: 4px 0;
  color: #847b6d;
  font: 500 11px/1.3 var(--display);
  text-transform: uppercase;
}
.sticker-shell .ed-index li.is-owned { color: #1c4d62; }
.sticker-shell .ed-index b { color: var(--leaf-accent, #916936); }
.sticker-shell .ed-index span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticker-shell .ed-progress {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-top: auto;
  padding-top: 7px;
  border-top: 2px solid rgba(89,70,42,.18);
  color: #6a5e4e;
  font: 600 10px/1.3 var(--mono);
}
.sticker-shell .ed-progress b { color: var(--leaf-accent, #916936); font-size: 13px; }

/* Visually distinct paper for companion pages in the interactive map. */
.sticker-shell .book-map-page.is-editorial { background: #e8e0cb; border-left: 4px solid #b7a078; }

/* No second-column overflow on narrow laptops and landscape tablets. */
@media (min-width: 700px) and (max-width: 899px) {
  .sticker-shell .sticker-app { max-width: 760px; padding-inline: 20px; }
  .sticker-shell .pack-layout { min-width: 0; }
  .sticker-shell .pack-col { min-width: 0; }
}
@media (min-width: 900px) and (max-width: 1179px) {
  .sticker-shell .sticker-app[data-view="packView"] {
    height: auto;
    min-height: calc(100svh - var(--header-h, 77px));
    max-height: none;
  }
  .sticker-shell .pack-layout {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 8px;
  }
  .sticker-shell .pack-layout::before { inset: -4px 0 0; }
  .sticker-shell .hero-book {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns: minmax(0, 1fr) 145px;
    grid-template-rows: auto auto auto;
    padding: 16px 12px 0;
    align-items: center;
    gap: 12px 20px;
    min-width: 0;
  }
  .sticker-shell .hero-head {
    grid-column: 1;
    grid-row: 1;
    gap: 8px;
    min-width: 0;
  }
  .sticker-shell .hero-title { font-size: clamp(34px, 4.5vw, 48px); }
  .sticker-shell .hero-lead { max-width: 46ch; font-size: 13px; }
  .sticker-shell .book-3d {
    position: relative;
    grid-column: 2;
    grid-row: 1 / 3;
    top: auto;
    left: auto;
    width: 132px;
    justify-self: center;
    transform: rotate(-7deg);
  }
  .sticker-shell .hero-meta {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    order: unset;
  }
  .sticker-shell .hero-stats {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
    grid-template-columns: repeat(4, minmax(0,1fr));
    min-width: 0;
  }
  .sticker-shell .hero-stats > div { border-top: 0 !important; border-left: 1px solid var(--line); }
  .sticker-shell .hero-stats > div:first-child { border-left: 0; }
  .sticker-shell .pack-col { min-width: 0; flex: 0 0 auto; min-height: 360px; }
  .sticker-shell .stage { min-height: 300px; }
  .sticker-shell .stage-foot { min-height: 0; padding-bottom: 14px; }
}
@media (max-width: 699px) {
  .sticker-shell .intro-editorial-note { padding: 8px 10px; }
  .sticker-shell .intro-editorial-note p { font-size: 11px; -webkit-line-clamp: 2; }
  .sticker-shell .missing-bar {
    margin: 5px 0 7px;
    gap: 4px;
  }
  .sticker-shell .missing-bar .missing-toggle { font-size: 11px; padding-inline: 9px; }
  .sticker-shell .missing-bar .missing-prev,
  .sticker-shell .missing-bar .missing-next { width: 36px; min-height: 36px; padding: 0; }
  .sticker-shell .missing-count { font-size: 10px; }
}

/* A used foil envelope replaces the dashed empty rectangle between
   releases. This is purely decorative; timers and quota remain real. */
.sticker-shell .spent-scene {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 210px;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3.2vw, 34px);
  padding: 8px;
}
.sticker-shell .spent-pack {
  flex: 0 0 auto;
  position: relative;
  width: clamp(145px, var(--pw, 220px), 235px);
  aspect-ratio: 5/7.4;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  padding: 19% 7% 10%;
  gap: 5%;
  border: 1px solid #52758a;
  border-radius: 3px 3px 10px 10px;
  background:
    linear-gradient(115deg, transparent 26%, rgba(190,225,237,.22) 43%, transparent 60%),
    repeating-linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.045) 18% 24%),
    linear-gradient(160deg, #2b6482 0%, #0f2c44 49%, #071522 100%);
  color: #f7f0df;
  box-shadow: 12px 12px 0 -9px #b8b0a0, 19px 17px 0 -14px #f1e7d5,
    0 24px 35px rgba(0,0,0,.48);
  transform: rotate(-7deg);
}
.sticker-shell .spent-pack::after {
  content: "";
  position: absolute;
  height: 4%;
  bottom: 0;
  inset-inline: 0;
  opacity: .7;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.32) 0 2px, #163d56 2px 5px);
}
.sticker-shell .spent-tear {
  position: absolute;
  z-index: 1;
  inset: 0 0 auto;
  height: 13%;
  background: #07121c;
  clip-path: polygon(0 0, 100% 0, 100% 27%, 90% 44%, 80% 30%, 70% 55%, 60% 42%, 48% 60%, 37% 32%, 23% 53%, 12% 33%, 0 52%);
}
.sticker-shell .spent-edition {
  font: 600 clamp(8px, 1.1vw, 10px)/1.2 var(--mono);
  color: #f2b84b;
  letter-spacing: .13em;
  text-align: center;
}
.sticker-shell .spent-seal {
  display: grid;
  place-items: center;
  width: 42%;
  aspect-ratio: 1;
  border: 5px solid #bd9042;
  border-radius: 50%;
  color: #1b1207;
  background: #f2b84b;
  font: 800 clamp(18px, 2.6vw, 27px) var(--display);
  transform: rotate(6deg);
}
.sticker-shell .spent-pack strong {
  font: 700 clamp(16px, 2.2vw, 24px)/1.05 var(--display);
  text-align: center;
}
.sticker-shell .spent-season {
  font: 500 10px/1.3 var(--mono);
  letter-spacing: .14em;
  color: #b5cbd8;
}
.sticker-shell .spent-stamp {
  display: block;
  padding: 6px 12px;
  border: 2px double #f2b84b;
  color: #f4c365;
  font: 700 clamp(12px, 1.8vw, 18px) var(--display);
  letter-spacing: .16em;
  transform: rotate(-10deg);
}
.sticker-shell .spent-waves {
  margin-top: auto;
  color: rgba(192,217,231,.45);
  font-size: 20px;
  letter-spacing: .2em;
}
.sticker-shell .spent-schedule {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  color: #d7e7ed;
}
.sticker-shell .spent-kicker {
  color: #f2b84b;
  font: 700 10px/1.4 var(--mono);
  letter-spacing: .15em;
}
.sticker-shell .spent-title {
  color: #f4f7fa;
  font: 700 clamp(22px, 3.4vw, 38px)/1.05 var(--display);
}
.sticker-shell .spent-next {
  color: #9bb7ca;
  font: 500 12px/1.4 var(--mono);
}
.sticker-shell .spent-clock {
  font: 700 clamp(28px, 4vw, 48px)/1 var(--display);
  color: #f4f7fa;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sticker-shell .spent-schedule small {
  color: #96afc1;
  font: 500 10px/1.3 var(--mono);
}
.sticker-shell .sticker-app[data-phase="sealed"] .stage::before {
  content: "";
  position: absolute;
  inset: 7% 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(37,103,137,.18), transparent 67%);
  pointer-events: none;
}
.sticker-shell .missing-bar .missing-toggle {
  transition: border-color .15s, background-color .15s;
}
.sticker-shell .missing-bar .missing-toggle[aria-pressed="true"] {
  background: rgba(242,184,75,.13);
}
.sticker-shell .zoom .why-series {
  color: #786b56;
  font: 600 11px/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.sticker-shell .zoom .why-fact {
  padding: 11px 12px;
  border-left: 3px solid #b57a25;
  background: #e9dfc9;
  color: #294254;
  font: 500 13px/1.45 var(--body);
}
@media (max-width: 699px) {
  .sticker-shell .spent-scene { gap: 10px; padding: 2px; }
  .sticker-shell .spent-pack { width: clamp(115px, 36vw, 160px); }
  .sticker-shell .spent-edition { font-size: 7px; letter-spacing: .03em; }
  .sticker-shell .spent-seal { border-width: 3px; font-size: 17px; }
  .sticker-shell .spent-pack strong { font-size: 14px; }
  .sticker-shell .spent-season { font-size: 8px; }
  .sticker-shell .spent-stamp { padding: 4px 6px; font-size: 10px; }
  .sticker-shell .spent-title { font-size: 22px; }
  .sticker-shell .spent-clock { font-size: clamp(22px, 6vw, 30px); }
  .sticker-shell .spent-kicker, .sticker-shell .spent-schedule small { font-size: 9px; }
  .sticker-shell .spent-next { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .sticker-shell .missing-bar .missing-toggle { transition: none; }
}


/* Laptop ergonomics: use the REAL document offset of the collection instead
   of assuming that the sticky header (and matchday strip) is always 77px.
   Keeping the full book within the available viewport makes page turns and
   the bottom actions reachable without page-level vertical scrolling. */
@media (min-width: 700px) {
  .sticker-shell .sticker-app {
    height: calc(100vh - var(--app-top, var(--header-h, 77px)));
    height: calc(100svh - var(--app-top, var(--header-h, 77px)));
    scroll-margin-top: var(--sticky-top, var(--header-h, 77px));
  }
}

/* At laptop heights the six stickers remain on a real two-page spread; only
   nonessential whitespace, empty-tray chrome and editorial density shrink. */
@media (min-width: 900px) and (max-height: 980px) {
  .sticker-shell .app-bar { padding-block: 9px 5px; }
  .sticker-shell .sticker-app[data-view="albumView"] .st-brand {
    font-size: 28px;
    line-height: 1;
  }
  .sticker-shell .sticker-app[data-view="albumView"] .st-brand small {
    margin-top: 2px;
    font-size: 9px;
  }
  .sticker-shell .progress { padding-block: 0 5px; gap: 3px; }
  .sticker-shell .progress-row { font-size: 11px; }
  .sticker-shell .progress-row b { font-size: 17px; }
  .sticker-shell .track { height: 4px; }
  .sticker-shell .cat-hint { margin-top: 2px; }
  .sticker-shell .tab { min-height: 32px; padding: 0 10px; }
  .sticker-shell .missing-bar {
    gap: 5px;
    margin: 4px 0 6px;
  }
  .sticker-shell .missing-bar button {
    min-height: 32px;
    padding: 4px 10px;
    font-size: 12px;
  }
  .sticker-shell .book-nav { gap: 10px; padding-top: 5px; }
  .sticker-shell .book-btn { min-height: 36px; min-width: 40px; padding-inline: 9px; }
  .sticker-shell .book-map-toggle { min-height: 34px; padding: 5px 10px; }
  .sticker-shell .tray { padding-block: 6px 5px; gap: 5px; }
  .sticker-shell .tray.is-empty {
    flex: 0 0 auto;
    padding-block: 4px 0;
  }
  .sticker-shell .tray.is-empty .tray-empty {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px 14px;
  }
  .sticker-shell .tray.is-empty .tray-empty .hint {
    max-width: none;
    font-size: 11px;
    line-height: 1.35;
  }
  .sticker-shell .tray.is-empty .tray-empty button {
    min-height: 34px;
    padding: 5px 15px;
    font-size: 13px;
  }
  .sticker-shell .tray-row { min-height: 0; gap: 10px; }
  .sticker-shell .st-sticker { width: 88px; }

  /* Printed cover: preserve the title, two genuine stickers and original
     feature photograph. Only the duplicate long archival excerpt is folded
     away on a short desktop window; it remains on larger screens. */
  .sticker-shell .leaf-intro .intro-in {
    gap: 5px;
    padding: 5px 10px 0;
  }
  .sticker-shell .leaf-intro h3 { font-size: clamp(23px, 2.45vw, 31px); }
  .sticker-shell .intro-lead { font-size: 12px; line-height: 1.4; }
  .sticker-shell .intro-editorial-note { display: none; }
  .sticker-shell .intro-range { padding-bottom: 4px; font-size: 10px; }
  .sticker-shell .intro-stats { gap: 5px; }
  .sticker-shell .intro-stat { gap: 0; padding: 5px 8px; }
  .sticker-shell .intro-stat b { font-size: 23px; }
  .sticker-shell .intro-stat span { font-size: 9px; }
  .sticker-shell .intro-showcase { gap: 5px; }
  .sticker-shell .intro-mini { min-height: 52px; padding: 3px; gap: 6px; }
  .sticker-shell .intro-mini-image { flex-basis: 33px; width: 33px; }
  .sticker-shell .intro-mini-text b { font-size: 11px; }
  .sticker-shell .intro-mini-text span { display: none; }
  .sticker-shell .leaf-intro .intro-feature {
    margin-top: auto;
    gap: 8px;
    padding-top: 4px;
  }
  .sticker-shell .leaf-intro .if-photo { width: 50px; }
  .sticker-shell .if-text b { font-size: 15px; }
  .sticker-shell .if-text span {
    font-size: 11px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
  .sticker-shell .ed-in { gap: 6px; padding: 6px 10px 3px; }
  .sticker-shell .leaf-editorial h3 { font-size: clamp(22px, 2.5vw, 30px); }
  .sticker-shell .ed-deck { font-size: 12px; -webkit-line-clamp: 3; }
  .sticker-shell .ed-feature {
    grid-template-columns: minmax(85px, 34%) minmax(0, 1fr);
    gap: 9px;
    padding: 7px;
  }
  .sticker-shell .ed-portrait { max-height: 154px; }
  .sticker-shell .ed-feature-copy strong { font-size: 19px; }
  .sticker-shell .ed-feature-copy span { -webkit-line-clamp: 2; }
  .sticker-shell .ed-index { gap: 2px 9px; }
  .sticker-shell .ed-index li { padding: 2px 0; }

  /* Main cover view: less vertical air, without disturbing the larger card. */
  .sticker-shell .sticker-app[data-view="packView"] .hero-book {
    gap: 10px;
    padding-bottom: 4px;
  }
  .sticker-shell .hero-head { gap: 9px; }
  .sticker-shell .hero-title { font-size: clamp(39px, 3.9vw, 53px); }
  .sticker-shell .hero-lead { font-size: 13px; line-height: 1.42; }
  .sticker-shell .hero-meta { gap: 7px 10px; }
  .sticker-shell .hero-stats > div { padding-block: 4px; }
  .sticker-shell .stage-foot { min-height: 0; gap: 5px; padding-block: 5px 6px; }
}

/* A spent packet and the book cover are two independent focal elements.
   Hide the redundant background book ONLY while the used foil is shown;
   «Листать альбом» and the main nav remain fully operable. */
@media (min-width: 900px) {
  .sticker-shell .sticker-app[data-phase="empty"] .book-3d {
    visibility: hidden;
    pointer-events: none;
  }
}

/* Absolute foil typography preserves the 'unsealed' stamp at every height:
   the previous flex layout pushed it below the packet's clipped bottom. */
.sticker-shell .spent-pack { display: block; padding: 0; }
.sticker-shell .spent-edition {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 20%;
}
.sticker-shell .spent-seal {
  position: absolute;
  left: 50%;
  top: 31%;
  width: 42%;
  transform: translateX(-50%) rotate(6deg);
}
.sticker-shell .spent-pack strong {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 55%;
  line-height: 1.05;
}
.sticker-shell .spent-season {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 74%;
  text-align: center;
}
.sticker-shell .spent-stamp {
  position: absolute;
  left: 50%;
  top: 80%;
  max-width: 92%;
  white-space: nowrap;
  transform: translateX(-50%) rotate(-8deg);
}
.sticker-shell .spent-waves { display: none; }

/* The book must not become unusably small if a window is extremely short.
   At this point the reader can scroll normally; we never cover controls. */
@media (min-width: 900px) and (max-height: 720px) {
  .sticker-shell .sticker-app {
    min-height: 650px;
    height: auto;
  }
  .sticker-shell .sticker-app[data-view="albumView"] .page { flex: 1 0 380px; }
}

/* Keep the pack allowance above decorative shadows, never underneath them. */
.sticker-shell .stage-foot{position:relative;z-index:4}
.sticker-shell .limit{position:relative;z-index:1;color:var(--ink);padding:6px 12px;border-radius:6px;background:var(--panel,#101e2d);margin-top:8px}