/* =====================================================================
   COMIC / ПОП-АРТ — єдине джерело правди для теми
   Підключається перед будь-яким локальним <style> блоком.
   Усі ігри читають токени звідси.
   ===================================================================== */

/* ============== ТОКЕНИ ============== */
:root {
  /* чорнило + сторінка */
  --ink:        #111111;
  --page:       #FFE600;
  --page-dots:  rgba(0,0,0,0.09);
  --surface:    #FFFFFF;

  /* акценти (циклічні, для активних плиток ігор та ін.) */
  --accent-red:    #FF3B30;
  --accent-blue:   #4FA9FF;
  --accent-green:  #2BD96A;
  --accent-pink:   #FF5CA8;
  --accent-purple: #7C5CFF;
  --accent-teal:   #0D9488;
  --accent-orange: #F97316;

  /* головна дія = червоний */
  --accent: var(--accent-red);

  /* заблоковані ігри */
  --locked-fill: #E4E4E4;
  --locked-ink:  #8A8A8A;

  /* темна панель для екранів усередині гри */
  --game-bg:      #161616;
  --game-surface: #1E1E1E;
  --game-text:    #F5F5F5;
  --game-muted:   #9B9B9B;
  --line-dark:    #FFFFFF;

  /* семантика */
  --success: #2BD96A;
  --danger:  #FF3B30;
  --warn:    #FFB020;

  /* шрифти (обидва з кирилицею) */
  --font-display: 'Russo One', 'Rubik', system-ui, sans-serif;
  --font-body:    'Inter', 'Manrope', 'Onest', system-ui, sans-serif;

  /* форма */
  --r:        10px;
  --r-sm:     8px;
  --bw:       3px;
  --bw-sm:    2.5px;
  --shadow-comic:    4px 4px 0 var(--ink);
  --shadow-comic-sm: 2px 2px 0 var(--ink);
}

/* темна сторінка (опція-перемикач) — токени застосовуються на html (а не на body),
   щоб iOS Safari підхопив правильний фон під адресним рядком */
html.theme-dark,
body.theme-dark {
  --page:      #141414;
  --page-dots: rgba(255,255,255,0.06);
  /* контури на сторінці — білі */
  --ink:       #FFFFFF;
}
/* але всередині світлих карток ink лишається чорним */
html.theme-dark .comic-card,
html.theme-dark .tile,
html.theme-dark .comic-input,
html.theme-dark .comic-stepper-btn,
html.theme-dark .room-code-ticket,
html.theme-dark .card,
html.theme-dark .word-card,
html.theme-dark .watching-card,
html.theme-dark .perf-word,
html.theme-dark .perf-info-card,
html.theme-dark .team-col,
html.theme-dark .score-card,
html.theme-dark .stat,
html.theme-dark .review-list,
html.theme-dark .player-row,
html.theme-dark .turn-box,
html.theme-dark .input,
html.theme-dark .room-code-big,
html.theme-dark .vote-cat-btn,
html.theme-dark .result-time-card,
html.theme-dark .belyash-speech,
html.theme-dark .blitz-info-bar,
html.theme-dark .blind-leaderboard,
html.theme-dark .blind-messages,
html.theme-dark .blind-input,
html.theme-dark .blind-skip-btn,
html.theme-dark .blind-round-result,
html.theme-dark .belyash-mod-card,
html.theme-dark .reveal-word,
html.theme-dark .delta-card,
html.theme-dark .history-list,
html.theme-dark .history-item,
html.theme-dark .guess-list,
html.theme-dark .guess-item,
html.theme-dark .guess-input,
html.theme-dark .confirm-word-btn,
html.theme-dark .notes-free,
html.theme-dark .select-input,
html.theme-dark .unassigned-player,
html.theme-dark .nb,
html.theme-dark .mode-btn,
html.theme-dark .preset-btn,
html.theme-dark .mult-btn,
html.theme-dark .round-type-btn,
html.theme-dark .tc-btn,
html.theme-dark .perf-info-name,
html.theme-dark .perf-info-topic,
/* ── Варіанти / Попробуй пояснити / Взлам — світлі картки на темному фоні ── */
html.theme-dark .score-row,
html.theme-dark .rev-opt,
html.theme-dark .num-input,
html.theme-dark .sub-chip,
html.theme-dark .voter-chip,
html.theme-dark .toggle,
html.theme-dark .join-btn,
html.theme-dark .roster-chip,
html.theme-dark .setting-row,
html.theme-dark .team-member,
/* ── Суржикологія — світлі картки на темному фоні ── */
html.theme-dark .stat-chip,
html.theme-dark .sz-hint,
html.theme-dark .sz-log,
html.theme-dark .log-stage,
/* ── Андестенд — світла картка журналу слів ── */
html.theme-dark .ud-log,
html.theme-dark .slot {
  --ink: #111111;
  /* приглушений текст усередині світлих карток теж має бути темним, а не світлим */
  --muted: rgba(17,17,17,.55);
  color: #111111;
}

/* ============== БАЗА ============== */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color: transparent; }
html { overscroll-behavior: contain; }
html, body { min-height: 100%; }
html {
  /* iOS Safari читає колір html для overscroll / нижнього бару — синхронізуємо з темою */
  background-color: var(--page);
}
body {
  background-color: var(--page);
  background-image: radial-gradient(var(--page-dots) 1.5px, transparent 1.5px);
  background-size: 9px 9px;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
img { display:block; max-width:100%; }
button { font-family: inherit; }

.font-display { font-family: var(--font-display); letter-spacing: 0; }
.font-num     { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ============== ТЕМНА ПАНЕЛЬ В ГРІ ============== */
/* застосовується до екранів усередині гри для читабельності */
.game-panel {
  background-color: var(--game-bg) !important;
  background-image: none !important;
  color: var(--game-text);
  --ink:    var(--line-dark);
  --surface: var(--game-surface);
}
.game-panel .label,
.game-panel .label-ink { color: var(--game-muted); }

/* ============== КНОПКИ ============== */
.comic-btn {
  --btn-bg: var(--accent-red);
  --btn-fg: #FFFFFF;
  --btn-ink: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 12px 22px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-display);
  font-size: 16px;
  border: var(--bw) solid var(--btn-ink);
  border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--btn-ink);
  cursor: pointer;
  user-select: none;
  transition: transform .07s ease, box-shadow .07s ease;
  text-decoration: none;
  text-align: center;
  width: 100%;
}
.comic-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--btn-ink); }
.comic-btn--ghost     { --btn-bg: var(--surface); --btn-fg: var(--ink); }
.comic-btn--success   { --btn-bg: var(--success);  --btn-fg: var(--ink); }
.comic-btn--danger    { --btn-bg: var(--danger);   --btn-fg: #fff; }
.comic-btn--warn      { --btn-bg: var(--warn);     --btn-fg: var(--ink); }
.comic-btn--blue      { --btn-bg: var(--accent-blue);   --btn-fg: #fff; }
.comic-btn--purple    { --btn-bg: var(--accent-purple); --btn-fg: #fff; }
.comic-btn--pink      { --btn-bg: var(--accent-pink);   --btn-fg: var(--ink); }
.comic-btn--sm        { min-height: 40px; padding: 8px 14px; font-size: 13px; box-shadow: 2px 2px 0 var(--btn-ink); }
.comic-btn--sm:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--btn-ink); }
.comic-btn:disabled   { opacity: .45; cursor: not-allowed; box-shadow: 2px 2px 0 var(--btn-ink); transform: none; }

/* у темній панелі — контури білі */
.game-panel .comic-btn { box-shadow: 4px 4px 0 var(--line-dark); border-color: var(--line-dark); }
.game-panel .comic-btn:active { box-shadow: 2px 2px 0 var(--line-dark); }

/* ============== КАРТКИ ============== */
.comic-card {
  background: var(--surface);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow-comic);
  padding: 16px;
}
.comic-card--flat   { box-shadow: none; }
.comic-card--ticket { border-style: dashed; }
.comic-card--locked { background: var(--locked-fill); color: var(--locked-ink); border-color: var(--locked-ink); box-shadow: none; }

/* ============== ХЕДЕР + БРЕНД ============== */
.comic-header {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: 14px 4px 8px;
}
.brand-mark {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--accent-red);
  border: var(--bw) solid #111111;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; flex-shrink: 0;
  box-shadow: 2px 2px 0 #111111;
}
.brand-block { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-name {
  font-family: var(--font-display);
  font-size: clamp(22px, 6.5vw, 30px);
  line-height: 1;
  color: var(--ink);
  letter-spacing: 0;
}
.brand-tag {
  font-family: var(--font-body); font-weight: 600;
  font-size: 11px; color: var(--ink); opacity: .65;
}
.theme-toggle,
.layout-toggle {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; color: #111111;
  border: var(--bw) solid #111111; border-radius: 8px;
  font-size: 18px; cursor: pointer;
  box-shadow: 2px 2px 0 #111111;
  flex-shrink: 0;
}
.layout-toggle { margin-left: auto; }
.theme-toggle  { margin-left: 8px; }
.theme-toggle:active,
.layout-toggle:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #111111; }

/* ============== ПЛИТКА ГРИ ============== */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  width: 100%; max-width: 720px;
  margin: 12px auto 0;
  padding: 0 4px;
}
@media (min-width: 720px) { .tile-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .tile-grid { grid-template-columns: repeat(4, 1fr); } }

.tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  padding: 22px 12px 18px;
  min-height: 150px;
  background: var(--surface);
  color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow-comic);
  font-family: var(--font-display);
  cursor: pointer;
  user-select: none;
  text-align: center;
  transition: transform .07s ease, box-shadow .07s ease;
}
.tile:active { transform: translate(2px,2px); box-shadow: var(--shadow-comic-sm); }
.tile .tile-ico { font-size: 40px; line-height: 1; }
.tile .tile-name { font-size: 15px; line-height: 1.1; }
/* Бейдж мін. гравців — кутовий, у стилі «Скоро», але в кольорі гри (не чорно-жовтий) */
.tile .tile-min {
  position: absolute; bottom: -10px; left: -8px;
  padding: 3px 10px;
  background: var(--tile-color, var(--accent-red)); color: #111111;
  font-family: var(--font-display); font-size: 11px;
  border: 2px solid #111111; border-radius: 6px;
  transform: rotate(6deg);
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
/* темні акценти → світлий текст для контрасту */
.tile-c-purple .tile-min, .tile-c-red .tile-min, .tile-c-teal .tile-min { color: #FFFFFF; }
.tile.locked .tile-min { opacity: .7; }
.tile .tile-accent {
  position: absolute; top: -12px; left: -12px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--tile-color, var(--accent-red));
  border: var(--bw) solid var(--ink);
}
.tile.locked {
  background: var(--locked-fill);
  color: var(--locked-ink);
  border-color: var(--locked-ink);
  box-shadow: none;
  cursor: default;
}
.tile.locked:active { transform: none; box-shadow: none; }
.tile.locked .tile-ico { filter: grayscale(1); opacity: .55; }
.tile.locked .tile-accent { display: none; }
.tile-lock-ico {
  position: absolute; top: -10px; right: -10px;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--locked-ink); color: #fff;
  border: var(--bw) solid var(--locked-ink);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.tile-soon-tag {
  position: absolute; bottom: -10px; right: -8px;
  padding: 3px 10px;
  background: var(--ink); color: #FFE600;
  font-family: var(--font-display); font-size: 11px;
  border: 2px solid var(--ink); border-radius: 6px;
  transform: rotate(-6deg);
}

.tile-c-red    { --tile-color: var(--accent-red); }
.tile-c-blue   { --tile-color: var(--accent-blue); }
.tile-c-green  { --tile-color: var(--accent-green); }
.tile-c-pink   { --tile-color: var(--accent-pink); }
.tile-c-purple { --tile-color: var(--accent-purple); }
.tile-c-teal   { --tile-color: var(--accent-teal); }
.tile-c-orange { --tile-color: var(--accent-orange); }

/* ============== КАРУСЕЛЬ-РОЗМІТКА ХАБА ==============
   Підхід:
   - Контейнер .tile-carousel = ряд: [стрілка ←] [viewport] [стрілка →].
   - .carousel-viewport — фіксована висота, overflow:hidden, перспектива
     для легкої 3D-глибини; .carousel-track абсолютний flex row.
   - Тайли — фіксований квадрат. Активний у центрі (translateX
     обчислюється у JS), сусіди — пом'якшені scale+opacity, виглядають
     як «майбутні картки» на горизонті.
   - Анімація — cubic-bezier(0.32, 0.72, 0, 1) (Apple-style spring),
     має реагувати на prefers-reduced-motion. */
.tile-carousel {
  display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 720px;
  margin: 18px auto 0;
  padding: 0 8px;
}
.carousel-arrow {
  flex-shrink: 0;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #FFFFFF; color: #111111;
  border: var(--bw) solid #111111;
  font-family: var(--font-display); font-size: 22px; line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 #111111;
  display: inline-flex; align-items: center; justify-content: center;
  user-select: none;
  transition: transform .12s ease, box-shadow .12s ease, opacity .2s ease;
}
.carousel-arrow:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #111111; }
.carousel-arrow:disabled {
  opacity: .3;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: 1px 1px 0 #111111;
}

.carousel-viewport {
  flex: 1; min-width: 0;
  position: relative;
  height: 320px;
  overflow: hidden;
  perspective: 1000px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.carousel-track {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  transition: transform .55s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}

.carousel-tile {
  flex: 0 0 auto;
  width: 260px;
  height: 260px;
  margin: 0 10px;
  padding: 28px 14px 24px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  /* всі тайли — м'який blur + downscale + dimming у спокої */
  transform: scale(.82);
  opacity: .55;
  filter: saturate(.7);
  transition: transform .55s cubic-bezier(0.32, 0.72, 0, 1),
              opacity .35s ease,
              filter .35s ease;
}
.carousel-tile.active {
  transform: scale(1);
  opacity: 1;
  filter: saturate(1);
  z-index: 2;
}
.carousel-tile .tile-ico { font-size: 64px; }
.carousel-tile .tile-name { font-size: 22px; }
/* стан натискання тільки в активного */
.carousel-tile.active:active { transform: scale(.97); }

/* мобайл — менші тайли, нижчий вʼюпорт */
@media (max-width: 560px) {
  .carousel-viewport { height: 280px; }
  .carousel-tile {
    width: 220px;
    height: 220px;
    margin: 0 8px;
    padding: 22px 12px;
  }
  .carousel-tile .tile-ico { font-size: 56px; }
  .carousel-tile .tile-name { font-size: 19px; }
  .carousel-arrow { width: 44px; height: 44px; font-size: 20px; }
}

.carousel-dots {
  display: flex; justify-content: center; gap: 8px;
  margin: 12px auto 0; max-width: 720px;
}
.carousel-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #FFFFFF;
  border: 2px solid #111111;
  cursor: pointer; padding: 0;
  transition: transform .2s ease, background .2s ease, width .25s ease;
}
.carousel-dot.on {
  background: #111111;
  width: 22px; /* активна крапка — горизонтальна "пігулка", як у iOS */
  border-radius: 999px;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track,
  .carousel-tile,
  .carousel-dot { transition: none !important; }
}

/* ============== ІНПУТИ ============== */
.comic-input {
  display: block; width: 100%;
  padding: 14px 16px;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body); font-weight: 600;
  font-size: 16px;
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  outline: none;
  text-align: center;
}
.comic-input::placeholder { color: var(--ink); opacity: .35; }
.comic-input:focus        { box-shadow: var(--shadow-comic-sm); }

/* ============== ЛЕЙБЛ ============== */
.comic-label {
  display: block;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .7;
}

/* ============== ЧИП-ГРАВЕЦЬ ============== */
.player-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--surface); color: var(--ink);
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
}
.player-chip--red    { background: var(--accent-red);    color: #fff; }
.player-chip--blue   { background: var(--accent-blue);   color: #fff; }
.player-chip--green  { background: var(--accent-green);  color: var(--ink); }
.player-chip--pink   { background: var(--accent-pink);   color: var(--ink); }
.player-chip--purple { background: var(--accent-purple); color: #fff; }
.player-chip--yellow { background: #FFE600;              color: var(--ink); }

/* ============== СТЕПЕР ============== */
.comic-stepper { display: inline-flex; align-items: center; gap: 12px; }
.comic-stepper-btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--surface); color: var(--ink);
  border: var(--bw) solid var(--ink);
  font-family: var(--font-display); font-size: 22px; line-height: 1;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.comic-stepper-btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.comic-stepper-val {
  min-width: 48px; text-align: center;
  font-family: var(--font-display); font-size: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* ============== РЕЖИМ-ТОГЛІ (картки) ============== */
.mode-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  width: 100%;
}
.mode-card {
  padding: 12px 8px;
  background: var(--surface); color: var(--ink);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  font-family: var(--font-display); font-size: 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--shadow-comic-sm);
  transition: transform .07s ease, box-shadow .07s ease;
}
.mode-card:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--ink); }
.mode-card.on { background: var(--accent-purple); color: #fff; }
.mode-card .mc-sub { display:block; font-size:10px; opacity:.8; margin-top:2px; }

/* ============== КОД КІМНАТИ — КВИТОК ============== */
.room-code-ticket {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(36px, 11vw, 56px);
  letter-spacing: 8px;
  padding: 14px 22px;
  background: var(--surface); color: var(--ink);
  border: var(--bw) dashed var(--ink);
  border-radius: var(--r);
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-comic);
  user-select: all;
}

/* ============== ТЕГ "НОВЕ!" ============== */
.tag-new {
  display: inline-block;
  padding: 4px 10px;
  background: var(--accent-pink); color: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
  font-family: var(--font-display); font-size: 11px;
  transform: rotate(-6deg);
  box-shadow: 2px 2px 0 var(--ink);
}

/* ============== STARBURST ============== */
.starburst {
  --burst-color: var(--accent-red);
  --burst-ink:   var(--ink);
  position: relative;
  display: inline-block;
  padding: 36px 56px;
  background: var(--burst-color);
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 48px);
  text-align: center;
  line-height: 1;
  filter: drop-shadow(4px 4px 0 var(--burst-ink));
  clip-path: polygon(
    50% 0%, 56% 11%, 70% 5%, 70% 19%, 84% 14%, 80% 28%, 95% 28%, 88% 40%,
    100% 50%, 88% 60%, 95% 72%, 80% 72%, 84% 86%, 70% 81%, 70% 95%, 56% 89%,
    50% 100%, 44% 89%, 30% 95%, 30% 81%, 16% 86%, 20% 72%, 5% 72%, 12% 60%,
    0% 50%, 12% 40%, 5% 28%, 20% 28%, 16% 14%, 30% 19%, 30% 5%, 44% 11%
  );
}

/* ============== СПІНЕР ============== */
.comic-spinner {
  display: inline-block; width: 48px; height: 48px;
  border: var(--bw) solid var(--ink);
  border-top-color: var(--accent-red);
  border-radius: 50%;
  animation: comic-spin 0.8s linear infinite;
}
@keyframes comic-spin { to { transform: rotate(360deg); } }

/* ============== ТАЙМЕР-РИНГ ============== */
.timer-ring { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.timer-ring__bg { fill:none; stroke: var(--ink); stroke-width: 3; opacity:.18; }
.timer-ring__fg { fill:none; stroke: var(--accent-red); stroke-width: 4; stroke-linecap: butt; transition: stroke-dashoffset 1s linear, stroke .3s; }
.game-panel .timer-ring__bg { stroke: var(--line-dark); opacity:.22; }
.game-panel .timer-ring__fg { stroke: var(--accent-blue); }
.timer-num-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 22px;
}

/* ============== СЛУЖБОВЕ ============== */
.flex-col   { display:flex; flex-direction:column; }
.flex-row   { display:flex; flex-direction:row; }
.flex-center{ display:flex; align-items:center; justify-content:center; }
.gap-4 { gap: 4px; } .gap-6 { gap: 6px; } .gap-8 { gap: 8px; }
.gap-10{ gap:10px;} .gap-12{ gap:12px;} .gap-16{ gap:16px;} .gap-20{ gap:20px;}
.w-full { width: 100%; }
.max-420 { max-width: 420px; margin-left:auto; margin-right:auto; }
.max-360 { max-width: 360px; margin-left:auto; margin-right:auto; }
.text-center { text-align: center; }
.muted { opacity: .65; }

/* поважати prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}