/* «Подземелье на одну комнату» — оформление. Цвета — токены сайта из style.css. */

.pz { position: relative; scroll-margin-top: calc(var(--nav-h) + 8px); }
.pz-h { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 10px; }
.pz-prim { color: var(--text-2); font-size: .9rem; line-height: 1.5; max-width: 62ch; }
.pz-prim:empty { display: none; }

/* ---------- Вход ---------- */
.pz-menu {
  display: flex; gap: clamp(16px, 3vw, 32px); align-items: center;
  padding: clamp(18px, 3vw, 32px); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border-strong);
}
.pz-menu[hidden], .pz-igra[hidden] { display: none; }
.pz-menu-art { width: 120px; height: 120px; flex: none; }
.pz-menu-t { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pz-menu-k { display: flex; flex-wrap: wrap; gap: 10px; }
.pz-menu-k [hidden] { display: none; }
.pz-rekordy { color: var(--text-3); }
@media (max-width: 560px) {
  .pz-menu { flex-direction: column; text-align: center; align-items: stretch; }
  .pz-menu-art { width: 84px; height: 84px; margin: 0 auto; }
  .pz-menu-k .btn { width: 100%; justify-content: center; }
  .pz-menu .koshel-plashka { align-self: center; }
}

/* ---------- Забег ---------- */
.pz-igra { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; scroll-margin-top: calc(var(--nav-h) + 8px); }
@media (max-width: 900px) { .pz-igra { grid-template-columns: 1fr; gap: 12px; } }

.pz-stol {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: clamp(8px, 1.6vw, 18px); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border-strong);
}
.pz-hud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 0 4px; }
.pz-etazh { display: flex; align-items: baseline; gap: 6px; }
.pz-etazh-n { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; color: var(--gold-2); line-height: 1; font-variant-numeric: lining-nums; }
.pz-etazh-iz { color: var(--text-3); font-size: .95rem; }
.pz-rezhim { color: var(--violet-2); font-size: .8rem; margin-left: 4px; }
.pz-zhizn { display: flex; gap: 4px; }
.pz-serdce {
  width: 20px; height: 18px; display: inline-block;
  background: var(--ember);
  clip-path: path("M10 17 C4 12 0 9 0 5 C0 2 2 0 5 0 C7 0 9 1 10 3 C11 1 13 0 15 0 C18 0 20 2 20 5 C20 9 16 12 10 17Z");
}
.pz-serdce-0 { background: rgba(255, 255, 255, .14); }
.pz-dary { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.pz-dar-chip {
  font-size: .74rem; padding: 3px 9px; border-radius: 999px; color: var(--gold-2);
  border: 1px solid rgba(232, 147, 76, .35); background: rgba(232, 147, 76, .08); cursor: help;
}
@media (max-width: 560px) {
  .pz-dary { margin-left: 0; width: 100%; }
  /* На телефоне доска забирает поля контейнера: каждый гекс шире на пару пикселей — под палец. */
  .pz-stol { margin-inline: -16px; padding: 6px; border-radius: 12px; border-inline: 0; }
  .pz-pole { border-radius: 8px; }
}

.pz-pole { border-radius: var(--radius-sm); overflow: hidden; background: #07060b; }
.pz-svg { width: min(100%, calc((100vh - 230px) * 620 / 566)); min-width: min(100%, 330px); margin: 0 auto; height: auto; aspect-ratio: 620 / 566; display: block; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.pz-svg:focus { outline: none; }
.pz-svg:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; }
.pz-pole.pz-bol { animation: pz-bol .32s ease-out; }
@keyframes pz-bol {
  0% { box-shadow: inset 0 0 0 0 rgba(192, 80, 58, 0); transform: translateX(0); }
  25% { box-shadow: inset 0 0 60px 10px rgba(192, 80, 58, .55); transform: translateX(-4px); }
  60% { transform: translateX(3px); }
  100% { box-shadow: inset 0 0 0 0 rgba(192, 80, 58, 0); transform: translateX(0); }
}

/* Доска */
.pz-hit { fill: transparent; stroke: rgba(255, 255, 255, .05); stroke-width: 1; cursor: pointer; }
.pz-hit:hover { fill: rgba(240, 180, 111, .07); }
.pz-lest-svet { fill: rgba(240, 180, 111, .12); stroke: var(--gold-2); stroke-width: 3; animation: pz-dyh 1.6s ease-in-out infinite; }
.pz-zona { fill: rgba(192, 80, 58, .28); stroke: rgba(240, 110, 80, .55); stroke-width: 2; }
.pz-zona-2 { fill: rgba(192, 80, 58, .42); }
.pz-zona-pozzhe { fill: none; stroke: rgba(240, 180, 111, .55); stroke-width: 2.5; stroke-dasharray: 7 6; }
.pz-zona-vraga { fill: rgba(154, 157, 212, .22); stroke: var(--violet-2); stroke-width: 2.5; }
.pz-luch { fill: #ffd08a; opacity: .9; animation: pz-dyh 0.9s ease-in-out infinite; }
.pz-cel-shag { fill: rgba(240, 180, 111, .55); pointer-events: none; }
.pz-cel-pryzhok { fill: rgba(240, 180, 111, .08); stroke: var(--gold-2); stroke-width: 2.5; stroke-dasharray: 5 5; pointer-events: none; }
.pz-cel-shchit { fill: rgba(107, 111, 174, .18); stroke: var(--violet-2); stroke-width: 3.5; pointer-events: none; }
.pz-cel-kopyo { fill: rgba(240, 180, 111, .12); stroke: var(--gold); stroke-width: 3.5; pointer-events: none; }
.pz-sovet { fill: none; stroke: #5fd4c4; stroke-width: 4; animation: pz-dyh 1s ease-in-out infinite; pointer-events: none; }
.pz-vybor { fill: rgba(95, 212, 196, .18); stroke: #5fd4c4; stroke-width: 4; pointer-events: none; }
.pz-kursor { fill: none; stroke: #fff; stroke-width: 3; stroke-dasharray: 4 4; pointer-events: none; }
.pz-krug-prizyva { fill: rgba(154, 157, 212, .15); stroke: var(--violet-2); stroke-width: 3; stroke-dasharray: 6 5; animation: pz-dyh 1.2s ease-in-out infinite; }
.pz-metka { animation: pz-dyh 1.2s ease-in-out infinite; }
.pz-strelka { stroke: #ff7a5c; stroke-width: 5; stroke-linecap: round; opacity: .9; }
.pz-strelka-g { fill: #ff7a5c; }
.pz-schet { fill: #c0503a; stroke: #0c0a13; stroke-width: 2; }
.pz-schet-tih { fill: #3a3148; stroke: var(--violet-2); }
.pz-schet-t { fill: #fff; font: 700 14px var(--font-body); text-anchor: middle; }
.pz-hp { fill: #f0b46f; }
.pz-hp-0 { fill: rgba(255, 255, 255, .2); }
.pz-shchit-duga { fill: none; stroke: #9a9dd4; stroke-width: 6; stroke-linecap: round; }
.pz-zz { fill: var(--violet-2); font: 700 18px var(--font-body); }
.pz-slo-sushch, .pz-sloj-sushch, .pz-sloj-bomby, .pz-sloj-predmety, .pz-sloj-metki, .pz-sloj-namer, .pz-sloj-effekty, .pz-sloj-zony, .pz-sloj-plitki { pointer-events: none; }
.pz-sush { transition: transform .18s ease-out, opacity .35s; }
.pz-sush.pz-ischez { opacity: 0; }
.pz-oglushen .pz-sush-in { opacity: .6; }
.pz-geroj .pz-sush-in { filter: drop-shadow(0 0 6px rgba(240, 180, 111, .55)); }

/* Вспышки */
.pz-fx-vzryv { fill: rgba(255, 200, 120, .8); stroke: #e8934c; stroke-width: 6; animation: pz-vzryv .65s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.pz-fx-udar { fill: none; stroke: #fff; stroke-width: 5; animation: pz-udar .5s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.pz-fx-blok { fill: none; stroke: var(--violet-2); stroke-width: 6; animation: pz-udar .5s ease-out forwards; transform-box: fill-box; transform-origin: center; }
.pz-fx-ataka { stroke: #ff7a5c; stroke-width: 6; stroke-linecap: round; animation: pz-gasnet .45s ease-out forwards; }
.pz-fx-brosok { stroke: var(--gold-2); stroke-width: 5; stroke-linecap: round; animation: pz-gasnet .45s ease-out forwards; }
.pz-fx-luch { fill: rgba(255, 208, 138, .75); animation: pz-gasnet .6s ease-out forwards; }
.pz-fx-teleport { fill: none; stroke: var(--violet-2); stroke-width: 5; animation: pz-udar .6s ease-out forwards; transform-box: fill-box; transform-origin: center; }
@keyframes pz-vzryv { from { transform: scale(.4); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
@keyframes pz-udar { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes pz-gasnet { from { opacity: 1; } to { opacity: 0; } }
@keyframes pz-dyh { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* Окна поверх доски: алтарь и итог */
.pz-okno {
  /* Окно накрывает весь стол (счёт, доску и кнопки), а не одну доску: на телефоне
     доска ниже трёх карточек дара, и они не помещались. */
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; padding: 12px;
  border-radius: inherit; background: rgba(9, 7, 14, .86); backdrop-filter: blur(3px);
}
.pz-okno[hidden] { display: none; }
.pz-okno-in {
  width: min(480px, 100%); max-height: 100%; overflow: auto; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(14px, 3vw, 26px); border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--border-strong); box-shadow: var(--shadow);
}
.pz-okno-in h2 { font-size: clamp(1.3rem, 3vw, 1.7rem); }
.pz-altar-img { width: 80px; height: 80px; }
@media (max-height: 700px), (max-width: 400px) { .pz-altar-img { width: 56px; height: 56px; } }
.pz-dary-vybor { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pz-dar {
  display: flex; flex-direction: column; gap: 2px; text-align: left; width: 100%; min-height: 56px;
  padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface);
  transition: border-color .2s, background .2s;
}
.pz-dar:hover, .pz-dar:focus-visible { border-color: var(--gold); background: rgba(232, 147, 76, .1); outline: none; }
.pz-dar b { font-family: var(--font-display); color: var(--gold-2); font-size: 1.05rem; font-weight: 600; }
.pz-dar span { color: var(--text-2); font-size: .88rem; line-height: 1.4; }
.pz-itog-t { color: var(--text-2); line-height: 1.5; }
.pz-itog-m { color: var(--gold-2); font-weight: 600; }
.pz-itog-k { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pz-itog-k [hidden] { display: none; }

/* Кнопки действий: крупные цели для пальца */
.pz-dejstviya { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pz-dk {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 62px; padding: 6px 2px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: rgba(255, 255, 255, .03);
  transition: border-color .15s, background .15s, opacity .15s;
}
.pz-dk:hover:not(:disabled) { background: var(--surface-2); }
.pz-dk:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.pz-dk[aria-pressed="true"] { border-color: var(--gold); background: linear-gradient(180deg, rgba(232, 147, 76, .2), rgba(232, 147, 76, .05)); }
.pz-dk:disabled { opacity: .4; cursor: not-allowed; }
.pz-dk-t { font-size: .88rem; font-weight: 600; }
.pz-dk-n { font-size: .7rem; color: var(--text-3); min-height: 1em; line-height: 1.1; }
.pz-dk-kd .pz-dk-n { color: var(--ember); }
.pz-dk-i { width: 22px; height: 22px; background: var(--gold-2); -webkit-mask: var(--ikon) center / contain no-repeat; mask: var(--ikon) center / contain no-repeat; }
#pzDkShag .pz-dk-i { --ikon: url("assets/ikon-shag.svg"); }
#pzDkPryzhok .pz-dk-i { --ikon: url("assets/ikon-pryzhok.svg"); }
#pzDkShchit .pz-dk-i { --ikon: url("assets/ikon-shchit.svg"); }
#pzDkKopyo .pz-dk-i { --ikon: url("assets/ikon-kopyo.svg"); }
#pzDkZhdat .pz-dk-i { --ikon: url("assets/ikon-zhdat.svg"); }
@media (max-width: 400px) { .pz-dk-t { font-size: .8rem; } .pz-dk { min-height: 58px; } }

/* Боковая панель */
.pz-panel {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border);
}
.pz-status { font-size: .95rem; line-height: 1.5; min-height: 3em; }
.pz-info { color: var(--text-2); font-size: .88rem; line-height: 1.5; min-height: 1.5em; }
.pz-info:empty { display: none; }
.pz-knopki { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-knopki .btn { min-height: 40px; }
.pz-knopki .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 900px) {
  .pz-panel { padding: 12px; }
  .pz-knopki .btn { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 8px 10px; font-size: .84rem; }
}

/* Правила */
.pz-pravila { margin-top: 22px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); }
.pz-pravila summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; list-style: none;
  padding: 16px 20px; font-family: var(--font-display); font-size: 1.15rem;
}
.pz-pravila summary::-webkit-details-marker { display: none; }
.pz-pravila summary svg { width: 20px; height: 20px; transition: transform .2s; }
.pz-pravila[open] summary svg { transform: rotate(180deg); }
.pz-pravila summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -2px; border-radius: var(--radius); }
.pz-pravila-in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; padding: 0 20px 22px; }
@media (max-width: 800px) { .pz-pravila-in { grid-template-columns: 1fr; gap: 18px; } }
.pz-pravila h3 { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold-2); margin: 16px 0 6px; }
.pz-pravila h3:first-child { margin-top: 0; }
.pz-pravila p { color: var(--text-2); line-height: 1.6; font-size: .94rem; }
.pz-pravila kbd { font: 600 .8rem var(--font-body); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--border-strong); background: var(--surface-2); }
.pz-bestiarij ul { display: flex; flex-direction: column; gap: 10px; }
.pz-bestiarij li { display: flex; gap: 12px; align-items: flex-start; }
.pz-bestiarij img { width: 40px; height: 40px; flex: none; }
.pz-bestiarij li div { display: flex; flex-direction: column; gap: 2px; }
.pz-bestiarij b { font-weight: 600; }
.pz-bestiarij span { color: var(--text-2); font-size: .88rem; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .pz-sush { transition: none; }
  .pz-lest-svet, .pz-luch, .pz-sovet, .pz-krug-prizyva, .pz-metka { animation: none; }
  .pz-pole.pz-bol { animation: none; box-shadow: inset 0 0 40px 6px rgba(192, 80, 58, .45); }
  .pz-fx-vzryv, .pz-fx-udar, .pz-fx-blok, .pz-fx-teleport, .pz-fx-ataka, .pz-fx-brosok, .pz-fx-luch { animation: none; opacity: .5; }
}