/* Казино поверх общего pz-ui.css. Барабаны тёмные в любой теме — как видео
   на главной: это «экран автомата», а не страница. */
/* 777.js читает --reel-h с <html>, поэтому переменная живёт в :root. */
:root { --reel-h: 84px; }

.chip {
  overflow: hidden;
  max-width: 46vw;
  padding: 5px 11px;
  border: 1px solid var(--pz-line);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip.is-live { border-color: var(--accent-medium); background: var(--accent-soft); color: var(--accent); }

.hero { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 2px 2px 14px; }
.title { display: flex; gap: 4px; margin: 0; font-size: 46px; font-weight: 850; letter-spacing: -0.02em; line-height: 1; }
.title span {
  background: linear-gradient(180deg, #ffe9a8 0%, var(--pz-gold) 55%, #a8690f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 14px rgba(217, 154, 22, 0.28));
  animation: bob 2.6s ease-in-out infinite;
}
.title span:nth-child(2) { animation-delay: 0.18s; }
.title span:nth-child(3) { animation-delay: 0.36s; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.tagline { margin: 0; color: var(--muted); font-size: 13px; text-align: right; }

.machine {
  padding: 12px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-r);
  background: var(--surface-1);
  box-shadow: var(--pz-shadow);
}
.reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, #151816 0%, #0b0d0c 100%);
}
.reel {
  position: relative;
  height: var(--reel-h);
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, #1c201e 0%, #141716 50%, #1c201e 100%);
  box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.55), inset 0 -8px 14px rgba(0, 0, 0, 0.55);
}
.reel-strip { display: flex; flex-direction: column; align-items: center; will-change: transform; }
.reel-strip span {
  display: grid;
  height: var(--reel-h);
  flex: 0 0 var(--reel-h);
  place-items: center;
  font-size: 40px;
  line-height: 1;
  user-select: none;
}
/* Адмирал — картинка, а не эмодзи: подгоняем под размер соседних символов. */
.reel-img { width: 52px; height: 52px; border-radius: 8px; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.machine.is-win .reel { box-shadow: inset 0 0 0 2px var(--pz-gold), inset 0 8px 14px rgba(0, 0, 0, 0.45); }
.machine.is-win .reels { animation: flash 0.5s ease 2; }
@keyframes flash { 50% { background: rgba(255, 197, 61, 0.18); } }
.machine.is-super .reel { box-shadow: inset 0 0 0 2px var(--pz-red), inset 0 8px 14px rgba(0, 0, 0, 0.45); }
.machine.is-super .reels { animation: flash-super 0.45s ease 4; }
@keyframes flash-super { 50% { background: rgba(255, 91, 99, 0.22); } }

.payline { margin: 10px 2px 0; color: var(--muted); font-size: 12.5px; text-align: center; }
.spin { width: 100%; min-height: 42px; margin-top: 10px; font-size: 14.5px; font-weight: 750; }
.spin.is-auth { border-color: var(--pz-line); background: var(--surface-3); color: var(--text); }
.status { min-height: 18px; margin: 8px 2px 0; font-size: 13px; font-weight: 650; text-align: center; }
.status.win { color: var(--pz-gold); }
.status.lose { color: var(--muted); }
.status.error { color: var(--pz-red); }

.board-head, .rules h2 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 2px 8px;
}
.board-head h2, .rules h2 { margin: 0; color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; }
.rules h2 { margin: 22px 2px 8px; }
.board-total { color: var(--pz-gold); font-size: 12px; font-weight: 750; font-variant-numeric: tabular-nums; }
.board-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.board-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 11px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-r-sm);
  background: var(--surface-1);
}
.board-list li.is-me { border-color: color-mix(in srgb, var(--pz-gold) 45%, transparent); background: color-mix(in srgb, var(--pz-gold) 9%, var(--surface-1)); }
.board-list li.is-pardon { border-color: var(--accent-medium); }
.board-list li.is-pardon .board-prize { color: var(--accent); }
.board-list li.is-super { border-color: color-mix(in srgb, var(--pz-red) 45%, transparent); background: color-mix(in srgb, var(--pz-red) 7%, var(--surface-1)); }
.board-list li.is-super .board-prize { color: var(--pz-red); }
.board-list li.is-new { animation: dealt 0.45s ease both; }
@keyframes dealt { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.board-badge { display: grid; flex: none; place-items: center; font-size: 15px; line-height: 1; }
.board-badge .reel-img { width: 20px; height: 20px; border-radius: 5px; }
.board-name { min-width: 0; flex: 1; overflow: hidden; font-size: 13.5px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.board-prize { flex: none; color: var(--pz-gold); font-size: 12px; font-weight: 700; }
.board-when { flex: none; min-width: 64px; color: var(--muted); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; }
.board-empty { margin: 0 2px; color: var(--muted); font-size: 13px; }

.rules ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rules li {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--pz-line);
  border-radius: var(--pz-r-sm);
  background: var(--surface-1);
}
.rules b { font-size: 13.5px; font-weight: 700; }
.rules span { color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.counter { margin: 12px 0 0; color: var(--muted); font-size: 12px; text-align: center; }

@media (max-width: 420px) {
  .hero { align-items: flex-start; flex-direction: column; gap: 4px; }
  .tagline { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .title span, .machine.is-win .reels { animation: none; }
  .reel-strip { transition: none !important; }
}