/* Samtpfoten — exklusiver Slot der Samt-Lounge */
:root {
  --obsidian: oklch(15% 0.01 280);
  --magenta: oklch(55% 0.25 330);
  --magenta-glow: oklch(65% 0.25 330);
  --gold: oklch(75% 0.15 80);
  --gold-deep: oklch(58% 0.13 75);
  --off-white: oklch(95% 0.01 280);
  --velvet: oklch(22% 0.06 320);
  --cell: min(15vh, 9vw);
  --font-heading: 'Urbanist', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-heading);
  background: var(--obsidian) url('assets/game-bg.avif') center / cover no-repeat;
  color: var(--off-white);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.stage {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(8px, 1.5vh, 16px) clamp(8px, 2vw, 24px);
  position: relative;
}

/* Top ribbon */
.top-ribbon {
  font-weight: 800;
  font-size: clamp(0.7rem, 2vh, 1.15rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: oklch(90% 0.12 85);
  background: linear-gradient(180deg, oklch(30% 0.08 320 / .92), oklch(20% 0.06 320 / .92));
  border: 1px solid var(--gold-deep);
  border-radius: 500px;
  padding: 0.45em 1.6em;
  box-shadow: 0 0 24px oklch(55% 0.25 330 / .35), inset 0 1px 0 oklch(90% 0.1 85 / .35);
  text-shadow: 0 1px 2px oklch(10% 0.02 320);
}

/* Play area */
.play-area {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(10px, 2.5vw, 36px);
  flex: 1;
  min-height: 0;
  width: 100%;
}

.pay-panel { justify-self: end; }
.side-col { justify-self: start; }

/* Left pay panel */
.pay-panel {
  background: linear-gradient(180deg, oklch(26% 0.07 320 / .9), oklch(17% 0.05 320 / .9));
  border: 2px solid var(--gold-deep);
  border-radius: 14px;
  padding: 12px 14px;
  text-align: center;
  box-shadow: 0 6px 24px oklch(5% 0.02 320 / .6), inset 0 1px 0 oklch(90% 0.1 85 / .25);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pay-panel-title {
  font-weight: 800;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
}

.pay-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--off-white);
}

.pay-row img { width: 44px; height: 44px; object-fit: contain; }

.pay-panel-note {
  font-size: 0.6rem;
  line-height: 1.35;
  color: oklch(80% 0.02 320);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Machine frame */
.frame {
  padding: clamp(8px, 1.4vh, 14px);
  border-radius: 18px;
  background:
    linear-gradient(160deg, oklch(85% 0.14 85), oklch(55% 0.12 70) 30%, oklch(88% 0.15 88) 50%, oklch(48% 0.11 65) 75%, oklch(80% 0.14 82));
  box-shadow:
    0 0 0 2px oklch(35% 0.08 70),
    0 0 48px oklch(55% 0.25 330 / .45),
    0 18px 48px oklch(5% 0.02 320 / .7);
}

.reels {
  display: flex;
  gap: 4px;
  background: radial-gradient(120% 130% at 50% 0%, oklch(30% 0.09 325), oklch(17% 0.06 320) 70%);
  border-radius: 10px;
  padding: 6px;
  box-shadow: inset 0 0 34px oklch(8% 0.03 320 / .85);
}

.reel {
  width: var(--cell);
  height: calc(var(--cell) * 3);
  overflow: hidden;
  position: relative;
  border-radius: 6px;
}

.reel + .reel { border-left: 1px solid oklch(60% 0.12 75 / .35); }

.strip {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.sym-cell {
  width: var(--cell);
  height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.sym-cell img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px oklch(5% 0.02 320 / .6));
}

.sym-cell.win img {
  animation: winPulse 0.55s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 14px var(--magenta-glow)) drop-shadow(0 0 4px var(--gold));
}

@keyframes winPulse {
  from { transform: scale(1); }
  to { transform: scale(1.12); }
}

/* Side column: logo + character */
.side-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5vh;
  max-width: 24vw;
}

.game-logo {
  font-weight: 900;
  font-size: clamp(1.4rem, 4.6vh, 2.6rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  background: linear-gradient(180deg, oklch(92% 0.13 88), oklch(68% 0.14 75) 55%, oklch(90% 0.14 85));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 oklch(35% 0.08 70)) drop-shadow(0 0 18px oklch(55% 0.25 330 / .55));
}

.game-logo span { display: block; font-size: 0.72em; letter-spacing: 0.22em; }

.character {
  width: clamp(120px, 38vh, 340px);
  height: auto;
  filter: drop-shadow(0 12px 28px oklch(5% 0.02 320 / .8)) drop-shadow(0 0 22px oklch(55% 0.25 330 / .3));
}

/* HUD */
.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1100px, 100%);
  gap: 16px;
  background: linear-gradient(180deg, oklch(20% 0.05 320 / .88), oklch(13% 0.03 320 / .88));
  border: 1px solid oklch(60% 0.12 75 / .5);
  border-radius: 500px;
  padding: 8px 22px;
  backdrop-filter: blur(6px);
}

.hud-stats { display: flex; gap: 24px; }

.stat { display: flex; flex-direction: column; line-height: 1.15; }

.stat-label {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
}

.stat-value { font-size: 1.25rem; font-weight: 800; }

.hud-msg {
  font-weight: 700;
  font-size: clamp(0.7rem, 1.8vh, 0.95rem);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  color: oklch(88% 0.06 330);
  flex: 1;
}

.hud-controls { display: flex; align-items: center; gap: 10px; }

.ctl-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--gold-deep);
  background: oklch(24% 0.06 320);
  color: var(--off-white);
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.ctl-btn:hover { background: oklch(32% 0.08 325); }
.ctl-btn:active { transform: scale(0.92); }

.spin-btn {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 3px solid oklch(88% 0.14 85);
  background: radial-gradient(circle at 35% 30%, oklch(80% 0.16 85), oklch(52% 0.13 70) 70%);
  color: oklch(20% 0.05 320);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 22px oklch(75% 0.15 80 / .5), 0 6px 16px oklch(5% 0.02 320 / .6);
  transition: transform 0.15s, box-shadow 0.2s;
}

.spin-btn:hover { box-shadow: 0 0 34px oklch(75% 0.15 80 / .75), 0 6px 16px oklch(5% 0.02 320 / .6); }
.spin-btn:active { transform: scale(0.94); }
.spin-btn:disabled { filter: grayscale(0.5) brightness(0.7); cursor: default; }
.spin-btn.spinning svg { animation: spinIcon 0.9s linear infinite; }

@keyframes spinIcon { to { transform: rotate(360deg); } }

.rg-note {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: oklch(70% 0.02 320 / .85);
  margin-top: 4px;
}

/* Win popup */
.win-pop {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 900;
  font-size: clamp(2rem, 8vh, 4.5rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, oklch(94% 0.13 88), oklch(70% 0.15 78));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 oklch(35% 0.08 70)) drop-shadow(0 0 30px oklch(65% 0.25 330 / .9));
  animation: winPop 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

@keyframes winPop {
  from { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Responsive */
@media (max-width: 1100px) {
  .pay-panel { display: none; }
}

@media (max-width: 820px) {
  :root { --cell: min(12vh, 15vw); }
  .side-col { display: none; }
  .hud { flex-wrap: wrap; justify-content: center; border-radius: 24px; }
  .hud-msg { flex-basis: 100%; order: 3; }
}

@media (max-width: 520px) {
  :root { --cell: min(11vh, 16.5vw); }
  .top-ribbon { font-size: 0.6rem; }
}