/* Ринг для всех (/ring): тренировка с Трупером прямо в браузере, без входа. Сцена боя — fight.js и fight.css (как в игре),
   здесь только страница вокруг: шапка, выбор бойца (сетка 45 миниатюр из атласов), уровень Трупера, «В бой», подсказки и
   полоса после боя. Токены — копия :root из game.css (страница не тянет game.css: ей хватает своих стилей, а VPS отдаёт её
   без программы стримера). Классы — с префиксом rg-, кнопки .btn — как на странице игры. */
:root {
  --bg-page: #121510; --bg-sunk: #0d100c; --surface-1: #1a1f17; --surface-2: #262e22; --surface-3: #303a2b;
  --line: #3a4432; --line-brass: #6e5326; --brass: #c9a45c; --brass-hi: #ecd08a;
  --text: #f1e6c8; --text-dim: #bdb39a; --on-brass: #2a1d08; --on-soul: #0d2a22;
  --soul: #7fe0bf; --soul-deep: #2f8f78; --points: #9146ff; --amber: #d9a441; --sapphire: #5b9bd5;
  --danger: #e5533d; --display: "Playfair Display SC", Georgia, serif; --ui: "Jost", "Segoe UI", "Roboto", sans-serif;
  --pixel: "Press Start 2P", "Courier New", monospace;
  --r-1: 2px; --r-2: 4px; --r-3: 6px; --t-fast: 120ms;
  --gut: 24px;
  /* поля по бокам: не меньше выреза экрана (iPhone лёжа — viewport-fit=cover) */
  --padL: max(var(--gut), env(safe-area-inset-left, 0px)); --padR: max(var(--gut), env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html { background: var(--bg-page); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; color: var(--text); font: 15px/1.45 var(--ui); overflow-x: hidden; background:
  radial-gradient(1200px 600px at 80% -10%, rgba(201,164,92,.10), transparent 60%),
  radial-gradient(900px 500px at -10% 110%, rgba(127,224,191,.07), transparent 60%), var(--bg-page); }
a { color: var(--brass-hi); }
button { font: inherit; }
small { color: var(--text-dim); font-size: 13px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 2px; }
.rg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* кнопки — как .btn на странице игры */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 8px 16px; border-radius: 4px; border: 0;
  background: linear-gradient(#ecd08a, #c9a45c 55%, #a9843e); color: var(--on-brass); font: 600 14px/1 var(--ui); letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 var(--line-brass), 0 6px 14px rgba(0,0,0,.35);
  transition: transform var(--t-fast), filter var(--t-fast); -webkit-tap-highlight-color: transparent; }
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 0 0 var(--line-brass), 0 3px 8px rgba(0,0,0,.35); }
.btn:disabled { filter: grayscale(.7) brightness(.6); cursor: default; transform: none; }
.btn.ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-brass); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--brass); }
.btn.twitch { background: var(--points); color: #fff; box-shadow: 0 2px 0 #5c2bb8, 0 6px 14px rgba(0,0,0,.35); }
.btn.twitch::before { content: ""; width: 16px; height: 18px; background: #fff; flex: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M2 0 0 5v19h7v4h4l4-4h5l6-6V0zm20 17-4 4h-6l-4 4v-4H3V2h19zM13 7h2v6h-2zm5 0h2v6h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'%3E%3Cpath d='M2 0 0 5v19h7v4h4l4-4h5l6-6V0zm20 17-4 4h-6l-4 4v-4H3V2h19zM13 7h2v6h-2zm5 0h2v6h-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn.sm { min-height: 32px; padding: 4px 12px; font-size: 12px; }
.btn.big { min-height: 60px; font-size: 22px; padding: 10px 28px; letter-spacing: .12em; }

/* ---------------------------------------------------------------- шапка: город из баннера игры, «РИНГ» пиксельным шрифтом */
.rg-top { position: relative; overflow: hidden; background: var(--surface-1); box-shadow: 0 1px 0 var(--line); }
.rg-top .rg-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; opacity: .55; }
.rg-top::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(18,21,16,.94) 0, rgba(18,21,16,.7) 45%, rgba(18,21,16,.35) 100%), linear-gradient(180deg, transparent 60%, rgba(18,21,16,.7)); }
.rg-top-in { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; max-width: 1280px; margin: 0 auto; padding: 18px var(--padR) 20px var(--padL); }
.rg-title { flex: 1 1 440px; min-width: 0; }
.rg-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--brass); font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; }
.rg-eyebrow img { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-brass); }
.rg-eyebrow:hover { color: var(--brass-hi); }
.rg-title h1 { margin: 10px 0 0; font: 400 32px/1.15 var(--pixel); text-transform: uppercase; color: var(--brass-hi); letter-spacing: .04em; text-shadow: 3px 3px 0 #0b0d0a; }
.rg-title p { margin: 10px 0 0; max-width: 62ch; font-size: 16px; color: var(--text); text-shadow: 0 1px 6px rgba(0,0,0,.85); }
.rg-links { display: flex; flex-wrap: wrap; gap: 10px; }
.rg-links .btn { line-height: 1.2; }
.rg-links .rg-short { display: none; }

/* ---------------------------------------------------------------- выбор: слева сетка бойцов, справа «ты против Трупера» */
.rg-main { position: relative; max-width: 1280px; margin: 0 auto; padding: 20px var(--padR) 32px var(--padL); }
.rg-pick { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 20px 24px; align-items: start; }
.rg-colL, .rg-colR { display: grid; gap: 16px; min-width: 0; }
.rg-colR { position: sticky; top: 16px; }
.rg-card { padding: 14px 16px; border-radius: var(--r-3); background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line); }
.rg-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px; font: 600 13px/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.rg-h small { font-size: 12px; letter-spacing: .02em; text-transform: none; }
.rg-gridhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 10px; }
.rg-gridhead .rg-h { margin: 0; }
.rg-gridhead .rg-rand { margin-left: auto; }
.rg-chip { min-height: 30px; padding: 4px 12px; border: 0; border-radius: 15px; background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-brass);
  font: 600 12px/1 var(--ui); letter-spacing: .06em; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rg-chip:hover { box-shadow: inset 0 0 0 1px var(--brass); }

/* сетка бойцов: 9 × 5 на десктопе, миниатюра — верх кадра idle из атласа без сглаживания */
.rg-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 6px; }
.rg-tile { position: relative; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; padding: 5px 2px 6px; border: 0; border-radius: var(--r-2);
  background: linear-gradient(180deg, #1f271b 0, #161b13 70%, #10140e); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-dim);
  font: 500 12px/1.15 var(--ui); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); }
.rg-tile canvas, .rg-tile .rg-noart { display: block; width: 64px; height: 64px; max-width: 100%; }
.rg-tile .rg-noart { display: grid; place-items: center; font: 400 20px/1 var(--pixel); color: var(--line-brass); }
.rg-tile span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%; min-height: 2.3em; text-align: center; overflow-wrap: anywhere; }
.rg-tile:hover { color: var(--text); box-shadow: inset 0 0 0 1px var(--line-brass); transform: translateY(-1px); }
.rg-tile[aria-pressed="true"] { color: var(--brass-hi); background: linear-gradient(180deg, #3b301a 0, #211b0f 75%, #17130b); box-shadow: inset 0 0 0 2px var(--brass), 0 0 16px rgba(201,164,92,.35); }

/* «ты против Трупера»: кусок той же улицы, бойцы ×2 пиксель в пиксель */
.rg-vs { position: relative; overflow: hidden; border-radius: var(--r-3); background: #07090a; box-shadow: inset 0 0 0 1px var(--line-brass), 0 10px 30px rgba(0,0,0,.45); line-height: 0; }
.rg-vs canvas { display: block; width: 100%; aspect-ratio: 16 / 9; image-rendering: auto; }
.rg-vs-tag { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; padding: 12px 14px; line-height: 1.3;
  background: linear-gradient(180deg, rgba(7,9,10,.75), rgba(7,9,10,0)); pointer-events: none; }
/* имена — на тёмной подложке с обводкой: на светлой вывеске улицы иначе не читаются */
.rg-vs-tag b { justify-self: start; max-width: 100%; padding: 4px 6px 3px; font: 400 12px/1.5 var(--pixel); text-transform: uppercase; color: var(--text); background: rgba(7,9,10,.82);
  box-shadow: 0 0 0 1px rgba(0,0,0,.6); text-shadow: 1px 0 0 #0b0d0a, -1px 0 0 #0b0d0a, 0 1px 0 #0b0d0a, 0 -1px 0 #0b0d0a, 2px 2px 0 #0b0d0a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rg-vs-tag b:last-child { justify-self: end; text-align: right; }
.rg-vs-tag i { font: 400 20px/1 var(--pixel); font-style: normal; color: var(--brass-hi); text-shadow: 2px 2px 0 #0b0d0a, -1px -1px 0 #0b0d0a; }
.rg-vs-lvl { position: absolute; right: 10px; bottom: 10px; padding: 6px 8px; font: 400 8px/1 var(--pixel); text-transform: uppercase; color: var(--on-brass); background: var(--brass); box-shadow: 0 0 0 2px #0b0d0a; line-height: 1; }
.rg-vs-lvl.hard { background: var(--danger); color: #fff; }
.rg-vs-lvl.easy { background: var(--soul); color: var(--on-soul); }

/* уровень Трупера — три кнопки в ряд */
.rg-level .rg-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.rg-seg button { min-height: 40px; padding: 6px 8px; border: 0; border-radius: var(--r-2); background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line);
  font: 600 13px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.rg-seg button:hover { box-shadow: inset 0 0 0 1px var(--line-brass); }
.rg-seg button[aria-pressed="true"] { background: linear-gradient(#ecd08a, #c9a45c 55%, #a9843e); color: var(--on-brass); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 0 var(--line-brass); }
.rg-level p { margin: 8px 0 0; min-height: 1.4em; font-size: 13px; color: var(--text-dim); }

/* «В бой» и серия */
.rg-gobar { display: grid; gap: 6px; }
.rg-go { flex-direction: column; gap: 6px; width: 100%; min-height: 68px; }
.rg-go b { font: 400 18px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; }
.rg-go small { color: rgba(42,29,8,.8); font: 600 11px/1.2 var(--ui); letter-spacing: .06em; }
.rg-streak { font-size: 13px; color: var(--text-dim); text-align: center; }
.rg-streak b { color: var(--soul); font-weight: 700; font-variant-numeric: tabular-nums; }
.rg-streak:empty { display: none; }

/* управление: клавиши как клавиши */
.rg-keys ul { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 0; list-style: none; font-size: 13px; color: var(--text-dim); }
.rg-keys li { display: inline-flex; align-items: center; gap: 6px; }
kbd { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 3px; background: var(--surface-3); color: var(--text);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.4), 0 0 0 1px var(--line-brass); font: 600 12px/1 var(--ui); }
.rg-keys .rg-touch { margin: 0; font-size: 13px; color: var(--text-dim); }
.rg-keys .rg-touch { display: none; }
@media (pointer: coarse) { .rg-keys ul { display: none; } .rg-keys .rg-touch { display: block; } }

/* как драться — пять строк */
.rg-how ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: how; }
.rg-how li { position: relative; padding-left: 30px; font-size: 14px; line-height: 1.45; }
.rg-how li::before { counter-increment: how; content: counter(how); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 20px; height: 20px;
  font: 400 8px/1 var(--pixel); color: var(--on-brass); background: var(--brass); box-shadow: 0 0 0 2px #0b0d0a; }
.rg-how b { color: var(--brass-hi); font-weight: 600; }
.rg-how p { margin: 10px 0 0; font-size: 13px; color: var(--text-dim); }

/* ---------------------------------------------------------------- бой */
.rg-fight { display: grid; gap: 12px; min-height: calc(100vh - 24px); align-content: start; }
.rg-fhead { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; width: 100%; max-width: 960px; margin: 0 auto; }
.rg-fhead b { font: 400 12px/1.5 var(--pixel); color: var(--brass-hi); text-transform: uppercase; }
.rg-fhead span { font-size: 13px; color: var(--text-dim); }
.rg-fhead .rg-fbtn { display: flex; gap: 8px; margin-left: auto; }
.rg-stage { width: 100%; max-width: 960px; margin: 0 auto; }
.rg-stage .fx-a .fx-name small { display: none; }          /* имя бойца — это и есть имя героя: второй раз мелко не пишем */
.rg-stage .rg-fail { padding: 40px 16px; text-align: center; color: var(--text-dim); line-height: 1.5; }
.rg-after { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; width: 100%; max-width: 960px; margin: 0 auto; padding: 12px 14px; border-radius: var(--r-3);
  background: var(--surface-1); box-shadow: inset 0 0 0 1px var(--line-brass), 0 10px 30px rgba(0,0,0,.35); animation: rg-in .25s ease-out; }
.rg-after .btn.big { min-height: 52px; font-size: 18px; }
.rg-after .rg-note { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; font-size: 13px; color: var(--text-dim); }
.rg-after .rg-note b { color: var(--text); font-weight: 600; }
.rg-after .rg-note b em { font-style: normal; color: var(--soul); font-variant-numeric: tabular-nums; }
.rg-after .rg-note b small { font-weight: 400; font-size: 13px; color: var(--text-dim); }
.rg-after .rg-enter { color: var(--brass); font-size: 12px; letter-spacing: .04em; }
@media (pointer: coarse) { .rg-after .rg-enter { display: none; } }
@keyframes rg-in { from { opacity: 0; transform: translateY(6px); } }
.rg-tips { width: 100%; max-width: 960px; margin: 4px auto 0; }
/* телефон стоя (сцена в режиме fx-phone): бой — на весь экран, пэд прижат к низу экрана, а не висит посередине с пустой
   третью под ним. Высота — экран без 16 px: бой начинается с прокрутки к его верху минус 8 px, низ пэда остаётся в экране */
.rg-fight:has(.fx-phone) { display: flex; flex-direction: column; gap: 8px; min-height: calc(100vh - 16px); min-height: calc(100dvh - 16px);
  padding-bottom: env(safe-area-inset-bottom, 0px); }
.rg-fight:has(.fx-phone) .rg-stage { flex: 1 0 auto; display: flex; flex-direction: column; }
.rg-stage .fx-scene.fx-phone { flex: 1 0 auto; display: flex; flex-direction: column; }
.rg-stage .fx-phone .fx-view { align-self: center; }
.rg-stage .fx-phone.fx-touch .fx-special { margin-top: auto; }

.rg-foot { max-width: 1280px; margin: 0 auto; padding: 18px var(--padR) calc(28px + env(safe-area-inset-bottom, 0px)) var(--padL); font-size: 13px; color: var(--text-dim); border-top: 1px solid var(--line); }
.rg-foot p { margin: 0; }

/* ---------------------------------------------------------------- уже десктопа: одна колонка; сетка до «В бой», кнопка липнет к низу.
   Порядок блоков в разметке ставит скрипт (arrange в ring.html) — так Tab идёт как глаз; order здесь — на миг до скрипта */
@media (max-width: 1039px) {
  .rg-pick { grid-template-columns: minmax(0, 1fr); }
  .rg-colL, .rg-colR { display: contents; }
  .rg-vs { order: 1; justify-self: center; width: 100%; max-width: 640px; }
  .rg-level { order: 2; }
  .rg-gridbox { order: 3; }
  .rg-gobar { order: 4; position: sticky; bottom: 0; z-index: 5; margin: 0 calc(-1 * var(--padR)) 0 calc(-1 * var(--padL));
    padding: 14px var(--padR) calc(12px + env(safe-area-inset-bottom, 0px)) var(--padL);
    background: linear-gradient(180deg, rgba(18,21,16,0), rgba(18,21,16,.94) 26%, var(--bg-page)); }
  .rg-keys { order: 5; }
  .rg-how { order: 6; }
  .rg-grid { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
  .rg-tile { scroll-margin: 12px 0 150px; }                 /* «Случайный» и стрелки не прячут плитку под полосу «В бой» */
}
@media (max-width: 600px) {
  :root { --gut: 16px; }
  .rg-top-in { padding-top: 14px; padding-bottom: 16px; gap: 12px; }
  .rg-title { flex-basis: 100%; }
  .rg-title h1 { font-size: 24px; margin-top: 8px; }
  .rg-title p { font-size: 15px; margin-top: 8px; }
  .rg-links { width: 100%; }
  .rg-links .btn { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 6px 10px; font-size: 11px; letter-spacing: .04em; text-align: center; }
  .rg-links .rg-long { display: none; }
  .rg-links .rg-short { display: inline; }
  .rg-main { padding-top: 14px; }
  .rg-pick { gap: 14px; }
  .rg-card { padding: 12px; }
  .rg-gridbox .rg-h small { display: none; }
  .rg-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
  .rg-tile { padding: 4px 1px 5px; font-size: 11px; }
  .rg-tile canvas, .rg-tile .rg-noart { width: 52px; height: 52px; }
  .rg-vs-tag { padding: 8px 10px; }
  .rg-vs-tag b { font-size: 8px; padding: 3px 5px 2px; }
  .rg-vs-tag i { font-size: 14px; }
  .rg-vs-lvl { right: 8px; bottom: 8px; font-size: 7px; padding: 5px 6px; }
  .rg-go { min-height: 60px; }
  .rg-go b { font-size: 16px; }
  .rg-fhead b { font-size: 9px; }
  .rg-after { padding: 10px; }
  .rg-after .btn { flex: 1 1 auto; }
  .rg-after .btn.big { flex-basis: 100%; }
  .rg-how li { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn, .rg-tile { transition: none; }
  .rg-after { animation: none; }
}