:root {
  --bg: #07080c;
  --ink: #efe6d2;
  --muted: #a99f8c;
  --gold: #d6b46a;
  --gold-hi: #ffe2a0;
  --crystal: #7fd0ff;
  --panel: rgba(14, 14, 20, 0.92);
  --line: rgba(214, 180, 106, 0.35);
  --font: "Palatino Linotype", "Book Antiqua", Georgia, serif;
}
* { box-sizing: border-box; }
html { font-size: calc(clamp(12px, calc(100vh / 56), 26px) * var(--ui-scale, 1)); }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--font); overflow: hidden; user-select: none; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; }

.screen { position: fixed; inset: 0; display: none; z-index: 10; }
.screen.on { display: flex; }

/* ── заставка и меню */
#loading { align-items: center; justify-content: center; flex-direction: column; background: radial-gradient(circle at 50% 40%, #182030, #07080c 70%); }
.logo { font-size: 4.5rem; letter-spacing: 0.08em; color: var(--gold-hi); text-shadow: 0 0 1.5rem rgba(127, 208, 255, 0.45), 0 0.25rem 0 #3a2a10; }
.sub { color: var(--muted); font-style: italic; font-size: 1.25rem; margin: 0.25rem 0 1.75rem; }

#menu { align-items: center; justify-content: flex-start; padding-left: 7vw; background: linear-gradient(90deg, rgba(5, 6, 10, 0.88) 0%, rgba(5, 6, 10, 0.55) 34%, rgba(5, 6, 10, 0) 60%); }
/* меню не закрывает стол: щелчки мимо плашки уходят на предметы (кристаллы, фонарь, жаровня…) */
#menu { pointer-events: none; }
#menu .menu-box { pointer-events: auto; }
.menu-box { display: flex; flex-direction: column; align-items: stretch; width: 22.5rem; }
.menu-box .logo { font-size: 4.125rem; }
.menu-foot { color: var(--muted); font-size: 0.875rem; margin-top: 1.625rem; line-height: 1.4; font-style: italic; }

.btn {
  font-family: var(--font); font-size: 1.25rem; color: var(--ink); cursor: pointer;
  background: linear-gradient(180deg, #2a2418, #18140e); border: 1px solid var(--line); border-radius: 0.625rem;
  padding: 0.6875rem 1.375rem; margin: 0.375rem 0; transition: transform .12s, box-shadow .12s, border-color .12s;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.12), 0 0.25rem 0.875rem rgba(0, 0, 0, 0.45);
}
.btn:hover:not(:disabled) { border-color: var(--gold); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.2), 0 0 1.125rem rgba(214, 180, 106, 0.25); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.big { font-size: 1.5rem; padding: 0.875rem 1.625rem; background: linear-gradient(180deg, #5a4420, #2c200e); border-color: var(--gold); color: var(--gold-hi); }
.btn.ghost { background: transparent; box-shadow: none; }

/* ── панели */
.panel-screen { align-items: center; justify-content: center; background: rgba(4, 5, 8, 0.72); backdrop-filter: blur(0.1875rem); }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 1rem; padding: 1.5rem 1.75rem; box-shadow: 0 1.25rem 3.75rem rgba(0, 0, 0, 0.6); max-height: 92vh; overflow: auto; }
.panel.wide { width: min(82.5rem, 94vw); }
.panel.narrow { width: 23.75rem; display: flex; flex-direction: column; text-align: center; }
.panel h2 { margin: 0.375rem 0 0.875rem; color: var(--gold-hi); font-weight: normal; letter-spacing: 0.04em; }

.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); gap: 0.75rem; margin-bottom: 1.125rem; }
.deck-grid.small { grid-template-columns: repeat(auto-fill, minmax(11.875rem, 1fr)); }
.deck-tile {
  display: flex; gap: 0.75rem; text-align: left; cursor: pointer; color: var(--ink); font-family: var(--font);
  background: linear-gradient(135deg, color-mix(in srgb, var(--c1, #555) 22%, #121218), color-mix(in srgb, var(--c2, #555) 16%, #0d0d12));
  border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0.75rem; padding: 0.625rem; transition: border-color .12s, transform .12s;
}
.deck-tile:hover { transform: translateY(-2px); border-color: rgba(255, 226, 160, 0.4); }
.deck-tile.sel { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 1.375rem rgba(214, 180, 106, 0.3); }
.dt-portrait { width: 5.25rem; height: 5.25rem; flex: none; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); background: #222; display: flex; align-items: center; justify-content: center; font-size: 2.25rem; color: var(--gold-hi); }
.dt-portrait img { width: 100%; height: 100%; object-fit: cover; }
.deck-tile.small .dt-portrait { width: 3.25rem; height: 3.25rem; font-size: 1.375rem; }
.dt-name { font-size: 1.25rem; color: var(--gold-hi); }
.dt-hero { font-size: 0.875rem; color: var(--muted); font-style: italic; }
.dt-houses { margin: 0.3125rem 0; display: flex; gap: 0.375rem; }
.dt-houses i { font-style: normal; font-size: 0.75rem; padding: 1px 0.5rem; border-radius: 6.1875rem; border: 1px solid var(--c); color: var(--c); }
.dt-about { font-size: 0.8125rem; color: #cfc6b4; line-height: 1.35; }
.deck-tile.small .dt-about, .deck-tile.small .dt-hero { display: none; }

.setup-row { display: flex; align-items: center; gap: 0.75rem; }
.spacer { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 0.625rem; overflow: hidden; }
.seg button { font-family: var(--font); font-size: 1.0625rem; color: var(--muted); background: transparent; border: 0; padding: 0.625rem 1.125rem; cursor: pointer; }
.seg button.sel { background: #3a2c14; color: var(--gold-hi); }

/* ── собрание карт */
.col-layout { display: flex; gap: 1.125rem; height: 88vh; }
.col-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.col-head { display: flex; align-items: center; gap: 0.875rem; }
.col-head h2 { margin: 0; }
.tabs { display: flex; gap: 0.375rem; flex: 1; flex-wrap: wrap; }
.tabs button { font-family: var(--font); font-size: 0.9375rem; background: transparent; color: var(--c, var(--ink)); border: 1px solid color-mix(in srgb, var(--c, #888) 50%, transparent); border-radius: 6.1875rem; padding: 0.3125rem 0.8125rem; cursor: pointer; }
.tabs button.sel { background: color-mix(in srgb, var(--c, #888) 25%, transparent); }
.col-grid { margin-top: 0.75rem; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.625rem, 1fr)); gap: 0.75rem; padding: 0.25rem 0.5rem 1.25rem 0.25rem; }
.col-card { position: relative; cursor: pointer; transition: transform .14s; }
.col-card img { width: 100%; display: block; border-radius: 0.625rem; box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.55); }
.col-card:hover { transform: translateY(-0.25rem) scale(1.03); z-index: 2; }
.col-count { position: absolute; top: 0.5rem; right: 0.5rem; background: var(--gold); color: #1a1208; font-weight: bold; border-radius: 6.1875rem; padding: 2px 0.5625rem; }
.builder { width: 18.75rem; flex: none; border-left: 1px solid var(--line); padding-left: 1rem; display: flex; flex-direction: column; overflow: auto; }
.b-title { font-size: 1.25rem; color: var(--gold-hi); margin: 0.375rem 0 0.625rem; }
.b-sub { color: var(--muted); font-size: 0.8125rem; margin: 0.625rem 0; line-height: 1.4; }
.b-deck { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.b-deck span { flex: 1; }
.b-deck small { color: var(--muted); }
.mini { font-family: var(--font); font-size: 0.8125rem; background: #2a2418; color: var(--ink); border: 1px solid var(--line); border-radius: 0.375rem; padding: 0.1875rem 0.5rem; cursor: pointer; }
.mini.danger { color: #ff9a8a; }
.b-houses { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; margin-bottom: 0.5rem; }
.b-houses button { font-family: var(--font); font-size: 1rem; padding: 0.5rem; border-radius: 0.5rem; border: 1px solid var(--c); color: var(--c); background: transparent; cursor: pointer; }
.b-houses button.sel { background: color-mix(in srgb, var(--c) 28%, transparent); color: #fff; }
.b-name { font-family: var(--font); font-size: 1.125rem; background: #0d0d12; color: var(--gold-hi); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem; }
.b-count { font-size: 1.875rem; text-align: center; margin: 0.5rem 0 0; color: #ff9a8a; }
.b-count.ok { color: #9dff9a; }
.b-list { flex: 1; overflow: auto; margin-bottom: 0.5rem; }
.b-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.375rem; margin: 2px 0; border-radius: 0.375rem; cursor: pointer; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 22%, transparent), transparent); }
.b-row b { width: 1.375rem; text-align: center; color: var(--crystal); }
.b-row span { flex: 1; font-size: 0.9375rem; }
.b-row i { color: var(--gold-hi); font-style: normal; }

.rules { width: min(53.75rem, 92vw); line-height: 1.5; font-size: 1.0625rem; }
.rules p { margin: 0.5rem 0; }
.rules b { color: var(--gold-hi); font-weight: normal; }
.kw-list { columns: 2; column-gap: 1.75rem; font-size: 0.9375rem; color: #d8cfbd; margin: 0.875rem 0; }
.kw-list p { break-inside: avoid; margin: 0 0 0.5rem; }

/* ── игровой слой */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; display: none; }
#hud.on { display: block; }
.hud-btn { pointer-events: auto; font-size: 1.375rem; width: 2.75rem; height: 2.75rem; border-radius: 0.625rem; background: rgba(20, 18, 14, 0.8); color: var(--gold-hi); border: 1px solid var(--line); cursor: pointer; }
#game-menu { position: absolute; top: 0.875rem; left: 0.875rem; }
#log { position: absolute; top: 0.875rem; right: 0.875rem; pointer-events: auto; display: flex; flex-direction: column; align-items: flex-end; }
#log-list { display: none; width: 21.25rem; max-height: 46vh; overflow: auto; margin-top: 0.375rem; background: rgba(10, 10, 14, 0.88); border: 1px solid var(--line); border-radius: 0.625rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; line-height: 1.4; }
#log.open #log-list { display: block; }
#log-list .turn { color: var(--gold-hi); margin-top: 0.375rem; }
#banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(0.8); opacity: 0;
  font-size: 4rem; color: var(--gold-hi); letter-spacing: 0.06em; text-shadow: 0 0 1.875rem rgba(255, 200, 120, 0.6), 0 0.25rem 0 #2a1a08;
  padding: 0.625rem 3.75rem; background: radial-gradient(ellipse at center, rgba(10, 8, 6, 0.75), rgba(10, 8, 6, 0) 70%);
  transition: opacity .25s, transform .35s cubic-bezier(.2, 1.4, .4, 1);
}
#banner.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#banner.enemy { color: #ffb3a0; text-shadow: 0 0 1.875rem rgba(255, 90, 60, 0.5), 0 0.25rem 0 #2a0a08; }
#hint { position: absolute; left: 3vw; bottom: 3vh; background: rgba(12, 12, 16, 0.86); border: 1px solid var(--line); border-radius: 6.1875rem; padding: 0.5rem 1.25rem; font-size: 1rem; opacity: 0; transition: opacity .2s; }
#hint.on { opacity: 1; }
#card-info { position: absolute; left: 25vw; top: 24vh; width: 18.75rem; background: rgba(10, 10, 14, 0.9); border: 1px solid var(--line); border-radius: 0.75rem; padding: 0.625rem 0.875rem; font-size: 0.875rem; line-height: 1.4; opacity: 0; transition: opacity .2s; }
#card-info.on { opacity: 1; }
#card-info p { margin: 0.25rem 0; }
#card-info b { color: var(--gold-hi); font-weight: normal; }

.modal { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center; background: rgba(4, 5, 8, 0.7); }
.modal.soft { background: rgba(4, 5, 8, 0.35); }
.modal.on { display: flex; }
.modal label { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.5rem 0; font-size: 1.0625rem; }
.modal label.check { justify-content: flex-start; }
.bar-modal { position: fixed; left: 0; right: 0; bottom: 6vh; z-index: 30; display: none; justify-content: center; }
.bar-modal.on { display: flex; }
.bar { display: flex; align-items: center; gap: 1.125rem; background: var(--panel); border: 1px solid var(--line); border-radius: 0.875rem; padding: 0.625rem 1.125rem; font-size: 1.0625rem; max-width: 56.25rem; }
.bar b { color: var(--gold-hi); font-weight: normal; }
.prophecy { width: 23.75rem; text-align: center; }
.prophecy img { width: 15rem; border-radius: 0.75rem; box-shadow: 0 0 2.5rem rgba(255, 207, 90, 0.45); }
.prophecy .row { display: flex; gap: 0.625rem; justify-content: center; }
#go-title { font-size: 3.2rem; margin: 0.375rem 0; white-space: nowrap; }
#gameover .panel { width: auto; min-width: 23.75rem; }   /* «Поражение» не обрезается */
#go-title.win { color: var(--gold-hi); text-shadow: 0 0 1.875rem rgba(255, 210, 120, 0.6); }
#go-title.lose { color: #ff9a8a; text-shadow: 0 0 1.875rem rgba(255, 90, 60, 0.45); }
#go-sub { color: var(--muted); margin-bottom: 1rem; }

/* ── сборщик колод */
.bd-layout { display: flex; gap: 1.125rem; height: 90vh; padding: 1.125rem 1.25rem; }
.bd-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bd-top { display: flex; align-items: center; gap: 0.875rem; }
.bd-top h2 { margin: 0; }
.bd-houses { display: flex; gap: 0.375rem; flex: 1; flex-wrap: wrap; }
.bd-house { display: flex; align-items: center; gap: 0.375rem; font-family: var(--font); font-size: 0.9375rem; color: var(--c, var(--ink)); background: rgba(255, 255, 255, 0.03); border: 1px solid color-mix(in srgb, var(--c, #888) 45%, transparent); border-radius: 0.625rem; padding: 0.25rem 0.75rem 0.25rem 0.375rem; cursor: pointer; transition: background .12s; }
.bd-house img { width: 1.625rem; height: 1.625rem; }
.bd-house.sel { background: color-mix(in srgb, var(--c, #888) 26%, transparent); box-shadow: 0 0 0.875rem color-mix(in srgb, var(--c, #888) 40%, transparent); }
.bd-filters { display: flex; align-items: center; gap: 0.625rem; margin: 0.75rem 0 0.375rem; flex-wrap: wrap; }
.bd-label { color: var(--muted); font-size: 0.875rem; }
.bd-costs { display: flex; gap: 0.25rem; }
.bd-cost { width: 2.125rem; height: 2.125rem; font-family: var(--font); font-size: 1.0625rem; color: #dff4ff; cursor: pointer; border: 0;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #3c7bb8, #10294d); }
.bd-cost.sel { background: linear-gradient(160deg, #9fe6ff, #2c7fd0); color: #08203a; font-weight: bold; }
.seg.small button { font-size: 0.875rem; padding: 0.4375rem 0.6875rem; }
.bd-toggle { font-family: var(--font); font-size: 0.875rem; color: var(--gold); background: transparent; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.4375rem 0.6875rem; cursor: pointer; }
.bd-toggle.sel { background: #3a2c14; color: var(--gold-hi); border-color: var(--gold); }
.bd-search { flex: 1; min-width: 10rem; font-family: var(--font); font-size: 0.9375rem; color: var(--ink); background: #0c0c11; border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem 0.625rem; }
.bd-grid { flex: 1; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0.875rem; padding: 0.5rem 0.5rem 1.5rem 0.25rem; align-content: start; }
.bd-card { position: relative; cursor: pointer; transition: transform .14s, filter .14s; perspective: 37.5rem; }
.bd-card img { width: 100%; aspect-ratio: 512 / 716; background: rgba(255, 255, 255, 0.03); display: block; border-radius: 0.625rem; box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.6); transition: transform .14s; }
.bd-card:hover { z-index: 2; }
.bd-card:hover img { transform: translateY(-0.375rem) scale(1.05) rotateX(4deg); box-shadow: 0 1rem 1.875rem rgba(0, 0, 0, 0.7), 0 0 1.125rem rgba(127, 208, 255, 0.25); }
.bd-card.legend img { box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 214, 140, 0.4); }
.bd-card.full { filter: saturate(0.25) brightness(0.55); }
.bd-pips { position: absolute; left: 0; right: 0; bottom: -0.5625rem; display: flex; justify-content: center; gap: 0.3125rem; }
.bd-pips i { width: 0.75rem; height: 0.75rem; border-radius: 50%; border: 1px solid var(--gold); background: #15120c; }
.bd-pips i.on { background: radial-gradient(circle at 35% 35%, #fff2c0, #d6a24a); box-shadow: 0 0 0.5rem rgba(255, 210, 120, 0.7); }
.bd-empty { color: var(--muted); font-style: italic; padding: 1.25rem; }
.bd-empty.small { padding: 0.5rem 0; font-size: 0.875rem; }

.bd-side { width: 20.625rem; flex: none; border-left: 1px solid var(--line); padding-left: 1rem; display: flex; flex-direction: column; overflow: auto; transition: background .15s; }
.bd-side.drop { background: rgba(127, 208, 255, 0.07); }
.bd-title { font-size: 1.1875rem; color: var(--gold-hi); margin: 0.625rem 0 0.5rem; }
.bd-sub { color: var(--muted); font-size: 0.8125rem; margin: 0 0 0.5rem; line-height: 1.4; }
.bd-deckrow { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem; margin: 0.25rem 0; border-radius: 0.625rem; background: linear-gradient(90deg, color-mix(in srgb, var(--c1) 22%, #111), color-mix(in srgb, var(--c2) 14%, #0e0e12)); border: 1px solid rgba(255, 255, 255, 0.06); }
.bd-dr-hero { width: 2.625rem; height: 2.625rem; border-radius: 50%; overflow: hidden; border: 2px solid var(--gold); flex: none; background: #222; }
.bd-dr-hero img { width: 100%; height: 100%; object-fit: cover; }
.bd-dr-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bd-dr-body b { font-weight: normal; color: var(--gold-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-dr-body small { color: var(--muted); font-size: 0.75rem; }
.bd-newhouses { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; margin-bottom: 0.5rem; }
.bd-newhouses button { display: grid; grid-template-columns: 1.875rem 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 0.375rem; text-align: left; font-family: var(--font); padding: 0.375rem 0.5rem; border-radius: 0.625rem; border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); color: var(--c); background: transparent; cursor: pointer; }
.bd-newhouses button img { grid-row: span 2; width: 1.875rem; }
.bd-newhouses button span { font-size: 1rem; }
.bd-newhouses button small { font-size: 0.6875rem; color: var(--muted); }
.bd-newhouses button.sel { background: color-mix(in srgb, var(--c) 25%, transparent); box-shadow: 0 0 0.875rem color-mix(in srgb, var(--c) 35%, transparent); }
.bd-head { margin-top: 0.25rem; }
.bd-name { width: 100%; font-family: var(--font); font-size: 1.1875rem; background: #0c0c11; color: var(--gold-hi); border: 1px solid var(--line); border-radius: 0.5rem; padding: 0.5rem 0.625rem; }
.bd-heroes { display: flex; align-items: center; gap: 0.5rem; margin: 0.625rem 0; }
.bd-hero { width: 2.875rem; height: 2.875rem; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid rgba(214, 180, 106, 0.35); background: #222; cursor: pointer; color: var(--gold-hi); font-family: var(--font); font-size: 1.25rem; }
.bd-hero img { width: 100%; height: 100%; object-fit: cover; }
.bd-hero.sel { border-color: var(--gold-hi); box-shadow: 0 0 0.75rem rgba(255, 210, 120, 0.5); }
.bd-hero-name { color: var(--muted); font-style: italic; }
.bd-stats { display: flex; align-items: flex-end; gap: 0.75rem; }
.bd-count { font-size: 2.375rem; color: #ff9a8a; line-height: 1; min-width: 5.375rem; }
.bd-count small { font-size: 1.125rem; color: var(--muted); }
.bd-count.ok { color: #9dff9a; }
.bd-count.flash { animation: bdflash .4s; }
@keyframes bdflash { 0%, 100% { transform: none; } 30% { transform: scale(1.18); color: #ff5a4a; } }
.bd-curve { flex: 1; display: flex; gap: 0.25rem; height: 4.375rem; align-items: flex-end; }
.bd-bar { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; cursor: pointer; }
.bd-bar i { width: 100%; background: linear-gradient(180deg, #8fdcff, #2a6fb0); border-radius: 0.25rem 0.25rem 0 0; position: relative; min-height: 2px; transition: height .2s; }
.bd-bar.sel i { background: linear-gradient(180deg, #ffe2a0, #b88a3a); }
.bd-bar em { position: absolute; top: -1rem; left: 0; right: 0; text-align: center; font-style: normal; font-size: 0.6875rem; color: var(--ink); }
.bd-bar span { font-size: 0.6875rem; color: var(--muted); margin-top: 2px; }
.bd-types-sum { color: var(--muted); font-size: 0.8125rem; margin: 0.5rem 0; }
.bd-list { flex: 1; overflow: auto; min-height: 7.5rem; margin-bottom: 0.5rem; }
.bd-strip { display: flex; align-items: center; gap: 0.5rem; height: 2.5rem; margin: 0.1875rem 0; padding: 0 0.625rem 0 0; border-radius: 0.5rem; cursor: pointer; background-size: cover; background-position: center; border: 1px solid rgba(255, 255, 255, 0.07); border-left: 0.25rem solid var(--c); transition: transform .1s, border-color .1s; }
.bd-strip:hover { transform: translateX(-0.1875rem); border-color: rgba(255, 226, 160, 0.4); }
.bd-strip.legend span { color: var(--gold-hi); }
.bd-strip b { width: 2rem; height: 2rem; margin-left: 0.25rem; display: flex; align-items: center; justify-content: center; flex: none; color: #fff; font-size: 1.0625rem;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: linear-gradient(160deg, #6ab8ff, #123a70); }
.bd-strip span { flex: 1; font-size: 0.9375rem; text-shadow: 0 1px 0.1875rem #000, 0 0 0.375rem #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bd-strip i { font-style: normal; color: var(--gold-hi); background: rgba(0, 0, 0, 0.65); border-radius: 0.375rem; padding: 1px 0.4375rem; }
.bd-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 0.375rem; }
.bd-btns .btn { margin: 0; font-size: 1rem; padding: 0.5625rem 0.625rem; }
.bd-btns .btn.big { grid-column: span 2; font-size: 1.25rem; }
.bd-tip { position: fixed; width: 16.25rem; z-index: 60; border-radius: 0.75rem; box-shadow: 0 1.25rem 3.125rem rgba(0, 0, 0, 0.8); pointer-events: none; }
.bd-zoom { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; gap: 1.625rem; background: rgba(4, 5, 8, 0.8); }
.bd-zoom.on { display: flex; }
.bd-zoom img { height: 78vh; border-radius: 1.125rem; box-shadow: 0 1.875rem 5rem rgba(0, 0, 0, 0.8); }
.bd-zoom div { max-width: 21.25rem; font-size: 1rem; line-height: 1.45; }
.bd-zoom b { color: var(--gold-hi); font-weight: normal; }

/* ── шторка между ходами вдвоём */
.modal.curtain { background: radial-gradient(circle at 50% 40%, #151a26, #05060a 75%); z-index: 40; }
.curtain-box { text-align: center; }
.curtain-sub { color: var(--muted); font-style: italic; font-size: 1.25rem; }
.curtain-name { font-size: 3.625rem; color: var(--gold-hi); margin: 0.375rem 0; text-shadow: 0 0 1.625rem rgba(127, 208, 255, 0.35); }
.curtain-why { color: #cfc6b4; margin-bottom: 1.375rem; font-size: 1.125rem; }
.setup-row.top { margin-bottom: 0.375rem; }

/* ═══ Облик в духе нашей НРИ (03.11): тёмный дуб и кожа, старая бронза, у выбранного — золочёная рамка.
   Плашки свои, из системы (assets/ui/combat → ui/), 9-частные через border-image. Смысл цветов прежний. */
:root {
  --sk-tex: url("../ui/leather.webp");
  --sk-frame: url("../ui/frame.webp");
  --sk-frame-on: url("../ui/frame-on.webp");
  --sk-card: url("../ui/card.webp");
  --sk-card-on: url("../ui/card-on.webp");
  --sk-plaque: url("../ui/plaque.webp");
  --sk-plaque-on: url("../ui/plaque-on.webp");
  --sk-button: url("../ui/button.webp");
  --sk-tile: url("../ui/tile.webp");
  --sk-tile-on: url("../ui/tile-on.webp");
  --sk-ring: url("../ui/ring.webp");
  --sk-div-mid: url("../ui/divider-mid.webp");
  --sk-div-rod: url("../ui/divider-rod.webp");
  --sk-panel-bg: linear-gradient(180deg, rgba(18, 13, 9, 0.42), rgba(8, 6, 5, 0.62)), var(--sk-tex) 0 0 / 16rem 16rem repeat, #120d09;
  --ink: #f1e6cc;
  --muted: #b9a888;
  --gold: #b8894a;
  --gold-hi: #f0c96a;
  --line: rgba(184, 137, 74, 0.38);
}

/* кнопки: бронзовая кнопка на дубе; главная — золочёная плитка */
.btn {
  background: none; border: 0.6875rem solid transparent; border-radius: 0;
  border-image: var(--sk-button) 26 fill / 0.6875rem / 0 stretch;
  padding: 2px 0.875rem; color: #e6d4ae; text-shadow: 0 1px 2px #000;
  box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.5);
}
.btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.18); color: #fff4dc; box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.55); border-color: transparent; }
.btn:active:not(:disabled) { transform: translateY(1px); filter: brightness(0.95); }
.btn.big { background: none; border-image-source: var(--sk-tile-on); color: #ffe7a8; padding: 0.25rem 1.125rem; box-shadow: 0 0 0.875rem rgba(240, 200, 110, 0.35), 0 0.375rem 1rem rgba(0, 0, 0, 0.5); }
.btn.ghost { border-image-source: var(--sk-plaque); color: var(--muted); box-shadow: none; }
.btn:disabled { filter: grayscale(0.7) brightness(0.65); opacity: 0.8; }
.hud-btn { background: none; border: 0.5625rem solid transparent; border-image: var(--sk-button) 26 fill / 0.5625rem / 0 stretch; border-radius: 0; color: #f0c96a; width: 3rem; height: 3rem; padding: 0; line-height: 1; text-shadow: 0 1px 2px #000; }
.hud-btn:hover { filter: brightness(1.2); }

/* панели и окна: кожа под притемнением в резной раме */
.panel { background: var(--sk-panel-bg); border: 1rem solid transparent; border-radius: 0; border-image: var(--sk-frame) 36 / 1rem / 0 stretch; box-shadow: 0 1.5rem 4.375rem rgba(0, 0, 0, 0.7); }
.panel h2, .bd-title { color: var(--gold-hi); text-shadow: 0 1px 0.1875rem #000; padding-bottom: 0.75rem;
  background: var(--sk-div-mid) left 2.5rem bottom -2px / auto 0.875rem no-repeat, var(--sk-div-rod) left bottom -2px / 100% 0.875rem no-repeat; }
.panel.narrow h2 { background-position: center bottom -2px, center bottom -2px; }
.menu-box .sub { padding-bottom: 0.875rem; margin-bottom: 1.125rem; background: var(--sk-div-mid) center bottom / auto 1rem no-repeat, var(--sk-div-rod) center bottom / 100% 1rem no-repeat; }
.menu-box .btn { margin: 0.3125rem 0; font-size: 1.3125rem; }
.menu-box .btn.big { font-size: 1.5625rem; }

/* переключатели: плитки, выбранная — золочёная */
.seg { border: none; border-radius: 0; gap: 0.25rem; overflow: visible; }
.seg button { border: 0.5625rem solid transparent; border-image: var(--sk-tile) 26 fill / 0.5625rem / 0 stretch; color: var(--muted); padding: 2px 0.75rem; }
.seg button.sel { background: none; border-image-source: var(--sk-tile-on); color: #ffe7a8; box-shadow: 0 0 0.625rem rgba(240, 200, 110, 0.4); }
.seg.small button { padding: 1px 0.5625rem; }

/* колоды на выборе: дубовая доска в бронзе, выбранная — в золоте */
.deck-tile { border: 0.8125rem solid transparent; border-radius: 0; border-image: var(--sk-card) 32 / 0.8125rem / 0 stretch; background-clip: padding-box; padding: 0.25rem; }
.deck-tile:hover { border-color: transparent; filter: brightness(1.12); }
.deck-tile.sel { border-color: transparent; border-image-source: var(--sk-card-on); box-shadow: 0 0 1.125rem rgba(255, 196, 92, 0.42); }
.dt-portrait { border: 0; border-radius: 50%; box-shadow: 0 0 0 0.1875rem #6e5230, 0 0 0 0.3125rem #c9a160, 0 0.1875rem 0.625rem rgba(0, 0, 0, 0.6); }

/* таблички: подсказка, полоса пересдачи, пояснения, журнал */
.bar, #hint, #card-info, #log-list { background: none; border: 0.625rem solid transparent; border-radius: 0; border-image: var(--sk-plaque) 22 fill / 0.625rem / 0 stretch; color: var(--ink); text-shadow: 0 1px 2px #000; }
#card-info, #log-list { border-image: var(--sk-frame) 36 fill / 0.75rem / 0 stretch; background: var(--sk-panel-bg); background-clip: padding-box; }
#banner { background: var(--sk-div-mid) center bottom / auto 1.375rem no-repeat, var(--sk-div-rod) center bottom / 80% 1.375rem no-repeat, radial-gradient(ellipse at center, rgba(10, 8, 6, 0.75), rgba(10, 8, 6, 0) 70%); padding-bottom: 1.625rem; }
.curtain-box { background: var(--sk-panel-bg); border: 1.125rem solid transparent; border-image: var(--sk-frame-on) 36 / 1.125rem / 0 stretch; padding: 1.625rem 3rem; box-shadow: 0 1.875rem 5rem rgba(0, 0, 0, 0.8); }

/* сборщик колод */
.bd-house, .tabs button { border: 0.5rem solid transparent; border-radius: 0; border-image: var(--sk-tile) 26 fill / 0.5rem / 0 stretch; background: none; padding: 0 0.625rem 0 0.25rem; }
.bd-house.sel, .tabs button.sel { background: none; border-image-source: var(--sk-tile-on); box-shadow: 0 0 0.75rem rgba(240, 200, 110, 0.35); }
.bd-toggle { border: 0.5rem solid transparent; border-radius: 0; border-image: var(--sk-tile) 26 fill / 0.5rem / 0 stretch; background: none; padding: 0 0.5rem; }
.bd-toggle.sel { background: none; border-image-source: var(--sk-tile-on); color: #ffe7a8; }
.bd-search, .bd-name, .b-name { background: rgba(8, 6, 4, 0.75); border: 1px solid rgba(184, 137, 74, 0.5); box-shadow: inset 0 2px 0.375rem rgba(0, 0, 0, 0.7); }
.bd-side { border-left: 0; padding-left: 1.125rem; background: var(--sk-div-rod) left top / 0.875rem 100% no-repeat; }
.bd-deckrow { border: 0.625rem solid transparent; border-radius: 0; border-image: var(--sk-card) 32 / 0.625rem / 0 stretch; background-clip: padding-box; padding: 2px; }
.bd-newhouses button { border: 0.5625rem solid transparent; border-radius: 0; border-image: var(--sk-tile) 26 fill / 0.5625rem / 0 stretch; background: none; }
.bd-newhouses button.sel { background: none; border-image-source: var(--sk-tile-on); }
.bd-hero { box-shadow: 0 0 0 2px #6e5230; border: 0; }
.bd-hero.sel { box-shadow: 0 0 0 2px #f0c96a, 0 0 0.75rem rgba(255, 210, 120, 0.5); }
.mini { border: 0.4375rem solid transparent; border-radius: 0; border-image: var(--sk-button) 26 fill / 0.4375rem / 0 stretch; background: none; padding: 0 0.375rem; color: #e6d4ae; }
.bd-btns .btn { padding: 0 0.5rem; }
.modal label input[type=range] { accent-color: #c9a160; }
#setup .panel { padding-bottom: 0; }
#setup .setup-row:last-child { position: sticky; bottom: 0; z-index: 2; padding: 0.75rem 0 0.875rem; margin-top: 0.25rem;
  background: linear-gradient(180deg, rgba(14, 10, 7, 0), rgba(14, 10, 7, 0.96) 30%), var(--sk-tex) 0 0 / 16rem 16rem repeat; }

/* название в две строки: «Обереги / и Тропы», союз мельче и курсивом */
.logo i { font-size: 0.55em; font-style: italic; color: #d8b878; letter-spacing: 0; }
.menu-box .logo { font-size: 3.875rem; line-height: 0.95; }

/* ── выбор варианта розыгрыша и Прозрение */
.panel.variant { width: 32.5rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.panel.variant img { width: 12.5rem; border-radius: 0.75rem; box-shadow: 0 0 1.875rem rgba(127, 208, 255, 0.35); margin-bottom: 0.625rem; }
.variant-list { display: flex; flex-direction: column; gap: 0.375rem; width: 100%; margin-bottom: 0.375rem; }
.variant-btn { text-align: left; font-size: 1rem; line-height: 1.35; }
.variant-btn em { float: right; font-style: normal; color: #9fe6ff; margin-left: 0.625rem; }
.variant-btn.exalt { border-image-source: var(--sk-tile-on); color: #ffe7a8; }
.panel.pick { text-align: center; width: auto; max-width: 92vw; }
.pick-list { display: flex; gap: 1.125rem; justify-content: center; }
.pick-card { width: min(15rem, 26vw); border-radius: 0.75rem; cursor: pointer; box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.7); transition: transform .15s, box-shadow .15s; }
.pick-card:hover { transform: translateY(-0.5rem) scale(1.04); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.8), 0 0 1.5rem rgba(255, 214, 140, 0.45); }

/* пояснения свойств: справа от превью (оно у левого края, ~30% ширины), над рукой — когда наведена карта руки */
#card-info { left: calc(4vw + 30vh); top: 22vh; max-width: min(20rem, 28vw); }
#card-info.at-hand { left: auto; right: 3vw; top: auto; bottom: 47vh; }
/* «почему нельзя» */
#toast { position: absolute; left: 50%; bottom: 30vh; transform: translateX(-50%) translateY(0.5rem); opacity: 0; transition: opacity .3s, transform .3s;
  border: 0.625rem solid transparent; border-image: var(--sk-plaque) 22 fill / 0.625rem / 0 stretch; color: #ffd8c8; font-size: 1.0625rem; padding: 2px 0.875rem; text-shadow: 0 1px 2px #000; pointer-events: none; white-space: nowrap; }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Лента последних ходов: миниатюры у левого края, свои — золотая рамка, чужие — красная (аудит UI, 5.3) */
#hist { position: absolute; left: 1vw; top: 11vh; display: flex; flex-direction: column; gap: 0.35rem; pointer-events: auto; }
.hist-item { position: relative; width: 2.7rem; height: 3.78rem; border-radius: 0.35rem; background: #15120c center / cover no-repeat;
  border: 2px solid var(--gold); box-shadow: 0 0.25rem 0.6rem rgba(0, 0, 0, 0.6); cursor: help; animation: hist-in .3s ease-out; }
.hist-item.op { border-color: #e0573f; }
.hist-item i { position: absolute; right: -0.45rem; bottom: -0.45rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; font-style: normal;
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem; background: #1a140c; border: 1px solid var(--gold); color: var(--gold-hi); }
.hist-item.op i { border-color: #e0573f; color: #ffb4a0; }
@keyframes hist-in { from { opacity: 0; transform: translateX(-0.8rem) scale(0.9); } to { opacity: 1; transform: none; } }
#hist-tip { position: absolute; display: none; pointer-events: none; z-index: 30; width: 15rem; }
#hist-tip.on { display: block; }
#hist-tip img { width: 100%; display: block; border-radius: 0.7rem; box-shadow: 0 1.2rem 2.5rem rgba(0, 0, 0, 0.8); }
#hist-tip div { margin-top: 0.4rem; padding: 0.4rem 0.6rem; font-size: 0.9rem; line-height: 1.35; color: var(--ink); text-shadow: 0 1px 2px #000;
  background: rgba(10, 10, 14, 0.88); border: 1px solid var(--line); border-radius: 0.5rem; }

/* Знамение без окна: кнопка пропуска справа над рукой, стол виден (аудит UI, п. 10) */
#proph-skip { position: absolute; right: 4vw; bottom: 54vh; display: none; pointer-events: auto; margin: 0; }
#proph-skip.on { display: block; animation: proph-in .3s ease-out; }
@keyframes proph-in { from { opacity: 0; transform: translateY(0.5rem); } to { opacity: 1; transform: none; } }

/* ════════ (вход из Foundry) партия, начатая кнопкой в Foundry: выбор колоды, зрители — js/match.js ════════ */
.mset-head { display: flex; align-items: center; gap: 1.25rem; margin-bottom: 0.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.mset-vs { display: flex; align-items: baseline; gap: 0.75rem; font-size: 1.75rem; color: var(--gold-hi); flex: 1; min-width: 0; }
.mset-vs b { font-weight: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mset-vs i { font-size: 1.0625rem; color: var(--muted); }
.mset-state { font-size: 1.0625rem; color: var(--muted); font-style: italic; padding: 0.375rem 0.875rem; border-radius: 99rem; border: 1px dashed rgba(214, 180, 106, 0.35); white-space: nowrap; animation: mset-wait 1.6s ease-in-out infinite; }
.mset-state.ready { color: #9dff9a; font-style: normal; border: 1px solid rgba(157, 255, 154, 0.5); background: rgba(40, 80, 40, 0.25); animation: none; }
@keyframes mset-wait { 50% { opacity: 0.55; } }
.btn.danger { color: #ffb0a0; border-color: rgba(255, 120, 100, 0.45); }
.btn.danger:hover:not(:disabled) { border-color: #ff8a70; box-shadow: 0 0 1.125rem rgba(255, 110, 80, 0.25); }

#watch { pointer-events: none; align-items: flex-start; justify-content: center; }
.watch-box { margin-top: 4vh; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding: 1rem 2rem 1.25rem;
  background: radial-gradient(ellipse at center, rgba(8, 7, 6, 0.82), rgba(8, 7, 6, 0.55) 60%, rgba(8, 7, 6, 0) 100%); border-radius: 2rem; }
.watch-title { font-size: 2.25rem; letter-spacing: 0.08em; color: var(--gold-hi); text-shadow: 0 0 1.25rem rgba(255, 210, 120, 0.45); }
.watch-title::after { content: '…'; display: inline-block; width: 1.2em; text-align: left; animation: watch-dots 1.8s steps(4) infinite; overflow: hidden; vertical-align: bottom; }
@keyframes watch-dots { 0% { width: 0; } 100% { width: 1.2em; } }
.watch-vs { display: flex; align-items: center; gap: 1.75rem; }
.watch-mid { color: var(--muted); font-style: italic; font-size: 1.25rem; }
.watch-p { width: 15rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.25rem; }
.wp-portrait { width: 6rem; height: 6rem; border-radius: 50%; overflow: hidden; border: 2px dashed rgba(214, 180, 106, 0.55); background: #15130f;
  display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--gold-hi); animation: wp-spin 9s linear infinite; }
.wp-portrait img { width: 100%; height: 100%; object-fit: cover; }
.watch-p.ready .wp-portrait { border: 2px solid var(--gold); animation: wp-in .5s ease-out; box-shadow: 0 0 1.5rem rgba(255, 210, 120, 0.45); }
@keyframes wp-spin { to { transform: rotate(360deg); } }
@keyframes wp-in { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
.wp-name { font-size: 1.375rem; color: var(--ink); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wp-hero { font-size: 0.9375rem; color: var(--gold); font-style: italic; min-height: 1.2em; }
.wp-state { font-size: 0.9375rem; color: var(--muted); font-style: italic; }
.watch-p.ready .wp-state { color: #9dff9a; font-style: normal; }
.watch-note { color: var(--muted); font-size: 0.875rem; font-style: italic; }

/* зритель за столом: метка сверху, «Сдаться» в меню паузы не нужно */
#watch-tag { display: none; position: absolute; top: 0.875rem; left: 50%; transform: translateX(-50%); padding: 0.3125rem 1rem; border-radius: 99rem;
  background: rgba(10, 9, 7, 0.78); border: 1px solid var(--line); color: var(--gold-hi); font-size: 0.9375rem; white-space: nowrap; }
body.watching #watch-tag { display: block; }
body.watching #im-surrender { display: none; }
body.in-match:not(.watching) #im-exit { display: none; }

/* мастер за NPC: портрет токена в шапке, «Авто / Сам», сложность; в партии — кнопка автобоя сверху */
.mset-face { width: 3.5rem; height: 3.5rem; border-radius: 50%; object-fit: cover; border: 2px solid var(--gold); box-shadow: 0 0 1rem rgba(255, 210, 120, 0.35); flex: none; }
.mset-face.op { order: 2; }
.mset-npc { display: flex; align-items: center; gap: 0.875rem; flex-wrap: wrap; margin: 0.25rem 0 0.25rem; }
.mset-npc-note { flex: 1; min-width: 14rem; color: var(--muted); font-size: 0.9375rem; font-style: italic; }
.deck-tile.random .dt-portrait { border-style: dashed; background: radial-gradient(circle, #3a2c14, #121014); }
#npc-auto { display: none; position: absolute; top: 0.875rem; left: 50%; transform: translateX(-50%); pointer-events: auto; margin: 0; padding: 0.375rem 1rem;
  font-size: 1rem; white-space: nowrap; display: none; }
body.npc-host.in-match #hud.on #npc-auto { display: block; }
#npc-auto b { font-weight: normal; color: var(--gold-hi); }
#npc-auto i { font-style: italic; color: var(--muted); font-size: 0.875rem; margin-left: 0.625rem; }
#npc-auto.on { border-color: #7dff9a; box-shadow: 0 0 1rem rgba(125, 255, 154, 0.3); }
#npc-auto.on b { color: #b8ffc4; }