:root {
  --bg: #08080a;
  --panel-1: #1b1b20;
  --panel-2: #141417;
  --ink: #0d0d10;
  --text: #ddd8cc;
  --text-strong: #efe9dc;
  --muted: #9d978b;
  --bone: #d9c9a0;
  --bone-soft: #8a7a55;
  --bone-glow: rgba(217, 201, 160, 0.1);
  --ice: #9fd3f0;
  --ice-soft: #4f7f99;
  --ice-glow: rgba(159, 211, 240, 0.16);
  --blood: #d0574c;
  --blood-soft: #7d2a24;
  --blood-glow: rgba(208, 87, 76, 0.14);
  --display: 'Cormorant SC', 'Palatino Linotype', Georgia, serif;
  --serif: 'PT Serif', Georgia, 'Times New Roman', serif;
  --safe-top: env(safe-area-inset-top, 0px);
  /* Мастер не за ноутбуком: правый край колонки инструментов (+ зазор) и верх полосы под часами. */
  --rail-edge: 82px;
  --dock-top: 98px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}

.plate {
  position: relative;
  background:
    radial-gradient(ellipse at 50% 0%, var(--bone-glow), transparent 70%),
    linear-gradient(180deg, rgba(27, 27, 32, 0.94), rgba(20, 20, 23, 0.96));
  border: 1px solid var(--bone-soft);
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(13, 13, 16, 0.92), 0 0 0 4px rgba(138, 122, 85, 0.55), 0 14px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}
/* На ТВ без размытия под пластиной: фон и так почти глухой, а размытие пересчитывается на каждом кадре карты. */
.tv-mode .plate { backdrop-filter: none; }
/* Уголки-орнамент */
.plate::before, .plate::after {
  content: ''; position: absolute; width: 10px; height: 10px; pointer-events: none;
  border-color: var(--bone); border-style: solid; opacity: 0.7;
}
.plate::before { top: 3px; left: 3px; border-width: 1px 0 0 1px; }
.plate::after { bottom: 3px; right: 3px; border-width: 0 1px 1px 0; }

.act {
  min-height: 40px; padding: 8px 14px; border-radius: 4px;
  font-family: var(--display); font-weight: 700; font-size: 15px; letter-spacing: 0.06em;
  color: var(--bone); border: 1px solid var(--bone-soft);
  background: linear-gradient(180deg, rgba(217, 201, 160, 0.08), rgba(217, 201, 160, 0.02));
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
/* Иконка в кнопке — по умолчанию строчного размера; свои размеры у мест ниже перебивают (у :where вес ноль). */
:where(.act) { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
:where(.act) svg { width: 16px; height: 16px; flex: none; }
.act:active { transform: translateY(1px); }
.act.primary { color: #16140f; background: linear-gradient(180deg, #e3d6b3, #b9a676); border-color: #e3d6b3; box-shadow: 0 0 16px rgba(217, 201, 160, 0.25); }
.act.danger { color: var(--blood); border-color: var(--blood-soft); background: rgba(208, 87, 76, 0.06); }
.act.ghost { border-color: transparent; background: none; color: var(--muted); }
.act:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) {
  .act:hover:not(:disabled) { background: rgba(217, 201, 160, 0.14); color: var(--text-strong); }
  .act.primary:hover:not(:disabled) { background: linear-gradient(180deg, #efe4c4, #c7b484); color: #16140f; }
}