/* ═══════════════════════════════════════════════════════════════════════
   ТЕМА «АРХИПЕЛАГ» — единственный источник правды по дизайну страниц.
   Согласовано 19.09.2026. Кинематографика + отсылки к интерфейсу игры,
   не пародия.

   Отсюда питаются:  engine/quest.html · card.html · handout.html
                     build-site.py (сайт)
   Шрифт подключается отдельно: engine/fonts.css (вшитый base64)
                             или site/assets/fonts/*.woff2 (ссылкой)

   Три отличия от «типового» дизайна, их не трогаем:
     1. ноль скруглений — углы срезаны через clip-path
     2. тени жёсткие со смещением, без блюра
     3. градиентов нет

   Две шкуры: тёмная (экран, квест и сайт) и .paper (бумага, карточка
   и раздатка). Геометрия и шрифт общие, меняется только палитра.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* палитра по кодам цвета Minecraft: §6 §a §e §b §c §7 */
  --gold:#ffaa00;
  --green:#55ff55;
  --yellow:#ffff55;
  --aqua:#55ffff;
  --red:#ff5555;
  --grey:#aaaaaa;

  --gold-d:#7a4a00;      /* золото, ушедшее в тень — рамки и подложки */
  --ink:#f2e6d2;
  --dim:#9a8d7d;
  --bg:#10151a;
  --panel:#1a2028;
  --panel-2:#242c36;     /* слот номера, вдавленные подложки */
  --sunk:#0e1319;
  --line:#2e3742;
  --stone:#6b6f76;
  --on-gold:#241500;     /* текст на золотой плашке */

  --cut:8px;             /* размер среза угла */
  --shadow-px:2px;       /* тень текста как в игре, только крупнее */
  --drop:5px;            /* смещение жёсткой тени */
}

/* ─── бумажная шкура: те же роли, светлые значения ────────────────────
   Неоновые игровые цвета на белом не читаются и жрут краску, поэтому
   на бумаге берём те же оттенки, приглушённые до печатных.            */
.paper{
  --gold:#a86400;
  --green:#2f7d32;
  --yellow:#8a6414;
  --aqua:#0f6f8c;
  --red:#b3261e;
  --grey:#7b7263;

  --gold-d:#d8c49a;
  --ink:#1b1510;
  --dim:#6b6152;
  --bg:#eee9df;
  --panel:#ffffff;
  --panel-2:#f4f0e6;
  --sunk:#f4f0e6;
  --line:#cfc6b4;
  --stone:#9a9182;
  --on-gold:#fffaf0;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--bg);
  color:var(--ink);
  font:17.5px/1.62 Onest,system-ui,-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased;
}
/* слабый пиксельный шум — только на тёмной шкуре, на бумаге его нет */
body:not(.paper){
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
}
a{color:inherit;text-decoration:none}

/* ─── ШРИФТ ИНТЕРФЕЙСА ────────────────────────────────────────────────
   Monocraft только на акцентах: заголовки, рубрики, кнопки, номера.
   Корпус текста — Onest. ⚠️ Знака № в Monocraft нет, в .mc не писать.  */
.mc{font-family:Monocraft,ui-monospace,monospace;letter-spacing:.02em}
body:not(.paper) .mc{text-shadow:var(--shadow-px) var(--shadow-px) 0 rgba(0,0,0,.6)}

/* ─── ГЕОМЕТРИЯ: срез вместо скругления ───────────────────────────── */
.cut{
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}
.block{
  background:var(--panel);
  border:2px solid var(--line);
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
}

/* ─── БЕВЕЛ И СЛОТ ─────────────────────────────────────────────────
   bevel — кнопка: свет сверху-слева, тень снизу-справа, плюс жёсткая
   тень со смещением. slot — вдавленный слот инвентаря, бевел наоборот. */
.bevel{
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.26),
             inset -2px -2px 0 rgba(0,0,0,.45),
             var(--drop) var(--drop) 0 rgba(0,0,0,.45);
}
.slot{
  background:var(--panel-2);
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5),
             inset -2px -2px 0 rgba(255,255,255,.18);
}
.paper .bevel{
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.7),
             inset -2px -2px 0 rgba(0,0,0,.14),
             3px 3px 0 rgba(27,21,16,.18);
}
.paper .slot{
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.14),
             inset -2px -2px 0 rgba(255,255,255,.8);
}

/* ─── РУБРИКА: золотая засечка + заголовок капсом ─────────────────── */
.sec{margin:34px 0 14px;display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.sec .bar{width:16px;height:4px;background:var(--gold);flex:none}
.sec h2,.sec h3{font-size:15px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
.sec span{color:var(--grey);font-size:14.5px;font-family:Onest,sans-serif;text-shadow:none}

/* надзаголовок: мелкий золотой капс */
.kick{color:var(--gold);font-size:13px;letter-spacing:.12em;text-transform:uppercase;font-weight:700}

/* ─── КНОПКА ──────────────────────────────────────────────────────── */
.btn{
  font-family:Monocraft,ui-monospace,monospace;letter-spacing:.02em;
  background:var(--panel-2);color:var(--ink);border:none;cursor:pointer;
  padding:11px 20px;font-size:15px;
  clip-path:polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)),
                    calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.26),
             inset -2px -2px 0 rgba(0,0,0,.45),
             var(--drop) var(--drop) 0 rgba(0,0,0,.45);
  transition:filter .1s,transform .06s;
}
body:not(.paper) .btn{text-shadow:var(--shadow-px) var(--shadow-px) 0 rgba(0,0,0,.6)}
.btn:hover{color:var(--yellow)}
.btn:active{transform:translate(2px,2px);
  box-shadow:inset 2px 2px 0 rgba(255,255,255,.26),
             inset -2px -2px 0 rgba(0,0,0,.45),
             3px 3px 0 rgba(0,0,0,.45)}
.btn.main{background:var(--gold);color:var(--on-gold)}
.btn.main:hover{color:var(--on-gold);filter:brightness(1.12)}

/* ─── КЛАВИША ─────────────────────────────────────────────────────── */
kbd{
  font-family:Monocraft,ui-monospace,monospace;font-size:.92em;white-space:nowrap;
  background:var(--sunk);color:var(--ink);padding:2px 8px;display:inline-block;
  box-shadow:inset 2px 2px 0 rgba(0,0,0,.5),inset -2px -2px 0 rgba(255,255,255,.18);
}
.paper kbd{box-shadow:inset 2px 2px 0 rgba(0,0,0,.14),inset -2px -2px 0 rgba(255,255,255,.8)}

/* ─── ПЕЧАТЬ ──────────────────────────────────────────────────────────
   На бумаге снимаем всё, что делает тень и фон: краска дорогая,
   а срезы углов и шрифт печатаются отлично.                            */
@media print{
  body{background:#fff !important;background-image:none !important}
  .mc{text-shadow:none !important}
  .bevel,.slot,.btn,kbd{box-shadow:none !important}
  .bevel,.btn{border:1.5px solid var(--line)}
  .slot,kbd{border:1.5px solid var(--line)}
  .noprint{display:none !important}
}