/* Кожа каждого проекта. Цвета, шрифты и скругления взяты из самих проектов:
   из их тем и токенов дизайна. */

/* ===================================================================
   Общие мелкие детали
   =================================================================== */
.caption { margin: 10px 2px 0; font-size: 13px; color: var(--p-muted); }
.stack-gap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; min-width: 0; }

/* ===================================================================
   TUZ — токены velaro_tokens.dart: сукно, золото, бумага карты.
   Приложение только тёмное. В светлой теме сайта страница становится цвета бумаги карты,
   а стол остаётся сукном: как карточный стол в светлой комнате.
   Шрифты: Cormorant Garamond (название), Oswald (подписи капсом), Roboto (текст). Жирного нет.
   =================================================================== */
.p-velaro {
  --p-bg: #08301e; --p-fg: #eff7f1; --p-fg2: rgba(239, 247, 241, .85); --p-muted: rgba(239, 247, 241, .66);
  --p-accent: #ffc246; --p-on-accent: #08301e; --p-accent2: rgba(239, 247, 241, .66); --p-line: rgba(255, 255, 255, .12);
  --p-chip-bg: rgba(255, 194, 70, .10); --p-chip-fg: #eff7f1; --p-chip-r: 5px;
  --p-font: Roboto, "Segoe UI", sans-serif; --p-display: "Cormorant Garamond", "Cormorant Fallback", Georgia, serif;
  --p-h-weight: 400; --p-h-track: 0; --p-h2-weight: 400; --p-bullet: "♠";
  --v-paper: #fdfbf4; --v-black: #16202a; --v-red: #d01f2e; --v-back: #f0700f; --v-sheet: #0b3a24;
  --v-label: "Oswald", "Oswald Fallback", "Arial Narrow", sans-serif;
  --v-rule: rgba(239, 247, 241, .35); --v-red-ui: #ff5a64; --v-chip-line: rgba(255, 194, 70, .35); --v-table: rgba(8, 48, 30, .35);
  background: radial-gradient(90% 70% at 50% 18%, #1d8850 0%, #08301e 72%) #08301e;
  color-scheme: dark;
}
.p-velaro h1 { color: var(--p-accent); font-size: clamp(56px, 8vw, 96px); line-height: .95; }
/* TUZ — как надпись в приложении: наклонённый угол туза пик и золотое слово шрифтом Tenor Sans с широкими
   промежутками (из шрифта грузятся только буквы T, U, Z). Высота строки задана — пока шрифт грузится, ничего не прыгает */
.p-velaro h1.tuz-title { display: flex; align-items: center; gap: .3em; font-family: "Tenor Sans", var(--p-display); font-weight: 400; letter-spacing: .24em; }
.tuz-title__mark { flex: none; width: auto; height: .9em; margin-left: .06em; rotate: -8deg; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .35)); }
:root[data-egg="term"] .p-velaro h1.tuz-title { font-family: var(--p-display); letter-spacing: .1em; }
.p-velaro .proj__kicker, .p-velaro h2, .p-velaro .proj__chip, .p-velaro .proj__stack dt {
  font-family: var(--v-label); text-transform: uppercase; letter-spacing: .16em; font-weight: 400;
}
.p-velaro h2 { font-size: 15px; color: var(--p-muted); }
.p-velaro .proj__chip { font-size: 12px; border: 1px solid var(--v-chip-line); }
.p-velaro .proj__chip--stage { background: transparent; color: var(--p-accent); border-color: var(--p-accent); }
.velaro__suits { display: flex; align-items: center; gap: 14px; font-size: 22px; line-height: 1; color: var(--p-fg); max-width: 300px; }
.velaro__suits::before, .velaro__suits::after { content: ""; flex: 1; height: 1px; background: var(--v-rule); }
.velaro__suits .r { color: var(--v-red-ui); }

/* светлая тема сайта; карточка TUZ на главной остаётся на сукне — это образец приложения */
:root[data-theme="light"] .proj.p-velaro {
  --p-bg: #f3efe2; --p-fg: #10261a; --p-fg2: rgba(16, 38, 26, .82); --p-muted: rgba(16, 38, 26, .62);
  --p-accent: #8a5e00; --p-on-accent: #ffffff; --p-accent2: rgba(16, 38, 26, .45); --p-line: rgba(16, 38, 26, .14);
  --p-chip-bg: rgba(138, 94, 0, .08); --p-chip-fg: #10261a;
  --v-rule: rgba(16, 38, 26, .3); --v-red-ui: #d01f2e; --v-chip-line: rgba(138, 94, 0, .4);
  background: radial-gradient(90% 70% at 50% 18%, #fdfbf4 0%, #efe9d8 72%) #efe9d8;
  color-scheme: light;
}
:root[data-theme="light"] .proj.p-velaro .vt {
  --p-fg: #eff7f1; --p-muted: rgba(239, 247, 241, .66); --p-accent: #ffc246; --p-on-accent: #08301e; --p-line: rgba(255, 255, 255, .12);
  color: var(--p-fg); border-color: transparent;
  background: radial-gradient(120% 90% at 50% 15%, #1d8850 0%, #08301e 75%);
  box-shadow: 0 34px 60px -34px rgba(8, 48, 30, .7);
}
:root[data-theme="light"] .proj.p-velaro .velaro__rules img { box-shadow: 0 24px 40px -28px rgba(8, 48, 30, .6); }

/* стол */
.vt { display: grid; gap: 14px; justify-items: center; padding: 22px 12px 18px; border-radius: 5px; background: var(--v-table); border: 1px solid var(--p-line); }
.vt__state { margin: 0; font: 400 clamp(34px, 5vw, 46px)/1 var(--v-label); letter-spacing: .06em; color: var(--p-accent); }
.vt__hint { margin: -6px 0 0; font-size: 14px; color: var(--p-muted); }
.vt__seat { position: relative; display: grid; justify-items: center; gap: 4px; padding: 7px 12px; min-width: 92px; border-radius: 5px; background: var(--v-sheet); border: 1px solid var(--p-line); font: 400 13px/1.1 var(--v-label); letter-spacing: .1em; text-transform: uppercase; }
.vt__seat--me { border-color: var(--p-accent); box-shadow: 0 0 0 1px var(--p-accent); min-width: 120px; padding-block: 10px; }
.pc {
  --w: 64px; width: var(--w); height: calc(var(--w) * 1.45); flex: none;
  border-radius: 9px; background: var(--v-paper); color: var(--v-black);
  position: relative; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55);
  font: 400 calc(var(--w) * .3)/1 var(--v-label);
}
.pc--sm { --w: 52px; border-radius: 6px; }
.pc--red { color: var(--v-red); }
.pc b { position: absolute; top: 6px; left: 7px; font-weight: 400; display: grid; justify-items: center; gap: 1px; }
.pc b small { font-size: .8em; }
.pc::after { content: attr(data-s); position: absolute; inset: 0; display: grid; place-items: center; padding-top: 18%; font-size: calc(var(--w) * .5); font-family: "Segoe UI Symbol", serif; }
.pc--back {
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 244, 229, .85) 0 2px, transparent 3px),
    linear-gradient(45deg, transparent 46%, rgba(255, 244, 229, .85) 46% 54%, transparent 54%) center / 34% 24% no-repeat,
    repeating-linear-gradient(45deg, rgba(74, 26, 4, .16) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(-45deg, rgba(74, 26, 4, .16) 0 1px, transparent 1px 6px),
    var(--v-back);
  box-shadow: inset 0 0 0 3px var(--v-back), inset 0 0 0 4px rgba(74, 26, 4, .55), inset 0 0 0 6px rgba(255, 244, 229, .85), 0 6px 14px -6px rgba(0, 0, 0, .55);
}
.pc--back::after { content: none; }
.velaro__rules img { width: 270px; border-radius: 5px; border: 1px solid var(--p-line); }

/* ---------- партия «108» против компьютера: соперник сверху, колода и сброс в центре, ваша рука снизу ---------- */
.g108 { position: relative; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px 14px 18px; min-height: 520px; align-content: start; }
.g__bar { width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; }
.g__score { font: 400 12px/1.2 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.g__link { border: 0; background: none; padding: 4px 0; cursor: pointer; font: 400 12px/1 var(--v-label); letter-spacing: .14em; text-transform: uppercase; color: var(--p-accent); }
.g108 .vt__state { font-size: clamp(28px, 4vw, 38px); text-align: center; transition: color .3s; }
.g108.is-cpu .vt__state { color: var(--p-fg); }
.g108 .vt__hint { min-height: 2.9em; max-width: 40ch; text-align: center; line-height: 1.45; }

.g__opp, .g__me { transition: border-color .3s, box-shadow .3s; }
.g__opp {
  display: flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 5px;
  background: var(--v-sheet); border: 1px solid var(--p-line); font: 400 13px/1 var(--v-label); letter-spacing: .1em; text-transform: uppercase;
}
.g__opp.is-active, .g__me.is-active { border-color: var(--p-accent); box-shadow: 0 0 0 1px var(--p-accent); }
.g__backs { display: flex; padding-left: 8px; }
.g__backs i {
  width: 15px; height: 22px; margin-left: -8px; border-radius: 3px; background: var(--v-back);
  box-shadow: inset 0 0 0 1.5px var(--v-back), inset 0 0 0 2.5px rgba(74, 26, 4, .55), 0 2px 4px rgba(0, 0, 0, .35);
}
.g__opp-count { color: var(--p-muted); font-variant-numeric: tabular-nums; }
.g__me { min-width: 0; border-color: var(--p-line); box-shadow: none; }

.g__table { position: relative; display: flex; align-items: center; justify-content: center; gap: 26px; padding: 6px 0; }
.g__deck { position: relative; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 9px; }
.g__deck .pc {
  --w: 60px; display: block;
  box-shadow: inset 0 0 0 3px var(--v-back), inset 0 0 0 4px rgba(74, 26, 4, .55), inset 0 0 0 6px rgba(255, 244, 229, .85),
    2px 2px 0 #c95e0c, 4px 4px 0 #a64d0a, 0 10px 18px -8px rgba(0, 0, 0, .6);
  transition: translate .25s var(--spring);
}
.g__deck:not(:disabled):hover .pc, .g__deck:not(:disabled):focus-visible .pc { translate: 0 -5px; }
.g__deck:disabled { cursor: default; }
.g__deck:disabled .pc { filter: saturate(.7) brightness(.85); }
.g__count {
  position: absolute; right: -10px; bottom: -8px; min-width: 24px; padding: 4px 6px; border-radius: 999px;
  font: 400 12px/1 var(--v-label); text-align: center; color: var(--p-fg); background: var(--v-sheet); border: 1px solid var(--p-line);
}
.g__pile { position: relative; width: 66px; height: calc(66px * 1.45); }
.g__pile .pc { --w: 66px; position: absolute; inset: 0; }
.g__pile .g__under { transform: rotate(-9deg) translate(-6px, 2px); filter: brightness(.82); }
.g__pile .g__top { transform: rotate(3deg); }
.g__mark {
  position: absolute; left: calc(50% + 50px); top: 2px; min-width: 34px; padding: 6px 9px; border-radius: 999px; text-align: center;
  font: 400 15px/1 var(--v-label); color: var(--v-black); background: var(--v-paper); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.g__mark.is-red { color: var(--v-red); }
.g__mark.is-pen { color: #ffffff; background: var(--v-red); }

/* рука всегда вписывается в стол: чем больше карт, тем плотнее они наезжают (сдвиг считает js) */
.g__hand { --ov: -10px; width: 100%; min-width: 0; display: flex; justify-content: center; padding: 14px 4px 4px; min-height: 104px; }
.g__hand .pc { --w: 58px; flex: none; }
.g__hand .pc + .pc { margin-left: var(--ov); }
button.pc { border: 0; padding: 0; text-align: left; -webkit-appearance: none; appearance: none; cursor: default; }
.g__hand .pc { transition: translate .25s var(--spring), box-shadow .2s, filter .2s; }
/* рука веером (js/tables.js): угол каждой карты --fa, к краям карты чуть ниже (--fy); поворот вокруг низа карты */
.g__hand .pc { rotate: var(--fa, 0deg); transform-origin: 50% 100%; margin-top: var(--fy, 0px); -webkit-user-select: none; user-select: none; }
/* карту тянут на стол: на пальце карту нельзя «прокрутить» вместе со страницей, пока ей можно ходить */
.g__hand .pc:not(:disabled) { touch-action: none; }
.g__hand .pc.is-drag { z-index: 6; rotate: 0deg; transition: none; cursor: grabbing; box-shadow: 0 0 0 2px var(--p-accent), 0 22px 30px -12px rgba(0, 0, 0, .7); }
.g__pile.is-drop, .b__table.is-drop { outline: 2px dashed var(--p-accent); outline-offset: 8px; border-radius: 14px; }
.g__hand .pc.is-ok { cursor: pointer; box-shadow: 0 0 0 2px var(--p-accent), 0 8px 16px -8px rgba(0, 0, 0, .6); }
.g__hand .pc.is-ok:hover, .g__hand .pc.is-ok:focus-visible { translate: 0 -14px; z-index: 1; }
.g__hand .pc.is-off { filter: brightness(.72) saturate(.8); }
.g__hand .pc:disabled { color: var(--v-black); }
.g__hand .pc.pc--red:disabled { color: var(--v-red); }

.g__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.g__btn {
  padding: 11px 15px; border-radius: 5px; border: 1px solid var(--p-line); cursor: pointer;
  font: 400 12px/1 var(--v-label); letter-spacing: .14em; text-transform: uppercase;
  color: var(--p-fg); background: rgba(255, 255, 255, .05); transition: background .2s, border-color .2s, color .2s, opacity .2s;
}
.g__btn:not(:disabled):hover { border-color: var(--p-accent); }
.g__btn:disabled { opacity: .35; cursor: default; }
.g__btn--main { background: var(--p-accent); color: var(--p-on-accent); border-color: transparent; }
.g__btn--one[aria-pressed="true"] { color: var(--p-accent); border-color: var(--p-accent); background: rgba(255, 194, 70, .12); }

/* выбор масти для дамы и итоги раздачи — поверх стола */
.g__suits, .g__over {
  position: absolute; inset: var(--g-top, 0) 0 0; z-index: 5; display: grid; place-items: center; border-radius: 5px;
  background: rgba(8, 48, 30, .84); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: rise .45s var(--spring) both;
}
.g__suits { align-content: center; gap: 14px; }
.g__suits p { margin: 0; font: 400 14px/1 var(--v-label); letter-spacing: .16em; text-transform: uppercase; color: var(--p-fg); }
.g__suits div { display: flex; gap: 10px; }
.g__suits button {
  width: 58px; height: 74px; border-radius: 9px; border: 0; cursor: pointer; font-size: 32px; line-height: 1;
  color: var(--v-black); background: var(--v-paper); box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .6); transition: translate .2s var(--spring);
}
.g__suits button.r { color: var(--v-red); }
.g__suits button:hover, .g__suits button:focus-visible { translate: 0 -6px; }
.g__over-box { display: grid; gap: 14px; justify-items: center; padding: 20px; max-width: 340px; text-align: center; }
.g__over-title { margin: 0; font: 400 clamp(30px, 4vw, 40px)/1.05 var(--p-display); color: var(--p-accent); }
.g__tbl { display: grid; width: 100%; font-variant-numeric: tabular-nums; }
.g__tbl div { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--p-line); font-size: 15px; }
.g__tbl div span:not(:first-child) { text-align: right; }
.g__tbl .g__tbl-head { font: 400 11px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted); }
.g__over-note { margin: 0; font-size: 13px; color: var(--p-muted); }

@media (max-width: 480px) {
  .g108 { padding-inline: 8px; }
  .g__hand .pc { --w: 52px; }
  .g__table { gap: 20px; }
}

/* ---------- под счётом: сила компьютера, счёт партий, правила, игра с другом ---------- */
.g__tools { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: -4px; }
.g__seg { display: inline-flex; padding: 3px; border-radius: 999px; border: 1px solid var(--p-line); background: rgba(0, 0, 0, .18); }
.g__seg button {
  border: 0; cursor: pointer; padding: 6px 11px; border-radius: 999px; background: transparent;
  font: 400 11px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted);
  transition: background .25s var(--ease-soft, ease), color .25s;
}
.g__seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: var(--p-fg); }
.g__seg button:not([aria-pressed="true"]):hover { color: var(--p-fg); }
.g__wins, .g__duelinfo { font: 400 12px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.g__duelinfo { color: var(--p-accent); }
.g__tools-end { display: inline-flex; flex-wrap: wrap; gap: 4px 16px; margin-left: auto; }
.g__over { overflow: auto; }
.g__over-box .g__link { padding: 6px 0; }
.g__suits button:disabled { cursor: default; opacity: .35; translate: none; }
.g__suits button.is-mine { opacity: 1; box-shadow: 0 0 0 3px var(--p-accent), 0 8px 16px -8px rgba(0, 0, 0, .6); }

/* правила */
.g__help-box { max-width: 420px; justify-items: stretch; text-align: left; }
.g__help-box .g__over-title { text-align: center; }
.g__help-box > .g__btn, .g__help-box > .g__link { justify-self: center; }
.g__rules { margin: 0; padding-left: 1.3em; display: grid; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--p-fg); }
.g__rules li::marker { color: var(--p-accent); font-family: var(--v-label); }

/* игра с другом */
.g__duel-box { width: min(100%, 360px); }
.g__duel-code {
  margin: 0; padding: 10px 18px; border-radius: 8px; border: 1px dashed var(--p-accent);
  font: 400 40px/1 var(--v-label); letter-spacing: .3em; padding-left: calc(18px + .3em); color: var(--p-accent);
}
.g__duel-err { margin: 0; font-size: 13px; color: #ffb4a8; }
.g__tables { display: grid; gap: 6px; width: 100%; }
.g__tables-head { margin: 4px 0 0; font: 400 11px/1 var(--v-label); letter-spacing: .14em; text-transform: uppercase; color: var(--p-muted); }
.g__table-row {
  width: 100%; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--p-line); cursor: pointer; text-align: left;
  font: 400 13px/1.2 var(--v-label); letter-spacing: .1em; text-transform: uppercase; color: var(--p-fg); background: rgba(255, 255, 255, .06);
  transition: border-color .2s, background .2s;
}
.g__table-row:hover, .g__table-row:focus-visible { border-color: var(--p-accent); background: rgba(255, 194, 70, .1); }
.g__codeform { display: flex; gap: 8px; width: 100%; }
.g__codeform input {
  flex: 1; min-width: 0; padding: 10px 12px; border-radius: 5px; border: 1px solid var(--p-line); background: rgba(0, 0, 0, .22);
  font: 400 16px/1 var(--v-label); letter-spacing: .3em; text-transform: uppercase; color: var(--p-fg);
}
.g__codeform input::placeholder { letter-spacing: .1em; color: var(--p-muted); }
.g__codeform input:focus { outline: 2px solid var(--p-accent); outline-offset: 1px; }

/* обучение «Буре»: подсказка под столом */
.b__tip {
  width: 100%; max-width: 440px; display: grid; gap: 6px; padding: 12px 14px 8px; border-radius: 8px;
  background: #fff4e5; color: #2b1a08; box-shadow: 0 12px 26px -16px rgba(0, 0, 0, .8); font-size: 14px; line-height: 1.45;
}
.b__tip.is-new { animation: rise .45s var(--spring) both; }
.b__tip p { margin: 0; }
.b__tip-actions { display: flex; justify-content: flex-end; gap: 16px; }
.b__tip .g__link { color: #8a5e00; }

/* ---------- реакции за столом с другом и общий счёт задачи дня ---------- */
.g__react { flex-basis: 100%; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.g__react-btn {
  padding: 7px 12px; border-radius: 999px; cursor: pointer; font: 400 13px/1 var(--p-font, inherit);
  color: var(--p-fg); background: rgba(255, 255, 255, .06); border: 1px solid var(--p-line);
  transition: background .2s, border-color .2s, transform .2s var(--spring);
}
.g__react-btn:hover { border-color: var(--p-accent); }
.g__react-btn:active { transform: scale(.94); }
.g__bubble {
  position: absolute; z-index: 7; transform: translateX(-50%); pointer-events: none; white-space: nowrap;
  padding: 8px 13px; border-radius: 14px; font-size: 14px; font-weight: 600;
  color: #2b1a08; background: #fff4e5; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .7);
  animation: bubble-in .35s var(--spring) both; transition: opacity .4s, translate .4s;
}
.g__bubble--me { transform: translate(-50%, -100%); }
.g__bubble::after { content: ""; position: absolute; left: 50%; width: 10px; height: 10px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.g__bubble--opp::after { top: -4px; }
.g__bubble--me::after { bottom: -4px; }
.g__bubble.is-out { opacity: 0; translate: 0 -6px; }
@keyframes bubble-in { from { opacity: 0; scale: .7; } }
.z__stats { margin: -4px 0 0; max-width: 44ch; text-align: center; font: 400 12px/1.4 var(--v-label); letter-spacing: .1em; text-transform: uppercase; color: var(--p-accent); }
@media (prefers-reduced-motion: reduce) { .g__bubble { animation: none; } }

/* ---------- переключатель игр над столом ---------- */
.g-tabs {
  display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 12px; padding: 4px;
  border-radius: 999px; border: 1px solid var(--p-line); background: var(--p-chip-bg);
}
.g-tabs button {
  border: 0; cursor: pointer; padding: 9px 18px; border-radius: 999px;
  font: 400 13px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-muted); background: transparent; transition: background .3s var(--ease-soft, ease), color .3s;
}
.g-tabs button[aria-selected="true"] { background: var(--p-accent); color: var(--p-on-accent); }
.g-tabs button:not([aria-selected="true"]):hover { color: var(--p-fg); }
/* вкладки и рядом кнопка «на весь экран» */
.g-head { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 0 auto 12px; max-width: 100%; }
.g-head .g-tabs { margin: 0; }
.g-full {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--p-line); background: var(--p-chip-bg); color: var(--p-fg); transition: color .2s, border-color .2s;
}
.g-full svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-full__out { display: none; }
.g-full[aria-pressed="true"] .g-full__in { display: none; }
.g-full[aria-pressed="true"] .g-full__out { display: inline; }
.g-full:hover { color: var(--p-accent); border-color: var(--p-accent); }
.g-full:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.g-full__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* под вкладками — настройки партии: сила компьютера, число игроков и «Новая игра». На самом столе их нет —
   там только чей ход, карты и кнопки хода. Набор открытой игры показывает js/tables.js */
.g-ctl { display: flex; justify-content: center; max-width: 100%; margin: -4px auto 12px; }
.g-ctl[hidden], .g-ctl__set[hidden] { display: none; }
.g-ctl__set { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; }
.g-ctl .g__seg { padding: 4px; background: var(--p-chip-bg); }
.g-ctl .g__seg button { padding: 8px 13px; font-size: 12px; }
.g-ctl .g__seg button[aria-pressed="true"] { background: color-mix(in srgb, var(--p-fg) 15%, transparent); color: var(--p-fg); }
.g-ctl__new {
  padding: 10px 16px; border-radius: 999px; border: 1px solid var(--p-accent); background: transparent; cursor: pointer;
  font: 400 12px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-accent);
  transition: background .25s, color .25s;
}
.g-ctl__new:hover, .g-ctl__new:focus-visible { background: var(--p-accent); color: var(--p-on-accent); }
.g-ctl__new:focus-visible, .g-ctl .g__seg button:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
:root[data-egg="term"] .g-ctl__new { border-radius: 2px; }
/* подсказка хода на столе не показывается — остаётся только для экранного диктора */
.vt__hint.g__sr { min-height: 0; margin: 0; }

/* TUZ на весь экран (js/vfull.js): блок со столом — поверх страницы во всё окно, без рамки телефона
   (container-type снят — рамка включается контейнерным запросом), всё крупнее на --vz (CSS zoom) */
:root.vfull, :root.vfull body { overflow: hidden; }
:root.vfull .page.p-velaro, :root.vfull .p-velaro .proj__inner, :root.vfull .p-velaro .proj__main { transform: none; animation: none; filter: none; }
:root.vfull .p-velaro .proj__visual {
  position: fixed; inset: 0; z-index: 58; container-type: normal; animation: none;
  align-self: stretch; justify-self: stretch;   /* на компьютере колонка «липкая» с align-self: start — иначе блок не растянется */
  display: flex; flex-direction: column; align-items: center; overflow: auto; overscroll-behavior: contain;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px));
  background: var(--p-bg);
}
:root.vfull .p-velaro .proj__visual > * { flex: none; zoom: var(--vz, 1); }
:root.vfull .p-velaro .proj__visual > .ach { width: auto; }
:root.vfull .p-velaro .vphone { width: 460px; max-width: calc((100vw - 24px) / var(--vz, 1)); }
:root.vfull .p-velaro .vphone__screen { min-height: 0; }

/* ---------- партия в «Буру»: колода с козырем слева, взятка справа, рука снизу ---------- */
.gbura .g__hand { --ov: -8px; min-height: 116px; padding-top: 20px; }
.gbura .g__hand .pc:not(:disabled) { cursor: pointer; }
.gbura .g__hand .pc:not(:disabled):hover, .gbura .g__hand .pc:not(:disabled):focus-visible { translate: 0 -8px; }
.gbura .g__hand .pc.is-picked { translate: 0 -18px; box-shadow: 0 0 0 3px var(--p-accent), 0 14px 22px -10px rgba(0, 0, 0, .7); }
.gbura .g__hand .pc.is-picked:hover { translate: 0 -18px; }

.b__table { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 26px; width: 100%; min-height: 150px; padding: 4px 0 6px; }
.b__deck { position: relative; flex: none; width: 104px; height: 122px; }
.b__deck .pc { --w: 56px; position: absolute; }
.b__deck .b__stack {
  left: 0; top: 12px;
  box-shadow: inset 0 0 0 3px var(--v-back), inset 0 0 0 4px rgba(74, 26, 4, .55), inset 0 0 0 6px rgba(255, 244, 229, .85),
    2px 2px 0 #c95e0c, 4px 4px 0 #a64d0a, 0 10px 18px -8px rgba(0, 0, 0, .6);
}
.b__deck .b__trumpcard { left: 34px; top: 12px; transform: rotate(90deg); }
.b__deck .g__count { right: auto; bottom: auto; left: 38px; top: 2px; z-index: 1; }
.b__suit {
  position: absolute; left: 0; bottom: 0; padding: 5px 9px; border-radius: 999px; white-space: nowrap;
  font: 400 11px/1 var(--v-label); letter-spacing: .1em; text-transform: uppercase;
  color: var(--v-black); background: var(--v-paper); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .6);
}
.b__suit.is-red { color: var(--v-red); }

.b__trick { display: grid; justify-items: center; align-content: center; gap: 10px; min-width: 0; min-height: 122px; }
.b__cols { display: flex; gap: 8px; }
.b__col { --tw: 52px; position: relative; width: calc(var(--tw) + 12px); height: calc(var(--tw) * 1.45 + 28px); }
.b__col .pc { --w: var(--tw); position: absolute; left: 0; top: 0; }
.b__col .b__ans { left: 12px; top: 28px; }
.b__tlabel {
  padding: 6px 10px; border-radius: 999px; font: 400 12px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase;
  color: var(--p-fg); background: var(--v-sheet); border: 1px solid var(--p-line); animation: rise .4s var(--spring) both;
}
.b__tlabel.is-you { color: var(--p-accent); border-color: var(--p-accent); }
.b__reveal { display: flex; justify-content: center; padding-top: 8px; }
.b__reveal .pc { --w: 44px; animation: b-deal .42s var(--spring) both; animation-delay: calc(var(--i) * 140ms); }
.b__reveal .pc + .pc { margin-left: -18px; }
.b__reveal .pc.is-hit { translate: 0 -8px; box-shadow: 0 0 0 2px var(--p-accent), 0 8px 16px -8px rgba(0, 0, 0, .6); }
@keyframes b-deal { from { opacity: 0; transform: translateY(-14px) rotate(-6deg); } }
.b__tbl div { grid-template-columns: 1.3fr 1fr 1fr 1fr; }

@media (max-width: 480px) {
  .g-tabs button { padding: 9px 12px; font-size: 12px; letter-spacing: .08em; }
  .b__table { gap: 10px 12px; }
  .b__deck { width: 90px; height: 108px; }
  .b__deck .pc { --w: 46px; }
  .b__deck .b__trumpcard { left: 32px; top: 10px; }
  .b__deck .b__stack { top: 10px; }
  .b__deck .g__count { left: 30px; top: 0; }
  .b__cols { gap: 6px; }
  .b__col { --tw: 36px; width: calc(var(--tw) + 10px); height: calc(var(--tw) * 1.45 + 22px); }
  .b__col .b__ans { left: 10px; top: 22px; }
}
@media (max-width: 360px) {
  .g-tabs button { padding: 8px 9px; font-size: 11px; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .b__reveal .pc, .b__tlabel, .b__tip.is-new { animation: none; }
}

/* ===================================================================
   Domcook — палитра app/lib/core/theme.dart («тёплая бумага»),
   Playfair Display + Manrope, разметка книжной страницы. Светлая и тёмная.
   =================================================================== */
.p-fridge {
  --p-bg: #f5ead8; --p-card: #ffffff; --p-fg: #2e2b25; --p-fg2: #3f3a32; --p-muted: #6f6656; --p-line: rgba(46, 43, 37, .16);
  --p-accent: #c67139; --p-on-accent: #ffffff; --p-forest: #4a6350; --p-amber: #d9a05b; --p-tint: rgba(198, 113, 57, .16);
  --p-chip-bg: #efe7db; --p-chip-fg: #2e2b25;
  --p-font: Manrope, "Manrope Fallback", "Segoe UI", sans-serif; --p-display: "Playfair Display", "Playfair Fallback", Georgia, serif;
  --p-h-weight: 600; --p-h-track: -.01em; --p-h2-weight: 600; --p-bullet: "·";
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-fridge {
    --p-bg: #17130f; --p-card: #241d17; --p-fg: #ffffff; --p-fg2: rgba(255, 255, 255, .86); --p-muted: rgba(255, 255, 255, .7); --p-line: rgba(255, 255, 255, .14);
    --p-tint: rgba(198, 113, 57, .22); --p-chip-bg: #241d17; --p-chip-fg: #ffffff;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] .p-fridge {
  --p-bg: #17130f; --p-card: #241d17; --p-fg: #ffffff; --p-fg2: rgba(255, 255, 255, .86); --p-muted: rgba(255, 255, 255, .7); --p-line: rgba(255, 255, 255, .14);
  --p-tint: rgba(198, 113, 57, .22); --p-chip-bg: #241d17; --p-chip-fg: #ffffff;
  color-scheme: dark;
}
.p-fridge .proj__chip--stage { background: var(--p-tint); color: var(--p-accent); }
/* на тёмной странице терракотовая метка светлее — иначе не хватает контраста */
:root:not([data-theme="light"]) .p-fridge .proj__chip--stage { color: #e9a77a; }
.p-fridge h2, .fr__label {
  display: flex; align-items: center; gap: 12px;
  font: 700 12px/1 var(--p-font); letter-spacing: 1.2px; text-transform: uppercase; color: var(--p-muted);
}
.p-fridge h2::after, .fr__label::after { content: ""; flex: 1; height: 1px; background: var(--p-line); }
.p-fridge .proj__features li::before { font-size: 22px; line-height: 1; }
.fr { background: var(--p-card); border-radius: 12px; padding: 22px 20px; display: grid; gap: 16px; max-width: 460px; }
.fr__q { margin: 0; font: 600 26px/1.15 var(--p-display); }
.fr__item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid var(--p-line); }
.fr__item:last-of-type { border-bottom: 0; padding-bottom: 0; }
.fr__item img { width: 76px; height: 76px; border-radius: 4px; object-fit: cover; }
.fr__name { margin: 0; font: 600 18px/1.2 var(--p-display); }
.fr__sub { margin: 2px 0 6px; font-size: 13.5px; color: var(--p-muted); }
.fr__meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.fr__tag { padding: 3px 9px; border-radius: 999px; font-weight: 600; font-size: 12px; }
.fr__tag--all { background: rgba(74, 99, 80, .16); color: var(--p-forest); }
.fr__tag--miss { background: rgba(217, 160, 91, .2); color: #8a5a1f; }
.fr__btn { display: grid; place-items: center; height: 56px; border-radius: 999px; background: var(--p-accent); color: var(--p-on-accent); font: 700 15.5px/1 var(--p-font); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-fridge .fr__tag--all { color: #9fc0a6; } :root:not([data-theme="light"]) .p-fridge .fr__tag--miss { color: #e9bd84; } }
:root[data-theme="dark"] .p-fridge .fr__tag--all { color: #9fc0a6; }
:root[data-theme="dark"] .p-fridge .fr__tag--miss { color: #e9bd84; }

/* подбор по запасам: отмеченные продукты — «пилюли» с заливкой, список перестраивается */
.fr__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fr__chip {
  font: 600 13px/1 var(--p-font); padding: 8px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--p-line); background: transparent; color: var(--p-muted);
  transition: background .15s, color .15s, border-color .15s;
}
.fr__chip[aria-pressed="true"] { background: var(--p-tint); border-color: transparent; color: var(--p-fg); }
.fr__chip[aria-pressed="true"]::before { content: "✓ "; color: var(--p-accent); }
.fr__chip:hover { border-color: var(--p-accent); }
.fr__list { display: grid; gap: 14px; }
.fr__item { animation: fr-in .3s ease; }
@keyframes fr-in { from { opacity: .4; transform: translateY(4px); } }
.fr__more, .fr__empty { margin: 0; font-size: 13.5px; color: var(--p-muted); }
/* список покупок: кнопка у блюда и итоговый список под подбором */
.fr__add {
  margin-top: 8px; padding: 5px 11px; border-radius: 999px; cursor: pointer; font: 600 12.5px/1.2 var(--p-font);
  color: var(--p-accent); background: transparent; border: 1px solid color-mix(in srgb, var(--p-accent) 55%, transparent);
  transition: background .2s, color .2s;
}
.fr__add[aria-pressed="true"] { color: var(--p-on-accent); background: var(--p-accent); border-color: var(--p-accent); }
.fr__shop {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: 10px;
  background: var(--p-tint); border: 1px dashed color-mix(in srgb, var(--p-accent) 45%, transparent);
  animation: fr-in .3s ease;
}
.fr__shop-title { margin: 0; font: 600 16px/1.2 var(--p-display); color: var(--p-fg); }
.fr__shop-list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.fr__shop-list li { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--p-card); color: var(--p-fg); border: 1px solid var(--p-line); }
.fr__shop-actions { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.fr__shop-copy { padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer; font: 600 13px/1 var(--p-font); color: var(--p-on-accent); background: var(--p-accent); }
.fr__shop-clear { padding: 6px 0; border: 0; background: none; cursor: pointer; font: 600 13px/1 var(--p-font); color: var(--p-muted); }
.fr__count { font-variant-numeric: tabular-nums; }

/* сенсорные экраны: продукты в подборе — под палец */
@media (pointer: coarse) {
  .fr__chip { padding: 11px 14px; }
}

/* ===== «Живой телефон» ===== */
/* Экраны TUZ и Domcook в рамке телефона: разметка в index.html, листание в js/phone.js.
   Экраны собраны по исходникам приложений, и размеры здесь — dp из их кода. Экран считается
   шириной 360 dp, а --d = ширина экрана / 360, поэтому на любом телефоне картинка одна и та же. */

/* ---------- блок на странице проекта: текст и список экранов слева, телефон справа ---------- */
.ph { grid-column: 1 / -1; min-width: 0; container-type: inline-size; padding-top: clamp(28px, 4vw, 44px); border-top: 1px solid var(--p-line); }
.ph__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.ph__text { min-width: 0; display: grid; gap: 12px; align-content: center; }
.proj .ph__text h2 { margin: 0; }
.ph__title { margin: 0; font-family: var(--p-display); font-weight: var(--p-h-weight, 600); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05; letter-spacing: var(--p-h-track, 0); text-wrap: balance; }
.p-velaro .ph__title { color: var(--p-accent); font-size: clamp(38px, 5vw, 56px); line-height: .95; }
.ph__lead { margin: 0; max-width: 46ch; font-size: 15.5px; line-height: 1.55; color: var(--p-fg2, var(--p-fg)); }

.ph__toc { display: none; list-style: none; margin: 8px 0 0; padding: 0; gap: 2px; }
.ph__toc-btn {
  width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: baseline;
  padding: 10px 14px 10px 12px; border: 0; border-left: 2px solid transparent; border-radius: 0 6px 6px 0;
  background: transparent; color: var(--p-fg); font: inherit; text-align: left; cursor: pointer;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.ph__toc-btn:hover { background: color-mix(in srgb, var(--p-fg) 5%, transparent); }
.ph__toc-btn[aria-current="true"] { border-left-color: var(--p-accent); background: var(--p-chip-bg); }
.ph__toc-n { font-size: 14px; line-height: 1; color: var(--p-muted); font-variant-numeric: tabular-nums; transition: color .25s; }
.ph__toc-btn[aria-current="true"] .ph__toc-n { color: var(--p-accent); }
.ph__toc-t { display: grid; gap: 3px; min-width: 0; }
.ph__toc-t b { font-weight: 500; font-size: 16px; line-height: 1.3; }
.ph__toc-t small { font-size: 13.5px; line-height: 1.45; color: var(--p-muted); }
.p-velaro .ph__toc-n { font-family: var(--v-label); letter-spacing: .1em; }
.p-velaro .ph__toc-t b { font-weight: 400; }
.p-fridge .ph__toc-n { font-family: var(--p-display); font-weight: 600; font-size: 16px; }
.p-fridge .ph__toc-btn { border-left: 0; border-radius: 12px; padding-left: 14px; }
.p-fridge .ph__toc-btn[aria-current="true"] { background: var(--p-card); box-shadow: 0 8px 22px -14px rgba(46, 43, 37, .45); }
.p-fridge .ph__toc-t b { font-weight: 600; }

/* ---------- телефон ---------- */
.ph__stage { position: relative; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
.ph__device {
  --ph-shadow: rgba(0, 0, 0, .72);
  position: relative; width: 316px; max-width: 100%; padding: 9px; border-radius: 50px;
  background: linear-gradient(150deg, #3b4046 0%, #15171a 26%, #0b0c0e 62%, #2b2f34 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 4px #060708,
    0 40px 70px -34px var(--ph-shadow), 0 18px 34px -20px var(--ph-shadow);
}
.ph__device::before, .ph__device::after { content: ""; position: absolute; right: -2px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #121417, #3a3f45); }
.ph__device::before { top: 19%; height: 12%; }   /* громкость */
.ph__device::after { top: 35%; height: 7%; }     /* питание */
.ph__device:has(.ph__track:focus-visible) { outline: 2px solid var(--p-accent); outline-offset: 5px; }
:root[data-theme="light"] .proj.p-velaro .ph__device { --ph-shadow: rgba(8, 48, 30, .5); }
.p-fridge .ph__device { --ph-shadow: rgba(46, 43, 37, .45); }
:root[data-theme="dark"] .p-fridge .ph__device { --ph-shadow: rgba(0, 0, 0, .8); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .p-fridge .ph__device { --ph-shadow: rgba(0, 0, 0, .8); } }

.ph__screen { position: relative; overflow: hidden; border-radius: 41px; aspect-ratio: 360 / 740; container-type: inline-size; background: #000; isolation: isolate; }
.ph__screen::after {   /* фронтальная камера */
  content: ""; position: absolute; z-index: 9; top: .7%; left: 50%; width: 3.4%; aspect-ratio: 1; transform: translateX(-50%);
  border-radius: 50%; background: radial-gradient(circle at 38% 36%, #39424d 0 16%, #050607 46%); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .6); pointer-events: none;
}
.ph__track {
  display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
  outline: none; cursor: grab; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent;
}
.ph__track::-webkit-scrollbar { display: none; }
.ph.is-drag .ph__track { scroll-snap-type: none; cursor: grabbing; }
.ph__slide { --d: .82px; position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; line-height: 1.35; }
@supports (width: 1cqw) { .ph__slide { --d: calc(100cqw / 360); } }
.ph__slide :where(p, ul, ol, dl, dd) { margin: 0; }
.ph__slide :where(ul, ol) { padding: 0; list-style: none; }
.ph__slide img { max-width: none; -webkit-user-drag: none; }
.ph__slide :where(button) { -webkit-tap-highlight-color: transparent; }
/* подсказка «можно листать»: при первом показе экраны чуть уезжают влево и возвращаются */
.ph__track.is-nudge > .ph__slide { animation: ph-nudge 1.4s cubic-bezier(.45, 0, .2, 1) .2s both; }
@keyframes ph-nudge { 0%, 100% { transform: none; } 38%, 58% { transform: translateX(-15%); } }

/* ---------- под телефоном: стрелки, точки, подпись ---------- */
.ph__nav { display: flex; align-items: center; gap: 6px; }
.ph__arrow {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%;
  border: 1px solid var(--p-line); background: transparent; color: var(--p-fg); font-size: 22px; cursor: pointer;
  transition: border-color .2s, background .2s, opacity .2s;
}
.ph__arrow:hover { border-color: var(--p-accent); }
.ph__arrow[aria-disabled="true"] { opacity: .35; cursor: default; }
.ph__arrow[aria-disabled="true"]:hover { border-color: var(--p-line); }
.ph__dots { display: flex; align-items: center; padding: 0 4px; }
.ph__dot { display: grid; place-items: center; min-width: 24px; height: 32px; padding: 0 3px; border: 0; background: none; cursor: pointer; }
.ph__dot::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--p-muted); opacity: .45; transition: width .35s var(--spring, ease), opacity .25s, background .25s; }
.ph__dot[aria-current="true"]::before { width: 22px; opacity: 1; background: var(--p-accent); }
.ph__cap { margin: 0; max-width: 300px; min-height: 4.4em; text-align: center; font-size: 14px; line-height: 1.45; color: var(--p-muted); }
.ph__cap b { display: block; margin-top: 3px; font-weight: 600; font-size: 15.5px; color: var(--p-fg); }
.p-velaro .ph__cap b { font-weight: 400; }
.ph__cap-n { display: block; font-size: 12px; letter-spacing: .14em; color: var(--p-accent); font-variant-numeric: tabular-nums; }
.p-velaro .ph__cap-n { font-family: var(--v-label); }
.ph__cap-d { display: block; }
@media (pointer: coarse) {
  .ph__arrow { width: 46px; height: 46px; }
  .ph__dot { height: 44px; }
}
/* широкий блок: список экранов рядом с телефоном, подпись под телефоном остаётся только для чтения с экрана */
@container (min-width: 700px) {
  .ph__in { grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6cqw, 72px); align-items: center; }
  .ph__toc { display: grid; }
  .ph__cap { position: absolute; width: 1px; height: 1px; min-height: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- общее для экранов: строка состояния, полоска жестов, значки ---------- */
.ph-i { display: inline-block; flex: none; width: 1em; height: 1em; line-height: 0; }
.ph-i svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.ph-sb {
  position: relative; z-index: 4; display: flex; align-items: center; justify-content: space-between;
  height: calc(var(--d) * 24); padding: calc(var(--d) * 2) calc(var(--d) * 30) 0 calc(var(--d) * 34);
  font: 500 calc(var(--d) * 12.5)/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff;
}
.ph-i--sb { width: calc(var(--d) * 44); height: calc(var(--d) * 11); }
.ph-gest { position: absolute; z-index: 8; left: 50%; bottom: calc(var(--d) * 6); width: calc(var(--d) * 108); height: calc(var(--d) * 4); transform: translateX(-50%); border-radius: 99px; background: rgba(255, 255, 255, .5); pointer-events: none; }

/* ===================================================================
   Экраны TUZ — velaro_tokens.dart, velaro_parts.dart, table_view.dart, bura_table_view.dart.
   Приложение только тёмное: сукно в любой теме сайта.
   =================================================================== */
.phv {
  --vf: #08301e; --vg: #1d8850; --vt: #eff7f1; --vm: rgba(239, 247, 241, .66); --va: #ffc246; --vr: #d01f2e; --valarm: #ff8a80;
  --sym: "Segoe UI Symbol", "Noto Sans Symbols 2", "Apple Symbols", "DejaVu Sans", sans-serif;
  color: var(--vt); font-family: Roboto, "Segoe UI", sans-serif;
  background: radial-gradient(circle calc(var(--d) * 324) at 50% 36%, var(--vg) 0%, var(--vf) 78%) var(--vf);
}
.phv--top { background: radial-gradient(circle calc(var(--d) * 324) at 50% 0%, var(--vg) 0%, var(--vf) 72%) var(--vf); }
.phv-meta { font: 400 calc(var(--d) * 11)/1.25 Oswald, "Arial Narrow", sans-serif; letter-spacing: calc(var(--d) * 2.4); text-transform: uppercase; color: var(--vm); font-variant-numeric: tabular-nums; }

/* главный экран */
.phv-home { padding: calc(var(--d) * 18) calc(var(--d) * 18) 0; }
.phv-brand {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--d) * 12);
  font: 400 calc(var(--d) * 40)/1 "Tenor Sans", "Cormorant Garamond", "Cormorant Fallback", Georgia, serif; letter-spacing: .26em; color: var(--va);
}
.phv-brand__mark { flex: none; width: auto; height: calc(var(--d) * 46); rotate: -8deg; filter: drop-shadow(0 calc(var(--d) * 3) calc(var(--d) * 5) rgba(0, 0, 0, .4)); }
.phv-suits { display: flex; align-items: center; margin-top: calc(var(--d) * 7); font: 400 calc(var(--d) * 15)/1 var(--sym); }
.phv-suits::before, .phv-suits::after { content: ""; flex: 1; height: 1px; background: rgba(239, 247, 241, .35); }
.phv-suits::before { margin-right: calc(var(--d) * 10); }
.phv-suits::after { margin-left: calc(var(--d) * 10); }
.phv-suits span { padding: 0 calc(var(--d) * 4); }
.phv-suits .is-red { color: var(--valarm); }
.phv-name { display: flex; align-items: center; gap: calc(var(--d) * 10); margin-top: calc(var(--d) * 18); padding: calc(var(--d) * 10) 0; border-block: 1px solid rgba(255, 255, 255, .2); }
.phv-name__v { flex: 1; min-width: 0; font-size: calc(var(--d) * 17); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phv-name__e { font-size: calc(var(--d) * 12); color: var(--va); }
.phv-sw { display: flex; height: calc(var(--d) * 40); margin-top: calc(var(--d) * 16); border: 1px solid rgba(255, 255, 255, .22); border-radius: calc(var(--d) * 5); overflow: hidden; }
.phv-sw > * {
  flex: 1; min-width: 0; display: grid; place-items: center; padding: 0 calc(var(--d) * 4); border: 0; background: transparent;
  font: 400 calc(var(--d) * 12)/1.1 Oswald, "Arial Narrow", sans-serif; letter-spacing: calc(var(--d) * 1.4); text-transform: uppercase; text-align: center; color: var(--vm);
}
.phv-sw > * + * { border-left: 1px solid rgba(255, 255, 255, .22); }
.phv-sw .is-on, .phv-sw [aria-pressed="true"] { background: rgba(255, 194, 70, .1); color: var(--va); }
.phv-sw button { cursor: pointer; }
.phv-sec { display: flex; align-items: center; gap: calc(var(--d) * 8); margin-top: calc(var(--d) * 20); }
.phv-sec b { font: 400 calc(var(--d) * 13)/1 Oswald, sans-serif; color: var(--va); }
.phv-rooms { margin-top: calc(var(--d) * 4); }
.phv-rooms li { display: flex; align-items: center; padding: calc(var(--d) * 15) 0; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.phv-rooms li.is-dim { opacity: .55; }
.phv-room__g { flex: none; width: calc(var(--d) * 44); font: 400 calc(var(--d) * 19)/1 Oswald, sans-serif; text-transform: uppercase; color: var(--va); }
.phv-room__g--s { font-size: calc(var(--d) * 15); }
.phv-room__b { flex: 1; min-width: 0; display: grid; gap: calc(var(--d) * 2); }
.phv-room__t { display: flex; align-items: baseline; gap: calc(var(--d) * 6); min-width: 0; font-size: calc(var(--d) * 16); line-height: 1.3; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phv-room__t small { font-size: calc(var(--d) * 11); font-weight: 400; color: var(--vm); }
.phv-room__m { font-size: calc(var(--d) * 12); line-height: 1.3; color: var(--vm); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phv-room__n { flex: none; margin-left: calc(var(--d) * 8); font: 400 calc(var(--d) * 11)/1 Oswald, sans-serif; letter-spacing: calc(var(--d) * 1); text-transform: uppercase; color: var(--va); }
.phv-room__n.is-alarm { color: var(--valarm); }
.phv-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: calc(var(--d) * 14) calc(var(--d) * 18) calc(var(--d) * 20); background: linear-gradient(rgba(8, 48, 30, 0), var(--vf) 40%); }
.phv-bar__row { display: flex; gap: calc(var(--d) * 10); }
.phv-btn { display: grid; place-items: center; height: calc(var(--d) * 54); border-radius: calc(var(--d) * 5); font: 400 calc(var(--d) * 17)/1 Oswald, sans-serif; letter-spacing: calc(var(--d) * 1.6); text-transform: uppercase; white-space: nowrap; }
.phv-btn--gold { flex: 1; min-width: 0; background: var(--va); color: #231708; }
.phv-btn--line { flex: none; width: calc(var(--d) * 112); border: 1px solid rgba(255, 255, 255, .28); font-size: calc(var(--d) * 14); color: var(--vt); }
.phv-foot { margin-top: calc(var(--d) * 22); display: flex; justify-content: center; gap: calc(var(--d) * 6); font: 400 calc(var(--d) * 10)/1 Oswald, sans-serif; letter-spacing: calc(var(--d) * 2.4); text-transform: uppercase; color: var(--va); }
.phv-foot__v { color: var(--vm); }

/* шапка комнаты, шапка стола, заголовок состояния */
.phv-rh { display: flex; align-items: center; height: calc(var(--d) * 44); }
.phv-rh__b { flex: none; display: grid; place-items: center; width: calc(var(--d) * 46); height: 100%; font-size: calc(var(--d) * 20); }
.phv-rh__t { flex: 1; min-width: 0; font: 400 calc(var(--d) * 15)/1 Oswald, sans-serif; letter-spacing: calc(var(--d) * 1.6); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phv-rh__chat { flex: none; display: flex; align-items: center; gap: calc(var(--d) * 6); padding: 0 calc(var(--d) * 14); font: 400 calc(var(--d) * 11)/1 Oswald, sans-serif; letter-spacing: calc(var(--d) * 2.4); text-transform: uppercase; color: var(--va); }
.phv-rh__chat b { padding: calc(var(--d) * 2) calc(var(--d) * 5); border-radius: calc(var(--d) * 5); background: var(--va); color: #231708; font-weight: 400; font-size: calc(var(--d) * 10); letter-spacing: 0; }
.phv-th {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); align-items: center; height: calc(var(--d) * 44); padding: 0 calc(var(--d) * 14);
  font: 400 calc(var(--d) * 11)/1.2 Oswald, sans-serif; letter-spacing: calc(var(--d) * 2.4); text-transform: uppercase; color: var(--vm); white-space: nowrap;
}
.phv-th > * { overflow: hidden; text-overflow: ellipsis; }
.phv-th__c { display: flex; justify-content: center; align-items: center; gap: calc(var(--d) * 5); }
.phv-th__c i { font: normal calc(var(--d) * 15)/1 var(--sym); letter-spacing: 0; color: var(--vt); }
.phv-th__c i.is-red { color: var(--vr); }
.phv-th__r { text-align: right; }
.phv-st { display: flex; flex-direction: column; justify-content: center; align-items: center; height: calc(var(--d) * 94); padding: 0 calc(var(--d) * 16) calc(var(--d) * 8); text-align: center; }
.phv-st__t { font: 400 calc(var(--d) * 42)/1 Oswald, sans-serif; text-transform: uppercase; white-space: nowrap; color: var(--va); }
.phv-st__h { max-width: 100%; margin-top: calc(var(--d) * 4); font-size: calc(var(--d) * 14); line-height: 1.45; color: rgba(239, 247, 241, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* круг мест: точки и ширины — VelaroSeating, круг сжат по высоте под полосу (ringSqueeze) */
.phv-band { position: relative; height: calc(var(--d) * var(--bh)); }
.phv-guide { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.phv-guide ellipse { fill: none; stroke: rgba(255, 255, 255, .09); stroke-width: 1; stroke-dasharray: 6 7; }
.phv-seat {
  position: absolute; left: calc(var(--d) * (var(--x) - var(--w) / 2)); top: calc(var(--d) * (var(--y) - 31));
  width: calc(var(--d) * var(--w)); min-height: calc(var(--d) * 62); padding: calc(var(--d) * 6) calc(var(--d) * 8);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 1px solid rgba(255, 255, 255, .09); border-radius: calc(var(--d) * 5);
}
.phv-seat.is-on { border: calc(var(--d) * 1.5) solid var(--va); background: rgba(255, 194, 70, .1); }
.phv-seat__n { max-width: 100%; font: 400 calc(var(--d) * 15)/1.25 Oswald, sans-serif; letter-spacing: calc(var(--d) * .6); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[lang="en"] .phv-seat__n, :root[lang="uz"] .phv-seat__n { font-size: calc(var(--d) * 13); letter-spacing: 0; }
.phv-seat.is-on .phv-seat__n { color: var(--va); }
.phv-seat__x { margin-top: calc(var(--d) * 3); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phv-pips { display: flex; gap: calc(var(--d) * 2); margin-top: calc(var(--d) * 4); }
.phv-pips i { width: calc(var(--d) * 7); height: calc(var(--d) * 11); border-radius: calc(var(--d) * 1.5); background: #f0700f; }
.phv-mid { position: absolute; left: 50%; top: calc(var(--d) * var(--cy)); display: flex; align-items: center; gap: calc(var(--d) * 28); transform: translate(-50%, -50%) scale(var(--s, 1)); }
.phv-mid--col { flex-direction: column; gap: calc(var(--d) * 6); }
.phv-mid__col { display: flex; flex-direction: column; align-items: center; gap: calc(var(--d) * 6); }
.phv-mid__n { font-size: calc(var(--d) * 13); line-height: 1.2; }

/* карта: card_view.dart — бумага, уголок с достоинством и мастью, крупная масть в центре */
.phv-c {
  --w: 74; position: relative; display: block; flex: none; width: calc(var(--d) * var(--w)); height: calc(var(--d) * var(--w) * 1.45);
  border: 1px solid rgba(0, 0, 0, .13); border-radius: calc(var(--d) * 9); background: #fdfbf4; color: #16202a;
  box-shadow: 0 calc(var(--d) * 3) calc(var(--d) * 12) rgba(0, 0, 0, .35); overflow: hidden;
}
.phv-c.is-red { color: var(--vr); }
.phv-c > span { position: absolute; left: calc(var(--d) * var(--w) * .07); top: calc(var(--d) * var(--w) * .05); display: flex; flex-direction: column; align-items: center; }
.phv-c b { font: 800 calc(var(--d) * var(--w) * .3)/1 Roboto, Arial, sans-serif; letter-spacing: -.02em; }
.phv-c i { font: normal calc(var(--d) * var(--w) * .25)/1.1 var(--sym); }
.phv-c::after { content: attr(data-s); position: absolute; inset: 0; display: grid; place-items: center; font: calc(var(--d) * var(--w) * .54)/1 var(--sym); opacity: .9; }
.phv-c--t { border-radius: calc(var(--d) * 11); box-shadow: 0 calc(var(--d) * 14) calc(var(--d) * 40) rgba(0, 0, 0, .5); }
.phv-back {
  --w: 40; position: relative; display: block; flex: none; width: calc(var(--d) * var(--w)); height: calc(var(--d) * var(--w) * 1.45); border-radius: calc(var(--d) * 9);
  background:
    repeating-linear-gradient(45deg, rgba(74, 26, 4, .16) 0 1px, transparent 1px calc(var(--d) * var(--w) * .118)),
    repeating-linear-gradient(-45deg, rgba(74, 26, 4, .16) 0 1px, transparent 1px calc(var(--d) * var(--w) * .118)),
    #f0700f;
  box-shadow: 0 calc(var(--d) * 2) calc(var(--d) * 6) rgba(0, 0, 0, .25);
}
.phv-back::after { content: ""; position: absolute; inset: calc(var(--d) * var(--w) * .09); border: calc(var(--d) * 1.2) solid rgba(74, 26, 4, .55); border-radius: calc(var(--d) * var(--w) * .06); }
.phv-badge { display: grid; place-items: center; width: calc(var(--d) * 34); height: calc(var(--d) * 34); border-radius: 50%; border: calc(var(--d) * 2) solid var(--va); background: #fdfbf4; color: #16202a; font: calc(var(--d) * 19)/1 var(--sym); box-shadow: 0 calc(var(--d) * 2) calc(var(--d) * 5) rgba(0, 0, 0, .22); }
.phv-badge.is-red { color: var(--vr); }

/* кнопки и рука */
.phv-acts { display: flex; justify-content: center; align-items: center; height: calc(var(--d) * 66); }
.phv-fbtn { flex: none; display: inline-flex; align-items: center; gap: calc(var(--d) * 8); height: calc(var(--d) * 50); padding: 0 calc(var(--d) * 22); border-radius: calc(var(--d) * 5); background: var(--va); color: #231708; font: 400 calc(var(--d) * 16)/1 Oswald, sans-serif; letter-spacing: calc(var(--d) * 1.6); white-space: nowrap; }
.phv-fbtn .ph-i { margin-left: calc(var(--d) * -4); font-size: calc(var(--d) * 18); }
.phv-hand { position: relative; height: calc(var(--d) * 118); overflow: hidden; background: #0c4a2c; }
.phv-hand--bura { height: calc(var(--d) * 112); }
.phv-hand > .phv-c { position: absolute; left: calc(var(--d) * var(--x)); top: calc(var(--d) * 16); transition: top .15s ease, box-shadow .15s ease; }
.phv-hand > .phv-c[data-ph-card] { cursor: pointer; }
.phv-hand > .phv-c.is-sel { z-index: 1; top: calc(var(--d) * 2); border: calc(var(--d) * 2.5) solid var(--va); box-shadow: 0 calc(var(--d) * 14) calc(var(--d) * 40) rgba(0, 0, 0, .5); }

/* «Бура»: колода с козырем сбоку, кучки взятки столбиком, полоса действия */
.phv-deckc { position: absolute; left: calc(var(--d) * 6); top: calc(var(--d) * 2); width: calc(var(--d) * 58); height: calc(var(--d) * 58); }
.phv-deckc > * { position: absolute; top: 0; }
.phv-deckc > .phv-c { left: calc(var(--d) * 18); }
.phv-deckc > .phv-back { left: 0; }
.phv-pile { display: flex; flex-direction: column; align-items: center; gap: calc(var(--d) * 4); padding: calc(var(--d) * 6); border: calc(var(--d) * 2) solid transparent; border-radius: calc(var(--d) * 5); }
.phv-pile.is-hold { border-color: var(--va); background: rgba(42, 107, 69, .35); }
.phv-pile__l { font: 400 calc(var(--d) * 11)/1.2 Oswald, sans-serif; letter-spacing: calc(var(--d) * 2.4); text-transform: uppercase; white-space: nowrap; color: var(--vm); }
.phv-pile.is-hold .phv-pile__l { color: var(--va); }
.phv-fan { position: relative; display: block; width: calc(var(--d) * (44 + (var(--n) - 1) * 20.24)); height: calc(var(--d) * 63.8); }
.phv-fan > .phv-c { position: absolute; top: 0; left: calc(var(--d) * var(--i) * 20.24); }
.phv-abar { display: flex; align-items: center; gap: calc(var(--d) * 10); height: calc(var(--d) * 66); padding: 0 calc(var(--d) * 14); background: #14663c; }
.phv-abar p { flex: 1; min-width: 0; font-size: calc(var(--d) * 12); line-height: 1.45; font-weight: 500; color: var(--va); }

/* итоги партии поверх стола */
.phv-hand--back { position: absolute; left: 0; right: 0; bottom: 0; }
.phv-dim { position: absolute; z-index: 2; inset: calc(var(--d) * 68) 0 0; display: grid; place-items: center; padding: calc(var(--d) * 24); background: rgba(0, 0, 0, .54); }
.phv-res { width: 100%; padding: calc(var(--d) * 20); border-radius: calc(var(--d) * 5); background: #0c4a2c; text-align: center; }
.phv-res__t { font-size: calc(var(--d) * 24); line-height: 1.33; }
.phv-res__rows { margin-top: calc(var(--d) * 16); }
.phv-res__rows div { display: flex; justify-content: space-between; gap: calc(var(--d) * 24); padding: calc(var(--d) * 3) 0; font-size: calc(var(--d) * 14); line-height: 1.43; text-align: left; }
.phv-res__rows b { font-weight: 500; white-space: pre; font-variant-numeric: tabular-nums; }
.phv-res__rows .is-over { color: var(--valarm); }
.phv-res__note { margin-top: calc(var(--d) * 12); font-size: calc(var(--d) * 14); line-height: 1.43; }
.phv-res__k { margin-top: calc(var(--d) * 20); }
.phv-res__fig { font: 400 calc(var(--d) * 24)/1.2 Oswald, sans-serif; font-variant-numeric: tabular-nums; }
.phv-wait { display: grid; margin-top: calc(var(--d) * 14); text-align: left; }
.phv-wait div { display: flex; align-items: center; gap: calc(var(--d) * 8); padding: calc(var(--d) * 3) 0; }
.phv-wait i { flex: none; width: calc(var(--d) * 3); height: calc(var(--d) * 16); background: var(--c); }
.phv-wait span { flex: 1; min-width: 0; font-size: calc(var(--d) * 14); line-height: 1.45; color: rgba(239, 247, 241, .72); }
.phv-wait em { font: normal 400 calc(var(--d) * 11)/1 Oswald, sans-serif; letter-spacing: calc(var(--d) * 2.4); text-transform: uppercase; color: var(--c); }
.phv-tbtn { display: grid; place-items: center; min-height: calc(var(--d) * 40); margin-top: calc(var(--d) * 6); font: 400 calc(var(--d) * 16)/1 Oswald, sans-serif; letter-spacing: calc(var(--d) * 1.6); color: var(--va); }

/* правила: переключатель 108 / Бура и прокручиваемая шпаргалка */
.phv-sw--rules { margin: calc(var(--d) * 4) calc(var(--d) * 18) calc(var(--d) * 12); }
.phv-rules__body { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--d) * 124); padding: 0 calc(var(--d) * 18) calc(var(--d) * 28); overflow-x: hidden; overflow-y: auto; scrollbar-width: none; }
.phv-rules__body::-webkit-scrollbar { display: none; }
.phv-rb { margin-bottom: calc(var(--d) * 22); }
.phv-rb__t { margin-bottom: calc(var(--d) * 8); }
.phv-rb p:not(.phv-rb__t), .phv-rb dl > div { margin-bottom: calc(var(--d) * 8); font-size: calc(var(--d) * 13.5); line-height: 1.45; }
.phv-rb dl > div { display: flex; margin-bottom: calc(var(--d) * 6); }
.phv-rb dt { flex: none; width: calc(var(--d) * 108); padding-right: calc(var(--d) * 6); color: var(--va); }
.phv-rb dd { flex: 1; min-width: 0; }

/* ===================================================================
   Экраны Domcook — theme.dart, design.dart, design_additions.dart, экраны features/.
   Светлая и тёмная тема, как в приложении; здесь тема телефона следует теме сайта.
   =================================================================== */
.phf {
  --f-bg: #f5ead8; --f-card: #fff; --f-fg: #2e2b25; --f-mut: #6f6656; --f-hint: rgba(0, 0, 0, .6);
  --f-ter: #c67139; --f-for: #4a6350; --f-amb: #d9a05b; --f-chip: #efe7db; --f-ov: #d8c2b8; --f-out: #85736b; --f-ic: #52443c;
  --f-fab: #ffdbca; --f-onfab: #351000; --f-sh: rgba(46, 43, 37, .06); --f-sh2: rgba(46, 43, 37, .09);
  background: var(--f-bg); color: var(--f-fg); font-family: Manrope, "Manrope Fallback", "Segoe UI", sans-serif;
}
:root[data-theme="dark"] .phf {
  --f-bg: #17130f; --f-card: #241d17; --f-fg: #fff; --f-mut: rgba(255, 255, 255, .7); --f-hint: rgba(255, 255, 255, .6);
  --f-chip: #241d17; --f-ov: #52443c; --f-out: #a08d85; --f-ic: #d8c2b8; --f-fab: #713712; --f-onfab: #ffdbca; --f-sh: rgba(0, 0, 0, .25); --f-sh2: rgba(0, 0, 0, .35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phf {
    --f-bg: #17130f; --f-card: #241d17; --f-fg: #fff; --f-mut: rgba(255, 255, 255, .7); --f-hint: rgba(255, 255, 255, .6);
    --f-chip: #241d17; --f-ov: #52443c; --f-out: #a08d85; --f-ic: #d8c2b8; --f-fab: #713712; --f-onfab: #ffdbca; --f-sh: rgba(0, 0, 0, .25); --f-sh2: rgba(0, 0, 0, .35);
  }
}
.phf .ph-sb { position: absolute; left: 0; right: 0; top: 0; background: var(--f-bg); color: var(--f-fg); }
.phf .ph-gest { background: color-mix(in srgb, var(--f-fg) 45%, transparent); }
.phf--hero .ph-sb { background: linear-gradient(rgba(0, 0, 0, .34), rgba(0, 0, 0, 0)); color: #fff; }
.phf-scroll { position: absolute; inset: calc(var(--d) * 24) 0 0; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; outline: none; }
.phf-scroll::-webkit-scrollbar { display: none; }
.phf-scroll:focus-visible { box-shadow: inset 0 0 0 2px var(--f-ter); }
.phf--hero .phf-scroll { top: 0; }
.phf-pad { padding: 0 calc(var(--d) * 20); }

/* шапка экрана (AppBar Material 3) */
.phf-ab { display: flex; align-items: center; height: calc(var(--d) * 64); padding: 0 calc(var(--d) * 4) 0 calc(var(--d) * 16); }
.phf-ab--back { padding-left: 0; }
.phf-ab__lead { flex: none; display: grid; place-items: center; width: calc(var(--d) * 56); height: 100%; margin-right: calc(var(--d) * 16); font-size: calc(var(--d) * 24); color: var(--f-fg); }
.phf-ab__t { flex: 1; min-width: 0; font: 600 calc(var(--d) * 22)/1.27 "Playfair Display", "Playfair Fallback", Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phf-ab__a { flex: none; display: flex; color: var(--f-ic); }
.phf-ab__a .ph-i { box-sizing: content-box; padding: calc(var(--d) * 12); font-size: calc(var(--d) * 24); }

/* каталог: сводка запаса, поиск, приёмы пищи, сетка карточек */
.phf-sum { position: relative; overflow: hidden; margin: calc(var(--d) * 12) calc(var(--d) * 16) 0; padding: calc(var(--d) * 22) calc(var(--d) * 22) calc(var(--d) * 18); border-radius: calc(var(--d) * 28); background: #4a6350; color: #fff; }
.phf-sum::before { content: ""; position: absolute; right: calc(var(--d) * -46); top: calc(var(--d) * -46); width: calc(var(--d) * 170); height: calc(var(--d) * 170); border-radius: 50%; background: rgba(255, 255, 255, .07); }
.phf-sum > * { position: relative; }
.phf-sum__k { font: 600 calc(var(--d) * 10.5)/1.4 Manrope, "Manrope Fallback", sans-serif; letter-spacing: calc(var(--d) * 1.2); text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.phf-sum__row { display: flex; align-items: flex-end; gap: calc(var(--d) * 12); margin-top: calc(var(--d) * 8); }
.phf-sum__row b { font: 600 calc(var(--d) * 60)/.9 "Playfair Display", "Playfair Fallback", Georgia, serif; }
.phf-sum__row span { flex: 1; padding-bottom: calc(var(--d) * 6); font-size: calc(var(--d) * 14); line-height: 1.3; }
.phf-sum__pills { display: flex; flex-wrap: wrap; gap: calc(var(--d) * 7); margin-top: calc(var(--d) * 16); }
.phf-sum__pills span { padding: calc(var(--d) * 5) calc(var(--d) * 11); border-radius: 99px; background: #d9a05b; color: #2e2b25; font: 700 calc(var(--d) * 11.5)/1.3 Manrope, "Manrope Fallback", sans-serif; }
.phf-search { display: flex; align-items: center; gap: calc(var(--d) * 12); height: calc(var(--d) * 56); margin: calc(var(--d) * 4) calc(var(--d) * 20) calc(var(--d) * 12); padding: 0 calc(var(--d) * 16) 0 calc(var(--d) * 12); border-radius: 99px; background: var(--f-card); color: var(--f-mut); font-size: calc(var(--d) * 16); }
.phf-search .ph-i { font-size: calc(var(--d) * 24); color: var(--f-ic); }
.phf-chips { display: flex; align-items: center; gap: calc(var(--d) * 8); height: calc(var(--d) * 40); padding: 0 calc(var(--d) * 20); overflow: hidden; white-space: nowrap; }
.phf-chip { flex: none; display: inline-flex; align-items: center; gap: calc(var(--d) * 8); height: calc(var(--d) * 32); padding: 0 calc(var(--d) * 12) 0 calc(var(--d) * 9); border-radius: calc(var(--d) * 12); background: var(--f-chip); font-size: calc(var(--d) * 13); font-weight: 500; }
.phf-chip .ph-i { font-size: calc(var(--d) * 16); color: var(--f-ter); }
.phf-dot { flex: none; display: inline-block; width: calc(var(--d) * 10); height: calc(var(--d) * 10); border-radius: 50%; background: var(--c); }
.phf-sec { display: flex; align-items: flex-end; gap: calc(var(--d) * 8); margin-top: calc(var(--d) * 16); margin-bottom: calc(var(--d) * 12); padding-bottom: calc(var(--d) * 8); border-bottom: 1px solid var(--f-ov); font: 600 calc(var(--d) * 14)/1.43 Manrope, "Manrope Fallback", sans-serif; letter-spacing: calc(var(--d) * 1.2); text-transform: uppercase; color: var(--f-mut); }
.phf-sec > span { flex: 1; min-width: 0; }
.phf-sec small { font-size: calc(var(--d) * 12); font-weight: 400; letter-spacing: 0; }
.phf-sec--m { margin-inline: calc(var(--d) * 20); }
.phf-sec--first { margin-top: calc(var(--d) * 28); }
.phf-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: calc(var(--d) * 16) calc(var(--d) * 12); padding: 0 calc(var(--d) * 20) calc(var(--d) * 112); }
.phf-card { display: block; overflow: hidden; border-radius: calc(var(--d) * 24); background: var(--f-card); box-shadow: 0 calc(var(--d) * 2) calc(var(--d) * 8) var(--f-sh); }
.phf-card__img { position: relative; display: block; aspect-ratio: 4 / 3; }
.phf-card__img img, .phf-match img, .phf-hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phf-badge { position: absolute; left: calc(var(--d) * 8); top: calc(var(--d) * 8); padding: calc(var(--d) * 4) calc(var(--d) * 9); border-radius: 99px; background: #ede4da; color: #6f6656; font: 700 calc(var(--d) * 10.5)/1.3 Manrope, "Manrope Fallback", sans-serif; }
.phf-badge.is-ready { background: #dce6df; color: #4a6350; }
.phf-card__b { display: grid; padding: calc(var(--d) * 12) calc(var(--d) * 12) calc(var(--d) * 16); }
.phf-card__t { font: 600 calc(var(--d) * 16)/1.25 "Playfair Display", "Playfair Fallback", Georgia, serif; }
.phf-card__s { margin-top: calc(var(--d) * 2); font-size: calc(var(--d) * 11.5); line-height: 1.45; color: var(--f-hint); }
.phf-card__m { margin-top: calc(var(--d) * 4); font-size: calc(var(--d) * 11.5); line-height: 1.45; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.phf-card__n { margin-top: calc(var(--d) * 2); font-size: calc(var(--d) * 11); line-height: 1.45; color: var(--f-hint); white-space: pre; overflow: hidden; text-overflow: ellipsis; }

/* плавающий док с камерой (bottom_dock.dart) и кнопка «Добавить» */
.phf-dock { position: absolute; z-index: 3; left: calc(var(--d) * 16); right: calc(var(--d) * 16); bottom: calc(var(--d) * 12); height: calc(var(--d) * 76); }
.phf-dock__pill { position: absolute; left: 0; right: 0; bottom: 0; display: flex; height: calc(var(--d) * 64); padding: 0 calc(var(--d) * 8); border-radius: 99px; background: var(--f-card); box-shadow: 0 calc(var(--d) * 6) calc(var(--d) * 18) var(--f-sh2); }
.phf-dock__pill > span { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--d) * 3); color: var(--f-out); font: 700 calc(var(--d) * 9.5)/1.1 Manrope, "Manrope Fallback", sans-serif; white-space: nowrap; }
.phf-dock__pill .ph-i { font-size: calc(var(--d) * 23); }
.phf-dock__pill .is-on { color: var(--f-ter); }
.phf-dock__pill > .phf-dock__gap { flex: 0 0 calc(var(--d) * 72); }
.phf-dock__cam { position: absolute; left: 50%; bottom: calc(var(--d) * 26); display: grid; place-items: center; width: calc(var(--d) * 64); height: calc(var(--d) * 64); transform: translateX(-50%); border: calc(var(--d) * 4) solid var(--f-bg); border-radius: 50%; background: var(--f-ter); color: #fff; font-size: calc(var(--d) * 27); box-shadow: 0 calc(var(--d) * 6) calc(var(--d) * 18) var(--f-sh2); }
.phf-fab { position: absolute; z-index: 3; right: calc(var(--d) * 16); bottom: calc(var(--d) * 104); display: inline-flex; align-items: center; gap: calc(var(--d) * 8); height: calc(var(--d) * 56); padding: 0 calc(var(--d) * 20) 0 calc(var(--d) * 16); border-radius: calc(var(--d) * 16); background: var(--f-fab); color: var(--f-onfab); font: 600 calc(var(--d) * 14)/1 Manrope, "Manrope Fallback", sans-serif; letter-spacing: calc(var(--d) * .6); box-shadow: 0 calc(var(--d) * 3) calc(var(--d) * 8) rgba(0, 0, 0, .18), 0 calc(var(--d) * 1) calc(var(--d) * 3) rgba(0, 0, 0, .12); }
.phf-fab .ph-i { font-size: calc(var(--d) * 24); }

/* запасы: счётчики, «скоро испортится», продукты по полкам */
.phf-counts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(var(--d) * 12); margin-top: calc(var(--d) * 8); }
.phf-count { padding: calc(var(--d) * 16); border-radius: calc(var(--d) * 12); background: var(--f-card); }
.phf-count b { display: block; font: 700 calc(var(--d) * 28)/1.15 "Playfair Display", "Playfair Fallback", Georgia, serif; }
.phf-count b.is-forest { color: var(--f-for); }
.phf-count b.is-amber { color: var(--f-amb); }
.phf-count span { display: block; margin-top: calc(var(--d) * 2); font-size: calc(var(--d) * 12); line-height: 1.45; color: var(--f-mut); }
.phf-exp { display: flex; align-items: flex-start; gap: calc(var(--d) * 10); margin-top: calc(var(--d) * 16); padding: calc(var(--d) * 14); border-radius: calc(var(--d) * 14); background: rgba(198, 113, 57, .1); font-size: calc(var(--d) * 12); line-height: 1.45; color: var(--f-mut); }
.phf-exp > .ph-i { font-size: calc(var(--d) * 18); color: var(--f-fg); }
.phf-exp p + p { margin-top: calc(var(--d) * 4); }
.phf-exp .phf-exp__t { font: 600 calc(var(--d) * 14)/1.43 Manrope, "Manrope Fallback", sans-serif; letter-spacing: calc(var(--d) * 1.2); }
.phf-list li { display: flex; align-items: center; gap: calc(var(--d) * 16); min-height: calc(var(--d) * 56); padding: calc(var(--d) * 8) calc(var(--d) * 4); }
.phf-list li > span { flex: 1; min-width: 0; display: grid; }
.phf-list b { font-weight: 400; font-size: calc(var(--d) * 16); line-height: 1.5; }
.phf-list small { font-size: calc(var(--d) * 12); line-height: 1.45; color: var(--f-hint); }
.phf-list small.is-exp { color: var(--f-ter); }
.phf-list em { flex: none; font-style: normal; font-weight: 600; font-size: calc(var(--d) * 14); }
.phf-list--last { padding-bottom: calc(var(--d) * 96); }

/* «почти хватает»: карточки подбора */
.phf-matches { display: grid; gap: calc(var(--d) * 10); padding: calc(var(--d) * 16); }
.phf-match { display: flex; align-items: flex-start; gap: calc(var(--d) * 12); padding: calc(var(--d) * 12); border-radius: calc(var(--d) * 12); background: var(--f-card); }
.phf-match img { flex: none; width: calc(var(--d) * 72); height: calc(var(--d) * 72); border-radius: calc(var(--d) * 12); }
.phf-match > span { flex: 1; min-width: 0; display: grid; font-size: calc(var(--d) * 12); line-height: 1.45; color: var(--f-mut); }
.phf-match b { margin-bottom: calc(var(--d) * 4); font: 600 calc(var(--d) * 14)/1.43 Manrope, "Manrope Fallback", sans-serif; color: var(--f-fg); }
.phf-match .is-ter { color: var(--f-ter); }

/* рецепт: снимок, лист с названием, КБЖУ, состав */
.phf-hero { position: relative; height: calc(var(--d) * 320); }
.phf-rb { position: absolute; top: calc(var(--d) * 36); display: grid; place-items: center; width: calc(var(--d) * 40); height: calc(var(--d) * 40); padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #2e2b25; font-size: calc(var(--d) * 20); }
.phf-rb--back { left: calc(var(--d) * 16); }
.phf-rb--share { right: calc(var(--d) * 60); }
.phf-rb--fav { right: calc(var(--d) * 12); cursor: pointer; }
.phf-rb__on, .phf-rb--fav[aria-pressed="true"] .phf-rb__off { display: none; }
.phf-rb--fav[aria-pressed="true"] .phf-rb__on { display: inline-block; color: #c67139; }
.phf-rb--fav[aria-pressed="true"] { animation: ph-pop .35s var(--spring, ease); }
@keyframes ph-pop { 50% { transform: scale(1.18); } }
.phf-sheet { position: relative; margin: calc(var(--d) * -28) 0 calc(var(--d) * 28); padding: calc(var(--d) * 20) calc(var(--d) * 22) calc(var(--d) * 8); border-radius: calc(var(--d) * 34) calc(var(--d) * 34) 0 0; background: var(--f-bg); }
.phf-sheet__k { display: flex; align-items: center; gap: calc(var(--d) * 8); font: 600 calc(var(--d) * 11)/1.45 Manrope, "Manrope Fallback", sans-serif; letter-spacing: calc(var(--d) * 1.2); text-transform: uppercase; color: var(--f-mut); }
.phf-sheet__k .phf-dot { width: calc(var(--d) * 7); height: calc(var(--d) * 7); }
.phf-sheet__t { margin-top: calc(var(--d) * 8); font: 600 calc(var(--d) * 30)/1.15 "Playfair Display", "Playfair Fallback", Georgia, serif; }
.phf-sheet__s { margin-top: calc(var(--d) * 6); font-size: calc(var(--d) * 14); line-height: 1.45; }
.phf-pills { display: flex; flex-wrap: wrap; gap: calc(var(--d) * 8); margin-top: calc(var(--d) * 16); }
.phf-pill { padding: calc(var(--d) * 7) calc(var(--d) * 12); border-radius: 99px; background: #ede4da; color: #6f6656; font: 700 calc(var(--d) * 12)/1.3 Manrope, "Manrope Fallback", sans-serif; }
.phf-pill--time { background: #fff; box-shadow: 0 calc(var(--d) * 2) calc(var(--d) * 8) rgba(46, 43, 37, .06); }
.phf-pad--rec { padding-top: calc(var(--d) * 16); padding-bottom: calc(var(--d) * 28); }
.phf-nut { padding: calc(var(--d) * 14) calc(var(--d) * 16); border-radius: calc(var(--d) * 12); background: var(--f-card); }
.phf-nut__k { display: flex; align-items: baseline; gap: calc(var(--d) * 4); }
.phf-nut__k b { font: 700 calc(var(--d) * 24)/1.2 "Playfair Display", "Playfair Fallback", Georgia, serif; }
.phf-nut__k span { font-size: calc(var(--d) * 12); color: var(--f-mut); }
.phf-nut__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: calc(var(--d) * 8); font-size: calc(var(--d) * 12); line-height: 1.45; color: var(--f-mut); }
.phf-nut__row b { display: block; margin-top: calc(var(--d) * 2); font: 600 calc(var(--d) * 16)/1.5 Manrope, "Manrope Fallback", sans-serif; color: var(--f-fg); }
.phf-st { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(var(--d) * 8); margin-top: calc(var(--d) * 28); padding-bottom: calc(var(--d) * 8); border-bottom: 1px solid var(--f-ov); font: 600 calc(var(--d) * 14)/1.43 Manrope, "Manrope Fallback", sans-serif; letter-spacing: calc(var(--d) * 1.2); text-transform: uppercase; color: var(--f-mut); }
.phf-stepper { flex: none; display: inline-flex; align-items: center; padding: calc(var(--d) * 4); border-radius: 99px; background: var(--f-card); color: var(--f-fg); box-shadow: 0 calc(var(--d) * 2) calc(var(--d) * 8) var(--f-sh); text-transform: none; letter-spacing: 0; }
.phf-stepper .ph-i { box-sizing: content-box; padding: calc(var(--d) * 5.5); border-radius: 50%; font-size: calc(var(--d) * 17); opacity: .75; }
.phf-stepper .ph-i:last-child { background: #c67139; color: #fff; opacity: 1; }
.phf-stepper span { min-width: calc(var(--d) * 74); text-align: center; font: 700 calc(var(--d) * 12.5)/1 Manrope, "Manrope Fallback", sans-serif; }
.phf-ing { margin-top: calc(var(--d) * 8); }
.phf-ing li { display: flex; align-items: center; gap: calc(var(--d) * 11); margin-bottom: calc(var(--d) * 8); padding: calc(var(--d) * 11) calc(var(--d) * 13); border-radius: calc(var(--d) * 18); background: var(--f-card); box-shadow: 0 calc(var(--d) * 2) calc(var(--d) * 8) var(--f-sh); font-size: calc(var(--d) * 14); line-height: 1.45; }
.phf-ing li > .ph-i { box-sizing: content-box; padding: calc(var(--d) * 5.5); border-radius: 50%; background: #dce6df; color: #4a6350; font-size: calc(var(--d) * 15); }
.phf-ing li.is-miss > .ph-i { background: #f0dfcb; color: #c67139; }
.phf-ing li > span { flex: 1; min-width: 0; }
.phf-ing li > b { flex: none; font-size: calc(var(--d) * 13.5); font-weight: 700; white-space: nowrap; }
.phf-ing li.is-pantry > span, .phf-ing li.is-pantry > b { opacity: .55; }
.phf-ing--tail { margin-top: calc(var(--d) * -22); }

/* приготовление: шаги отмечаются касанием, оценка, кнопки */
.phf-pad--steps { padding-bottom: calc(var(--d) * 40); }
.phf-steps { margin-top: calc(var(--d) * 8); }
.phf-stepb { display: flex; align-items: flex-start; gap: calc(var(--d) * 12); width: 100%; padding: calc(var(--d) * 9) 0; border: 0; border-radius: calc(var(--d) * 12); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.phf-stepb__n { flex: none; display: grid; place-items: center; width: calc(var(--d) * 26); height: calc(var(--d) * 26); border-radius: 50%; background: rgba(198, 113, 57, .12); color: #c67139; font: 500 calc(var(--d) * 12)/1 Manrope, "Manrope Fallback", sans-serif; transition: background .2s, color .2s; }
.phf-stepb__n .ph-i { display: none; font-size: calc(var(--d) * 15); }
.phf-stepb[aria-pressed="true"] .phf-stepb__n { background: #c67139; color: #fff; }
.phf-stepb[aria-pressed="true"] .phf-stepb__n span { display: none; }
.phf-stepb[aria-pressed="true"] .phf-stepb__n .ph-i { display: inline-block; }
.phf-stepb__t { flex: 1; min-width: 0; font-size: calc(var(--d) * 14); line-height: 1.4; transition: color .2s; }
.phf-stepb[aria-pressed="true"] .phf-stepb__t { color: var(--f-hint); text-decoration: line-through; }
.phf-stepb:focus-visible { outline-offset: -2px; }
.phf-rate { display: flex; align-items: center; margin-top: calc(var(--d) * 28); font: 600 calc(var(--d) * 14)/1.43 Manrope, "Manrope Fallback", sans-serif; }
.phf-rate > span:first-child { flex: 1; }
.phf-stars { display: flex; gap: calc(var(--d) * 1); color: var(--f-ov); font-size: calc(var(--d) * 30); }
.phf-acts { display: flex; align-items: center; gap: calc(var(--d) * 8); margin-top: calc(var(--d) * 28); }
.phf-btn { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--d) * 8); border-radius: 99px; font: 700 calc(var(--d) * 15.5)/1 Manrope, "Manrope Fallback", sans-serif; white-space: nowrap; }
.phf-btn .ph-i { font-size: calc(var(--d) * 18); }
.phf-btn--fill { height: calc(var(--d) * 56); background: #c67139; color: #fff; }
.phf-btn--line { height: calc(var(--d) * 50); border: 1px solid color-mix(in srgb, var(--f-mut) 35%, transparent); font-weight: 600; font-size: calc(var(--d) * 14); color: var(--f-fg); }

@media (prefers-reduced-motion: reduce) {
  .ph__track.is-nudge > .ph__slide, .phf-rb--fav[aria-pressed="true"] { animation: none; }
}

/* ===================================================================
   TUZ: столы на троих и четверых, разбор кона, достижения
   =================================================================== */
/* соперники (и партнёр) сверху: вдвоём — одна плашка, втроём и вчетвером — ряд плашек */
.g__opps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; }
.g__opp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; }
.g__opps.is-many .g__opp { flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 7px 10px; font-size: 11px; letter-spacing: .08em; }
.g__opps.is-many .g__opp-name { max-width: 14ch; }
.g__opps.is-many .g__backs { min-height: 18px; }
.g__opps.is-many .g__backs i { width: 12px; height: 18px; margin-left: -7px; }
/* лица компьютеров (js/tables.js): портрет-медальон на плашке, настроение — data-mood; точки над плечом — «думает» */
.aks { position: relative; flex: none; width: 30px; height: 30px; }
.aks__face { display: block; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; overflow: hidden; background: #f7f2e5; border: 1.5px solid #1b4d9b; }
.aks__face svg { display: block; width: 100%; height: 100%; }
.aks .aks-m { display: none; }
.aks[data-mood="calm"] .aks-calm, .aks[data-mood="happy"] .aks-happy, .aks[data-mood="sad"] .aks-sad, .aks[data-mood="think"] .aks-think { display: inline; }
.aks__dots { position: absolute; right: -9px; top: -5px; display: none; gap: 2px; }
.aks[data-mood="think"] .aks__dots { display: flex; }
.aks__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--p-fg); animation: aks-dot 1.2s ease-in-out infinite; }
.aks__dots i:nth-child(2) { animation-delay: .2s; }
.aks__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes aks-dot { 0%, 70%, 100% { opacity: .25; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-2px); } }
.g__opps.is-many .aks { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) { .aks__dots i { animation: none; opacity: .8; } }
.g__opp.is-mate { border-style: dashed; border-color: var(--v-chip-line); }
.g__opp.is-mate.is-active { border-style: solid; border-color: var(--p-accent); }
.g__opp.is-mate .g__opp-count { color: var(--p-accent); }

/* взятка вчетвером и разбор кона: кто как сходил — строками */
.b__rows { display: grid; gap: 6px; width: min(100%, 340px); }
.b__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; padding: 4px 8px; border-radius: 6px; border: 1px solid transparent; }
.b__row.is-best { border-color: var(--p-accent); background: rgba(255, 194, 70, .08); }
.b__row-who {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
  font: 400 11px/1.2 var(--v-label); letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted);
}
.b__row.is-best .b__row-who { color: var(--p-accent); }
.b__row-cards { display: flex; flex: none; gap: 4px; }
.b__row-cards .pc { --w: 34px; border-radius: 5px; }
.b__row-cards .pc b { top: 3px; left: 4px; font-size: 11px; }

/* окна поверх стола: несколько кнопок в ряд */
.g__over-acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; }
.g__replay { z-index: 6; background: rgba(8, 48, 30, .97); }
.g__replay-box { width: min(100%, 380px); max-width: none; }
.g__replay-box .b__rows { width: 100%; }

/* ---------- «Бура» за столом «каждый у себя» (js/tables.js, RING) ----------
   Игроки сидят по кругу, вы — внизу; каждый кладёт карты перед собой. Плашки, кучки карт и колода стоят по процентам
   (--x, --y) внутри стола постоянной высоты — стол не прыгает по ходу партии. --lw — ширина карты на столе, --dw — колоды */
.b__table.is-ring {
  --lw: 46px; --dw: 42px;
  position: relative; isolation: isolate; display: block; width: min(100%, 420px); height: 290px; min-height: 0; margin-inline: auto; padding: 0;
}
.b__table.is-ring[data-n="4"] { --lw: 40px; --dw: 38px; height: 300px; }
.b__table.is-ring[data-n="6"] { --lw: 34px; --dw: 34px; height: 340px; }
.is-ring .b__seats, .is-ring .b__trick { position: absolute; inset: 0; display: block; min-height: 0; pointer-events: none; }
.is-ring .b__seats { z-index: 1; }
.is-ring .b__trick { z-index: 2; }
.is-ring .b__seat, .is-ring .b__lay, .is-ring .b__deck { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; }
.is-ring [data-side="l"] { left: 0; translate: 0 -50%; }
.is-ring [data-side="r"] { left: auto; right: 0; translate: 0 -50%; }

/* колода в левом нижнем углу стола: рубашкой вверх, под ней поперёк козырь, под колодой — «Козырь ♦» */
.is-ring .b__deck { width: calc(var(--dw) * 1.86); height: calc(var(--dw) * 1.66 + 24px); }
.is-ring .b__deck .pc { --w: var(--dw); }
.is-ring .b__deck .b__stack { left: 0; top: calc(var(--dw) * .2); }
.is-ring .b__deck .b__trumpcard { left: calc(var(--dw) * .6); top: calc(var(--dw) * .2); }
.is-ring .b__deck .g__count { left: calc(var(--dw) * .62); top: 0; }
.is-ring .b__suit { left: 50%; translate: -50% 0; padding: 4px 8px; font-size: 10px; }
.is-ring .b__deck[data-side="l"] .b__suit { left: 0; translate: none; }
.is-ring .b__reveal { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 0; }

/* кучка карт игрока: внахлёст, чуть веером; скинутое — рубашкой */
.b__lay { display: flex; align-items: flex-end; }
.b__lay .pc { --w: var(--lw); flex: none; rotate: calc(var(--i, 0) * 5deg); transform-origin: 50% 85%; transition: box-shadow .3s; }
.b__lay .pc + .pc { margin-left: calc(var(--lw) * -.46); }
.b__lay.is-drop .pc + .pc { margin-left: calc(var(--lw) * -.72); }   /* рубашки — плотнее: на них смотреть нечего */
.b__lay .pc b { top: 3px; left: 4px; }
.b__lay.is-drop .pc { filter: brightness(.9); }
.b__lay.is-hold .pc:not(.pc--back) { box-shadow: 0 0 0 1.5px var(--p-accent), 0 6px 12px -6px rgba(0, 0, 0, .6); }
.b__lay.is-best .pc { box-shadow: 0 0 0 2px var(--p-accent), 0 0 16px rgba(242, 193, 78, .6); }
.b__lay.is-best { animation: b-best .5s var(--spring) both; }
@keyframes b-best { 40% { scale: 1.08; } }
.b__gain {
  position: absolute; right: -12px; top: -12px; z-index: 5; padding: 4px 7px; border-radius: 999px;
  font: 400 12px/1 var(--v-label); letter-spacing: .04em; font-variant-numeric: tabular-nums;
  color: #2b0a10; background: var(--p-accent); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .7);
  animation: b-gain .5s var(--spring) .2s both;
}
@keyframes b-gain { from { opacity: 0; transform: translateY(8px) scale(.5); } }
.b__lay.b__sweep { z-index: 0; pointer-events: none; animation: none; }

/* плашки за столом: в столбик и узкие; напротив вас — в строку, под ней его карты */
.is-ring .b__seat {
  flex-direction: column; gap: 4px; width: max-content; max-width: 84px; padding: 6px 8px;
  font-size: 10px; letter-spacing: .06em; text-align: center;
}
.b__seat-info { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.is-ring .b__seat .g__opp-name { max-width: 100%; }
.is-ring .b__seat .aks { width: 26px; height: 26px; }
.is-ring .b__seat .g__backs { min-height: 16px; padding-left: 7px; }
.is-ring .b__seat .g__backs i { width: 11px; height: 16px; margin-left: -7px; }
.is-ring .b__seat.is-top, .is-ring .b__seat.is-top .b__seat-info { flex-direction: row; gap: 8px; max-width: none; }
.is-ring .b__seat.is-top { padding: 5px 10px; }
.is-ring[data-n="6"] .b__lay .pc + .pc { margin-left: calc(var(--lw) * -.56); }
.is-ring[data-n="6"] .b__lay.is-drop .pc + .pc { margin-left: calc(var(--lw) * -.76); }
.is-ring[data-n="6"] .b__seat { max-width: 70px; padding: 5px 6px; font-size: 9.5px; letter-spacing: .04em; }
.is-ring[data-n="6"] .b__seat .aks { width: 22px; height: 22px; }
.is-ring[data-n="6"] .b__seat.is-top { max-width: none; }
.b__seat.is-win, .g__me.is-win { border-color: var(--p-accent); box-shadow: 0 0 0 1px var(--p-accent), 0 0 18px rgba(242, 193, 78, .5); }
.b__seat.is-out { opacity: .45; filter: grayscale(.7); }

/* узкий телефон: стол чуть ниже, карты меньше */
@media (max-width: 360px) {
  .b__table.is-ring { --lw: 42px; --dw: 38px; height: 280px; }
  .b__table.is-ring[data-n="4"] { --lw: 36px; --dw: 34px; height: 290px; }
  .b__table.is-ring[data-n="6"] { --lw: 31px; --dw: 31px; height: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  .b__lay.is-best, .b__gain { animation: none; }
}

/* заход: золотая точка в углу кучки того, кто начал взятку */
.b__lay.is-lead::after {
  content: ""; position: absolute; z-index: 4; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffeab0, var(--p-accent) 62%);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35), 0 0 8px rgba(242, 193, 78, .7);
}

/* кольцо-таймер вокруг портрета компьютера, пока он думает (js/tables.js, turnRing): замыкается за время раздумья */
.g__ring { position: absolute; inset: -4px; pointer-events: none; }
.g__ring svg { display: block; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.g__ring circle {
  fill: none; stroke: var(--p-accent); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100;
  filter: drop-shadow(0 0 3px rgba(242, 193, 78, .6)); animation: g-ring var(--think, 900ms) linear forwards;
}
@keyframes g-ring { to { stroke-dashoffset: 0; } }

/* реплики компьютеров: облачко у плашки, в слое поверх карт; хвостик — к плашке */
.is-ring .b__talk { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.b__say {
  position: absolute; translate: 0 -50%; width: max-content; max-width: 128px; padding: 6px 10px; border-radius: 12px;
  font: 500 12px/1.25 Roboto, "Segoe UI", sans-serif; letter-spacing: 0; text-transform: none; color: #2b1a10; background: #fff8ec;
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, .7); transform-origin: 0 50%; animation: b-say 2.2s ease both;
}
.b__say::before {
  content: ""; position: absolute; left: -4px; top: 50%; width: 9px; height: 9px; border-radius: 2px;
  background: inherit; translate: 0 -50%; rotate: 45deg;
}
.b__say[data-tail="r"] { translate: -100% -50%; transform-origin: 100% 50%; }
.b__say[data-tail="r"]::before { left: auto; right: -4px; }
.b__say[data-tail="c"] { translate: -50% 0; transform-origin: 50% 0; }
.b__say[data-tail="c"]::before { left: 50%; top: -3px; translate: -50% 0; }
@keyframes b-say { 0% { opacity: 0; transform: scale(.5); } 10% { opacity: 1; transform: scale(1.06); } 16% { transform: scale(1); } 84% { opacity: 1; } 100% { opacity: 0; } }
@keyframes b-say-calm { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }

/* четыре козыря: вспышка над столом, кучка объявившего — широким веером */
.b__flash {
  position: absolute; z-index: 7; left: 50%; top: 46%; translate: -50% -50%; display: grid; justify-items: center; gap: 5px;
  padding: 10px 18px; border-radius: 14px; background: rgba(24, 8, 6, .84); border: 1px solid var(--p-accent);
  box-shadow: 0 0 0 1px rgba(242, 193, 78, .35), 0 0 42px rgba(242, 193, 78, .55); pointer-events: none;
  animation: b-flash 1.7s var(--spring) both;
}
.b__flash b { font: 400 26px/1 var(--v-label); letter-spacing: .08em; text-transform: uppercase; color: var(--p-accent); white-space: nowrap; }
.b__flash span { font: 400 11px/1 var(--v-label); letter-spacing: .14em; text-transform: uppercase; color: #fbeee0; }
@keyframes b-flash { 0% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.08); } 28% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.04); } }
.b__lay.is-four { animation: b-fan .6s var(--spring) both; }
.b__lay.is-four .pc { rotate: calc(var(--i, 0) * 10deg); box-shadow: 0 0 0 1.5px var(--p-accent), 0 8px 16px -8px rgba(0, 0, 0, .6); }
.b__lay.is-four .pc + .pc { margin-left: calc(var(--lw) * -.22); }
@keyframes b-fan { from { scale: .7; } }

/* разбор кона за круглым столом: кучки ложатся по очереди хода со стороны игрока, скинутое — лицом, но блёкло;
   под кучкой — кто что сделал; взявший загорается последним */
.b__table.is-ring.b__rring { --lw: 40px; width: 100%; height: 300px; margin: 0; }
.b__table.is-ring.b__rring[data-n="2"] { --lw: 46px; height: 270px; }
.b__table.is-ring.b__rring[data-n="6"] { --lw: 34px; height: 330px; }
.b__rring .b__lay { animation: b-rin .45s var(--spring) both; animation-delay: calc(var(--k, 0) * 220ms); }
@keyframes b-rin { from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)) scale(.8); } }
.b__rring .b__lay.is-drop .pc { filter: saturate(.5) brightness(.82); }
.b__rring .b__lay.is-drop .pc + .pc { margin-left: calc(var(--lw) * -.46); }
.b__rring .b__lay.is-best .pc { animation: b-glow .5s ease var(--kd, 0s) both; }
@keyframes b-glow { from { box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55); } }
.b__rring .b__gain { animation-delay: var(--kd, 0s); }
.b__lay-who {
  position: absolute; left: 50%; top: calc(100% + 3px); translate: -50% 0; width: max-content; max-width: 112px;
  font: 400 10px/1.15 var(--v-label); letter-spacing: .06em; text-transform: uppercase; color: var(--p-muted); text-align: center;
}
.b__lay.is-best .b__lay-who { color: var(--p-accent); }

/* записка со счётом в итогах кона: листок в клетку, цифры от руки, прошлые зачёркнуты, вылетевшая пара обведена */
.b__sheet {
  --cols: 2;
  position: relative; width: min(100%, 250px); padding: 12px 14px 20px; rotate: -1.2deg; border-radius: 3px; color: #1b3f7a;
  background-color: #fbf8ef;
  background-image: linear-gradient(rgba(42, 122, 176, .2) 1px, transparent 1px), linear-gradient(90deg, rgba(42, 122, 176, .2) 1px, transparent 1px);
  background-size: 14px 14px; box-shadow: 0 12px 22px -12px rgba(0, 0, 0, .8);
  font: 600 19px/1.1 "Caveat", "Segoe Print", "Comic Sans MS", cursive;
}
.b__sheet::before {   /* полоска скотча сверху */
  content: ""; position: absolute; top: -7px; left: 50%; width: 46px; height: 14px; translate: -50% 0; rotate: 3deg;
  background: rgba(255, 236, 170, .78); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.b__sheet-row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 6px; align-items: center; text-align: center; padding: 1px 0; }
.b__sheet-head { font-size: 16px; color: #7a2a22; border-bottom: 1.5px solid rgba(122, 42, 34, .55); margin-bottom: 3px; padding-bottom: 3px; }
.b__sheet-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.b__sheet-row:not(.b__sheet-head):not(.is-now) span { text-decoration: line-through; text-decoration-thickness: 1.5px; opacity: .55; }
.b__sheet-row.is-now { font-size: 24px; }
.b__sheet .b__sheet-row span.is-out { justify-self: center; padding: 0 7px; border: 2px solid #c0392b; border-radius: 50%; color: #c0392b; text-decoration: none; opacity: 1; }
.b__sheet .b__sheet-row span.is-gone { text-decoration: none; opacity: .35; }
.b__sheet-lim { position: absolute; right: 9px; bottom: 3px; font-size: 14px; color: #7a2a22; }

/* «Вернуть ход» у новичка — тихая ссылка рядом с кнопками хода */
.g__actions .g__undo { align-self: center; padding: 8px 4px; font-size: 11px; letter-spacing: .1em; }

@media (prefers-reduced-motion: reduce) {
  .g__ring circle { animation: none; stroke-dashoffset: 0; }
  .b__say { animation-name: b-say-calm; }
  .b__lay.is-four, .b__rring .b__lay, .b__rring .b__lay.is-best .pc { animation: none; }
}

/* ---------- полка с пиалами под столом (js/tables.js, paintPiala): победа — пиала, десять побед — чайник ---------- */
.piala { display: grid; justify-items: center; gap: 6px; width: min(100%, 384px); margin: 16px auto 0; }
.piala__shelf { position: relative; display: flex; align-items: flex-end; gap: 8px; width: 100%; padding: 0 12px 7px; }
.piala__shelf::after {   /* деревянная доска */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 3px;
  background: linear-gradient(#a8743f, #6f4520); box-shadow: 0 6px 10px -6px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 230, 190, .35);
}
.piala__pot { position: relative; flex: none; width: 44px; height: 36px; }
.piala__pot svg, .piala__cup svg { display: block; width: 100%; height: 100%; }
.piala__pot.is-locked { opacity: .22; filter: grayscale(1); }
.piala__pot:not(.is-locked) { filter: drop-shadow(0 0 6px rgba(242, 193, 78, .55)); }
.piala__pot.is-new { animation: pl-pot 1.2s var(--spring) both; }
@keyframes pl-pot { 0% { transform: translateY(-30px) scale(.6); opacity: 0; } 60% { transform: translateY(2px) scale(1.08); opacity: 1; } }
.piala__x {
  position: absolute; right: -8px; top: -6px; padding: 2px 5px; border-radius: 999px;
  font: 400 11px/1 var(--v-label); color: #2b0a10; background: var(--p-accent);
}
.piala__cups { display: flex; flex: 1; justify-content: space-between; align-items: flex-end; gap: 2px; min-width: 0; }
.piala__cup { flex: 1 1 0; max-width: 28px; aspect-ratio: 32 / 29; opacity: .2; filter: grayscale(1); }
.piala__cup.is-full { opacity: 1; filter: none; }
.piala__tea, .piala__steam { opacity: 0; }
.piala__cup.is-full .piala__tea { opacity: 1; }
.piala__steam { stroke: var(--p-muted); }
.piala__cup.is-new { animation: pl-cup .6s var(--spring) both; }
.piala__cup.is-new .piala__tea { transform-box: fill-box; transform-origin: 50% 50%; animation: pl-pour .7s ease-out .2s both; }
.piala__cup.is-new .piala__steam { animation: pl-steam 2.4s ease-out .5s both; }
@keyframes pl-cup { from { transform: translateY(-10px); opacity: 0; } }
@keyframes pl-pour { from { transform: scaleX(.1); opacity: 0; } }
@keyframes pl-steam { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translateY(-4px); } }
.piala__cap { margin: 0; font: 400 12px/1.3 var(--v-label); letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .piala__pot.is-new, .piala__cup.is-new, .piala__cup.is-new .piala__tea, .piala__cup.is-new .piala__steam { animation: none; }
}

/* игра с друзьями: сколько мест и кто где сидит */
.g__seatsrow { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 12px; }
.g__seatsrow-label { font: 400 11px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted); }
.g__seatlist { margin: 0; padding-left: 1.6em; display: grid; gap: 6px; justify-self: stretch; text-align: left; font-size: 14px; color: var(--p-muted); }
.g__seatlist li::marker { font-family: var(--v-label); color: var(--p-muted); }
.g__seatlist li.is-on { color: var(--p-fg); }
.g__seatlist li.is-on::marker { color: var(--p-accent); }

/* полка достижений над столом */
.ach { display: flex; justify-content: center; width: 100%; min-height: 40px; margin-bottom: 10px; }
.ach__btn {
  display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-width: 0; min-height: 40px; padding: 6px 14px 6px 10px;
  border-radius: 999px; border: 1px solid var(--v-chip-line); background: var(--p-chip-bg); color: var(--p-fg); cursor: pointer;
  font: 400 12px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase; transition: border-color .25s, translate .25s var(--spring);
}
.ach__btn:hover, .ach__btn:focus-visible { border-color: var(--p-accent); }
.ach__btn:active { translate: 0 1px; }
.ach__cup { font-size: 18px; line-height: 1; }
.ach__label { white-space: nowrap; }
.ach__icons { display: inline-flex; gap: 2px; min-width: 0; overflow: hidden; font-size: 14px; line-height: 1; letter-spacing: 0; }
.ach__icon { width: 1.15em; text-align: center; color: var(--p-muted); opacity: .55; }
.ach__icon.is-on { opacity: 1; }
@media (max-width: 480px) {
  .ach__icons { display: none; }
}
/* колонка со столом бывает узкой и на широком экране (две колонки при 980–1150 px): ряд значков прячем,
   счёт «N из 10» остаётся */
.p-velaro .proj__visual { container-type: inline-size; }
@container (max-width: 380px) { .ach__icons { display: none; } }

/* новое достижение — всплывает снизу и уходит само */
.ach-toast { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 70; display: grid; gap: 8px; width: min(calc(100% - 32px), 360px); transform: translateX(-50%); pointer-events: none; }
.ach-toast__item {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px;
  background: #0b3a24; color: #eff7f1; border: 1px solid #ffc246; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .7);
  animation: rise .5s var(--spring) both; transition: opacity .5s, translate .5s;
}
.ach-toast__item.is-out { opacity: 0; translate: 0 10px; }
.ach-toast__icon { font-size: 28px; line-height: 1; }
.ach-toast__text { display: grid; gap: 4px; min-width: 0; }
.ach-toast__text b { font: 400 11px/1 "Oswald", "Oswald Fallback", "Arial Narrow", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffc246; }
.ach-toast__text span { font-size: 15px; line-height: 1.25; }

/* окно с достижениями, залом славы и рейтингом */
.trophy {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(4, 20, 12, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: rise .35s var(--spring) both;
}
.trophy__box {
  width: min(100%, 560px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  display: grid; gap: 18px; padding: 20px; border-radius: 10px;
  background: var(--p-bg); color: var(--p-fg); border: 1px solid var(--p-line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.trophy__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trophy .trophy__title { margin: 0; text-transform: none; letter-spacing: 0; font: 400 clamp(24px, 4vw, 32px)/1.05 var(--p-display); color: var(--p-accent); }
.trophy__close {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--p-line); background: transparent;
  color: var(--p-fg); font-size: 22px; line-height: 1; cursor: pointer;
}
.trophy__close:hover, .trophy__close:focus-visible { border-color: var(--p-accent); }
.trophy__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.badge { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--p-line); }
.badge.is-on { border-color: var(--v-chip-line); background: var(--p-chip-bg); }
/* неполученный значок приглушён замком, а не прозрачностью: подписи остаются читаемыми (контраст 4,5:1) */
.badge:not(.is-on) .badge__icon { opacity: .6; }
.badge__icon { font-size: 24px; line-height: 1; flex: none; }
.badge__text { display: grid; gap: 3px; min-width: 0; font-size: 13px; line-height: 1.35; color: var(--p-fg2); }
.badge__text b { font: 400 12px/1.2 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-fg); }
.badge__text small { font-size: 11px; color: var(--p-muted); }
.trophy__sec { display: grid; gap: 8px; }
.trophy__sec h3 { margin: 0; font: 400 12px/1 var(--v-label); letter-spacing: .14em; text-transform: uppercase; color: var(--p-muted); }
.trophy__note { margin: 0; font-size: 14px; color: var(--p-muted); }
.trophy__list { margin: 0; padding-left: 1.6em; display: grid; gap: 6px; font-size: 15px; }
.trophy__list li::marker { font-family: var(--v-label); color: var(--p-accent); }
.trophy__list li > span { display: inline-flex; }
.trophy__list li { padding-right: 2px; }
.trophy__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; vertical-align: bottom; }
.trophy__val { float: right; color: var(--p-muted); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .ach-toast__item, .trophy { animation: none; }
}

/* ---------- столы TUZ в рамке телефона ----------
   Тот же корпус, что у «Живого телефона» (.ph__device): стол выглядит экраном приложения.
   Рамка — когда колонка со столом шире 340 px и окно не уже 560 px; на самом телефоне — стол как есть. */
.vphone__sb, .vphone__gest { display: none; }
.vphone__scroll { display: contents; }   /* без рамки (телефон, «на весь экран») обёртки как будто нет */
@media (min-width: 560px) {
@container (min-width: 340px) {
  .vphone {
    --vph-shadow: rgba(0, 0, 0, .72);
    position: relative; width: min(100%, 384px); margin-inline: auto; padding: 9px; border-radius: 50px;
    background: linear-gradient(150deg, #3b4046 0%, #15171a 26%, #0b0c0e 62%, #2b2f34 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 4px #060708,
      0 40px 70px -34px var(--vph-shadow), 0 18px 34px -20px var(--vph-shadow);
  }
  .vphone::before, .vphone::after { content: ""; position: absolute; right: -2px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #121417, #3a3f45); }
  .vphone::before { top: 19%; height: 12%; }   /* громкость */
  .vphone::after { top: 35%; height: 7%; }     /* питание */
  /* экран постоянной высоты — пропорция телефона: блок со столом не растёт и не прыгает по ходу партии;
     если стол выше экрана (разбор кона, «Бура» вчетвером), он листается внутри экрана (.vphone__scroll).
     Весь телефон вписывается в высоту окна масштабом --pz (js/vfull.js) */
  .vphone { zoom: var(--pz, 1); }
  .vphone__screen {
    position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; border-radius: 41px;
    height: calc(min(100cqw, 384px) * 1.95); padding-bottom: 22px;
    background: radial-gradient(120% 90% at 50% 15%, #1d8850 0%, #08301e 75%) #08301e;
  }
  .vphone__screen::after {   /* фронтальная камера */
    content: ""; position: absolute; z-index: 9; top: 9px; left: 50%; width: 12px; aspect-ratio: 1; transform: translateX(-50%);
    border-radius: 50%; background: radial-gradient(circle at 38% 36%, #39424d 0 16%, #050607 46%); box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .6); pointer-events: none;
  }
  .vphone__sb {
    display: flex; flex: none; align-items: center; justify-content: space-between; height: 30px; padding: 3px 26px 0 30px;
    font: 500 12.5px/1 Roboto, "Segoe UI", sans-serif; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: #fff;
  }
  .vphone__ico { width: 44px; height: 11px; fill: currentColor; }
  .vphone__gest {
    display: block; position: absolute; z-index: 8; left: 50%; bottom: 8px; width: 108px; height: 4px; transform: translateX(-50%);
    border-radius: 99px; background: rgba(255, 255, 255, .5); pointer-events: none;
  }
  /* стол внутри — без своей рамки и фона: он и есть экран */
  :root .proj.p-velaro .vphone .vt { flex: 1 0 auto; border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-top: 6px; }
  /* раскладка как в мобильной карточной игре: сверху чей ход и соперник, колода и сброс — посередине свободного
     места, ваши карты и кнопки хода — внизу экрана (у всех трёх столов) */
  :root .proj.p-velaro .vphone .vt.g108 { display: flex; flex-direction: column; align-items: center; }
  :root .proj.p-velaro .vphone .vt.g108 > .g__table,
  :root .proj.p-velaro .vphone .vt.g108 > .b__table { margin-block: auto; }
  /* «Ходит Компьютер 5» — в одну строку на экране телефона: две строки сдвигали бы стол вниз и обратно */
  :root .proj.p-velaro .vphone .g108 .vt__state { font-size: 32px; }
  .vphone__scroll {
    display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .28) transparent;
  }
}
}
:root[data-theme="light"] .proj.p-velaro .vphone { --vph-shadow: rgba(8, 48, 30, .5); }

/* ===================================================================
   По-узбекски: TUZ — рубашки карт как риштанская керамика (кобальт и бирюза по белой глазури),
   стол — дастархан (тканая кайма по краю и мелкий узор восьмиконечных звёзд); Domcook — блюда
   на расписном лягане. Всё нарисовано SVG прямо здесь. Палитра — из логотипа: кобальт ближе к
   #0878D1/#082A56, бирюза — к #08A6B9. В теме «Терминал» ничего этого нет (:not([data-egg="term"])),
   там остаются её экранные карты и фото.
   =================================================================== */
:root {
  /* рубашка 100 × 145 (пропорция карты): кайма, угловые веера, розетка из миндалин и пояс точек */
  --uz-back: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='145' viewBox='0 0 100 145'><defs><path id='p' d='M0-8C7-14 7-24 0-31C-7-24-7-14 0-8Z'/><path id='q' d='M0-13C3-17 3-22 0-25C-3-22-3-17 0-13Z'/><g id='s'><rect x='-4' y='-4' width='8' height='8'/><rect x='-4' y='-4' width='8' height='8' transform='rotate(45)'/></g><g id='c'><path d='M10 23A13 13 0 0 0 23 10' fill='none' stroke='%231b4d9b' stroke-width='1.6'/><path d='M10 17A7 7 0 0 0 17 10H10Z' fill='%2314a3b0'/></g></defs><rect width='100' height='145' fill='%23f7f2e5'/><rect x='5.5' y='5.5' width='89' height='134' rx='8' fill='none' stroke='%231b4d9b' stroke-width='3'/><rect x='10' y='10' width='80' height='125' rx='4' fill='none' stroke='%2314a3b0' stroke-width='1.2'/><use href='%23c'/><use href='%23c' transform='matrix(-1 0 0 1 100 0)'/><use href='%23c' transform='matrix(1 0 0 -1 0 145)'/><use href='%23c' transform='matrix(-1 0 0 -1 100 145)'/><g transform='translate(50 72.5)'><circle r='36' fill='none' stroke='%2314a3b0' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='0 5.655'/><g fill='%231b4d9b'><use href='%23p'/><use href='%23p' transform='rotate(45)'/><use href='%23p' transform='rotate(90)'/><use href='%23p' transform='rotate(135)'/><use href='%23p' transform='rotate(180)'/><use href='%23p' transform='rotate(225)'/><use href='%23p' transform='rotate(270)'/><use href='%23p' transform='rotate(315)'/></g><g fill='%2314a3b0'><use href='%23q' transform='rotate(22.5)'/><use href='%23q' transform='rotate(67.5)'/><use href='%23q' transform='rotate(112.5)'/><use href='%23q' transform='rotate(157.5)'/><use href='%23q' transform='rotate(202.5)'/><use href='%23q' transform='rotate(247.5)'/><use href='%23q' transform='rotate(292.5)'/><use href='%23q' transform='rotate(337.5)'/><use href='%23s' transform='scale(1.6)'/></g><circle r='3.4' fill='%23f7f2e5'/><circle r='1.7' fill='%231b4d9b'/></g><g fill='%231b4d9b'><use href='%23s' x='50' y='22'/><use href='%23s' x='50' y='123'/></g><g fill='%2314a3b0'><circle cx='50' cy='22' r='1.8'/><circle cx='50' cy='123' r='1.8'/></g></svg>");
  /* кайма дастархана для border-image (срез 10): две золотые нити, бирюзовые ромбы, звёзды в углах */
  --uz-kaima: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M1.5 1.5H38.5V38.5H1.5ZM8.5 8.5H31.5V31.5H8.5Z' fill='none' stroke='%23ffc246' stroke-opacity='.5'/><path d='M16 5L20 2.9 24 5 20 7.1ZM16 35L20 32.9 24 35 20 37.1ZM5 16L7.1 20 5 24 2.9 20ZM35 16L37.1 20 35 24 32.9 20Z' fill='%2340c4cc' fill-opacity='.7'/><g fill='%23ffc246' fill-opacity='.6'><circle cx='10' cy='5' r='.9'/><circle cx='30' cy='5' r='.9'/><circle cx='10' cy='35' r='.9'/><circle cx='30' cy='35' r='.9'/><circle cx='5' cy='10' r='.9'/><circle cx='5' cy='30' r='.9'/><circle cx='35' cy='10' r='.9'/><circle cx='35' cy='30' r='.9'/></g><g fill='%23ffc246' opacity='.75'><g id='k'><rect x='3.1' y='3.1' width='3.8' height='3.8'/><rect x='3.1' y='3.1' width='3.8' height='3.8' transform='rotate(45 5 5)'/></g><use href='%23k' x='30'/><use href='%23k' y='30'/><use href='%23k' x='30' y='30'/></g><g fill='%2340c4cc'><circle cx='5' cy='5' r='.8'/><circle cx='35' cy='5' r='.8'/><circle cx='5' cy='35' r='.8'/><circle cx='35' cy='35' r='.8'/></g></svg>");
  /* поле дастархана: звёзды из двух квадратов по косой сетке, едва заметные */
  --uz-cloth: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M28 20L20 28 12 20 20 12ZM14.3 14.3H25.7V25.7H14.3ZM8 0L0 8M5.7 0V5.7H0M32 0L40 8M34.3 0V5.7H40M0 32L8 40M0 34.3H5.7V40M40 32L32 40M40 34.3H34.3V40' fill='none' stroke='%23ffffff' stroke-opacity='.06'/><g fill='%23ffc246' fill-opacity='.12'><circle cx='20' cy='0' r='1'/><circle cx='20' cy='40' r='1'/><circle cx='0' cy='20' r='1'/><circle cx='40' cy='20' r='1'/><circle cx='20' cy='20' r='1.2'/></g></svg>");
  /* ляган 100 × 100: кобальтовый край, миндалины и бирюзовые точки по борту, бирюзовая нить у дна */
  --uz-lagan: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'><defs><path id='l' d='M50 3C53.4 5 53.4 7.4 50 9.8C46.6 7.4 46.6 5 50 3Z'/><circle id='d' cx='50' cy='6.4' r='1.5'/></defs><circle cx='50' cy='50' r='50' fill='%23f7f2e5'/><circle cx='50' cy='50' r='48.7' fill='none' stroke='%231b4d9b' stroke-width='2.6'/><g fill='%231b4d9b'><use href='%23l'/><use href='%23l' transform='rotate(30 50 50)'/><use href='%23l' transform='rotate(60 50 50)'/><use href='%23l' transform='rotate(90 50 50)'/><use href='%23l' transform='rotate(120 50 50)'/><use href='%23l' transform='rotate(150 50 50)'/><use href='%23l' transform='rotate(180 50 50)'/><use href='%23l' transform='rotate(210 50 50)'/><use href='%23l' transform='rotate(240 50 50)'/><use href='%23l' transform='rotate(270 50 50)'/><use href='%23l' transform='rotate(300 50 50)'/><use href='%23l' transform='rotate(330 50 50)'/></g><g fill='%2314a3b0'><use href='%23d' transform='rotate(15 50 50)'/><use href='%23d' transform='rotate(45 50 50)'/><use href='%23d' transform='rotate(75 50 50)'/><use href='%23d' transform='rotate(105 50 50)'/><use href='%23d' transform='rotate(135 50 50)'/><use href='%23d' transform='rotate(165 50 50)'/><use href='%23d' transform='rotate(195 50 50)'/><use href='%23d' transform='rotate(225 50 50)'/><use href='%23d' transform='rotate(255 50 50)'/><use href='%23d' transform='rotate(285 50 50)'/><use href='%23d' transform='rotate(315 50 50)'/><use href='%23d' transform='rotate(345 50 50)'/></g><circle cx='50' cy='50' r='40.4' fill='none' stroke='%2314a3b0' stroke-width='1.4'/></svg>");
  --uz-glaze: #f7f2e5;
}

/* рубашки: колода, сброс рубашкой, карты соперника во взятке «Буры», веер на главной.
   Рисунок — --v-cardback: риштанская по умолчанию, другие открываются значками (data-vback на <html>
   ставит скрипт в <head>, выбор — в окне «Достижения», рисунки — js/faces.js, поэтому только при has-faces) */
:root {
  --v-cardback: var(--uz-back); --v-edge1: #e2d8c1; --v-edge2: #c5b796;
}
:root.has-faces[data-vback="suzani"] { --v-cardback: var(--bk-suzani); --v-edge1: #e8d6b2; --v-edge2: #b98f86; }
:root.has-faces[data-vback="atlas"] { --v-cardback: var(--bk-atlas); --v-edge1: #f0dc94; --v-edge2: #c9a23c; }
:root.has-faces[data-vback="add"] { --v-cardback: var(--bk-add); --v-edge1: #123f72; --v-edge2: #071f3e; }
:root:not([data-egg="term"]) .pc--back {
  background: var(--v-cardback) center / 100% 100% no-repeat, var(--uz-glaze);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .55);
}
/* края пачки — цвет рубашки, чуть темнее к низу */
:root:not([data-egg="term"]) .g__deck .pc, :root:not([data-egg="term"]) .b__deck .b__stack {
  box-shadow: 2px 2px 0 var(--v-edge1), 4px 4px 0 var(--v-edge2), 0 10px 18px -8px rgba(0, 0, 0, .6);
}
/* крошечные рубашки в плашке соперника */
:root:not([data-egg="term"]) .g__backs i {
  background: var(--v-cardback) center / 100% 100% no-repeat, var(--uz-glaze);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

/* фигуры (js/faces.js): король, дама и валет — портрет в арке-михрабе, масть — в медальоне на груди,
   поэтому большой знак масти у них не нужен. Без скрипта (нет has-faces) и в «Терминалах» — буква и масть, как раньше */
:root.has-faces:not([data-egg="term"]) .pc--face::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: var(--pc-face) center / 100% 100% no-repeat;
}
:root.has-faces:not([data-egg="term"]) .pc--face::after { content: none; }
/* буква в углу — на подложке цвета карты: край арки проходит под ней */
:root.has-faces:not([data-egg="term"]) .pc--face b { z-index: 1; padding: 0 1px 1px 0; border-radius: 0 0 4px 0; background: var(--v-paper); }
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .pc--face::before { content: none; }
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .pc--face::after { content: attr(data-s); }

/* стол — дастархан: кайма по краю, узор под картами. Слой ::before лежит под содержимым стола
   (z-index −1 внутри isolation), поэтому ни текст, ни нажатия он не задевает */
:root:not([data-egg="term"]) .vt { position: relative; isolation: isolate; }
:root:not([data-egg="term"]) .vt::before {
  content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none;
  border: 9px solid transparent; border-image: var(--uz-kaima) 10 round;
  background: var(--uz-cloth) center / 40px 40px; background-clip: padding-box;
}
/* узкий экран: кайма тоньше и у самого края, а содержимое стола чуть отступает от неё */
@media (max-width: 480px) {
  :root:not([data-egg="term"]) .vt::before { inset: 1px; border-width: 6px; }
  :root:not([data-egg="term"]) .g108 { padding-inline: 11px; }
}
/* в рамке телефона стол начинается сразу под строкой состояния — сдвигаем счёт ниже каймы */
@media (min-width: 560px) {
@container (min-width: 340px) {
  :root:not([data-egg="term"]) .proj.p-velaro .vphone .vt { padding-top: 16px; }
}
}

/* Domcook: фото блюда — в дне ляганa, расписной борт виден в отступе вокруг фото */
:root:not([data-egg="term"]) .fr__item { grid-template-columns: 84px minmax(0, 1fr); }
:root:not([data-egg="term"]) .fr__item img {
  width: 84px; height: 84px; padding: 9px; border-radius: 50%;
  background: var(--uz-lagan) center / 100% 100% no-repeat;
  box-shadow: 0 8px 14px -9px rgba(46, 43, 37, .7);
}
:root:not([data-egg="term"]) .wcard--fridge .wcard__dishes img {
  padding: 10px; border: 0; border-radius: 50%;
  background: var(--uz-lagan) center / 100% 100% no-repeat;
}

/* ---------- зрители за столом с другом (js/tables.js) ----------
   У игроков — глаз со счётом зрителей в строке инструментов; у зрителя — полоса «Вы смотрите партию»
   с кнопкой «Выйти», руки рубашкой и без кнопок хода. В окне «Игра с другом» — столы, где уже играют. */
.g__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.g__eye { display: inline-flex; align-items: center; gap: 5px; font: 400 12px/1 var(--v-label); letter-spacing: .08em; color: var(--p-accent); font-variant-numeric: tabular-nums; }
.g__eye svg, .g__watchbar svg, .g__table-eye svg, .g__bubble--watch svg {
  width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.g__watchbar {
  flex-basis: 100%; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px 12px;
  border-radius: 6px; border: 1px solid var(--p-accent); background: rgba(255, 194, 70, .1);
}
.g__watchbar-text {
  flex: 1 1 12em; min-width: 0; display: inline-flex; align-items: center; gap: 8px;
  font: 400 12px/1.35 var(--v-label); letter-spacing: .1em; text-transform: uppercase; color: var(--p-fg);
}
.g__watchbar-text svg { color: var(--p-accent); }
.g__watchbar .g__link { margin-left: auto; }
/* своих ходов у зрителя нет: ряд кнопок хода и подсказки «Буры» не показываем */
.vt.is-watch .g__actions, .vt.is-watch .b__tip { display: none; }
.g__table-row { display: flex; align-items: center; gap: 10px; }
.g__table-name { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.g__table-eye { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.g__table-act { flex: none; padding: 5px 9px; border-radius: 999px; font-size: 11px; letter-spacing: .12em; color: var(--p-on-accent); background: var(--p-accent); }
.g__table-row.is-live .g__table-act { color: var(--p-accent); background: transparent; box-shadow: inset 0 0 0 1px var(--p-accent); }
.g__codeform { flex-wrap: wrap; }
.g__codeform input { flex: 1 1 96px; }
.g__bubble--watch { display: inline-flex; align-items: center; gap: 6px; max-width: calc(100% - 12px); box-shadow: inset 0 0 0 1.5px var(--p-accent), 0 12px 24px -12px rgba(0, 0, 0, .7); }
.g__bubble--watch::after { content: none; }
.g__bubble--watch span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
:root[data-egg="term"] .g__watchbar { border-radius: 2px; border-color: var(--tm-acc); background: color-mix(in srgb, var(--tm-acc) 10%, transparent); }
:root[data-egg="term"] .g__table-act { border-radius: 2px; }

/* ===================================================================
   Столы за достижения (выбор — в окне «Достижения», js/tables.js). Атрибут data-vskin на <html>
   (ставится ещё в <head>, до отрисовки) перекрашивает сразу все три стола, экран телефона и стол
   «Школы Буры». Классика — без атрибута, это сукно с дастарханом выше. Чайхана — ковёр с медальоном и каймой, в углу чайник
   и пиалы; Ночной Самарканд — звёзды, полумесяц и силуэт Регистана у нижнего края; Терминал —
   зелёный люминофор, как пасхальная тема сайта. Рисунки — SVG прямо здесь, как --uz-* выше.
   Текст на каждом столе — с контрастом не ниже 4,5:1. В теме «Терминал» (data-egg="term") правила
   не работают (:not([data-egg="term"])): её перекраска главнее, выбор вернётся, когда тему выключат.
   =================================================================== */
:root {
  /* кайма ковра для border-image (срез 10): тёмно-синяя полоса, красные ромбы, золотые розетки в углах */
  --sk-carpet-kaima: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><defs><path id='z' d='M15 2.3L17.7 5 15 7.7 12.3 5Z'/><g id='r'><rect x='2.6' y='2.6' width='4.8' height='4.8'/><rect x='2.6' y='2.6' width='4.8' height='4.8' transform='rotate(45 5 5)'/></g></defs><path d='M0 0H40V40H0ZM10 10V30H30V10Z' fill='%231f2456' fill-rule='evenodd'/><path d='M.7 .7H39.3V39.3H.7ZM9.3 9.3H30.7V30.7H9.3Z' fill='none' stroke='%23d9a441' stroke-width='1.1'/><g fill='%23c0303f' stroke='%23f3dcae' stroke-width='.7'><use href='%23z'/><use href='%23z' x='10'/><use href='%23z' y='30'/><use href='%23z' x='10' y='30'/><use href='%23z' transform='rotate(90 20 20)'/><use href='%23z' x='10' transform='rotate(90 20 20)'/><use href='%23z' y='30' transform='rotate(90 20 20)'/><use href='%23z' x='10' y='30' transform='rotate(90 20 20)'/></g><g fill='%23d9a441'><circle cx='20' cy='5' r='1'/><circle cx='20' cy='35' r='1'/><circle cx='5' cy='20' r='1'/><circle cx='35' cy='20' r='1'/><use href='%23r'/><use href='%23r' x='30'/><use href='%23r' y='30'/><use href='%23r' x='30' y='30'/></g><g fill='%23c0303f'><circle cx='5' cy='5' r='1.1'/><circle cx='35' cy='5' r='1.1'/><circle cx='5' cy='35' r='1.1'/><circle cx='35' cy='35' r='1.1'/></g></svg>");
  /* поле ковра: косая решётка ромбов, едва заметная */
  --sk-carpet-field: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M16 1L31 16 16 31 1 16Z' fill='none' stroke='%23ffd9a0' stroke-opacity='.08'/><path d='M16 11L21 16 16 21 11 16Z' fill='%23ffd9a0' fill-opacity='.06'/><g fill='%23ffc76e' fill-opacity='.16'><circle cx='16' cy='16' r='1.1'/><circle cx='0' cy='0' r='1'/><circle cx='32' cy='0' r='1'/><circle cx='0' cy='32' r='1'/><circle cx='32' cy='32' r='1'/></g></svg>");
  /* медальон в середине ковра: ромб в ромбе, восьмиугольник со звездой; полупрозрачный — карты на нём читаются */
  --sk-carpet-medal: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='150' viewBox='0 0 200 150'><path d='M100 5L193 75 100 145 7 75Z' fill='%231f2456' fill-opacity='.34' stroke='%23d9a441' stroke-opacity='.4' stroke-width='1.4'/><path d='M100 13L182 75 100 137 18 75Z' fill='none' stroke='%23d9a441' stroke-opacity='.25' stroke-dasharray='2 4'/><path d='M100 24L168 75 100 126 32 75Z' fill='%23a3202f' fill-opacity='.32' stroke='%23f3dcae' stroke-opacity='.26' stroke-width='1.2'/><g fill='%23f3dcae' fill-opacity='.3'><path d='M44 75L49 70 54 75 49 80Z'/><path d='M146 75L151 70 156 75 151 80Z'/><path d='M100 33L105 38 100 43 95 38Z'/><path d='M100 107L105 112 100 117 95 112Z'/></g><path d='M124 65L124 85 110 99 90 99 76 85 76 65 90 51 110 51Z' fill='%231f2456' fill-opacity='.42' stroke='%23d9a441' stroke-opacity='.45' stroke-width='1.2'/><g fill='%23d9a441' fill-opacity='.34'><rect x='88' y='63' width='24' height='24'/><rect x='88' y='63' width='24' height='24' transform='rotate(45 100 75)'/></g><circle cx='100' cy='75' r='5' fill='%23c0303f' fill-opacity='.7'/><circle cx='100' cy='75' r='2' fill='%23f3dcae' fill-opacity='.6'/><g fill='%23d9a441' fill-opacity='.4'><circle cx='66' cy='49.5' r='1.3'/><circle cx='134' cy='49.5' r='1.3'/><circle cx='66' cy='100.5' r='1.3'/><circle cx='134' cy='100.5' r='1.3'/></g></svg>");
  /* чайник-чойнак с хлопковым узором и две пиалы с чаем */
  --sk-teaset: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='126' height='70' viewBox='0 0 126 70'><defs><g id='f'><circle r='2.2'/><circle cx='-3' cy='-1.4' r='1.5'/><circle cx='3' cy='-1.4' r='1.5'/><circle cx='0' cy='-3.4' r='1.5'/><path d='M-1 1.5Q0 5 -3.5 5.5Q-2 3 -1 1.5ZM1 1.5Q0 5 3.5 5.5Q2 3 1 1.5Z'/></g></defs><g fill='%23000' fill-opacity='.3'><ellipse cx='43' cy='66.5' rx='29' ry='3.2'/><ellipse cx='91' cy='66.5' rx='13' ry='2.4'/><ellipse cx='115' cy='66.5' rx='10' ry='2.2'/></g><path d='M21 37C8 35 6 57 23 56.5' fill='none' stroke='%231b4d9b' stroke-width='3.2' stroke-linecap='round'/><path d='M61 46C68 45 71 37 78 29C79.5 27.4 82.2 28.6 81.2 30.6C76 39.5 73 51.5 62 55.5Z' fill='%23f7f2e5' stroke='%231b4d9b' stroke-width='1.3' stroke-linejoin='round'/><path d='M19 46.5C19 34.5 29 30.5 43 30.5C57 30.5 67 34.5 67 46.5C67 58.5 57 64.5 43 64.5C29 64.5 19 58.5 19 46.5Z' fill='%23f7f2e5' stroke='%231b4d9b' stroke-width='1.4'/><path d='M22 39C31 35.2 55 35.2 64 39' fill='none' stroke='%23d9a441' stroke-width='1.3'/><path d='M22.5 56C31 59.5 55 59.5 63.5 56' fill='none' stroke='%231b4d9b' stroke-width='1'/><g fill='%231b4d9b'><use href='%23f' x='32' y='48'/><use href='%23f' x='43' y='50.5'/><use href='%23f' x='54' y='48'/></g><rect x='33' y='63' width='20' height='3' rx='1' fill='%231b4d9b'/><path d='M31 31.5C31 26.5 55 26.5 55 31.5Z' fill='%23f7f2e5' stroke='%231b4d9b' stroke-width='1.2'/><circle cx='43' cy='25' r='3' fill='%231b4d9b'/><circle cx='43' cy='24.2' r='.9' fill='%23d9a441'/><path d='M88 44C86 40.5 90 38.5 88 34.5M94.5 44.5C92.5 41 96.5 38.5 94.5 34' fill='none' stroke='%23f7f2e5' stroke-opacity='.45' stroke-width='1.2' stroke-linecap='round'/><path d='M79 48H103C103 57 98 63 91 63C84 63 79 57 79 48Z' fill='%23f7f2e5' stroke='%231b4d9b' stroke-width='1.3' stroke-linejoin='round'/><ellipse cx='91' cy='48' rx='12' ry='2.2' fill='%23a8601e' stroke='%231b4d9b' stroke-width='.9'/><path d='M80 52.2H102' stroke='%231b4d9b' stroke-width='1.5'/><use href='%23f' x='91' y='58' fill='%231b4d9b' transform='translate(9.1 5.8) scale(.9)'/><rect x='86' y='62.4' width='10' height='2.6' rx='1' fill='%231b4d9b'/><path d='M106 52H124C124 59 120 63.5 115 63.5C110 63.5 106 59 106 52Z' fill='%23f7f2e5' stroke='%231b4d9b' stroke-width='1.2' stroke-linejoin='round'/><ellipse cx='115' cy='52' rx='9' ry='1.8' fill='%23a8601e' stroke='%231b4d9b' stroke-width='.8'/><path d='M107 55.4H123' stroke='%23d9a441' stroke-width='1.2'/><rect x='111' y='63' width='8' height='2.4' rx='1' fill='%231b4d9b'/></svg>");
  /* кайма самаркандских изразцов: бирюзовые восьмиконечные звёзды по ночной синей полосе, золотые нити */
  --sk-night-kaima: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><defs><g id='s'><rect x='-2.4' y='-2.4' width='4.8' height='4.8'/><rect x='-2.4' y='-2.4' width='4.8' height='4.8' transform='rotate(45)'/></g></defs><path d='M0 0H40V40H0ZM10 10V30H30V10Z' fill='%230c1a45' fill-rule='evenodd'/><path d='M.7 .7H39.3V39.3H.7ZM9.3 9.3H30.7V30.7H9.3Z' fill='none' stroke='%23e2b85c' stroke-opacity='.75' stroke-width='.9'/><g fill='%232fb6c4'><use href='%23s' x='15' y='5'/><use href='%23s' x='25' y='5'/><use href='%23s' x='15' y='35'/><use href='%23s' x='25' y='35'/><use href='%23s' x='5' y='15'/><use href='%23s' x='5' y='25'/><use href='%23s' x='35' y='15'/><use href='%23s' x='35' y='25'/></g><g fill='%230c1a45'><circle cx='15' cy='5' r='1'/><circle cx='25' cy='5' r='1'/><circle cx='15' cy='35' r='1'/><circle cx='25' cy='35' r='1'/><circle cx='5' cy='15' r='1'/><circle cx='5' cy='25' r='1'/><circle cx='35' cy='15' r='1'/><circle cx='35' cy='25' r='1'/></g><g fill='%23e2b85c'><circle cx='20' cy='5' r='.9'/><circle cx='20' cy='35' r='.9'/><circle cx='5' cy='20' r='.9'/><circle cx='35' cy='20' r='.9'/><use href='%23s' x='5' y='5'/><use href='%23s' x='35' y='5'/><use href='%23s' x='5' y='35'/><use href='%23s' x='35' y='35'/></g></svg>");
  /* звёзды: редкие точки, у текста они ничего не отнимают */
  --sk-stars: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'><g fill='%23ffffff'><circle cx='12' cy='18' r='.8' fill-opacity='.5'/><circle cx='58' cy='9' r='.6' fill-opacity='.4'/><circle cx='97' cy='31' r='1' fill-opacity='.55'/><circle cx='137' cy='14' r='.6' fill-opacity='.35'/><circle cx='31' cy='62' r='.6' fill-opacity='.35'/><circle cx='76' cy='77' r='.8' fill-opacity='.45'/><circle cx='124' cy='70' r='.6' fill-opacity='.3'/><circle cx='9' cy='108' r='.7' fill-opacity='.4'/><circle cx='52' cy='129' r='.6' fill-opacity='.3'/><circle cx='104' cy='118' r='.9' fill-opacity='.45'/><circle cx='143' cy='138' r='.6' fill-opacity='.3'/></g><g fill='%23f5d98a' fill-opacity='.55'><circle cx='117' cy='96' r='.9'/><circle cx='36' cy='92' r='.7'/></g></svg>");
  /* Регистан 400 × 72: Улугбек, Тилля-Кари с куполом, Шердор; порталы с нишами, минареты, полумесяц.
     Силуэт чуть светлее ночного неба — кнопки поверх него читаются как на пустом столе */
  --sk-registan: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='72' viewBox='0 0 400 72'><defs><mask id='m'><rect width='400' height='72' fill='%23fff'/><circle cx='36' cy='12.5' r='6.2' fill='%23000'/></mask><path id='n' d='M0 0V-30Q0 -38 15 -42Q30 -38 30 -30V0Z'/><g id='mn'><rect x='0' y='0' width='6' height='64'/><path d='M-1.5 2H7.5L6 -2H0Z'/><rect x='1.5' y='-5' width='3' height='3'/></g></defs><path d='M31 9.5a7.5 7.5 0 1 0 0 15a7.5 7.5 0 1 0 0-15Z' fill='%23f5d98a' mask='url(%23m)'/><g fill='%23f5d98a' fill-opacity='.6'><circle cx='50' cy='10' r='.8'/><circle cx='268' cy='20' r='.7'/><circle cx='132' cy='6' r='.7'/></g><g fill='%231b5874'><path d='M144 40Q144 20 159 16Q174 20 174 40Z'/><path d='M281 52Q281 36 293 32Q305 36 305 52Z'/><path d='M357 52Q357 37 368 33Q379 37 379 52Z'/><circle cx='28' cy='51' r='7'/><circle cx='108' cy='51' r='7'/></g><g fill='none' stroke='%232b8aa6' stroke-opacity='.55' stroke-width='.8'><path d='M159 16L151 40M159 16V40M159 16L167 40'/><path d='M293 32L287 52M293 32V52M293 32L299 52'/><path d='M368 33L362 52M368 33V52M368 33L374 52'/></g><g fill='%23152a5e'><rect x='10' y='51' width='116' height='21'/><rect x='44' y='24' width='48' height='48'/><use href='%23mn' x='12' y='8'/><use href='%23mn' x='118' y='8'/><rect x='140' y='46' width='120' height='26'/><rect x='146' y='39' width='26' height='8'/><rect x='176' y='28' width='48' height='44'/><rect x='140' y='40' width='4' height='32'/><rect x='256' y='40' width='4' height='32'/><rect x='274' y='51' width='116' height='21'/><rect x='308' y='24' width='48' height='48'/><use href='%23mn' x='276' y='8'/><use href='%23mn' x='384' y='8'/><rect x='0' y='68' width='400' height='4'/></g><g fill='%230a1536'><use href='%23n' x='53' y='72'/><use href='%23n' x='185' y='72'/><use href='%23n' x='317' y='72'/></g><g fill='%23f5c96a' fill-opacity='.5'><rect x='66' y='40' width='4' height='5' rx='2'/><rect x='198' y='42' width='4' height='5' rx='2'/><rect x='330' y='40' width='4' height='5' rx='2'/><circle cx='150' cy='58' r='1'/><circle cx='162' cy='58' r='1'/><circle cx='236' cy='58' r='1'/><circle cx='248' cy='58' r='1'/><circle cx='24' cy='60' r='1'/><circle cx='112' cy='60' r='1'/><circle cx='288' cy='60' r='1'/><circle cx='376' cy='60' r='1'/></g></svg>");
  --sk-felt-chaihana: radial-gradient(120% 90% at 50% 15%, #6e1626 0%, #4a0d19 55%, #33070f 100%) #33070f;
  --sk-felt-samarkand: radial-gradient(130% 85% at 50% 8%, #1c3373 0%, #0e1c47 50%, #070e28 100%) #070e28;
}
/* оформление стола — набором переменных: фон, текст, плашки, затемнение окон поверх стола, кайма, узор */
:root[data-vskin="chaihana"] .proj.p-velaro {
  --sk-felt: var(--sk-felt-chaihana);
  --sk-fg: #fbeee0; --sk-muted: #e3c3ae; --sk-accent: #f2c14e; --sk-on: #3a0a14; --sk-line: rgba(255, 214, 160, .2);
  --sk-sheet: #3f0a15; --sk-over: rgba(51, 7, 15, .9); --sk-over2: rgba(51, 7, 15, .97); --sk-shadow: rgba(58, 10, 20, .7);
  --sk-bi: var(--sk-carpet-kaima) 10 round;
  --sk-cloth: var(--sk-carpet-medal) 50% 55% / min(86%, 330px) auto no-repeat, var(--sk-carpet-field) center / 32px 32px;
}
:root[data-vskin="samarkand"] .proj.p-velaro {
  --sk-felt: var(--sk-felt-samarkand);
  --sk-fg: #eef3ff; --sk-muted: #b8c6e8; --sk-accent: #f5c96a; --sk-on: #0a1430; --sk-line: rgba(150, 185, 255, .18);
  --sk-sheet: #0b1636; --sk-over: rgba(7, 14, 40, .9); --sk-over2: rgba(7, 14, 40, .97); --sk-shadow: rgba(7, 14, 40, .7);
  --sk-bi: var(--sk-night-kaima) 10 round;
  --sk-cloth: var(--sk-stars) 0 0 / 150px 150px;
}
/* «Терминал» — те же цвета, что у пасхальной темы (--tm-* в css/shell.css), и тоже в двух вариантах */
:root[data-vskin="term"] .proj.p-velaro {
  --sk-felt: #0a140d;
  --sk-fg: #b8ffc6; --sk-muted: #6fd488; --sk-accent: #39ff88; --sk-on: #03140a; --sk-line: #173a22;
  --sk-sheet: #0d1a11; --sk-over: rgba(4, 10, 6, .92); --sk-over2: rgba(4, 10, 6, .97); --sk-shadow: rgba(0, 0, 0, .55);
  --sk-amber: #ffb000; --sk-glow: rgba(57, 255, 136, .28);
  --sk-font: "Cascadia Mono", Consolas, "SF Mono", Menlo, "Courier New", monospace;
  --sk-bi: none;
  --sk-cloth: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px);
}
:root[data-theme="light"][data-vskin="term"] .proj.p-velaro {
  --sk-felt: #d5e6cc;
  --sk-fg: #0f3a1c; --sk-muted: #2f5a3b; --sk-accent: #0b5e2d; --sk-on: #eef8ea; --sk-line: #a9c9b1;
  --sk-sheet: #cadfc0; --sk-over: rgba(227, 239, 220, .93); --sk-over2: rgba(227, 239, 220, .98); --sk-shadow: rgba(15, 58, 28, .35);
  --sk-amber: #8a5200; --sk-glow: rgba(13, 110, 53, .12);
  --sk-cloth: repeating-linear-gradient(0deg, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px);
}

/* столы и стол задачи в «Школе Буры» берут переменные выбранного оформления */
:root[data-vskin]:not([data-egg="term"]) .proj.p-velaro .vt,
:root[data-vskin]:not([data-egg="term"]) .proj.p-velaro .school__felt {
  --p-fg: var(--sk-fg); --p-muted: var(--sk-muted); --p-accent: var(--sk-accent); --p-on-accent: var(--sk-on);
  --p-line: var(--sk-line); --v-sheet: var(--sk-sheet); --v-chip-line: var(--sk-line);
  color: var(--p-fg); background: var(--sk-felt); border-color: var(--p-line);
}
:root[data-vskin]:not([data-egg="term"]) .proj.p-velaro .vt { box-shadow: 0 34px 60px -34px var(--sk-shadow); }
:root[data-vskin]:not([data-egg="term"]) .proj.p-velaro .vt::before {
  border-image: var(--sk-bi); background: var(--sk-cloth); background-clip: padding-box;
}
:root[data-vskin]:not([data-egg="term"]) .proj.p-velaro .g__over,
:root[data-vskin]:not([data-egg="term"]) .proj.p-velaro .g__suits { background: var(--sk-over); }
:root[data-vskin]:not([data-egg="term"]) .proj.p-velaro .g__replay { background: var(--sk-over2); }
/* картинки в углу и у нижнего края — отдельным слоем под содержимым стола: ни текст, ни нажатия не задевают */
:root[data-vskin="chaihana"]:not([data-egg="term"]) .proj.p-velaro .vt::after,
:root[data-vskin="samarkand"]:not([data-egg="term"]) .proj.p-velaro .vt::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
}
/* под картинку внизу стола — своя полоса (отступ снизу), чтобы кнопки хода её не закрывали.
   Атрибут ставится ещё до отрисовки, поэтому стол не прыгает */
:root[data-vskin="chaihana"]:not([data-egg="term"]) .proj.p-velaro .vt { padding-bottom: 56px; }
:root[data-vskin="samarkand"]:not([data-egg="term"]) .proj.p-velaro .vt { padding-bottom: 50px; }
:root[data-vskin="chaihana"]:not([data-egg="term"]) .proj.p-velaro .vt::after {
  right: 16px; bottom: 10px; width: 76px; aspect-ratio: 126 / 70; background: var(--sk-teaset) center / contain no-repeat;
}
:root[data-vskin="samarkand"]:not([data-egg="term"]) .proj.p-velaro .vt::after {
  left: 12px; right: 12px; bottom: 12px; aspect-ratio: 400 / 72; background: var(--sk-registan) center bottom / 100% 100% no-repeat;
}
/* кнопки хода — на плотной подложке: минареты за ними не просвечивают сквозь текст */
:root[data-vskin="chaihana"]:not([data-egg="term"]) .proj.p-velaro .g__btn:not(.g__btn--main),
:root[data-vskin="samarkand"]:not([data-egg="term"]) .proj.p-velaro .g__btn:not(.g__btn--main) { background: var(--sk-sheet); }
/* живая чайхана (js/faces.js): рядом с чайником — светильник-чирог, над пиалами пар; та же высота, картинка шире влево */
:root.has-faces[data-vskin="chaihana"]:not([data-egg="term"]) .proj.p-velaro .vt::after {
  width: 99px; aspect-ratio: 164 / 70; background-image: var(--sk-chai-live);
}
@media (prefers-reduced-motion: reduce) {
  :root.has-faces[data-vskin="chaihana"]:not([data-egg="term"]) .proj.p-velaro .vt::after { background-image: var(--sk-chai-still); }
}
@media (max-width: 480px) {
  :root.has-faces[data-vskin="chaihana"]:not([data-egg="term"]) .proj.p-velaro .vt::after { width: 81px; }
  :root[data-vskin="chaihana"]:not([data-egg="term"]) .proj.p-velaro .vt { padding-bottom: 46px; }
  :root[data-vskin="samarkand"]:not([data-egg="term"]) .proj.p-velaro .vt { padding-bottom: 44px; }
  :root[data-vskin="chaihana"]:not([data-egg="term"]) .proj.p-velaro .vt::after { right: 9px; bottom: 6px; width: 62px; }
  :root[data-vskin="samarkand"]:not([data-egg="term"]) .proj.p-velaro .vt::after { left: 7px; right: 7px; bottom: 7px; }
}
/* в рамке телефона фон — у экрана целиком (и под строкой состояния), сам стол прозрачный */
@media (min-width: 560px) {
@container (min-width: 340px) {
  :root[data-vskin]:not([data-egg="term"]) .proj.p-velaro .vphone__screen { background: var(--sk-felt); }
  :root[data-vskin]:not([data-egg="term"]) .proj.p-velaro .vphone .vt { background: transparent; border: 0; box-shadow: none; }
  :root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .vphone__sb { color: var(--sk-fg); }
  :root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .vphone__gest { background: color-mix(in srgb, var(--sk-fg) 45%, transparent); }
}
}

/* Терминал: экранные карты в рамке (рубашки остаются риштанскими), моноширинный шрифт, развёртка, свечение */
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .vt,
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .school__felt {
  --v-paper: var(--sk-sheet); --v-black: var(--sk-fg); --v-red: var(--sk-amber);
  --v-label: var(--sk-font); --p-display: var(--sk-font);
  font-family: var(--sk-font); text-shadow: 0 0 6px var(--sk-glow); border-radius: 2px;
}
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .vt::before {
  inset: 3px; border: 1px solid var(--sk-line); box-shadow: inset 0 0 60px -24px var(--sk-glow);
}
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .pc:not(.pc--back) { border-radius: 4px; }
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .pc:not(.pc--back):not(.is-picked):not(.is-ok) {
  box-shadow: inset 0 0 0 1px var(--sk-accent), 0 6px 14px -8px rgba(0, 0, 0, .5);
}
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .g__hand .pc.is-off { filter: none; opacity: .5; }
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .g__mark.is-pen { color: var(--sk-on); }
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .g__seg { border-radius: 3px; background: transparent; }
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .g__seg button,
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .g__btn { border-radius: 2px; }
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .g__seg button[aria-pressed="true"],
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .g__btn--one[aria-pressed="true"],
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .b__row.is-best { background: color-mix(in srgb, var(--sk-accent) 14%, transparent); }
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .b__tip,
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .g__bubble { background: var(--sk-sheet); color: var(--sk-fg); box-shadow: inset 0 0 0 1px var(--sk-accent); }
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .b__tip .g__link { color: var(--sk-accent); }

/* выбор стола в окне достижений: плитка — образец, название, условие */
.skins__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.skin {
  display: grid; align-content: start; justify-items: start; gap: 5px; min-width: 0; padding: 8px 8px 10px;
  border-radius: 8px; border: 1px solid var(--p-line); background: transparent; color: var(--p-fg);
  font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s;
}
.skin:hover, .skin:focus-visible { border-color: var(--p-accent); }
.skin.is-on { border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); background: var(--p-chip-bg); }
.skin.is-locked { cursor: default; }
.skin.is-locked:hover { border-color: var(--p-line); }
.skin__pv {
  display: block; width: 100%; aspect-ratio: 16 / 10; border: 5px solid transparent; border-radius: 4px; overflow: hidden;
  background-clip: padding-box; box-shadow: 0 6px 12px -8px rgba(0, 0, 0, .6);
}
.skin.is-locked .skin__pv { filter: grayscale(.75) brightness(.8); }
.skin__pv--classic {
  border-image: var(--uz-kaima) 10 round;
  background: var(--uz-cloth) center / 22px 22px, radial-gradient(120% 90% at 50% 15%, #1d8850 0%, #08301e 75%) #08301e;
  background-clip: padding-box;
}
.skin__pv--chaihana {
  border-image: var(--sk-carpet-kaima) 10 round;
  background: var(--sk-teaset) right 3px bottom 2px / 42% auto no-repeat, var(--sk-carpet-medal) 40% 50% / 64% auto no-repeat,
    var(--sk-carpet-field) center / 16px 16px, var(--sk-felt-chaihana);
  background-clip: padding-box;
}
.skin__pv--samarkand {
  border-image: var(--sk-night-kaima) 10 round;
  background: var(--sk-registan) center bottom / 100% auto no-repeat, var(--sk-stars) 0 0 / 80px 80px, var(--sk-felt-samarkand);
  background-clip: padding-box;
}
.skin__pv--term {
  position: relative; border: 1px solid #173a22;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px), #0a140d;
}
.skin__pv--term::after {
  content: ">_"; position: absolute; left: 8px; bottom: 6px;
  font: 400 13px/1 "Cascadia Mono", Consolas, monospace; color: #39ff88; text-shadow: 0 0 6px rgba(57, 255, 136, .5);
}
/* образец рубашки — три карты внахлёст на сукне (рисунок — переменная --pv с плитки) */
.skin__pv--back {
  border: 0; padding: 6px 0;
  background: var(--pv) 50% 50% / auto 86% no-repeat, var(--pv) 27% 50% / auto 74% no-repeat, var(--pv) 73% 50% / auto 74% no-repeat,
    radial-gradient(120% 90% at 50% 15%, #1d8850 0%, #08301e 75%) #08301e;
}
.skin__name { font: 400 12px/1.2 var(--v-label); letter-spacing: .1em; text-transform: uppercase; overflow-wrap: anywhere; }
.skin__note { font-size: 11px; line-height: 1.3; color: var(--p-muted); }
.skin.is-on .skin__note { color: var(--p-accent); }
.skins__term { margin: 0; font-size: 13px; line-height: 1.4; color: var(--p-muted); }
@media (max-width: 560px) {
  .skins__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
:root[data-egg="term"] .skin, :root[data-egg="term"] .skin__pv { border-radius: 3px; }

/* ===================================================================
   Школа Буры (js/school.js): окно с пятью уроками — как окно достижений. Стол задачи — сукно
   (или выбранный стол), карты — те же .pc, колода с козырем — та же .b__deck, что у «Буры»
   =================================================================== */
.g__school { display: inline-flex; align-items: center; gap: 6px; }
.g__school-dots { display: inline-flex; gap: 2px; }
.g__school-dots i { width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; }
.g__school-dots i.is-on { background: currentColor; }

.school {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px;
  background: rgba(4, 20, 12, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: rise .35s var(--spring) both;
}
.school__box {
  width: min(100%, 520px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  display: grid; gap: 14px; padding: 18px 20px 20px; border-radius: 10px;
  background: var(--p-bg); color: var(--p-fg); border: 1px solid var(--p-line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.school__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.school .school__title { margin: 0; text-transform: none; letter-spacing: 0; font: 400 clamp(24px, 4vw, 32px)/1.05 var(--p-display); color: var(--p-accent); }
.school__close {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--p-line); background: transparent;
  color: var(--p-fg); font-size: 22px; line-height: 1; cursor: pointer;
}
.school__close:hover, .school__close:focus-visible { border-color: var(--p-accent); }
/* точки уроков: пройденные закрашены, текущий обведён */
.school__dots { display: flex; flex-wrap: wrap; gap: 8px; }
.school__dot {
  width: 32px; height: 32px; padding: 0; border-radius: 50%; border: 1px solid var(--p-line); background: transparent; cursor: pointer;
  font: 400 13px/1 var(--v-label); color: var(--p-muted); font-variant-numeric: tabular-nums; transition: background .2s, box-shadow .2s;
}
.school__dot:hover, .school__dot:focus-visible { border-color: var(--p-accent); }
.school__dot.is-done { background: var(--p-accent); border-color: transparent; color: var(--p-on-accent); }
.school__dot[aria-current] { color: var(--p-fg); box-shadow: 0 0 0 2px var(--p-bg), 0 0 0 4px var(--p-accent); }
.school__dot.is-done[aria-current] { color: var(--p-on-accent); }

.school__lesson { display: grid; gap: 6px; }
.school__kicker { margin: 0; font: 400 11px/1 var(--v-label); letter-spacing: .14em; text-transform: uppercase; color: var(--p-muted); }
.school .school__h { margin: 2px 0 4px; font: 400 clamp(24px, 3.6vw, 30px)/1.1 var(--p-display); color: var(--p-fg); text-transform: none; letter-spacing: 0; }
.school__h:focus:not(:focus-visible) { outline: none; }
.school__p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--p-fg2); }
/* урок 1: старшинство слева направо, под каждой картой — очки */
.school__cap { margin: 6px 0 0; font: 400 11px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted); }
.school__ranks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.school__ranks li { display: grid; justify-items: center; gap: 4px; padding: 7px 0 6px; border-radius: 6px; border: 1px solid var(--p-line); font-variant-numeric: tabular-nums; }
.school__ranks b { font: 400 16px/1 var(--v-label); color: var(--p-fg); }
.school__ranks span { font-size: 12px; line-height: 1; color: var(--p-muted); }
.school__ranks li.is-pts { border-color: var(--v-chip-line); background: var(--p-chip-bg); }
.school__ranks li.is-pts span { color: var(--p-accent); }

.school__task { display: grid; gap: 10px; }
.school__ask { margin: 0; font-size: 15px; line-height: 1.45; color: var(--p-fg); }
/* стол задачи: тёмное сукно, светлый текст — в любой теме сайта (как сами столы) */
.school__felt {
  --p-fg: #eff7f1; --p-muted: #cfe5d8; --p-accent: #ffc246; --p-on-accent: #08301e; --p-line: rgba(255, 255, 255, .14);
  --v-sheet: #0b3a24; --v-chip-line: rgba(255, 194, 70, .35);
  display: grid; justify-items: center; gap: 8px; min-width: 0; padding: 14px 10px 16px; border-radius: 8px; border: 1px solid var(--p-line);
  color: var(--p-fg); background: var(--uz-cloth) center / 40px 40px, radial-gradient(120% 100% at 50% 0%, #136a3c 0%, #08301e 80%) #08301e;
}
.school__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; }
.school__deck { flex: none; }
.school__lead { display: grid; justify-items: center; gap: 8px; }
.school__label { font: 400 11px/1.2 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-fg); text-align: center; }
.school__cards { display: flex; gap: 6px; }
.school__cards .pc { --w: 50px; }
.school__hand { display: flex; justify-content: center; gap: 8px; padding-top: 14px; min-width: 0; }
.school__hand .pc { --w: 56px; cursor: pointer; transition: translate .25s var(--spring), box-shadow .2s; }
.school__hand .pc:not(:disabled):hover, .school__hand .pc:not(:disabled):focus-visible { translate: 0 -6px; }
.school__hand .pc.is-picked { translate: 0 -12px; box-shadow: 0 0 0 3px var(--p-accent), 0 12px 20px -10px rgba(0, 0, 0, .7); }
.school__hand .pc:disabled { cursor: default; color: var(--v-black); }
.school__hand .pc.pc--red:disabled { color: var(--v-red); }
/* варианты ответа: руки из четырёх маленьких карт или числа штрафных */
.school__opts { display: grid; gap: 8px; justify-items: center; }
.school__opt {
  display: inline-flex; align-items: center; justify-content: center; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--p-line); background: rgba(0, 0, 0, .2); color: var(--p-fg); transition: border-color .2s, background .2s, box-shadow .2s;
}
.school__opt:not(:disabled):hover, .school__opt:focus-visible { border-color: var(--p-accent); }
.school__opt.is-picked { border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); }
.school__opt.is-right { background: color-mix(in srgb, var(--p-accent) 22%, transparent); }
.school__opt:disabled { cursor: default; }
.school__opt .school__cards { gap: 4px; }
.school__opt .school__cards .pc { --w: 34px; border-radius: 5px; }
.school__opt .pc b { top: 3px; left: 4px; font-size: 11px; }
.school__opts--num { grid-template-columns: repeat(4, auto); gap: 10px; }
.school__opts--num .school__opt { width: 52px; height: 52px; padding: 0; border-radius: 50%; }
.school__num { font: 400 22px/1 var(--v-label); }
.school__score { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.school__chip {
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--p-line); background: var(--v-sheet);
  font: 400 12px/1 var(--v-label); letter-spacing: .1em; text-transform: uppercase; color: var(--p-fg); font-variant-numeric: tabular-nums;
}
/* итог проверки: похвала — цветом акцента, подсказка — с полоской слева; место занято заранее, окно не прыгает */
.school__msg { margin: 0; min-height: 1.45em; font-size: 14px; line-height: 1.45; color: var(--p-fg2); }
.school__msg.is-ok { color: var(--p-accent); }
.school__msg.is-hint { padding-left: 10px; border-left: 3px solid var(--p-accent); color: var(--p-fg); }
.school__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (max-width: 480px) {
  .school { padding: 10px; }
  .school__box { gap: 12px; padding: 14px 14px 16px; max-height: calc(100dvh - 20px); }
  .school__felt { padding-inline: 6px; }
  .school__hand { gap: 5px; }
  .school__hand .pc { --w: 50px; }
  .school__cards .pc { --w: 44px; }
  .school__ranks { gap: 3px; }
  .school__ranks b { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .school { animation: none; }
  .school__hand .pc, .school__dot, .school__opt { transition: none; }
}
/* тема «Терминал»: окно и стол задачи — в её цветах, как всё остальное у TUZ */
:root[data-egg="term"] .school__box, :root[data-egg="term"] .school__opt, :root[data-egg="term"] .school__ranks li,
:root[data-egg="term"] .school__chip { border-radius: 3px; }
:root[data-egg="term"] .p-velaro .school__felt {
  --p-fg: var(--tm-fg); --p-muted: var(--tm-muted); --p-accent: var(--tm-acc); --p-on-accent: var(--tm-on); --p-line: var(--tm-line);
  --v-sheet: var(--tm-sheet); --v-chip-line: var(--tm-line);
  border-radius: 3px; background: var(--tm-raise); border-color: var(--tm-line);
}

/* ===================================================================
   TUZ: турнир, профиль, открытка (js/tourney.js, js/profile.js, js/postcard.js).
   Вкладки окна достижений, графики профиля, сетка турнира и окно открытки — в цветах окна (--p-*),
   цвета графиков — --pf-*: победы и «с друзьями» — золото, поражения и «против компьютера» — синий
   (пара проверена на различимость при нарушениях цветового зрения), остальное — приглушённое.
   =================================================================== */
.p-velaro { --pf-win: #bd860c; --pf-loss: #4d8fd0; --pf-rest: rgba(239, 247, 241, .3); --pf-grid: rgba(239, 247, 241, .14); --pf-ink: #04150c; }
:root[data-theme="light"] .proj.p-velaro { --pf-win: #8a5e00; --pf-loss: #2f6fb0; --pf-rest: rgba(16, 38, 26, .22); --pf-grid: rgba(16, 38, 26, .14); --pf-ink: #ffffff; }
:root[data-egg="term"] .p-velaro.p-velaro { --pf-win: var(--tm-acc); --pf-loss: var(--tm-amber); --pf-rest: var(--tm-line); --pf-grid: var(--tm-line); --pf-ink: var(--tm-on); }

/* ---------- окно достижений: вкладки «Значки · Профиль · Турнир»; точка на полке — ждёт матч турнира ---------- */
.trophy__panel { display: grid; gap: 18px; min-width: 0; }
.trophy__tabs { display: flex; gap: 4px; width: max-content; max-width: 100%; padding: 4px; border-radius: 999px; border: 1px solid var(--p-line); background: var(--p-chip-bg); }
.trophy__tab {
  border: 0; cursor: pointer; padding: 9px 16px; border-radius: 999px; background: transparent;
  font: 400 12px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted);
  transition: background .25s var(--ease-soft, ease), color .25s;
}
.trophy__tab[aria-selected="true"] { background: var(--p-accent); color: var(--p-on-accent); }
.trophy__tab:not([aria-selected="true"]):hover { color: var(--p-fg); }
.trophy__tab:focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.trophy__cup { margin-right: .35em; }
.ach__btn { position: relative; }
.ach__btn.has-turn::after {
  content: ""; position: absolute; top: 3px; right: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--p-accent); box-shadow: 0 0 0 2px var(--p-bg);
}
@media (max-width: 380px) { .trophy__tab { padding-inline: 11px; letter-spacing: .08em; } }

/* ---------- профиль игрока ---------- */
.pf { display: grid; gap: 18px; min-width: 0; }
.pf__head { display: grid; gap: 4px; }
.pf .pf__title { margin: 0; font: 400 clamp(22px, 3.4vw, 28px)/1.1 var(--p-display); color: var(--p-fg); text-transform: none; letter-spacing: 0; }
.pf__note, .pf__sum, .pf__empty { margin: 0; font-size: 13px; line-height: 1.45; color: var(--p-muted); }
.pf__empty { font-size: 15px; color: var(--p-fg2); }
.pf__tiles { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pf__tile { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--p-line); }
.pf__tile.is-hero { border-color: var(--v-chip-line); background: var(--p-chip-bg); }
.pf__tile dt { font: 400 11px/1.2 var(--v-label); letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); }
.pf__tile dd { margin: 0; }
.pf__num { font: 400 30px/1 var(--v-label); color: var(--p-fg); }
.pf__tile.is-hero .pf__num { color: var(--p-accent); }
.pf__sub { font-size: 12px; line-height: 1.3; color: var(--p-muted); }
@media (max-width: 520px) { .pf__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* последние партии: квадрат на партию, буква — для тех, кто не различает цвета */
.pf__form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pf__form-cap { font: 400 11px/1.2 var(--v-label); letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); }
.pf__form-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.pf__res { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 4px; font: 400 11px/1 var(--v-label); }
.pf__res.is-win { background: var(--pf-win); color: var(--pf-ink); }
.pf__res.is-loss { background: var(--pf-loss); color: var(--pf-ink); }
.pf__res.is-tie { background: var(--pf-rest); color: var(--p-fg); }
.pf__fig { margin: 0; display: grid; gap: 8px; min-width: 0; }
.pf__cap { font: 400 12px/1.2 var(--v-label); letter-spacing: .14em; text-transform: uppercase; color: var(--p-muted); }
.pf__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; color: var(--p-fg2); }
.pf__legend li { display: inline-flex; align-items: center; gap: 6px; }
.pf__key { width: 10px; height: 10px; border-radius: 2px; }
.pf__key.is-win, .pf__key.is-duel { background: var(--pf-win); }
.pf__key.is-loss, .pf__key.is-cpu { background: var(--pf-loss); }
.pf__svg { display: block; max-width: 100%; height: auto; overflow: visible; }
.pf__grid { stroke: var(--pf-grid); stroke-width: 1; }
.pf__base { stroke: var(--p-muted); stroke-width: 1; }
.pf__tick { font: 400 11px var(--v-label); fill: var(--p-muted); letter-spacing: .04em; }
.pf__tick.is-now { fill: var(--p-fg); }
.pf__label { font: 400 14px var(--p-font); fill: var(--p-fg); }
.pf__sym { font-family: "Segoe UI Symbol", serif; fill: var(--p-fg); }
.pf__sym.is-red { fill: var(--v-red-ui); }
.pf__val { font: 400 13px var(--v-label); fill: var(--p-fg2); }
.pf__m.is-win, .pf__m.is-fav, .pf__m.is-duel { fill: var(--pf-win); }
.pf__m.is-loss, .pf__m.is-cpu { fill: var(--pf-loss); }
.pf__m.is-rest { fill: var(--pf-rest); }
.pf__hit { fill: transparent; }
.pf__hit:hover { fill: var(--pf-grid); }

/* ---------- турнир выходного дня ---------- */
.tn { display: grid; gap: 14px; min-width: 0; }
.tn__head { display: grid; gap: 4px; }
.tn .tn__title { margin: 0; font: 400 clamp(22px, 3.4vw, 28px)/1.1 var(--p-display); color: var(--p-fg); text-transform: none; letter-spacing: 0; }
.tn__meta { margin: 0; font: 400 12px/1.4 var(--v-label); letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); }
.tn__lead { margin: 0; font-size: 14px; line-height: 1.5; color: var(--p-fg2); }
.tn__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--p-muted); }
.tn__ro { padding-left: 10px; border-left: 3px solid var(--p-line); }
.tn__msg { margin: 0; padding-left: 10px; border-left: 3px solid var(--p-accent); font-size: 14px; color: var(--p-fg); }
.tn__count { margin: 0; font: 400 13px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-accent); }
.tn__list { margin: 0; padding-left: 1.6em; display: grid; gap: 6px; font-size: 15px; color: var(--p-fg); }
.tn__list li::marker { font-family: var(--v-label); color: var(--p-accent); }
.tn__list li.is-me { color: var(--p-accent); }
.tn__tag { margin-left: 8px; font: 400 11px/1 var(--v-label); letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); }
.tn__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tn__create { display: grid; gap: 12px; justify-items: start; padding: 12px; border-radius: 8px; border: 1px dashed var(--v-chip-line); }
.tn__opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.tn__opt-label { min-width: 5.5em; font: 400 11px/1 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted); }
.tn .g__seg { background: transparent; }
.tn .g__seg button { color: var(--p-fg2); }
.tn .g__seg button[aria-pressed="true"] { background: var(--p-accent); color: var(--p-on-accent); }
.tn__champ {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--v-chip-line); background: var(--p-chip-bg);
}
.tn__champ p { margin: 0; font: 400 clamp(20px, 3vw, 24px)/1.2 var(--p-display); color: var(--p-accent); }
.tn__cup { font-size: 30px; line-height: 1; }
.tn__round { display: grid; gap: 8px; }
.tn .tn__rh { margin: 0; font: 400 12px/1 var(--v-label); letter-spacing: .14em; text-transform: uppercase; color: var(--p-muted); }
.tn__matches { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.tn__match { display: grid; gap: 6px; align-content: start; min-width: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--p-line); }
.tn__match.is-mine { border-color: var(--p-accent); box-shadow: inset 0 0 0 1px var(--p-accent); }
.tn__pl { display: grid; grid-template-columns: 1.5em minmax(0, 1fr) auto; align-items: baseline; gap: 6px; font-size: 15px; color: var(--p-fg); }
.tn__seed { font: 400 11px/1 var(--v-label); color: var(--p-muted); text-align: right; font-variant-numeric: tabular-nums; }
.tn__nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tn__nm.is-tbd { color: var(--p-muted); font-style: italic; }
.tn__pl.is-win .tn__nm { color: var(--p-accent); }
.tn__match.is-done .tn__pl:not(.is-win), .tn__match.is-wo .tn__pl:not(.is-win), .tn__match.is-bye .tn__pl:not(.is-win) { color: var(--p-muted); }
.tn__sc { font: 400 14px/1 var(--v-label); color: var(--p-fg2); font-variant-numeric: tabular-nums; }
.tn__st { margin: 0; font: 400 11px/1.35 var(--v-label); letter-spacing: .08em; text-transform: uppercase; color: var(--p-muted); }
.tn__match.is-live .tn__st { color: var(--p-accent); }
.tn__match.is-live .tn__st::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: 1px;
  background: currentColor; animation: tn-live 1.4s ease-in-out infinite;
}
@keyframes tn-live { 50% { opacity: .25; } }
.tn__match.is-dispute .tn__st { color: var(--v-red-ui); }
.tn__match .tn__acts { gap: 6px 12px; }
.tn__match .g__btn { padding: 9px 12px; }
.tn__concede, .tn__cancel { color: var(--p-muted); }
.tn__cancel { justify-self: start; }
.tn__next { display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--p-line); }

/* ---------- открытка с результатом: окно с картинкой ---------- */
.pcard {
  position: fixed; inset: 0; z-index: 61; display: grid; place-items: center; padding: 16px;
  background: rgba(4, 20, 12, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  animation: rise .35s var(--spring) both;
}
.pcard__box {
  width: min(100%, 440px); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  display: grid; gap: 12px; padding: 16px 18px 18px; border-radius: 10px;
  background: var(--p-bg); color: var(--p-fg); border: 1px solid var(--p-line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8);
}
.pcard__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pcard .pcard__title { margin: 0; text-transform: none; letter-spacing: 0; font: 400 clamp(22px, 4vw, 28px)/1.1 var(--p-display); color: var(--p-accent); }
.pcard__close {
  flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--p-line); background: transparent;
  color: var(--p-fg); font-size: 22px; line-height: 1; cursor: pointer;
}
.pcard__close:hover, .pcard__close:focus-visible { border-color: var(--p-accent); }
.pcard__pic { display: grid; place-items: center; min-height: 120px; border-radius: 8px; background: rgba(0, 0, 0, .18); }
.pcard__img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(52vh, 480px); border-radius: 6px; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .8); }
.pcard__img:not([src]) { visibility: hidden; height: 300px; }
.pcard__field { display: grid; gap: 6px; font: 400 11px/1.2 var(--v-label); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted); }
.pcard__name {
  min-width: 0; padding: 10px 12px; border-radius: 6px; border: 1px solid var(--p-line); background: rgba(0, 0, 0, .18);
  font: 400 16px/1.2 var(--p-font); letter-spacing: 0; text-transform: none; color: var(--p-fg);
}
.pcard__name::placeholder { color: var(--p-muted); }
.pcard__name:focus { outline: 2px solid var(--p-accent); outline-offset: 1px; }
.pcard__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.pcard__hint, .pcard__msg { margin: 0; font-size: 13px; line-height: 1.4; color: var(--p-muted); }
.pcard__msg { min-height: 1.4em; color: var(--p-fg); }
:root[data-theme="light"] .proj.p-velaro .pcard__pic, :root[data-theme="light"] .proj.p-velaro .pcard__name { background: rgba(16, 38, 26, .06); }
@media (max-width: 480px) {
  .pcard { padding: 10px; }
  .pcard__box { padding: 14px; max-height: calc(100dvh - 20px); }
}
@media (prefers-reduced-motion: reduce) {
  .pcard { animation: none; }
  .trophy__tab { transition: none; }
  .tn__match.is-live .tn__st::before { animation: none; }
}
/* «Терминал»: скругления как у остального окна */
:root[data-egg="term"] .trophy__tabs, :root[data-egg="term"] .trophy__tab, :root[data-egg="term"] .pf__tile, :root[data-egg="term"] .tn__match,
:root[data-egg="term"] .tn__create, :root[data-egg="term"] .tn__champ, :root[data-egg="term"] .pcard__box, :root[data-egg="term"] .pcard__pic { border-radius: 3px; }

/* ===================================================================
   TUZ: раздача, салют, подсказки с объяснением (js/tables.js, js/vfx.js).
   «Почему этот ход?» — под кнопками хода. Пустая строка выпадает из сетки стола и места не занимает,
   но остаётся живой областью: новое объяснение диктор прочтёт сам. Раздача и салют — слои поверх
   стола, сквозь которые проходят нажатия: игра под ними работает как обычно.
   =================================================================== */
.vt__why {
  width: 100%; max-width: 440px; margin: 0; padding: 9px 12px 10px; border-radius: 8px;
  border: 1px solid var(--p-line); border-left: 3px solid var(--p-accent); background: var(--v-sheet);
  color: var(--p-fg); font-size: 14px; line-height: 1.45; text-align: left; box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .8);
}
.vt__why:empty { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; box-shadow: none; }
.vt__why b { display: block; margin-bottom: 3px; font: 400 11px/1.2 var(--v-label); letter-spacing: .14em; text-transform: uppercase; color: var(--p-accent); }
.vt__why.is-new { animation: rise .4s var(--spring) both; }
.vt.is-watch .vt__why { display: none; }
/* подсказанная карта приподнята и светится, подсказанная кнопка или масть — в золотой рамке */
.g__hand .pc.is-hint {
  translate: 0 -14px; z-index: 1;
  box-shadow: 0 0 0 3px var(--p-accent), 0 0 20px 2px color-mix(in srgb, var(--p-accent) 50%, transparent), 0 10px 18px -8px rgba(0, 0, 0, .6);
}
.g__btn.is-hint { border-color: var(--p-accent); box-shadow: 0 0 0 1px var(--p-accent), 0 0 16px color-mix(in srgb, var(--p-accent) 40%, transparent); }
.g__suits button.is-hint { box-shadow: 0 0 0 3px var(--p-accent), 0 8px 16px -8px rgba(0, 0, 0, .6); }
/* «Буре» перед первым коном: подсказка к выбору масти */
.g__suits .g__suits-why { max-width: 32ch; margin: 0; padding: 0 14px; text-align: center; font: 400 13px/1.45 var(--p-font); letter-spacing: 0; text-transform: none; color: var(--p-fg); }

/* раздача: летящие к соперникам рубашки — копии в слое над столом, под окнами масти и итогов */
.vfx-deal { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.vfx-deal .pc { position: absolute; margin: 0; }
/* победа: холст с каскадом карт поверх стола; гаснет сам */
.vfx-win { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; pointer-events: none; border-radius: inherit; transition: opacity .6s ease; }
.vfx-win.is-out { opacity: 0; }
/* при «меньше движения» вместо каскада — неподвижная надпись под строкой инструментов */
.vfx-flourish {
  position: absolute; left: 50%; top: calc(var(--g-top, 0px) + 10px); z-index: 8; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 8px 18px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  background: var(--v-sheet); border: 1px solid var(--p-accent); box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .8);
  font: 400 18px/1 "Segoe UI Symbol", serif; color: var(--p-accent);
}
.vfx-flourish i { font-style: normal; }
.vfx-flourish b { font: 400 clamp(24px, 4vw, 30px)/1 var(--p-display); color: var(--p-accent); }
@media (prefers-reduced-motion: reduce) {
  .vt__why.is-new { animation: none; }
  .vfx-win { transition: none; }
}
/* «Терминал» (тема сайта и стол): прямые углы, свечение — цветом экрана */
:root[data-egg="term"] .vt__why, :root[data-egg="term"] .vfx-flourish,
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .vt__why,
:root[data-vskin="term"]:not([data-egg="term"]) .proj.p-velaro .vfx-flourish { border-radius: 2px; }
:root[data-egg="term"] .p-velaro .g__hand .pc.is-hint { box-shadow: inset 0 0 0 2px var(--tm-acc), 0 0 16px color-mix(in srgb, var(--tm-acc) 50%, transparent); }

/* ===================================================================
   Domcook: режим готовки, рецепт дня, история (js/cook.js, js/fstory.js, рецепты — js/fridge-data.js).
   Цвета — палитра страницы (--p-*). Свои только у кнопок: терракота в светлой теме темнее, в тёмной светлее,
   чтобы надпись держала контраст не ниже 4,5:1 (--fc-ink — текст и линии, --fc-btn/--fc-on — кнопка).
   Блюда — на ляганах, как в подборе. Движение — только transform и opacity.
   =================================================================== */
.p-fridge { --fc-ink: #86451a; --fc-btn: #a85a28; --fc-on: #ffffff; --fc-frame: #2e2b25; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .p-fridge { --fc-ink: #e9a77a; --fc-btn: #e9a77a; --fc-on: #17130f; --fc-frame: #0b0907; }
}
:root[data-theme="dark"] .p-fridge { --fc-ink: #e9a77a; --fc-btn: #e9a77a; --fc-on: #17130f; --fc-frame: #0b0907; }
:root[data-egg="term"] .p-fridge { --fc-ink: var(--tm-acc); --fc-btn: var(--tm-acc); --fc-on: var(--tm-on); --fc-frame: var(--tm-line); }

/* кнопки «Готовить» и главные кнопки режима готовки */
.fcd__go, .fr__cook, .cook__next, .cook__t-go {
  border: 0; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--p-font);
  color: var(--fc-on); background: var(--fc-btn);
}
/* подбор: «Готовить» рядом с «+ в покупки»; надписи терракотой — тем же контрастным тоном */
.fr__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.fr__acts .fr__add { margin-top: 0; }
.p-fridge .fr__add { color: var(--fc-ink); border-color: color-mix(in srgb, var(--fc-ink) 55%, transparent); }
.p-fridge .fr__add[aria-pressed="true"], .p-fridge .fr__shop-copy { color: var(--fc-on); background: var(--fc-btn); border-color: var(--fc-btn); }
.fr__cook { padding: 6px 13px; font-size: 12.5px; line-height: 1.2; border: 1px solid var(--fc-btn); }
/* светлая тема: метка «Бета» и номер экрана «Живого телефона» терракотой не дотягивали до 4,5:1 — тот же тёмный тон */
.p-fridge .proj__chip--stage, .p-fridge .ph__cap-n, .p-fridge .ph__toc-btn[aria-current="true"] .ph__toc-n { color: var(--fc-ink); }

/* ---------- «Рецепт дня»: карточка в шапке страницы ----------
   Высоты заданы заранее: тексты вписывает js/cook.js, и карточка от этого не меняет размер */
.fcd {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "kick kick" "plate body" "foot foot";
  column-gap: 18px; row-gap: 12px; align-items: center;
  max-width: 540px; padding: 16px 18px 14px; border-radius: 14px;
  background: var(--p-card); border: 1px solid var(--p-line); box-shadow: 0 16px 34px -26px rgba(46, 43, 37, .6);
}
/* «РЕЦЕПТ ДНЯ ——— 5 ОКТЯБРЯ»: дата справа от линии — вписанная дата укорачивает линию, но ничего не сдвигает */
.p-fridge .fcd__kick { grid-area: kick; margin: 0; min-height: 15px; }
.p-fridge .fcd__kick::after { order: 1; }
.fcd__date { order: 2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fcd__plate { grid-area: plate; width: 120px; height: 120px; }
.fcd__img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; }
:root:not([data-egg="term"]) .fcd__img, :root:not([data-egg="term"]) .cook__img, :root:not([data-egg="term"]) .cook__done-img,
:root:not([data-egg="term"]) .fst__plates img, :root:not([data-egg="term"]) .fst__mosaic img,
:root:not([data-egg="term"]) .fst__list img, :root:not([data-egg="term"]) .fst__photo img {
  background: var(--uz-lagan) center / 100% 100% no-repeat; box-shadow: 0 8px 14px -9px rgba(46, 43, 37, .7);
}
:root:not([data-egg="term"]) .fcd__img { padding: 12px; }
/* строки текста — постоянной высоты: название до двух строк прижато книзу, подпись и время — по строке,
   поэтому кнопка стоит на месте и до того, как скрипт вписал блюдо, и после */
.fcd__body { grid-area: body; min-width: 0; height: 146px; display: grid; grid-template-rows: minmax(0, 1fr) 19px 18px 46px; row-gap: 4px; justify-items: start; }
.fcd__name {
  align-self: end; margin: 0; font: 600 22px/1.15 var(--p-display); color: var(--p-fg);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fcd__sub, .fcd__meta { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p-muted); }
.fcd__sub { font-size: 14px; line-height: 19px; }
.fcd__meta { font-size: 13px; line-height: 18px; font-variant-numeric: tabular-nums; }
.fcd__go { align-self: end; min-height: 40px; padding: 0 20px; }
.fcd__foot { grid-area: foot; margin: 0; padding-top: 10px; border-top: 1px solid var(--p-line); display: grid; gap: 2px; font-size: 13px; line-height: 1.4; }
.fcd__streak { min-height: 18px; font-weight: 700; color: var(--fc-ink); }
.fcd__note { color: var(--p-muted); }
.page.is-entering .proj__intro > .fcd { animation-delay: .36s; }

/* ---------- «Сейчас осень — что приготовить»: три блюда времени года (js/cook.js), под «Рецептом дня» ----------
   Та же подложка и подпись с линией; размеры заданы заранее — блок не прыгает, когда скрипт вписал блюда */
.fcs { max-width: 540px; margin-top: 14px; padding: 14px 16px 14px; border-radius: 14px; background: var(--p-card); border: 1px solid var(--p-line); box-shadow: 0 16px 34px -26px rgba(46, 43, 37, .6); }
.p-fridge .fcs__kick { margin: 0 0 10px; min-height: 15px; }
.fcs__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.fcs__dish {
  position: relative; width: 100%; height: 100%; display: grid; justify-items: center; align-content: start; gap: 6px; padding: 8px 4px 10px;
  border: 1px solid transparent; border-radius: 12px; background: none; cursor: pointer; font: inherit; color: var(--p-fg); text-align: center;
  transition: border-color .2s, background .2s;
}
.fcs__dish:hover, .fcs__dish:focus-visible { border-color: color-mix(in srgb, var(--fc-ink) 45%, transparent); background: color-mix(in srgb, var(--fc-ink) 6%, transparent); }
.fcs__dish:focus-visible { outline: 2px solid var(--fc-ink); outline-offset: 2px; }
.fcs__plate, .fcs__plate img { display: block; width: 76px; height: 76px; border-radius: 50%; }
.fcs__plate img { object-fit: cover; }
:root:not([data-egg="term"]) .fcs__plate img { padding: 8px; background: var(--uz-lagan) center / 100% 100% no-repeat; box-shadow: 0 8px 14px -9px rgba(46, 43, 37, .7); }
.fcs__name { min-height: 2.5em; font: 600 15px/1.25 var(--p-display); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fcs__meta { min-height: 1.4em; font-size: 12px; line-height: 1.4; color: var(--p-muted); font-variant-numeric: tabular-nums; }
/* «Готовить» — только для экранного диктора: имя кнопки — «Готовить» и то, что на ней видно */
.fcs__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page.is-entering .proj__intro > .fcs { animation-delay: .42s; }
@media (max-width: 480px) {
  .fcs { padding: 12px 10px; }
  .fcs__plate, .fcs__plate img { width: 64px; height: 64px; }
  :root:not([data-egg="term"]) .fcs__plate img { padding: 7px; }
  .fcs__name { font-size: 14px; }
}
:root[data-egg="term"] .fcs { border-radius: 3px; box-shadow: none; }
@media (max-width: 480px) {
  .fcd { grid-template-columns: 92px minmax(0, 1fr); column-gap: 14px; padding: 14px 14px 12px; }
  .fcd__plate, .fcd__img { width: 92px; height: 92px; }
  :root:not([data-egg="term"]) .fcd__img { padding: 9px; }
  .fcd__body { height: 136px; grid-template-rows: minmax(0, 1fr) 18px 18px 46px; }
  .fcd__name { font-size: 19px; }
  .fcd__sub { font-size: 13px; line-height: 18px; }
}

/* ---------- «Режим готовки»: окно во весь экран ---------- */
.cook {
  position: fixed; inset: 0; z-index: 1600; display: flex; justify-content: center;
  background: var(--p-bg); color: var(--p-fg); font-family: var(--p-font);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;   /* шаг въезжает сбоку — без полосы прокрутки вбок */
  animation: cook-in .32s cubic-bezier(.22, .7, .2, 1) both;
}
@keyframes cook-in { from { opacity: 0; transform: translateY(16px); } }
.cook__in {
  position: relative; width: min(100%, 1120px); min-height: 100%;
  display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; gap: 12px;
  padding: max(14px, env(safe-area-inset-top, 0px)) clamp(16px, 4vw, 40px) max(14px, env(safe-area-inset-bottom, 0px));
}
.cook__head { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.cook__img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
:root:not([data-egg="term"]) .cook__img { padding: 6px; }
.cook__id { min-width: 0; }
.cook__kick { margin: 0; font: 700 11.5px/1.2 var(--p-font); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted); }
.p-fridge .cook__name {
  display: block; margin: 3px 0 0; font: 600 clamp(20px, 3vw, 28px)/1.15 var(--p-display);
  letter-spacing: 0; text-transform: none; color: var(--p-fg); overflow-wrap: anywhere;
}
.p-fridge .cook__name::after { content: none; }   /* у заголовков страницы Domcook справа линия — здесь она не нужна */
.cook__next { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.cook__close, .cook__prev, .cook__ingbtn, .cook__t-reset {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; white-space: nowrap;
  border-radius: 999px; border: 1px solid var(--p-line); background: var(--p-card); color: var(--p-fg);
  font: 700 14px/1 var(--p-font); cursor: pointer;
}
.cook__close svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.cook__prog { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; }
.cook__count { margin: 0; font: 700 14px/1.2 var(--p-font); font-variant-numeric: tabular-nums; }
.cook__wake { margin: 0; justify-self: end; text-align: right; font-size: 12.5px; line-height: 1.3; color: var(--p-muted); }
.cook__wake.is-on { color: var(--p-fg2); }
.cook__wake.is-on::before { content: "☀︎ "; color: var(--fc-ink); }
.cook__bar, .cook__t-bar { grid-column: 1 / -1; display: block; height: 6px; border-radius: 6px; background: var(--p-line); overflow: hidden; }
.cook__bar i, .cook__t-bar i {
  display: block; height: 100%; background: var(--fc-ink); transform-origin: left center; transform: scaleX(0);
  transition: transform .4s cubic-bezier(.22, .7, .2, 1);
}
/* таймеры других шагов: место под полоску есть всегда, чтобы шаг под ней не прыгал */
.cook__runs { min-height: 36px; display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.cook__runs::-webkit-scrollbar { display: none; }
.cook__run {
  flex: none; padding: 8px 13px; border-radius: 999px; cursor: pointer; border: 1px solid var(--fc-ink);
  background: transparent; color: var(--fc-ink); font: 700 13px/1 var(--p-font); font-variant-numeric: tabular-nums;
}
.cook__run.is-paused { border-style: dashed; }
.cook__run.is-done { background: var(--fc-btn); color: var(--fc-on); border-color: var(--fc-btn); animation: cook-pulse 1s ease-in-out 3; }
.cook__body { position: relative; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.cook__ing { align-self: start; padding: 16px 18px; border-radius: 14px; background: var(--p-card); border: 1px solid var(--p-line); }
.cook__ing-h { margin: 0; font: 700 12px/1.2 var(--p-font); letter-spacing: .12em; text-transform: uppercase; color: var(--p-muted); }
.cook__ing-p { margin: 3px 0 8px; font-size: 13px; color: var(--p-muted); }
.cook__ing-list { list-style: none; margin: 0; padding: 0; }
.cook__ing-list li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--p-line); font-size: 15px; line-height: 1.35; }
.cook__ing-list li:last-child { border-bottom: 0; }
.cook__ing-list b { flex: none; font-weight: 700; color: var(--p-fg2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cook__stage { min-height: 0; display: grid; align-content: center; gap: 24px; padding: 6px 0; touch-action: pan-y; }
.cook__n { margin: 0; font: 700 14px/1 var(--p-font); letter-spacing: .1em; text-transform: uppercase; color: var(--fc-ink); }
.cook__text {
  margin: 12px 0 0; max-width: 34ch; font: 500 clamp(22px, 3.3vw, 38px)/1.38 var(--p-font); color: var(--p-fg);
  text-wrap: pretty; outline: none;
}
.cook__step.is-from-r, .cook__done.is-from-r { animation: cook-from-r .34s cubic-bezier(.22, .7, .2, 1) both; }
.cook__step.is-from-l, .cook__done.is-from-l { animation: cook-from-l .34s cubic-bezier(.22, .7, .2, 1) both; }
@keyframes cook-from-r { from { opacity: 0; transform: translateX(32px); } }
@keyframes cook-from-l { from { opacity: 0; transform: translateX(-32px); } }
.cook__timer {
  max-width: 540px; padding: 14px 18px 16px; border-radius: 16px; background: var(--p-card); border: 1px solid var(--p-line);
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "label label" "clock acts" "bar bar";
  gap: 10px 18px; align-items: center;
}
.cook__t-label { grid-area: label; margin: 0; font: 700 12px/1.2 var(--p-font); letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); }
.cook__clock { grid-area: clock; margin: 0; min-width: 4.2ch; font: 600 46px/1 var(--p-display); font-variant-numeric: tabular-nums; }
.cook__t-acts { grid-area: acts; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cook__t-go { min-height: 44px; padding: 0 22px; min-width: 7.5em; }
.cook__t-reset:disabled, .cook__prev:disabled { opacity: .45; cursor: default; }
.cook__t-bar { grid-area: bar; height: 5px; }
.cook__t-bar i { transition-duration: .25s; transition-timing-function: linear; }
.cook__timer.is-done { border-color: var(--fc-ink); }
.cook__timer.is-done .cook__t-label, .cook__timer.is-done .cook__clock { color: var(--fc-ink); }
.cook__timer.is-done .cook__clock { animation: cook-pulse .9s ease-in-out 4; }
@keyframes cook-pulse { 50% { opacity: .4; } }
.cook__done { display: grid; justify-items: center; gap: 12px; text-align: center; }
.cook__done-img { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; }
:root:not([data-egg="term"]) .cook__done-img { padding: 16px; }
.cook__done-t { margin: 8px 0 0; font: 600 clamp(28px, 4vw, 42px)/1.1 var(--p-display); }
.cook__done-p { margin: 0; color: var(--p-muted); }
.cook__again {
  min-height: 44px; padding: 0 20px; border-radius: 999px; cursor: pointer; border: 1px solid var(--fc-ink);
  background: transparent; color: var(--fc-ink); font: 700 14px/1 var(--p-font);
}
.cook__nav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 10px; align-items: center; }
.cook__prev { grid-column: 1; justify-self: start; min-height: 52px; padding: 0 20px; font-size: 15px; }
.cook__ingbtn { grid-column: 2; min-height: 52px; }
.cook__ingbtn[aria-expanded="true"] { background: var(--p-tint); border-color: var(--fc-ink); }
.cook__next { grid-column: 3; justify-self: end; min-height: 52px; padding: 0 26px; font-size: 16px; }
.cook__hint { margin: 0; text-align: center; font-size: 12.5px; color: var(--p-muted); }
.cook__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* широкий экран: состав всегда слева; узкий — состав по кнопке «Ингредиенты» вместо шага */
@media (min-width: 900px) {
  .cook__body { grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
  .cook__ing { max-height: calc(100dvh - 300px); overflow: auto; }
  .cook__ingbtn { display: none; }
}
@media (max-width: 899px) {
  .cook__ing { display: none; }
  .cook.is-ing .cook__ing { display: block; }
  .cook.is-ing .cook__stage { display: none; }
}
@media (max-width: 480px) {
  .cook__in { gap: 10px; }
  .cook__head { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; }
  .cook__img { width: 44px; height: 44px; }
  :root:not([data-egg="term"]) .cook__img { padding: 5px; }
  .cook__close { padding: 0 12px; }
  .cook__text { font-size: 21px; }
  .cook__timer { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "clock" "acts" "bar"; padding: 12px 14px 14px; }
  .cook__t-acts { justify-content: flex-start; }
  .cook__clock { font-size: 40px; }
  .cook__nav { gap: 8px; grid-template-columns: auto auto minmax(0, 1fr); }
  .cook__prev, .cook__ingbtn { padding: 0 12px; font-size: 14px; }
  .cook__next { justify-self: stretch; padding: 0 12px; font-size: 15px; }
}
@media (max-width: 360px) {
  .cook__prev { font-size: 0; width: 52px; padding: 0; }
  .cook__prev::before { content: "←"; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cook, .cook__step, .cook__done, .cook__run.is-done, .cook__timer.is-done .cook__clock { animation: none; }
}
:root[data-egg="term"] .cook__ing, :root[data-egg="term"] .cook__timer, :root[data-egg="term"] .fcd { border-radius: 3px; box-shadow: none; }
:root[data-egg="term"] .cook__close, :root[data-egg="term"] .cook__prev, :root[data-egg="term"] .cook__ingbtn, :root[data-egg="term"] .cook__t-reset,
:root[data-egg="term"] .cook__next, :root[data-egg="term"] .cook__t-go, :root[data-egg="term"] .cook__run, :root[data-egg="term"] .cook__again,
:root[data-egg="term"] .fcd__go, :root[data-egg="term"] .fr__cook { border-radius: 3px; }

/* ---------- «История Domcook»: картинка липнет, главы листаются мимо ---------- */
.fst { display: grid; gap: clamp(20px, 3vw, 32px); }
.fst__head { display: grid; gap: 10px; max-width: 640px; }
.proj .fst__head h2 { margin: 0; }
.fst__title { margin: 0; font: 600 clamp(30px, 4.4vw, 46px)/1.05 var(--p-display); text-wrap: balance; }
.fst__lead { margin: 0; max-width: 56ch; font-size: clamp(16px, 1.6vw, 18px); line-height: 1.55; color: var(--p-fg2); }
.fst__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
.fst__stage { position: sticky; top: 12px; z-index: 2; padding-bottom: 12px; background: var(--p-bg); }
.fst__screen {
  position: relative; overflow: hidden; container-type: size;
  height: clamp(210px, 36vh, 270px); border-radius: 22px; border: 6px solid var(--fc-frame);
  background: var(--p-card); box-shadow: 0 20px 40px -30px rgba(46, 43, 37, .7);
}
:root[data-theme="dark"] .fst__screen { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 20px 40px -30px rgba(0, 0, 0, .9); }
.fst__dots { margin: 10px 0 0; display: flex; justify-content: center; gap: 6px; }
.fst__dots i { position: relative; overflow: hidden; width: 22px; height: 4px; border-radius: 4px; background: var(--p-line); }
.fst__dots i::after {
  content: ""; position: absolute; inset: 0; background: var(--fc-ink); transform: scaleX(0); transform-origin: left center;
  transition: transform .45s cubic-bezier(.22, .7, .2, 1);
}
.fst__dots i.is-on::after { transform: scaleX(1); }
.fst__chs { list-style: none; margin: 0; padding: 0; }
.fst__ch { position: relative; min-height: 58vh; display: grid; align-content: start; gap: 10px; padding: 28px 0 28px 22px; }
.fst__ch::before, .fst__ch::after { content: ""; position: absolute; left: 0; top: 30px; bottom: 30px; width: 3px; border-radius: 3px; }
.fst__ch::before { background: var(--p-line); }
.fst__ch::after { background: var(--fc-ink); transform: scaleY(0); transform-origin: top center; transition: transform .5s cubic-bezier(.22, .7, .2, 1); }
.fst__ch.is-on::after { transform: scaleY(1); }
.fst__ch:last-child { min-height: 64vh; }
.fst__fig { display: none; }
.fst__when { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 700 12.5px/1.2 var(--p-font); letter-spacing: .1em; text-transform: uppercase; color: var(--p-muted); }
.fst__n { font: 600 22px/1 var(--p-display); letter-spacing: 0; color: var(--fc-ink); }
.fst__h { margin: 0; font: 600 clamp(22px, 2.6vw, 30px)/1.2 var(--p-display); text-wrap: balance; }
.fst__p { margin: 0; max-width: 54ch; font-size: 16.5px; line-height: 1.6; color: var(--p-fg2); }
/* телефон: картинка липнет под верхней полосой меню (она 71 px) */
@media (max-width: 860px) { .fst__stage { top: 71px; padding-top: 7px; } }
/* широко: картинка-телефон слева, главы справа; глава — почти экран высотой, текст по центру */
@media (min-width: 700px) and (max-width: 860px), (min-width: 1100px) {
  .fst__grid { grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); column-gap: clamp(32px, 5vw, 72px); }
  .fst__stage { top: max(20px, calc(50vh - 320px)); padding-bottom: 0; background: none; }
  .fst__screen { height: clamp(420px, calc(100vh - 170px), 580px); border-radius: 36px; border-width: 9px; }
  .fst__ch { min-height: 76vh; align-content: center; padding-block: 40px; }
  .fst__ch:first-child { min-height: 60vh; align-content: start; padding-top: 12vh; }
  .fst__ch:last-child { min-height: 80vh; }
}
@media (min-width: 700px) and (max-width: 860px) { .fst__stage { top: max(84px, calc(50vh - 280px)); } }
/* строка состояния и шапка приложения — только на высоком «телефоне» */
.fst__bar { position: absolute; left: 0; right: 0; top: 0; margin: 0; padding: 10px 18px 0; display: grid; gap: 8px; }
.fst__bar span { font: 600 11px/1 var(--p-font); color: var(--p-muted); font-variant-numeric: tabular-nums; }
.fst__bar b { display: flex; align-items: center; gap: 8px; font: 600 17px/1 var(--p-display); }
.fst__bar img { width: 22px; height: 22px; border-radius: 5px; }

/* сцены: лежат стопкой, видна одна; появляется сдвигом и прозрачностью, её детали — чуть следом */
.fst__scene {
  position: absolute; inset: 64px 0 0; display: grid; align-content: center; justify-items: center; gap: 4cqh;
  padding: 6cqh 7cqw; text-align: center; opacity: 0; transform: translateY(16px) scale(.97); pointer-events: none;
  transition: opacity .45s ease, transform .6s cubic-bezier(.22, .7, .2, 1);
}
.fst__scene.is-on { opacity: 1; transform: none; }
.fst__scene > * { margin: 0; opacity: 0; transform: translateY(10px); transition: opacity .4s ease .1s, transform .5s cubic-bezier(.22, .7, .2, 1) .1s; }
.fst__scene.is-on > * { opacity: 1; transform: none; }
.fst__scene.is-on > :nth-child(2) { transition-delay: .18s; }
.fst__scene.is-on > :nth-child(3) { transition-delay: .26s; }
.fst__scene.is-on > :nth-child(4) { transition-delay: .34s; }
.fst__q { font: 600 clamp(18px, 7cqw, 26px)/1.15 var(--p-display); }
.fst__chips, .fst__swaps { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.fst__chips span, .fst__swaps > span {
  padding: 6px 11px; border-radius: 999px; background: var(--p-tint); color: var(--p-fg); font: 600 13px/1.2 var(--p-font);
}
.fst__chips span::before { content: "✓ "; color: var(--fc-ink); }
.fst__arrow { width: 14px; height: 14px; border-right: 2px solid var(--fc-ink); border-bottom: 2px solid var(--fc-ink); transform: rotate(45deg); }
.fst__scene.is-on > .fst__arrow { transform: rotate(45deg); }
.fst__plates { display: flex; justify-content: center; gap: 3cqw; }
.fst__plates img { width: min(84px, 25cqw, 20cqh); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
:root:not([data-egg="term"]) .fst__plates img, :root:not([data-egg="term"]) .fst__mosaic img { padding: 6px; }
.fst__big { display: grid; gap: 2px; }
.fst__big b { font: 600 clamp(40px, 20cqw, 64px)/1 var(--p-display); color: var(--fc-ink); font-variant-numeric: tabular-nums; }
.fst__big span { font-size: 14px; line-height: 1.3; color: var(--p-muted); }
.fst__swaps > span { background: transparent; border: 1px solid var(--p-line); font-weight: 600; }
.fst__mosaic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; width: min(100%, 250px, 62cqh); }
.fst__mosaic img { width: 100%; height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.fst__list { list-style: none; padding: 0; width: min(100%, 300px); display: grid; gap: 8px; text-align: left; }
.fst__list li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border-radius: 12px; background: var(--p-bg); }
.fst__list img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
:root:not([data-egg="term"]) .fst__list img { padding: 4px; }
.fst__list b { font: 600 14px/1.2 var(--p-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fst__list em { font: 700 11px/1.2 var(--p-font); font-style: normal; padding: 4px 8px; border-radius: 999px; background: rgba(217, 160, 91, .2); color: var(--p-fg); white-space: nowrap; }
.fst__list em.is-ok { background: rgba(74, 99, 80, .18); }
.fst__shop { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; font-size: 13px; }
.fst__shop b { font: 600 14px/1.2 var(--p-display); }
.fst__shop span { padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--fc-ink); font-weight: 600; }
.fst__photo { position: relative; display: block; align-self: center; justify-self: center; padding: 6px; border: 2px dashed var(--fc-ink); border-radius: 50%; }
.fst__photo img { width: min(120px, 30cqh, 34cqw); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
:root:not([data-egg="term"]) .fst__photo img { padding: 10px; }
.fst__tags, .fst__check { list-style: none; padding: 0; display: grid; gap: 7px; text-align: left; font: 600 14px/1.3 var(--p-font); }
.fst__tags li { display: flex; align-items: center; gap: 8px; }
.fst__tags s { text-decoration-color: var(--fc-ink); text-decoration-thickness: 2px; }
.fst__tags li.is-off::before, .fst__check li::before {
  content: "✕"; flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; color: var(--fc-on); background: var(--fc-btn);
}
.fst__tags li.is-num b { font: 600 24px/1 var(--p-display); color: var(--fc-ink); }
.fst__check li { display: flex; align-items: center; gap: 9px; }
.fst__check li::before { content: "✓"; }
.fst__check li.is-now::before { content: ""; background: transparent; box-shadow: inset 0 0 0 2px var(--fc-ink); }
.fst__check li.is-now { flex-wrap: wrap; }
.fst__check em { font-style: normal; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: var(--fc-on); background: var(--fc-btn); }
.fst__days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; width: min(100%, 200px); }
.fst__days i { aspect-ratio: 1; border-radius: 5px; border: 1.5px solid var(--fc-ink); }
.fst__days i:nth-child(-n+3) { background: color-mix(in srgb, var(--fc-ink) 30%, transparent); }
.fst__facts { display: flex; justify-content: center; gap: 8cqw; }
.fst__fact { display: grid; justify-items: center; gap: 4px; max-width: 12em; font-size: 13px; line-height: 1.3; color: var(--p-muted); }
.fst__fact b { font: 600 30px/1 var(--p-display); color: var(--fc-ink); }
.fst__pill { padding: 8px 16px; border-radius: 999px; font: 700 14px/1.2 var(--p-font); color: var(--fc-on); background: var(--fc-btn); }
/* низкая широкая картинка (телефон и «меньше движения»): сцены раскладываются в ряд */
@container (orientation: landscape) {
  .fst__bar { display: none; }
  .fst__scene { inset: 0; gap: 3cqh; padding: 5cqh 5cqw; }
  .fst__s2 { grid-template-columns: 1fr 1fr; column-gap: 6cqw; }
  .fst__s2 .fst__swaps { grid-column: 1 / -1; }
  .fst__big b { font-size: clamp(34px, 22cqh, 52px); }
  .fst__mosaic { display: flex; flex-wrap: wrap; justify-content: center; width: min(100%, 190cqh, 340px); gap: 2cqw; }
  .fst__mosaic img { width: calc((100% - 8cqw) / 5); }
  .fst__s4 { gap: 2cqh; }
  .fst__list { gap: 5px; }
  .fst__list li { padding-block: 3px; }
  .fst__list img { width: 36px; height: 36px; }
  .fst__list li { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .fst__s5 { grid-template-columns: auto auto; column-gap: 6cqw; align-content: center; justify-content: center; }
  .fst__photo img { width: min(110px, 56cqh); }
  .fst__check { gap: 4px; font-size: 13px; }
  .fst__days { grid-template-columns: repeat(14, 1fr); width: min(100%, 320px); gap: 4px; }
  .fst__fact b { font-size: 26px; }
}
/* «меньше движения»: без липкой картинки — главы столбиком, у каждой своя картинка (её вставляет js/fstory.js) */
@media (prefers-reduced-motion: reduce) {
  .fst__stage { display: none; }
  .fst__grid { grid-template-columns: minmax(0, 1fr) !important; }
  .fst__ch, .fst__ch:first-child, .fst__ch:last-child { min-height: 0; align-content: start; padding: 22px 0 22px 22px; }
  .fst__ch::after { transform: none; }
  .fst__fig {
    display: block; position: relative; overflow: hidden; container-type: size; height: 230px; max-width: 460px;
    margin-bottom: 6px; border-radius: 18px; border: 1px solid var(--p-line); background: var(--p-card);
  }
  .fst__fig .fst__scene, .fst__fig .fst__scene > * { opacity: 1; transform: none; }
}
:root[data-egg="term"] .fst__screen { border-radius: 4px; border-width: 2px; box-shadow: none; }
:root[data-egg="term"] .fst__fig, :root[data-egg="term"] .fst__list li, :root[data-egg="term"] .fst__chips span,
:root[data-egg="term"] .fst__swaps > span, :root[data-egg="term"] .fst__pill, :root[data-egg="term"] .fst__check em { border-radius: 3px; }

/* ===================================================================
   Пасхалка: тема «Терминал» на страницах приложений (переменные --tm-* — в css/shell.css).
   TUZ: сукно — панель экрана, карты — экранные с рамкой, красные масти — янтарные, как на
   старых янтарных мониторах. Domcook: те же цвета, фото — в зелёном оттенке. Светлый вариант
   темы получается сам: меняются только --tm-*.
   =================================================================== */
:root[data-egg="term"] .p-velaro.p-velaro {
  --p-bg: var(--tm-bg); --p-fg: var(--tm-fg); --p-fg2: var(--tm-fg2); --p-muted: var(--tm-muted);
  --p-accent: var(--tm-acc); --p-on-accent: var(--tm-on); --p-accent2: var(--tm-muted); --p-line: var(--tm-line);
  --p-chip-bg: transparent; --p-chip-fg: var(--tm-fg); --p-chip-r: 2px;
  --p-font: var(--tm-font); --p-display: var(--tm-font);
  --v-paper: var(--tm-raise); --v-black: var(--tm-fg); --v-red: var(--tm-amber); --v-back: var(--tm-back); --v-sheet: var(--tm-sheet);
  --v-label: var(--tm-font); --v-rule: var(--tm-line); --v-red-ui: var(--tm-amber); --v-chip-line: var(--tm-line); --v-table: var(--tm-raise);
  background: var(--tm-bg); color: var(--tm-fg);
}
:root[data-egg="term"] .p-velaro .vt.vt {
  --p-fg: var(--tm-fg); --p-muted: var(--tm-muted); --p-accent: var(--tm-acc); --p-on-accent: var(--tm-on); --p-line: var(--tm-line);
  background: var(--tm-raise); border-color: var(--tm-line); box-shadow: none; border-radius: 2px;
}
:root[data-egg="term"] .p-velaro .vphone .vt.vt { background: transparent; border: 0; }
:root[data-egg="term"] .vphone__screen { background: var(--tm-raise); }
:root[data-egg="term"] .p-velaro h1 { letter-spacing: -.02em; }
/* карты: тёмная (или бледная) «экранная» карта в зелёной рамке; рубашка — штриховка */
:root[data-egg="term"] .p-velaro .pc:not(.pc--back), :root[data-egg="term"] .wcard--velaro .pc:not(.pc--back) {
  box-shadow: inset 0 0 0 1px var(--tm-acc), 0 6px 14px -8px rgba(0, 0, 0, .5); border-radius: 4px;
}
:root[data-egg="term"] .g__over, :root[data-egg="term"] .g__suits { background: color-mix(in srgb, var(--tm-bg) 90%, transparent); }
:root[data-egg="term"] .g__replay { background: color-mix(in srgb, var(--tm-bg) 97%, transparent); }
:root[data-egg="term"] .b__tip, :root[data-egg="term"] .g__bubble { background: var(--tm-sheet); color: var(--tm-fg); box-shadow: inset 0 0 0 1px var(--tm-acc); }
:root[data-egg="term"] .b__tip .g__link { color: var(--tm-acc); }
:root[data-egg="term"] .g__btn--one[aria-pressed="true"], :root[data-egg="term"] .g__table-row:hover,
:root[data-egg="term"] .b__row.is-best { background: color-mix(in srgb, var(--tm-acc) 12%, transparent); }
:root[data-egg="term"] .g__btn, :root[data-egg="term"] .g-tabs button, :root[data-egg="term"] .g__seg button { border-radius: 2px; }
:root[data-egg="term"] .g-tabs, :root[data-egg="term"] .g__seg, :root[data-egg="term"] .ach__btn { border-radius: 3px; }
:root[data-egg="term"] .ach-toast__item { background: var(--tm-raise); color: var(--tm-fg); border-color: var(--tm-acc); border-radius: 3px; font-family: var(--tm-font); }
:root[data-egg="term"] .ach-toast__text b { color: var(--tm-acc); font-family: var(--tm-font); }
:root[data-egg="term"] .trophy__box, :root[data-egg="term"] .badge { border-radius: 3px; }

/* Domcook */
:root[data-egg="term"] .p-fridge.p-fridge {
  --p-bg: var(--tm-bg); --p-card: var(--tm-raise); --p-fg: var(--tm-fg); --p-fg2: var(--tm-fg2); --p-muted: var(--tm-muted);
  --p-line: var(--tm-line); --p-accent: var(--tm-acc); --p-on-accent: var(--tm-on); --p-forest: var(--tm-acc); --p-amber: var(--tm-amber);
  --p-tint: color-mix(in srgb, var(--tm-acc) 14%, transparent); --p-chip-bg: var(--tm-raise); --p-chip-fg: var(--tm-fg); --p-chip-r: 2px;
  --p-font: var(--tm-font); --p-display: var(--tm-font);
  background: var(--tm-bg); color: var(--tm-fg);
}
:root[data-egg="term"] .p-fridge .fr__tag--all { color: var(--tm-acc); }
:root[data-egg="term"] .p-fridge .fr__tag--miss { color: var(--tm-amber); }
:root[data-egg="term"] .p-fridge .proj__chip--stage.proj__chip--stage, :root[data-egg="term"] .wcard--fridge .wcard__tag.wcard__tag { color: var(--tm-acc); }
:root[data-egg="term"] .p-fridge .fr, :root[data-egg="term"] .p-fridge .fr__shop { border-radius: 3px; box-shadow: inset 0 0 0 1px var(--tm-line); }
:root[data-egg="term"] .p-fridge .ph__device, :root[data-egg="term"] .p-velaro .ph__device { --ph-shadow: rgba(0, 0, 0, .55); }
:root[data-egg="term"] .vphone__sb { color: var(--tm-fg); }
:root[data-egg="term"] .vphone__gest { background: color-mix(in srgb, var(--tm-fg) 45%, transparent); }
/* колода: края пачки — в цветах темы, а не оранжевые; карты, которыми ходить нельзя, — просто бледнее */
:root[data-egg="term"] .g__deck .pc, :root[data-egg="term"] .b__deck .b__stack, :root[data-egg="term"] .gpuzzle .b__stack {
  box-shadow: inset 0 0 0 3px var(--v-back), inset 0 0 0 4px var(--tm-line), inset 0 0 0 6px var(--tm-acc),
    2px 2px 0 var(--tm-line), 4px 4px 0 color-mix(in srgb, var(--tm-line) 70%, var(--tm-bg)), 0 10px 18px -8px rgba(0, 0, 0, .45);
}
:root[data-egg="term"] .g__hand .pc.is-off { filter: none; opacity: .5; }

/* ===================================================================
   Domcook: ляган-рулетка, порции и «Вслух» в режиме готовки, QR списка покупок (js/cook.js, js/site.js)
   =================================================================== */
.fcw { max-width: 540px; margin-top: 14px; padding: 14px 16px 16px; border-radius: 14px; background: var(--p-card); border: 1px solid var(--p-line); box-shadow: 0 16px 34px -26px rgba(46, 43, 37, .6); }
.p-fridge .fcw__kick { margin: 0 0 12px; min-height: 15px; }
.fcw__row { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 18px; align-items: center; }
.fcw__plate { display: block; width: 132px; height: 132px; border-radius: 50%; cursor: pointer; }
.fcw__img { display: block; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; padding: 13px; box-sizing: border-box;
  background: var(--uz-lagan) center / 100% 100% no-repeat, #efe7db; box-shadow: 0 8px 14px -9px rgba(46, 43, 37, .7); }
.fcw__body { min-width: 0; height: 132px; display: grid; grid-template-rows: minmax(0, 1fr) 20px 46px; row-gap: 4px; justify-items: start; }
.fcw__name { align-self: end; margin: 0; font: 600 20px/1.2 var(--p-display); color: var(--p-fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fcw__meta { margin: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 20px; color: var(--p-muted); font-variant-numeric: tabular-nums; }
.fcw__acts { display: flex; gap: 10px; align-items: end; }
.fcw__spin {
  min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--p-font);
  color: var(--fc-ink); background: transparent; border: 1.5px solid var(--fc-ink);   /* --fc-ink: контраст не ниже 4,5:1 */
}
.fcw__spin:hover:not(:disabled), .fcw__spin:focus-visible { background: var(--p-tint); }
.fcw__spin:disabled { opacity: .55; cursor: default; }
.fcw .fcd__go { min-height: 40px; padding: 0 20px; }
.fcw.is-spin .fcw__name { color: var(--p-muted); }
/* узкий телефон: ляган сверху по центру, название и кнопки — под ним во всю ширину (высота задана — блок не прыгает) */
@media (max-width: 420px) {
  .fcw__row { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; }
  .fcw__plate, .fcw__img { width: 120px; height: 120px; }
  .fcw__img { padding: 12px; }
  .fcw__body { width: 100%; height: 124px; justify-items: center; text-align: center; }
  .fcw__acts { justify-content: center; }
}

/* порции в режиме готовки: 1 · 2 · 4 · 6 */
.cook__serv { display: flex; gap: 6px; margin: 10px 0 4px; }
.cook__serv-b {
  min-width: 40px; min-height: 36px; padding: 0 10px; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--p-font);
  color: var(--p-fg); background: transparent; border: 1px solid var(--p-line); font-variant-numeric: tabular-nums;
}
.cook__serv-b[aria-pressed="true"] { color: var(--fc-on); background: var(--fc-btn); border-color: transparent; }
.cook__serv-b:hover:not([aria-pressed="true"]), .cook__serv-b:focus-visible { border-color: var(--fc-ink); }
.cook__share {
  margin-top: 12px; min-height: 40px; padding: 0 16px; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--p-font);
  color: var(--fc-ink); background: transparent; border: 1.5px solid var(--fc-ink);
}
.cook__share:hover, .cook__share:focus-visible { background: var(--p-tint); }
.cook__share--done { margin-top: 0; }
/* «🔊 Вслух»: включено — заливка; нет голоса для языка — неактивна, рядом пояснение */
.cook__speak-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 16px; }
.cook__speak {
  min-height: 38px; padding: 0 14px; border-radius: 999px; cursor: pointer; font: 700 14px/1 var(--p-font);
  color: var(--p-fg); background: transparent; border: 1px solid var(--p-line);
}
.cook__speak[aria-pressed="true"] { color: var(--fc-on); background: var(--fc-btn); border-color: transparent; }
.cook__speak:hover:not(:disabled):not([aria-pressed="true"]), .cook__speak:focus-visible { border-color: var(--fc-ink); }
.cook__speak:disabled { opacity: .5; cursor: default; }
.cook__speak-note { font-size: 13px; color: var(--p-muted); }

/* QR-код списка покупок */
.fr__shop-qr { padding: 8px 14px; border-radius: 999px; cursor: pointer; font: 600 13px/1 var(--p-font); color: var(--fc-ink); background: transparent; border: 1.5px solid var(--fc-ink); }
.fr__shop-qr:hover, .fr__shop-qr:focus-visible { background: var(--p-tint); }
.fr__shop-code { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 14px; align-items: center; margin-top: 4px; }
.fr__shop-pic { width: 148px; height: 148px; display: grid; place-items: center; border-radius: 10px; background: #ffffff; color: #141414; font-size: 13px; }
.fr__shop-pic svg { display: block; width: 148px; height: 148px; border-radius: 10px; }
.fr__shop-qrhint { margin: 0; font-size: 13px; line-height: 1.45; color: var(--p-muted); }
@media (max-width: 380px) { .fr__shop-code { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

/* открытка рецепта поверх режима готовки */
.pcard.pcard--top { z-index: 1700; }

/* ===================================================================
   TUZ: «108» за круглым столом — соперники вокруг, колода и сброс посередине (js/tables.js, RING108);
   характер компьютера — подпись под именем
   =================================================================== */
.g__table.is-ring { --gh: 230px; --gtop: 56px; position: relative; isolation: isolate; width: 100%; height: var(--gh); padding: var(--gtop) 0 8px; box-sizing: border-box; }
.g__table.is-ring[data-n="3"] { --gh: 270px; --gtop: 116px; }
.g__table.is-ring[data-n="4"] { --gh: 300px; --gtop: 140px; }
.g__table.is-ring .g__seats, .g__table.is-ring .b__talk { position: absolute; inset: 0; pointer-events: none; }
.g__table.is-ring .g__seats { z-index: 1; }
.g__table.is-ring .b__talk { z-index: 6; }
.g__table.is-ring .g__deck, .g__table.is-ring .g__pile { z-index: 2; }
.g__table.is-ring .g__mark { top: calc(var(--gtop) - 14px); z-index: 3; }
.is-ring .g__seat { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%;
  flex-direction: column; gap: 4px; width: max-content; max-width: 92px; padding: 6px 8px; font-size: 10px; letter-spacing: .06em; text-align: center; }
.is-ring .g__seat[data-side="l"] { left: 0; translate: 0 -50%; }   /* у краёв — прижаты к краю, как у «Буры» */
.is-ring .g__seat[data-side="r"] { left: auto; right: 0; translate: 0 -50%; }
.is-ring .g__seat.is-top, .is-ring .g__seat.is-top .g__seat-info { flex-direction: row; gap: 8px; max-width: none; }
.is-ring .g__seat.is-top { padding: 5px 10px; }
.g__seat-info { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; max-width: 100%; }
.is-ring .g__seat .g__opp-name { max-width: 100%; }
.is-ring .g__seat .aks { width: 26px; height: 26px; }
.is-ring .g__seat .g__backs { min-height: 16px; padding-left: 7px; }
.is-ring .g__seat .g__backs i { width: 11px; height: 16px; margin-left: -7px; }
.g__opp-trait {
  font: 400 11px/1.1 var(--p-font, Roboto, sans-serif); letter-spacing: 0; text-transform: none; font-style: italic;
  color: var(--p-muted); white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}