/* Палитра и размеры стола. Раздел 10 разбора лейаута
   (design/razbor-leyauta-pokerstars.md). Здесь ТОЛЬКО переменные. */

:root {
  /* --- брендовые (менять нельзя, §10.1) --- */
  --brand: #009758;
  --brand-dark: #00884f;
  --gold: #cf9236;
  --surface: #252525;
  --felt-base: #21302a;
  --text: #dcdfe6;
  --text-muted: #909399;
  --text-dim: #606266;

  /* --- производные (§10.2) --- */
  --bg-page: #1b1b1b;
  --surface-2: #2e2e2e;
  --line: #3a3a3a;
  --felt-hi: #2a4438;
  --felt-lo: #182420;
  --felt-edge: rgba(0, 151, 88, .22);
  --rim-hi: #3c3c3c;
  --rim-lo: #161616;
  --brand-glow: rgba(0, 151, 88, .35);
  --brand-lite: #2fbf83;
  --gold-dim: rgba(207, 146, 54, .30);
  --gold-glow: rgba(207, 146, 54, .40);
  --text-strong: #ffffff;
  --button-face: #ffffff;
  --danger: #c0392b;

  /* --- стол (§10.3) --- */
  --felt: radial-gradient(ellipse 62% 78% at 50% 42%,
          var(--felt-hi) 0%, var(--felt-base) 58%, var(--felt-lo) 100%);
  --rim: linear-gradient(180deg, var(--rim-hi) 0%, var(--surface) 42%, var(--rim-lo) 100%);
  --rim-shadow: 0 18px 48px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .06);
  --felt-inset: inset 0 0 0 1px var(--felt-edge), inset 0 14px 40px rgba(0, 0, 0, .45);
  --pod-bg: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  --pod-shadow: 0 4px 12px rgba(0, 0, 0, .5);

  /* --- карты и масти (§10.4) --- */
  --card-face: #f5f5f2;
  --card-edge: rgba(0, 0, 0, .25);
  --card-shadow: 0 2px 6px rgba(0, 0, 0, .45);
  --card-back-a: #00884f;
  --card-back-b: #007a47;
  --suit-black: #252525;
  --suit-red: #c0392b;
  --suit-blue: #2b7bd6;
  --suit-green: #009758;

  /* по умолчанию двухцветная колода; .deck-4 переопределяет две строки */
  --suit-s: var(--suit-black);
  --suit-h: var(--suit-red);
  --suit-d: var(--suit-red);
  --suit-c: var(--suit-black);

  /* --- фишки (§10.5) --- */
  --chip-5: #a03028;
  --chip-25: #00884f;
  --chip-100: #3a3a3a;
  --chip-500: #5a4a72;
  --chip-1000: #cf9236;
  --chip-edge: rgba(255, 255, 255, .55);

  /* --- кнопки (§10.6) --- */
  --btn-fold-bg: #3a3a3a;
  --btn-fold-hover: #454545;
  --btn-call-bg: #009758;
  --btn-raise-bg: #cf9236;

  /* --- шрифты (§10.8). Своих файлов не кладём: лицензия Arial Rounded MT
         не проверена, стек ловит гарнитуру системно, иначе Roboto 700 --- */
  --font-ui: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-display: 'Arial Rounded MT Bold', 'Arial Rounded MT', 'Roboto', Arial, sans-serif;

  /* --- слои (§1) --- */
  --z-felt: 0;
  --z-board: 10;
  --z-chips: 20;
  --z-pot: 25;
  --z-button: 30;
  --z-cards: 40;
  --z-pod: 50;
  --z-fly: 70;

  /* --- длительности: одна ручка на все анимации (§5.4) --- */
  --dur-card: 180ms;
  --dur-board: 220ms;
  --dur-chip: 200ms;
  --dur-flip: 260ms;
  --dur-move: 350ms;

  /* --- геометрия десктопа (§2.3) --- */
  --stage-w: 1120px;
  --stage-h: 700px;

  --oval-w: 941px;
  --oval-h: 434px;
  --oval-y: 53%;
  --rim-th: 14px;

  --y-ai-cards: 77px;
  --y-ai-seat: 154px;
  --y-ai-bet: 200px;
  --y-pot: 242px;
  /* ОТСТУПЛЕНИЕ ОТ §5.2: банк не по центру, а сдвинут влево на свободное сукно.
     По разбору пилюля стоит на оси (50%, 34.5%), но там она встаёт ровно под
     бет-чипами ИИ и читается с ними как одно целое - жалоба владельца
     2026-08-29. Ось освобождена под чипы, банк уехал на пустое место левее
     борда.

     Пересчитано, когда к пилюле добавилась стопка фишек: узел банка теперь
     пилюля (~130) + 8 + стопка (36) = 174 по ширине, центр на -240 от оси,
     то есть 233..407 по x. Пилюля 233..363, стопка 371..407, полоса по y
     229..255 (у стопки 225..259 - её коробка выше). Что рядом: сукно на этой
     высоте начинается с 204, борд - с 263 по вертикали (8px ниже пилюли) и с
     344 по горизонтали, чипы ИИ - 443..557 и на 8px выше, баттон дилера -
     416..446. Самая высокая стопка (5 фишек, 50px) поднимается до y=209, и там
     сукно идёт с 247 - стопка стоит на нём с запасом 124px. Ни на что не
     наезжает. */
  --pot-shift: -240px;
  --pot-drop: 0px;
  /* Потолок стопки банка: выше пяти фишек она уже не «аккуратненько», а столб.
     Пять - столько же, сколько показывает стопка ставки (§5.1). */
  --pot-chips-max: 5;
  --y-board: 318px;
  --y-hero-bet: 410px;
  --y-hero-cards: 500px;
  --y-hero-seat: 588px;
  --x-dealer-hero: 689px;
  --y-dealer-hero: 539px;
  --x-dealer-ai: 431px;
  --y-dealer-ai: 203px;
  --dealer-size: 30px;
  --dealer-font: 15px;

  --card-hero-w: 88px;
  --card-hero-h: 122px;
  --card-hero-gap: 8px;
  --card-hero-r: 8px;
  --card-board-w: 80px;
  --card-board-h: 110px;
  --card-board-gap: 8px;
  --card-board-r: 7px;
  --card-ai-w: 72px;
  --card-ai-h: 100px;
  --card-ai-gap: 6px;
  --card-ai-r: 6px;

  --rank-hero: 26px;
  --rank-board: 24px;
  --rank-ai: 22px;
  --suit-hero: 44px;
  --suit-board: 40px;
  --suit-ai: 36px;
  --suit-sm: 16px;

  --pod-w: 264px;
  --pod-h: 56px;
  --pod-r: 28px;
  --avatar: 60px;
  --avatar-out: 20px;
  --pod-name: 15px;
  --pod-value: 18px;

  --pot-font: 15px;
  --bet-font: 15px;
}

/* Четырёхцветная колода: переключатель в настройках, §4.2 */
html.deck-4 {
  --suit-d: var(--suit-blue);
  --suit-c: var(--suit-green);
}

/* Телефон: вторая координатная система, §9.1 */
html.lay-phone {
  --stage-w: 360px;
  --stage-h: 640px;

  --oval-w: 340px;
  --oval-h: 268px;
  --oval-y: 44%;
  --rim-th: 9px;

  --y-ai-cards: 45px;
  --y-ai-seat: 102px;
  --y-ai-bet: 162px;   /* §9.1 даёт 150, но там стек ложится ровно на борт */
  --y-pot: 192px;
  /* То же отступление от §5.2 на телефоне, но одним сдвигом влево там не
     обойтись: сукно на высоте банка всего 253px в ширину (54..306), а пилюля
     ~95px, и её правый край всё равно оставался бы под чипами ИИ. Поэтому банк
     уходит влево И на 10px ниже - в пустую полосу между чипами и бордом.
     Опускается ТОЛЬКО пилюля банка: баннер результата остаётся на своей
     координате `--y-pot`, он появляется, когда банка на столе уже нет.

     Со стопкой фишек узел стал шире: пилюля (~100) + 8 + стопка (36) = 144,
     центр на -40 от оси, то есть 68..212 по x; пилюля 68..168, стопка
     176..212, полоса по y 185..219. Сукно на этой высоте идёт с 60, чипы ИИ
     кончаются на 179 (8px выше стопки), борд начинается с 230 (11px ниже),
     баттон дилера кончается на 165 по вертикали. Потолок стопки тут ТРИ
     фишки, а не пять: пятифишечная башня поднялась бы до 169 и упёрлась в
     чипы ИИ. Сукно на телефоне втрое уже - башня обязана быть ниже. */
  --pot-shift: -40px;
  --pot-drop: 10px;
  --pot-chips-max: 3;
  --y-board: 262px;
  --y-hero-bet: 346px;
  --y-hero-cards: 422px;
  --y-hero-seat: 525px;
  --x-dealer-hero: 238px;   /* 66% */
  --y-dealer-hero: 480px;
  --x-dealer-ai: 122px;     /* 34% */
  --y-dealer-ai: 154px;
  --dealer-size: 22px;
  --dealer-font: 11px;

  --card-hero-w: 62px;
  --card-hero-h: 86px;
  --card-hero-gap: 6px;
  --card-hero-r: 6px;
  --card-board-w: 46px;
  --card-board-h: 64px;
  --card-board-gap: 4px;
  --card-board-r: 5px;
  --card-ai-w: 44px;
  --card-ai-h: 61px;
  --card-ai-gap: 4px;
  --card-ai-r: 4px;

  --rank-hero: 18px;
  --rank-board: 14px;
  --rank-ai: 13px;
  --suit-hero: 26px;
  --suit-board: 20px;
  --suit-ai: 18px;
  --suit-sm: 10px;

  --pod-w: 172px;
  --pod-h: 40px;
  --pod-r: 20px;
  --avatar: 40px;
  --avatar-out: 14px;
  --pod-name: 12px;
  --pod-value: 15px;

  --pot-font: 13px;
  --bet-font: 13px;
}

/* Анимации выключены: системная настройка или галочка в настройках (§5.4) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-card: 0ms; --dur-board: 0ms; --dur-chip: 0ms;
    --dur-flip: 0ms; --dur-move: 0ms;
  }
}

html.no-anim {
  --dur-card: 0ms; --dur-board: 0ms; --dur-chip: 0ms;
  --dur-flip: 0ms; --dur-move: 0ms;
}