/* Стили игры, часть «base»: основа: шрифты, цвета, панели, поля, кнопки, вкладки. Порядок подключения частей (index.html) важен: поздние правила перекрывают ранние. */
/* ───────────── Основа оформления в духе BG3 ─────────────
   Почти чёрный тёплый камень, старое золото, тонкая металлическая кайма, засечки. Заголовки и кнопки — Forum
   (кириллица, римские прописные), текст — Alegreya; оба шрифта SIL OFL, лежат в public/fonts (лицензии — OFL-*.txt).
   Орнаменты, камень и металл — переменные --bg3-* (раздел «Оформление интерфейса игры в духе BG3» ниже) */
@font-face { font-family: 'Forum'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/forum-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Forum'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/forum-lat.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: 'Alegreya'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/alegreya-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(/fonts/alegreya-lat.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: 'Alegreya'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/alegreya-italic-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/alegreya-italic-lat.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; }

:root {
  --bg: #0a0908;
  --bg2: #110f0c;
  --panel: #17130f;
  --panel2: #201a14;
  --line: #3a2e1e;
  --line2: #5a4528;
  --text: #e6dcc6;
  --muted: #9c907a;
  --gold: #c8ab72;
  --gold2: #ecdcb0;
  --red: #b8483c;
  --green: #5f9a54;
  --blue: #5a88c4;
  --purple: #8e6cc6;
  --radius: 2px;
  --font: 'Alegreya', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  --font-display: 'Forum', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
  /* кнопки: тёмная плита с каймой; главная — бронза */
  --btn: linear-gradient(180deg, #221c15, #14110d);
  --btn-hi: linear-gradient(180deg, #2e261b, #19150f);
  --btn-main: linear-gradient(180deg, #5c4423, #382812 55%, #241809);
  --btn-main-hi: linear-gradient(180deg, #73552b, #46321a 55%, #2e200e);
}

* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: #4a3a24 transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: padding-box; }
::selection { background: rgba(200,171,114,.35); color: #fff; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
  /* у Forum одно начертание: жирный не подделывается — заголовки остаются чистыми */
  font-synthesis-weight: none;
}
.hidden, [hidden] { display: none !important; }
h2, h3, h4 { margin: 0 0 10px; font-family: var(--font-display); font-weight: 400; color: var(--gold2); letter-spacing: .05em; }
h3 { font-size: 19px; }
h4 { font-size: 16px; }
p { margin: 6px 0; }
a { color: var(--gold2); }
b, strong { font-weight: 700; }
.muted { color: var(--muted); }
.center { text-align: center; }
.small-text { font-size: 12.5px; margin: 6px 0 4px; }
.hint { color: var(--muted); font-size: 13px; }
.error { color: #ff9a88; min-height: 18px; font-size: 13.5px; }
.spacer { flex: 1; }
.row { display: flex; align-items: center; }
.row.gap { gap: 6px; }
.row.wrap { flex-wrap: wrap; }
.row + .row, .row + input, input + .row, label + .row, .row + label { margin-top: 6px; }

/* панель: камень с зерном, тонкая кайма */
.panel {
  background: var(--bg3-stone);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(236,220,176,.06), 0 10px 26px rgba(0,0,0,.5);
}

/* поля: утоплены в камень, при фокусе — золотая кайма */
input, select, textarea, button { font: inherit; color: inherit; }
input, select, textarea {
  background: #0b0907;
  border: 1px solid #3c2f1d;
  border-radius: var(--radius);
  padding: 7px 10px;
  width: 100%;
  min-width: 0;
  box-shadow: inset 0 1px 4px rgba(0,0,0,.7);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: #6e6352; font-style: italic; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: inset 0 1px 4px rgba(0,0,0,.7), 0 0 0 1px rgba(200,171,114,.18), 0 0 12px rgba(200,171,114,.14); }
select { appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: var(--cur-hand);
  background: #0b0907 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M1 3l4 4 4-4' fill='none' stroke='%23c8ab72' stroke-width='1.3'/%3E%3C/svg%3E") right 10px center / 10px no-repeat; }
select option, select optgroup { background: #15120e; color: var(--text); }
textarea { resize: vertical; margin-top: 6px; }
input.num { width: 70px; flex: none; }
label { display: block; color: var(--muted); font-size: 13px; margin-bottom: 8px; }
label > input, label > select { margin-top: 4px; color: var(--text); font-size: 15px; }
label.inline { display: flex; align-items: center; gap: 6px; margin: 0; white-space: nowrap; }
label.inline > input, label.inline > select { margin: 0; }
label.check { display: flex; align-items: center; gap: 9px; margin: 6px 0; color: var(--text); cursor: var(--cur-hand); }
label.check input:not([type=checkbox]):not([type=radio]) { width: auto; }
/* флажок — квадрат в кайме, отмеченный — золотой ромб; переключатель — круг */
input[type=checkbox], input[type=radio] { appearance: none; -webkit-appearance: none; flex: none; width: 17px; height: 17px; margin: 0; padding: 0;
  display: inline-grid; place-items: center; border: 1px solid #6e5634; background: #0b0907; box-shadow: inset 0 1px 3px rgba(0,0,0,.8); cursor: var(--cur-hand); vertical-align: middle; }
input[type=radio] { border-radius: 50%; }
input[type=checkbox]::after, input[type=radio]::after { content: ''; width: 8px; height: 8px; background: var(--gold2); box-shadow: 0 0 6px rgba(236,220,176,.7); transform: rotate(45deg) scale(0); transition: transform .12s; }
input[type=radio]::after { border-radius: 50%; }
input[type=checkbox]:checked, input[type=radio]:checked { border-color: var(--gold); }
input[type=checkbox]:checked::after, input[type=radio]:checked::after { transform: rotate(45deg) scale(1); }
input[type=checkbox]:disabled, input[type=radio]:disabled { opacity: .45; cursor: not-allowed; }
/* ползунок: тонкая золотая полоса, ромб */
input[type=range] { -webkit-appearance: none; appearance: none; height: 20px; padding: 0; border: 0; background: transparent; box-shadow: none; cursor: var(--cur-hand); }
input[type=range]::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(90deg, #6e5634, #c8ab72); border: 1px solid #000; }
input[type=range]::-moz-range-track { height: 3px; background: linear-gradient(90deg, #6e5634, #c8ab72); border: 1px solid #000; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px; margin-top: -6px; transform: rotate(45deg); background: #0d0b09; border: 1px solid var(--gold2); box-shadow: 0 0 6px rgba(236,220,176,.5); }
input[type=range]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 0; transform: rotate(45deg); background: #0d0b09; border: 1px solid var(--gold2); }
input[type=range]:focus { box-shadow: none; }

/* кнопки: тёмная плита в тонкой кайме; наведение — золото и тёплое свечение; главная — бронза с прописными */
button {
  background: var(--btn);
  border: 1px solid #4a3a24;
  border-radius: var(--radius);
  padding: 7px 14px;
  cursor: var(--cur-hand);
  white-space: nowrap;
  color: var(--text);
  box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(236,220,176,.06);
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .05s;
}
button:hover:not(:disabled) { border-color: var(--gold); color: var(--gold2); background: var(--btn-hi); box-shadow: 0 0 0 1px #000, inset 0 0 12px rgba(200,171,114,.1), 0 0 10px rgba(200,171,114,.16); }
button:active:not(:disabled) { transform: translateY(1px); }
button:disabled { opacity: .42; cursor: not-allowed; }
button.primary { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 14.5px; color: #f6ead0; text-shadow: 0 1px 2px #000;
  background: var(--btn-main); border-color: #b89a62; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,230,170,.28), 0 4px 12px rgba(0,0,0,.45); }
button.primary:hover:not(:disabled) { color: #fff6e0; border-color: var(--gold2); background: var(--btn-main-hi); box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255,230,170,.35), 0 0 16px rgba(236,200,120,.32); }
button.danger { background: linear-gradient(180deg, #4a1c17, #2a0f0c); border-color: #7a3328; color: #f2d6cc; }
button.danger:hover:not(:disabled) { background: linear-gradient(180deg, #5e231c, #34120e); border-color: #c0584a; color: #fff; box-shadow: 0 0 0 1px #000, 0 0 12px rgba(192,88,74,.3); }
button.ghost { background: rgba(10,8,6,.35); border-color: rgba(200,171,114,.22); box-shadow: none; }
button.ghost:hover:not(:disabled) { background: rgba(30,24,17,.6); box-shadow: none; }
button.wide { width: 100%; margin-top: 8px; }
button.active { color: var(--gold2); border-color: var(--gold2); background: radial-gradient(ellipse at 50% 100%, rgba(200,171,114,.24), transparent 75%), var(--btn); box-shadow: 0 0 0 1px #000, 0 0 10px rgba(236,220,176,.22); }
button.big { padding: 10px 26px; font-size: 16px; margin-top: 6px; }

/* вкладки: подпись прописными, выбранная — золото над чертой */
.tab-btn { flex: 1; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 13.5px; color: var(--muted);
  background: none; border: 0; border-bottom: 1px solid rgba(200,171,114,.18); border-radius: 0; box-shadow: none; padding: 8px 12px; }
.tab-btn:hover:not(:disabled) { color: var(--gold2); background: none; box-shadow: none; }
.tab-btn.active { color: var(--gold2); border-bottom-color: var(--gold); background: radial-gradient(ellipse at 50% 100%, rgba(200,171,114,.22), transparent 70%); box-shadow: none; }

.badge { display: inline-block; padding: 1px 8px; border-radius: var(--radius); font-size: 12px; background: rgba(10,8,6,.6); border: 1px solid var(--line); white-space: nowrap; letter-spacing: .02em; }
.badge.waiting { border-color: #5f8a52; color: #b6dcaa; }
.badge.playing { border-color: var(--gold); color: var(--gold2); }

/* название игры: металл по буквам */
.logo { font-family: var(--font-display); font-size: 34px; letter-spacing: .06em; text-align: center; color: var(--gold2);
  background: linear-gradient(180deg, #fff7df 0%, #f0e2b8 45%, #b8955a 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.8)); }
.logo.small { font-size: 20px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.screen { height: 100vh; display: flex; flex-direction: column; }
/* верхняя полоса экранов вне игры: тёмная, по нижнему краю — золотая черта с самоцветом */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px; min-height: 54px; position: relative; z-index: 2;
  background: var(--bg3-gem) center bottom -8px / 16px no-repeat, linear-gradient(90deg, transparent, #6e5634 15%, #c8ab72 50%, #6e5634 85%, transparent) center bottom / 100% 1px no-repeat,
    linear-gradient(180deg, rgba(8,7,5,.96), rgba(14,12,9,.9));
}