/* ============================================================
   Казино Сареша — симулятор опознания Screams of the Desiccated
   Карточка предмета стилизована под игровой тултип PoE
   ============================================================ */

.sim-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.sim-wrap {
  position: relative;
  z-index: 1;
  width: min(760px, 94vw);
  padding: 2.6rem 0 4rem;
}

/* лучи за джекпотом */
.sim-rays {
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: conic-gradient(from 0deg at 50% 40%,
    transparent 0deg, rgba(200, 170, 110, 0.16) 8deg, transparent 16deg,
    transparent 40deg, rgba(200, 170, 110, 0.13) 48deg, transparent 56deg,
    transparent 80deg, rgba(200, 170, 110, 0.16) 88deg, transparent 96deg,
    transparent 120deg, rgba(200, 170, 110, 0.13) 128deg, transparent 136deg,
    transparent 160deg, rgba(200, 170, 110, 0.16) 168deg, transparent 176deg,
    transparent 200deg, rgba(200, 170, 110, 0.13) 208deg, transparent 216deg,
    transparent 240deg, rgba(200, 170, 110, 0.16) 248deg, transparent 256deg,
    transparent 280deg, rgba(200, 170, 110, 0.13) 288deg, transparent 296deg,
    transparent 320deg, rgba(200, 170, 110, 0.16) 328deg, transparent 336deg, transparent 360deg);
  transition: opacity 0.6s ease;
}
.sim-rays.on {
  opacity: 1;
  animation: rays-spin 14s linear infinite;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }

/* шапка */
.sim-head { text-align: center; margin-bottom: 2rem; }

/* верхняя панель: назад слева, переключатель языка справа */
.sim-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
.sim-topbar .lang-switch { margin: 0; }

.sim-back {
  font-family: var(--sans);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.sim-back:hover { color: var(--gold-bright); }
.sim-title {
  font-family: var(--caps);
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 3.3rem);
  color: var(--gold-bright);
  line-height: 1.05;
  text-shadow: 0 0 30px rgba(200, 170, 110, 0.25);
}
.sim-sub {
  font-family: var(--display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.3rem;
  color: var(--unique);
  margin-top: 0.4rem;
}
.sim-lore {
  max-width: 54ch;
  margin: 1rem auto 0;
  color: var(--muted);
  font-size: 0.99rem;
}

/* ---------- сцена ---------- */
.sim-stage { display: flex; flex-direction: column; align-items: center; gap: 1.3rem; }

/* лот как на трейд-сайте: арт слева, тултип справа.
   min-height >= истинного максимума карточки (замерено по 800 роллам) —
   карточка любого размера центрируется внутри, кнопки ниже НЕ двигаются */
.lot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  min-height: 415px;
}
.lot-art {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
}
.lot-art img {
  width: 176px;
  height: auto;
  filter: drop-shadow(0 8px 22px rgba(0, 0, 0, 0.8));
}
.verified {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 700;
  color: #d6d6d6;
  background: #000;
  border: 1px solid #3c3c3c;
  padding: 0.15rem 0.85rem;
}

/* ---------- тултип в стиле игры ---------- */
.belt-card {
  width: min(430px, 100%);
  background: rgba(0, 0, 0, 0.93);
  border: 1px solid #141414;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
  transition: box-shadow 0.4s ease;
}
.belt-card.tier-SS { box-shadow: 0 0 48px rgba(232, 211, 162, 0.65), 0 0 90px rgba(175, 96, 37, 0.35), 0 18px 50px rgba(0, 0, 0, 0.65); }
.belt-card.tier-S { box-shadow: 0 0 36px rgba(200, 170, 110, 0.5), 0 18px 50px rgba(0, 0, 0, 0.65); }
.belt-card.tier-A { box-shadow: 0 0 22px rgba(200, 170, 110, 0.3), 0 18px 50px rgba(0, 0, 0, 0.65); }

/* шапка тултипа: всегда уник-стиль (анайди уник в игре тоже оранжевый) */
.bc-header {
  position: relative;
  padding: 0.5rem 2.6rem 0.45rem;
  text-align: center;
  background:
    linear-gradient(180deg, #55250f 0%, #38160a 50%, #200b05 100%);
  border-top: 1px solid #8a4420;
  border-bottom: 1px solid #8a4420;
}
.bc-header::before, .bc-header::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 32%, #a0522a, #57250f 55%, #240d05 90%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65), inset 0 0 6px rgba(0, 0, 0, 0.7);
}
.bc-header::before { left: 7px; }
.bc-header::after { right: 7px; }

.bc-header .bc-name {
  font-family: var(--caps);
  font-weight: 700;
  font-size: 1.18rem;
  line-height: 1.22;
  letter-spacing: 0.03em;
  color: #c96e31; /* уник-оранжевый */
}
.bc-header .bc-base {
  font-family: var(--caps);
  font-size: 0.98rem;
  line-height: 1.15;
  color: #b05f2b;
}

/* тело тултипа */
.bc-body { padding: 0.7rem 1rem 0.85rem; text-align: center; }
.bc-line {
  font-family: var(--sans);
  font-size: 0.94rem;
  line-height: 1.6;
  color: #7f7f7f;
}
.bc-line b { font-weight: 700; color: #fff; }
.bc-line.mod { color: #8888ff; }
.bc-line.shrine { color: #8888ff; }
.bc-line.shrine .sh-name { color: #e7cf9f; font-weight: 700; }
.bc-line.unid { color: #d20000; font-weight: 700; letter-spacing: 0.03em; }
.bc-line.bonus { color: #b4b4ff; }
.bc-note {
  font-family: var(--sans);
  font-size: 0.76rem;
  color: #5e5647;
  margin: -0.1rem 0 0.15rem;
}
.bc-flavour {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #af6025;
  margin-top: 0.15rem;
}

/* разделитель как в игре: линия с ромбиком по центру, всегда уник-стиль */
.bc-sep {
  position: relative;
  height: 1px;
  margin: 0.5rem auto;
  width: 88%;
  background: linear-gradient(90deg, transparent, #6b3a17 18%, #6b3a17 82%, transparent);
}
.bc-sep::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: #6b3a17;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6);
}

/* вердикт: высота зарезервирована, чтобы кнопки не съезжали */
.verdict {
  min-height: 4.6rem;
  text-align: center;
}
.verdict .v-tier {
  display: inline-block;
  font-family: var(--caps);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.06em;
}
.verdict .v-quip {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--muted);
}
.v-tier.tSS { color: #fff6df; text-shadow: 0 0 30px rgba(232, 211, 162, 0.95), 0 0 62px rgba(175, 96, 37, 0.55); animation: jackpot-pulse 0.9s ease infinite; }
.v-tier.tS { color: var(--gold-bright); text-shadow: 0 0 24px rgba(200, 170, 110, 0.6); animation: jackpot-pulse 1.2s ease infinite; }
.v-tier.tA { color: var(--gold); }
.v-tier.tB { color: #9c9cf0; }
.v-tier.tC { color: #b9a682; }
.v-tier.tD { color: var(--muted); }
.v-tier.tF { color: #8b8b8b; }
@keyframes jackpot-pulse {
  0%, 100% { transform: none; }
  50% { transform: scale(1.06); }
}

/* кнопки */
.sim-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; justify-content: center; }
.sim-btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  color: #14100a;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: none;
  border-radius: 4px;
  padding: 0.75rem 1.7rem;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}
.sim-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.sim-btn:active { transform: translateY(1px); }
.sim-btn[disabled] { opacity: 0.55; cursor: default; transform: none; }
.sim-btn--ghost {
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
}
.sim-btn--ghost:hover { color: var(--gold-bright); border-color: var(--gold-dim); filter: none; }
.sim-btn--small { font-size: 0.78rem; padding: 0.45rem 0.9rem; font-weight: 500; }

/* статистика */
.sim-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 2.4rem;
}
.stat {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
  padding: 0.8rem 0.6rem;
  text-align: center;
}
.stat b {
  display: block;
  font-family: var(--caps);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--gold-bright);
}
.stat i {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  margin-top: 0.3rem;
}
.stat--wide { grid-column: 1 / -1; }
.stat--wide b { font-size: 1.02rem; line-height: 1.4; }

.sim-reset-row { text-align: center; margin-top: 0.9rem; }

/* модель шансов */
.sim-model {
  margin-top: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--panel);
}
.sim-model summary {
  cursor: pointer;
  padding: 0.85rem 1.1rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--muted);
  list-style: none;
}
.sim-model summary::before { content: "◆ "; color: var(--gold-dim); font-size: 0.75em; }
.sim-model summary:hover { color: var(--gold-bright); }
.sim-model-body { padding: 0 1.2rem 1.1rem; font-size: 0.95rem; color: var(--text); }
.sim-model-body ul { margin: 0.6rem 0 0.6rem 1.2rem; }
.sim-model-body li { margin-bottom: 0.35rem; }

@media (max-width: 640px) {
  .lot { flex-direction: column; gap: 1.2rem; min-height: 490px; }
  .sim-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sim-title { font-size: 2.1rem; }
}

/* ---------- мем-окно на миррор-тир ---------- */
.jackpot-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  background: rgba(6, 5, 4, 0.84);
  backdrop-filter: blur(3px);
}
.jackpot-modal.open { display: flex; animation: jm-in 0.35s ease; }
@keyframes jm-in { from { opacity: 0; } to { opacity: 1; } }

.jm-card {
  position: relative;
  width: min(430px, 94vw);
  text-align: center;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background:
    radial-gradient(130% 120% at 50% -10%, rgba(200, 170, 110, 0.18), transparent 60%),
    var(--panel-2);
  box-shadow: 0 0 55px rgba(200, 170, 110, 0.45), 0 30px 90px rgba(0, 0, 0, 0.75);
  padding: 2rem 1.7rem 2.2rem;
  overflow: hidden;
}
.jm-emoji { font-size: 2.6rem; line-height: 1; animation: jm-bounce 1.4s ease infinite; }
@keyframes jm-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.jm-tier {
  font-family: var(--caps);
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  text-shadow: 0 0 26px rgba(200, 170, 110, 0.6);
  margin: 0.35rem 0 0.35rem;
}
.jm-combo {
  font-family: var(--sans);
  font-size: 0.92rem;
  color: var(--unique);
  margin-bottom: 1.2rem;
}
.jm-q {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.38rem;
  line-height: 1.35;
  color: var(--text);
  margin: 0 auto 1.6rem;
  min-height: 3.7rem;
  max-width: 34ch;
}
.jm-actions {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 3.6rem;
}
.jm-btn {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 0.7rem 1.9rem;
  transition: transform 0.18s ease, filter 0.15s ease, border-color 0.18s ease;
}
.jm-yes {
  color: #14100a;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  transform-origin: center;
}
.jm-yes:hover { filter: brightness(1.08); }
.jm-yes[disabled] { opacity: 0.6; cursor: default; }
.jm-no {
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  will-change: transform;
}
.jm-no:hover { border-color: var(--gold-dim); }