/* ============================================================
   A5Yahtzee — «Яхтза богов». Стили портированы с дизайн-пакета
   design_handoff_yahtzee_gods (high-fidelity). Префикс yz-, чтобы
   не конфликтовать с игрой/боем. Оверлей #yahtzee-root.
   ============================================================ */

#yahtzee-root {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: #0b0805; color: #d8c39a;
  font-family: 'EB Garamond', Georgia, serif; user-select: none;
  overflow: hidden;
}
#yahtzee-root.show { display: block; }

.yz-stage { position: relative; width: 100%; height: 100%; min-height: 760px; overflow: hidden; }

/* фон таверны + затемнение + виньетка */
.yz-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) brightness(.55); }
.yz-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,5,3,.82) 0%, rgba(8,5,3,.55) 34%, rgba(11,7,4,.72) 62%, rgba(6,4,2,.9) 100%); }
.yz-vignette { position: absolute; inset: 0; box-shadow: inset 0 0 220px 60px rgba(0,0,0,.85); pointer-events: none; }
.yz-table { position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(180deg, rgba(74,46,22,0) 0%, rgba(64,40,19,.55) 7%, #3a2413 18%, #2a1809 55%, #1c0f05 100%); }
.yz-table-edge { position: absolute; left: 0; right: 0; bottom: 52%; height: 2px; background: linear-gradient(90deg, rgba(224,179,87,0), rgba(224,179,87,.35) 30%, rgba(224,179,87,.35) 70%, rgba(224,179,87,0)); }
.yz-table-glow { position: absolute; left: 50%; bottom: 8%; width: 64%; height: 42%; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 60%, rgba(242,190,100,.16), rgba(242,190,100,0) 65%); pointer-events: none; }

/* шапка */
.yz-head { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: baseline; justify-content: space-between; padding: 18px 30px 0; z-index: 3; }
.yz-head-l { display: flex; align-items: baseline; gap: 16px; }
.yz-month { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: clamp(22px,1.9vw,32px); letter-spacing: .14em; text-transform: uppercase; color: #f2ce82; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.yz-turn { font-size: clamp(13px,1vw,16px); letter-spacing: .22em; text-transform: uppercase; color: #a1906f; }
.yz-head-r { display: flex; align-items: baseline; gap: 10px; }
.yz-score-cap { font-size: clamp(12px,.9vw,15px); letter-spacing: .22em; text-transform: uppercase; color: #a1906f; }
.yz-total { font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: clamp(26px,2.2vw,38px); color: #f2ce82; text-shadow: 0 2px 12px rgba(0,0,0,.7); }

/* закрыть (для теста/явного выхода) */
.yz-close { position: absolute; top: 16px; right: 22px; z-index: 6; background: none; border: none; color: #a1906f; font-size: 26px; line-height: 1; cursor: pointer; opacity: .7; }
.yz-close:hover { opacity: 1; color: #f2ce82; }

/* явление выбранного бога — стилизованная заставка по центру, закрывается кликом/кнопкой */
.yz-god-modal {
  /* fixed — якорь к окну, а не к .yz-stage (у той min-height 760px: на низких
     экранах низ сцены за кадром, и кнопка «Продолжить» уезжала за край) */
  position: fixed; inset: 0; z-index: 6; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  /* приподнять портрет от нижней кромки — растворяется «в воздухе».
     vh, не %: процентный padding считается от ШИРИНЫ окна и на широких
     экранах давал непредсказуемый сдвиг (и флекс ужимал портрет) */
  padding-bottom: 12vh;
  background: radial-gradient(ellipse at 50% 42%, rgba(24,16,8,.42), rgba(5,3,2,.88) 78%);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: yzRise .4s ease both;
}
.yz-god-portrait {
  height: 66vh; flex-shrink: 0; aspect-ratio: 439/720; background-size: cover; background-position: top;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 97%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,1) 58%, rgba(0,0,0,0) 97%);
  filter: drop-shadow(0 0 54px rgba(224,179,87,.32)) saturate(.94);
  animation: yzRise .55s ease both;
}
.yz-god-caption {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 7%;
  max-width: 52ch; text-align: center; animation: yzRise .5s .12s ease both;
}
.yz-god-btn { margin-top: 14px; }

/* фриз богов */
.yz-ring { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.yz-card { position: absolute; width: 136px; pointer-events: auto; transition: transform .18s ease, filter .25s ease; }
.yz-card-inner { position: relative; width: 128px; margin: 0 auto; }
.yz-arch {
  width: 128px; height: 196px; margin: 0 auto; position: relative; overflow: hidden;
  border-radius: 62px 62px 12px 12px; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #2c2118, #150d06 85%);
  background-size: cover; background-position: 50% 12%; background-repeat: no-repeat;
  box-shadow: 0 8px 20px rgba(0,0,0,.55);
  border: 1px solid rgba(224,179,87,.32);
}
.yz-arch.clickable { border: 2px solid rgba(242,206,130,.85); box-shadow: 0 0 20px rgba(224,179,87,.38), 0 8px 20px rgba(0,0,0,.55); }
.yz-arch.used { filter: saturate(.5) brightness(.72); }
.yz-arch.glow { animation: yzGlow 1.6s ease-in-out 2; }
.yz-card.clickable { cursor: pointer; }
.yz-sum-sigil { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 58px; color: #c9a25f; text-shadow: 0 2px 14px rgba(0,0,0,.7); }
.yz-nameplate { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 6px 12px; background: linear-gradient(180deg, rgba(9,5,2,0), rgba(9,5,2,.55) 35%, rgba(9,5,2,.92) 78%); text-align: center; }
.yz-name { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 17px; letter-spacing: .04em; color: #f0dcb0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-cat { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #a8946e; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yz-coin {
  position: absolute; left: 50%; bottom: -13px; transform: translateX(-50%);
  min-width: 38px; height: 30px; padding: 0 9px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #2a1c0c, #170e05);
  border: 1px solid rgba(224,179,87,.35);
  font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 16.5px; white-space: nowrap;
  color: #5d4f3a;
}
.yz-coin.written { color: #f3e8d4; border-color: rgba(224,179,87,.55); }
.yz-coin.avail { color: #f2ce82; border-color: rgba(242,206,130,.8); animation: yzPulse 1.6s ease-in-out infinite; }
.yz-coin.zero { color: #8a7a5c; }
.yz-pips { display: flex; justify-content: center; gap: 3px; margin-top: 20px; }
.yz-relpip { width: 6px; height: 6px; border-radius: 50%; transition: background .3s ease; background: rgba(224,179,87,.14); }
.yz-relpip.zero { background: rgba(224,179,87,.35); }
.yz-relpip.cur-pos { background: #f2ce82; box-shadow: 0 0 6px rgba(242,206,130,.8); }
.yz-relpip.cur-neg { background: #c96f4a; box-shadow: 0 0 6px rgba(201,111,74,.8); }

/* центр: кости + управление + реплики */
.yz-center { position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 3; }
.yz-dice { display: flex; gap: 38px; perspective: 1100px; }
.yz-die-wrap { width: 72px; transition: transform .3s ease, opacity .3s ease; }
.yz-die-wrap.holdable { cursor: pointer; }
.yz-die-wrap.held { transform: translateY(-12px); background: radial-gradient(circle at 50% 36px, rgba(242,206,130,.3), rgba(242,206,130,0) 64%); border-radius: 14px; }
.yz-die-wrap.idle { opacity: .45; }
.yz-cube { width: 72px; height: 72px; position: relative; transform-style: preserve-3d; }
.yz-face { position: absolute; inset: 0; border-radius: 11px; border: 1px solid rgba(120,90,50,.4); box-shadow: inset 0 0 12px rgba(120,90,50,.3); }
.yz-face.f1 { background: linear-gradient(145deg,#f0e4c9,#d8c6a1 60%,#c9b58c); transform: translateZ(36px); }
.yz-face.f6 { background: linear-gradient(145deg,#f0e4c9,#d8c6a1 60%,#c9b58c); transform: rotateY(180deg) translateZ(36px); }
.yz-face.f3 { background: linear-gradient(145deg,#ece0c4,#d3c098 60%,#c4af85); transform: rotateY(90deg) translateZ(36px); }
.yz-face.f4 { background: linear-gradient(145deg,#ece0c4,#d3c098 60%,#c4af85); transform: rotateY(-90deg) translateZ(36px); }
.yz-face.f5 { background: linear-gradient(145deg,#f4e9d0,#ddcba6 60%,#cdb98f); transform: rotateX(90deg) translateZ(36px); }
.yz-face.f2 { background: linear-gradient(145deg,#f4e9d0,#ddcba6 60%,#cdb98f); transform: rotateX(-90deg) translateZ(36px); }
.yz-pip { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6b3d2a, #3d1f13 70%); }
.yz-die-shadow { width: 66px; height: 12px; margin: 14px auto 0; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,0) 70%); }
.yz-die-mark { text-align: center; margin-top: 2px; font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 13px; color: #e0b357; animation: yzRise .25s ease both; }

.yz-controls { display: flex; align-items: center; gap: 20px; margin-top: 32px; }
.yz-rolls { display: flex; align-items: center; gap: 7px; }
.yz-rolls-cap { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: #a1906f; margin-right: 4px; }
.yz-rollpip { width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(224,179,87,.5); transition: background .3s ease; background: none; opacity: .4; }
.yz-rollpip.on { background: #e0b357; box-shadow: 0 0 7px rgba(224,179,87,.6); opacity: 1; }
.yz-roll-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 30px; border-radius: 999px; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 19px; letter-spacing: .06em; transition: all .2s ease; border: 1px solid rgba(224,179,87,.18); background: none; color: #6d5e44; cursor: default; }
.yz-roll-btn.active { border-color: rgba(224,179,87,.55); background: rgba(224,179,87,.1); color: #f2ce82; cursor: pointer; }
.yz-roll-btn.active:hover { background: rgba(224,179,87,.22); border-color: rgba(242,206,130,.9); }
.yz-tablesum { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 16px; color: #b7a583; }

.yz-voicebox { margin-top: 16px; max-width: 46ch; text-align: center; min-height: 54px; }
.yz-voice-head { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 5px; animation: yzRise .3s ease both; }
.yz-voice-line-l { width: 34px; height: 1px; background: linear-gradient(90deg, rgba(224,179,87,0), rgba(224,179,87,.5)); }
.yz-voice-line-r { width: 34px; height: 1px; background: linear-gradient(90deg, rgba(224,179,87,.5), rgba(224,179,87,0)); }
.yz-voice-speaker { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: clamp(16px,1.3vw,22px); letter-spacing: .06em; color: #f2ce82; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.yz-voice-text { font-family: 'EB Garamond', serif; font-style: italic; font-size: clamp(15px,1.25vw,21px); line-height: 1.5; color: #d8c39a; text-shadow: 0 2px 12px rgba(0,0,0,.8); animation: yzRise .3s ease both; }

/* финальный свиток */
.yz-over { position: absolute; inset: 0; background: rgba(5,3,2,.78); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; animation: yzRise .4s ease both; z-index: 5; }
.yz-scroll { width: min(92%,660px); background: linear-gradient(180deg, #1b130b, #140d07); border: 1px solid rgba(224,179,87,.3); border-radius: 14px; padding: 34px 40px 36px; box-shadow: 0 30px 80px rgba(0,0,0,.8); }
.yz-over-kicker { text-align: center; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: #a1906f; }
.yz-over-month { text-align: center; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 34px; letter-spacing: .1em; color: #f2ce82; margin: 6px 0 2px; }
.yz-over-total { text-align: center; font-family: 'Cormorant Garamond', serif; font-weight: 700; font-size: 54px; color: #f3e8d4; margin-bottom: 18px; }
.yz-over-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 34px; margin-bottom: 24px; }
.yz-over-row { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid rgba(224,179,87,.12); padding: 3px 0; }
.yz-over-name { font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 16px; color: #e9d6ab; flex: 1; }
.yz-over-score { font-size: 15px; color: #d8c39a; }
.yz-over-delta { font-size: 12px; width: 16px; text-align: right; }
.yz-over-delta.up { color: #e0b357; }
.yz-over-delta.down { color: #c96f4a; }
.yz-over-btns { display: flex; justify-content: center; gap: 12px; }
.yz-pill { padding: 11px 26px; border-radius: 999px; font-family: 'Cormorant Garamond', serif; font-weight: 600; font-size: 17px; letter-spacing: .06em; cursor: pointer; }
.yz-pill.primary { border: 1px solid rgba(224,179,87,.5); background: rgba(224,179,87,.1); color: #f2ce82; }
.yz-pill.primary:hover { background: rgba(224,179,87,.2); }
.yz-pill.ghost { border: 1px solid rgba(224,179,87,.25); background: none; color: #b7a583; }
.yz-pill.ghost:hover { color: #f2ce82; border-color: rgba(224,179,87,.5); }

@keyframes yzPulse { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes yzRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes yzGlow { 0%,100% { box-shadow: 0 0 0 1px rgba(224,179,87,.55), 0 0 22px rgba(224,179,87,.28); } 50% { box-shadow: 0 0 0 1px rgba(242,206,130,.9), 0 0 34px rgba(242,206,130,.5); } }