/* ============================================================
   ДИЗАЙН-СИСТЕМА — ПРОСЛОЙКА (единый источник стиля)
   ============================================================
   Это ГЛАВНЫЙ файл стиля. Здесь живут все цвета, шрифты и отступы.
   Его подключают И образец (ОБРАЗЕЦ-СТИЛЯ.html), И все страницы игры
   (index/lobby/novella). Поэтому: меняешь значение ЗДЕСЬ — оно
   меняется и в образце, и во всей игре одновременно.

   Шаг 1 (сейчас): здесь только токены (цвета/шрифты/отступы).
   Дальше сюда же постепенно переедет единый вид элементов.
   ============================================================ */
/* Шрифт Oswald — встроен в проект (файлы в public/fonts), БЕЗ запроса к Google.
   Это убирает «местами шрифт есть, местами нет»: раньше шрифт тянулся с серверов
   Google при каждой загрузке и у части игроков не догружался. Теперь едет вместе с игрой.
   Файлы вариативные: один файл на алфавит покрывает все толщины 300–700. */
@font-face {
  font-family:'Oswald'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('fonts/oswald-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Oswald'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('fonts/oswald-cyrillic-ext.woff2') format('woff2');
  unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family:'Oswald'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('fonts/oswald-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family:'Oswald'; font-style:normal; font-weight:300 700; font-display:swap;
  src:url('fonts/oswald-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* — Тёмные фоны — */
  --c-charcoal:#21201C; --c-midnight-umber:#1E1C1A; --c-espresso:#513D34;
  --c-pitch:#0F0F0F;

  /* — Поверхности (фоны окон, карточек, полей) — */
  --surface-app:#21201C; --surface-panel:#1A1916; --surface-card:#26241F;
  --surface-card-head:#513D34; --surface-slot:#513D34; --surface-inset:#161412;
  --surface-tooltip:#0F0F0F;

  /* — Пергамент / кость / тексты — */
  --c-parchment:#C5A87E; --c-pale-cream:#F8EAB9; --c-concrete:#A6A6A6;
  --c-warm-mud:#7D7260; --c-ancient-bone:#C8B89F;
  --text-strong:#F8EAB9; --text-body:#C5A87E; --text-muted:#A6A6A6;
  --text-faint:#7D7260; --text-on-gold:#0F0F0F;

  /* — Золото (главный акцент) — */
  --c-harvest-gold:#C1913C; --c-deep-gold:#9D6E20; --c-gold-stroke:#674919;
  --c-leather:#635045;
  --accent:#C5A87E; --accent-strong:#C1913C; --accent-deep:#9D6E20;

  /* — Роли — */
  --role-master:#C1913C; --role-podmaster:#526C7F; --role-player:#466340;

  /* — Опасность / удаление — */
  --danger:#78362D; --danger-deep:#662219;

  /* — Доступность по датам (календарь): свободен / занят / не определился — */
  --avail-free:#4E7140; --avail-busy:#8A3A2C; --avail-unknown:#6E4C93;

  /* — Линии и рамки — */
  --border-strong:#635045; --border-soft:#322C26; --border-hair:#161412;

  /* — Геометрия: скруглений нет, резаные углы — */
  --r-sm:0; --r-md:0; --r-lg:0; --bw-hair:1px; --bw:2px;

  /* — Отступы — */
  --sp-2:4px; --sp-3:6px; --sp-4:8px; --sp-5:12px; --sp-6:16px; --sp-7:20px;
  --sp-8:12px; --sp-9:32px; --sp-10:48px;

  /* — Тени / фокус — */
  --shadow-card:0 1px 0 rgba(0,0,0,0.35);
  --shadow-popover:0 6px 20px rgba(0,0,0,0.55);
  --inset-well:none; /* обводок-рамок 1px больше нет нигде — убрано по всему проекту */
  --ring:0 0 0 2px var(--c-charcoal),0 0 0 3px var(--c-harvest-gold);

  /* — Шрифты / анимация — */
  --font-display:"Oswald",Impact,"Arial Narrow",sans-serif;
  --font-ui:"Oswald","Arial Narrow",sans-serif;
  --ease:cubic-bezier(0.2,0,0.2,1); --dur-fast:90ms; --dur:140ms;
}

/* ============================================================
   ЭЛЕМЕНТЫ — единый вид (источник для образца и для игры)
   ============================================================ */

/* — Кнопки —
   Правило цвета: оранжевый (золото) — только при наведении/нажатии; в покое без оранжевого.
   Высота 32px: padding 6px + font-size 13px, без рамок. */
button { background:var(--surface-card); color:var(--text-body); border:none; border-radius:0;
  padding:6px; font-family:var(--font-display); font-size:15px; font-weight:700; text-transform:uppercase;
   cursor:pointer; transition:background var(--dur) var(--ease),color var(--dur) var(--ease); }
button:not(:disabled):hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
button:not(:disabled):active { background:var(--c-deep-gold); color:var(--text-on-gold); filter:none; }
button:disabled { opacity:0.5; cursor:default; }
button:focus-visible { outline:none; box-shadow:var(--ring); }
/* второстепенная (ghost) */
.ghost { background:transparent; border:none; color:var(--text-muted); }
.ghost:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }
/* добавить */
.btn-add { background:var(--surface-panel); color:var(--text-body); align-self:flex-start; padding:9px 16px; }
.btn-add:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); filter:none; }

/* — Поля ввода — однострочные высотой 32px; многострочное растягиваемое — */
input[type=text], input[type=password], input[type=number], input[type=url], input[type=email], input[type=search] {
  height:32px; padding:0 10px; background:var(--surface-inset); border:none; border-radius:0;
  color:var(--text-strong); font-family:var(--font-ui); font-size:16px; }
input::placeholder { color:var(--text-faint); }
input:focus, textarea:focus { outline:none; box-shadow:var(--ring); }
textarea { background:var(--surface-app); border:none; border-radius:0; padding:8px 10px;
  color:var(--text-strong); font-family:var(--font-ui); font-size:16px; resize:vertical; min-height:56px; }
.num-input { width:64px; flex:none; text-align:center; }
/* отключённое числовое поле (напр. «Сколько» при «на выбор игрока») — серое */
.num-input:disabled { opacity:.4; cursor:not-allowed; }
/* Убираем «стрелочки» у числовых полей (свой степпер плюс/минус) */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
input[type=number] { -moz-appearance:textfield; appearance:textfield; }

/* Степпер числа: [−] [поле] [+]. Кнопки — иконки плюс/минус (.ic-btn), фон прозрачный, символ = цвет текста. */
.num-stepper { display:inline-flex; align-items:center; gap:var(--sp-2); }
.num-stepper .num-input { width:48px; }
/* Высота кнопок = высоте строки (32px), а сам значок плюс/минус мельче — чтобы не был больше строки */
.num-stepper .ic-btn { height:32px; width:32px; }
.num-stepper .ic-btn svg { width:16px; height:16px; }

/* — Чекбокс (галочка): квадрат слева, текст справа, в одну строку. Вместо системной галочки — иконки. —
   off = пустой квадрат, on = галочка; цвет — currentColor (= цвет текста). */
.sp-check { display:inline-flex; flex-direction:row; align-items:center; gap:var(--sp-4); cursor:pointer; color:var(--text-body); }
.sp-check > input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.sp-check .cb-off, .sp-check .cb-on { width:20px; height:20px; flex:none; display:block; }
.sp-check .cb-on { display:none; }
.sp-check > input:checked ~ .cb-off { display:none; }
.sp-check > input:checked ~ .cb-on { display:block; }
.sp-check > input:focus-visible ~ .cb-off,
.sp-check > input:focus-visible ~ .cb-on { box-shadow:var(--ring); }
.sp-check .cb-label { font-family:var(--font-ui); font-size:16px; text-transform:uppercase;  color:var(--text-body); }

/* — Попап результата броска (вид; без верхней полоски). Позиционирование/анимация — на стороне игры. — */
.roll-popup { min-width:280px; max-width:520px; background:var(--surface-card); box-shadow:var(--shadow-popover);
  padding:var(--sp-7) var(--sp-8); text-align:center; }
.rp-who { font-family:var(--font-display); text-transform:uppercase;  color:var(--text-muted); font-size:13px; }
.rp-big { font-family:var(--font-display); font-weight:700; color:var(--text-strong); font-size:34px; line-height:1.1; margin-top:4px; }
.roll-popup.fail .rp-big { color:var(--text-faint); }
.rp-crit { font-family:var(--font-display); font-weight:700; color:var(--c-harvest-gold);  margin-top:4px; }
.rp-sub { color:var(--text-muted); font-size:12px; margin-top:6px; }
.rp-dice { display:flex; flex-wrap:wrap; gap:5px; justify-content:center; margin-top:8px; }
.die { min-width:24px; height:24px; padding:0 4px; display:flex; align-items:center; justify-content:center; background:var(--surface-inset); color:var(--text-faint); font-variant-numeric:tabular-nums; font-size:13px; box-shadow:var(--inset-well); }
.die.s { background:var(--c-deep-gold); color:var(--text-on-gold); }
.die.c { background:var(--c-pale-cream); color:var(--text-on-gold); font-weight:700; }
.rp-crittext { color:var(--c-parchment); font-size:13px; margin-top:8px; }
.rp-insp { color:var(--c-harvest-gold); font-size:13px; margin-top:8px; }
/* Пуш-броски: интерактивная плашка результата (кнопки видит только тот, кто бросил). */
.roll-popup.rp-live { pointer-events:auto; }
.die.rp-pick { cursor:pointer; }
.die.rp-pick:hover { background:var(--c-warm-mud); color:var(--c-pale-cream); }
.die.rp-pick.sel { background:var(--danger); color:var(--c-pale-cream); } /* отмечен на переброс */
.rp-pushhint { color:var(--text-muted); font-size:12px; margin-top:10px; }
.rp-pushrow { display:flex; gap:var(--sp-4); justify-content:center; margin-top:10px; }
.rp-pushrow button { min-width:120px; }

/* — Выпадающий список (свой, вместо системного <select>) —
   В покое без оранжевого; оранжевый — при наведении/открытии. Высота 32px. */
.sp-dd { position:relative; display:inline-flex; }
.sp-dd-trigger { display:inline-flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
  width:100%; min-width:160px; height:32px; padding:0 10px; background:var(--surface-card); color:var(--text-body);
  font-family:var(--font-display); font-weight:600; text-transform:uppercase; 
  font-size:15px; cursor:pointer; }
.sp-dd-trigger:hover,
.sp-dd[data-open="true"] .sp-dd-trigger { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.sp-dd-label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-dd-arr { flex:none; width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent;
  border-top:6px solid currentColor; }
.sp-dd[data-open="true"] .sp-dd-arr { transform:rotate(180deg); }
.sp-dd-menu { position:absolute; top:100%; left:0; min-width:100%; max-height:260px; overflow-y:auto;
  background:var(--surface-card); box-shadow:var(--shadow-popover); z-index:200; display:flex; flex-direction:column; }
.sp-dd-menu[hidden] { display:none; }
.sp-dd-opt { padding:8px 10px; font-family:var(--font-display); font-weight:600; text-transform:uppercase;
   font-size:15px; color:var(--text-body); cursor:pointer; white-space:nowrap; }
.sp-dd-opt:hover { background:var(--c-harvest-gold); color:var(--text-on-gold); }
.sp-dd-opt[data-selected="true"] { background:var(--c-harvest-gold); color:var(--text-on-gold); }

/* — Иконка-кнопка (удалить/закрыть/кубик): сама иконка, 32×32, без рамок —
   Символ наследует currentColor; фон прозрачный (совпадает с фоном блока). */
.ic-btn { width:32px; height:32px; flex:none; padding:0; border:none; background:transparent;
  color:var(--text-body); cursor:pointer; line-height:0; display:inline-flex; align-items:center; justify-content:center; }
.ic-btn svg { display:block; width:32px; height:32px; }
/* В шапке окна (золотой фон) крестик — чёрный */
.win-head .ic-btn { color:var(--text-on-gold); }
.ic-btn:not(:disabled):hover { filter:brightness(1.12); background:transparent; }
.ic-btn:not(:disabled):active { filter:brightness(1.25); }
.ic-btn:focus-visible { outline:none; box-shadow:var(--ring); }
/* В шапке окна крестик чёрный, при наведении — лёгкая тёмная подложка */
.win-head .ic-btn:hover, .nc-head .ic-btn:hover { background:rgba(0,0,0,0.18); }
.win-head .ic-btn:active, .nc-head .ic-btn:active { background:rgba(0,0,0,0.28); }
.nc-head .ic-btn { color:var(--text-on-gold); }

/* Линии-разделители сегментов у иконок (кубики и т.п.): красятся в цвет фона позади иконки —
   тогда между гранями «просвечивает» фон, а внешний контур на том же фоне невидим. Получаются
   сегменты без обводки и без пятна. По умолчанию — цвет тёмной панели; в нужных местах фон зазора
   переопределяется через --ic-seg (например, у кнопок кубиков чата — цвет кнопки). Всегда два цвета. */
.ic svg path[stroke] { stroke:var(--ic-seg, var(--surface-panel)); }

/* Иконка-деталь вписывается в свою «рамку»: размер задаёт SPBox (attr-util.js) переменной
   --sp-icon-fit + классом .sp-icon-fit на узле-рамке. Через CSS, а не только инлайном на svg,
   чтобы вписалась и АСИНХРОННО загруженная иконка (у игрока svg вставляется позже) — одна истина. */
.sp-icon-fit svg { width:var(--sp-icon-fit); height:var(--sp-icon-fit); max-width:100%; max-height:100%; flex:none; }

/* — Ползунок (слайдер): тёмная дорожка, квадратный золотой бегунок по центру.
   Закраску слева от бегунка задаёт скрипт (icons.js → paintSlider). — */
.slider { -webkit-appearance:none; appearance:none; width:220px; height:8px;
  background:var(--surface-inset); border:none; cursor:pointer; }
.slider::-webkit-slider-runnable-track { -webkit-appearance:none; height:8px; background:transparent; border:none; }
.slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:14px; height:14px; margin-top:-3px;
  background:var(--c-harvest-gold); border:none; border-radius:0; box-shadow:0 1px 4px rgba(0,0,0,0.7); }
.slider::-moz-range-track { height:8px; background:var(--surface-inset); border:none; }
.slider::-moz-range-progress { height:8px; background:var(--c-harvest-gold); }
.slider::-moz-range-thumb { width:14px; height:14px; background:var(--c-harvest-gold); border:none; border-radius:0; box-shadow:0 1px 4px rgba(0,0,0,0.7); }
.slider.small { width:90px; }

/* — Шапка окна (золотая полоса с названием) — */
.win-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  margin:calc(-1 * var(--sp-8)) calc(-1 * var(--sp-8)) 0; padding:10px var(--sp-6); background:var(--c-harvest-gold); }
.win-title { font-family:var(--font-display); font-weight:700; text-transform:uppercase; 
  color:var(--text-on-gold); font-size:16px; margin:0; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* — Текст ошибки / валидации — */
.error { color:var(--danger); font-size:13px; min-height:1rem; margin:0; text-align:center; }

/* — Пикер навыков: сетка карточек —
   Список всегда ровно 3 колонки, равные по ширине.
   ВАЖНО: JS переносит .skill-card-tip прямо в <body>, иначе filter:brightness
   на .skill-card:hover создаёт новый containing block и сдвигает fixed-позиционированный тултип. */
.skill-pick-list { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.skill-card { display:flex; align-items:flex-start; gap:var(--sp-4); background:var(--surface-panel);
  padding:var(--sp-4) var(--sp-5); cursor:pointer; position:relative;
  box-shadow:var(--inset-well); transition:filter var(--dur) var(--ease); }
.skill-card:hover { filter:brightness(1.3); }
.skill-card-icon { width:40px; height:40px; flex:none; background:var(--surface-slot) center/cover no-repeat;
  box-shadow:var(--inset-well); }
.skill-card-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.skill-card-name { font-family:var(--font-display); font-weight:700; text-transform:uppercase;
   color:var(--text-strong); font-size:13px; }
.skill-card-desc { font-size:11px; color:var(--text-muted); line-height:1.3; }
.skill-card-tip { display:none; position:fixed; z-index:1000; width:220px; pointer-events:none; }

/* — Подсказка / тултип (по образцу ОБРАЗЕЦ-СТИЛЯ.html, раздел 9). Без рамок — только фон + тень. —
   Блоки внутри разделяются РАЗНЫМ ФОНОМ и отступом (никаких линий — правило проекта). */
.tooltip { display:flex; flex-direction:column; gap:var(--sp-3); background:var(--surface-tooltip); color:var(--text-body);
  font-size:12px; line-height:1.4; padding:var(--sp-5); max-width:260px; box-shadow:var(--shadow-popover); }
.tooltip strong { color:var(--text-strong); font-family:var(--font-display); text-transform:uppercase;
   display:block; }
/* блок-секция: своя заливка, чтобы блоки визуально отделялись */
.tooltip .tip-sec { padding:var(--sp-3) var(--sp-4); background:var(--surface-panel); }
.tooltip .tip-sec.tip-fx { background:var(--surface-card); color:var(--c-parchment); }
.tooltip .tip-line { margin:0; }
.tooltip .tip-line + .tip-line { margin-top:2px; }
/* описание — простым текстом, приглушённое, отделено отступом */
.tooltip .tip-desc { margin:0; color:var(--text-muted); }
.tooltip p { margin:0; }

/* — Крупный тултип предмета инвентаря: большая картинка сверху (по форме предмета) +
   подписи нормальным шрифтом, блоки разделены разным фоном (без линий — правило проекта). — */
.inv-item-tip { width:auto; }
.inv-item-tip .tooltip { max-width:340px; gap:var(--sp-4); padding:var(--sp-6); font-size:14px; line-height:1.5; }
.inv-item-tip .tooltip strong { font-size:20px; margin-bottom:2px; }
.inv-item-tip .tip-img { align-self:center; background:center/cover no-repeat; }
.inv-item-tip .tooltip .tip-sec { padding:var(--sp-4) var(--sp-5); font-size:14px; }
.inv-item-tip .tooltip .tip-desc { font-size:14px; line-height:1.5; }
.inv-item-tip .tooltip .rp-sub { font-size:13px; }
/* Подсказка плашки-элемента: шире короткого, с метками секций (что это · собрать · на листе · пример) */
.inv-item-tip .tooltip.sp-el-tip { max-width:400px; }
.tooltip .tip-k { font-family:var(--font-display); text-transform:uppercase; font-size:10px; letter-spacing:.05em;
   color:var(--text-strong); margin-bottom:2px; opacity:.85; }
.inv-item-tip .tooltip.sp-el-tip .tip-k { font-size:11px; }