@font-face {
  font-family: 'Ghibli';
  src: url('./Eyad Al-Samman - Ghibli.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

:root { font-family: 'Ghibli', system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { 
  margin: 0; 
  background: #0f1115 url('./images/background.jpg') no-repeat center center fixed; 
  background-size: cover;
  color: #e9eef7; 
  font-family: 'Ghibli', system-ui, sans-serif; 
}
.wrap { 
  max-width: 980px; 
  margin: 0 auto; 
  padding: 28px 16px; 
  background: transparent;
  backdrop-filter: none;
  border-radius: 0;
  box-shadow: none;
}

header h1 { margin: 0 0 6px; font-size: 28px; color: #6b5a3d; text-shadow: 1px 1px 2px rgba(255,255,255,0.5); }
.sub { margin: 0 0 18px; opacity: 0.9; color: #8b7553; text-shadow: 1px 1px 2px rgba(255,255,255,0.4); }

.panel { 
  background: rgba(255, 248, 235, 0.85); 
  border: 2px solid rgba(180, 150, 100, 0.5); 
  border-radius: 16px; 
  padding: 18px;
  box-shadow: 0 4px 20px rgba(139, 117, 83, 0.2);
  backdrop-filter: blur(8px);
}
.controls { display: flex; gap: 14px; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; }

button {
  padding: 12px 18px;
  border-radius: 12px;
  border: 2px solid rgba(180, 150, 100, 0.6);
  background: linear-gradient(135deg, rgba(235, 220, 195, 0.95), rgba(220, 200, 170, 0.95));
  color: #6b5a3d;
  font-weight: 800;
  cursor: pointer;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  box-shadow: 0 4px 12px rgba(139, 117, 83, 0.2);
  transition: all 0.2s ease;
}
button:hover {
  background: linear-gradient(135deg, rgba(225, 210, 185, 0.98), rgba(210, 190, 160, 0.98));
  border-color: rgba(160, 130, 80, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(139, 117, 83, 0.3);
}
button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.resultText {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 250, 240, 0.8);
  border: 2px solid rgba(180, 150, 100, 0.4);
  font-weight: 650;
  min-width: min(560px, 100%);
  color: #6b5a3d;
  text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
  backdrop-filter: blur(6px);
}

.slot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.reel {
  height: 580px;
  border-radius: 16px;
  border: 2px solid rgba(180, 150, 100, 0.5);
  background: radial-gradient(120% 90% at 50% 30%, rgba(248, 240, 225, 0.9) 0%, rgba(235, 225, 210, 0.92) 60%, rgba(225, 215, 200, 0.95) 100%);
  box-shadow: inset 0 2px 20px rgba(200, 180, 150, 0.3), 0 4px 16px rgba(139, 117, 83, 0.2);
  overflow: hidden;
  position: relative;
  perspective: 900px;
  display: grid;
  grid-template-rows: 1fr 2fr 1fr;
  gap: 6px;
  padding: 16px;
  backdrop-filter: blur(6px);
}

.cell {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(255, 252, 245, 0.6);
  border: 1px solid rgba(200, 180, 140, 0.4);
  overflow: hidden;
  position: relative;
  padding: 8px;
  box-sizing: border-box;
}

.cell img {
  display: block;
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.35));
  transition: filter 180ms ease-out, transform 180ms ease-out;
}

.cell.top img,
.cell.bot img {
  max-height: 100%;
  max-width: 100%;
}

/* Zylinder-Illusion */
.cell.top {
  transform: rotateX(48deg) translateZ(-28px) scale(0.92);
  opacity: 0.45;
  filter: brightness(0.75);
}
.cell.top::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(200, 185, 165, 0.15), transparent 60%);
  pointer-events: none;
  border-radius: 14px;
}
.cell.bot {
  transform: rotateX(-48deg) translateZ(-28px) scale(0.92);
  opacity: 0.45;
  filter: brightness(0.95);
}
.cell.bot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(200, 185, 165, 0.15), transparent 60%);
  pointer-events: none;
  border-radius: 14px;
}
.cell.mid {
  transform: rotateX(0deg) translateZ(0px);
  opacity: 1;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.05), inset 0 1px 2px rgba(255,255,255,0.08);
}

/* Spin-Effekt mit vertikaler Bewegung - alle Zellen bewegen sich gemeinsam */
.reel.spinning .cell img {
  filter: blur(3px) drop-shadow(0 10px 14px rgba(0,0,0,0.35));
}

.reel.spinning.slow .cell img {
  filter: blur(1.5px) drop-shadow(0 10px 14px rgba(0,0,0,0.35));
}

/* Top Zelle Animation - bewegt sich mit */
.reel.spinning .cell.top {
  animation: rollDownTop 0.15s linear infinite;
}

.reel.spinning.slow .cell.top {
  animation: rollDownTop 0.3s linear infinite;
}

@keyframes rollDownTop {
  0% { 
    transform: rotateX(48deg) translateZ(-28px) scale(0.92) translateY(0); 
    opacity: 0.45;
  }
  50% {
    transform: rotateX(48deg) translateZ(-28px) scale(0.92) translateY(-50%);
    opacity: 0.5;
  }
  100% { 
    transform: rotateX(48deg) translateZ(-28px) scale(0.92) translateY(-100%); 
    opacity: 0.55;
  }
}

/* Mid Zelle - bleibt statisch als Fokuspunkt */
.reel.spinning .cell.mid {
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18), 0 10px 40px rgba(0,0,0,0.6);
}

/* Bot Zelle Animation - bewegt sich mit */
.reel.spinning .cell.bot {
  animation: rollDownBot 0.15s linear infinite;
}

.reel.spinning.slow .cell.bot {
  animation: rollDownBot 0.3s linear infinite;
}

@keyframes rollDownBot {
  0% { 
    transform: rotateX(-48deg) translateZ(-28px) scale(0.92) translateY(0); 
    opacity: 0.45;
  }
  50% {
    transform: rotateX(-48deg) translateZ(-28px) scale(0.92) translateY(-50%);
    opacity: 0.5;
  }
  100% { 
    transform: rotateX(-48deg) translateZ(-28px) scale(0.92) translateY(-100%); 
    opacity: 0.55;
  }
}

.hint { opacity: 0.75; margin-top: 12px; }
code { background: rgba(255,255,255,0.06); padding: 2px 6px; border-radius: 8px; }

/* Hide the local SPIN button on the player page (admin has separate UI) */
#spinBtn { display: none; }