/* «Биржевая дуэль» в оформлении «Кэпманов» (invest-site/src/pages/admin/kepmany.astro).
   Кадр 9:16, все размеры в cqw (1cqw = 1% ширины кадра), безопасные зоны --sat/--sab. Соответствие элементов — DESIGN-MAP.md */
:root { color-scheme: dark; --red: #d7261e; --blue: #2553c9; --ink: #120e0c; --cream: #f1e3c2; --gold: #e8b64a; --gold-2: #8a5a14; --bg: #0b0807;
  --silver: #c9d2dc; --good: #3fbf6a; --display: "Rubik Mono One", "Arial Black", sans-serif; --body: "Oswald", "Arial Narrow", sans-serif; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { display: grid; place-items: center; overflow: hidden; font-family: var(--body); color: var(--cream);
  background: linear-gradient(rgba(6,4,3,0.2), rgba(6,4,3,0.35)), url(../img/ui_desktop.webp) center / cover no-repeat, var(--bg); }
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.frame { position: relative; width: min(100vw, calc(100dvh * 9 / 16)); height: 100%; max-width: 100%; overflow: hidden; container-type: inline-size; background: #120c08;
  --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
  touch-action: none; overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (min-aspect-ratio: 3/4) { .frame { box-shadow: 0 0 0 0.35vh #8a5a14, 0 0 0 0.8vh #0b0807, 0 0 0 1.1vh #c9973a, 0 3vh 8vh rgba(0,0,0,0.9); } }
.stage { position: absolute; inset: 0; }
.layer { position: absolute; inset: 0; }
.safe { position: absolute; left: 0; right: 0; top: var(--sat); bottom: var(--sab); }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 60; }

/* ── Стол: медленный дрейф, затемнение, виньетка ── */
.bgwrap { position: absolute; inset: 0; overflow: hidden; }
.bg { position: absolute; inset: -6%; will-change: transform; background: url(../img/board.webp) center / cover; filter: brightness(0.55) saturate(0.85) contrast(1.08); animation: drift 40s ease-in-out infinite alternate; transition: opacity .6s; }
.bg.b2 { opacity: 0; }
.bg.dark { filter: brightness(0.92) saturate(0.9) contrast(1.05); } /* тёмные столы (клуб, Кремль, промысел, зимний завод) — затемнение Кэпманов рассчитано на светлый board */
@keyframes drift { from { transform: scale(1.04) translate(-1.2%, -0.8%) rotate(-0.4deg); } to { transform: scale(1.1) translate(1.2%, 0.8%) rotate(0.4deg); } }
.vign { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(75% 55% at 50% 48%, transparent 40%, rgba(0,0,0,0.65)); }

/* ── Кнопки ── */
.go { font: 5cqw var(--display); color: #1b1206; background: linear-gradient(180deg, #ffe39a, var(--gold) 45%, var(--gold-2)); border: 0.8cqw solid #000; border-radius: 99px;
  padding: 3cqw 6.4cqw; min-height: 44px; box-shadow: 0 0 6cqw rgba(232,182,74,0.55), 0.8cqw 0.8cqw 0 #000; white-space: nowrap; }
.go:active { transform: translateY(0.4cqw); }
.go.ghost { background: #1d1510; color: var(--cream); border-color: #5a4a3a; box-shadow: 0.8cqw 0.8cqw 0 #000; font: 700 4.4cqw var(--body); text-transform: uppercase; }
.go.sm { font-size: 3.6cqw; padding: 2cqw 4cqw; }
.go.ghost.sm { font-size: 3.8cqw; }

/* ── Ленты из генератора (ui_band / ui_ribbon) ── */
.band { display: inline-block; white-space: nowrap; font: 3.6cqw var(--display); color: #fff; background: none;
  border-style: solid; border-width: 0 1.6em; border-color: transparent; border-image: url(../img/ui_band.webp) 0 17% fill / 0 1.6em stretch;
  padding: 0.42em 0.3em 0.5em; -webkit-text-stroke: 0.12em #000; paint-order: stroke fill; filter: drop-shadow(0.8cqw 0.8cqw 0 rgba(0,0,0,0.85)); }
.band.blue { border-image-source: url(../img/ui_band_blue.webp); }
.ribbon { display: inline-block; white-space: nowrap; font: 3.4cqw var(--display); color: #fff; padding: 1.3cqw 3.2em 2.4cqw; background: url(../img/ui_ribbon.webp) center / 100% 100% no-repeat;
  -webkit-text-stroke: 0.12em #000; paint-order: stroke fill; filter: drop-shadow(0.5cqw 0.6cqw 0 rgba(0,0,0,0.8)); }
.ribbon.blue { background-image: url(../img/ui_ribbon_blue.webp); }

/* ── Подпись-суфлёр: жёлтая бумага, как в комиксе ── */
.cap { position: absolute; left: 5cqw; right: 5cqw; z-index: 45; padding: 2.4cqw 3.4cqw 2.6cqw; pointer-events: none;
  background: #ffe27a url(../img/ui_paper.webp) center / 60cqw auto; background-blend-mode: multiply; border: 0.8cqw solid #000; box-shadow: 1.4cqw 1.4cqw 0 #000;
  font: 700 4.4cqw/1.12 var(--body); color: #111; text-transform: uppercase; rotate: -1.2deg; }
.cap b { color: #b3120b; font-weight: 700; }
.cap.blue { background-color: #d9e6ff; rotate: 1.2deg; } .cap.blue b { color: #1d45b8; }
.cap.plain { text-transform: none; font-weight: 500; font-size: 4cqw; line-height: 1.25; }
.cap.plain b { font-weight: 700; }

/* ── Меню ── */
#menu { z-index: 10; }
#menu .safe { display: flex; flex-direction: column; align-items: center; padding: 5cqw 4cqw 13cqw; }
.logo { text-align: center; margin-top: 2cqw; }
.logo h1 { margin: 0; font: 9cqw/0.95 var(--display); color: #ffd21e; letter-spacing: -0.03em; -webkit-text-stroke: 1cqw #000; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #000; }
.logo h1 span { display: block; color: #fff; }
.logo .sub { display: inline-block; margin-top: 2.6cqw; }
.pick { margin: 3.4cqw 0 0; font: 700 3.6cqw var(--body); text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold); text-shadow: 0 0.3cqw 0 #000; }
.decks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3cqw 3cqw; width: 100%; margin-top: 1.4cqw; flex: 1; align-content: center; }
.dk { position: relative; display: flex; flex-direction: column; align-items: center; padding: 1.6cqw 1cqw 2cqw; background: rgba(10,7,5,0.55); border: 0.5cqw solid rgba(241,227,194,0.18); border-radius: 3cqw; min-height: 44px; }
.dk.sel { background: rgba(60,20,10,0.72); border-color: var(--gold); box-shadow: 0 0 6cqw rgba(232,182,74,0.45), inset 0 0 4cqw rgba(232,182,74,0.2); }
.medal { position: relative; width: 26cqw; aspect-ratio: 1; }
.medal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; border-radius: 50%; display: block; }
.medal::after { content: ""; position: absolute; inset: -15%; background: url(../img/ui_medal.webp) center / contain no-repeat; pointer-events: none; }
.dk .ribbon { position: relative; z-index: 2; margin-top: 1.4cqw; font-size: 3.1cqw; }
.dk .style { margin-top: 1cqw; font: 3cqw var(--display); color: var(--gold); letter-spacing: 0.02em; }
.dk .how { margin-top: 0.8cqw; font: 500 3.3cqw/1.18 var(--body); color: var(--cream); text-align: center; min-height: 7.8cqw; }
.dk .wins { position: absolute; right: 1.4cqw; top: 1.4cqw; z-index: 3; font: 2.6cqw var(--display); color: #1b1206; background: var(--gold); border: 0.4cqw solid #000; border-radius: 99px; padding: 0.6cqw 1.4cqw; }
.menu-actions { display: flex; gap: 3cqw; margin-top: 3cqw; }
.tapstart { margin-top: 2.2cqw; font: 500 3.2cqw var(--body); color: #d8cdb9; text-align: center; }

/* ── Партия: сетка стола ── */
#game { z-index: 5; }
.table { position: absolute; inset: 0; display: grid;
  grid-template-rows: 15cqw minmax(25cqw, 1fr) minmax(29cqw, auto) minmax(12cqw, 0.8fr) minmax(29cqw, auto) minmax(25cqw, 1fr) 35cqw; }

/* табло «ставка ЦБ / нефть» — латунная рамка ui_board, дорожки ui_track, бирки ui_tag */
.tablo { position: relative; z-index: 3; margin: 1cqw 2cqw 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; align-items: center;
  border-style: solid; border-color: transparent; border-width: 3.4cqw 3cqw; border-image: url(../img/ui_board.webp) 17% 10% 18% 10% fill / 3.4cqw 3cqw stretch; padding: 0 0.6cqw; }
.meter { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; column-gap: 1cqw; }
.meter .ml { font: 700 2.9cqw/1 var(--body); text-transform: uppercase; color: var(--cream); letter-spacing: 0.03em; white-space: nowrap; }
.meter .tr { grid-column: 1; position: relative; aspect-ratio: 900 / 148; background: url(../img/ui_track.webp) center / 100% 100% no-repeat; margin-top: 0.4cqw; }
.meter .ch { position: absolute; left: 14.5%; right: 15.1%; top: 33%; bottom: 36%; overflow: hidden; border-radius: 99px; }
.meter .ch i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; }
.meter.rate .ch i { background: linear-gradient(180deg, #ff9a80, #c8321e 45%, #6e0f08); }
.meter.oil .ch i { background: linear-gradient(180deg, #ffd98a, #b86a12 45%, #2a1404); }
.meter .ch s { position: absolute; top: 0; bottom: 0; width: 0.35cqw; background: rgba(0,0,0,0.55); }
.meter .tg { grid-column: 2; grid-row: 1 / span 2; font: 3.4cqw var(--display); color: #ffe9a8; text-shadow: 0 0.35cqw 0 #000; padding: 1.2cqw 2.6cqw; min-width: 13cqw; text-align: center;
  background: url(../img/ui_tag.webp) center / 100% 100% no-repeat; white-space: nowrap; }

/* стороны: колода, бюджет, герой, способность/рука соперника */
.side { position: relative; z-index: 4; display: grid; grid-template-columns: 1fr 26cqw 1fr; align-items: center; }
.side .l, .side .r { display: flex; align-items: center; gap: 2cqw; height: 100%; }
.side .l { justify-content: flex-start; padding-left: 3cqw; }
.side .r { justify-content: flex-end; padding-right: 3cqw; }
.me .l, .me .r { padding-bottom: 0; }

.hero { position: relative; width: 20cqw; aspect-ratio: 1; margin: 0 auto; border: 0; padding: 0; background: none; }
.hero .ring { position: absolute; inset: 0; border-radius: 50% 50% 46% 46%; }
.hero .ring img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; border-radius: inherit; display: block; }
.hero .ring::after { content: ""; position: absolute; inset: -15%; background: url(../img/ui_medal.webp) center / contain no-repeat; pointer-events: none; }
.enemy .hero .ring { box-shadow: 0 0 9cqw rgba(90,140,255,0.55); }
.me .hero .ring { box-shadow: 0 0 9cqw rgba(255,200,90,0.5); }
.hp { position: absolute; right: -4.4cqw; bottom: -1.6cqw; width: 10.4cqw; aspect-ratio: 298 / 267; display: grid; place-items: center; z-index: 3;
  background: url(../img/ui_heart.webp) center / contain no-repeat; font: 4.2cqw var(--display); color: #fff; -webkit-text-stroke: 0.7cqw #000; paint-order: stroke fill; text-shadow: 0 0.4cqw 0 #000; padding-bottom: 0.6cqw; }
.hp small { display: none; }
.hero .team { position: absolute; left: 50%; transform: translateX(-50%) rotate(-3deg); z-index: 2; font-size: 2.9cqw; }
.enemy .hero .team { bottom: -4.6cqw; }
.enemy .hp { bottom: auto; top: 6cqw; right: -8.4cqw; }
.me .hero .team { top: -5cqw; transform: translateX(-50%) rotate(2deg); }
.hero.target .ring, .hero.drop .ring { box-shadow: 0 0 0 1cqw #ff4a2a, 0 0 8cqw #ff3a1a; animation: pulse 0.9s ease-in-out infinite; }

.deck { position: relative; width: 10cqw; aspect-ratio: 0.7; flex: none; }
.deck i { position: absolute; inset: 0; border-radius: 1.2cqw; background: url(../img/card_back.webp) center / cover; box-shadow: 0 0 0 0.35cqw var(--ink), 0 0 0 0.8cqw var(--gold), 0 0 0 1.1cqw var(--ink); }
.deck i:nth-child(1) { transform: translate(1cqw, 1cqw); filter: brightness(0.45); } .deck i:nth-child(2) { transform: translate(0.5cqw, 0.5cqw); filter: brightness(0.7); }
.deck.blue i { box-shadow: 0 0 0 0.35cqw var(--ink), 0 0 0 0.8cqw #c9d2dc, 0 0 0 1.1cqw var(--ink); }
.deck b { position: absolute; right: -2.6cqw; top: -2.6cqw; z-index: 2; min-width: 6.4cqw; height: 6.4cqw; padding: 0 0.8cqw; border-radius: 99px; display: grid; place-items: center;
  font: 3cqw var(--display); color: var(--ink); background: var(--gold); border: 0.45cqw solid var(--ink); }
.deck.blue b { background: #dfe7ef; }
.deck.empty i { opacity: 0.25; }

/* бюджет: золотая монета с числом и ряд мини-монет */
.budget { display: flex; flex-direction: column; align-items: center; gap: 0.8cqw; }
.coin { position: relative; width: 10cqw; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff3b8, #f0c24a 38%, #b67a14 70%, #5b3804); box-shadow: 0 0 0 0.45cqw #000, 0 0 0 0.9cqw var(--cream), 0 0 0 1.3cqw #000, 0 0.8cqw 1.4cqw rgba(0,0,0,0.7);
  font: 4.4cqw var(--display); color: #fff; -webkit-text-stroke: 0.6cqw #000; paint-order: stroke fill; text-shadow: 0 0.3cqw 0 #000; }
.coin::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 0.35cqw dashed rgba(90,50,4,0.55); }
.budget .of { font: 700 2.5cqw/1 var(--body); color: var(--cream); text-transform: uppercase; white-space: nowrap; text-shadow: 0 0.3cqw 0 #000; }
.pips { display: flex; gap: 0.5cqw; }
.pips { flex-wrap: wrap; justify-content: center; max-width: 16cqw; }
.pips i { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: #2a211b; box-shadow: 0 0 0 0.3cqw #000, 0 0 0 0.6cqw rgba(241,227,194,0.5); }
.pips i.on { background: radial-gradient(circle at 35% 30%, #fff3b8, #f0c24a 45%, #8a5a14); }
.pips i.off { background: #3a2c1a; }

/* способность героя — латунный медальон, цена — монета */
.power { position: relative; width: 14cqw; aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 40% 35%, #5a2a14, #1a0c06 70%); box-shadow: 0 0 0 0.4cqw #000; min-width: 44px; min-height: 44px; }
.power::after { content: ""; position: absolute; inset: -16%; background: url(../img/ui_medal.webp) center / contain no-repeat; pointer-events: none; }
.power svg { position: absolute; inset: 22%; width: 56%; height: 56%; fill: var(--cream); filter: drop-shadow(0 0.3cqw 0 #000); }
.power .gem.c { position: absolute; left: -2.4cqw; top: -2.4cqw; width: 6cqw; font-size: 3.2cqw; }
.power .pn { position: absolute; left: 50%; bottom: -5.2cqw; transform: translateX(-50%); white-space: nowrap; font: 700 2.6cqw/1 var(--body); text-transform: uppercase; color: var(--cream); text-shadow: 0 0.3cqw 0 #000; }
.power.ready { animation: glowp 1.3s ease-in-out infinite; }
.power.used { filter: grayscale(1) brightness(0.55); }
@keyframes glowp { 50% { box-shadow: 0 0 0 0.4cqw #000, 0 0 6cqw 1cqw rgba(255,210,80,0.9); } }
.backs { position: relative; height: 12cqw; width: 26cqw; }
.backs i { position: absolute; top: 0; width: 7.4cqw; aspect-ratio: 0.7; border-radius: 0.9cqw; background: url(../img/card_back.webp) center / cover; box-shadow: 0 0 0 0.3cqw var(--ink), 0 0 0 0.6cqw #c9d2dc, 0 0 0 0.85cqw var(--ink); transform-origin: 50% 120%; }
.backs b { position: absolute; right: -1.4cqw; bottom: -1.2cqw; z-index: 9; font: 2.8cqw var(--display); color: var(--ink); background: #dfe7ef; border: 0.4cqw solid var(--ink); border-radius: 99px; padding: 0.5cqw 1.3cqw; }

/* ряды бумаг */
.row { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 2.4cqw; --fs: 1; }
.row.n4 { --fs: 0.93; } .row.n5 { --fs: 0.83; gap: 1.5cqw; }
.row .empty { font: 500 3.3cqw var(--body); color: rgba(241,227,194,0.6); text-align: center; padding: 0 8cqw; text-transform: uppercase; letter-spacing: 0.04em; }
.row.drop { background: radial-gradient(60% 50% at 50% 50%, rgba(255,210,90,0.25), transparent 70%); }
.row.drop .empty { color: var(--gold); }

/* ── Карта на столе и в руке: рамка как у больших карт, только меньше ── */
.min { position: relative; width: calc(21cqw * var(--fs, 1)); aspect-ratio: 0.7; flex: none; border: 0; padding: 0; background: none; }
.mcard { position: absolute; inset: 0; border-radius: calc(1.8cqw * var(--fs)); padding: calc(0.8cqw * var(--fs));
  background: linear-gradient(160deg, #fff1c0, var(--gold) 25%, var(--gold-2) 55%, var(--gold) 80%, #fff1c0);
  box-shadow: 0 0 0 0.4cqw var(--ink), 0 0 0 0.9cqw var(--cream), 0 0 0 1.2cqw var(--ink), 0 2cqw 3.4cqw rgba(0,0,0,0.8); }
.min.blue .mcard { background: linear-gradient(160deg, #fff, #c9d2dc 25%, #5c6a78 55%, #c9d2dc 80%, #fff); }
.mcard .mf { position: absolute; inset: calc(0.8cqw * var(--fs)); border-radius: calc(1.2cqw * var(--fs)); overflow: hidden; background: var(--ink); display: grid; grid-template-rows: 58% auto 1fr; }
.mcard .art { background-size: cover; background-position: center; }
.mcard .nm { background: var(--ink); color: #f3e6c8; text-shadow: 0 0.3cqw 0 #000; text-align: center; font: calc(2.6cqw * var(--fs))/1 var(--display); padding: calc(0.8cqw * var(--fs)) 0.3cqw;
  border-top: 0.35cqw solid var(--gold); border-bottom: 0.6cqw solid var(--brand, var(--gold)); white-space: nowrap; overflow: hidden; }
.min.blue .mcard .nm { border-top-color: #c9d2dc; }
.mcard .nm.narrow { font: 700 calc(3cqw * var(--fs, 1))/1.02 var(--body); white-space: normal; letter-spacing: 0.01em; padding-top: calc(0.5cqw * var(--fs, 1)); padding-bottom: calc(0.6cqw * var(--fs, 1)); text-transform: uppercase; }
.mcard .sh { background: var(--cream); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: calc(0.6cqw * var(--fs)); padding: 0 calc(1cqw * var(--fs)); overflow: hidden;
  font: 700 calc(2.6cqw * var(--fs))/1 var(--body); text-transform: uppercase; letter-spacing: 0.01em; white-space: nowrap; }
.mcard .logo { position: absolute; right: calc(1.4cqw * var(--fs)); top: calc(1.4cqw * var(--fs)); width: calc(5.8cqw * var(--fs)); aspect-ratio: 1; border-radius: 24%; background: #fff center / contain no-repeat; background-origin: content-box; padding: calc(0.3cqw * var(--fs)); box-shadow: 0 0 0 0.3cqw var(--ink), 0 0.4cqw 0.8cqw rgba(0,0,0,0.6); z-index: 2; }

/* жетоны: атака, жизни, цена (монета) — графика из генератора на тёмной лаковой подложке */
.gem { position: absolute; width: 8.6cqw; aspect-ratio: 1; display: grid; place-items: center; font: 4.4cqw var(--display); color: #fff; z-index: 4;
  border: 0; border-radius: 50%; background: center / 80% no-repeat, radial-gradient(circle at 40% 35%, #3a2a1c, #0d0906 70%);
  -webkit-text-stroke: 0.6cqw #000; paint-order: stroke fill; text-shadow: 0 0.3cqw 0 #000; box-shadow: 0 0 0 0.35cqw #f1e3c2, 0 0 0 0.7cqw #000, 0 0.6cqw 1cqw rgba(0,0,0,0.75); }
.gem.a { background-image: url(../img/ui_attack.webp), radial-gradient(circle at 40% 35%, #3a2a1c, #0d0906 70%); }
.gem.h { background-image: url(../img/ui_heart.webp), radial-gradient(circle at 40% 35%, #3a2a1c, #0d0906 70%); }
.gem.c { background: radial-gradient(circle at 36% 30%, #fff3b8, #f0c24a 38%, #b67a14 70%, #5b3804); }
.gem.c::before { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 0.3cqw dashed rgba(90,50,4,0.6); }
.gem.up { color: #8dff9e; } .gem.down { color: #ff8a70; }
.min .gem { width: calc(6.8cqw * var(--fs)); font-size: calc(3.6cqw * var(--fs)); bottom: calc(-1.9cqw * var(--fs)); }
.min .gem.a { left: calc(-1.4cqw * var(--fs)); } .min .gem.h { right: calc(-1.4cqw * var(--fs)); }
.min .gem.c { left: calc(-1.6cqw * var(--fs)); top: calc(-1.6cqw * var(--fs)); bottom: auto; }
.row.n5 .min .gem { width: 5.8cqw; font-size: 3.3cqw; } .row.n5 .min .gem.a { left: -0.6cqw; } .row.n5 .min .gem.h { right: -0.6cqw; }

/* свойства — маленькие жетоны со знаком */
.kw { position: relative; flex: none; display: inline-grid; place-items: center; width: calc(3.8cqw * var(--fs, 1)); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #3a2a1c, #0d0906 70%); box-shadow: 0 0 0 0.25cqw #000; }
.kw svg { width: 68%; height: 68%; fill: #f1e3c2; }
.kw.taunt svg { fill: #9cc2ff; } .kw.shield svg { fill: #ffd76a; } .kw.charge svg { fill: #ffb03a; } .kw.growth svg { fill: #7dff9e; } .kw.inc svg { fill: #ffd76a; }
.kw em { position: absolute; right: -0.9cqw; bottom: -0.7cqw; font: normal calc(2.3cqw * var(--fs, 1))/1 var(--display); color: #fff; -webkit-text-stroke: 0.35cqw #000; paint-order: stroke fill; }
.sh .sec { overflow: hidden; text-overflow: ellipsis; }

/* состояния бумаг */
.shieldfx { position: absolute; inset: -1.6cqw; border-radius: 2.6cqw; border: 0.8cqw solid #9cc2ff; box-shadow: 0 0 4cqw #6c9bff, inset 0 0 4cqw #6c9bff; opacity: 0; z-index: 3; pointer-events: none; }
.min.taunt .shieldfx { opacity: 0.85; }
.hedgefx { position: absolute; inset: -1cqw; border-radius: 45%; background: radial-gradient(ellipse at 50% 45%, rgba(255,230,140,0) 55%, rgba(255,215,106,0.45) 72%, rgba(255,240,180,0.9) 78%, transparent 80%); opacity: 0; z-index: 5; pointer-events: none; }
.min.shield .hedgefx { opacity: 1; animation: hedge 2.4s ease-in-out infinite; }
@keyframes hedge { 50% { filter: brightness(1.35); } }
.min.frozen .mcard { filter: saturate(0.3) brightness(0.85) hue-rotate(170deg); }
.min.frozen::after { content: ""; position: absolute; inset: 0; border-radius: 1.8cqw; z-index: 5; pointer-events: none; background: linear-gradient(160deg, rgba(200,230,255,0.55), rgba(120,170,255,0.15) 40%, rgba(200,230,255,0.5)); box-shadow: inset 0 0 3cqw #cfe6ff; }
.min.sleep .mcard { filter: brightness(0.78); }
.min.ready { animation: ready 1.4s ease-in-out infinite; }
@keyframes ready { 50% { filter: drop-shadow(0 0 2.6cqw rgba(255,210,80,0.95)); } }
.min.sel, .hcard.sel { filter: drop-shadow(0 0 3cqw #fff2b0) brightness(1.1); }
.min.target { animation: pulse 0.9s ease-in-out infinite; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 3cqw #ff3a1a) brightness(1.12); } }
.min.target.fr { animation-name: pulseg; }
@keyframes pulseg { 50% { filter: drop-shadow(0 0 3cqw #ffd76a) brightness(1.15); } }
.min.drop { filter: drop-shadow(0 0 3cqw #fff) brightness(1.2); }
.crack { position: absolute; inset: 0; z-index: 6; opacity: 0; pointer-events: none; border-radius: 1.8cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 125'%3E%3Cg fill='none' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M52 0 L46 30 L58 44 L40 66 L55 84 L47 125 M46 30 L20 38 L6 30 M58 44 L84 52 L100 46 M40 66 L14 82 M55 84 L82 98' stroke='%23000' stroke-width='6'/%3E%3Cpath d='M52 0 L46 30 L58 44 L40 66 L55 84 L47 125 M46 30 L20 38 L6 30 M58 44 L84 52 L100 46 M40 66 L14 82 M55 84 L82 98' stroke='%23fff6d0' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat; }

/* середина: новость скоро, подсказка, конец хода */
.mid { position: relative; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 0 3cqw; gap: 2cqw; }
.newsTag { display: flex; align-items: center; gap: 1.6cqw; min-height: 44px; border: 0; padding: 0; background: none; text-align: left; }
.newsTag .ni { width: 9cqw; aspect-ratio: 1; border-radius: 1.4cqw; background: center / cover; box-shadow: 0 0 0 0.4cqw #000, 0 0 0 0.8cqw var(--cream), 0 0 0 1.1cqw #000; flex: none; }
.newsTag .nt { font: 700 2.8cqw/1.15 var(--body); text-transform: uppercase; color: var(--cream); text-shadow: 0 0.3cqw 0 #000; }
.newsTag .nt b { display: block; font: 2.8cqw/1.1 var(--display); color: var(--gold); }
.newsTag.soon .ni { animation: pulse 1.1s ease-in-out infinite; }
.endturn { font: 3.3cqw/1.05 var(--display); padding: 2.2cqw 3.6cqw; min-height: 44px; text-align: center; }
.endturn:disabled { background: #2a211b; color: rgba(241,227,194,0.55); box-shadow: 0.8cqw 0.8cqw 0 #000; border-color: #000; }
.endturn.nomoves { animation: glowp2 1.1s ease-in-out infinite; }
@keyframes glowp2 { 50% { box-shadow: 0 0 7cqw 1.4cqw rgba(255,210,80,0.9), 0.8cqw 0.8cqw 0 #000; transform: scale(1.05); } }

/* рука: веер, важное — у левого края */
.hand { position: relative; z-index: 7; }
.hcard { position: absolute; bottom: 5.4cqw; transform-origin: 50% 110%; transition: transform .18s ease, bottom .18s ease; --fs: 1; }
.hcard .mcard .nm { text-align: left; padding-left: 1.3cqw; }
.hcard .mcard .sh { justify-content: flex-start; padding-left: 1.3cqw; }
.hcard .logo { display: none; }
.hcard .gem.h { right: auto; left: calc(-1.4cqw * var(--fs)); top: calc(5.8cqw * var(--fs)); bottom: auto; }
.hcard .mcard .nm, .hcard .mcard .sh { padding-right: var(--hid, 0); }
.hcard.unaff .mcard .mf { filter: grayscale(0.55) brightness(0.78); }
.hcard.unaff .gem.c { filter: grayscale(1) brightness(0.8); }
.hcard.playable .mcard { box-shadow: 0 0 0 0.4cqw var(--ink), 0 0 0 0.9cqw var(--cream), 0 0 0 1.2cqw var(--ink), 0 0 4cqw 0.6cqw rgba(120,255,140,0.75); }
.hcard.lift { bottom: 9cqw; z-index: 30 !important; }
.menubtn { position: absolute; right: 2cqw; bottom: calc(var(--sab) + 2cqw); z-index: 65; width: max(11cqw, 44px); height: max(11cqw, 44px); display: grid; place-items: center; padding: 0;
  font: 700 6cqw/1 var(--body); color: var(--cream); background: rgba(10,7,5,0.82); border: 0.45cqw solid #5a4a3a; border-radius: 50%; }
.live { position: absolute; right: 2cqw; bottom: calc(var(--sab) + 15cqw); z-index: 66; display: flex; flex-direction: column; gap: 1.6cqw; padding: 2cqw; min-width: 46cqw;
  background: rgba(10,7,5,0.95); border: 0.5cqw solid #5a4a3a; border-radius: 3cqw; box-shadow: 1cqw 1cqw 0 #000; }
.live button { font: 700 3.8cqw var(--body); text-transform: uppercase; color: var(--cream); background: rgba(10,7,5,0.8); border: 0.4cqw solid #5a4a3a; border-radius: 99px; padding: 1.6cqw 3cqw; min-height: 44px; text-align: left; }
.live button[aria-pressed="true"] { background: var(--gold); color: #1b1206; border-color: #000; }

/* ── Слой эффектов ── */
#fxl { position: absolute; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.flyc { position: absolute; left: 0; top: 0; width: 27.5cqw; aspect-ratio: 0.7; pointer-events: none; transform-style: preserve-3d; }
.flyc .fb, .flyc .ff { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.flyc .fb { border-radius: 2.4cqw; background: url(../img/card_back.webp) center / cover; box-shadow: 0 0 0 0.6cqw var(--ink), 0 0 0 1.4cqw var(--gold), 0 0 0 1.9cqw var(--ink), 0 3cqw 6cqw rgba(0,0,0,0.8); transform: rotateY(180deg); }
.flyc.blue .fb { box-shadow: 0 0 0 0.6cqw var(--ink), 0 0 0 1.4cqw #c9d2dc, 0 0 0 1.9cqw var(--ink), 0 3cqw 6cqw rgba(0,0,0,0.8); }
.flyc .ff .card { position: absolute; inset: 0; width: 100%; }
.dmg { position: absolute; z-index: 5; font: 9cqw/1 var(--display); color: #fff; -webkit-text-stroke: 0.6cqw var(--red); paint-order: stroke fill; text-shadow: 0 0.7cqw 0 #000; white-space: nowrap; }
.dmg.heal { -webkit-text-stroke-color: #1f8a3c; }
.dmg.buff { -webkit-text-stroke-color: #8a5a14; color: #ffe9a8; font-size: 6.4cqw; }
.dmg.info { -webkit-text-stroke-color: #1f3f8f; font-size: 5.4cqw; }
.dmg.sm { font-size: 6cqw; }
.bam { position: absolute; width: 34cqw; aspect-ratio: 1.15; display: grid; place-items: center; z-index: 4; background: url(../img/ui_bam.webp) center / contain no-repeat; }
.bam.blue { background-image: url(../img/ui_bam_blue.webp); }
.bam b { position: relative; font: 6.8cqw var(--display); color: #fff; -webkit-text-stroke: 0.9cqw #000; paint-order: stroke fill; text-shadow: 0.8cqw 0.8cqw 0 var(--red); transform: rotate(-6deg); white-space: nowrap; }
.bam.blue b { text-shadow: 0.8cqw 0.8cqw 0 var(--blue); }
.boom { position: absolute; width: 40cqw; aspect-ratio: 1; margin: -20cqw 0 0 -20cqw; z-index: 3; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 12%, #ffe07a 22%, #ff8a1e 40%, rgba(215,38,30,0.8) 55%, rgba(40,10,5,0.5) 68%, transparent 72%); }
.debris { position: absolute; width: 2.4cqw; height: 2.4cqw; z-index: 3; background: #ffcf5a; border: 0.3cqw solid #000; }
.shard { position: absolute; z-index: 4; width: 5cqw; height: 5cqw; background: linear-gradient(135deg, var(--gold), #6b4204); clip-path: polygon(0 0, 100% 30%, 60% 100%); }
.shard.blue { background: linear-gradient(135deg, #eef3f8, #4a5664); }
.cn { position: absolute; width: 7.6cqw; aspect-ratio: 1; margin: -3.8cqw 0 0 -3.8cqw; z-index: 6; border-radius: 50%;
  background: url(../img/ui_coins.webp) 0 50% / auto 100% no-repeat; filter: drop-shadow(0 0 1.4cqw rgba(255,210,90,0.9)) drop-shadow(0 0.4cqw 0.4cqw rgba(0,0,0,0.6)); }
.cn.big { width: 10cqw; margin: -5cqw 0 0 -5cqw; }
.rays { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; }
.rays line { stroke-linecap: round; }
.arrowl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; }
.arrowl line { stroke: #ffd21e; stroke-width: 1.4; stroke-dasharray: 3 2; filter: drop-shadow(0 0 1px #000); }
.dragghost { position: absolute; z-index: 45; pointer-events: none; transform: translate(-50%, -60%) rotate(-4deg) scale(1.12); filter: drop-shadow(0 3cqw 3cqw rgba(0,0,0,0.7)); }
.rnd { position: absolute; left: 0; right: 0; margin-inline: auto; width: fit-content; z-index: 8; font-size: 6cqw; rotate: -4deg; }

/* ── Большая карта ── */
.card { position: relative; width: 27.5cqw; aspect-ratio: 0.7; border-radius: 3cqw; padding: 1.2cqw;
  background: linear-gradient(160deg, #fff1c0, var(--gold) 25%, var(--gold-2) 55%, var(--gold) 80%, #fff1c0) 0 0 / 200% 200%;
  box-shadow: 0 0 0 0.6cqw var(--ink), 0 0 0 1.4cqw var(--cream), 0 0 0 1.9cqw var(--ink), 0 3cqw 6cqw rgba(0,0,0,0.8), 0 0 7cqw rgba(255,200,90,0.35); animation: metal 6s linear infinite; }
@keyframes metal { 50% { background-position: 100% 100%; } }
.card.blue { background: linear-gradient(160deg, #fff, #c9d2dc 25%, #5c6a78 55%, #c9d2dc 80%, #fff) 0 0 / 200% 200%; box-shadow: 0 0 0 0.6cqw var(--ink), 0 0 0 1.4cqw var(--cream), 0 0 0 1.9cqw var(--ink), 0 3cqw 6cqw rgba(0,0,0,0.8), 0 0 7cqw rgba(120,160,255,0.35); }
.card .face { position: absolute; inset: 1.2cqw; border-radius: 2cqw; overflow: hidden; background: var(--ink); display: grid; grid-template-rows: 54% auto 1fr; }
.card.spell .share { padding-bottom: 1.4cqw; }
.card.spell .face { grid-template-rows: 44% auto 1fr; }
.card .face::after { content: ""; position: absolute; inset: -20%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.75) 48%, rgba(255,255,255,0.1) 53%, transparent 60%) 130% 0 / 250% 100%; }
.card.shine .face::after { animation: glint 1s ease-out 1 forwards; }
@keyframes glint { 0% { background-position: 150% 0; opacity: 1; } 75% { opacity: 1; } 100% { background-position: -150% 0; opacity: 0; } }
.card .art { background-size: cover; background-position: center; }
.card .name { background: var(--ink); color: #f3e6c8; text-shadow: 0 0.3cqw 0 #000; text-align: center; font: 3.1cqw/1 var(--display); padding: 1.3cqw 0.6cqw;
  border-top: 0.5cqw solid var(--gold); border-bottom: 0.8cqw solid var(--brand, var(--gold)); white-space: nowrap; overflow: hidden; }
.card.blue .name { border-top-color: #c9d2dc; }
.card .name.narrow { font: 700 4.2cqw/1.05 var(--body); padding: 0.9cqw 0.8cqw 1cqw; white-space: normal; text-wrap: balance; }
.card .share { background: var(--cream); color: var(--ink); display: flex; flex-direction: column; justify-content: safe center; gap: 0.6cqw; padding: 1cqw 1.8cqw 3.2cqw; font: 500 2.5cqw/1.15 var(--body); text-align: center; overflow: hidden; }
.card .share .kind { font: 1.9cqw var(--display); color: #8a5a14; letter-spacing: 0.02em; }
.card .share em { font-style: normal; font-weight: 700; }
.card .logo { position: absolute; right: 2.6cqw; top: 2.6cqw; width: 6.8cqw; aspect-ratio: 1; border-radius: 24%; background: #fff center / contain no-repeat; background-origin: content-box; padding: 0.35cqw; box-shadow: 0 0 0 0.4cqw var(--ink); z-index: 2; }
.card .gem { width: 7.4cqw; font-size: 3.8cqw; bottom: -2cqw; }
.card .gem.a { left: -2cqw; } .card .gem.h { right: -2cqw; }
.card .gem.c { left: -2cqw; top: -2cqw; bottom: auto; }

/* ── Крупный план ── */
.focus { position: absolute; inset: 0; z-index: 22; pointer-events: none; opacity: 0; }
.focus .dim { position: absolute; inset: 0; background: radial-gradient(70% 45% at 50% 52%, rgba(0,0,0,0.55), rgba(0,0,0,0.86)); }
.focus .ftitle { position: absolute; left: 4cqw; right: 4cqw; text-align: center; font: 5.4cqw/1.05 var(--display); color: #fff; -webkit-text-stroke: 0.25cqw #000; paint-order: stroke fill; text-shadow: 0 0.6cqw 0 #000; text-wrap: balance; }
.focus .ftitle b { color: var(--gold); font-weight: 400; }
.focus .fc { position: absolute; left: 0; top: 0; }
.focus .fc .card.fr { box-shadow: 0 0 0 0.6cqw var(--ink), 0 0 0 1.4cqw var(--cream), 0 0 0 1.9cqw var(--ink), 0 0 9cqw 1cqw rgba(235,60,40,0.85); }
.focus .fc .card.fb { box-shadow: 0 0 0 0.6cqw var(--ink), 0 0 0 1.4cqw var(--cream), 0 0 0 1.9cqw var(--ink), 0 0 9cqw 1cqw rgba(90,140,255,0.9); }
.focus .fteam { position: absolute; transform: translateX(-50%); font-size: 2.7cqw; }
.focus .fbolt { position: absolute; width: 12cqw; margin-left: -6cqw; text-align: center; font: 9cqw/1 sans-serif; filter: drop-shadow(0 0 2cqw #ffd21e); }
.focus .farrow { position: absolute; width: 4cqw; margin-left: -2cqw; background: linear-gradient(#ffd21e, #ff9a1e); clip-path: polygon(50% 0, 100% 3.2cqw, 68% 3.2cqw, 68% 100%, 32% 100%, 32% 3.2cqw, 0 3.2cqw); filter: drop-shadow(0 0 1.4cqw #ffd21e); }
.focus .farrow.down { transform: scaleY(-1); }
.focus .fstamp { position: absolute; z-index: 14; white-space: nowrap; font: 6.4cqw/1 var(--display); color: #d2261c; padding: 2.2cqw 5.4cqw;
  background: url(../img/ui_stamp.webp) center / 100% 100% no-repeat; opacity: 0; }

/* ── Новость рынка — «лебедь» ── */
.swan { position: absolute; inset: 0; z-index: 24; display: none; overflow: hidden; }
.swan .sky { position: absolute; inset: 0; opacity: 0; background: radial-gradient(90% 60% at 50% 35%, rgba(30,20,10,0.6), rgba(0,0,0,0.9) 70%); }
.swan.black .sky { background: radial-gradient(90% 60% at 50% 35%, rgba(90,0,0,0.55), rgba(0,0,0,0.93) 70%); }
.swan.white .sky { background: linear-gradient(90deg, transparent 30%, rgba(255,236,170,0.45) 50%, transparent 70%), radial-gradient(90% 60% at 50% 30%, rgba(255,230,160,0.45), rgba(20,12,4,0.9) 70%); }
.swan .bird { position: absolute; left: 0; top: 18%; width: 72cqw; opacity: 0; pointer-events: none; }
.swan.black .bird { filter: drop-shadow(0 0 2.4cqw rgba(255,40,20,0.7)); } .swan.white .bird { filter: drop-shadow(0 0 2.4cqw rgba(255,210,90,0.9)); }
.swan .feather { position: absolute; left: 30%; top: 26%; width: 2.6cqw; height: 6.4cqw; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; opacity: 0; background: #111; box-shadow: 0 0 1cqw rgba(255,40,20,0.6); }
.swan.white .feather { background: #fff; box-shadow: 0 0 1cqw rgba(255,210,90,0.8); }
.swan .scard { position: absolute; left: 50%; top: 12%; width: 66cqw; margin-left: -33cqw; transform-style: preserve-3d; backface-visibility: hidden;
  background: var(--cream); border: 1.2cqw solid var(--ink); box-shadow: 2.4cqw 2.4cqw 0 var(--red); }
.swan .scard img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-bottom: 1cqw solid var(--ink); }
.swan .scard .kick { display: inline-block; font: 2.6cqw var(--display); color: #fff; background: var(--red); padding: 0.8cqw 2cqw; margin: 2.6cqw 0 0 3.4cqw; letter-spacing: 0.04em; }
.swan .scard h2 { margin: 1.4cqw 3cqw 1.4cqw; font: 5.2cqw/1.02 var(--display); color: var(--red); letter-spacing: -0.02em; font-weight: 400; }
.swan .scard p { margin: 0 3cqw 3cqw; font: 500 3.6cqw/1.25 var(--body); color: #3a2a14; }
.swan.black .scard { background: #0d0b0a; border-color: #000; box-shadow: 0 0 0 0.7cqw #b3140c, 2.4cqw 2.4cqw 0 #000, 0 0 8cqw rgba(255,30,10,0.55); }
.swan.black .scard img { border-bottom-color: #b3140c; }
.swan.black .scard .kick { background: #b3140c; } .swan.black .scard h2 { color: #fff; } .swan.black .scard p { color: #e8dcd0; }
.swan.white .scard { background: #fffaf0; border-color: #1b1206; box-shadow: 0 0 0 0.7cqw var(--gold), 2.4cqw 2.4cqw 0 #1b1206, 0 0 8cqw rgba(255,210,90,0.8); }
.swan.white .scard img { border-bottom-color: var(--gold); }
.swan.white .scard .kick { background: var(--gold); color: #1b1206; } .swan.white .scard h2 { color: #1b1206; }
.swan .wave { position: absolute; left: 50%; top: 14%; width: 60cqw; aspect-ratio: 1; margin-left: -30cqw; border-radius: 50%; opacity: 0; border: 1.2cqw solid #ffd76a; }
.swan.black .wave { border-color: #ff3a2a; }
.swan .roll { position: absolute; left: 5cqw; right: 5cqw; display: grid; grid-template-columns: auto 1fr; gap: 3cqw; align-items: center; padding: 3cqw 6cqw;
  background: url(../img/ui_frame_wide.webp) center / 100% 100% no-repeat; isolation: isolate; }
.swan .roll::before { content: ""; position: absolute; inset: 1.4cqw 1.6cqw; z-index: -1; background: rgba(10,7,4,0.92); }
.die { position: relative; width: 15cqw; aspect-ratio: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 2cqw; gap: 0.6cqw;
  background: #fff8e6; border: 0.6cqw solid #000; border-radius: 2.6cqw; box-shadow: 0.8cqw 0.8cqw 0 #000; }
.die i { border-radius: 50%; background: transparent; margin: 0.3cqw; }
.die i.on { background: #1b1206; }
.die.red i.on:only-of-type { background: var(--red); }
.odds { display: grid; gap: 0.8cqw; }
.odds div { display: grid; grid-template-columns: 8.6cqw 1fr; gap: 1.6cqw; align-items: center; font: 700 3.2cqw/1.1 var(--body); text-transform: uppercase; color: rgba(241,227,194,0.75); padding: 0.4cqw 1cqw; border-radius: 1cqw; }
.odds div span:first-child { font: 2.8cqw var(--display); color: var(--gold); white-space: nowrap; }
.odds div.hit { background: var(--gold); color: #1b1206; }
.odds div.hit span:first-child { color: #1b1206; }

/* ── Представление (синий / красный угол) ── */
.intro { z-index: 35; overflow: hidden; background: var(--c-deep); display: none; }
.intro.blue { --c: #1f3f8f; --c-deep: #0a1430; --c-hi: #6c9bff; --metal: linear-gradient(90deg, #fff, #c9d2dc 30%, #5c6a78 60%, #eef3f8); --beam: rgba(150,190,255,0.5); }
.intro.red { --c: var(--red); --c-deep: #2a0806; --c-hi: #ff7a5c; --metal: linear-gradient(90deg, #fff1c0, var(--gold) 30%, var(--gold-2) 60%, #ffe7a0); --beam: rgba(255,190,120,0.5); }
.intro .ph { position: absolute; left: 0; right: 0; top: 0; height: 75.4%; overflow: hidden; }
.intro .ph img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; transform-origin: 50% 18%; will-change: transform; animation: cam 18s ease-in-out infinite alternate; }
.intro.red .ph img { animation-name: camR; }
@keyframes cam { from { transform: scale(1.14) translate(-1.5%, 1%) rotate(-0.6deg); } to { transform: scale(1.03) translate(1.5%, 0) rotate(0.3deg); } }
@keyframes camR { from { transform: scale(1.14) translate(1.5%, 1%) rotate(0.6deg); } to { transform: scale(1.03) translate(-1.5%, 0) rotate(-0.3deg); } }
.intro .ph .beam { position: absolute; left: 20%; top: -20%; width: 60%; height: 140%; pointer-events: none; mix-blend-mode: screen; opacity: 0.35; background: linear-gradient(180deg, var(--beam), transparent 75%); clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); transform: rotate(-3deg); }
.intro .ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--c-deep) 70%, transparent) 78%, var(--c-deep) 99%), radial-gradient(90% 70% at 50% 35%, transparent 55%, rgba(0,0,0,0.55)); }
.intro .ropes { position: absolute; left: -2cqw; right: -2cqw; top: 43.9%; }
.intro .ropes i { display: block; height: 1.6cqw; margin-bottom: 4.2cqw; background: linear-gradient(180deg, color-mix(in srgb, var(--c-hi) 80%, #fff), var(--c) 55%, #000); box-shadow: 0 1cqw 1.6cqw rgba(0,0,0,0.7); border-radius: 1cqw; }
.intro .corner { position: absolute; top: 0; width: 28cqw; aspect-ratio: 1; z-index: 4; clip-path: polygon(0 0, 100% 0, 0 100%); background: var(--metal); }
.intro .corner::after { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 92% 0, 0 92%); background: var(--c); }
.intro .corner b { position: absolute; z-index: 1; left: 1.4cqw; top: 7.4cqw; transform: rotate(-45deg); font: 3.2cqw/1 var(--display); color: #fff; text-shadow: 0 0.4cqw 0 #000; white-space: nowrap; font-weight: 400; }
.intro .corner b small { display: block; font-size: 0.62em; text-align: center; margin-top: 0.3em; opacity: 0.9; }
.intro.red .corner { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.intro.red .corner::after { clip-path: polygon(8% 0, 100% 0, 100% 92%); }
.intro.red .corner b { left: auto; right: 1.4cqw; transform: rotate(45deg); }
.intro .team { position: absolute; left: 0; right: 0; margin-inline: auto; width: fit-content; top: 39.4%; z-index: 4; font-size: 5cqw; rotate: -3deg; }
.intro .nm { position: absolute; left: 0; right: 0; top: 47.2%; z-index: 4; text-align: center; font: 12cqw/1 var(--display); letter-spacing: -0.03em; color: #fff; -webkit-text-stroke: 1.1cqw #000; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #000, 0 0 6cqw var(--c-hi); white-space: nowrap; }
.intro .facts { position: absolute; left: 3cqw; right: 3cqw; top: 64%; z-index: 4; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8cqw; isolation: isolate; }
.intro .f { position: relative; text-align: center; padding: 3.6cqw 1.6cqw 3.4cqw; background: url(../img/ui_frame_sq.webp) center / 100% 100% no-repeat; }
.intro .f::before { content: ""; position: absolute; inset: 7%; z-index: -1; background: rgba(10,8,6,0.9); }
.intro .f b { display: block; font: 5.4cqw/1 var(--display); color: var(--c-hi); white-space: nowrap; letter-spacing: -0.04em; font-weight: 400; }
.intro.red .f b { color: var(--gold); }
.intro .f span { display: block; margin-top: 1.2cqw; font: 700 3.1cqw/1.05 var(--body); text-transform: uppercase; color: var(--cream); }
.intro .how { position: absolute; left: 6cqw; right: 6cqw; top: 86%; z-index: 4; text-align: center; font: 500 3.8cqw/1.25 var(--body); color: var(--cream); text-shadow: 0 0.3cqw 0 #000; }

/* ── VS ── */
#vs { z-index: 36; background: url(../img/vs_splash.webp) center / cover; opacity: 0; display: none; }
#vs .t { position: absolute; left: 0; right: 0; text-align: center; font: 9.4cqw/0.95 var(--display); letter-spacing: -0.02em; -webkit-text-stroke: 1cqw #000; paint-order: stroke fill; text-shadow: 0 1.4cqw 0 #000; }
#vs .t1 { top: 12cqw; color: #ff3b2f; }
#vs .t2 { top: 50%; transform: translateY(-50%); font-size: 8cqw; color: #fff; }
#vs .t3 { bottom: 12cqw; color: #6c9bff; }

/* ── Победа / поражение ── */
#win { z-index: 38; background: #000 center / cover; display: none; opacity: 0; }
#win .w1 { position: absolute; top: 3.9%; left: 0; right: 0; text-align: center; font: 11cqw/1 var(--display); color: #ffd21e; -webkit-text-stroke: 1.2cqw #000; paint-order: stroke fill; text-shadow: 0 1.6cqw 0 #000; }
#win.lose .w1 { color: #ff5a3c; font-size: 9.6cqw; }
#win .w2 { position: absolute; bottom: calc(4.5% + 15cqw); left: 0; right: 0; margin-inline: auto; width: fit-content; font-size: 6cqw; rotate: -3deg; }
#win .wtap { position: absolute; left: 0; right: 0; bottom: 4.5%; text-align: center; font: 700 3.6cqw var(--body); text-transform: uppercase; color: var(--cream); text-shadow: 0 0.3cqw 0 #000; }
#sum { z-index: 39; display: none; opacity: 0; background: radial-gradient(90% 60% at 50% 45%, rgba(20,12,6,0.8), rgba(0,0,0,0.94)); overflow-y: auto; }
#sum .safe { display: flex; flex-direction: column; align-items: center; gap: 3.4cqw; padding: 5cqw 4cqw 6cqw; position: relative; min-height: 100%; }
#sum h2 { margin: 0; font: 8cqw/1 var(--display); color: #ffd21e; -webkit-text-stroke: 0.9cqw #000; paint-order: stroke fill; text-shadow: 0 1cqw 0 #000; font-weight: 400; }
#sum.lose h2 { color: #ff5a3c; }
.brass { position: relative; width: 100%; isolation: isolate; padding-bottom: 1.4cqw !important; border-style: solid; border-color: transparent; border-width: 6cqw 4.4cqw; border-image: url(../img/ui_board.webp) 17% 10% 18% 10% fill / 6cqw 4.4cqw stretch; padding: 0 1cqw; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; text-align: center; }
.stats b { display: block; font: 6cqw/1 var(--display); color: var(--gold); font-weight: 400; }
.stats span { font: 700 3cqw/1.1 var(--body); text-transform: uppercase; color: var(--cream); }
.chart .clegend { display: flex; gap: 3cqw; justify-content: center; font: 700 3cqw var(--body); text-transform: uppercase; margin-bottom: 1.4cqw; flex-wrap: wrap; }
.clegend span::before { content: ""; display: inline-block; width: 4cqw; height: 0.9cqw; margin-right: 1cqw; vertical-align: middle; border-radius: 1cqw; }
.clegend .me::before { background: #ff5a3c; } .clegend .ai::before { background: #6c9bff; } .clegend .nw::before { background: rgba(232,182,74,0.7); height: 2.4cqw; width: 0.6cqw; }
.chart svg { width: 100%; height: auto; display: block; }
#sum, .modal { touch-action: pan-y; }
.cg { stroke: rgba(241,227,194,0.18); stroke-width: 0.6; } .cnl { stroke: rgba(232,182,74,0.55); stroke-width: 1; stroke-dasharray: 2 2; }
.cl { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; } .cl.me { stroke: #ff5a3c; } .cl.ai { stroke: #6c9bff; }
.cd.me { fill: #ff5a3c; stroke: #000; }
.ct { fill: rgba(241,227,194,0.7); font: 500 8px var(--body); text-anchor: end; }
.story { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.8cqw; font: 500 3.3cqw/1.2 var(--body); color: var(--cream); }
.story b { color: var(--gold); font: 2.8cqw var(--display); font-weight: 400; }
.sumbtns { display: flex; gap: 3cqw; margin-top: 1cqw; }

/* ── Окна: карта крупно, правила, справка ── */
.modal { position: absolute; inset: 0; z-index: 67; display: grid; place-items: safe center; background: rgba(8,5,4,0.72); padding: calc(var(--sat) + 4cqw) 4cqw calc(var(--sab) + 4cqw); overflow-y: auto; }
.zoom { display: flex; flex-direction: column; align-items: center; gap: 4.4cqw; width: 100%; }
.zoom .card { width: 44cqw; }
.zoom .card .face { grid-template-rows: 54% auto 1fr; }
.zoom .card .name { font-size: 4.6cqw; padding: 1.8cqw 0.8cqw; }
.zoom .card .share { font-size: 3.6cqw; padding: 1.4cqw 2.4cqw 4.6cqw; gap: 1cqw; }
.zoom .card .share .kind { font-size: 2.6cqw; }
.zoom .card .gem { width: 11cqw; font-size: 5.6cqw; bottom: -3cqw; }
.zoom .card .gem.a { left: -3cqw; } .zoom .card .gem.h { right: -3cqw; } .zoom .card .gem.c { left: -3cqw; top: -3cqw; bottom: auto; }
.zoom .card .logo { width: 9cqw; right: 3.4cqw; top: 3.4cqw; }
.zoom .cap { position: relative; left: auto; right: auto; width: 92cqw; pointer-events: auto; }
.zoom .cap .why { display: block; margin-top: 1.2cqw; color: #b3120b; font-weight: 700; }
.zoom .row2 { display: flex; gap: 3cqw; justify-content: center; flex-wrap: wrap; }
.zoom .bigHero { position: relative; width: 44cqw; aspect-ratio: 1; }
.zoom .bigHero img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; border-radius: 50% 50% 46% 46%; }
.zoom .bigHero::after { content: ""; position: absolute; inset: -15%; background: url(../img/ui_medal.webp) center / contain no-repeat; }
.rules { position: relative; width: 92cqw; padding: 4cqw 5cqw 5cqw; color: #111; background: #ffe9a0 url(../img/ui_paper.webp) center / 60cqw auto; background-blend-mode: multiply; border: 0.8cqw solid #000; box-shadow: 1.4cqw 1.4cqw 0 #000; font: 500 3.7cqw/1.3 var(--body); }
.rules h2 { margin: 0 0 2cqw; font: 5.6cqw var(--display); color: #b3120b; font-weight: 400; }
.rules h3 { margin: 3cqw 0 1cqw; font: 3.8cqw var(--display); color: #1b1206; font-weight: 400; }
.rules ul { margin: 0; padding-left: 5cqw; } .rules li { margin: 0.8cqw 0; }
.rules dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 1cqw 3cqw; } .rules dt { font-weight: 700; text-transform: uppercase; } .rules dd { margin: 0; }
.rules p { margin: 1cqw 0; }
.rules .go { width: 100%; margin-top: 4cqw; }

.hintcap { position: absolute; left: 4cqw; right: 4cqw; z-index: 44; display: flex; align-items: center; gap: 2cqw; justify-content: space-between; pointer-events: auto; }
.hintcap span { flex: 1; }
.hintcap button { pointer-events: auto; font: 700 3.4cqw var(--body); text-transform: uppercase; background: #1b1206; color: var(--cream); border: 0.5cqw solid #000; border-radius: 99px; padding: 1.4cqw 3cqw; min-height: 40px; }
.toast { position: absolute; left: 8cqw; right: 8cqw; z-index: 46; text-align: center; }

@media (prefers-reduced-motion: reduce) { .bg { animation: none; } .card { animation: none; } }

/* ── Сервер: вход, лидеры, итоги ── */
.menu-links { display: flex; gap: 4cqw; align-items: center; justify-content: center; margin-top: 2.4cqw; min-height: 44px; flex-wrap: wrap; }
.lnk { font: 700 3.6cqw var(--body); text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); background: none; border: 0; padding: 1.4cqw 2cqw; min-height: 44px; text-decoration: none; display: inline-flex; align-items: center; text-shadow: 0 0.3cqw 0 #000; }
.who { display: inline-flex; align-items: center; gap: 1.6cqw; font: 700 3.6cqw var(--body); color: var(--cream); text-shadow: 0 0.3cqw 0 #000; }
.who img { width: 7cqw; height: 7cqw; border-radius: 50%; box-shadow: 0 0 0 0.4cqw var(--gold); }
.online { display: grid; gap: 2.4cqw; justify-items: center; text-align: center; font: 500 3.6cqw/1.3 var(--body); color: var(--cream); }
.online p { margin: 0; }
.go.ya, .go.tg { text-decoration: none; display: inline-flex; align-items: center; }
.go.tg { background: linear-gradient(180deg, #7fd0ff, #2a9ad8 45%, #14608f); color: #fff; -webkit-text-stroke: 0; text-shadow: 0 0.3cqw 0 #000; }
.tgcard { display: grid; gap: 2cqw; justify-items: center; padding: 3cqw; border: 0.5cqw solid rgba(127,208,255,0.6); border-radius: 3cqw; background: rgba(20,60,90,0.45); }
.tgcard b { font: 3cqw/1.2 var(--display); color: #fff; font-weight: 400; }
.leaders { position: relative; width: 92cqw; isolation: isolate; border-style: solid; border-color: transparent; border-width: 7cqw 5cqw; border-image: url(../img/ui_board.webp) 17% 10% 18% 10% fill / 7cqw 5cqw stretch; display: grid; gap: 2.6cqw; color: var(--cream); }
.leaders h2 { margin: 0; text-align: center; font: 6.4cqw var(--display); color: var(--gold); font-weight: 400; }
.ltabs { display: flex; justify-content: center; gap: 2cqw; }
.ltabs button { font: 700 3.6cqw var(--body); text-transform: uppercase; color: var(--cream); background: rgba(10,7,5,0.8); border: 0.4cqw solid #5a4a3a; border-radius: 99px; padding: 1.2cqw 3.4cqw; min-height: 40px; }
.ltabs button[aria-pressed="true"] { background: var(--gold); color: #1b1206; border-color: #000; }
.lrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2cqw; max-height: 60dvh; overflow-y: auto; }
.lrows li { display: grid; grid-template-columns: 7cqw 8cqw 1fr auto auto; align-items: center; gap: 2cqw; padding: 1.2cqw 1.6cqw; background: rgba(10,7,5,0.6); border-radius: 2cqw; font: 500 3.6cqw var(--body); }
.lrows li img, .lrows li i { width: 8cqw; height: 8cqw; border-radius: 50%; background: #2a211b; object-fit: cover; display: block; }
.lrows .lp { font: 3.6cqw var(--display); color: var(--gold); text-align: center; }
.lrows .ln { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lrows .lw { font-size: 3cqw; opacity: 0.75; }
.lrows b { font: 4cqw var(--display); color: #ffe9a8; font-weight: 400; font-variant-numeric: tabular-nums; }
.lrows li.top1 { box-shadow: inset 0 0 0 0.5cqw var(--gold); } .lrows li.top2, .lrows li.top3 { box-shadow: inset 0 0 0 0.4cqw #c9d2dc; }
.lme, .lwait { margin: 0; text-align: center; font: 500 3.6cqw/1.3 var(--body); }
.leaders .go.ya { justify-self: center; }

/* ── Загрузка партии: латунное табло и дорожка «Путь к цели» ── */
#loader { z-index: 37; background: radial-gradient(90% 60% at 50% 45%, rgba(20,12,6,0.75), rgba(0,0,0,0.92)); }
#loader .safe { display: grid; place-items: center; }
.ldbox { width: 90cqw; display: grid; gap: 2.6cqw; justify-items: center; text-align: center; border-style: solid; border-color: transparent; border-width: 8cqw 5.4cqw; border-image: url(../img/ui_board.webp) 17% 10% 18% 10% fill / 8cqw 5.4cqw stretch; }
.ldh { font: 6cqw/1 var(--display); color: var(--gold); }
.ldt { font: 700 4cqw var(--body); text-transform: uppercase; color: var(--cream); }
.ldtr { position: relative; width: 74cqw; aspect-ratio: 900 / 148; background: url(../img/ui_track.webp) center / 100% 100% no-repeat; }
.ldtr .ch { position: absolute; left: 14.5%; right: 15.1%; top: 33%; bottom: 36%; overflow: hidden; border-radius: 99px; }
.ldtr i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: url(../img/ui_coins.webp) left center / auto 100% repeat-x; box-shadow: 0 0 3cqw rgba(255,200,80,0.9); transition: width .2s; }
.ldp { font: 5cqw var(--display); color: #ffe9a8; text-shadow: 0 0.35cqw 0 #000; font-variant-numeric: tabular-nums; }
.ldtip { font: 500 3.4cqw/1.3 var(--body); color: rgba(241,227,194,0.8); max-width: 70cqw; }
.ldw { font: 700 3.6cqw var(--body); text-transform: uppercase; letter-spacing: 0.03em; color: var(--gold); min-height: 1.2em; }

/* ── Приветствие: «Капиталисты против нэпманов» поверх меню ── */
#hello { z-index: 68; background: linear-gradient(rgba(8,5,4,0.55), rgba(8,5,4,0.88)), url(../img/vs_splash.webp) center / cover; }
#hello .safe { display: grid; place-items: center; overflow-y: auto; }
.hl { width: 92cqw; display: grid; gap: 3.4cqw; justify-items: center; text-align: center; padding: 4cqw 0; }
.ht { display: grid; gap: 1cqw; }
.ht span { font: 10cqw/0.95 var(--display); letter-spacing: -0.02em; -webkit-text-stroke: 1cqw #000; paint-order: stroke fill; text-shadow: 0 1.2cqw 0 #000; }
.ht .t1 { color: #ff3b2f; } .ht .t2 { font-size: 6cqw; color: #fff; } .ht .t3 { color: #6c9bff; }
.hl .hcap { position: relative; left: auto; right: auto; width: 100%; rotate: -1deg; }
.hpts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; width: 100%; }
.hpts li { font: 700 3.2cqw/1.15 var(--body); text-transform: uppercase; color: var(--cream); background: rgba(10,7,5,0.8); border: 0.4cqw solid rgba(232,182,74,0.5); border-radius: 2cqw; padding: 2cqw 1cqw; }
.hpts b { display: block; font: 6cqw/1 var(--display); color: var(--gold); font-weight: 400; margin-bottom: 0.8cqw; }
.hbtns { display: grid; gap: 2.6cqw; width: 80cqw; }
.hbtns .go { text-decoration: none; text-align: center; justify-content: center; display: flex; align-items: center; }
.go.yandex { background: linear-gradient(180deg, #ff5a4a, #e8261b 45%, #9a120a); color: #fff; }
.hnote { font: 500 3.3cqw/1.3 var(--body); color: rgba(241,227,194,0.85); max-width: 80cqw; }
.hbtns { width: 84cqw; justify-items: stretch; }
.hbtns .go { width: 100%; min-width: 0; font-size: 4.4cqw; padding: 3cqw 3cqw; white-space: nowrap; }
.hbtns .go.ghost { font-size: 4.2cqw; }
.live a.lnk { font: 700 3.8cqw var(--body); text-transform: uppercase; color: #1b1206; background: var(--gold); border: 0.4cqw solid #000; border-radius: 99px; padding: 1.6cqw 3cqw; min-height: 44px; text-shadow: none; }

.lrows li i { display: grid; place-items: center; font: normal 3.6cqw var(--display); color: #1b1206; background: linear-gradient(180deg, #ffe39a, var(--gold) 50%, var(--gold-2)); }
.nickbox input { display: block; width: 100%; margin-top: 2.4cqw; font: 700 4.6cqw var(--body); padding: 2cqw 2.6cqw; border: 0.6cqw solid #000; border-radius: 1.6cqw; background: #fffaf0; color: #111; text-transform: none; pointer-events: auto; }
.nickbox { pointer-events: auto; }
#nickBtn { padding: 1.4cqw; font-size: 4.6cqw; }

/* приветствие и меню помещаются на невысоких экранах, а если нет — прокручиваются пальцем */
#hello .safe, #menu .safe { touch-action: pan-y; overflow-y: auto; }
.hl { gap: 2.4cqw; padding: 3cqw 0 5cqw; }
.ht span { font-size: 8.6cqw; } .ht .t2 { font-size: 5cqw; }
.hl .hcap { font-size: 3.7cqw; padding: 2cqw 3cqw; }
.hpts li { padding: 1.4cqw 1cqw; } .hpts b { font-size: 5cqw; }

/* стили инвесторов — у каждого свой яркий цвет */
.dk[data-deck="spec"] { --dc: #ff2e88; } .dk[data-deck="div"] { --dc: #1fd17a; } .dk[data-deck="rent"] { --dc: #2fa8ff; } .dk[data-deck="oil"] { --dc: #ffa21a; }
.dk { background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 38%, transparent), rgba(10,7,5,0.7) 70%); border-color: color-mix(in srgb, var(--dc) 55%, transparent); }
.dk.sel { background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 60%, transparent), rgba(10,7,5,0.75) 75%); border-color: var(--dc); box-shadow: 0 0 6cqw color-mix(in srgb, var(--dc) 70%, transparent), inset 0 0 4cqw color-mix(in srgb, var(--dc) 35%, transparent); }
.dk .style { color: var(--dc); text-shadow: 0 0.3cqw 0 #000; }
.dk .medal img { box-shadow: 0 0 5cqw color-mix(in srgb, var(--dc) 80%, transparent); }
.dk[data-deck="spec"] .ribbon { filter: hue-rotate(-30deg) saturate(1.3) drop-shadow(0.5cqw 0.6cqw 0 rgba(0,0,0,0.8)); }
.dk[data-deck="div"] .ribbon { filter: hue-rotate(125deg) saturate(1.2) drop-shadow(0.5cqw 0.6cqw 0 rgba(0,0,0,0.8)); }
.dk[data-deck="rent"] .ribbon { filter: hue-rotate(200deg) saturate(1.3) drop-shadow(0.5cqw 0.6cqw 0 rgba(0,0,0,0.8)); }
.dk[data-deck="oil"] .ribbon { filter: hue-rotate(28deg) saturate(1.4) brightness(1.1) drop-shadow(0.5cqw 0.6cqw 0 rgba(0,0,0,0.8)); }
@media (max-aspect-ratio: 10/17) and (max-height: 760px), (min-aspect-ratio: 10/17) {
  #menu .safe { padding-top: 3cqw; }
  .logo h1 { font-size: 7.6cqw; } .logo .sub { margin-top: 1.6cqw; }
  .pick { margin-top: 2cqw; }
  .medal { width: 19cqw; }
  .decks { gap: 2cqw; }
  .dk { padding: 1.2cqw 1cqw 1.4cqw; }
  .dk .how { min-height: 0; font-size: 3.1cqw; }
  .menu-actions { margin-top: 2cqw; }
  .menu-links { margin-top: 0.6cqw; }
  .tapstart { display: none; }
}

/* меню: крупные портреты героев во всю плитку, лицо видно, рамка цвета стиля */
.decks { gap: 2.6cqw; }
.dk { padding: 0; overflow: hidden; aspect-ratio: 0.86; border: 0.8cqw solid var(--dc); border-radius: 3cqw; background: #120e0c; box-shadow: 0 0 0 0.4cqw #000, 0 1.4cqw 3cqw rgba(0,0,0,0.6); justify-content: flex-end; min-height: 0; }
.dk .pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: saturate(1.05); transition: transform .25s; }
.dk::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, color-mix(in srgb, var(--dc) 25%, rgba(8,5,4,0.75)) 68%, rgba(8,5,4,0.95) 100%); pointer-events: none; }
.dk .dkt { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 0.6cqw; padding: 0 1.4cqw 1.8cqw; width: 100%; }
.dk .ribbon { margin: 0; font-size: 3.2cqw; }
.dk .style { margin: 0; font-size: 2.8cqw; }
.dk .how { margin: 0; min-height: 0; font-size: 3cqw; line-height: 1.15; color: #fff; text-shadow: 0 0.3cqw 0.6cqw #000; }
.dk.sel { box-shadow: 0 0 0 0.4cqw #000, 0 0 7cqw color-mix(in srgb, var(--dc) 80%, transparent); }
.dk.sel .pic { transform: scale(1.05); }
.dk:not(.sel) .pic { filter: saturate(0.75) brightness(0.8); }
.dk .wins { z-index: 3; }
@media (max-aspect-ratio: 10/17) and (max-height: 760px), (min-aspect-ratio: 10/17) { .dk { aspect-ratio: 0.95; } .dk .how { font-size: 2.8cqw; } }
.dk { border-width: 1.2cqw; box-shadow: 0 0 0 0.5cqw #000, inset 0 0 0 0.5cqw rgba(0,0,0,0.6), 0 0 4cqw color-mix(in srgb, var(--dc) 45%, transparent), 0 1.4cqw 3cqw rgba(0,0,0,0.6); }
.dk.sel { box-shadow: 0 0 0 0.5cqw #000, inset 0 0 0 0.5cqw rgba(0,0,0,0.6), 0 0 8cqw var(--dc); }

/* приветствие: кнопки закреплены внизу экрана, крестик — в углу */
.hl { padding-bottom: 38cqw; }
.hbtns { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 0cqw); z-index: 3; width: auto; padding: 8cqw 8cqw 4cqw; background: linear-gradient(180deg, transparent, rgba(8,5,4,0.92) 35%); }
.hnote { position: absolute; left: 0; right: 0; bottom: calc(var(--sab) + 0.6cqw); z-index: 4; margin: 0 auto; font-size: 2.9cqw; }
.hbtns { padding-bottom: 8cqw; }
.hbtns .go { animation: hbob 2.4s ease-in-out infinite; }
.hbtns .go.ghost { animation: none; }
@keyframes hbob { 50% { transform: translateY(-0.8cqw); box-shadow: 0 0 8cqw rgba(232,182,74,0.7), 0.8cqw 0.8cqw 0 #000; } }
.hx { position: absolute; top: calc(var(--sat) + 3cqw); right: 3cqw; z-index: 5; width: max(11cqw, 44px); height: max(11cqw, 44px); border-radius: 50%; border: 0.5cqw solid #5a4a3a; background: rgba(10,7,5,0.85); color: var(--cream); font: 700 5cqw/1 var(--body); display: grid; place-items: center; padding: 0; }

/* итоги: «Ещё раз» и «Колоды» закреплены внизу экрана */
#sum .safe { padding-bottom: 34cqw; }
#sum .sumbtns { position: absolute; left: 0; right: 0; bottom: var(--sab); z-index: 3; margin: 0; justify-content: center; padding: 10cqw 5cqw 5cqw; background: linear-gradient(180deg, transparent, rgba(8,5,4,0.94) 40%); }
#sum .sumbtns #again { animation: hbob 2.4s ease-in-out infinite; }