/* Slotmaschine — 1:1-Port des Prototyps brand/Slot Machine.dc.html.
   Festes 470px-Design, wird per JS (fitSlot) auf schmale Screens skaliert. */

.slot-scalebox { width: 100%; display: flex; justify-content: flex-start; overflow: visible; }

.slot { width: 526px; position: relative; transform-origin: top left; flex: none; }

.s-machine {
  position: relative;
  width: 470px;
  background: linear-gradient(180deg, #1f1f26, #121216);
  border: 3px solid var(--gold);
  border-radius: 20px;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  padding-bottom: 22px;
  transition: box-shadow 0.3s;
}
.slot.jackpot .s-machine { box-shadow: 0 0 70px rgba(231, 185, 72, 0.5), 0 30px 60px -18px rgba(0, 0, 0, 0.85); }

.s-marquee {
  border-bottom: 3px solid var(--gold);
  padding: 15px 18px 13px;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(180deg, #26262d, #17171b);
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}
.s-marquee .bulbs { animation: twk 2.6s ease-in-out infinite; }
.slot.jackpot .s-marquee .bulbs { animation: twk 0.22s steps(1) infinite; }
.s-mq-title {
  font-family: var(--font-bebas);
  font-size: 42px;
  letter-spacing: 8px;
  line-height: 1;
  background: linear-gradient(180deg, #fbefb6, #e7b948);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.s-mq-sub { font-family: var(--font-bebas); font-size: 13px; letter-spacing: 4px; color: #8f8b7e; }

.s-reelzone { position: relative; margin: 20px 18px 0; }
.s-reelzone::before { content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-left-color: var(--gold); z-index: 3; }
.s-reelzone::after { content: ""; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); border: 9px solid transparent; border-right-color: var(--gold); z-index: 3; }

.s-reelbox { display: flex; gap: 12px; background: #0a0a0c; border: 2px solid rgba(231, 185, 72, 0.45); border-radius: 14px; padding: 14px; justify-content: center; }
.s-reelwin { background: #fbf8f0; border-radius: 10px; border: 3px solid var(--gold); overflow: hidden; position: relative; width: 122px; }
.s-reelwin::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); z-index: 2; pointer-events: none; }
.s-reelwin::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); z-index: 2; pointer-events: none; }

.s-cellcol { display: flex; flex-direction: column; align-items: center; }
.sym { width: 100px; display: flex; align-items: center; justify-content: center; position: relative; flex: none; }
.s-cellcol .sym:nth-child(1), .s-cellcol .sym:nth-child(3) { height: 46px; transform: scale(0.45); opacity: 0.55; }
.s-cellcol .sym:nth-child(2) { height: 118px; }
.s-reelwin.spinning .sym { filter: blur(1.5px); }
.s-reelwin.bounce .s-cellcol { animation: settle 0.34s ease-out; }

/* Symbole: alle rein CSS, aus dem Prototyp uebernommen */
.sym-seven::before { content: "7"; font-family: var(--font-anton); font-size: 80px; color: #e5402a; text-shadow: 3px 3px 0 #e7b948; line-height: 1; }
.sym-d07::before { content: "07"; font-family: var(--font-anton); font-size: 56px; color: #e5402a; text-shadow: 2px 2px 0 rgba(231, 185, 72, 0.55); line-height: 1; }
.sym-d08::before { content: "08"; font-family: var(--font-anton); font-size: 56px; color: #e5402a; text-shadow: 2px 2px 0 rgba(231, 185, 72, 0.55); line-height: 1; }
.sym-d26::before { content: "26"; font-family: var(--font-anton); font-size: 56px; color: #e5402a; text-shadow: 2px 2px 0 rgba(231, 185, 72, 0.55); line-height: 1; }
.sym-bar::before { content: "BAR"; font-family: var(--font-bebas); font-size: 26px; letter-spacing: 2px; color: #fbf8f0; background: #1d3a5f; border: 3px solid #c8331e; border-radius: 8px; padding: 9px 14px; line-height: 1; }
.sym-star::before { content: "\2605"; font-size: 66px; color: #e7b948; text-shadow: 0 2px 0 #c9a23e; line-height: 1; }
.sym-chip30::before { content: "30"; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #e5402a; border: 3px solid #e7b948; box-shadow: inset 0 0 0 6px #fbf8f0; font-family: var(--font-anton); font-size: 38px; color: #fbf8f0; line-height: 1; }
.sym-cherry::before { content: ""; position: absolute; left: 20px; bottom: 16px; width: 32px; height: 32px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #f2836f, #e5402a 60%, #c8331e); box-shadow: 30px 5px 0 0 #c8331e; }
.sym-cherry::after { content: ""; position: absolute; left: 32px; top: 14px; width: 36px; height: 32px; border: 4px solid transparent; border-top-color: #c9a23e; border-right-color: #c9a23e; border-radius: 0 100% 0 0; }
.sym-lemon::before { content: ""; width: 66px; height: 46px; background: radial-gradient(circle at 35% 30%, #fbefb6, #f2c84b 65%, #e7b948); border-radius: 50%; border: 3px solid #c9a23e; }
.sym-lemon::after { content: ""; position: absolute; right: 10px; top: 24px; width: 22px; height: 11px; background: #c9a23e; border-radius: 0 100% 0 100%; }

.s-msg {
  margin: 16px 18px 0;
  background: #0a0a0c;
  border: 2px solid rgba(231, 185, 72, 0.5);
  border-radius: 10px;
  padding: 13px 14px;
  text-align: center;
  font-family: var(--font-bebas);
  font-size: 17px;
  letter-spacing: 3px;
  color: #b9b4a5;
  line-height: 1.3;
}
.slot.jackpot .s-msg { color: #fbefb6; border-color: var(--gold); text-shadow: 0 0 12px rgba(231, 185, 72, 0.85); }

.s-btnrow { display: flex; gap: 10px; align-items: center; justify-content: center; margin: 16px 18px 0; }
.s-btn {
  font-family: var(--font-bebas);
  letter-spacing: 2px;
  font-size: 15px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.4);
  line-height: 1;
  user-select: none;
}
.s-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4); }
.s-btn-red { background: linear-gradient(180deg, #f0604b, #e5402a); color: #fbefb6; }
.s-btn-blue { background: linear-gradient(180deg, #3e85dc, #2e73c8); color: #fbefb6; }
.s-btn-gold { background: linear-gradient(180deg, #fbefb6, #e7b948); color: #4a3a0c; }
.s-betdisp { font-family: var(--font-anton); font-size: 16px; color: #e7b948; background: #0a0a0c; border-radius: 8px; padding: 10px 12px; border: 1px solid rgba(231, 185, 72, 0.4); letter-spacing: 1px; line-height: 1; }

.s-basebar { margin: 14px 18px 0; text-align: center; font-family: var(--font-bebas); letter-spacing: 3px; font-size: 12px; color: #6f6b60; }

.s-leverwrap { position: absolute; right: -54px; top: 120px; width: 56px; height: 240px; cursor: pointer; }
.s-pivot { position: absolute; left: 8px; top: 150px; width: 40px; height: 58px; background: linear-gradient(180deg, #26262d, #141418); border: 2px solid var(--gold); border-radius: 9px; }
.s-arm { position: absolute; left: 22px; top: 12px; width: 12px; height: 152px; background: linear-gradient(90deg, #b9b9c2, #7a7a85); border-radius: 6px; transform-origin: 6px 148px; transition: transform 0.45s cubic-bezier(0.6, -0.28, 0.74, 0.05); }
.slot.pulled .s-arm { transform: rotate(165deg); }
.s-knob { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); width: 44px; height: 44px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fbefb6, #e7b948 60%, #b98f2e); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); }

@keyframes settle {
  0% { transform: translateY(-12px); }
  55% { transform: translateY(5px); }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .s-marquee .bulbs, .slot.jackpot .s-marquee .bulbs { animation: none; }
  .s-reelwin.spinning .sym { filter: none; }
  .s-reelwin.bounce .s-cellcol { animation: none; }
}