/* ===== дизайн v3 — токены (docs/SPEC_v2_2026-11-03.md §15; макеты docs/design_v3_2026-11-04/refs/1–5, спека ChatGPT §3) =====
   Светлый холст, белые карточки с тонкой серой рамкой и лёгкой тенью, чёрные жирные заголовки, табличные цифры; электрический синий — активные вкладки,
   выделение, главные кнопки; зелёный / красный — только для смысла (исход, знак P&L, статус). Только светлая тема (§15 п. 3): тёмной темы и кнопки темы
   нет, color-scheme: light. Шрифты — системный стек (ничего не качаем из сети); числа — тем же шрифтом с табличными цифрами (.mono).
   Старые имена токенов (--fg…, --my, --line…) оставлены и смотрят в новую палитру — компоненты доски, статистики и дуэли перекрашены ими. */
:root {
  color-scheme: light;
  /* холст и поверхности */
  --bg: #F5F7FA; --card: #FFFFFF; --line: #E4E8EF; --rowline: #EEF1F5; --rowline2: #F1F3F7; --thead: #F8FAFC; --muted: #EEF1F5; --muted2: #F2F4F7;
  --ctl: #D5DBE5; --ctl2: #CDD4DF;                                       /* рамки полей и вторичных кнопок */
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 2px 10px rgba(15, 23, 42, .045);
  --shadow-pop: 0 12px 32px rgba(15, 23, 42, .14);
  --shadow-dlg: 0 24px 64px rgba(15, 23, 42, .24);
  --scrim: rgba(15, 23, 42, .42);
  /* текст: чёрный жирный заголовок → вторичный → третичный (контраст на белом ≥ 4.5 у --fg…--fg3) */
  --fg: #0B1220; --fg2: #556072; --fg3: #646D7F; --fg4: #3B4556; --fg5: #333D4E; --grey: #8A93A3; --empty: #A3ACBA; --off: #9AA3B2;
  /* акцент — электрический синий (активная вкладка, выделение, главные кнопки, «моё») */
  --accent: #1463FF; --accent-ink: #0B4FD9; --accent-bg: #EEF4FF; --accent-bg2: #E3ECFF; --accent-ring: rgba(20, 99, 255, .32);
  --my: var(--accent); --myt: var(--accent-ink);
  /* смысл: зелёный — Reaches / плюс / «рынок работает», красный — Doesn't reach / минус / ошибка */
  --pos: #15803D; --pos-strong: #16A34A; --pos-bg: #E8F7EE; --neg: #DC2626; --neg-strong: #E5484D; --neg-bg: #FDEDED;
  --warn-bg: #FFF4E5; --warn-fg: #8A5300;
  /* режим рынка (огоньки / волны — до перерисовки игры), тепловые полосы, мерцание закрытой зоны (v2 §9.3, янтарь) */
  --storm: #E5590C; --storm-l: #FF8A4C; --calm: #1E9E80; --calm-l: #3FD2AE; --dim: #E4E8EF;
  --reg-s-bg: #FDE9DA; --reg-s-fg: #8A390B; --reg-c-bg: #DDF3EC; --reg-c-fg: #145A4A; --reg-n-bg: #EEF1F5; --reg-n-fg: #3B4556;
  --heat1: #FFF8F2; --heat2: #FFF0E4; --heat3: #FFE5D1; --curband: #EEF4FF;
  --glow: #F29A2E;
  /* шрифт: системный стек; числа — табличные цифры */
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  --mono: var(--sans);
  /* радиусы, размеры */
  --radius: 16px; --r-btn: 12px; --r-dlg: 28px;
  --bh: 43px; --cr: 174px;           /* v1.12: полосы 43 px (ставится из app.js); v2 §9.4: телефон — правый край графика (app.js chartGeom) */
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 14px; line-height: 1.3; -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sub { font-size: 12px; color: var(--fg2); }
.sub .mono, .sub b { color: var(--fg); }
.lbl { font-size: 12px; color: var(--fg2); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.blue { color: var(--myt); } .grey { color: var(--fg3); }
.pos { color: var(--pos); } .neg { color: var(--neg); }
.empty { margin: 4px 0; font-size: 13px; color: var(--fg3); }
.ifire, .iwave { flex: 0 0 auto; }
@media (max-width: 759px) { .d { display: none !important; } }
@media (min-width: 760px) { .m { display: none !important; } }

/* ===== режим рынка: плашка ===== */
.reg { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--reg-n-bg); color: var(--reg-n-fg); white-space: nowrap; }
.reg.storm { background: var(--reg-s-bg); color: var(--reg-s-fg); }
.reg.calm { background: var(--reg-c-bg); color: var(--reg-c-fg); }
.reg.none { background: var(--reg-n-bg); color: var(--grey); }

/* ===== кольцо-таймер раунда (шапка) ===== */
.ring { position: relative; flex: 0 0 40px; width: 40px; height: 40px; }
.ring svg { width: 100%; height: 100%; display: block; }
.ring .bgc { fill: none; stroke: var(--muted); stroke-width: 4; }
.ring .arc { fill: none; stroke: var(--fg); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray .9s linear; }
.ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--fg); }
.ring[data-st="lock"] .arc, .ring[data-st="lock"] span { stroke: var(--grey); color: var(--grey); }
.ring[data-st="settle"] .arc, .ring[data-st="settle"] span { stroke: var(--my); color: var(--my); transition: none; }
.ring[data-st="off"] .arc, .ring[data-st="off"] span { stroke: var(--empty); color: var(--empty); }

/* ===== шапка (дизайн v3, макеты 2 и 5): молния + «Minute Duel» · вкладки Game / Duels / Stats · баланс · таймер · «How to play» =====
   Десктоп — одна строка; телефон — две: бренд, баланс, таймер, помощь / вкладки на всю ширину. Не влезло — app.js fitTop: t1 — бренд мельче, t2 — молния */
.topbar { position: relative; z-index: 20; display: flex; align-items: center; gap: 16px; background: var(--card); border-bottom: 1px solid var(--line); }
.brand { flex: 0 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 8px; color: var(--fg); }
.bname { font-size: 22px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }   /* «Aqevu» — без молнии, тем же шрифтом (§15, dz 04.11 вечер) */
.topbar.t1 .bname { font-size: 17px; } .topbar.t2 .bname { font-size: 14px; }
.dtabs { display: flex; gap: 6px; }
.dtab { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 999px; border: none;
  font-size: 15px; font-weight: 700; background: var(--muted); color: var(--fg); white-space: nowrap; transition: background-color .15s, color .15s; }
.dtab:hover { background: #E4E9F1; }
.dtab[aria-current="page"] { background: var(--accent); color: #fff; box-shadow: 0 2px 8px rgba(20, 99, 255, .28); }
.balbox { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; min-width: 0; }
.balbox .blbl { font-size: 12px; font-weight: 500; color: var(--fg2); }
.balbox .bal { font-size: 18px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.help { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 40px; min-width: 40px; padding: 0 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 14px; font-weight: 700; white-space: nowrap; box-shadow: var(--shadow); }
.help:hover { border-color: var(--ctl); background: var(--thead); }
.help .hl { display: none; }
@media (min-width: 1100px) { .help { padding: 0 14px 0 11px; } .help .hl { display: inline; } }
@media (min-width: 760px) {
  .topbar { min-height: 72px; padding: 12px 24px; border-radius: 0; }
  .dtabs { margin-left: auto; }
  .topbar .balbox { margin-left: 12px; }
  .ring { flex-basis: 50px; width: 50px; height: 50px; } .ring span { font-size: 18px; }
}
@media (max-width: 759px) {
  .topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "brand bal ring help" "tabs tabs tabs tabs";
    align-items: center; column-gap: 8px; row-gap: 8px; padding: 8px 12px 8px; }
  .topbar:has(#gear:not([hidden])) { grid-template-columns: minmax(0, 1fr) auto auto auto auto; grid-template-areas: "brand bal ring help gear" "tabs tabs tabs tabs tabs"; }
  .topbar .brand { grid-area: brand; } .topbar .balbox { grid-area: bal; } .topbar .ring { grid-area: ring; } .topbar .help { grid-area: help; } .topbar .gear { grid-area: gear; }
  .topbar .dtabs { grid-area: tabs; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .bname { font-size: 18px; } .topbar.t1 .bname { font-size: 15px; }
  .dtab { height: 36px; padding: 0 8px; font-size: 14px; }
  .balbox .blbl { display: none; } .balbox .bal { font-size: 15px; }
  .help { height: 36px; min-width: 36px; padding: 0; width: 36px; }
  .gear > button { width: 36px !important; height: 36px !important; }
}

.arow.nodata .ap .p { color: var(--off); }   /* «нет данных» по активу: серая цена, остальные активы живут (§12) */

/* ===== окно «Choose your mode» (дизайн v3, макет 1; спека ChatGPT §4) ===== */
body.mopen { overflow: hidden; }
.mwrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.mdlg { position: relative; width: min(1120px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-dlg);
  box-shadow: var(--shadow-dlg); overflow: hidden; }
.mbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 30px 40px 8px; }
.mtop { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.mtop .bname { font-size: 22px; }
.mclose { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 999px; border: none; background: var(--muted); color: var(--fg); display: flex; align-items: center; justify-content: center; }
.mclose:hover { background: #E4E9F1; }
.mh { margin: 18px 0 0; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
.msub { margin: 8px 0 0; font-size: 18px; line-height: 1.4; color: var(--fg2); }
.mcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.mcard { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 22px 24px 20px; border-radius: 22px; border: 1.5px solid var(--line);
  background: var(--card); cursor: pointer; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.mcard:hover { border-color: var(--ctl); }
.mcard.on { border: 2px solid var(--accent); padding: 21.5px 23.5px 19.5px; background: linear-gradient(180deg, #F2F6FF 0%, #F8FAFF 100%); box-shadow: 0 8px 24px rgba(20, 99, 255, .10); }
.mcard:has(input:focus-visible) { outline: 3px solid var(--accent-ring); outline-offset: 3px; }
.mkick { display: flex; align-items: center; gap: 10px; }
.mkick .mki { width: 26px; height: 26px; fill: none; stroke: var(--fg); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.mcard.on .mkick .mki { stroke: var(--accent); }
.mk { font-size: 18px; font-weight: 800; color: var(--fg); }
.mcard.on .mk { color: var(--accent); }
.mradio { margin-left: auto; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ctl2); background: #fff; position: relative; }
.mcard.on .mradio { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-bg2); }
.mcard.on .mradio::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--accent); }
.mct { margin-top: 6px; font-size: 32px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; color: var(--fg); }
.mcd { font-size: 16px; line-height: 1.45; color: var(--fg4); }
/* иллюстрации */
.mart { margin: 12px 0 6px; min-height: 168px; border-radius: 16px; }
.mart.game { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; background: linear-gradient(180deg, #F7F9FD, #FFFFFF); border: 1px solid var(--rowline); }
.mchart { width: 100%; height: 144px; display: block; }
.mchart .ln { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mchart .cut { stroke: var(--fg3); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.mchart .dt { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.mpills { display: flex; flex-direction: column; gap: 12px; }
.mpill { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px 0 12px; border-radius: 12px; background: #fff; font-size: 16px; font-weight: 800; color: var(--fg);
  white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .08); }
.mpill.hit { border-bottom: 2px solid var(--pos-bg); } .mpill.miss { border-bottom: 2px solid var(--neg-bg); }
.ma { flex: 0 0 auto; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ma.up { stroke: var(--pos-strong); } .ma.dn { stroke: var(--neg-strong); }
.mart.duel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 12px 8px; }
.mtgt { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 12px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 16px; font-weight: 800;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .08); white-space: nowrap; }
.mvs { display: flex; align-items: center; gap: 0; }
.mav { flex: 0 0 auto; width: 76px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.mav svg { stroke: none; }
.mav.a { background: #E6EEFF; } .mav.a svg { fill: var(--accent); }
.mav.b { background: #F1EAFE; } .mav.b svg { fill: #7C3AED; }
.mvsl { width: 26px; border-top: 2px dashed var(--ctl); }
.mvsc { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: #7A8394; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; }
.mchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mchip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font-size: 14px; font-weight: 700; color: var(--fg4);
  white-space: nowrap; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.mci { width: 18px; height: 18px; fill: none; stroke: var(--fg3); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* строки карточки */
.mpts { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mpts li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.4; color: var(--fg5); }
.mpts .mi { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mpts li span { min-width: 0; padding-top: 1px; }
/* низ окна */
.mfoot { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 40px 26px; }
.mnote { min-width: 0; font-size: 14px; line-height: 1.4; color: var(--fg2); }
.mgo { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 56px; min-width: 210px; padding: 0 28px; border-radius: 16px; border: none;
  background: var(--accent); color: #fff; font-size: 19px; font-weight: 800; box-shadow: 0 6px 18px rgba(20, 99, 255, .32); }
.mgo:hover { background: var(--accent-ink); }
.mgo:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 3px; }
@media (max-width: 1023px) {
  .mbody { padding: 24px 24px 6px; } .mfoot { padding: 14px 24px 22px; }
  .mh { font-size: 34px; } .mct { font-size: 27px; } .mcard { padding: 18px 18px 16px; } .mcard.on { padding: 17.5px 17.5px 15.5px; }
  .mart.game { grid-template-columns: minmax(0, 1fr); } .mpills { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 759px) {
  .mwrap { padding: 10px; align-items: stretch; }
  .mdlg { border-radius: 22px; }
  .mbody { padding: 16px 16px 6px; }
  .mtop .bname { font-size: 18px; } .mclose { width: 40px; height: 40px; }
  .mh { margin-top: 12px; font-size: 28px; } .msub { font-size: 15px; }
  .mcards { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 16px; }
  .mcard { padding: 16px; border-radius: 18px; } .mcard.on { padding: 15.5px; }
  .mct { font-size: 24px; } .mcd { font-size: 14px; } .mk { font-size: 16px; }
  .mart { min-height: 0; margin: 8px 0 4px; } .mchart { height: 96px; }
  .mpill { height: 38px; font-size: 14px; padding: 0 12px 0 10px; } .mtgt { height: 36px; font-size: 14px; }
  .mav { width: 60px; height: 52px; } .mav svg { width: 28px; height: 28px; } .mvsc { width: 38px; height: 38px; font-size: 13px; } .mvsl { width: 16px; }
  .mchip { height: 32px; font-size: 12px; padding: 0 10px; }
  .mpts { gap: 8px; } .mpts li { font-size: 14px; gap: 10px; } .mpts .mi { width: 20px; height: 20px; }
  .mfoot { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 16px 14px; border-top: 1px solid var(--rowline); }
  .mnote { font-size: 12px; text-align: center; }
  .mgo { width: 100%; min-width: 0; height: 52px; font-size: 17px; }
}
@media (max-width: 359px) { .mh { font-size: 24px; } .mct { font-size: 21px; } .mchip { font-size: 11px; padding: 0 8px; } .mpill { font-size: 13px; } }

/* v2 §9.6: мои ставки — цветом своей стороны (только цветом: знака ✓ / ✗ на фишке нет — это знак «выиграл / проиграл»); палитра — #app[data-colors]
   и .dpage[data-colors] (meta.bet_colors = server.BET_COLORS). Текст на фишке — контраст ≥ 4.5.
   v3 (с 04.11, дизайн v3 §15 — как в макетах 2 и 4: Reaches — зелёный, Doesn't reach — красный; «зелёный / красный только для смысла»):
   #15803D / #DC2626 (белый текст 5.0 / 4.8). Решение dz 04.11, вечер: «As in the mockups» (SPEC §15) — v3 основной, A больше не основной. У v3 пара
   красный / зелёный хуже различима при протанопии и дейтеранопии — сторону дублируют колонка лесенки и подпись строки, на метке — только цвет.
   a — тёплый / холодный, как огоньки / волны колонок: жжёный оранжевый #C2410C / глубокий бирюзовый #0E7490 (различимы при протанопии, дейтеранопии,
   тританопии: ΔE76 пары ≥ 60 по симуляции Machado 2009); b — заливка / контур, как кнопки колонок; c — фиолетовый / золотой */
#app, #app[data-colors="v3"], .dpage, .dpage[data-colors="v3"] { --bet-hit-bg: #15803D; --bet-hit-fg: #FFFFFF; --bet-hit-bd: #15803D; --bet-miss-bg: #DC2626; --bet-miss-fg: #FFFFFF; --bet-miss-bd: #DC2626; }
#app[data-colors="a"], .dpage[data-colors="a"] { --bet-hit-bg: #C2410C; --bet-hit-fg: #FFFFFF; --bet-hit-bd: #C2410C; --bet-miss-bg: #0E7490; --bet-miss-fg: #FFFFFF; --bet-miss-bd: #0E7490; }
#app[data-colors="b"], .dpage[data-colors="b"] { --bet-hit-bg: #0B1220; --bet-hit-fg: #FFFFFF; --bet-hit-bd: #0B1220; --bet-miss-bg: #FFFFFF; --bet-miss-fg: #0B1220; --bet-miss-bd: #0B1220; }
#app[data-colors="c"], .dpage[data-colors="c"] { --bet-hit-bg: #6A3FD3; --bet-hit-fg: #FFFFFF; --bet-hit-bd: #6A3FD3; --bet-miss-bg: #E5B000; --bet-miss-fg: #1C1404; --bet-miss-bd: #E5B000; }
.chip.hit { background: var(--bet-hit-bg); color: var(--bet-hit-fg); border-color: var(--bet-hit-bd); }
.chip.miss { background: var(--bet-miss-bg); color: var(--bet-miss-fg); border-color: var(--bet-miss-bd); }
.chip.lost { background: var(--empty); color: #fff; border-color: var(--empty); }
.sw { display: inline-block; flex: 0 0 auto; width: 12px; height: 7px; border-radius: 4px; border: 1.5px solid; }   /* легенда: цвет моих ставок у названия колонки */
.sw.hit { background: var(--bet-hit-bg); border-color: var(--bet-hit-bd); } .sw.miss { background: var(--bet-miss-bg); border-color: var(--bet-miss-bd); }

/* ===== игра — дизайн v3, макет 2 (спека ChatGPT §5): полоса рынка · раунд (полоса 0–40–60, график) · лесенка уровней · реестр сделок · «My positions» и
   «Live activity». ≥ 1000 px — три колонки макета (раунд ~36–38 %, лесенка ~33–34 %, реестр сделок ~29–30 %); 760–999 — раунд и лесенка рядом,
   реестр сделок — нижняя выдвижная панель; < 760 — всё стопкой, реестр — нижняя панель. Ничего не вылезает за свою карточку (v2 §10.1) ===== */
.game { position: relative; }
.game > .card { position: relative; min-width: 0; }
/* --- полоса рынка (не бегущая строка, v2 §9.1) --- */
.mkt { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; padding: 14px 18px; }
.apill { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--thead);
  color: var(--fg); font-size: 17px; font-weight: 800; white-space: nowrap; }
.apill[aria-disabled="true"] { cursor: default; }
.apill .coin { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: #F7931A; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.apill .quote { font-weight: 500; color: var(--fg2); }
.mprice { font-size: 30px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.mprice.off { color: var(--off); }
.mchg { font-size: 16px; font-weight: 700; white-space: nowrap; color: var(--fg2); }
.mchg.pos { color: var(--pos); } .mchg.neg { color: var(--neg); }
.mstat { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--thead); border: 1px solid var(--line);
  font-size: 14px; font-weight: 600; white-space: nowrap; }
.mstat.off { color: var(--fg3); } .mstat.off .sdot { background: var(--empty); }
.sdot { flex: 0 0 auto; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--pos-strong); }
.monl { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--fg2); white-space: nowrap; }
.mkt .dlive { flex: 1 1 160px; min-width: 0; text-align: right; }
/* --- карточка раунда --- */
.rcard { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 10px; overflow: hidden; container: rc / inline-size; }
.rhead { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.rno { font-size: 20px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.phpill { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 700; white-space: nowrap;
  background: var(--muted); color: var(--fg4); }
.phpill.open { background: var(--pos); color: #fff; }
.phpill.lock { background: var(--fg); color: #fff; }
.phpill.glow { background: var(--glow); color: var(--fg); }
.phpill.settle { background: var(--accent); color: #fff; }
.phpill.off, .phpill.void { background: var(--muted); color: var(--fg3); }
.rlen { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--fg2); white-space: nowrap; }
.info { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: transparent; color: var(--fg2); }
.info:hover { background: var(--muted); color: var(--fg); }
.rbar { position: relative; height: 62px; }
.rtrack { position: relative; height: 10px; margin-top: 4px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.rzone { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, rgba(11, 18, 32, .12) 0 5px, rgba(11, 18, 32, .03) 5px 10px); }
.rfill { position: absolute; left: 0; top: 0; bottom: 0; z-index: 1; border-radius: inherit; background: var(--pos-strong); transition: width .9s linear; }
.game[data-zone="closed"] .rfill { background: var(--fg4); } .game[data-zone="settle"] .rfill { background: var(--accent); } .game[data-zone="off"] .rfill { background: var(--empty); }
.rcut { position: absolute; top: 0; bottom: 0; z-index: 2; width: 2px; margin-left: -1px; background: var(--fg); }
.rlbls { position: absolute; left: 0; right: 0; top: 20px; }
.rl { position: absolute; top: 0; display: flex; flex-direction: column; font-size: 12px; line-height: 1.25; color: var(--fg2); white-space: nowrap; }
.rl b { font-size: 13px; font-weight: 800; color: var(--fg); }
.rl small { font-size: 11px; color: var(--fg3); }
.rl.c { transform: translateX(-50%); align-items: center; text-align: center; } .rl.r { transform: translateX(-100%); align-items: flex-end; text-align: right; }
@container rc (max-width: 400px) { .rhead { padding-right: 30px; } .rlen { position: absolute; top: 0; right: 0; } .phpill { font-size: 13px; padding: 0 11px; } .rno { font-size: 18px; } .rl.c { transform: translateX(calc(-100% - 6px)); align-items: flex-end; text-align: right; } .rl small { display: none; } .rlen > span { display: none; }
  .rl { width: min-content; } .rl > span { white-space: normal; } }   /* §17: «Predictions open / close» — по словам в две строки, не налезают (320 px) */
.chart { position: relative; flex: 1 1 auto; min-height: 300px; height: 360px; }
#csvg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
#csvg .grid { stroke: var(--rowline); stroke-width: 1; }
#csvg .hbg { fill: rgba(11, 18, 32, .02); } #csvg .hln { stroke: rgba(11, 18, 32, .07); stroke-width: 3; }
#csvg .ccut { stroke: var(--fg); stroke-width: 1.5; stroke-dasharray: 5 4; }
#csvg .cs0 { stroke: var(--grey); stroke-width: 1; stroke-dasharray: 3 4; }
#csvg .carea { stroke: none; }
#csvg .cline { fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; }
#csvg .cgap { fill: none; stroke: var(--empty); stroke-width: 1.5; stroke-dasharray: 4 4; }
#csvg .cset { stroke: var(--accent); stroke-width: 2; }
#csvg .cduel { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 7 4; }
#csvg .cnow { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 2 4; opacity: .45; }
#csvg .cdot { fill: var(--accent); stroke: #fff; stroke-width: 3; } #csvg .cdot.off { fill: var(--empty); }
.cov { position: absolute; inset: 0; pointer-events: none; }
.cyl, .cxl, .cs0l { position: absolute; font-size: 11px; line-height: 14px; color: var(--fg3); white-space: nowrap; }
.cyl { transform: translateY(-50%); }
.cxl { transform: translateX(-50%); } .cxl.l { transform: none; } .cxl.r { transform: translateX(-100%); }
.cs0l { padding: 0 4px; border-radius: 4px; background: rgba(255, 255, 255, .9); color: var(--fg4); font-weight: 600; }
.ctag { position: absolute; display: inline-flex; align-items: center; padding: 0 8px; border-radius: 8px; background: #fff; border: 1.5px solid var(--line);
  box-shadow: var(--shadow); font-size: 14px; font-weight: 800; white-space: nowrap; }
.ctag.off { color: var(--off); } .ctag.set { border-color: var(--accent); color: var(--accent-ink); }
.cdl { position: absolute; padding: 1px 6px; border-radius: 6px; background: var(--accent-bg); color: var(--accent-ink); font-size: 11px; font-weight: 700; white-space: nowrap; }
.chip { position: absolute; padding: 0 6px; border-radius: 999px; border: 1.5px solid var(--my); background: var(--my); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; white-space: nowrap; }
/* SPEC v2 §17 (dz 05.11, A / B): линии уровней лесенки на графике (одна шкала), линия старта — ярче; мои покупки — точка цвета стороны с числом контрактов
   и пунктир того же цвета до 60 s (обе стороны одного уровня — пунктиры через один); после расчёта — ✓ / ✗; NOW — в ярлыке цены */
#csvg .clvl { stroke: var(--rowline); stroke-width: 1; }
#csvg .cs0 { stroke: var(--fg4); stroke-width: 1.2; stroke-dasharray: 4 4; }
.cyl.s0 { color: var(--fg2); font-weight: 700; }
#csvg .cbd { stroke-width: 1.8; stroke-dasharray: 5 5; stroke-linecap: butt; }
#csvg .cbd.hit { stroke: var(--bet-hit-bd); } #csvg .cbd.miss { stroke: var(--bet-miss-bd); }   /* фаза штриха — от x (app.js: общая для всех линий, alt — +5) */
.cbuy { position: absolute; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: 999px; border: 1.5px solid;
  font-family: var(--mono); font-size: 10.5px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 0 0 2px #fff; transform: translate(-50%, -50%); }   /* left / top — центр точки (секунда покупки, линия уровня) */
.cbuy.hit { background: var(--bet-hit-bg); color: var(--bet-hit-fg); border-color: var(--bet-hit-bd); }
.cbuy.miss { background: var(--bet-miss-bg); color: var(--bet-miss-fg); border-color: var(--bet-miss-bd); }
.cbuy.won { font-size: 12px; }
.cbuy.lost { background: #fff; font-size: 12px; } .cbuy.lost.hit { color: var(--bet-hit-bd); } .cbuy.lost.miss { color: var(--bet-miss-bd); }
.cbuy.void { background: var(--empty); border-color: var(--empty); color: #fff; }
.cbuy.edge { padding: 0 5px; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(11, 18, 32, .22); }   /* §17 (B): уровень за краем видимых — у края поля со стрелкой ↑ / ↓ */
.ctag .ctn { margin-right: 2px; font-size: 10px; font-weight: 800; letter-spacing: .04em; color: var(--accent); }
.ctag.off .ctn { color: var(--off); }
/* --- лесенка уровней --- */
.lcard { display: flex; flex-direction: column; padding: 14px 12px 8px; overflow: hidden; }
.lhead { display: flex; align-items: center; gap: 4px; padding: 0 4px 8px; }
.ltitle { font-size: 18px; font-weight: 800; white-space: nowrap; }
.lpays { margin-left: auto; font-size: 13px; color: var(--fg2); white-space: nowrap; }
.lcols, .lrow { display: grid; grid-template-columns: minmax(96px, .85fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 8px; align-items: center; }
.lcols { padding: 0 6px 6px; border-bottom: 1px solid var(--rowline); }
.lcols > span { min-width: 0; display: flex; flex-direction: column; align-items: center; font-size: 13px; line-height: 1.2; text-align: center; }
.lcols .c0 { align-items: flex-start; font-weight: 700; }
.lcols b { font-weight: 700; } .lcols small { font-size: 11px; color: var(--fg3); }
.lwrap { position: relative; flex: 1 1 auto; min-height: 320px; }
.lbody { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 4px; container: lad / inline-size; scrollbar-width: thin; }
.lrow { min-height: 46px; padding: 3px 2px; border-bottom: 1px solid var(--rowline2); }
.llv { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.llv .lvt { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.llv .ar { flex: 0 0 12px; text-align: center; font-weight: 800; color: var(--grey); }
.lrow.up .ar { color: var(--pos); } .lrow.dn .ar { color: var(--neg); }
.lmy { display: inline-flex; gap: 3px; } .lmy:empty { display: none; }
.lm { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; border: 1.5px solid; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }
.lm.hit { background: var(--bet-hit-bg); color: var(--bet-hit-fg); border-color: var(--bet-hit-bd); }
.lm.miss { background: var(--bet-miss-bg); color: var(--bet-miss-fg); border-color: var(--bet-miss-bd); }
/* §17 (B): строка уровня моей покупки — цветом стороны (обе стороны — пополам) */
.lrow.my-hit { background: color-mix(in srgb, var(--bet-hit-bg) 9%, transparent); box-shadow: inset 3px 0 0 var(--bet-hit-bd); }
.lrow.my-miss { background: color-mix(in srgb, var(--bet-miss-bg) 9%, transparent); box-shadow: inset 3px 0 0 var(--bet-miss-bd); }
.lrow.my-hit.my-miss { background: linear-gradient(90deg, color-mix(in srgb, var(--bet-hit-bg) 9%, transparent) 0 50%, color-mix(in srgb, var(--bet-miss-bg) 9%, transparent) 50% 100%);
  box-shadow: inset 3px 0 0 var(--bet-hit-bd), inset -3px 0 0 var(--bet-miss-bd); }
/* §17 (A): десктоп — видимое окно лесенки = поле графика (app.js alignLadder: отступы колонок и низа); высоту ряда задаёт карточка раунда */
.game[data-align="1"] .lwrap { min-height: 0; }
/* §17 (E): подсказка «i» и короткие сообщения — строкой под заголовком своей карточки, в потоке (ничего не закрывают) */
.csay { margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--thead); color: var(--fg2); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.csay[hidden] { display: none !important; }
.csay.tip { background: #fff; border-color: var(--accent); color: var(--fg); }
.lcard > .csay.tip.fit { font-size: 12px; line-height: 1.3; padding: 5px 10px; margin-bottom: 4px; }   /* §17 (E3): короткая подсказка уровней в зазоре над колонками (десктоп) */
.csay.ok { background: color-mix(in srgb, var(--my) 8%, #fff); border-color: var(--my); color: var(--myt); }
.csay.no { background: color-mix(in srgb, var(--neg) 6%, #fff); border-color: var(--neg); color: var(--fg); }
.csay.wait { background: #fff; border-color: var(--my); color: var(--myt); }
.csay .tlink { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.csay .tmore { margin: 0; padding: 0 2px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }   /* ревью 5e: полный текст подсказки уровней */
.mkt > .csay { flex: 1 1 100%; order: 99; margin: 0; }
.rcard > .csay { margin: 0; }
.lm.lost { background: var(--empty); color: #fff; border-color: var(--empty); }
.lc { min-width: 0; height: 40px; padding: 0 4px 0 8px; display: grid; grid-template-columns: minmax(min-content, 1fr) max-content; grid-template-rows: auto auto; align-items: center; column-gap: 4px;
  border-radius: 10px; border: 1.5px solid var(--fg); background: #fff; color: var(--fg); text-align: center; }
.lc .lx { grid-column: 1; grid-row: 1; align-self: end; font-size: 14px; font-weight: 800; line-height: 1.05; white-space: nowrap; }
.lc .lcp { grid-column: 1; grid-row: 2; align-self: start; display: flex; justify-content: center; gap: 0 4px; font-size: 10.5px; line-height: 1.2; color: var(--fg2); white-space: nowrap; }
.lc .lpp::before { content: '·'; margin-right: 4px; }
.lc .lplus { grid-column: 2; grid-row: 1 / 3; min-width: 26px; height: 26px; padding: 0 4px; white-space: nowrap; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; background: #fff; color: var(--fg); border: 1px solid var(--ctl); }
.lc:not([disabled]):not([aria-disabled="true"]):hover .lplus { border-color: var(--accent); color: var(--accent-ink); }
.lc.hit { background: var(--fg); color: #fff; } .lc.hit .lcp { color: #C3CAD6; } .lc.hit .lplus { border-color: #fff; }
.lc.noq, .lc.hit.noq { background: var(--thead); color: var(--fg3); border-color: var(--line); border-style: dashed; grid-template-columns: minmax(0, 1fr); } .lc.noq .lcp { color: var(--empty); }   /* §15: no offer — a buy would not go through */
.lc.busy .lplus { opacity: .45; }
.lc.fl-ok { animation: lcok .7s ease-out; } .lc.fl-no { animation: lcno .7s ease-out; }
@keyframes lcok { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, .0); } 25% { box-shadow: 0 0 0 4px rgba(22, 163, 74, .55); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } }
@keyframes lcno { 0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, .0); } 25% { box-shadow: 0 0 0 4px rgba(220, 38, 38, .5); } 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); } }
.lc.weak, .lc.hit.weak { background: #fff; color: var(--grey); border-color: var(--ctl); } .lc.weak .lcp { color: var(--empty); }
.lc.lock, .lc.hit.lock { background: var(--muted); color: var(--fg4); border-color: var(--muted); } .lc.lock .lcp { color: var(--fg3); }
.lc.won, .lc.hit.won { background: var(--fg); color: #fff; border-color: var(--fg); grid-template-columns: minmax(0, 1fr); } .lc.won .lcp { color: #C3CAD6; }
.lc.lost, .lc.hit.lost, .lc.off, .lc.hit.off, .lc.none, .lc.hit.none { background: var(--muted2); color: var(--empty); border-color: var(--muted2); grid-template-columns: minmax(0, 1fr); }
.lc .lx:only-child, .lc.lost .lx, .lc.off .lx, .lc.none .lx { grid-row: 1 / 3; align-self: center; }
/* §17 (ревью 5d, E2): строка NOW — накладка НУЛЕВОЙ высоты на высоте цены (app.js nowY: между строками своих уровней, линейно по цене): строки уровней
   идут подряд с равным шагом; линия цены — под ячейками (они выше, z-index 1), точка цены — у левого края; текста нет (он лёг бы на подпись уровня,
   правило dz №2) — цена и «NOW» в ярлыке графика на той же высоте, в title / aria-label; накладка не ловит нажатия */
.lrow .lc { position: relative; z-index: 1; }
.lnow { position: absolute; left: 4px; right: 4px; top: 0; height: 0; margin: 0; padding: 0; border: 0; pointer-events: none; }
.lnow::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 2px; border-radius: 1px; background: var(--accent); opacity: .6; }
.lnow .nd { position: absolute; left: -2px; top: 0; width: 10px; height: 10px; transform: translateY(-50%); z-index: 2; border-radius: 50%; border: 2.5px solid var(--accent); background: #fff;
  box-sizing: border-box; }
.lnow.set::before { background: var(--fg); } .lnow.set .nd { border-color: var(--fg); }
.lnow.off::before { background: var(--fg3); } .lnow.off .nd { border-color: var(--fg3); }
@container lad (max-width: 360px) {                      /* узкая лесенка (телефон, 1024): шанс и цена — двумя строками */
  .lrow, .lcols { grid-template-columns: minmax(90px, .8fr) minmax(0, 1fr) minmax(0, 1fr); column-gap: 6px; }
  .lc { height: 46px; padding: 0 2px 0 4px; column-gap: 2px; } .lc .lcp { flex-direction: column; align-items: center; font-size: 10px; line-height: 1.15; } .lc .lpp::before { content: none; }
  .lc .lplus { min-width: 22px; height: 24px; padding: 0 2px; font-size: 14px; } .lrow { min-height: 52px; } .lc .lx { font-size: 12.5px; } .llv { font-size: 13px; }
}
/* --- реестр сделок «My trades · this round» (§15, dz 04.11 вечер): синяя шапка панели как в макете 2, кнопки +N (сколько покупает один «+»), строка итога
   последнего «+», строки (сторона и уровень · N × цена · заплачено, под ними «если сыграет» до и после комиссии), итог, остаток $10 раунда --- */
.bb { display: flex; flex-direction: column; overflow: hidden; padding: 0; container: bb / inline-size; }
.bbbar { display: flex; align-items: center; gap: 8px; min-height: 60px; padding: 8px 10px 8px 12px; background: var(--accent); color: #fff; }
.bbtog { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 4px; border: none; border-radius: 10px; background: transparent; color: #fff;
  font-size: 21px; font-weight: 800; letter-spacing: -.01em; text-align: left; }
.bbtog .cart { flex: 0 0 auto; }
.bbt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbt .bbsub { font-size: 15px; font-weight: 600; opacity: .86; }
.bbn { flex: 0 0 auto; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: #fff; color: var(--accent-ink); display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; }
.bbsum { flex: 0 0 auto; font-size: 16px; font-weight: 800; white-space: nowrap; }
.bbsum:empty, .bb[data-open="1"] .bbsum { display: none; }
.bbchev { flex: 0 0 auto; width: 40px; height: 40px; border: none; border-radius: 10px; background: rgba(255, 255, 255, .16); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.bb[data-open="0"] .bbchev svg { transform: rotate(180deg); }
.bbtog:focus-visible, .bbchev:focus-visible { outline-color: #fff; }
.bbq { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 0; }
.bbqt { font-size: 15px; } .bbqt b { font-weight: 800; } .bbqt span { font-size: 13px; color: var(--fg2); }
.bbqb { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.bbqb button { min-width: 0; height: 44px; padding: 0; border-radius: 10px; border: 1px solid var(--line); background: #fff; color: var(--fg); font-size: 16px; font-weight: 800; box-shadow: var(--shadow); }
.bbqb button:hover { border-color: var(--accent); color: var(--accent-ink); }
.bbqb button.on { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(20, 99, 255, .28); }
.bbbody { display: flex; flex-direction: column; gap: 12px; min-height: 0; padding: 12px 14px 14px; }
.bblast { padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.35; font-weight: 600; overflow-wrap: anywhere; }
.bb > .bblast { margin: 12px 14px 0; }                    /* 05.11 (6a): итог «+» — под полосой реестра (и у свёрнутой нижней панели), тоста поверх шапки нет */
.bblast.k-ok { background: var(--pos-bg); color: var(--pos); } .bblast.k-part { background: var(--warn-bg); color: var(--warn-fg); }
.bblast.k-no { background: var(--neg-bg); color: #9B1C1C; } .bblast.k-wait { background: var(--muted); color: var(--fg4); }
.rghead { font-size: 14px; font-weight: 800; color: var(--fg); }
.rglist { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding: 1px; }
.rglist:empty { display: none; }
.rgr { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(52px, auto); align-items: center; column-gap: 10px; row-gap: 2px; padding: 8px 10px;
  border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.rgr .rs { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; font-size: 14px; }
.rgr .rs b { font-weight: 800; white-space: nowrap; } .rgr .rs .lv { font-weight: 600; white-space: nowrap; }
.rgr .rs .sw { width: 10px; height: 10px; border-radius: 3px; }
.rgr .rq { grid-column: 2; grid-row: 1; font-size: 13px; color: var(--fg2); white-space: nowrap; text-align: right; }
.rgr .rp { grid-column: 3; grid-row: 1; font-size: 15px; font-weight: 800; text-align: right; white-space: nowrap; }
.rgr .rsub { grid-column: 1 / -1; grid-row: 2; font-size: 12px; line-height: 1.3; color: var(--fg3); }
.rgr.won { border-color: var(--pos); background: var(--pos-bg); } .rgr.won .rp { color: var(--pos); }
.rgr.lost { background: var(--thead); } .rgr.lost .rp { color: var(--neg); } .rgr.lost .rs, .rgr.lost .rq { color: var(--fg3); }
.rgr .rsub.pos { color: var(--pos); } .rgr .rsub.neg { color: var(--fg3); }
@container bb (max-width: 330px) { .rgr { grid-template-columns: minmax(0, 1fr) auto; } .rgr .rq { grid-column: 1; grid-row: 2; text-align: left; } .rgr .rp { grid-column: 2; grid-row: 1 / 3; }
  .rgr .rsub { grid-row: 3; } .bbtog { font-size: 18px; } .bbt .bbsub { display: none; } .bbtot .k { font-size: 11px; } }
.bbempty { margin: 0; padding: 14px 10px; border-radius: 12px; border: 1px dashed var(--ctl); font-size: 13px; line-height: 1.4; color: var(--fg3); text-align: center; }
.bbtot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 12px; border: 1px solid var(--line); background: var(--thead); }
.bbtot > div { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; text-align: center; }
.bbtot > div + div { border-left: 1px solid var(--line); }
.bbtot .k { font-size: 12px; line-height: 1.2; color: var(--fg2); } .bbtot b { font-size: 22px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.bbtot b.pos { color: var(--pos); } .bbtot b.neg { color: var(--neg); }
.bbtot small { font-size: 11px; line-height: 1.2; color: var(--fg3); }
.bbtot.rows { grid-template-columns: minmax(0, 1fr); } .bbtot.rows > div { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; padding: 8px 12px; }
.bbtot.rows > div + div { border-left: none; border-top: 1px solid var(--line); } .bbtot.rows .k { flex: 0 0 auto; } .bbtot.rows b { flex: 1 1 auto; min-width: 0; text-align: right; }
.bbtot.rows small { flex-basis: 100%; text-align: right; }
.bbcap { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 10px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--line); }
.bbcap .k { font-size: 13px; color: var(--fg2); white-space: nowrap; } .bbcap b { font-size: 15px; font-weight: 800; text-align: right; overflow-wrap: anywhere; }
.bbcap .cbar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.bbcap .cbar i { display: block; height: 100%; border-radius: inherit; background: var(--pos-strong); transition: width .4s ease-out; }
.bbcap.spent { border-color: #F3C98B; background: var(--warn-bg); } .bbcap.spent b { color: var(--warn-fg); font-size: 13px; }
.bbfee { margin-top: -4px; font-size: 12px; line-height: 1.35; color: var(--fg3); text-align: center; }
.bbhint { font-size: 13px; line-height: 1.35; color: var(--fg2); text-align: center; }
.bb .fsbtn { align-self: stretch; }
.bbscrim { display: none; }
@keyframes bbbump { 0%, 100% { transform: none; } 40% { transform: translateY(-4px); } }
.bb.bump .bbbar { animation: bbbump .35s ease-out; }
/* --- низ: «My positions (this round)» и «Live activity» --- */
.btm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
.bpos, .bact { min-width: 0; padding: 16px 18px; }
.bact { border-left: 1px solid var(--line); }
.bth { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; font-size: 18px; }
.bth .cnt { min-width: 24px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--muted); color: var(--fg); display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; }
.bth b { font-weight: 800; white-space: nowrap; } .bth .sub2 { font-size: 15px; color: var(--fg2); white-space: nowrap; } .bth .cnt { height: 26px; min-width: 28px; font-size: 13px; }
.poslist { container: pos / inline-size; }
.pempty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 18px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--thead);
  font-size: 13px; line-height: 1.4; color: var(--fg2); text-align: center; }
.pempty b { font-size: 14px; font-weight: 600; color: var(--fg); } .pempty span { font-style: italic; } .pempty .plast { font-style: normal; color: var(--fg4); }
.ptab { display: grid; grid-template-columns: minmax(0, 1fr) repeat(5, auto); column-gap: 14px; }
.pth, .prow { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; }
.pth { padding: 4px 0 6px; border-bottom: 1px solid var(--rowline); font-size: 11px; color: var(--fg2); }
.prow { min-height: 42px; padding: 6px 0; border-bottom: 1px solid var(--rowline2); font-size: 13px; }
.pth .r, .prow .r { text-align: right; } .prow > span { min-width: 0; }
.prow .pb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.prow .pb b { font-weight: 700; white-space: nowrap; } .prow .pb .mono { white-space: nowrap; } .prow .pb small { flex-basis: 100%; font-size: 11px; color: var(--fg3); }
.prow .sw { width: 10px; height: 10px; border-radius: 3px; }
.prow .pst { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 4px; color: var(--fg2); white-space: nowrap; }
.prow.won .pst { color: var(--pos); font-weight: 700; } .prow.lost .pst { color: var(--fg3); } .prow.waiting .pst, .prow.placing .pst { color: var(--fg3); }
.prow .pos { color: var(--pos); font-weight: 700; } .prow .neg { color: var(--neg); font-weight: 700; }
.prow .act { height: 24px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--ctl); background: #fff; font-size: 11px; }
@container pos (max-width: 520px) {                      /* узко (телефон, реестр сделок): строка позиции — ставка и статус, под ними числа (переносятся) */
  .pth { display: none; } .ptab { display: block; }
  .prow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; }
  .prow .pb { flex: 1 1 calc(100% - 132px); } .prow .pst { flex: 0 0 120px; margin-left: auto; text-align: right; justify-content: flex-end; white-space: normal; }
  .prow > span:nth-child(2), .prow > span:nth-child(3), .prow > span:nth-child(4), .prow > span:nth-child(6) { flex: 0 0 auto; order: 2; text-align: left; font-size: 12px; color: var(--fg3); white-space: nowrap; }
  .prow > span:nth-child(6) { margin-left: auto; color: var(--fg); }
  .prow > span:nth-child(2)::before { content: 'qty '; } .prow > span:nth-child(3)::before { content: 'paid '; } .prow > span:nth-child(4)::before { content: 'payout '; }
  .prow > span:nth-child(6)::before { content: 'P&L '; color: var(--fg3); font-weight: 400; }
}
.actlist { display: flex; flex-direction: column; }
.actlist { container: act / inline-size; }
.arw { display: grid; grid-template-columns: minmax(0, 1fr) auto auto minmax(28px, auto) minmax(52px, auto); column-gap: 10px; align-items: center; min-height: 36px;
  border-bottom: 1px solid var(--rowline2); font-size: 14px; }
.arw:last-child { border-bottom: none; }
.arw .an { min-width: 0; display: flex; align-items: center; gap: 8px; color: var(--fg); }
.arw .an svg { flex: 0 0 auto; color: var(--fg3); } .arw .an span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arw.me .an span { color: var(--myt); font-weight: 700; }
.arw .aw { padding: 2px 8px; border-radius: 6px; border: 1.5px solid; font-size: 12px; font-weight: 700; white-space: nowrap; }
.arw .aw.hit { background: var(--bet-hit-bg); color: var(--bet-hit-fg); border-color: var(--bet-hit-bd); }
.arw .aw.miss { background: var(--bet-miss-bg); color: var(--bet-miss-fg); border-color: var(--bet-miss-bd); }
.arw .al { font-weight: 700; white-space: nowrap; } .arw .aq { text-align: right; } .arw .ag { font-size: 12px; color: var(--fg3); text-align: right; white-space: nowrap; }
.aempty { margin: 6px 0; font-size: 13px; color: var(--fg3); }
@container act (max-width: 480px) {                      /* узко: имя и «когда» — сверху, сторона, уровень и число — под ними */
  .arw { grid-template-columns: auto auto minmax(0, 1fr) auto; row-gap: 3px; padding: 6px 0; }
  .arw .an { grid-column: 1 / 4; grid-row: 1; } .arw .ag { grid-column: 4; grid-row: 1; }
  .arw .aw { grid-column: 1; grid-row: 2; } .arw .al { grid-column: 2; grid-row: 2; } .arw .aq { grid-column: 3 / 5; grid-row: 2; }
}
/* --- раскладка --- */
@media (min-width: 1000px) {
  .game { display: grid; grid-template-columns: minmax(300px, 34fr) minmax(330px, 36fr) minmax(262px, 30fr); grid-template-rows: auto 1fr auto;
    grid-template-areas: "mkt mkt bb" "rnd lad bb" "btm btm btm"; gap: 16px; align-items: stretch; }
  .mkt { grid-area: mkt; } .rcard { grid-area: rnd; } .lcard { grid-area: lad; } .btm { grid-area: btm; }
  .bb { grid-area: bb; align-self: start; }
}
@media (min-width: 1280px) { .game { grid-template-columns: minmax(0, 38fr) minmax(0, 33fr) minmax(0, 29fr); } }
@media (min-width: 760px) and (max-width: 999px) {
  .game { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "mkt mkt" "rnd lad" "btm btm"; gap: 14px; padding-bottom: calc(var(--bbh, 104px) + 14px) !important; }   /* под свёрнутую панель реестра (app.js: --bbh) */
  .mkt { grid-area: mkt; } .rcard { grid-area: rnd; } .lcard { grid-area: lad; } .btm { grid-area: btm; }
  .chart { height: 300px; min-height: 240px; }
  .rcard { padding: 14px 14px 8px; } .rlen > span { display: none; }
}
@media (max-width: 999px) {                              /* реестр — нижняя выдвижная панель: свёрнута — полоса (число строк, сумма) и кнопки +N, развёрнута — над страницей */
  .game > .bb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; max-height: calc(100% - 56px); border-radius: 18px 18px 0 0; border-bottom: none;
    box-shadow: 0 -10px 30px rgba(15, 23, 42, .18); }
  .bbbar { min-height: 48px; padding: 4px 8px 4px 10px; border-radius: 18px 18px 0 0; } .bbtog { height: 40px; font-size: 18px; gap: 8px; } .bbt .bbsub { font-size: 13px; }
  .bbchev { width: 36px; height: 36px; }
  .bbq { flex-direction: row; align-items: center; gap: 8px; padding: 8px 10px; } .bbqt { flex: 0 0 auto; font-size: 13px; line-height: 1.15; } .bbqt span { display: none; }
  .bbqb { flex: 1 1 auto; min-width: 0; gap: 5px; } .bbqb button { height: 38px; font-size: 15px; }
  .bb[data-open="0"] .bbq { padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .bb > .bblast { margin: 8px 10px 0; padding: 6px 10px; font-size: 12.5px; }
  /* ревью 05.11 (6a): свёрнутая панель — итог «+» внутри её полосы, на месте заголовка, числа строк и суммы: панель не растёт, страницу не закрывает */
  .game > .bb[data-say="1"] > .bblast { position: absolute; top: 24px; left: 42px; right: 52px; z-index: 1; transform: translateY(-50%); margin: 0; max-height: 40px;
    padding: 3px 10px; font-size: 12.5px; line-height: 17px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;
    overflow-wrap: normal; pointer-events: none; }
  .game > .bb[data-say="1"] .bbt, .game > .bb[data-say="1"] .bbn, .game > .bb[data-say="1"] .bbsum { display: none; }
  .bb .bbbody { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .rglist { max-height: none; overflow: visible; }
  .bbscrim { display: block; position: fixed; inset: 0; z-index: 45; background: var(--scrim); }
  .game > .bb[data-open="0"] .bbchev svg { transform: none; } .game > .bb[data-open="1"] .bbchev svg { transform: rotate(180deg); }   /* панель снизу: свёрнута — стрелка вверх */
  .bbscrim[hidden] { display: none !important; }
  .btm { grid-template-columns: minmax(0, 1fr); } .bact { border-left: none; border-top: 1px solid var(--line); }
}
@container bb (max-width: 420px) { .bb[data-open="0"][data-has="1"] .bbt .bbsub { display: none; } }
@container bb (max-width: 340px) { .bbq { flex-wrap: wrap; row-gap: 6px; } .bbqt { flex: 1 1 100%; } .bb[data-open="0"][data-has="1"] .bbt { display: none; } }   /* 05.11 (6e): «Each + buys» видна и на 320 — своей строкой над +N */
@media (min-width: 700px) and (max-width: 999px) { .game > .bb { left: 50%; right: auto; width: 640px; margin-left: -320px; } }   /* планшет: панель по центру, не во всю ширину */

/* тост, карточка расчёта */
.toast { position: fixed; z-index: 90; left: 12px; right: 12px; top: 12px; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; text-align: center; box-shadow: 0 8px 24px rgba(11, 18, 32,.12); border: 1px solid var(--fg); background: var(--fg); color: #fff; }
.toast.ok { background: var(--my); border-color: var(--my); color: #fff; }
.toast.wait { background: #fff; border-color: var(--my); color: var(--my); }
.ro { position: absolute; inset: 0; z-index: 25; background: rgba(245, 247, 250,.86); display: flex; align-items: center; justify-content: center; }
.bempty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 0 16px; font-size: 13px; color: var(--fg3); background: #fff; text-align: center; }
.bempty .mono { margin: 0 .25em; }
.rocard { width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 16px 40px rgba(11, 18, 32,.14); }
.rot { font-size: 12px; color: var(--fg2); text-align: center; }
.rob { font-size: 44px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--fg2); }
.rob.win { color: var(--pos); } .rob.loss { color: var(--neg); }
.rob.txt { font-size: 28px; font-weight: 700; letter-spacing: 0; }
.rob.txt.long { font-size: 20px; }
.ros { font-size: 13px; color: var(--fg4); }
/* §17 (B): карточка расчёта — над графиком (на месте заголовка и полосы раунда), не поверх него: точки покупок видны — ✓ / ✗ */
.ro.top { inset: 0 0 auto 0; height: var(--roh, 130px); border-radius: inherit; background: #fff; }
.ro.top .rocard { width: auto; max-width: calc(100% - 16px); padding: 6px 16px; gap: 2px; border: none; box-shadow: none; background: transparent; }
.ro.top .rob { font-size: 40px; line-height: 1.05; } .ro.top .rob.txt { font-size: 26px; } .ro.top .rob.txt.long { font-size: 20px; }

/* ===== быстрые суммы (окно Challenge) ===== */
.chips4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.chips4 button { height: 40px; border-radius: 10px; font-family: var(--mono); font-size: 15px; font-weight: 700; background: #fff; color: var(--fg); border: 1px solid var(--ctl); }
.chips4 button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ===== шторки (телефон) ===== */
.sheetwrap { position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 40; background: rgba(11, 18, 32,.3); display: flex; flex-direction: column; justify-content: flex-end; }
.sheet { background: #fff; border-radius: 20px 20px 0 0; padding: 10px 16px 16px; display: flex; flex-direction: column; gap: 12px; max-height: 100%; overflow: auto; }
.grip { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--ctl); }
.shh { display: flex; align-items: center; justify-content: space-between; }
.sht { font-size: 17px; font-weight: 700; }
.close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; border: none; background: var(--muted); color: var(--fg); }
.alist { display: flex; flex-direction: column; gap: 8px; }
.arow { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 0 12px; border-radius: 12px; border: 1.5px solid var(--line); background: #fff; text-align: left; color: var(--fg); }
.arow[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-bg); }
.arow .an { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.arow .an .id { font-size: 15px; font-weight: 700; } .arow .an .nm { font-size: 11px; color: var(--fg3); white-space: nowrap; }
.arow .mi { display: flex; gap: 1px; } .arow .mi.fire { align-items: flex-end; } .arow .mi.sea { align-items: center; gap: 0; }
.arow .ap { flex: 0 0 96px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.arow .ap .p { font-family: var(--mono); font-size: 13px; font-weight: 700; } .arow .ap .c { font-family: var(--mono); font-size: 11px; color: var(--fg3); }

/* ===== карточки: заголовок ===== */
.pt { font-size: 14px; font-weight: 700; }
.phd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sub.tiny { font-size: 11px; margin-top: 4px; }

/* ===== шестерёнка (дизайн v3: в шапке, только когда в ней что-то есть — смена ника по meta.nick.change или переключатели админа) ===== */
.gear { position: relative; flex: 0 0 auto; }
.gear > button { width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--fg); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow); }
.gearmenu { position: absolute; right: 0; top: 46px; z-index: 50; width: 280px; padding: 4px 12px 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 8px 24px rgba(11, 18, 32,.12); display: flex; flex-direction: column; gap: 8px; font-size: 13px; text-align: left; }
.gearmenu .admin { display: flex; flex-direction: column; gap: 8px; padding-top: 8px; }
.gearmenu label { display: flex; align-items: center; gap: 8px; }
/* v2 §7: ник в шестерёнке */
.gearmenu .nickbox { display: flex; flex-direction: column; gap: 6px; padding: 10px 2px 8px; border-bottom: 1px solid var(--rowline2); }
.gearmenu .nickbox .nl { font-size: 12px; color: var(--fg2); }
.gearmenu .nickbox .nr { display: flex; gap: 6px; }
.gearmenu .nickbox input { flex: 1 1 auto; min-width: 0; height: 36px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--ctl); font: inherit; font-size: 14px; color: var(--fg); background: #fff; }
.gearmenu .nickbox input:focus { outline: 2px solid var(--my); outline-offset: 0; border-color: var(--my); }
.gearmenu .nickbox button { flex: 0 0 auto; height: 36px; padding: 0 12px; border-radius: 9px; border: none; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.gearmenu .nickbox .ns { font-size: 11px; line-height: 1.35; color: var(--fg2); } .gearmenu .nickbox .ns.bad { color: var(--neg); }
/* v2 §4: фриспин — рядом с фишками ставки: счётчик «4/6», с жетоном — «Фриспин ×1», нажат — следующий тап у уровня идёт за счёт доски */
.fsbtn { flex: 0 0 auto; height: 40px; padding: 0 10px; border-radius: 10px; border: 1px dashed var(--ctl2); background: var(--thead); color: var(--fg3); font-size: 12px; font-weight: 600; white-space: nowrap; }
.fsbtn.on { border: 1.5px solid var(--glow); background: #FFF4E6; color: #8A4A07; font-weight: 700; }
.fsbtn[aria-pressed="true"] { background: var(--glow); border-color: var(--glow); color: var(--fg); }

.age { height: 22px; padding: 0 8px; border-radius: 6px; background: var(--fg); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; }

#app[data-tab="stats"] .game { display: none !important; }
#app[data-tab="game"] .stats { display: none !important; }

/* ===== телефон (< 760) ===== */
@media (max-width: 759px) {
  #app { position: relative; height: 100dvh; min-height: 560px; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); }
  .topbar { flex: 0 0 auto; }
  .duels { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px 12px; }
  .duels > .card { padding: 14px 16px; }
  .duels .dr .a { flex-basis: 100%; }                     /* строка «My duels»: текст — во всю ширину карточки (ник одним куском), статус — над ним */
  /* игра (макет 2 на телефоне): блоки стопкой в одной прокрутке, реестр сделок — нижняя панель (под неё — запас снизу по её высоте, app.js: --bbh) */
  .game { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px calc(var(--bbh, 104px) + 12px); }
  .game > .card { flex: 0 0 auto; }
  .mkt { gap: 6px 12px; padding: 10px 12px; }
  .apill { height: 34px; font-size: 15px; padding: 0 10px 0 4px; } .apill .coin { width: 26px; height: 26px; }
  .mprice { font-size: 24px; } .mchg { font-size: 13px; } .mstat { height: 30px; padding: 0 10px; font-size: 12px; } .monl { font-size: 12px; }
  .rcard { padding: 12px 12px 6px; gap: 8px; } .rno { font-size: 17px; } .phpill { height: 28px; padding: 0 11px; font-size: 13px; } .rlen > span { display: none; }
  .rbar { height: 58px; } .rl small { display: none; }
  .chart { height: 220px; min-height: 200px; } .cyl, .cxl, .cs0l { font-size: 10px; } .ctag { font-size: 12px; }
  .lcard { padding: 12px 8px 6px; } .ltitle { font-size: 16px; }
  .lwrap { min-height: 0; height: min(460px, 60dvh); }
  .bpos, .bact { padding: 14px 12px; } .bth { font-size: 16px; }
  .topbar .gearmenu { top: 42px; }
}

/* ===== десктоп (≥ 760) ===== */
@media (min-width: 760px) {
  /* дизайн v3: шапка — во всю ширину окна (её содержимое — по краям колонки 1392 px), под ней колонка 1440 px с полями 24 px */
  #app { position: relative; min-height: 100vh; padding: 0 0 24px; display: flex; flex-direction: column; gap: 16px; }
  .topbar { padding-left: max(24px, calc((100% - 1392px) / 2)); padding-right: max(24px, calc((100% - 1392px) / 2)); }
  #app > .game, #app > .stats { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 24px; }
  #app > .duels { width: calc(100% - 48px); max-width: 1392px; margin: 0 auto; }
  .duels > .card { padding: 18px 20px; }
  .age { height: 24px; padding: 0 9px; font-size: 12px; }
  .ro { background: rgba(245, 247, 250,.82); } .rob.txt { font-size: 32px; } .rob.txt.long { font-size: 24px; }
  .toast { left: 50%; right: auto; top: 24px; transform: translateX(-50%); max-width: 560px; padding: 10px 16px; font-size: 14px; }
  .rocard { width: 360px; padding: 26px 24px; gap: 8px; } .rot { font-size: 13px; } .rob { font-size: 56px; line-height: 1.05; } .ros { font-size: 14px; }
}

/* ===== v2 §9.3 (комментарий dz №1): раунд вошёл в зону «predictions closed» — экран мерцает (флаг state.round.glow: от закрытия приёма GLOW_S секунд, по
   умолчанию вся закрытая зона). Мягко: янтарная кайма по краю доски, закрытая зона, её подпись и кольцо секунд пульсируют один раз в секунду — не
   чаще 3 вспышек в секунду (WCAG 2.3.1), без резкого перепада яркости; prefers-reduced-motion — без анимации (ровная подсветка) ===== */
@keyframes mbglow { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 154, 46, 0); } 50% { box-shadow: 0 0 0 4px rgba(242, 154, 46, .45); } }
@keyframes mbglowo { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes mbflick { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.gamecard::after, .lcard::after { content: ''; position: absolute; inset: 0; z-index: 24; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 3px rgba(242, 154, 46, .8), inset 0 0 44px 4px rgba(242, 154, 46, .28); }
.gamecard.glow::after, .lcard.glow::after { animation: mbflick 1s ease-in-out infinite; }
.gamecard.glow #csvg .hbg { fill: rgba(242, 154, 46, .14); } .gamecard.glow #csvg .hln { stroke: rgba(242, 154, 46, .42); }
.gamecard.glow #csvg .czone, .gamecard.glow .rzone { animation: mbglowo 1s ease-in-out infinite; }
.gamecard.glow .rzone { background: repeating-linear-gradient(135deg, rgba(242, 154, 46, .5) 0 5px, rgba(242, 154, 46, .16) 5px 10px); }
.ring[data-st="glow"] .arc { stroke: var(--glow); animation: mbglowo 1s ease-in-out infinite; } .ring[data-st="glow"] span { color: var(--glow); }

@media (prefers-reduced-motion: reduce) {
  .ring .arc, .rfill, .mcard, .dtab { transition: none !important; }
  .gamecard.glow::after, .lcard.glow::after, .gamecard.glow #csvg .czone, .gamecard.glow .rzone, .ring[data-st="glow"] .arc, .bb.bump .bbbar { animation: none !important; }   /* v2 §9.3: без анимации */
  .gamecard.glow::after, .lcard.glow::after { opacity: .7; }
}

/* ===== дуэль v2 (SPEC v2 §3): страница дуэли /d/{id}, окно «Вызвать», блок «Дуэли сейчас», «Мои дуэли», строка живой дуэли, линия её уровня ===== */
.dbtn { height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--ctl); background: #fff; color: var(--fg); font-size: 15px; font-weight: 600; white-space: nowrap; }
.dbtn.main { border: none; background: var(--accent); color: #fff; font-weight: 700; box-shadow: 0 4px 12px rgba(20, 99, 255, .24); }
.dbtn.main:hover { background: var(--accent-ink); }
.dbtn.ghost { border: 1.5px solid var(--accent); color: var(--accent-ink); }
.dbtn:disabled { background: var(--muted); border-color: var(--muted); color: var(--empty); box-shadow: none; }
.dbtns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* --- страница дуэли --- */
body.duelpage { min-height: 100dvh; }
.dpage { position: relative; min-height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; background: var(--bg); }
.dhdr { flex: 0 0 56px; height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #fff; border-bottom: 1px solid var(--line); }
.dbrand { display: flex; align-items: center; gap: 7px; font-size: 18px; font-weight: 800; letter-spacing: -.02em; color: var(--fg); }
.dhr { display: flex; align-items: center; gap: 8px; } .dbal { font-size: 13px; font-weight: 700; }
.dsteps { flex: 0 0 auto; padding: 12px 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dstep { display: flex; flex-direction: column; gap: 5px; } .dstep .bar { height: 4px; border-radius: 2px; background: var(--ctl); } .dstep .lbl { font-size: 11px; font-weight: 500; color: var(--fg3); }
.dstep.cur .bar, .dstep.done .bar { background: var(--accent); } .dstep.cur .lbl { font-weight: 700; color: var(--fg); }
.dmain { flex: 1 1 auto; min-height: 0; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.dcard { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.dcard.dmini { padding: 12px 14px; gap: 6px; }
.dtop { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.dtl { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dtimer { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--muted); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.dt1 { font-size: 15px; font-weight: 700; } .dt2 { font-size: 13px; font-weight: 600; color: var(--fg5); }
.dh2 { font-size: 19px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.dh3 { font-size: 15px; font-weight: 700; }
.dp { font-size: 14px; line-height: 1.45; color: var(--fg5); overflow-wrap: anywhere; }
.dfine { font-size: 12px; line-height: 1.45; color: var(--fg2); } .dfine.center { text-align: center; color: var(--fg3); font-size: 11px; }
.drule { padding: 0 4px; } .drule2 { text-align: center; color: var(--fg3); }
.ring.dring { flex: 0 0 50px; width: 50px; height: 50px; } .ring.dring span { font-size: 17px; }   /* кольцо страницы дуэли — 50 px на всех ширинах, как было */
.drows { display: flex; flex-direction: column; }
.drow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--rowline2); }
.drow .k { flex: 0 0 auto; font-size: 13px; color: var(--fg2); } .drow .v { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; min-width: 0; }
.drow .vv { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; } .drow .vs { font-size: 11px; color: var(--fg3); overflow-wrap: anywhere; }
.dnote { border-radius: 12px; border: 1px solid var(--ctl); background: #fff; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.dnote .t { font-size: 13px; font-weight: 700; } .dnote .s { font-size: 12px; color: var(--fg2); }
.dnote.no, .dnote.funds { border-color: #F5C2C2; background: var(--neg-bg); color: #B42318; }
.dsum { border-radius: 12px; background: var(--bg); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.dsum > div { display: flex; justify-content: space-between; gap: 8px; } .dsum .mono { font-weight: 700; white-space: nowrap; }
.dbig { font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; color: var(--fg2); } .dbig.txt { font-size: 22px; font-weight: 700; letter-spacing: 0; }
.dbig2 { font-size: 20px; font-weight: 800; color: var(--fg); overflow-wrap: anywhere; }
.dres.win .dbig { color: var(--my); }
.dnurl { display: block; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--ctl); background: var(--bg); font-size: 12px; word-break: break-all; user-select: all; }
.dfoot { flex: 0 0 auto; padding: 4px 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.dwho { font-size: 12px; color: var(--fg2); text-align: center; }
/* поле суммы и быстрые суммы (вход §13 на странице дуэли) */
.dinp { display: inline-flex; align-items: center; gap: 4px; height: 46px; padding: 0 10px; border-radius: 10px; border: 1.5px solid var(--ctl2); background: #fff; font-family: var(--mono); font-size: 17px; font-weight: 700; }
.dinp input { width: 64px; min-width: 0; border: none; outline: none; padding: 0; font: inherit; color: var(--fg); background: transparent; }
.dinp:focus-within { border-color: var(--my); box-shadow: 0 0 0 3px rgba(20, 99, 255, .15); }
.dqx { display: flex; flex-wrap: wrap; gap: 6px; }
.dqx button { height: 32px; padding: 0 10px; border-radius: 9px; border: 1px solid var(--ctl); background: #fff; font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--fg); }
.dqx button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
/* итог §13: доля каждого и комиссия */
.dpays { display: flex; flex-direction: column; border-radius: 12px; background: var(--bg); padding: 6px 12px; }
.dpays > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; padding: 6px 0; font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--line); }
.dpays > div:last-child { border-bottom: none; } .dpays .sub { font-weight: 500; }
/* своя минута дуэли: график */
.dchwrap { position: relative; width: 100%; }
.dchart { display: block; }
.dchart .zA { fill: rgba(20, 99, 255, .05); }
.dchart .gx { stroke: var(--rowline); stroke-width: 1; }
.dchart .tx { font-family: var(--mono); font-size: 10px; fill: var(--grey); text-anchor: middle; } .dchart .tx.l { text-anchor: start; } .dchart .tx.r { text-anchor: end; }
.dchart .s0 { stroke: var(--grey); stroke-width: 1; stroke-dasharray: 4 4; }
.dchart .lv { stroke: var(--my); stroke-width: 2; }
.dchart .pp { fill: none; stroke: var(--fg); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.dchart .dot { fill: var(--fg); stroke: #fff; stroke-width: 3; } .dchart .dot.end { fill: var(--my); }
.clbl { position: absolute; left: 14px; padding: 1px 6px; border-radius: 5px; font-size: 10px; font-weight: 700; white-space: nowrap; pointer-events: none; }
.clbl.s0 { background: #fff; color: var(--fg4); border: 1px solid var(--line); } .clbl.lv { background: var(--my); color: #fff; }
.dlegend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--fg4); }
.dlegend span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dlegend .k { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--fg); } .dlegend .k.s0 { border-top: 1px dashed var(--grey); } .dlegend .k.lv { border-top-color: var(--my); }
/* мерцание последних секунд своей минуты дуэли — как у доски: мягкий пульс раз в секунду (WCAG 2.3.1), без резкого перепада яркости */
.dmin.glow { animation: mbglow 1s ease-in-out infinite; border-color: var(--glow); }
.dring[data-st="glow"] .arc { stroke: var(--glow); animation: mbglowo 1s ease-in-out infinite; } .dring[data-st="glow"] span { color: var(--glow); }
.dring[data-st="open"] .arc { transition: stroke-dasharray .25s linear; }
@media (prefers-reduced-motion: reduce) { .dmin.glow, .dring[data-st="glow"] .arc { animation: none !important; } .dmin.glow { box-shadow: 0 0 0 3px rgba(242, 154, 46, .45); } }
@media (min-width: 760px) { .dpage { max-width: 640px; margin: 24px auto; min-height: 0; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; } .dhdr { border-radius: 20px 20px 0 0; } .dinp input { width: 120px; } }
/* --- окно «Вызвать»: шторка на телефоне, диалог 520 px на десктопе --- */
.dnsec { display: flex; flex-direction: column; gap: 6px; }
.dnassets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.dnassets button, .dnsides button { height: 38px; border-radius: 10px; font-size: 13px; font-weight: 700; background: #fff; color: var(--fg); border: 1px solid var(--ctl); }
.dnsides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .dnsides button { height: 40px; border-width: 1.5px; }
.dnassets button[aria-pressed="true"], .dnsides button[aria-pressed="true"], .dnks button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.dnlvl { display: flex; align-items: center; gap: 8px; }
.dnlvl .arr { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--ctl); background: #fff; display: flex; align-items: center; justify-content: center; }
.dnlvl .lt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; } .dnlvl .t { font-size: 15px; font-weight: 700; } .dnlvl .s { font-size: 11px; color: var(--fg3); }
.dnks { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 2px; }
.dnks button { height: 30px; padding: 0; border-radius: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; background: #fff; color: var(--fg); border: 1px solid var(--ctl); }
.dnamt { display: flex; align-items: center; gap: 8px; } .dnamt .dinp { flex: 0 0 auto; height: 40px; } .dnamt .dinp input { width: 84px; } .dnamt .chips4 { flex: 1 1 auto; min-width: 0; }
.dnamt .chips4 button { font-size: 13px; }
.dnprev { background: var(--bg); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.dnprev > div { display: flex; justify-content: space-between; gap: 8px; } .dnprev .mono { font-weight: 700; } .dnprev .me { color: var(--myt); font-weight: 700; }
.dnprev .fee, .dnprev .why { font-size: 11px; line-height: 1.4; color: var(--fg2); } .dnprev .why { color: var(--neg); font-weight: 600; }
.dnnote { font-size: 12px; line-height: 1.4; color: var(--fg2); }
a.dbtn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* --- «Дуэли сейчас»: карточка справа (десктоп), полоса над доской (телефон) --- */
.dcall { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 12px; border-radius: 999px; border: none; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.dnlist { display: flex; flex-direction: column; gap: 6px; }
.dni { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--fg); text-decoration: none; }
.dni .r1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; font-size: 12px; }
.dni .r1 b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.dni .tm { flex: 0 0 auto; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--muted); display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; }
.dni .r2 { font-size: 12px; font-weight: 600; color: var(--fg5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dni .r3 { font-size: 11px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dni.open { border-color: var(--accent); } .dni.open .tm { background: var(--accent); color: #fff; }
.dni.live .tm { background: var(--my); color: #fff; } .dni.live.glow { animation: mbglow 1s ease-in-out infinite; border-color: var(--glow); }
.dni.done { background: var(--thead); } .dni.done .r3 { color: var(--myt); font-weight: 600; }
.dni.priv { border-style: dashed; background: var(--thead); } .dni.priv .r1 b { color: var(--fg3); font-weight: 600; }
.dnsub { margin-top: 4px; font-size: 11px; color: var(--fg3); }
.dnempty { font-size: 12px; color: var(--fg3); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .dni.live.glow { animation: none !important; box-shadow: 0 0 0 3px rgba(242, 154, 46, .45); } }
/* --- «Мои дуэли» --- */
.duels { display: flex; flex-direction: column; gap: 12px; }
.duels > .card { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dlhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dlist { display: flex; flex-direction: column; }
.dr { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--rowline2); cursor: pointer; }
.dr .st { flex: 0 0 auto; display: inline-block; height: 24px; line-height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--bg); color: var(--fg5); border: 1px solid var(--line); white-space: nowrap; }
.dr.live .st { background: var(--fg); color: #fff; border-color: var(--fg); } .dr.won .st { background: var(--my); color: #fff; border-color: var(--my); } .dr.done .st { color: var(--fg3); }
.dr .a { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .dr .t1 { font-size: 13px; font-weight: 600; } .dr .t2 { font-family: var(--mono); font-size: 11px; color: var(--fg3); overflow-wrap: anywhere; }
.dr.lost .t1 { color: var(--fg3); }
.dr .act { flex: 0 0 auto; height: 26px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--ctl); background: #fff; font-size: 12px; }
.dr .acts { display: flex; gap: 6px; margin-left: auto; }
.dbadge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--my); color: #fff; font-size: 11px; font-weight: 800; margin-left: 6px; }
.dtab[aria-current="page"] .dbadge { background: #fff; color: var(--accent-ink); }
/* --- строка моей живой дуэли и линия её уровня --- */
.dlive { font-size: 12px; font-weight: 600; color: var(--myt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
#app[data-tab="duels"] .game, #app[data-tab="duels"] .stats { display: none !important; }
#app:not([data-tab="duels"]) .duels { display: none !important; }
@media (max-width: 759px) {
  .sheetwrap.dlg .sheet { max-height: calc(100% - 24px); }
}
@media (min-width: 760px) {
  .sheetwrap.dlg { position: fixed; inset: 0; bottom: 0; z-index: 70; align-items: center; justify-content: center; background: rgba(11, 18, 32,.42); }
  .sheetwrap.dlg .sheet { width: 520px; max-width: calc(100% - 48px); max-height: calc(100vh - 48px); border-radius: 20px; padding: 16px 20px 20px; box-shadow: 0 24px 60px rgba(11, 18, 32,.3); }
  .sheetwrap.dlg .grip { display: none; }
  .dnks button { height: 32px; font-size: 11px; }
}
.toast.fixed { position: fixed; z-index: 90; left: 12px; right: 12px; top: 12px; }
@media (min-width: 760px) { .toast, .toast.fixed { left: 50%; right: auto; top: 24px; transform: translateX(-50%); } }
.dnform { display: flex; flex-direction: column; gap: 10px; } .dnform > .dbtn { width: 100%; }
.dbtns .dbtn { padding: 0 10px; white-space: normal; line-height: 1.2; font-size: 14px; }
/* --- шеринг дуэли (v2 §3, часть 3): превью карточки-чека, формат, «Telegram» / «Instagram / ещё» / «Скопировать ссылку» --- */
.dshare { gap: 10px; }
.dsfmt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dsfmt button { height: 34px; padding: 0 8px; border-radius: 9px; border: 1px solid var(--ctl); background: #fff; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dsfmt button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.dsprev { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 12px; background: var(--muted); min-height: 120px; justify-content: center; }   /* часть 5: карточка светлая (бренд v3) — рамка превью светлая */
.dsprev img { display: block; max-width: 100%; max-height: 340px; width: auto; height: auto; border-radius: 6px; }
.dsprev img:not([src]) { display: none; }
.dsprev .dfine { color: var(--fg3); }
.dslink { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.dslink input { width: 18px; height: 18px; margin: 0; accent-color: var(--fg); }
.dsbtns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dsbtns .dbtn { min-width: 0; padding: 0 8px; white-space: normal; line-height: 1.15; font-size: 14px; text-align: center; }
/* ===== v2 §10.1 (комментарий dz №2): весь текст — в своей ячейке или карточке, на всех ширинах (1440 / 1024 / 768 / 390 / 360; tools/check_layout.py).
   Приёмы: перенос внутри ячейки; «…» с полным текстом в title (ник, слова); числа и суммы не режутся — колонка таблицы по самому длинному числу (subgrid),
   крупное число уменьшает кегль (app.js fitText), строка без места снимает наименее нужное (app.js fitRow) ===== */
.dni .r2 { display: flex; gap: 4px; } .dni .r2 .w { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dni .r2 .s { flex: 0 0 auto; }
.dnlist .dni .r3 { white-space: normal; overflow-wrap: anywhere; }
.sheet > * { flex-shrink: 0; }                            /* шторка листается, а не сжимает кнопки */
.rob, .dbig, .dbig2 { overflow-wrap: anywhere; }          /* крупное число: кегль по ширине (fitText), не влезло и так — перенос */
/* строка «подпись … значение» страницы дуэли: значению — не меньше половины строки, подпись с ником — «…» (title), число не рвётся по знаку */
.drow .k { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drow .v { flex: 1 0 50%; }
span[class="mono"] { white-space: nowrap; }              /* число в тексте (rich: «−$98,765.43») не рвётся — ни после «−», ни посередине */
.nk { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }   /* ник одним куском (duel.js richN) */
@media (min-width: 760px) {                              /* тосты десктопа: по ширине текста, но не шире 560 px и карточки — дальше перенос (было nowrap) */
  .toast, .toast.fixed { width: max-content; max-width: min(560px, calc(100% - 32px)); white-space: normal; overflow-wrap: anywhere; }
}
/* ===== страница дуэли — задача 04.11 по живому прогону (docs/QA_duel_btc_2026-11-04.md): главное под таймером, подсветка нового входа, строка
   опоздавшего, «you're winning / losing now», правила — 2 строки + «how it works». Короткие сообщения (§17 E, dz 05.11) — строкой под заголовком своей
   карточки (.csay, как на доске), в потоке: фиксированного тоста внизу экрана нет ===== */
.dcard > .csay { margin: 0; }
.dstat { font-size: 14px; line-height: 1.4; color: var(--fg5); overflow-wrap: anywhere; }
.dstat.act { font-size: 15px; font-weight: 700; color: var(--myt); }
.dwhen { font-size: 13px; }
@keyframes dfresh { 0% { background: rgba(20, 99, 255, .16); } 100% { background: transparent; } }
.dlate { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--ctl); background: #fff; font-size: 13px; font-weight: 600; color: var(--fg5); overflow-wrap: anywhere; }
.dnowl { align-self: flex-start; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.dnowl.win { background: var(--accent-bg); color: var(--myt); } .dnowl.lose { background: var(--muted); color: var(--fg4); } .dnowl.eq { background: #FFF4E5; color: #8A5300; }
.dmini .dt1 { font-size: 16px; } .dmini .dt3 { font-size: 13px; color: var(--fg5); overflow-wrap: anywhere; } .dmini .dt2 { overflow-wrap: anywhere; }
.dbtns.one { grid-template-columns: minmax(0, 1fr) auto; }
.dbtn.lnk { border: none; background: transparent; color: var(--fg3); font-weight: 600; padding: 0 8px; text-decoration: underline; text-underline-offset: 3px; }
.dlnk { align-self: center; height: 36px; padding: 0 10px; border: none; background: transparent; color: var(--fg3); font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.drules { display: flex; flex-direction: column; gap: 4px; padding: 0 4px; }
.drules > .dfine { color: var(--fg3); }
/* доска: тост со ссылкой «open the duel» (вход в мою дуэль) */
.toast .tlink { color: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.dr .st { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* QA 6: на 320 px — поле суммы и кнопки входа на первом экране */
@media (max-width: 359px) {
  .dmain { padding: 12px 12px 14px; gap: 10px; } .dcard { padding: 14px; gap: 8px; } .dh2 { font-size: 17px; }
  .dinp { padding: 0 7px; gap: 3px; } .dinp input { width: 58px; }
  .dqx button { padding: 0 8px; }
  .dnamt .dinp input { width: 64px; } .dnamt .chips4 { gap: 4px; } .dnamt .chips4 button { font-size: 12px; padding: 0 2px; }   /* окно Challenge: «$100» в своей фишке */
}
/* ===== дуэль §13 — тотализатор на две стороны (docs/SPEC_v2_2026-11-03.md §13): своя карточка участника с «if it ended now you'd win $X», вход «Join Reaches /
   Join Doesn't reach» с суммой не меньше S, два котла рядом со списками, итог — доля каждого и комиссия 0 % / 5 %. Цвет стороны — как у фишек доски
   (палитра A, v2 §9.6: .sw.hit / .sw.miss) ===== */
.dtag { flex: 0 0 auto; display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--muted); color: var(--fg4); font-size: 11px; font-weight: 700; white-space: nowrap; }
.dtag.my { background: var(--accent-bg); color: var(--myt); }
.dbet { border-color: var(--my); }
.dbet .dt1 { font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.dbet .dl { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--fg2); }
.dbig.up { color: var(--my); }
.dwarn { padding: 8px 10px; border-radius: 10px; background: #FFF4E5; color: #8A5300; font-size: 12px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.dpot2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dpot { min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.dpot.mine { border: 1.5px solid var(--my); background: var(--accent-bg); }
.dpot.won { border-color: var(--my); } .dpot.lost .pv { color: var(--fg3); }
.dpot .ph { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-width: 0; }
.dpot .pw { min-width: 0; font-size: 13px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dpot .pv { font-size: 22px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow-wrap: normal; }
.dpot .pn { font-size: 11px; color: var(--fg3); overflow-wrap: anywhere; }
.dpot .pl { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--rowline2); }
.pe { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; row-gap: 1px; padding: 5px 0; border-bottom: 1px solid var(--rowline2); font-size: 12px; min-width: 0; }
.pe:last-child { border-bottom: none; }
.pe .nm { flex: 1 1 36px; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe .am { flex: 0 0 auto; margin-left: auto; font-weight: 700; white-space: nowrap; }
.pe .tg { flex: 1 1 100%; font-size: 10px; color: var(--fg3); overflow-wrap: anywhere; }
.pe .rs { flex: 1 1 100%; text-align: right; font-size: 11px; font-weight: 700; color: var(--fg3); }   /* «returned $999,999.00» — перенос между словом и суммой */
.pe.me .nm { color: var(--myt); } .pe.won .rs { color: var(--myt); }
.pe.fresh { animation: dfresh 1.2s ease-out 2; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .pe.fresh { animation: none; background: rgba(20, 99, 255, .08); } }
.dpots.priv .dpriv { padding: 12px; border-radius: 12px; border: 1px dashed var(--ctl); background: var(--thead); font-size: 14px; font-weight: 700; color: var(--fg3); overflow-wrap: anywhere; }
.dpots .dtop .dh3 { flex: 0 0 auto; white-space: nowrap; } .dpots .dtop .sub { min-width: 0; text-align: right; overflow-wrap: anywhere; }
.djamt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .djamt .dinp { flex: 0 0 auto; height: 44px; } .djamt .dinp input { width: 96px; }
.djamt .dqx { flex: 1 1 160px; min-width: 0; }
.djsides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 560px) { .djsides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.djbtn { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-height: 58px; padding: 9px 14px; border-radius: 12px; border: none;
  background: var(--accent); color: #fff; text-align: left; font-family: inherit; cursor: pointer; box-shadow: 0 4px 12px rgba(20, 99, 255, .24); }
.djbtn .j1 { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 700; overflow-wrap: anywhere; }
.djbtn .j2 { font-size: 12px; color: rgba(255, 255, 255, .86); line-height: 1.35; overflow-wrap: anywhere; } .djbtn .j2 .mono { color: #fff; font-weight: 700; }
.djbtn .sw { border-color: #fff; }
.djbtn:disabled { background: var(--muted); color: var(--empty); cursor: default; box-shadow: none; } .djbtn:disabled .j2, .djbtn:disabled .j2 .mono { color: var(--empty); }
.dwhy { font-size: 12px; font-weight: 600; color: var(--neg); overflow-wrap: anywhere; } .dwhy.short { color: #B42318; font-weight: 700; }
.djoin .dbtns.one { align-items: center; } .djoin .dbtns.one .dfine { min-width: 0; }
.dpitch { font-size: 14px; font-weight: 700; color: var(--myt); overflow-wrap: anywhere; }
.dpays .a { flex: 1 1 150px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dpays .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dpays .s { font-size: 11px; font-weight: 500; color: var(--fg3); overflow-wrap: anywhere; }
.dpays .b { margin-left: auto; font-weight: 700; white-space: nowrap; }
.dpays .me .nm { color: var(--myt); } .dpays .won .b { color: var(--myt); } .dpays .lost .b { color: var(--fg3); }
@media (max-width: 359px) { .dpot { padding: 8px; } .dpot .pv { font-size: 18px; } .djamt .dinp input { width: 80px; } .djbtn { padding: 8px 12px; } }

/* ===== дизайн v3, часть 4 — окно «New duel» (макет 3; спека ChatGPT §6): одна модалка с условной формой; телефон — во весь экран, «Challenge» внизу ===== */
.nwrap { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ndlg { position: relative; width: min(740px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-dlg); box-shadow: var(--shadow-dlg); overflow: hidden; }
.ndlg svg, .hdlg svg, .dhinl svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
.nhead { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 22px 28px 10px; }
.nhead .nbolt { color: var(--accent); stroke-width: 2.2; }
.nh { margin: 0; font-size: 28px; line-height: 1.1; font-weight: 800; letter-spacing: -.025em; }
.ninfo { width: 34px; height: 34px; border: none; background: transparent; color: var(--fg3); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ninfo:hover { color: var(--accent); background: var(--accent-bg); }
.nclose { margin-left: auto; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--muted); color: var(--fg); display: flex; align-items: center; justify-content: center; }
.nclose:hover { background: #E4E9F1; } .nclose svg { stroke-width: 2.6; }
.nbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 28px 14px; display: flex; flex-direction: column; gap: 18px; }
.ncol { display: contents; }                              /* одна колонка: секции — прямо в .nbody, как раньше */
@media (min-width: 1180px) {                              /* 05.11 (6f): широкий экран — две колонки (сторона, длительность, уровень | вклад, тип, итог), окно целиком без прокрутки */
  .ndlg { width: min(1120px, 100%); }
  .nbody { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .ncol { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
}
.nsec { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.nlab { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; font-size: 13px; color: var(--fg2); }
.nlab .nic { align-self: center; color: var(--fg); stroke-width: 2.1; }
.nlab b { font-size: 16px; font-weight: 800; color: var(--fg); }
.nlab small { font-size: 13px; color: var(--fg2); min-width: 0; }
.nrow { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 18px; }
.nok { display: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--accent); color: #fff; stroke-width: 3.2 !important; }
[aria-checked="true"] > .nok, [aria-checked="true"] .nax1 .nok, [aria-pressed="true"] > .nok { display: block; }
/* сторона (короткая дуэль) */
.nsides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nsides button { min-width: 0; height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 12px; border-radius: 13px; border: 1.5px solid var(--ctl); background: #fff;
  font-size: 16px; font-weight: 800; color: var(--fg); }
.nsides .nst { min-width: auto; overflow-wrap: normal; word-break: normal; }   /* 05.11: слово не рвётся («Reache / s» на 360 px у выбранной — галочка отнимает место); «Doesn't reach» — по словам */
.nsides button[aria-checked="true"] { border: 2px solid var(--accent); background: var(--accent-bg); color: var(--accent-ink); padding: 0 11.5px; }
.nsides button[aria-checked="true"] .nsi { color: var(--accent); }
/* длительность */
.ndurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ndur { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 4px 10px; padding: 14px 14px 12px; border-radius: 15px; border: 1.5px solid var(--line);
  background: #fff; text-align: left; color: var(--fg); box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.ndur:hover { border-color: var(--ctl); }
.ndur .nrad { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ctl2); background: #fff; align-self: center; position: relative; }
.ndur .ndt { font-size: 18px; font-weight: 800; align-self: center; }
.ndur .nds, .ndur .ndl { grid-column: 2; font-size: 13px; color: var(--fg4); overflow-wrap: anywhere; }
.ndur .npill { grid-column: 2; justify-self: start; margin-top: 6px; padding: 3px 9px; border-radius: 8px; background: var(--accent-bg2); color: var(--accent-ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ndur.on { border: 2px solid var(--accent); padding: 13.5px 13.5px 11.5px; background: linear-gradient(180deg, #F2F6FF 0%, #FAFCFF 100%); box-shadow: 0 6px 18px rgba(20, 99, 255, .10); }
.ndur.on .nrad { border-color: var(--accent); } .ndur.on .nrad::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
/* уровень (короткая дуэль) */
.nlvbox { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; background: #F7F9FC; border: 1px solid var(--rowline); }
.nlvl { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.nstep { width: 56px; height: 48px; border-radius: 12px; border: 1.5px solid var(--ctl); background: #fff; color: var(--fg); display: flex; align-items: center; justify-content: center; }
.nstep svg { stroke-width: 2.6; } .nstep:disabled { color: var(--empty); background: var(--muted2); }
.nlt { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.nkt { font-size: 24px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; } .nks { font-size: 15px; color: var(--fg4); overflow-wrap: anywhere; }
.nkchips { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px; }
.nkchips button { min-width: 0; height: 44px; padding: 0; border-radius: 11px; border: 1.5px solid var(--ctl); background: #fff; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 800; color: var(--fg); }
.nkchips button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; box-shadow: 0 4px 12px rgba(20, 99, 255, .28); }
.ncmp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); min-width: 0; }
.ncmp .nc1, .ncmp .nc2 { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ncmp .nc1 > span, .ncmp .nc2 > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ncmp small { font-size: 12px; color: var(--fg2); } .ncmp b { font-size: 18px; font-weight: 800; white-space: nowrap; } .ncmp .nc2 b { color: var(--accent-ink); }
.ncmp .ncb { color: var(--accent); stroke-width: 2.6; } .ncmp .nct { color: var(--accent); } .ncmp .nca { color: var(--fg3); }
.ndiff { margin-left: auto; padding: 5px 10px; border-radius: 10px; background: var(--muted); color: var(--fg4); font-size: 14px; font-weight: 800; white-space: nowrap; }
.ndiff.up { background: var(--pos-bg); color: var(--pos); } .ndiff.dn { background: var(--neg-bg); color: var(--neg); }
.nfine { font-size: 12.5px; line-height: 1.45; color: var(--fg2); overflow-wrap: anywhere; }
/* Custom: минуты, цель X, Above / Below X */
.nmin { display: flex; align-items: center; gap: 16px; }
.nmin input[type=range] { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); height: 28px; }
.nminbox { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1.5px solid var(--ctl); background: #fff; font-size: 17px; font-weight: 800; }
.nminbox input { width: 3ch; border: none; outline: none; padding: 0; font: inherit; font-variant-numeric: tabular-nums; text-align: right; color: var(--fg); background: transparent; }
.nminbox:focus-within, .ntgt:focus-within, .ncust:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(20, 99, 255, .15); }
.nminbox.bad, .ntgt.bad, .ncust.bad { border-color: var(--neg); }
.ntgt { display: flex; align-items: center; gap: 10px; height: 58px; padding: 0 16px; border-radius: 14px; border: 1.5px solid var(--ctl2); background: #fff; }
.ntgt input { flex: 1 1 auto; min-width: 0; border: none; outline: none; padding: 0; font: inherit; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--fg); background: transparent; }
.ntgt span { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--fg2); }
.nax { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nax button { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 12px; border-radius: 14px; border: 1.5px solid var(--accent-bg2); background: var(--accent-bg); color: var(--fg); text-align: center; }
.nax .nax1 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; color: var(--accent-ink); }
.nax .nax1 .nsi { color: var(--accent); stroke-width: 2.4; }
.nax .nax2 { font-size: 13px; color: var(--fg4); overflow-wrap: anywhere; }
.nax button[aria-checked="true"] { border: 2px solid var(--accent); padding: 11.5px; background: #fff; box-shadow: 0 6px 18px rgba(20, 99, 255, .12); }
/* вклад */
.namt { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 1.3fr); gap: 10px; }
.nchips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.nchips button { min-width: 0; height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 6px; border-radius: 13px; border: 1.5px solid var(--ctl); background: #fff;
  font-size: 17px; font-weight: 800; color: var(--fg); }
.nchips button[aria-pressed="true"] { border: 2px solid var(--accent); background: var(--accent-bg); color: var(--accent-ink); padding: 0 5.5px; }
.nchips .nok { width: 22px; height: 22px; padding: 3.5px; }
.ncust { min-width: 0; display: flex; align-items: center; gap: 2px; height: 50px; padding: 0 12px; border-radius: 13px; border: 1.5px solid var(--ctl); background: #fff; font-size: 17px; font-weight: 800; }
.ncust .ncd { color: var(--fg3); } .ncust.on .ncd { color: var(--fg); }
.ncust input { flex: 1 1 auto; width: 100%; min-width: 0; border: none; outline: none; padding: 0; font: inherit; font-variant-numeric: tabular-nums; color: var(--fg); background: transparent; }
.ncust input::placeholder { color: var(--fg3); font-family: var(--sans); font-weight: 700; }
.ncust.on { border: 2px solid var(--accent); padding: 0 11.5px; background: var(--accent-bg); }
/* видимость */
.nmodes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nmodes button { min-width: 0; display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 56px; border-radius: 14px; border: 1.5px solid var(--ctl); background: #fff; text-align: left; color: var(--fg); }
.nmodes .nmi { width: 26px; height: 26px; color: var(--fg); }
.nmodes .nmt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .nmodes .nmt b { font-size: 16px; font-weight: 800; } .nmodes .nmt small { font-size: 13px; color: var(--fg2); overflow-wrap: anywhere; }
.nmodes button[aria-checked="true"] { border: 2px solid var(--accent); padding: 9.5px 13.5px; background: var(--accent-bg); }
.nmodes button[aria-checked="true"] .nmi, .nmodes button[aria-checked="true"] .nmt b { color: var(--accent-ink); }
/* перед подтверждением: комиссии и возвраты; объяснение «prediction challenge» */
.nsum { padding: 14px 16px; border-radius: 16px; background: #F7F9FC; border: 1px solid var(--rowline); display: flex; flex-direction: column; gap: 8px; }
.nsumt { font-size: 14px; font-weight: 800; }
.nsum ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.nsum li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--fg4); min-width: 0; }
.nsum li span { min-width: 0; overflow-wrap: anywhere; } .nsum .nsi2 { color: var(--accent); margin-top: 1px; }
.nfoot { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--muted2); font-size: 13.5px; line-height: 1.45; color: var(--fg4); flex-wrap: wrap; }
.nfoot .nfi { color: var(--fg3); margin-top: 1px; } .nfoot .nft { flex: 1 1 260px; min-width: 0; }
.nlink { border: none; background: transparent; padding: 0; color: var(--accent-ink); font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.nfoot .nlink { margin-left: 34px; }
.ngo { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 12px 28px 22px; border-top: 1px solid var(--rowline); background: #fff; }
.nwhy { font-size: 13px; font-weight: 700; color: var(--neg); text-align: center; overflow-wrap: anywhere; } .nwhy.err { color: #B42318; }
.nbtn { height: 60px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; border: none; border-radius: 15px; color: #fff; font-size: 21px; font-weight: 800;
  background: linear-gradient(180deg, #2C74FF 0%, #1463FF 100%); box-shadow: 0 8px 22px rgba(20, 99, 255, .32); }
.nbtn:hover { background: var(--accent-ink); } .nbtn .ngi { stroke-width: 2; }
.nbtn:disabled { background: var(--muted); color: var(--empty); box-shadow: none; }
.nbtn[aria-busy="true"] { background: var(--accent-ink); color: #fff; opacity: .85; cursor: progress; }
.nbtn:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 3px; }
@media (min-width: 1180px) and (max-height: 900px) {      /* ревью 05.11 (6f): ноутбук 1440 × 900 — окно браузера ~800 px; уже отступы — окно целиком без прокрутки */
  .nwrap { padding: 12px 24px; } .nhead { padding: 14px 28px 6px; } .nbody { padding-bottom: 8px; } .ncol { gap: 12px; }
  .nsec { gap: 8px; } .nlvbox { padding: 12px 14px; gap: 10px; } .nsum { padding: 10px 14px; gap: 6px; } .nfoot { padding: 10px 14px; }
  .nsum ul { gap: 5px; } .nmodes button { min-height: 50px; padding-top: 7px; padding-bottom: 7px; } .nmodes button[aria-checked="true"] { padding-top: 6.5px; padding-bottom: 6.5px; }
  .nchips button, .ncust { height: 46px; } .nsides button { height: 46px; }
  .ngo { padding: 10px 28px 14px; } .nbtn { height: 52px; }
}
@media (max-width: 759px) {
  .nwrap { padding: 0; align-items: stretch; }
  .ndlg { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .nhead { padding: 12px 16px 6px; } .nh { font-size: 23px; } .nclose { width: 40px; height: 40px; }
  .nbody { padding: 4px 16px 12px; gap: 16px; }
  .nrow { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ndurs { gap: 8px; } .ndur { padding: 10px; gap: 3px 7px; } .ndur.on { padding: 9.5px; } .ndur .ndt { font-size: 16px; } .ndur .nrad { width: 18px; height: 18px; }
  .ndur .nds, .ndur .ndl { grid-column: 1 / -1; font-size: 12px; } .ndur .npill { grid-column: 1 / -1; font-size: 12px; padding: 2px 7px; }
  .nlvbox { padding: 12px; } .nstep { width: 48px; height: 44px; } .nkt { font-size: 20px; } .nks { font-size: 13px; }
  .nkchips { gap: 5px; } .nkchips button { height: 40px; font-size: 14px; border-radius: 9px; }
  .ncmp { padding: 10px 12px; gap: 6px 10px; } .ncmp b { font-size: 16px; } .ndiff { margin-left: 0; font-size: 13px; }
  .namt { grid-template-columns: minmax(0, 1fr); } .nchips { gap: 8px; } .nchips button { height: 46px; font-size: 16px; }
  .ncust { height: 46px; }
  .nmodes button { padding: 8px 10px; gap: 8px; } .nmodes button[aria-checked="true"] { padding: 7.5px 9.5px; } .nmodes .nmi { width: 22px; height: 22px; }
  .nax .nax1 { font-size: 16px; gap: 6px; } .nax .nax2 { font-size: 12px; }
  .ntgt { height: 52px; } .ntgt input { font-size: 20px; }
  .nfoot .nlink { margin-left: 0; }
  .ngo { padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
  .nbtn { height: 54px; font-size: 19px; }
}
@media (max-width: 359px) {
  .nhead { gap: 6px; } .nh { font-size: 20px; } .nhead .nbolt { width: 22px; height: 22px; }
  .ndurs { grid-template-columns: minmax(0, 1fr); } .ndur { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; } .ndur .nds { grid-column: auto; } .ndur .ndl { grid-column: 1 / -1; }
  .ndur .npill { grid-column: 1 / -1; margin-top: 2px; }
  .nkchips { gap: 3px; } .nkchips button { font-size: 13px; height: 38px; }
  .nsides button { font-size: 14px; gap: 6px; padding: 0 8px; } .nsides button[aria-checked="true"] { padding: 0 7.5px; } .nsides .nsi { width: 18px; height: 18px; }
  .nchips { gap: 5px; } .nchips button { font-size: 14px; gap: 4px; } .nchips .nok { width: 18px; height: 18px; padding: 3px; }
  .nmodes { gap: 8px; } .nmodes .nmt b { font-size: 14px; } .nmodes .nmt small { font-size: 11.5px; } .nmodes button .nok { width: 20px; height: 20px; padding: 3px; }
  .nax { gap: 8px; } .nax .nax1 { font-size: 14px; } .nax .nax1 .nok { width: 18px; height: 18px; padding: 3px; }
}

/* ===== дизайн v3, часть 4 — объяснялка «How a duel works» (макет 4; спека ChatGPT §7): модалка поверх доски / страницы дуэли / окна New duel ===== */
body.hopen { overflow: hidden; }
.hwrap { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--scrim); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hdlg { position: relative; width: min(1280px, 100%); max-height: 100%; display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-dlg); box-shadow: var(--shadow-dlg); overflow: hidden; outline: none; }
.hbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 26px 30px 28px; display: flex; flex-direction: column; gap: 18px; }
.hhead { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: start; gap: 18px; }
.hh { margin: 0; font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -.03em; }
.hsub { margin: 8px 0 0; max-width: 680px; font-size: 16px; line-height: 1.45; color: var(--fg4); }
.hhl { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.hhl li { display: flex; align-items: center; gap: 12px; padding: 4px 18px; border-left: 1px solid var(--line); min-width: 0; }
.hhl .hli { width: 34px; height: 34px; color: var(--fg); stroke-width: 1.8; } .hhl li:last-child .hli { color: var(--accent); }
.hhl li > span { display: flex; flex-direction: column; gap: 1px; min-width: 0; max-width: 210px; } .hhl b { font-size: 15px; font-weight: 800; } .hhl small { font-size: 13px; color: var(--fg4); overflow-wrap: anywhere; }
.hclose { width: 44px; height: 44px; border-radius: 12px; border: none; background: var(--muted); color: var(--fg); display: flex; align-items: center; justify-content: center; }
.hclose:hover { background: #E4E9F1; } .hclose svg { stroke-width: 2.6; }
.hrow { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; }
.hcard { min-width: 0; padding: 18px 20px 20px; border-radius: 22px; border: 1px solid var(--line); background: #fff; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 14px; }
.hst { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.hno { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 800; }
.hst h3 { margin: 2px 0 0; font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.015em; } .hst h3 .hex { font-weight: 500; color: var(--fg4); }
.hst p { margin: 4px 0 0; font-size: 15px; line-height: 1.4; color: var(--fg4); }
.hdurs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hdur { min-width: 0; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--line); background: #fff; }
.hdur.on { border: 2px solid var(--accent); padding: 13.5px; background: linear-gradient(180deg, #F2F6FF 0%, #FAFCFF 100%); }
.hdur > b { font-size: 20px; font-weight: 800; } .hdur .hds { font-size: 13px; color: var(--fg4); }
.hdur .hdl { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--fg4); overflow-wrap: anywhere; } .hdur .hdi { color: var(--fg); }
.hdur .hdsd { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 700; color: var(--fg); overflow-wrap: anywhere; } .hdur .hdsd small { font-weight: 500; color: var(--fg4); }
.hpill { align-self: flex-start; padding: 3px 10px; border-radius: 9px; background: var(--accent-bg2); color: var(--accent-ink); font-size: 13.5px; font-weight: 800; white-space: nowrap; }
.hdur .hpill { align-self: stretch; text-align: center; margin-top: auto; }
.htls { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.htl { position: relative; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 18px 12px; border-radius: 18px; background: #F5F8FF; text-align: center; }
.htl:first-child { background: #F7F8FA; }
.htl:not(:last-child)::after { content: '→'; position: absolute; right: -20px; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 700; color: var(--fg4); }
.htl .hti { width: 34px; height: 34px; color: var(--accent); stroke-width: 1.9; } .htl:first-child .hti { color: var(--fg); }
.htl > b { font-size: 17px; font-weight: 800; } .htl .hpill { align-self: center; }
.htl .hts { font-size: 13.5px; line-height: 1.4; color: var(--fg4); overflow-wrap: anywhere; } .htl .htx { font-size: 12px; color: var(--fg3); }
.hexs { gap: 14px; background: linear-gradient(180deg, #FBFCFF 0%, #FFFFFF 100%); }
.hexl { align-self: flex-start; padding: 5px 12px; border-radius: 10px; background: var(--accent-bg2); color: var(--accent-ink); font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.hexg { display: grid; grid-template-columns: minmax(200px, 250px) minmax(0, 1fr) minmax(240px, 320px); gap: 18px; align-items: stretch; }
.hyou { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding-right: 16px; border-right: 1px solid var(--line); }
.hyt { display: flex; align-items: center; gap: 10px; } .hyt b { font-size: 20px; font-weight: 800; } .hyt .hyi { width: 30px; height: 30px; }
.hyr { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; background: #F7F9FC; font-size: 15px; color: var(--fg4); min-width: 0; }
.hyr b { color: var(--fg); font-weight: 800; } .hyr .hyri { color: var(--fg); }
.hcall { margin-top: auto; height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px; border: none; border-radius: 13px; background: var(--accent); color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 6px 16px rgba(20, 99, 255, .28); }
.hcall:hover { background: var(--accent-ink); }
.hpots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; }
.hvs { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800; color: var(--fg4); box-shadow: var(--shadow); }
.hpot { min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 18px; border: 1px solid var(--line); background: #FAFBFC; }
.hpot.mine { background: var(--accent-bg); border-color: var(--accent-bg2); }
.hph { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; min-width: 0; } .hph b { font-size: 18px; font-weight: 800; }
.hpot.hit .hpi { color: var(--pos); } .hpot.miss .hpi { color: var(--neg); } .hpot.mine .hph b { color: var(--accent-ink); }
.hys { font-size: 14px; color: var(--accent-ink); font-weight: 600; }
.hpt, .hpr { display: grid; grid-template-columns: minmax(0, 1fr) auto 56px; align-items: center; gap: 8px; }
.hpt { font-size: 12px; color: var(--fg3); padding: 0 6px 4px; } .hpt .r, .hpr .r { text-align: right; }
.hpr { padding: 6px; border-radius: 10px; background: #fff; margin-top: 4px; font-size: 14px; }
.hpr .nm { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .hpr .nm > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hpr .hpu { color: var(--fg3); }
.hpr.me .nm { color: var(--accent-ink); font-weight: 700; } .hpr small { font-size: 11px; color: var(--fg3); font-weight: 500; overflow-wrap: anywhere; }
.hpr { grid-template-columns: auto minmax(0, 1fr) auto 48px; } .hpt { grid-template-columns: minmax(0, 1fr) auto 48px; }
.hpr b, .hpr .mono { font-weight: 800; }
.hpf { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; padding: 0 6px; min-width: 0; flex-wrap: wrap; } .hpf span:first-child { font-size: 17px; font-weight: 800; }
.hpf b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; } .hpot.mine .hpf b { color: var(--accent-ink); } .hpn { margin-left: auto; font-size: 14px; color: var(--fg4); }
.hwin { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-left: 16px; border-left: 1px solid var(--line); }
.hwt { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 12px; background: var(--accent-bg); color: var(--accent-ink); }
.hwt b { font-size: 18px; font-weight: 800; } .hwt .hwi { color: var(--accent); }
.hwin p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--fg4); }
.hcalc { padding: 12px 14px; border-radius: 14px; background: var(--accent-bg); font-size: 18px; font-weight: 800; color: var(--fg); overflow-wrap: anywhere; }
.hpay { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 12px 14px; border-radius: 14px; background: var(--accent-bg); }
.hpay > span:first-child { font-size: 17px; font-weight: 800; } .hpay b { font-size: 26px; font-weight: 800; color: var(--accent-ink); }
.hfee { margin-left: auto; padding: 4px 10px; border-radius: 10px; background: var(--accent-bg2); color: var(--accent-ink); font-size: 13px; font-weight: 800; }
.hnote { font-size: 12px; line-height: 1.4; color: var(--fg3); }
.hban { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 8px 18px; border-radius: 999px; background: linear-gradient(90deg, #EEF4FF 0%, #E3ECFF 50%, #EEF4FF 100%); }
.hban span { font-size: 20px; font-weight: 800; color: var(--accent-ink); text-align: center; overflow-wrap: anywhere; text-wrap: balance; }   /* ревью 05.11: строки поровну, без висящего «pool» */
.hcoins { flex: 0 0 auto; width: 64px; height: 48px; color: var(--accent); stroke-width: 2.4 !important; } .hcoins.r { color: var(--fg3); }
.hrules { list-style: none; margin: 0; padding: 16px 8px; border-radius: 22px; border: 1px solid var(--line); background: #fff; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.hrules li { display: flex; align-items: flex-start; gap: 12px; padding: 4px 14px; border-left: 1px solid var(--line); min-width: 0; }
.hrules li:first-child { border-left: none; }
.hrules .hri { width: 30px; height: 30px; color: var(--fg); stroke-width: 1.8; }
.hrules li > span { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hrules b { font-size: 15px; font-weight: 800; line-height: 1.25; } .hrules small { font-size: 12.5px; line-height: 1.4; color: var(--fg4); overflow-wrap: anywhere; }
@media (max-width: 1199px) {
  .hhead { grid-template-columns: minmax(0, 1fr) auto; } .hhl { grid-column: 1 / -1; grid-row: 2; flex-wrap: wrap; gap: 8px 0; } .hhl li:first-child { border-left: none; padding-left: 0; }
  .hrow { grid-template-columns: minmax(0, 1fr); }
  .hexg { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hpots { grid-column: 1 / -1; grid-row: 1; } .hyou { padding-right: 0; border-right: none; } .hwin { padding-left: 16px; }
  .hrules { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; } .hrules li:nth-child(3n + 1) { border-left: none; }
}
@media (min-width: 760px) and (max-width: 1199px) {      /* ревью 05.11: 760–1199 — три пункта шапки одной строкой (было 2 + 1 с висящей чертой слева) */
  .hhl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 0; } .hhl li { padding: 4px 14px; } .hhl li > span { max-width: none; }
  .hhl li:first-child { border-left: none; padding-left: 0; }
}
@media (max-width: 759px) {
  .hwrap { padding: 0; align-items: stretch; }
  .hdlg { width: 100%; max-height: none; height: 100%; border-radius: 0; }
  .hbody { padding: 14px 16px 22px; gap: 14px; }
  .hh { font-size: 27px; } .hsub { font-size: 14.5px; } .hclose { width: 40px; height: 40px; }
  .hhl { flex-direction: column; align-items: stretch; gap: 8px; } .hhl li { border-left: none; padding: 0; } .hhl .hli { width: 28px; height: 28px; } .hhl span { max-width: none; }
  .hcard { padding: 14px; border-radius: 18px; gap: 12px; } .hst h3 { font-size: 19px; } .hst p { font-size: 14px; } .hno { width: 30px; height: 30px; font-size: 15px; }
  .hdurs { grid-template-columns: minmax(0, 1fr); } .hdur { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; } .hdur .hpill { align-self: auto; margin-top: 0; }
  .hdur .hdl, .hdur .hdsd { flex-basis: 100%; }
  .htls { grid-template-columns: minmax(0, 1fr); gap: 22px; } .htl { padding: 12px; }
  .htl:not(:last-child)::after { content: '↓'; right: auto; left: 50%; top: auto; bottom: -21px; transform: translateX(-50%); }
  .hexg { grid-template-columns: minmax(0, 1fr); } .hwin { padding-left: 0; border-left: none; } .hpots { grid-template-columns: minmax(0, 1fr); } .hvs { justify-self: center; }
  .hpots { grid-column: auto; grid-row: auto; }          /* ревью 05.11: телефон — порядок макета 4: «You call the duel» → котлы → «If … wins» (не котлы сверху) */
  .hpf b { font-size: 22px; } .hcalc { font-size: 17px; } .hpay b { font-size: 22px; }
  .hban { border-radius: 18px; padding: 10px 12px; gap: 8px; } .hban span { font-size: 16px; } .hcoins { width: 40px; height: 30px; }
  .hrules { grid-template-columns: minmax(0, 1fr); padding: 6px 4px; } .hrules li { border-left: none; border-top: 1px solid var(--line); padding: 10px; } .hrules li:first-child { border-top: none; }
}
@media (max-width: 399px) {                              /* ревью 05.11: < 400 — стопки монет меньше, < 360 — правая скрыта: текст ленты не зажат */
  .hban { gap: 6px; padding: 10px; } .hcoins { width: 30px; height: 23px; }
}
@media (max-width: 359px) { .hcoins.r { display: none; } }

/* ===== дизайн v3, часть 4 — вкладка Duels: «Duels now» карточками (оба котла, два таймера порознь), «My duels» ===== */
.dnhead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.dnht { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dnht .pt, .dlhead .pt { font-size: 20px; font-weight: 800; letter-spacing: -.015em; }
/* решение dz 05.11 (SPEC v2 §17): сверху — «Challenge», главная кнопка вкладки (окно New duel); под ней — инфографика «How a duel works» прямо на странице
   (static/howduel.js, {inline: true}: та же разметка и те же правила, что у окна, без ×; карточка вкладки — как тело окна) */
.dtabtop { display: flex; }
.dtabtop .dcall { height: 60px; padding: 0 40px; gap: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.01em; box-shadow: 0 8px 22px rgba(20, 99, 255, .3); }
.dtabtop .dcall:hover { background: var(--accent-ink); }
.dtabtop .dcall .dci { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.duels > .card.dhinl { padding: 26px 30px 28px; gap: 18px; }
.dhinl .hhead { grid-template-columns: minmax(0, 1fr) auto; }
/* решение dz 05.11 (SPEC v2 §17): на телефоне инфографика свёрнута в заголовок «How a duel works ▾» (app.js howInline: #dhow_tog), на десктопе — развёрнута */
.dhinl .dhbody { display: contents; }
.dhinl .dhtog { display: none; }
@media (max-width: 1199px) { .dhinl .hhead { grid-template-columns: minmax(0, 1fr); } }
.dngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.dnlist { gap: 10px; }
.dnlist .dni { gap: 8px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.dnlist .dni:hover { border-color: var(--ctl); }
.dnlist .dni.open { border: 1.5px solid var(--accent); }
.dnlist .dni .r1 { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.dside { min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; }
.dside svg { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dside > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dside.hit { background: var(--pos-bg); color: var(--pos); } .dside.miss { background: var(--neg-bg); color: var(--neg); }
.dnlist .dni .tm { flex: 0 0 auto; height: auto; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0; padding: 3px 10px; border-radius: 10px; background: var(--muted); line-height: 1.15; }
.dnlist .dni .tm small { font-size: 10.5px; font-weight: 700; opacity: .8; } .dnlist .dni .tm .mono { font-size: 15px; font-weight: 800; }
.dnlist .dni.open .tm { background: var(--accent-bg); color: var(--accent-ink); } .dnlist .dni.live .tm { background: var(--fg); color: #fff; }
.dnlist .dni .r2 { display: flex; align-items: baseline; gap: 8px; min-width: 0; font-size: 15px; color: var(--fg); }
.dnlist .dni .r2 .w { flex: 0 1 auto; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dnlist .dni .r2 .s { flex: 0 0 auto; margin-left: auto; font-weight: 800; }
.dnlist .dni .r3 { font-size: 12.5px; color: var(--fg3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dnlist .dni .r4 { min-width: 0; }
.dni .pots { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "a b" "bar bar"; align-items: end; gap: 6px 12px; }
.dni .pots .pp:first-child { grid-area: a; } .dni .pots .pp.r { grid-area: b; } .dni .pots .pbar { grid-area: bar; }
.dni .pp { min-width: 0; display: flex; flex-direction: column; gap: 0; line-height: 1.2; } .dni .pp.r { align-items: flex-end; text-align: right; }
.dni .pp .pw { font-size: 11px; font-weight: 700; color: var(--fg3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dni .pp b { font-size: 14px; font-weight: 800; white-space: nowrap; } .dni .pp small { font-size: 11px; color: var(--fg3); }
.dni .pp.hit b { color: var(--pos); } .dni .pp.miss b { color: var(--neg); }
.pbar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: var(--muted); }
.pbar i { display: block; height: 100%; } .pbar i:last-child { flex: 1 1 auto; } .pbar i.hit { background: var(--bet-hit-bg); } .pbar i.miss { background: var(--bet-miss-bg); }
.dnlist .dni .res { font-size: 13px; font-weight: 700; color: var(--myt); overflow-wrap: anywhere; }
.dnlist .dni.priv { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; border-style: dashed; box-shadow: none; }
.dnlist .dni.priv .r1 { justify-content: flex-start; gap: 8px; } .dnlist .dni.priv .dpi { fill: none; stroke: var(--fg3); stroke-width: 2; }
.dnlist .dni.priv .r1 b { color: var(--fg4); font-weight: 700; } .dnlist .dni.priv .r2 { margin-left: auto; font-size: 13px; color: var(--fg3); }
.dnlist .dnsub { display: block; margin: 6px 0 2px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--fg3); }
.dnlist .dnempty { font-size: 14px; color: var(--fg3); white-space: normal; }
.dmine .dlhead { padding-bottom: 2px; }
.dmine .dlist:empty { display: none; }                   /* ревью 05.11: пустой список не даёт лишний зазор над «No duels yet…» */
.dmine .dr { padding: 10px 0; }
.dmine .dr .t1 { font-size: 14px; font-weight: 700; } .dmine .dr .t2 { font-size: 12px; }
.dmine .dr.open .st { background: var(--accent-bg); color: var(--accent-ink); border-color: var(--accent-bg2); }
.dmine .dr.won .st { background: var(--pos-bg); color: var(--pos); border-color: var(--pos-bg); } .dmine .dr.lost .st { background: var(--neg-bg); color: var(--neg); border-color: var(--neg-bg); }
@media (max-width: 759px) {
  .dtabtop .dcall { flex: 1 1 auto; justify-content: center; height: 56px; padding: 0 20px; font-size: 19px; }   /* телефон: «Challenge» во всю ширину */
  .duels > .card.dhinl { padding: 14px 12px 18px; gap: 14px; }                                                  /* инфографика — в столбик (те же правила, что у окна < 760) */
  .duels > .card.dhinl:not(.open) { padding: 0; gap: 0; }
  .dhinl .dhtog { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 54px; padding: 0 16px; border: 0; border-radius: inherit;
    background: none; color: var(--fg); font: inherit; font-size: 18px; font-weight: 800; letter-spacing: -.015em; text-align: left; cursor: pointer; }
  .duels > .card.dhinl.open .dhtog { min-height: 0; padding: 0 4px 2px; }
  .dhinl .dhchev { flex: 0 0 auto; font-size: 18px; color: var(--fg3); transition: transform .2s; }
  .dhinl.open .dhchev { transform: rotate(180deg); }
  .dhinl:not(.open) .dhbody { display: none; }
  .dhinl .hhead .hh { display: none; }                                                                           /* заголовок — сама кнопка */
  .dngrid { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dnht .pt, .dlhead .pt { font-size: 18px; }
}
@media (max-width: 359px) { .dni .pots { column-gap: 6px; } .dni .pp b { font-size: 13px; } }
@media (max-width: 379px) {                              /* ревью 05.11: 320–379 — заголовок карточки «Duels now» и строка «by …» переносятся, не «…» (уровень виден) */
  .dnlist .dni .r2 { flex-wrap: wrap; } .dnlist .dni .r2 .w, .dnlist .dni .r3 { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
}
.ndur .nds, .hdur .hds, .nw { white-space: nowrap; }
@media (max-width: 379px) {                              /* 360 px: «Custom» не влезает в треть окна — длительности списком */
  .ndurs { grid-template-columns: minmax(0, 1fr); } .ndur { grid-template-columns: auto auto minmax(0, 1fr); align-items: center; } .ndur .nds { grid-column: auto; } .ndur .ndl { grid-column: 1 / -1; }
  .ndur .npill { grid-column: 1 / -1; margin-top: 2px; }
  .nsides button { gap: 6px; }                           /* 05.11: 360–379 px — «Reaches» с галочкой выбранной в одну строку (зазоры 10 → 6 px) */
}

/* ===== дизайн v3, часть 4 — страница дуэли /d/{id}: два таймера порознь (окно входа → срок дуэли), × вклада у участника, «How a duel works» ===== */
.dtimes { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 8px; }
.dtm { min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 8px 12px; border-radius: 12px; background: var(--muted2); border: 1px solid var(--rowline); }
.dtm small { font-size: 11.5px; font-weight: 700; color: var(--fg3); overflow-wrap: anywhere; }
.dtm b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--fg4); }
.dtm > span { font-size: 11.5px; color: var(--fg3); overflow-wrap: anywhere; }
.dtm.on { background: var(--accent-bg); border-color: var(--accent-bg2); } .dtm.on small, .dtm.on > span { color: var(--accent-ink); } .dtm.on b { color: var(--accent-ink); }
.dtm.run.on { background: var(--fg); border-color: var(--fg); } .dtm.run.on small, .dtm.run.on > span, .dtm.run.on b { color: #fff; }
.dtm.off b { color: var(--empty); }
.dtar { align-self: center; font-size: 16px; font-weight: 700; color: var(--fg3); }
.pe .rt { flex: 0 0 auto; min-width: 34px; text-align: right; font-size: 11px; font-weight: 700; color: var(--fg3); }
.ring.dring.long span { font-size: 12px; letter-spacing: -.02em; }
.dhowb { align-self: center; height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--accent-ink); font-size: 13px; font-weight: 700; box-shadow: var(--shadow); }
.dhelp { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--fg); }
.dhelp:hover, .dhowb:hover { border-color: var(--ctl); }
.dhr .age { font-size: 12px; font-weight: 700; color: var(--fg3); }
.dcard { border-radius: 18px; }
.dpot.hit .pv { color: var(--pos); } .dpot.miss .pv { color: var(--neg); } .dpot.lost .pv { color: var(--fg3); }
.dpot .ph .pw { font-size: 14px; }
@media (min-width: 760px) { .dpage { max-width: 720px; } .dmain { padding: 18px 20px 20px; gap: 14px; } .dcard { padding: 18px 20px; } .dh2 { font-size: 21px; } }
@media (max-width: 359px) { .dtm { padding: 6px 8px; } .dtm b { font-size: 17px; } .dtimes { gap: 4px; } }
.dtm small.sh { display: none; }
.dbrand { white-space: nowrap; }
@media (max-width: 359px) {                              /* QA 6: на 320 × 568 поле суммы и обе кнопки входа — на первом экране: таймеры в одну строку, без «from $X» у заголовка входа */
  .dtimes { gap: 4px; } .dtm { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 6px; padding: 5px 8px; }
  .dtm small.lg, .dtm > span { display: none; } .dtm small.sh { display: inline; } .dtm b { font-size: 15px; }
  .djoin #d_jmin { display: none; }
  .dbrand { font-size: 16px; gap: 5px; } .dhdr { padding: 0 12px; gap: 6px; } .dhelp { width: 30px; height: 30px; }
}

/* ===== дизайн v3, часть 5 — Stats (макет 5; спека ChatGPT §8; v2 §6, §10.1). Верх: My stats · Wallet · My predictions; середина: Events · Players · Latest
   trades; низ: Round history. Белые карточки, иконка + жирный заголовок; таблицы — шапка на сером, строки через тонкую линию, числа табличные справа.
   Длинная таблица листается внутри своей карточки (.tscroll), текст — в своей ячейке (имя — «…» с полным в title). P&L зелёный / красный — только у
   настоящего знака. ≥ 1280: ряды по 3 карточки (как в макете), 760–1279: по 2 (My predictions, сделки — во всю ширину), < 760: стопкой, таблицы — строками ===== */
.stats { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.snote { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--warn-bg); color: var(--warn-fg); font-size: 13px; }
.srow { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: stretch; min-width: 0; }
.scard { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 18px; }
.scard .sh { display: flex; align-items: center; gap: 10px; min-height: 32px; min-width: 0; }
.scard .si { flex: 0 0 auto; fill: none; stroke: var(--accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.scard .st { margin: 0; font-size: 18px; font-weight: 800; color: var(--fg); letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scard .sact { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }
.scount { flex: 0 0 auto; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--muted); color: var(--fg); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ssel { position: relative; display: inline-flex; min-width: 0; }
.ssel select { appearance: none; -webkit-appearance: none; height: 34px; max-width: 100%; padding: 0 30px 0 12px; border-radius: 10px; border: 1px solid var(--ctl); background: #fff; font: inherit; font-size: 13px; font-weight: 700; color: var(--fg); cursor: pointer; text-overflow: ellipsis; }
.ssel::after { content: ''; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px; margin-top: -6px; border-right: 1.8px solid var(--fg); border-bottom: 1.8px solid var(--fg); transform: rotate(45deg); pointer-events: none; }
.ssel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sbtn2 { height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ctl); background: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }
/* My stats */
.sid { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ava { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; background: var(--accent-bg2); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 800; }
.sidn { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.snick { font-size: 18px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sedit { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--ctl); background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.sedit svg { fill: none; stroke: var(--fg); stroke-width: 1.8; stroke-linejoin: round; }
.skv { display: grid; border-top: 1px solid var(--rowline); min-width: 0; }
.skv.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skv.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skv .kc { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; min-width: 0; padding: 10px 12px 2px 0; }
.skv .kc + .kc { padding-left: 12px; border-left: 1px solid var(--rowline); }
.skv .kl { font-size: 12px; color: var(--fg2); min-width: 0; overflow-wrap: break-word; }   /* подпись переносится по словам («Accepted / first» на 360 px) */
.skv .kvv { font-size: 18px; font-weight: 800; color: var(--fg); min-width: 0; white-space: nowrap; }   /* число одним куском: не влезло — мельче (app.js fitText) */
.skv .kvv[data-s="priv"] { white-space: normal; }   /* «1 · total $999,999.00» — по словам на две строки, сумма одним куском */
/* Wallet */
.sbal { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 16px; border-radius: 14px; background: var(--accent-bg); border: 1px solid var(--accent-bg2); }
.sbi { flex: 0 0 auto; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sbv { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sbig { font-size: 26px; font-weight: 800; color: var(--fg); letter-spacing: -.01em; white-space: nowrap; min-width: 0; }
.srows { display: flex; flex-direction: column; min-width: 0; }
.srows .wr { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--rowline2); font-size: 14px; min-width: 0; }
.srows .wr:last-child { border-bottom: none; }
.srows .wr > span:first-child { color: var(--fg4); min-width: 0; }
.srows .wr .mono { font-size: 17px; font-weight: 800; color: var(--fg); white-space: nowrap; }
.stats .pos, .stats .srows .wr .mono.pos, .skv .kvv.pos { color: var(--pos); } .stats .neg, .stats .srows .wr .mono.neg, .skv .kvv.neg { color: var(--neg); }
/* My predictions: пусто */
.sempty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px 6px; text-align: center; min-width: 0; }
.sempty svg { fill: none; stroke: var(--fg3); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.sempty b { font-size: 18px; font-weight: 800; }
.sempty .sub { font-size: 13px; color: var(--fg2); max-width: 100%; }
.sgo { margin-top: 8px; height: 42px; padding: 0 22px; border-radius: 12px; border: none; background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.sgo svg { fill: #fff; stroke: none; flex: 0 0 auto; }
.sgo:hover { background: var(--accent-ink); }
.sempty1 { margin: 2px 0; font-size: 13px; color: var(--fg3); }
/* таблицы */
.tbox, .hsplit { min-width: 0; display: flex; flex-direction: column; }
.tscroll { min-width: 0; overflow: auto; overscroll-behavior: contain; border-radius: 10px; }
.tscroll.d { max-height: 300px; }
.sbets .tscroll.d { max-height: 236px; }
.shist .tscroll.d { max-height: 520px; }
.tscroll.d.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.stab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.stab th { position: sticky; top: 0; z-index: 1; background: var(--thead); color: var(--fg2); font-size: 12px; font-weight: 700; text-align: left; padding: 7px 6px; white-space: nowrap; border-bottom: 1px solid var(--rowline); }
.stab th.r, .stab td.r { text-align: right; }
.stab td { padding: 6px 6px; border-bottom: 1px solid var(--rowline2); white-space: nowrap; color: var(--fg); }
.stab tr:last-child td { border-bottom: none; }
.stab td.mono { font-variant-numeric: tabular-nums; } .stab td.b { font-weight: 700; } .stab td.grey { color: var(--fg3); }
.stab td.nm, .stab td.wd { max-width: 0; width: 50%; overflow: hidden; text-overflow: ellipsis; }
.stab td.nm.me { color: var(--accent-ink); font-weight: 800; }
.stab tr.me td { background: var(--accent-bg); }
.stab tr.me td:first-child { border-radius: 8px 0 0 8px; } .stab tr.me td:last-child { border-radius: 0 8px 8px 0; }
.stab td.evt { white-space: normal; overflow-wrap: break-word; width: 100%; }
.stab td.tm { width: 1%; }
.stab tr.ev td.evt::before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--grey); vertical-align: 1px; }
.stab tr.ev.open td { background: var(--pos-bg); } .stab tr.ev.open td.evt::before { background: var(--pos-strong); }
.stab tr.ev.open td.evt { font-weight: 600; }
.stab tr.ev.mine td.evt::before { background: var(--accent); }
.stab tr.wait td { color: var(--fg3); }
.stab.tr td:nth-child(5), .stab.tr td:nth-child(6) { max-width: 0; width: 25%; overflow: hidden; text-overflow: ellipsis; }
.stab.hist td { padding-top: 5px; padding-bottom: 5px; }
/* телефон: строки-карточки */
.slist { display: flex; flex-direction: column; }
.stats .nw { white-space: nowrap; }
.sli { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 7px 2px; border-bottom: 1px solid var(--rowline2); min-width: 0; }
.sli:last-child { border-bottom: none; }
.sli .ab { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sli .a { font-size: 13px; font-weight: 700; min-width: 0; overflow-wrap: break-word; }
.sli .b { font-size: 12px; color: var(--fg3); min-width: 0; overflow-wrap: break-word; }
.sli .c { flex: 0 0 auto; font-size: 13px; font-weight: 800; white-space: nowrap; }
.sli.me { background: var(--accent-bg); border-radius: 8px; padding-left: 8px; padding-right: 8px; } .sli.me .a { color: var(--accent-ink); }
.sli.ev.open .a { color: var(--pos); }
.tscroll.m { max-height: 380px; }
@media (max-width: 759px) {
  .stats { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 16px; gap: 12px; }
  .srow { gap: 12px; }
  .scard { padding: 14px 14px; gap: 10px; }
  .scard .st { font-size: 17px; }
  .scard .sh { flex-wrap: wrap; }
  .scard .sact { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .sbig { font-size: 24px; }
  .sli.pl .a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
}
@media (max-width: 359px) {
  .skv.three { grid-template-columns: minmax(0, 1fr); } .skv.three .kc + .kc { padding-left: 0; border-left: none; border-top: 1px solid var(--rowline2); }
  .skv .kvv { font-size: 16px; } .sbig { font-size: 21px; } .sbal { padding: 12px; gap: 10px; } .sbi { width: 32px; height: 32px; }
}
@media (min-width: 760px) and (max-width: 1279px) {
  .srow.stop { grid-template-columns: repeat(2, minmax(0, 1fr)); } .srow.stop .sbets { grid-column: 1 / -1; }
  .srow.smid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .srow.smid .str { grid-column: 1 / -1; }
}
@media (min-width: 760px) and (max-width: 999px) {
  .srow.smid { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1280px) {
  .srow.stop { grid-template-columns: minmax(0, 1.27fr) minmax(0, 1fr) minmax(0, 2fr); }
  .srow.smid { grid-template-columns: minmax(0, 1.17fr) minmax(0, 1fr) minmax(0, 1.2fr); }
}