/* cards.css — «Девять жизней» с телефона (волна 5а): меню игры и стол.
 * Игра — только в горизонтальном виде (как Hearthstone на телефоне): меню и
 * стол — слои во весь экран (html.in-cards), «задний двор ночью» в любой
 * теме; в портретном окне — «поверни телефон» (или повёрнутый слой, если
 * поворот у человека заблокирован — cardsrotate.js).
 * Касания: на столе touch-action: none (палец двигает карту, а не
 * страницу), ничего не выделяется и не зовёт выноску iOS; подсказок по
 * наведению нет — только долгое нажатие. Без CSS-фильтров на SVG (Safari). */

/* == МЕНЮ ИГРЫ ============================================================ */
/* Слой во весь экран в горизонтальном виде, три колонки без прокрутки.
 * Мир игры — ночной двор в любой теме: токены меню переопределены на слое
 * (те же имена, что в kit.css, — компоненты меню остаются на токенах). */
.scr-cards {
  position: fixed; inset: 0; z-index: 30; overflow: hidden; background: #0d0f14;
}
.cg-layer {
  --raise: rgba(255, 255, 255, .045); --raise-2: rgba(255, 255, 255, .07); --line: rgba(236, 232, 220, .14);
  --line-strong: rgba(236, 232, 220, .3); --panel-fg: #ece8dc; --ink-mid: #b8b2a4; --sink: rgba(0, 0, 0, .35);
  --accent-wash-2: rgba(255, 215, 94, .12); --lav: #ffd75e;
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; gap: 6px; overflow: hidden;
  padding: max(4px, var(--ct-st, 0px)) max(10px, var(--ct-sr, 0px)) max(6px, var(--ct-sb, 0px)) max(10px, var(--ct-sl, 0px));
  background: radial-gradient(120% 90% at 50% 30%, rgba(70, 76, 96, .35), rgba(13, 15, 20, 0) 70%), #14161c;
  color: var(--panel-fg); font-family: var(--font);
}
.cg-top { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; min-height: 48px; min-width: 0; }
.cg-back { color: var(--panel-fg); }
.cg-title { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 18px; font-weight: 900; white-space: nowrap; }
.cg-sp { flex: 1; }
.cg-sets { display: flex; flex: none; align-items: center; gap: 8px; }
/* Подсказка о полном экране — фишка в верхней строке; пояснение iPhone —
 * поверх меню под строкой (место в колонках не отнимает). */
.cg-fs { position: relative; display: flex; align-items: center; }
.cg-chip {
  min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; background: var(--accent-wash-2); color: var(--lav);
  font: inherit; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-strong);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.cg-fs-x { color: var(--panel-fg); }
.cg-fs-pop {
  position: absolute; top: calc(100% + 4px); left: 0; width: 260px; padding: 10px 12px; border-radius: var(--r-4);
  background: linear-gradient(var(--raise-2), var(--raise-2)), #14161c; color: var(--panel-fg); font-size: 13px; line-height: 1.35; box-shadow: 0 12px 30px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--line);
}
.cg-skel { grid-column: 1 / -1; border-radius: var(--r-4); background: var(--sk-1); }
.cg-hero {
  position: relative; display: grid; align-content: end; gap: 2px; min-height: 84px; padding: 10px 12px; overflow: hidden;
  border-radius: var(--r-4); background: var(--hero) center 35% / cover no-repeat, #15131d; box-shadow: var(--e2);
}
.cg-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 18, .1), rgba(10, 8, 18, .85)); }
.cg-kick, .cg-lead { position: relative; z-index: 1; }
.cg-kick { font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #ffd75e; }
.cg-lead { font-size: 13px; line-height: 1.3; color: #f4f1ff; }
.cg-card {
  display: grid; gap: 4px; padding: 8px 10px; border-radius: var(--r-4);
  background: var(--raise); box-shadow: inset 0 0 0 1px var(--line);
}
.cg-card small { font-size: 12px; color: var(--ink-mid); line-height: 1.3; }
.cg-h { margin: 0; font-size: 15px; font-weight: 900; }
.cg-about { margin: 0; font-size: 13px; color: var(--ink-mid); line-height: 1.35; }
.cg-bot, .cg-cls, .cg-sw, .cg-links a, .cg-play, .cg-mode, .cg-next, .ct-rot-lock, .ct-mull-c, .ct-mull-it, .ct-dig-o, .ct-lr {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
}

/* == МЕНЮ КАК У HEARTHSTONE (волна 5в) ===================================== */
/* Сцена — лобби окна во весь слой: постер и петля; шапка и шаги — поверх. */
.cg-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; transition: filter var(--dur-slow) linear; }
.cg-scene-img, .cg-scene-vid { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-scene-vid[hidden] { display: none; }
.cg-scene::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 14, .55), rgba(8, 9, 14, 0) 22%, rgba(8, 9, 14, 0) 55%, rgba(8, 9, 14, .78));
}
.cg-layer:not([data-step="home"]) .cg-scene { filter: brightness(.45) saturate(.8); }
.scr-cards-menu .cg-layer > .cg-top, .scr-cards-menu .cg-layer > .cg-body { z-index: 1; }
.cg-top .cg-title { text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.cg-stage { position: relative; display: grid; min-height: 0; min-width: 0; }
.cg-stage > * { min-height: 0; min-width: 0; }
.cg-skel { border-radius: var(--r-4); background: var(--sk-1); opacity: .4; }
.cg-fail { place-self: center; }

/* Главный экран: «Играть» по центру, двери с артом — внизу. */
.cg-home { position: relative; display: grid; grid-template-rows: 1fr auto; gap: 8px; min-height: 0; }
.cg-play {
  place-self: center; position: relative; display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto;
  align-items: center; column-gap: 12px; min-height: 84px; padding: 10px 30px 10px 16px; border: 0; border-radius: 999px; cursor: pointer;
  background: radial-gradient(120% 140% at 50% 0%, rgba(255, 244, 196, .95), var(--gold) 38%, rgba(160, 104, 14, 1) 100%);
  color: #14161c; font: inherit; text-align: left;
  box-shadow: 0 0 0 3px rgba(40, 26, 4, .85), 0 0 0 6px rgba(255, 215, 94, .45), 0 0 46px rgba(255, 215, 94, .5), 0 14px 30px rgba(0, 0, 0, .6);
  animation: cgGlow 2.8s ease-in-out infinite;
}
.cg-play:active { transform: scale(.97); }
.cg-play-emb { grid-row: span 2; width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5)); }
.cg-play b { font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: .01em; }
.cg-play small { font-size: 13px; font-weight: 800; opacity: .8; }
@keyframes cgGlow { 50% { box-shadow: 0 0 0 3px rgba(40, 26, 4, .85), 0 0 0 6px rgba(255, 215, 94, .6), 0 0 64px rgba(255, 215, 94, .7), 0 14px 30px rgba(0, 0, 0, .6); } }
.cg-doors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.cg-door {
  position: relative; display: grid; align-content: end; gap: 0; min-height: 88px; height: clamp(88px, 27vh, 118px); padding: 6px 10px;
  overflow: hidden; border-radius: var(--r-4); color: var(--panel-fg); text-decoration: none; isolation: isolate;
  background: rgba(20, 22, 28, .7); box-shadow: inset 0 0 0 1px var(--line-strong), 0 10px 22px rgba(0, 0, 0, .5);
}
.cg-door-art { position: absolute; inset: 0; z-index: -1; }
.cg-door-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-door-collection .cg-door-img, .cg-door-decks .cg-door-img { object-fit: contain; padding: 6px 6px 30px; transform: rotate(-6deg); }
.cg-door-heroes .cg-door-img { object-position: 50% 24%; }
.cg-door-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 18, 0) 30%, rgba(10, 12, 18, .92)); }
.cg-door b { font-size: 15px; font-weight: 900; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.cg-door small { overflow: hidden; font-size: 12px; color: var(--ink-mid); white-space: nowrap; text-overflow: ellipsis; }
.cg-door:active { transform: scale(.97); }
.cg-links { position: absolute; left: 0; top: 0; display: flex; gap: 6px; }

/* «Играть» → режимы: плитки с артом, как в лобби окна. */
.cg-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; min-height: 0; }
.cg-mode {
  position: relative; display: grid; align-content: end; gap: 2px; min-height: 0; padding: 10px 12px; overflow: hidden; isolation: isolate;
  border: 0; border-radius: var(--r-4); background: rgba(20, 22, 28, .8); color: var(--panel-fg); font: inherit; text-align: left;
  text-decoration: none; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-strong), 0 12px 26px rgba(0, 0, 0, .55);
}
.cg-mode-art { position: absolute; inset: 0; z-index: -1; }
.cg-mode-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-mode-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 12, 18, 0) 35%, rgba(10, 12, 18, .94) 82%); }
.cg-mode b { font-size: 21px; font-weight: 900; line-height: 1.05; text-shadow: 0 2px 6px rgba(0, 0, 0, .8); }
.cg-mode small { font-size: 13px; line-height: 1.3; color: var(--ink-mid); }
.cg-mode-bot { box-shadow: inset 0 0 0 2px var(--gold), 0 0 26px rgba(255, 215, 94, .3), 0 12px 26px rgba(0, 0, 0, .55); }
.cg-mode-bot b { color: var(--gold); }
.cg-mode.is-fresh { box-shadow: inset 0 0 0 2px var(--gold), 0 0 22px rgba(255, 215, 94, .35); }
.cg-mode:active { transform: scale(.98); }

/* Соперник и колода: сетка слева, выбранное — панелью справа. */
.cg-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 28%); gap: 10px; min-height: 0; }
.cg-bots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 8px; min-height: 0; }
.cg-bot {
  display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 48px; padding: 6px 4px; border: 0;
  border-radius: var(--r-4); background: rgba(20, 22, 28, .72); color: var(--panel-fg); font: inherit; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--line);
}
.cg-bot.on { background: var(--accent-wash-2); box-shadow: inset 0 0 0 2px var(--cc), 0 0 18px rgba(255, 215, 94, .2); }
.cg-bot-n { max-width: 100%; overflow: hidden; font-size: 13px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.cg-bot-l { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-mid); }
.cg-bot-cls { width: 16px; height: 16px; object-fit: contain; }
/* Портрет кота в металлическом кольце (dash/socket окна), как за столом. */
.cg-face { position: relative; display: block; flex: none; width: var(--fs, 64px); height: var(--fs, 64px); border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, rgba(70, 64, 100, 1), rgba(21, 19, 29, 1) 72%); }
.cg-bots .cg-face { --fs: clamp(52px, 19vh, 80px); }
.cg-face-cat { position: absolute; inset: 11%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
.cg-face-cat .cat-av, .cg-face-cat .cat-portrait { width: 100% !important; height: 100% !important; }
.cg-face-cat .cat-av { transform: translateY(14%) scale(1.38); }
.cg-face-ring { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; pointer-events: none; }
.cg-side {
  display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 0; padding: 10px 12px; overflow: hidden;
  border-radius: var(--r-4); background: rgba(14, 15, 20, .82); box-shadow: inset 0 0 0 1px var(--line-strong), inset 0 3px 0 var(--cc);
  text-align: center;
}
.cg-side .cg-face { --fs: clamp(72px, 28vh, 112px); }
.cg-side-n { font-size: 16px; font-weight: 900; }
.cg-side-l { font-size: 12px; color: var(--ink-mid); }
.cg-side .cg-about { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cg-next, .cg-go { justify-self: stretch; gap: 8px; margin-top: 4px; }
/* «Сыграть» — золотом, как «Играть» на главном. */
.cg-go { min-height: 52px; background: radial-gradient(120% 160% at 50% 0%, rgba(255, 244, 196, .95), var(--gold) 40%, rgba(160, 104, 14, 1)); color: #14161c; font-size: 17px; box-shadow: 0 0 0 2px rgba(40, 26, 4, .85), 0 0 22px rgba(255, 215, 94, .45); }
.cg-go .ki { font-size: 20px; }
.cg-vs { display: grid; justify-items: center; gap: 2px; }
.cg-vs i { font-size: 12px; font-style: normal; font-weight: 800; color: var(--ink-mid); }
.cg-classes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(84px, 1fr); gap: 8px; min-height: 0;
  overflow: auto; overscroll-behavior: contain;
}
.cg-cls {
  position: relative; display: grid; align-content: end; min-height: 84px; padding: 8px 10px; overflow: hidden; isolation: isolate;
  border: 0; border-radius: var(--r-4); background: rgba(20, 22, 28, .8); color: var(--panel-fg); font: inherit; text-align: left;
  cursor: pointer; box-shadow: inset 0 0 0 1px var(--line);
}
.cg-cls.on { box-shadow: inset 0 0 0 3px var(--cc), 0 0 0 2px var(--cc), 0 0 24px rgba(255, 215, 94, .35); }
.cg-cls.on .cg-cls-t b::after { content: " ✓"; color: var(--panel-fg); }
.cg-cls-art { position: absolute; inset: 0; z-index: -1; }
.cg-cls-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cg-cls-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 12, 18, .9), rgba(10, 12, 18, .2) 70%); }
.cg-cls-ic { position: absolute; left: 8px; top: 8px; width: 34px; height: 34px; }
.cg-cls-ic img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cg-cls-t { display: grid; min-width: 0; }
.cg-cls-t b { font-size: 16px; color: var(--cc); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); }
.cg-cls-t small { overflow: hidden; font-size: 12px; color: var(--panel-fg); white-space: nowrap; text-overflow: ellipsis; }
.cg-cls:active, .cg-bot:active { transform: scale(.97); }
@media (prefers-reduced-motion: reduce) { .cg-play { animation: none; } }
.cg-sw {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
  padding: 0 10px; border: 0; border-radius: var(--r-3); 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);
}
.cg-sw-k {
  position: relative; flex: none; width: 36px; height: 22px; border-radius: 11px; background: var(--sink);
  box-shadow: inset 0 0 0 1px var(--line-strong); transition: background-color var(--dur-fast) linear;
}
.cg-sw-k::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ink-mid); transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) linear;
}
.cg-sw[aria-pressed="true"] .cg-sw-k { background: var(--accent-grad); }
.cg-sw[aria-pressed="true"] .cg-sw-k::after { transform: translateX(14px); background: #fff; }
.cg-links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px;
  background: var(--raise-2); color: var(--lav); font-size: 13px; font-weight: 800; box-shadow: inset 0 0 0 1px var(--line);
}

/* «Поверни телефон» — общий у меню и стола (cardsrotate.js turnHtml). */
.ct-rotate {
  position: absolute; inset: 0; z-index: 100; display: none; place-content: center; justify-items: center; gap: 12px;
  padding: 24px; text-align: center; background: #0d0f14; color: #ece8dc;
}
.ct-rotate b { font-size: 20px; font-weight: 900; }
.ct-rotate p { margin: 0; max-width: 300px; font-size: 15px; color: rgba(236, 232, 220, .6); }
.ct-rot-phone {
  position: relative; width: 52px; height: 88px; border-radius: 10px; border: 3px solid #ece8dc;
  animation: ctRot 2.4s var(--ease-out) infinite;
}
.ct-rot-phone i { position: absolute; left: 50%; bottom: 6px; width: 14px; height: 3px; border-radius: 2px; background: #ece8dc; transform: translateX(-50%); }
@keyframes ctRot { 0%, 25% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.ct-rot-lock {
  min-height: 44px; margin-top: 8px; padding: 0 12px; border: 0; background: none; color: rgba(236, 232, 220, .7);
  font: inherit; font-size: 13px; font-weight: 700; text-decoration: underline; cursor: pointer;
}
.ct.is-turn .ct-rotate, .cg-layer.is-turn .ct-rotate { display: grid; }
.ct.is-turn > :not(.ct-rotate), .cg-layer.is-turn > :not(.ct-rotate) { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .ct-rot-phone { animation: none; transform: rotate(-90deg); } }

/* == СТОЛ: слой во весь экран ============================================= */
html.in-cards .hdr, html.in-cards .tabbar, html.in-cards .fab { display: none; }
html.in-cards, html.in-cards body { overflow: hidden; overscroll-behavior: none; background: #0d0f14; }
html.in-cards .kt-toast { bottom: calc(16px + var(--safe-b)); }
.scr-cardsplay {
  position: fixed; inset: 0; z-index: 30; overflow: hidden; overscroll-behavior: none;
  background: #0d0f14; color: #ece8dc;
}
.ct-nogame, .ct-loading {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  margin: 0; padding: 24px; text-align: center; font-size: 15px;
}
.ct-spin {
  width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(236, 232, 220, .2); border-top-color: #ffd75e;
  animation: ctSpin .9s linear infinite;
}
@keyframes ctSpin { to { transform: rotate(360deg); } }
.ct, .ct-stage { position: absolute; inset: 0; }
/* Портретное окно: слой игры повёрнут на 90° (cardsrotate.js) — размеры и
 * поворот ставит JS, здесь только привязка к левому верхнему углу. */
.ct.is-rotated, .cg-layer.is-rotated { inset: auto; left: 0; top: 0; }
.ct {
  --chalk: #ece8dc; --chalk-dim: rgba(236, 232, 220, .42); --gold: #ffd75e; --hurt: #ff8a7a; --up: #9cf59a;
  font-family: var(--font);
}
.ct-stage {
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; overflow: hidden; background: #0b0d12;
}
.ct-stage button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* Поле окна (волна 5в): размытая копия во весь экран — там, куда арт не
 * достаёт; поверх — сам арт (постер board.jpg, петля board-loop), меловые
 * места которого стоят под дорожками (cardslayout.js), края растворены. */
.ct-bg, .ct-board { position: absolute; pointer-events: none; }
.ct-bg { inset: 0; overflow: hidden; background: #0b0d12; }
.ct-bg-img { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover; filter: blur(14px) brightness(.42) saturate(.85); }
.ct-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 60% at 50% 45%, rgba(11, 13, 18, 0), rgba(11, 13, 18, .55)), linear-gradient(180deg, rgba(11, 13, 18, 0) 62%, rgba(8, 9, 12, .8));
}
.ct-board {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 80%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%), linear-gradient(180deg, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.ct-board-img, .ct-board-vid { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.ct-board-vid[hidden] { display: none; }

/* Свет фонаря на дорожке — тёплое пятно по колонке мела. */
.ct-lit {
  position: absolute; pointer-events: none; border-radius: 40%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(255, 220, 140, .3), rgba(255, 220, 140, 0) 72%);
  mix-blend-mode: screen; transition: left var(--dur-slow) var(--ease-out), width var(--dur-slow) var(--ease-out);
}
/* Место на столе — меловая клетка самого арта. Элемент — охватывающий
   прямоугольник клетки (цель касания); подсветка — .ct-slot-q, положенная
   гомографией ровно на мел (как .slot окна: app/src/cards/cards.css). */
.ct-slot { position: absolute; }
.ct-slot-q {
  position: absolute; left: 0; top: 0; width: 150px; height: 229px; transform-origin: 0 0; border-radius: 6px;
  pointer-events: none; transition: background-color var(--dur-fast) linear, box-shadow var(--dur-fast) linear;
}
.ct-slot.is-lit .ct-slot-q { box-shadow: inset 0 0 26px rgba(190, 224, 255, .28); }
.ct-slot.is-target .ct-slot-q {
  background: rgba(255, 244, 200, .14);
  box-shadow: 0 0 0 5px rgba(255, 250, 220, .85), 0 0 50px rgba(255, 244, 200, .45);
  animation: ctPulse 1.1s ease-in-out infinite;
}
@keyframes ctPulse { 50% { background: rgba(255, 244, 200, .22); box-shadow: 0 0 0 7px rgba(255, 250, 220, 1), 0 0 70px rgba(255, 244, 200, .6); } }
.ct-part {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 3px 8px; border-radius: 10px;
  background: rgba(127, 180, 201, .2); color: #bfe4f2; font-size: 13px; font-weight: 900;
}

/* существо на дорожке — сама карта с рамкой, положенная на мел (как в окне):
   .ct-m — охватывающий прямоугольник клетки (цель касания, выпад и смерть
   анимируются на нём в пикселях экрана), .ct-mq — карта 150×229 под
   гомографией в меловой четырёхугольник (cardslayout.js quadTransform). */
.ct-m { position: absolute; z-index: 5; transition: left var(--dur-slow) var(--ease-out), top var(--dur-slow) var(--ease-out); }
.ct-mq { position: absolute; left: 0; top: 0; width: 150px; height: 229px; transform-origin: 0 0; }
:is(.ct, .scr-cards) .cm {
  display: block; padding: 0; /* .cm — ещё и коммент в app.css: его flex/отступы сюда не текут */
  position: absolute; inset: 0; background: none; box-shadow: none;
}
.ct-m .cm .cf { filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .6)); }
/* Цифры на столе — те же места (лапа, сердце, медальон), но крупнее: карта
   на мелу у телефона ~60 px шириной, кеглем окна цифры не читались бы. */
.ct-m .cm .cf-atk, .ct-m .cm .cf-hp { font-size: 30cqw; text-shadow: 0 0 2px #000, 0 2px 0 #000, 0 0 7px #000; }
.ct-m .cm .cf-cost { font-size: 22cqw; }
.ct-m.is-target .cm::after {
  content: ""; position: absolute; inset: -4px; border: 5px solid rgba(255, 120, 90, .95); border-radius: 10px;
  box-shadow: 0 0 22px rgba(255, 90, 60, .8); pointer-events: none; animation: ctPulseRed 1.1s ease-in-out infinite;
}
@keyframes ctPulseRed { 50% { border-color: rgba(255, 170, 150, 1); box-shadow: 0 0 34px rgba(255, 90, 60, 1); } }
.ct-m.is-landed .cm .cf { filter: brightness(1.25) drop-shadow(0 0 12px rgba(255, 243, 196, .8)); }
.ct-m.is-lit .cm .cf { filter: drop-shadow(0 0 16px rgba(190, 224, 255, .85)) drop-shadow(0 0 30px rgba(150, 200, 255, .4)); }
/* Имя — на самой карте; .cm-name остался для чтения с экрана. */
:is(.ct, .scr-cards) .cm-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:is(.ct, .scr-cards) .cm.is-sleep .cf-img { filter: saturate(.7) brightness(.75); }
:is(.ct, .scr-cards) .cm-z {
  position: absolute; top: 18%; right: 24%; z-index: 2; font-size: 30px; font-weight: 900; color: #b9c4ff;
  text-shadow: 0 2px 3px #000; animation: ctZ 2.4s ease-in-out infinite; pointer-events: none;
}
@keyframes ctZ { 50% { transform: translateY(-5px); opacity: .6; } }
/* Свойства накладками, как в окне: Когти — значок в нижней части арта,
   Девять жизней — ореол вокруг карты (крупнее её самой). */
:is(.ct, .scr-cards) .cm-kw { position: absolute; z-index: 1; pointer-events: none; }
:is(.ct, .scr-cards) .cm-kwi { display: block; width: 100%; height: 100%; object-fit: contain; }
:is(.ct, .scr-cards) .cm-kw.kw-claws { left: 50%; bottom: 41%; width: 30%; aspect-ratio: 1; transform: translateX(-50%); filter: drop-shadow(0 0 6px rgba(255, 140, 40, .65)); }
:is(.ct, .scr-cards) .cm-kw.kw-lives { inset: -38% -32%; opacity: .85; animation: ctLives 3.4s ease-in-out infinite; }
:is(.ct, .scr-cards) .cm-kw.kw-lives .cm-kwi { object-fit: fill; }
@keyframes ctLives { 50% { filter: brightness(1.2); } }

/* хозяева: кот в металлическом кольце (dash/socket окна), жизни — красный камень */
.ct-hero {
  position: absolute; z-index: 6; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 38%, #3b3652, #15141c 72%); color: var(--chalk);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .65);
}
.ct-hero.is-target { box-shadow: 0 0 0 4px var(--hurt), 0 0 22px rgba(255, 138, 122, .7); animation: ctPulseRed 1.1s ease-in-out infinite; }
.ct-hero-img { position: absolute; inset: 16%; width: 68%; height: 68%; object-fit: contain; }
/* Кот — в окошке кольца (у dash/socket.png прозрачна середина ~60% поперечника). */
.ct-hero-cat { position: absolute; inset: 11%; display: grid; place-items: center; overflow: hidden; border-radius: 50%; }
/* Кот — во всё окошко (px у портрета — только начальный размер), крупно: голова и грудь. */
.ct-hero-cat .cat-av, .ct-hero-cat .cat-portrait { width: 100% !important; height: 100% !important; }
.ct-hero-cat .cat-av { transform: translateY(14%) scale(1.38); }
.ct-hero.is-foe .ct-hero-cat .cat-av { transform: translateY(14%) scale(-1.38, 1.38); }
.ct-hero-ring { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; pointer-events: none; }
.ct-hero-cat:not(:empty) ~ .ct-hero-alt { display: none; }
.ct-hp {
  position: absolute; right: -8px; bottom: -6px; z-index: 2; min-width: 32px; height: 34px; padding: 0 5px;
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 32%, #ff7a62, #b3241a 68%, #5e0e09); color: #fff; font-size: 18px; font-weight: 900;
  text-shadow: 0 1px 0 #000, 0 0 3px #000; box-shadow: 0 0 0 2px rgba(10, 10, 12, .85), 0 4px 8px rgba(0, 0, 0, .6);
}
.ct-hp.is-low { background: radial-gradient(circle at 40% 32%, #ff9a7a, #e0261a 60%, #7a0d08); animation: ctPulseRed 1.4s ease-in-out infinite; }
.ct-info { position: absolute; z-index: 6; display: grid; align-content: center; justify-items: start; gap: 3px; pointer-events: none; }
.ct-info.is-foe { padding: 4px 10px; }
.ct-info.is-foe .ct-hname { font-size: 13px; text-shadow: 0 1px 2px #000; }
/* Мурчание — пряжа справа внизу (как кристаллы маны HS): клубок, цифра, точки. */
.ct-info.is-me { grid-template-columns: 38px 1fr; column-gap: 4px; align-content: center; justify-items: start; }
.ct-yarn { grid-row: span 2; width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .6)); }
.ct-info.is-me .ct-mana b { font-size: 22px; text-shadow: 0 2px 0 #000; }
.ct-info.is-me .ct-pips { display: none; }
.ct-hname {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; font-weight: 800; color: var(--chalk);
}
.ct-counts { display: flex; gap: 8px; }
.ct-c { display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: 13px; font-weight: 900; color: var(--chalk); }
.ct-c svg { width: 14px; height: 14px; fill: none; stroke: var(--chalk-dim); stroke-width: 1.6; }
.ct-fitems { display: flex; gap: 2px; }
.ct-fitems img { width: 20px; height: 20px; object-fit: contain; }
.ct-mana { display: flex; align-items: baseline; gap: 2px; color: #cfe3ff; }
.ct-mana b { font-size: 18px; font-weight: 900; }
.ct-mana small { font-size: 13px; font-weight: 800; color: var(--chalk-dim); }
.ct-pips { display: flex; gap: 2px; margin-left: 4px; align-self: center; }
.ct-pips i { width: 6px; height: 6px; border-radius: 50%; background: rgba(207, 227, 255, .2); }
.ct-pips i.on { background: #9fc6ff; box-shadow: 0 0 6px rgba(159, 198, 255, .7); }

/* кнопки правой колонки */
.ct-ctl {
  position: absolute; z-index: 7; display: grid; place-items: center; padding: 0; border: 0; border-radius: 14px;
  background: rgba(30, 33, 42, .92); color: var(--chalk); box-shadow: inset 0 0 0 1px rgba(236, 232, 220, .18);
  font: inherit; cursor: pointer;
}
.ct-ctl svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ct-ctl:active, .ct-bell:active, .ct-hero:active { transform: scale(.94); }
.ct-power img { width: 40px; height: 40px; object-fit: contain; }
.ct-power, .ct-items { border-radius: 50%; background: radial-gradient(circle at 50% 38%, #3a3d48, #17181e 72%); box-shadow: 0 0 0 2px rgba(190, 196, 210, .35), 0 6px 14px rgba(0, 0, 0, .6); }
.ct-items-ic svg { width: 26px; height: 26px; fill: none; stroke: #e2c08a; stroke-width: 1.8; }
.ct-alt { font-size: 12px; font-weight: 900; color: var(--chalk); }
.ct-hero-alt { font-size: 28px; }
img + .ct-alt { display: none; }
.ct-power { opacity: .55; }
.ct-power.is-ready { opacity: 1; box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255, 215, 94, .55); }
.ct-power.is-used { opacity: .35; }
.ct-items.is-ready { box-shadow: 0 0 0 2px #cfa46a, 0 0 12px rgba(207, 164, 106, .5); }
.ct-n {
  position: absolute; right: -4px; top: -4px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 10px;
  display: grid; place-items: center; background: #24406b; color: #fff; font-size: 12px; font-weight: 900;
}
.ct-cancel { font-size: 14px; font-weight: 900; background: #3b1d1d; color: #ffd4cd; }
.ct-cancel[hidden], .ct-items[hidden], .ct-digchip[hidden] { display: none; }
.ct-bell {
  position: absolute; z-index: 7; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #ffe58a, #d19a1c 45%, #6b4706 100%); color: #3a2604; cursor: pointer;
  box-shadow: 0 0 0 3px rgba(40, 26, 4, .85), 0 0 0 5px rgba(255, 215, 94, .55), 0 0 24px rgba(255, 215, 94, .45), 0 10px 20px rgba(0, 0, 0, .6); font: inherit;
  --left: 1;
}
.ct-bell-ic svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.ct-bell-ic { margin-top: -18px; }
.ct-bell-t {
  position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); width: 76%; text-align: center; line-height: 1.05;
  font-size: 13px; font-weight: 900; color: #2a1a02; text-shadow: 0 1px 0 rgba(255, 240, 190, .6);
}
.ct-bell.is-off { background: radial-gradient(circle at 50% 35%, #33353d, #1b1c21); color: var(--chalk-dim); box-shadow: inset 0 0 0 2px rgba(236, 232, 220, .2); }
.ct-bell.is-off .ct-bell-t { color: var(--chalk-dim); font-size: 12px; }
.ct-bell.is-lethal { background: radial-gradient(circle at 50% 35%, #ffdb6e, #a87a12); color: #2a1e04; box-shadow: 0 0 0 3px rgba(255, 215, 94, .5), 0 0 24px rgba(255, 215, 94, .7); }
.ct-bell.is-lethal .ct-bell-t { color: #2a1e04; }
.ct-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; opacity: 0; }
.ct-ring circle { fill: none; stroke: var(--chalk); stroke-width: 4; stroke-dasharray: 100; stroke-dashoffset: calc((1 - var(--left)) * 100); stroke-linecap: round; transition: stroke-dashoffset .25s linear; }
.ct-bell.is-clock .ct-ring { opacity: 1; }
.ct-bell.is-hurry .ct-ring circle { stroke: var(--hurt); }
.ct-bell.is-hurry::after {
  content: attr(data-secs); position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
  font-size: 18px; font-weight: 900; color: var(--hurt); text-shadow: 0 1px 2px #000;
}

/* рука */
.ct-hand { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.ct-card {
  position: absolute; left: 0; top: 0; width: var(--hand-w); height: var(--hand-h); pointer-events: auto;
  transform-origin: 50% 0; transition: transform 180ms var(--ease-out);
}
.ct-card.is-dragging { opacity: .25; }
.ct-card .cf { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.ct-card .cf-hand.is-playable { filter: drop-shadow(0 0 3px rgba(156, 245, 154, .95)) drop-shadow(0 0 9px rgba(156, 245, 154, .55)); }
.ct-card.is-sel .cf { filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 0 12px rgba(255, 215, 94, .7)) drop-shadow(0 12px 18px rgba(0, 0, 0, .6)); }

/* Лицо карты — как в окне (app/src/cards/cards.css .card, зоны ZONES из
   geometry.js): арт в арочном окне, поверх жестяная рамка frame-<редкость>,
   подписи живым текстом в зонах рамки. Кегли — в cqw от ширины карты
   (пиксели окна / 1.5: карта окна 150 px), поэтому одна вёрстка годится
   руке, полке, крупной карте и карте на столе. */
:is(.ct, .scr-cards) .cf {
  position: absolute; inset: 0; container-type: inline-size; color: #f2efe6; font-family: var(--font);
  -webkit-user-select: none; user-select: none;
}
:is(.ct, .scr-cards) .cf > * { position: absolute; pointer-events: none; }
:is(.ct, .scr-cards) .cf-art {
  left: 19.5%; top: 16.5%; width: 58.5%; height: 47.8%; overflow: hidden;
  background: linear-gradient(160deg, var(--cc), #23252d);
}
:is(.ct, .scr-cards) .cf-img { width: 100%; height: 100%; object-fit: cover; display: block; }
:is(.ct, .scr-cards) .cf-frame { left: 0; top: 0; width: 100%; height: 100%; display: block; }
:is(.ct, .scr-cards) .cf-name {
  left: 12%; top: 5.5%; width: 76%; height: 6%; display: flex; align-items: center; justify-content: center;
  padding: 0 1%; box-sizing: border-box; font-size: 10px; font-size: 10.67cqw; font-weight: 800; line-height: 1;
  white-space: nowrap; text-align: center; text-shadow: 0 1px 0 #000, 0 0 4px rgba(0, 0, 0, .9);
}
:is(.ct, .scr-cards) .cf-name.is-two { white-space: normal; line-height: .98; text-wrap: balance; }
:is(.ct, .scr-cards) .cf-emb { left: 50%; top: 65.6%; width: 20%; aspect-ratio: 1; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .7)); }
:is(.ct, .scr-cards) .cf-kind {
  left: 31%; top: 92%; width: 37.5%; height: 3.5%; display: flex; align-items: center; justify-content: center;
  font-size: 5px; font-size: 5cqw; font-weight: 800; letter-spacing: .04em; white-space: nowrap; color: var(--cc);
  text-shadow: 0 1px 0 #000, 0 0 3px rgba(0, 0, 0, .8);
}
:is(.ct, .scr-cards) .cf-cost {
  left: 22.8%; top: 16.7%; width: 22.6%; height: 14.8%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-size: 17.33cqw; font-weight: 900; line-height: 1; color: #fff3c4;
  text-shadow: 0 1px 0 #3a2d10, 0 0 6px rgba(0, 0, 0, .8);
}
:is(.ct, .scr-cards) .cf-atk, :is(.ct, .scr-cards) .cf-hp {
  top: 91.3%; width: 18%; height: 11%; transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-size: 20cqw; font-weight: 900; line-height: 1; color: #fff;
  text-shadow: 0 1px 0 #000, 0 0 5px rgba(0, 0, 0, .9);
}
:is(.ct, .scr-cards) .cf-atk { left: 14.5%; }
:is(.ct, .scr-cards) .cf-hp { left: 85.5%; }
:is(.ct, .scr-cards) .cf-hp.is-hurt { color: #ff8f7a; }
:is(.ct, .scr-cards) .cf-atk.is-up, :is(.ct, .scr-cards) .cf-hp.is-up { color: #9cf59a; }
:is(.ct, .scr-cards) .cf-text {
  left: 11%; top: 72%; width: 78%; height: 10.5%; display: flex; align-items: center; justify-content: center;
  padding: 0 2%; box-sizing: border-box; overflow: hidden;
  font-size: 6px; font-size: 6.33cqw; font-weight: 700; line-height: 1.08; text-align: center; text-shadow: 0 1px 0 #000;
}
:is(.ct, .scr-cards) .cf-text > span { display: block; max-width: 100%; }
:is(.ct, .scr-cards) .cf-text b { font-weight: 800; color: #ffd36a; }
:is(.ct, .scr-cards) .cf-text.is-flavor { font-style: italic; font-weight: 600; color: #cfc9bd; }
:is(.ct, .scr-cards) .cf.r-legend .cf-frame { filter: drop-shadow(0 0 4px rgba(255, 214, 90, .55)); }
:is(.ct, .scr-cards) .cf.r-epic .cf-frame { filter: drop-shadow(0 0 3px rgba(120, 150, 255, .45)); }
.ct-ghost {
  position: absolute; left: 0; top: 0; z-index: 60; width: var(--hand-w); height: var(--hand-h);
  pointer-events: none; transform-origin: 0 0;
}
.ct-ghost[hidden] { display: none; }
.ct-ghost .cf { filter: drop-shadow(0 0 3px var(--gold)) drop-shadow(0 24px 22px rgba(0, 0, 0, .6)); }
.ct-stage.is-zone .ct-slot-q { box-shadow: 0 0 0 3px rgba(160, 138, 230, .8), inset 0 0 20px rgba(160, 138, 230, .3); }

/* прицел, раскопка, дощечка */
.ct-aim {
  position: absolute; z-index: 40; transform: translateX(-50%); display: flex; align-items: center; gap: 8px;
  max-width: 70vw; padding: 4px 6px 4px 12px; border-radius: 999px; pointer-events: none;
  background: rgba(13, 15, 20, .88); box-shadow: inset 0 0 0 1px rgba(255, 215, 94, .45);
}
.ct-aim[hidden] { display: none; }
.ct-aim-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 800; color: #fff3c4; padding: 6px 0; }
.ct-aim-go {
  pointer-events: auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: #ffd75e; color: #2a1e04; font: inherit; font-size: 14px; font-weight: 900; cursor: pointer;
}
.ct-aim-go[hidden] { display: none; }
.ct-digchip {
  position: absolute; z-index: 41; transform: translateX(-50%); min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: #2b4a2b; color: #d9ffd8; font: inherit; font-size: 14px; font-weight: 900; box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
}
.ct-tray {
  position: absolute; z-index: 45; display: flex; gap: 6px; padding: 6px; border-radius: 16px;
  background: rgba(40, 32, 22, .97); box-shadow: inset 0 0 0 1px rgba(207, 164, 106, .5), 0 10px 26px rgba(0, 0, 0, .6);
}
.ct-tray[hidden] { display: none; }
:is(.ct, .scr-cards) .ci {
  display: grid; justify-items: center; gap: 2px; width: 72px; min-height: 72px; padding: 4px; border: 0; border-radius: 12px;
  background: rgba(0, 0, 0, .25); color: #f4e6cf; font: inherit; cursor: pointer; opacity: .55;
}
:is(.ct, .scr-cards) .ci.is-usable { opacity: 1; box-shadow: inset 0 0 0 2px #cfa46a; }
:is(.ct, .scr-cards) .ci-img { width: 40px; height: 40px; object-fit: contain; }
:is(.ct, .scr-cards) .ci-name { font-size: 12px; font-weight: 800; line-height: 1.1; text-align: center; }
.ct-tray-empty { padding: 10px; font-size: 13px; color: #f4e6cf; }

/* зрелище */
.ct-fx { position: absolute; inset: 0; pointer-events: none; z-index: 70; }
.ct-puff {
  position: absolute; width: 18px; height: 18px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(236, 232, 220, .75), rgba(236, 232, 220, 0) 70%);
}
.ct-float { position: absolute; transform: translate(-50%, 0); font-size: 24px; font-weight: 900; text-shadow: 0 2px 0 #000, 0 0 10px rgba(0, 0, 0, .8); white-space: nowrap; }
.ct-float.is-dmg { color: #ff6b5a; }
.ct-float.is-heal, .ct-float.is-buff { color: var(--up); }
.ct-float.is-save { color: var(--gold); font-size: 18px; }
.ct-banner {
  position: absolute; left: 50%; top: 42%; z-index: 65; transform: translate(-50%, -50%); max-width: 70vw;
  padding: 10px 22px; border-radius: 14px; background: rgba(13, 15, 20, .9); color: var(--chalk);
  font-size: 18px; font-weight: 900; text-align: center; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(236, 232, 220, .25), 0 10px 30px rgba(0, 0, 0, .6);
  animation: ctIn .22s var(--ease-out);
}
.ct-banner[hidden] { display: none; }
.ct-banner.is-me { color: #d9ffd8; }
.ct-banner.is-foe { color: #ffd4cd; }
.ct-banner.is-trap { color: #2a1e04; background: #ffd75e; }
@keyframes ctIn { from { opacity: 0; transform: translate(-50%, -40%); } }
.ct-say {
  position: absolute; z-index: 64; max-width: 240px; padding: 8px 12px; border-radius: 14px 14px 14px 4px;
  background: #ece8dc; color: #1d1b16; font-size: 14px; font-weight: 700; line-height: 1.3; pointer-events: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}
.ct-say[hidden] { display: none; }
.ct-reveal {
  position: absolute; left: 50%; top: 50%; z-index: 66; width: calc(var(--hand-w) * 2); height: calc(var(--hand-h) * 2);
  transform: translate(-50%, -50%); pointer-events: none; animation: ctPop .25s var(--ease-pop);
}
.ct-reveal[hidden] { display: none; }
.ct-reveal .cf { filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .7)); }
@keyframes ctPop { from { opacity: 0; transform: translate(-50%, -50%) scale(.6); } }
.ct-pv {
  position: absolute; left: 50%; top: 50%; z-index: 9; transform: translate(-50%, -50%); padding: 4px 8px; border-radius: 10px;
  background: rgba(13, 15, 20, .9); color: #ff8a7a; font-size: 16px; font-weight: 900; white-space: nowrap; pointer-events: none;
  box-shadow: inset 0 0 0 2px #ff8a7a;
}
.ct-pv.is-kill { background: #ff8a7a; color: #1d1b16; }
.ct-hero .ct-pv { top: 30%; }

/* оверлеи */
.ct-ov {
  position: absolute; inset: 0; z-index: 80; display: grid; place-items: center; overflow: auto;
  padding: max(8px, var(--ct-st, 0px)) max(12px, var(--ct-sr, 0px)) max(8px, var(--ct-sb, 0px)) max(12px, var(--ct-sl, 0px));
  background: rgba(8, 9, 12, .82); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ct-ov[hidden] { display: none; }
.ct-panel {
  display: grid; gap: 10px; width: min(380px, 100%); max-height: 100%; padding: 16px; border-radius: 18px;
  background: #1b1d24; box-shadow: inset 0 0 0 1px rgba(236, 232, 220, .16), 0 20px 50px rgba(0, 0, 0, .6);
}
.ct-panel-h { font-size: 18px; font-weight: 900; }
.ct-panel .cg-sw { background: rgba(255, 255, 255, .06); color: var(--chalk); }
.ct-panel .btn.is-danger { color: #ffb4a8; }
/* Стартовая рука — под пузырём обучения (он подсказывает именно её). */
.ct-ov.ct-mull { z-index: 74; }
.ct-mull-in { display: grid; justify-items: center; gap: 8px; max-width: 100%; }
.ct-mull-h { font-size: 17px; font-weight: 900; text-align: center; }
.ct-mull-sub { font-size: 13px; color: var(--chalk-dim); text-align: center; }
.ct-mull-cards { display: flex; gap: 10px; justify-content: center; flex-wrap: nowrap; }
.ct-mull-c, .ct-dig-o {
  position: relative; width: clamp(84px, 26vh, 120px); aspect-ratio: 150 / 229; padding: 0; border: 0; border-radius: 10px;
  background: none; cursor: pointer; font: inherit; color: inherit;
}
.ct-mull-c:disabled { opacity: .8; cursor: default; }
.ct-mull-x {
  position: absolute; inset: auto 6px 40% 6px; display: none; padding: 4px 0; border-radius: 8px;
  background: rgba(163, 34, 34, .92); color: #fff; font-size: 12px; font-weight: 900; text-align: center;
}
.ct-mull-c.is-swap .ct-mull-x { display: block; }
.ct-mull-c.is-swap .cf { opacity: .55; }
.ct-mull-c .cf, .ct-dig-o .cf { filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); }
.ct-mull-items { display: flex; gap: 8px; }
.ct-mull-it, .ct-dig-o.is-item {
  display: grid; justify-items: center; gap: 2px; width: 88px; min-height: 64px; padding: 6px; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, .06); color: var(--chalk); font: inherit; cursor: pointer;
}
.ct-dig-o.is-item { aspect-ratio: auto; width: 110px; }
.ct-mull-it.on { box-shadow: inset 0 0 0 2px var(--gold); background: rgba(255, 215, 94, .12); }
.ct-mull-it img, .ct-dig-o.is-item img { width: 36px; height: 36px; object-fit: contain; }
.ct-mull-it span, .ct-dig-o.is-item span { font-size: 12px; font-weight: 800; line-height: 1.15; text-align: center; }
.ct-mull-row { display: flex; align-items: center; gap: 12px; }
.ct-mull-left { font-size: 13px; font-weight: 800; color: var(--chalk-dim); }
.ct-mull-left.is-hurry { color: var(--hurt); }

/* крупная карта */
:is(.ct, .scr-cards) .cbig { display: flex; gap: 16px; align-items: center; max-width: 100%; max-height: 100%; }
:is(.ct, .scr-cards) .cf-big {
  position: relative; flex: none; width: var(--big-w, 200px); aspect-ratio: 150 / 229; height: auto; inset: auto;
  filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .7)); --fmin: 12px;
}
:is(.ct, .scr-cards) .cf-big .cf-kind { font-size: max(12px, 5cqw); }
:is(.ct, .scr-cards) .cf-big .cf-text { overflow: visible; }
:is(.ct, .scr-cards) .cbig-info { display: grid; gap: 6px; max-width: 300px; max-height: 80vh; overflow: auto; }
:is(.ct, .scr-cards) .cbig-name { font-size: 18px; font-weight: 900; }
:is(.ct, .scr-cards) .cbig-sub { font-size: 13px; color: var(--chalk-dim); }
:is(.ct, .scr-cards) .cbig-kw, :is(.ct, .scr-cards) .cbig-note { margin: 0; font-size: 14px; line-height: 1.35; }
:is(.ct, .scr-cards) .cbig-kw b { color: var(--gold); }
:is(.ct, .scr-cards) .cbig-item { padding: 16px; border-radius: 18px; background: #1b1d24; }
:is(.ct, .scr-cards) .cbig-itimg { width: 72px; height: 72px; object-fit: contain; flex: none; }
.ct-big-hint { position: absolute; bottom: max(6px, var(--ct-sb, 0px)); left: 0; right: 0; margin: 0; text-align: center; font-size: 12px; color: var(--chalk-dim); }

/* журнал и итог */
.ct-log-list { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.ct-lr {
  display: grid; gap: 4px; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 12px; text-align: left;
  background: rgba(255, 255, 255, .05); color: var(--chalk); font: inherit; cursor: pointer;
}
.ct-lr.is-foe { box-shadow: inset 3px 0 0 #ff8a7a; }
.ct-lr.is-me { box-shadow: inset 3px 0 0 #9cf59a; }
.ct-lr-t { font-size: 14px; font-weight: 800; }
.ct-lr-c { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-lr-c i { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.ct-log-empty { margin: 0; font-size: 14px; color: var(--chalk-dim); }
.ct-over-in { justify-items: center; text-align: center; }
.ct-over-h { font-size: 30px; font-weight: 900; color: #ffd4cd; }
.ct-over-in.is-win .ct-over-h { color: var(--gold); }
.ct-over-sub, .ct-over-net { margin: 0; font-size: 14px; color: var(--chalk-dim); }
.ct-over-reward { display: grid; gap: 4px; padding: 10px; border-radius: 12px; background: rgba(255, 215, 94, .1); font-size: 14px; }
.ct-over-reward[hidden] { display: none; }
.ct-over-b { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* обучение */
.ct-tutor {
  /* под оверлеями (меню партии, крупная карта, итог — 80+): подсказка не закрывает их кнопки */
  position: absolute; z-index: 76; width: min(340px, 46vw); padding: 12px 14px; border-radius: 16px;
  background: #ece8dc; color: #1d1b16; box-shadow: 0 14px 34px rgba(0, 0, 0, .6);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.ct-tutor[hidden] { display: none; }
/* Касание сквозь пузырь доходит до стола: подсказка не мешает сделать то, о чём просит. */
.ct-tutor { pointer-events: none; }
.ct-tutor button { pointer-events: auto; }
.ct-tutor-t { margin: 0 0 8px; font-size: 14px; font-weight: 700; line-height: 1.35; }
.ct-tutor-b { display: flex; gap: 8px; flex-wrap: wrap; }
.ct-tutor .btn.ghost { color: #1d1b16; background: rgba(0, 0, 0, .06); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.ct-tutor .btn[hidden] { display: none; }
.ct .tut-hi { outline: 3px solid #ffd75e; outline-offset: 3px; animation: ctTut 1.2s ease-in-out infinite; }
@keyframes ctTut { 50% { outline-color: rgba(255, 215, 94, .35); } }

/* лента истории (как в Hearthstone), стрелка прицела, эмоции */
.ct-hist { position: absolute; z-index: 6; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.ct-hi {
  position: relative; flex: none; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 10px; overflow: hidden;
  background: #2a2c34; box-shadow: inset 0 0 0 2px rgba(236, 232, 220, .25); cursor: pointer;
}
.ct-hi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-hi.is-me { box-shadow: inset 0 0 0 2px #9cf59a; }
.ct-hi.is-foe { box-shadow: inset 0 0 0 2px #ff8a7a; }
.ct-hi-c {
  position: absolute; left: 2px; top: 2px; z-index: 1; min-width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: #1d3a66; color: #fff3c4; font-size: 12px; font-weight: 900;
}
.ct-hi-c:empty { display: none; }
.ct-arrow { position: absolute; inset: 0; z-index: 62; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.ct-arrow[hidden] { display: none; }
.ct-arrow-l { fill: none; stroke: #ffd75e; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 2 13; }
.ct-arrow-h { fill: #ffd75e; stroke: #3a2d10; stroke-width: 2; }
.ct-emotes {
  position: absolute; z-index: 64; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 260px; padding: 8px;
  border-radius: 16px; background: rgba(27, 29, 36, .97); box-shadow: inset 0 0 0 1px rgba(236, 232, 220, .2), 0 12px 30px rgba(0, 0, 0, .6);
}
.ct-emotes[hidden] { display: none; }
.ct-emo {
  min-height: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .07);
  color: var(--chalk); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer;
}
.ct-say.is-me { border-radius: 14px 14px 14px 4px; background: #d9ffd8; }
:is(.ct, .scr-cards) .cbig-chain { display: grid; gap: 4px; align-self: center; max-width: 240px; font-size: 13px; }
:is(.ct, .scr-cards) .cbig-chain b { font-size: 14px; }
:is(.ct, .scr-cards) .cbig-chain span { padding: 2px 8px; border-radius: 8px; background: rgba(255, 255, 255, .08); }
.ct-big { grid-auto-flow: column; gap: 14px; }

@media (prefers-reduced-motion: reduce) {
  .ct-card, .ct-m, .ct-lit, .ct-slot-q { transition: none; }
  .ct-slot.is-target .ct-slot-q, .ct-m.is-target .cm::after, :is(.ct, .scr-cards) .cm-kw, .ct-hero.is-target, :is(.ct, .scr-cards) .cm-z, .ct .tut-hi, .ct-banner, .ct-reveal, .ct-hp.is-low { animation: none; }
  .ct-board-vid, .cg-scene-vid { display: none; }   /* петли — только постер (JS их и не запускает) */
}