/* cards5b.css — «Девять жизней» с телефона, волна 5б: комнаты игры
 * (коллекция, колоды, конструктор, Тропа, лестница, герои, сюжет, зал
 * дуэлей, лобби) и плашки поверх (зовы, «вернуться за стол»). Всё — в той же
 * оболочке, что меню (cards.css: .scr-cards / .cg-layer, горизонтально,
 * «поверни телефон», вырезы через --ct-s*), на токенах слоя меню.
 * Касания: листаются только панели (overscroll-behavior: contain), страница
 * стоит; ничего не выделяется и не зовёт выноску iOS; подсказок по
 * наведению нет — долгое нажатие. Без CSS-фильтров на SVG (Safari). */

/* == ОБОЛОЧКА ============================================================= */
.scr-cards .cg-layer {
  --chalk: #ece8dc; --chalk-dim: rgba(236, 232, 220, .42); --gold: #ffd75e; --hurt: #ff8a7a; --up: #9cf59a;
}
.cg-body { position: relative; display: grid; min-height: 0; min-width: 0; }
.cg-body > * { min-height: 0; min-width: 0; }
.cr-load { display: grid; place-content: center; }
.cr-empty { display: grid; place-content: center; justify-items: center; gap: 8px; padding: 16px; text-align: center; }
.cr-empty b { font-size: 17px; }
.cr-empty p { margin: 0; max-width: 360px; font-size: 14px; color: var(--ink-mid); }
.cr-none { margin: 0; padding: 6px 2px; font-size: 13px; color: var(--ink-mid); }
.cr-sub { margin: 4px 0 0; font-size: 14px; font-weight: 900; }
.cr-sub small { font-size: 12px; font-weight: 700; color: var(--ink-mid); }

/* Панели, что листаются: строки — по содержимому (иначе в низкой альбомной
 * панели grid ужимает строки с overflow: hidden до нуля). */
.cr-filters, .cr-pass-side, .cr-node, .cr-lines, .cr-lad-me, .cr-lad-table, .cr-list, .cr-rows, .cr-dgrid, .cr-her-about {
  grid-auto-rows: max-content;
}

/* Всё, что жмут пальцем: без выделения и без выноски iOS. */
.cg-door, .cr-chip, .cr-tile, .cr-deck, .cr-row, .cr-pn-cell, .cr-road-arr, .cr-dot, .cr-line, .cr-sign,
.cr-tab, .cr-mate, .cr-pc, .cr-plate, .cr-hero-c, .cr-lr, .cr-q {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}

/* Двери меню в комнаты — cards.css (сцена меню, волна 5в). */
.cg-classes .cg-cls:disabled { opacity: .5; cursor: default; }

/* Плашки поверх экрана: зов за стол, «вернуться». */
.cr-float {
  position: absolute; z-index: 90; left: 50%; top: max(52px, calc(var(--ct-st, 0px) + 48px)); transform: translateX(-50%);
  display: grid; gap: 6px; width: min(520px, calc(100% - 24px)); pointer-events: none;
}
.cr-plate {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: var(--r-4);
  background: var(--panel-fg); color: var(--chalk-ink, #1d1b16); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); pointer-events: auto;
  animation: crIn var(--dur-base) var(--ease-out);
}
.cr-plate.is-ring { background: var(--gold); }
.cr-plate .btn.ghost { color: #1d1b16; background: rgba(0, 0, 0, .08); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.cr-plate-t { flex: 1; min-width: 0; font-size: 14px; line-height: 1.25; }
.cr-plate-x { color: #1d1b16; font-size: 22px; }
@keyframes crIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Фильтры-чипы (полка, пул, лестница, класс). */
.cr-fg { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-chip {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--raise-2); color: var(--panel-fg);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line);
}
.cr-chip.on { background: var(--accent-wash-2); box-shadow: inset 0 0 0 2px var(--lav); color: var(--lav); }
.cr-fg-cost .cr-chip { min-width: 44px; padding: 0 8px; }

/* Крупная карта поверх комнаты и вскрытие пачки (оверлеи стола — .ct-ov). */
.cr-big { z-index: 95; grid-auto-flow: column; gap: 14px; }
.cr-big[hidden], .cr-pack[hidden] { display: none; }

/* == КОЛЛЕКЦИЯ ============================================================ */
.cr-coll { display: grid; grid-template-columns: minmax(150px, 22%) 1fr; gap: 10px; min-height: 0; }
.cr-filters { display: grid; align-content: start; gap: 10px; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.cr-shelf { display: grid; grid-template-rows: auto 1fr; gap: 6px; min-height: 0; }
.cr-shelf-h { display: flex; align-items: center; gap: 8px; min-height: 22px; }
.cr-stat { font-size: 13px; color: var(--ink-mid); font-weight: 700; }
.cr-sp { flex: 1; }
.cr-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px 8px; align-content: start;
  min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px 2px 10px;
}
/* Плитка полки — карта с рамкой и под ней число копий (как в окне). */
.cr-tile {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; width: 100%; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; cursor: pointer;
}
.cr-tile .cf { position: relative; inset: auto; width: 100%; aspect-ratio: 150 / 229; }
.cr-tile.is-dim .cf { opacity: .38; filter: grayscale(.7); }
.cr-tile.is-hero .cf { filter: drop-shadow(0 0 6px rgba(255, 215, 94, .6)); }
.cr-badge {
  min-width: 26px; padding: 1px 8px; border-radius: 10px;
  background: var(--panel-fg); color: #1d1b16; font-size: 12px; font-weight: 900; line-height: 1.3; text-align: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .5);
}
.cr-tile.is-dim .cr-badge { background: var(--raise-2); color: var(--ink-mid); }
.cr-packs { align-items: center; gap: 6px; }
.cr-fish { font-size: 14px; font-weight: 900; white-space: nowrap; }
.cr-buy-wrap { display: inline-flex; }
.cr-buy-wrap .ask-row { flex-wrap: nowrap; width: auto; }
.cr-buy-wrap .ask-q { font-size: 13px; white-space: nowrap; }

/* Вскрытие пачки: рубашки в ряд, касание — перевернуть (лучшая — последней). */
.cr-pack { z-index: 96; }
.cr-pack-in { display: grid; justify-items: center; gap: 12px; }
.cr-pack-h { font-size: 18px; font-weight: 900; color: var(--gold); }
.cr-pack-cards { display: flex; gap: 10px; justify-content: center; }
.cr-pc {
  position: relative; width: clamp(80px, 13vw, 116px); aspect-ratio: 150 / 229; padding: 0; border: 0; border-radius: 10px;
  background: none; cursor: pointer; perspective: 600px; color: inherit; font: inherit;
}
.cr-pc-back, .cr-pc-face {
  position: absolute; inset: 0; border-radius: 10px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-out);
}
.cr-pc-back { background: #2a2c34 center / cover no-repeat; overflow: hidden; box-shadow: inset 0 0 0 2px var(--gold), 0 10px 22px rgba(0, 0, 0, .6); }
.cr-pc-back-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cr-pc-face { transform: rotateY(180deg); }
.cr-pc-face .cf { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6)); }
.cr-pc.is-open .cr-pc-back { transform: rotateY(-180deg); }
.cr-pc.is-open .cr-pc-face { transform: rotateY(0); }
.cr-new {
  position: absolute; left: 50%; bottom: -8px; z-index: 3; transform: translateX(-50%); padding: 2px 8px; border-radius: 8px;
  background: var(--up); color: #10220f; font-size: 12px; font-style: normal; font-weight: 900;
}
.cr-pack-b { display: flex; gap: 10px; }
.cr-pack-b .btn[hidden] { display: none; }

/* == КОЛОДЫ И КОНСТРУКТОР ================================================= */
.cr-decks { min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cr-dgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; align-content: start; padding-bottom: 10px; }
.cr-dgrid .cr-sub { grid-column: 1 / -1; }
.cr-deck {
  display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center;
  min-height: 56px; padding: 6px 10px; border: 0; border-radius: var(--r-3); text-align: left; cursor: pointer;
  background: var(--raise-2); color: var(--panel-fg); font: inherit; box-shadow: inset 3px 0 0 var(--cc, var(--lav)), inset 0 0 0 1px var(--line);
}
.cr-deck b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-deck small { grid-column: 2; font-size: 12px; color: var(--ink-mid); }
.cr-deck.is-bad small { color: var(--hurt); }
.cr-deck.is-new { grid-template-columns: 1fr; background: var(--accent-wash-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.cr-deck.is-new small { grid-column: 1; }
.cr-deck-ic { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-wash-2); }
.cr-deck-ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cr-newpick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px; border-radius: var(--r-3); background: var(--raise); }
.cr-newpick b { margin-right: 4px; font-size: 14px; }
.cr-name {
  min-width: 0; width: 180px; min-height: 40px; padding: 0 10px; border: 0; border-radius: var(--r-3);
  background: var(--sink); color: var(--panel-fg); font: inherit; font-size: 15px; font-weight: 800;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.cr-del-wrap { display: inline-flex; }
.cr-builder { display: grid; grid-template-columns: 1fr minmax(190px, 30%); gap: 10px; min-height: 0; }
.cr-pool { display: grid; grid-template-rows: auto 1fr; gap: 6px; min-height: 0; }
.cr-pool-h { display: flex; gap: 4px; overflow-x: auto; overscroll-behavior: contain; padding-bottom: 2px; }
.cr-pool-h .cr-chip { flex: none; min-width: 44px; padding: 0 10px; }
.cr-dside {
  display: grid; grid-template-rows: auto auto 1fr; gap: 4px; min-height: 0; padding: 8px; border-radius: var(--r-4);
  background: var(--raise); box-shadow: inset 0 3px 0 var(--cc), inset 0 0 0 1px var(--line);
}
.cr-dhead { display: flex; align-items: flex-end; gap: 10px; }
.cr-dn { font-size: 20px; font-weight: 900; color: var(--hurt); }
.cr-dn.is-ok { color: var(--up); }
.cr-curve { display: flex; align-items: flex-end; gap: 3px; height: 26px; flex: 1; }
.cr-curve i { flex: 1; height: max(2px, var(--h)); border-radius: 2px 2px 0 0; background: var(--cc); opacity: .8; }
.cr-derr { margin: 0; min-height: 16px; font-size: 12px; color: var(--ink-mid); line-height: 1.3; }
.cr-rows { display: grid; gap: 3px; align-content: start; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cr-row {
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px;
  border: 0; border-radius: 10px; background: var(--raise-2); color: var(--panel-fg); font: inherit; text-align: left; cursor: pointer;
}
.cr-row.r-rare { box-shadow: inset 3px 0 0 #6fa8ff; }
.cr-row.r-epic { box-shadow: inset 3px 0 0 #c08cff; }
.cr-row.r-legend { box-shadow: inset 3px 0 0 var(--gold); }
.cr-row-c {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: #1d3a66; color: #fff3c4; font-size: 13px; font-weight: 900;
}
.cr-row-n { font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-row-x { font-size: 13px; font-weight: 900; color: var(--gold); }

/* == ТРОПА СЕЗОНА ========================================================= */
.cr-pass { display: grid; grid-template-columns: 1fr minmax(210px, 32%); gap: 10px; min-height: 0; }
.cr-pass-main { display: grid; grid-template-rows: auto 1fr auto; gap: 6px; min-height: 0; min-width: 0; }
.cr-pass-side { display: grid; align-content: start; gap: 6px; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.cr-pass-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cr-pass-t { display: grid; min-width: 0; }
.cr-pass-t small { font-size: 12px; color: var(--ink-mid); }
.cr-pass-t b { font-size: 17px; }
.cr-tier { color: var(--tier) !important; font-weight: 800; }
.cr-lvl { display: grid; justify-items: center; line-height: 1; }
.cr-lvl b { font-size: 26px; color: var(--gold); }
.cr-lvl span { font-size: 12px; color: var(--ink-mid); }
.cr-xp { display: grid; gap: 3px; flex: 1; min-width: 120px; }
.cr-xp i { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--gold) var(--p), var(--sink) var(--p)); }
.cr-xp small, .cr-nowait { font-size: 12px; color: var(--ink-mid); }
.cr-road { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 4px; min-height: 0; }
.cr-road-arr { width: 44px; height: 88px; border-radius: 14px; background: var(--raise-2); color: var(--panel-fg); font-size: 26px; }
.cr-road-arr:disabled { opacity: .3; }
.cr-road-in {
  position: relative; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; align-items: center;
  height: 100%; padding: 18px 0;
}
.cr-road-lbl { position: absolute; left: 2px; font-size: 12px; font-weight: 900; color: var(--ink-mid); }
.cr-road-lbl.is-paid { top: 0; color: #c9b8ff; }
.cr-road-lbl.is-free { bottom: 0; }
.cr-pn { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; gap: 4px; height: 100%; max-height: 210px; }
.cr-pn-num {
  display: grid; place-items: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 11px;
  background: var(--sink); color: var(--ink-mid); font-size: 12px; font-weight: 900;
}
.cr-pn.is-reached .cr-pn-num { background: rgba(255, 215, 94, .2); color: var(--gold); }
.cr-pn.is-current .cr-pn-num { background: var(--gold); color: #1d1b16; }
.cr-pn-cell {
  position: relative; display: grid; place-items: center; align-content: center; gap: 2px; width: 100%; max-width: 76px;
  min-height: 58px; padding: 4px 2px; border: 0; border-radius: 12px; background: var(--raise-2); color: var(--panel-fg);
  font: inherit; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line);
}
.cr-pn-cell.is-paid { background: rgba(160, 138, 230, .14); }
.cr-pn-cell.is-empty { visibility: hidden; }
.cr-pn-cell.is-ready { box-shadow: inset 0 0 0 2px var(--gold), 0 0 12px rgba(255, 215, 94, .4); animation: crGlow 1.4s ease-in-out infinite; }
.cr-pn-cell.is-taken { opacity: .55; }
.cr-pn-cell.is-locked, .cr-pn-cell.is-paidlock { opacity: .8; }
@keyframes crGlow { 50% { box-shadow: inset 0 0 0 2px var(--gold), 0 0 4px rgba(255, 215, 94, .15); } }
.cr-pn-ic { display: grid; place-items: center; width: 30px; height: 30px; }
.cr-pn-ic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cr-pn-em { font-size: 20px; line-height: 1; }
.cr-pn-cap { font-size: 12px; font-weight: 800; line-height: 1.1; text-align: center; color: var(--ink-mid); }
.cr-pn-cell.is-ready .cr-pn-cap { color: var(--gold); }
.cr-pn-more { position: absolute; right: 3px; top: 2px; font-size: 12px; font-style: normal; font-weight: 900; color: var(--gold); }
.cr-pn-ok, .cr-pn-lock { position: absolute; left: 4px; top: 2px; font-size: 12px; font-weight: 900; color: var(--up); }
.cr-pn-lock { color: #c9b8ff; }
.cr-sw { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .3); }
.cr-road-pages { display: flex; justify-content: center; gap: 6px; }
.cr-road-pages i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.cr-road-pages i.on { background: var(--gold); }
.cr-q { position: relative; display: grid; gap: 2px; padding: 6px 8px 8px; border-radius: 10px; background: var(--raise-2); overflow: hidden; }
.cr-q b { font-size: 13px; line-height: 1.25; }
.cr-q small { font-size: 12px; color: var(--ink-mid); }
.cr-q i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); background: var(--gold); }
.cr-q.is-done { opacity: .6; }
.cr-moon {
  display: grid; gap: 4px; margin: 6px 0 0; padding: 10px; border-radius: var(--r-4);
  background: linear-gradient(140deg, rgba(160, 138, 230, .28), rgba(20, 22, 28, .4)); box-shadow: inset 0 0 0 1px rgba(201, 184, 255, .35);
}
.cr-moon b { font-size: 15px; color: #e3d8ff; }
.cr-moon small { font-size: 12px; color: var(--ink-mid); line-height: 1.3; }
.cr-moon.is-on { background: rgba(255, 215, 94, .1); box-shadow: inset 0 0 0 1px rgba(255, 215, 94, .35); }
.cr-shelfv { display: grid; gap: 4px; }
.cr-slot { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 6px; font-size: 13px; }
.cr-slot select {
  min-height: 44px; min-width: 0; padding: 0 8px; border: 0; border-radius: 10px; background: var(--sink);
  color: var(--panel-fg); font: inherit; font-size: 13px; box-shadow: inset 0 0 0 1px var(--line);
}

/* == ЛЕСТНИЦА ============================================================= */
.cr-ladder { display: grid; grid-template-columns: minmax(200px, 32%) 1fr; gap: 10px; min-height: 0; }
.cr-lad-me { display: grid; align-content: start; gap: 8px; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cr-lad-s { font-size: 16px; }
.cr-lad-mine { display: grid; gap: 2px; padding-top: 4px; }
.cr-lad-mine b { font-size: 22px; color: var(--tier); }
.cr-lad-mine span { font-size: 14px; font-weight: 800; }
.cr-lad-mine small, .cr-tiers { font-size: 12px; color: var(--ink-mid); }
.cr-tiers { margin: 0; line-height: 1.6; }
.cr-tiers span { color: var(--tier); font-weight: 800; white-space: nowrap; }
.cr-lad-table { display: grid; gap: 3px; align-content: start; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 10px; }
.cr-lr {
  display: grid; grid-template-columns: 36px 1fr auto auto auto; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px;
  border-radius: 10px; background: var(--raise); box-shadow: inset 3px 0 0 var(--tier);
}
.cr-lr.is-me { background: var(--accent-wash-2); }
.cr-lr-p { font-size: 15px; font-weight: 900; color: var(--ink-mid); text-align: right; }
.cr-lr-n { display: grid; min-width: 0; }
.cr-lr-n b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-lr-n small { font-size: 12px; color: var(--lav); }
.cr-lr-t { font-size: 13px; font-weight: 800; color: var(--tier); }
.cr-lr-w { font-size: 13px; color: var(--ink-mid); }
.cr-lr-9 { padding: 1px 6px; border-radius: 6px; background: var(--gold); color: #1d1b16; font-size: 12px; font-weight: 900; }
.cr-lr-gap { text-align: center; color: var(--ink-mid); }

/* == ГЕРОИ ================================================================ */
.cr-heroes { display: grid; grid-template-columns: minmax(200px, 30%) 1fr; gap: 10px; min-height: 0; }
.cr-her-about { display: grid; align-content: start; gap: 8px; }
.cr-her-list { display: flex; gap: 12px; align-items: flex-start; overflow-x: auto; overscroll-behavior: contain; padding: 4px 2px 10px; }
.cr-hero { display: grid; justify-items: center; gap: 2px; flex: none; width: 150px; text-align: center; }
.cr-hero b { font-size: 14px; }
.cr-hero small { font-size: 12px; color: var(--ink-mid); }
.cr-hero.is-live .cr-hero-st { color: var(--up); }
.cr-hero-c { width: 132px; aspect-ratio: auto; }
.cbig-mini { display: block; }
.cbig-mini .cf-big { --big-w: 132px; }
.cbig-mini .cbig-info { display: none; }
.cr-hero-off { display: grid; place-items: center; width: 132px; aspect-ratio: 150 / 229; border-radius: 10px; background: var(--raise-2); font-size: 13px; color: var(--ink-mid); }

/* == СЮЖЕТ ================================================================ */
.cr-story { display: grid; grid-template-columns: minmax(150px, 20%) 1fr minmax(190px, 26%); gap: 8px; min-height: 0; }
.cr-lines { display: grid; align-content: start; gap: 6px; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cr-line {
  display: grid; grid-template-columns: 26px 1fr; gap: 6px; align-items: center; min-height: 48px; padding: 4px 8px;
  border: 0; border-radius: var(--r-3); background: var(--raise-2); color: var(--panel-fg); font: inherit; text-align: left; cursor: pointer;
  box-shadow: inset 3px 0 0 var(--cc), inset 0 0 0 1px var(--line);
}
.cr-ic { display: block; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-wash-2); }
.cr-ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cr-foe .cr-ic { width: 30px; height: 30px; }
.cr-line b { display: block; font-size: 13px; line-height: 1.2; }
.cr-line small { font-size: 12px; color: var(--ink-mid); }
.cr-line.on { background: var(--accent-wash-2); box-shadow: inset 3px 0 0 var(--cc), inset 0 0 0 2px var(--lav); }
.cr-line:disabled { opacity: .45; cursor: default; }
.cr-line.is-done small { color: var(--up); }
.cr-map { position: relative; min-height: 0; overflow: hidden; border-radius: var(--r-4); background: #101218; box-shadow: inset 0 0 0 1px var(--line); }
.cr-map-img { position: absolute; display: block; max-width: none; pointer-events: none; }
.cr-path { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cr-path polyline { fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 10; }
.cr-nodes { position: absolute; inset: 0; }
.cr-dot {
  position: absolute; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: rgba(20, 22, 28, .82); color: var(--panel-fg); font: inherit;
  font-size: 15px; font-weight: 900; cursor: pointer; box-shadow: inset 0 0 0 2px var(--line-strong), 0 4px 10px rgba(0, 0, 0, .6);
}
.cr-dot.is-done { background: rgba(156, 245, 154, .28); box-shadow: inset 0 0 0 2px var(--up); }
.cr-dot.is-next { background: var(--gold); color: #1d1b16; box-shadow: 0 0 0 4px rgba(255, 215, 94, .35); animation: crGlowDot 1.4s ease-in-out infinite; }
.cr-dot.is-boss { width: 52px; height: 52px; margin: -26px 0 0 -26px; font-size: 20px; }
.cr-dot.is-locked { opacity: .6; cursor: default; }
.cr-dot.on { outline: 3px solid var(--panel-fg); outline-offset: 2px; }
@keyframes crGlowDot { 50% { box-shadow: 0 0 0 9px rgba(255, 215, 94, .12); } }
.cr-node { display: grid; align-content: start; gap: 6px; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: 8px; }
.cr-node-t { font-size: 16px; }
.cr-node-x { margin: 0; font-size: 13px; line-height: 1.35; color: var(--ink-mid); }
.cr-foe { display: grid; grid-template-columns: 30px 1fr; gap: 6px; align-items: center; padding: 6px; border-radius: 10px; background: var(--raise); box-shadow: inset 3px 0 0 var(--cc); }
.cr-foe b { display: block; font-size: 14px; }
.cr-foe small { font-size: 12px; color: var(--ink-mid); }
.cr-rule { margin: 0; font-size: 12px; line-height: 1.3; }
.cr-rule b { color: var(--gold); }
.cr-sign { position: relative; display: grid; justify-items: center; gap: 2px; width: 92px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.cr-sign .cf { position: relative; inset: auto; width: 84px; aspect-ratio: 150 / 229; }
.cr-sign small { font-size: 12px; color: var(--ink-mid); }

/* == ЗАЛ ДУЭЛЕЙ И ЛОББИ =================================================== */
.cr-hall, .cr-lob { display: grid; grid-template-columns: minmax(170px, 28%) 1fr minmax(200px, 32%); gap: 10px; min-height: 0; }
.cr-lob { grid-template-columns: minmax(190px, 34%) 1fr; }
.cr-hall-ranked { justify-items: stretch; }
.cr-rank { box-shadow: inset 3px 0 0 var(--tier), inset 0 0 0 1px var(--line); }
.cr-rank b { font-size: 17px; color: var(--tier); }
.cr-find { min-height: 64px; font-size: 18px; }
.cr-find-n { font-size: 12px; color: var(--ink-mid); text-align: center; }
.cr-search { display: grid; justify-items: center; gap: 6px; padding: 10px; border-radius: var(--r-4); background: var(--raise); }
.cr-search b { font-size: 16px; }
.cr-search-t { font-size: 13px; color: var(--ink-mid); font-variant-numeric: tabular-nums; }
.cr-search-ring {
  width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--line-strong); border-top-color: var(--gold);
  animation: ctSpin 1.1s linear infinite;
}
.cr-tabs { display: flex; gap: 4px; }
.cr-tab {
  flex: 1; min-height: 44px; padding: 0 6px; border: 0; border-radius: 12px; background: var(--raise-2); color: var(--ink-mid);
  font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.cr-tab.on { background: var(--accent-wash-2); color: var(--lav); box-shadow: inset 0 0 0 1px var(--lav); }
.cr-list { display: grid; gap: 4px; align-content: start; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.cr-mate { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 2px 4px 2px 10px; border-radius: 12px; background: var(--raise); }
.cr-mate > span { display: grid; flex: 1; min-width: 0; }
.cr-mate b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-mate small { font-size: 12px; color: var(--ink-mid); }
.cr-mate.is-table small { color: var(--up); }
.cr-mate.is-app small { color: var(--lav); }
.cr-wait { justify-items: start; }
.cr-code { font-size: 22px; font-weight: 900; letter-spacing: .16em; color: var(--gold); }
.cr-codein { display: grid; gap: 4px; font-size: 13px; color: var(--ink-mid); }
.cr-code-in {
  min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: var(--sink); color: var(--panel-fg);
  font: inherit; font-size: 22px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--line-strong);
}
.cr-or { margin: 0; text-align: center; font-size: 12px; color: var(--ink-mid); }
.cr-vs { align-content: center; justify-items: center; gap: 12px; }
.cr-vs-row { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; }
.cr-vs-me, .cr-vs-foe {
  display: grid; justify-items: center; gap: 2px; flex: 1; max-width: 220px; padding: 12px 8px; border-radius: var(--r-4);
  background: var(--raise); text-align: center; box-shadow: inset 0 0 0 1px var(--line);
}
.cr-vs-foe { box-shadow: inset 0 0 0 1px var(--line), inset 0 -3px 0 var(--tier); }
.cr-vs-me b, .cr-vs-foe b { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.cr-vs-me small, .cr-vs-foe small { font-size: 12px; color: var(--ink-mid); }
.cr-vs-me i, .cr-vs-foe i { font-size: 13px; font-style: normal; font-weight: 800; color: var(--ink-mid); }
.cr-vs-me.is-ready i, .cr-vs-foe.is-ready i { color: var(--up); }
.cr-vs-x { font-size: 22px; font-weight: 900; color: var(--gold); }
.cr-count { margin: 0; font-size: 14px; color: var(--ink-mid); text-align: center; }
.cr-count b { font-size: 22px; color: var(--gold); }
.cr-ready { min-width: 200px; min-height: 52px; font-size: 17px; }

/* == СТОЛ: связь и меню партии дуэли ====================================== */
.ct-net {
  position: absolute; left: 50%; top: max(6px, var(--ct-st, 0px)); z-index: 70; transform: translateX(-50%);
  padding: 6px 14px; border-radius: 12px; background: #3b1414; color: #ffd4cd; font-size: 13px; font-weight: 800;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5); pointer-events: none;
}
.ct-net[hidden] { display: none; }
.ct-panel-n { font-size: 12px; color: var(--chalk-dim); line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
  .cr-plate, .cr-pn-cell.is-ready, .cr-dot.is-next, .cr-search-ring { animation: none; }
  .cr-pc-back, .cr-pc-face { transition: none; }
}