@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Oswald:wght@400;600;700&family=Roboto+Condensed:wght@400;700&display=swap');

:root {
  --gold: #ffc84a;
  --gold-dark: #a75a12;
  --red: #c92720;
  --red-dark: #5f0b09;
  --cream: #fff3cf;
  --ink: #180b08;
  --wood: #3a160f;
  --green: #28d78c;
  --panel: #210d09;
  --line: rgba(255,255,255,.13);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: #080403; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--cream);
  font-family: "Roboto Condensed", system-ui, sans-serif;
  background:
    radial-gradient(circle at 50% -10%, rgba(199,54,29,.32), transparent 35%),
    linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.75)),
    repeating-linear-gradient(90deg, #160806 0 2px, #0d0504 2px 8px);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .06;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
  z-index: 20;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.hidden { display: none !important; }

.ambient {
  position: fixed;
  width: 38vw;
  height: 38vw;
  border-radius: 50%;
  filter: blur(90px);
  opacity: .12;
  pointer-events: none;
}
.ambient-left { left: -18vw; top: 20vh; background: #ef2d18; }
.ambient-right { right: -20vw; top: 10vh; background: #ffb400; }

.page-shell { width: min(1440px, calc(100% - 28px)); margin: 0 auto; padding: 14px 0 24px; }

.site-head, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-head { min-height: 52px; margin-bottom: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: white; text-decoration: none; font-family: Oswald, sans-serif; font-size: 22px; }
.brand small { color: var(--gold); }
.brand-mark {
  display: grid; place-items: center; width: 38px; aspect-ratio: 1; border-radius: 9px;
  color: #2d1308; font: 700 24px Oswald; background: linear-gradient(145deg, #fff1ae, #d78c16);
  box-shadow: inset 0 1px #fff, 0 7px 20px rgba(0,0,0,.35);
}
.fun-badge { color: #eecf9d; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.icon-button {
  border: 1px solid #7f4d1d; border-radius: 50%; width: 42px; aspect-ratio: 1; cursor: pointer;
  background: radial-gradient(circle at 35% 30%, #6b321b, #1e0c08 65%); box-shadow: inset 0 1px rgba(255,255,255,.2), 0 4px 10px #0008;
}
.icon-button.muted { opacity: .55; }

.machine-wrap {
  position: relative;
  border: 4px solid #7b321a;
  border-radius: 30px 30px 20px 20px;
  overflow: hidden;
  background: linear-gradient(90deg, #2b0e08, #6e2815 15%, #3b120b 48%, #7c2f18 84%, #2b0e08);
  box-shadow: 0 35px 70px #000c, inset 0 0 0 3px #1a0705, inset 0 0 50px #0009;
}
.machine-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,225,160,.18), inset 0 0 60px #0008;
}

.machine-top { position: relative; padding: 24px 24px 17px; background: linear-gradient(#290a05, #5e160d 48%, #2f0b07); border-bottom: 5px solid #180604; }
.bulb-row { position: absolute; inset: 7px 12px auto; display: flex; justify-content: space-around; }
.bulb-row i {
  width: 12px; aspect-ratio: 1; border-radius: 50%; background: #ffdc79;
  box-shadow: 0 0 4px #fff, 0 0 12px #ffb000, 0 0 26px #ff5e00;
  animation: bulb 1.25s infinite alternate;
}
.bulb-row i:nth-child(3n) { animation-delay: .35s; }
.bulb-row i:nth-child(2n) { animation-delay: .7s; }
@keyframes bulb { to { opacity: .35; filter: saturate(.6); } }

.marquee {
  position: relative;
  width: min(760px, 88%);
  margin: 0 auto;
  padding: 14px 20px 12px;
  text-align: center;
  border: 4px solid #f0a72c;
  border-radius: 18px;
  background:
    linear-gradient(rgba(94,0,0,.12), rgba(94,0,0,.12)),
    repeating-linear-gradient(45deg, #b41d14 0 8px, #98140f 8px 16px);
  box-shadow: inset 0 0 0 3px #6f0d08, inset 0 0 32px #3e0808, 0 8px 14px #0008;
}
.marquee::before, .marquee::after { content: "✦"; position: absolute; top: 47%; transform: translateY(-50%); color: var(--gold); font-size: 30px; text-shadow: 0 0 8px #ff9d00; }
.marquee::before { left: 22px; } .marquee::after { right: 22px; }
.marquee-kicker { font: 600 11px Oswald; letter-spacing: .32em; color: #ffd986; }
.marquee h1 { margin: 2px 0 1px; font: clamp(30px, 4vw, 58px)/.95 "Alfa Slab One", serif; letter-spacing: .035em; color: #fff2b7; text-shadow: 0 3px #6e170d, 0 0 10px #ffbd38, 0 0 28px #ff481c; }
.marquee p { margin: 7px 0 0; font: 700 12px Oswald; letter-spacing: .19em; color: #ffcf4a; }

.machine-body { display: grid; grid-template-columns: 220px minmax(0, 1fr) 220px; gap: 16px; padding: 18px; }
.side-panel {
  min-width: 0;
  overflow: hidden;
  border: 2px solid #7a451f; border-radius: 15px; padding: 15px;
  background: linear-gradient(145deg, rgba(31,11,6,.96), rgba(79,29,14,.91));
  box-shadow: inset 0 0 0 2px #210b06, 0 12px 20px #0006;
}
.side-panel h2 { margin: 0 0 10px; color: var(--gold); font: 700 20px Oswald; text-transform: uppercase; letter-spacing: .08em; }
.paytable { display: grid; gap: 7px; min-width: 0; }
.pay-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  grid-template-areas:
    "icon name"
    "icon payout";
  align-items: center;
  column-gap: 7px;
  row-gap: 1px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
  padding: 6px 7px;
  border-radius: 8px;
  background: #100604a8;
  border: 1px solid #ffffff0d;
}
.pay-row img { grid-area: icon; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 2px #000); }
.pay-row span { grid-area: name; min-width: 0; font-weight: 700; font-size: 12px; }
.pay-row b {
  grid-area: payout;
  min-width: 0;
  color: #ffd966;
  font-size: 10px;
  line-height: 1.2;
  white-space: normal;
  overflow-wrap: anywhere;
}
.pay-note { margin: 12px 0 0; color: #caa47f; font-size: 11px; line-height: 1.45; }
.feature-card { text-align: center; padding: 12px 7px 17px; border-bottom: 1px dashed #81502c; }
.feature-card:last-child { border-bottom: 0; }
.feature-card img { width: 74px; height: 74px; filter: drop-shadow(0 6px 8px #0009); }
.feature-card p { color: #ddc09a; font-size: 13px; line-height: 1.45; }
.feature-card strong { color: #79f4bd; font-size: 12px; }
.feature-card.gold strong { color: var(--gold); }

.game-panel { min-width: 0; }
.score-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 11px; }
.score-card {
  min-width: 0; padding: 8px 10px; text-align: center; border: 2px solid #5f351a; border-radius: 10px;
  background: linear-gradient(#0d0908, #1d100b); box-shadow: inset 0 0 9px #000, 0 4px 10px #0006;
}
.score-card span { display: block; color: #b99572; font: 600 10px Oswald; letter-spacing: .1em; text-transform: uppercase; }
.score-card strong { display: block; overflow: hidden; text-overflow: ellipsis; color: #ffe29c; font: 700 clamp(15px, 2vw, 22px) Oswald; text-shadow: 0 0 7px #ff9300a6; }
.free-card strong { color: #70f0bd; text-shadow: 0 0 7px #0aff9a73; }
.win-card strong { color: #fff2a3; }

.reel-frame {
  position: relative; padding: 12px; overflow: hidden; border: 5px solid #d79a32; border-radius: 15px;
  background: linear-gradient(#5c2b14, #220d07); box-shadow: inset 0 0 0 3px #4d220f, 0 12px 22px #0009;
}
.reel-frame::before { content: ""; position: absolute; inset: 4px; border: 1px solid #ffe7a95c; border-radius: 9px; pointer-events: none; z-index: 7; }
.reel-glass { position: absolute; inset: 12px; z-index: 6; pointer-events: none; border-radius: 7px; background: linear-gradient(110deg, rgba(255,255,255,.18), transparent 22%, transparent 63%, rgba(255,255,255,.06)); mix-blend-mode: screen; }
.reels { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; min-height: 300px; padding: 5px; border-radius: 8px; background: #160905; }
.reel { display: grid; grid-template-rows: repeat(3, minmax(70px, 1fr)); gap: 3px; min-width: 0; overflow: hidden; border-left: 1px solid #c38b4d; border-right: 1px solid #69401f; background: linear-gradient(90deg, #d2bea1, #fffbed 18%, #fffef7 50%, #e4d4bd 82%, #9e866a); box-shadow: inset 10px 0 17px #6f59475c, inset -10px 0 17px #6f59475c; }
.symbol-cell { position: relative; display: grid; place-items: center; min-height: 0; border-top: 1px solid #cab594a3; border-bottom: 1px solid #fff; transition: filter .2s, transform .2s; }
.symbol-cell img { width: min(76px, 78%); height: min(76px, 78%); object-fit: contain; filter: drop-shadow(0 5px 4px #3d261e65); user-select: none; }
.symbol-cell.win { animation: symbolWin .55s infinite alternate; z-index: 2; }
.symbol-cell.win::after { content: ""; position: absolute; inset: 3px; border-radius: 9px; border: 3px solid #ffce45; box-shadow: inset 0 0 12px #ffb900, 0 0 16px #ff9d00; }
@keyframes symbolWin { to { transform: scale(1.08); filter: brightness(1.18) saturate(1.2); } }
.reel.spinning .symbol-cell img { animation: reelBlur .12s linear infinite; }
@keyframes reelBlur { 0%{ transform: translateY(-9px) scaleY(1.08); filter: blur(1.5px);} 50%{ transform: translateY(9px) scaleY(.92); filter: blur(3px);} 100%{transform: translateY(-9px) scaleY(1.08);filter: blur(1.5px);} }
.reel-shadow { position: absolute; z-index: 5; left: 12px; right: 12px; height: 44px; pointer-events: none; }
.reel-shadow.top { top: 12px; background: linear-gradient(#2a120acc, transparent); }
.reel-shadow.bottom { bottom: 12px; background: linear-gradient(transparent, #2a120acc); }
.win-lines { position: absolute; inset: 12px; z-index: 8; pointer-events: none; }
.payline { position: absolute; height: 4px; transform-origin: left center; border-radius: 4px; background: #ffe363; box-shadow: 0 0 7px #ffad00, 0 0 14px #ff3700; opacity: 0; }
.payline.show { animation: lineFlash .6s alternate infinite; }
@keyframes lineFlash { to { opacity: .95; } }

.message-bar { min-height: 42px; display: grid; place-items: center; margin: 10px 0; padding: 8px 14px; border: 2px solid #653b1e; border-radius: 9px; background: #0c0705; color: #eac99e; font: 700 15px Oswald; letter-spacing: .04em; text-align: center; box-shadow: inset 0 0 8px #000; }
.message-bar.win { color: #fff29a; text-shadow: 0 0 8px #ff9d00; }
.message-bar.bonus { color: #73ffc2; text-shadow: 0 0 8px #00a85c; }

.control-deck { display: grid; grid-template-columns: 1fr 150px 1fr; align-items: center; gap: 14px; padding: 13px; border: 3px solid #542613; border-radius: 16px; background: linear-gradient(#6b2d17, #321209); box-shadow: inset 0 1px #b96331, 0 10px 20px #0008; }
.bet-controls, .auto-controls { display: flex; align-items: center; justify-content: center; gap: 7px; }
.metal-button {
  min-height: 48px; border: 2px solid #5e4938; border-radius: 10px; cursor: pointer; color: #2a160d;
  background: linear-gradient(#fff4d6 0%, #d9b884 45%, #8d6844 52%, #d0ae77 100%);
  box-shadow: inset 0 1px #fff, inset 0 -2px #5f4027, 0 4px 0 #2c140a, 0 7px 10px #0008;
  font: 700 14px Oswald; text-shadow: 0 1px #fff8; transition: transform .08s;
}
.metal-button:active { transform: translateY(3px); box-shadow: inset 0 1px #fff, inset 0 -2px #5f4027, 0 1px 0 #2c140a; }
.metal-button:disabled, .spin-button:disabled { cursor: not-allowed; filter: grayscale(.65) brightness(.7); }
.metal-button.small { width: 44px; min-width: 44px; font-size: 25px; }
.metal-button.max { padding-inline: 12px; }
.metal-button.auto, .metal-button.info { min-width: 66px; padding: 5px 10px; }
.metal-button small { display: block; font-size: 9px; }
.metal-button.active { filter: saturate(1.5); box-shadow: inset 0 1px #fff, inset 0 -2px #5f4027, 0 4px 0 #2c140a, 0 0 15px #76ffbd; }
.bet-meter { min-width: 72px; text-align: center; padding: 4px 8px; border-radius: 8px; background: #120806; box-shadow: inset 0 0 6px #000; }
.bet-meter span { display: block; color: #b69370; font: 600 9px Oswald; letter-spacing: .1em; }
.bet-meter strong { color: #ffdc76; font: 700 17px Oswald; }
.spin-button {
  position: relative; width: 142px; aspect-ratio: 1.55; justify-self: center; overflow: hidden; border: 4px solid #ffd165; border-radius: 50%; cursor: pointer;
  color: #fffbd0; background: radial-gradient(circle at 50% 35%, #ff4b39, #bd160d 50%, #590603 72%);
  box-shadow: inset 0 4px 7px #ff9e70, inset 0 -8px 14px #520000, 0 6px 0 #3e0905, 0 10px 20px #000a, 0 0 18px #f22819aa;
  transition: transform .08s;
}
.spin-button:active { transform: translateY(4px); box-shadow: inset 0 4px 7px #ff9e70, inset 0 -8px 14px #520000, 0 2px 0 #3e0905, 0 5px 10px #000a; }
.spin-button b { display: block; font: 700 27px Oswald; letter-spacing: .1em; text-shadow: 0 2px #660b05; }
.spin-button small { display: block; margin-top: -5px; font: 700 10px Oswald; letter-spacing: .2em; text-transform: uppercase; }
.spin-highlight { position: absolute; width: 75%; height: 30%; left: 13%; top: 6%; border-radius: 50%; background: linear-gradient(rgba(255,255,255,.5), transparent); }
.stat-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 6px 0; color: #b89271; font-size: 12px; }
.stat-row b { color: #f4d7a5; }

.machine-base { display: grid; grid-template-columns: 80px 1fr 100px; align-items: center; gap: 10px; padding: 10px 22px 14px; border-top: 3px solid #180604; color: #b88d66; font-size: 11px; text-align: center; background: linear-gradient(#4e190f, #2c0d08); }
.coin-slot { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 7px; background: #160705; box-shadow: inset 0 0 6px #000; }
.coin-slot span { width: 38px; height: 5px; border-radius: 4px; background: #000; box-shadow: 0 1px #8f5636; }
.coin-slot small { color: var(--gold); font-weight: 700; }
.serial { font-family: monospace; }
.site-footer { padding: 14px 4px 0; color: #94705d; font-size: 12px; }
.site-footer a { color: #d4aa83; }

.overlay { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(7,2,1,.86); backdrop-filter: blur(7px); }
.overlay-card { position: relative; width: min(620px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: 34px; border: 3px solid #c5892e; border-radius: 22px; background: radial-gradient(circle at 50% 0, #6f2314, #260b07 46%, #120604); box-shadow: inset 0 0 0 3px #40130b, 0 25px 70px #000; text-align: center; }
.overlay-card h2 { margin: 3px 0 10px; font: 700 clamp(30px, 6vw, 48px) Oswald; color: #fff0b5; text-transform: uppercase; }
.overlay-card p { color: #d4b38f; line-height: 1.5; }
.overlay-shine { position: absolute; width: 300px; height: 300px; border-radius: 50%; left: 50%; top: -240px; transform: translateX(-50%); background: #ffc400; filter: blur(60px); opacity: .22; }
.eyebrow { color: #ffc84a; font: 700 12px Oswald; letter-spacing: .28em; }
.close-button { position: absolute; top: 10px; right: 12px; border: 0; background: transparent; color: #efc8a0; font-size: 31px; cursor: pointer; }
.primary-button { min-height: 50px; padding: 0 26px; border: 2px solid #ffe19b; border-radius: 12px; cursor: pointer; background: linear-gradient(#ffdb6a, #ca7518); color: #321408; font: 700 17px Oswald; text-transform: uppercase; box-shadow: inset 0 1px #fff, 0 5px 0 #6f2a0c, 0 9px 18px #0008; }
.primary-button:active { transform: translateY(3px); box-shadow: inset 0 1px #fff, 0 2px 0 #6f2a0c; }
.vault-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
.vault { position: relative; aspect-ratio: 1.2; border: 3px solid #e3b458; border-radius: 10px; cursor: pointer; background: linear-gradient(135deg, #705538, #1f1811 45%, #947149); box-shadow: inset 0 0 0 4px #2d2115, inset 0 0 15px #000, 0 8px 15px #0008; color: #ffdf8d; transition: transform .15s, filter .15s; }
.vault::before { content: ""; position: absolute; width: 38%; aspect-ratio: 1; border: 5px double #d7aa55; border-radius: 50%; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: inset 0 0 0 5px #2f2417; }
.vault::after { content: "✦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #d8ad59; font-size: 22px; }
.vault:hover { transform: translateY(-4px) rotate(-1deg); filter: brightness(1.2); }
.vault.open { cursor: default; background: linear-gradient(135deg, #9d783d, #f9cf68); color: #260d06; font: 700 23px Oswald; }
.vault.open::before, .vault.open::after { display: none; }
.vault.dim { opacity: .45; filter: grayscale(.8); }
.bonus-result { min-height: 36px; margin-bottom: 18px; color: #8bf0c1; font: 700 20px Oswald; }
.rules-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 20px 0; text-align: left; }
.rules-grid > div { display: grid; grid-template-columns: 35px 1fr; gap: 10px; padding: 12px; border: 1px solid #805126; border-radius: 10px; background: #12060491; }
.rules-grid b { color: var(--gold); font: 700 25px Oswald; }
.rules-grid p { margin: 0; font-size: 14px; }
.info-card h3 { color: var(--gold); text-transform: uppercase; }
.line-preview { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 24px; color: #ffd86a; font-size: 22px; }
.gameover-card > strong { display: block; margin: 16px 0; color: #ffd866; font: 700 44px Oswald; text-shadow: 0 0 14px #ff8a00; }
.round-stats { display: flex; justify-content: center; gap: 14px; margin: 0 0 24px; }
.round-stats span { padding: 9px 14px; border-radius: 9px; background: #120604; color: #d6af88; }

.machine-wrap.celebrate { animation: machineWin .25s alternate 6; }
@keyframes machineWin { to { filter: brightness(1.18) saturate(1.25); transform: translateY(-2px); } }

@media (max-width: 1120px) {
  .machine-body { grid-template-columns: minmax(0, 1fr); }
  .side-panel { display: none; }
  .game-panel { width: min(820px, 100%); margin: 0 auto; }
}

@media (max-width: 700px) {
  .page-shell { width: min(100%, calc(100% - 12px)); padding-top: 7px; }
  .site-head { min-height: 44px; }
  .fun-badge { display: none; }
  .machine-wrap { border-width: 2px; border-radius: 20px 20px 14px 14px; }
  .machine-top { padding: 21px 8px 10px; }
  .marquee { width: 96%; padding-inline: 28px; border-width: 3px; }
  .marquee::before { left: 8px; } .marquee::after { right: 8px; }
  .marquee-kicker { letter-spacing: .18em; }
  .marquee p { font-size: 9px; letter-spacing: .11em; }
  .machine-body { padding: 9px; }
  .score-strip { grid-template-columns: 1fr 1fr; }
  .score-card { padding: 6px; }
  .reel-frame { padding: 7px; border-width: 3px; }
  .reel-glass, .reel-shadow { inset-inline: 7px; }
  .reels { min-height: 240px; gap: 2px; padding: 3px; }
  .reel { grid-template-rows: repeat(3, minmax(58px, 1fr)); gap: 1px; }
  .symbol-cell img { width: 82%; height: 82%; }
  .control-deck { grid-template-columns: 1fr 112px 1fr; gap: 5px; padding: 8px 5px; }
  .spin-button { width: 104px; }
  .spin-button b { font-size: 22px; }
  .bet-controls, .auto-controls { flex-wrap: wrap; gap: 4px; }
  .metal-button { min-height: 42px; border-width: 1px; }
  .metal-button.small { width: 38px; min-width: 38px; }
  .metal-button.max { width: 78px; order: 4; }
  .bet-meter { min-width: 60px; }
  .auto-controls .metal-button { width: 58px; min-width: 0; padding-inline: 4px; }
  .stat-row { font-size: 10px; }
  .machine-base { grid-template-columns: 60px 1fr 76px; padding-inline: 9px; font-size: 9px; }
  .coin-slot span { width: 25px; }
  .site-footer { font-size: 10px; }
  .overlay-card { padding: 30px 18px 24px; }
  .vault-grid { gap: 8px; }
  .rules-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .brand { font-size: 18px; }.brand-mark{width:34px}
  .score-strip { gap: 5px; }
  .reels { min-height: 215px; }
  .control-deck { grid-template-columns: 1fr 94px 1fr; }
  .spin-button { width: 90px; }
  .spin-button b { font-size: 19px; }
  .metal-button.small { width: 34px; min-width: 34px; }
  .bet-meter { order: -1; width: 72px; flex-basis: 72px; }
  .metal-button.max { width: 72px; }
  .stat-row span:nth-child(3) { display: none; }
  .vault-grid { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

/* V1.2: optische Begleitung für die akustische Bonus-Spannung. */
.reel.anticipation {
  animation: reelAnticipation .24s ease-in-out infinite alternate;
}

@keyframes reelAnticipation {
  from { filter: brightness(1); }
  to { filter: brightness(1.14) contrast(1.04); }
}

/* V1.3: Ein klassisches, bewusst dezentes Leerfeld auf den Walzen. */
.symbol-cell.blank-symbol img {
  width: 72%;
  height: 72%;
  opacity: .72;
  filter: saturate(.65) contrast(.88);
}

/* V1.7: Fairer Sicherungsstand mit automatischem Abwärtsspeichern.
   V1.6: Manueller Spielstand mit klarer Speicher- und Reset-Funktion. */
.save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 9px 10px;
  border: 1px solid #63351c;
  border-radius: 11px;
  background: linear-gradient(90deg, rgba(17,7,4,.92), rgba(48,17,9,.9));
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 5px 12px #0005;
}
.save-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: #c8a47e;
  font-size: 11px;
  line-height: 1.3;
}
.save-hint span { overflow: hidden; text-overflow: ellipsis; }
.save-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #8a5b3d;
  box-shadow: 0 0 0 2px #1b0905;
}
.save-dot.saved { background: #45df9a; box-shadow: 0 0 0 2px #1b0905, 0 0 9px #36e79699; }
.save-dot.dirty { background: #ffc84a; box-shadow: 0 0 0 2px #1b0905, 0 0 9px #ffb52c88; }
.save-actions { display: flex; flex: 0 0 auto; gap: 7px; }
.utility-button {
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid #76512f;
  border-radius: 8px;
  cursor: pointer;
  color: #2a160d;
  font: 700 11px Oswald;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-shadow: 0 1px rgba(255,255,255,.55);
  box-shadow: inset 0 1px rgba(255,255,255,.75), 0 3px 0 #2d1309, 0 5px 9px #0006;
  transition: transform .08s, filter .15s;
}
.utility-button span { margin-right: 4px; }
.utility-button.save { background: linear-gradient(#d9f4c6, #82bc72 52%, #579451); }
.utility-button.reset { background: linear-gradient(#ffe1c1, #d99b65 52%, #a85b3d); }
.utility-button:active { transform: translateY(2px); box-shadow: inset 0 1px rgba(255,255,255,.7), 0 1px 0 #2d1309; }
.utility-button:disabled { cursor: not-allowed; filter: grayscale(.7) brightness(.65); }
.reset-card { width: min(530px, 100%); }
.reset-option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px auto 24px;
  padding: 13px 14px;
  border: 1px solid #805126;
  border-radius: 10px;
  background: #12060491;
  color: #e2c29e;
  text-align: left;
  cursor: pointer;
}
.reset-option input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #d18a29; }
.reset-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.secondary-button, .danger-button {
  min-height: 48px;
  padding: 0 22px;
  border-radius: 11px;
  cursor: pointer;
  font: 700 15px Oswald;
  text-transform: uppercase;
}
.secondary-button {
  border: 2px solid #a78462;
  color: #f1d7b8;
  background: linear-gradient(#4b2b1b, #251008);
  box-shadow: inset 0 1px rgba(255,255,255,.13), 0 4px 0 #130603;
}
.danger-button {
  border: 2px solid #ffb18a;
  color: #fff1dc;
  background: linear-gradient(#d64a33, #86180f);
  box-shadow: inset 0 1px rgba(255,255,255,.25), 0 4px 0 #4a0906;
}
.secondary-button:active, .danger-button:active { transform: translateY(3px); box-shadow: none; }

@media (max-width: 700px) {
  .save-row { align-items: stretch; flex-direction: column; gap: 8px; }
  .save-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .utility-button { width: 100%; }
}

@media (max-width: 420px) {
  .save-hint { font-size: 10px; }
  .utility-button { padding-inline: 7px; font-size: 10px; }
}


/* VERSION 1.8: Autospin-Auswahl im klassischen 3×2-Tastenfeld. */
.auto-card {
  width: min(650px, 100%);
  border-color: #ffd56d;
  background:
    radial-gradient(circle at 50% 0, rgba(255, 197, 72, .15), transparent 42%),
    linear-gradient(155deg, #35150d, #160806 70%);
}
.auto-card > p {
  max-width: 540px;
  margin-inline: auto;
}
.auto-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 18px;
}
.auto-choice {
  position: relative;
  min-width: 0;
  min-height: 105px;
  padding: 12px 8px 10px;
  overflow: hidden;
  border: 2px solid #9c7546;
  border-radius: 14px;
  cursor: pointer;
  color: #2a160d;
  background: linear-gradient(#fff4d6 0%, #dfbf8c 44%, #95704a 51%, #d8b77e 100%);
  box-shadow: inset 0 2px rgba(255,255,255,.9), inset 0 -3px #604126, 0 5px 0 #2b1208, 0 9px 16px #0008;
  text-shadow: 0 1px rgba(255,255,255,.65);
  transition: transform .1s, filter .15s, box-shadow .15s;
}
.auto-choice::after {
  content: '';
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 9px;
}
.auto-choice:hover { filter: brightness(1.08) saturate(1.08); }
.auto-choice:active {
  transform: translateY(4px);
  box-shadow: inset 0 2px rgba(255,255,255,.9), inset 0 -3px #604126, 0 1px 0 #2b1208, 0 4px 8px #0008;
}
.auto-choice-number,
.auto-choice-icon {
  position: relative;
  z-index: 1;
  display: block;
  font: 800 34px Oswald, sans-serif;
  line-height: 1;
}
.auto-choice strong {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 4px;
  font: 800 15px Oswald, sans-serif;
  line-height: 1.08;
  text-transform: uppercase;
}
.auto-choice small {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: 5px;
  font: 700 10px Oswald, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.auto-choice.special {
  color: #f4ffe9;
  border-color: #79dba8;
  background: linear-gradient(#42ba82, #157052 52%, #0b4737);
  text-shadow: 0 1px #063d2d;
  box-shadow: inset 0 2px rgba(255,255,255,.35), inset 0 -3px #063a2b, 0 5px 0 #05281e, 0 9px 16px #0008, 0 0 18px rgba(71, 255, 166, .18);
}
.auto-choice.danger {
  color: #fff2dc;
  border-color: #ff9b6f;
  background: linear-gradient(#e35d40, #9c2418 52%, #61100b);
  text-shadow: 0 1px #5b0b07;
  box-shadow: inset 0 2px rgba(255,255,255,.35), inset 0 -3px #5c0b07, 0 5px 0 #3a0705, 0 9px 16px #0008, 0 0 18px rgba(255, 84, 52, .18);
}
.auto-footnote {
  color: #bc9d7d;
  font-size: 11px;
  line-height: 1.45;
}
.metal-button.auto.active {
  color: #fff7de;
  border-color: #ff9c79;
  background: linear-gradient(#ef6851, #a92318 53%, #6e100b);
  text-shadow: 0 1px #5d0805;
  box-shadow: inset 0 1px rgba(255,255,255,.65), inset 0 -2px #580b07, 0 4px 0 #3d0805, 0 0 17px rgba(255, 82, 52, .8);
}
.metal-button.auto.active small { color: #ffe4ba; }

@media (max-width: 520px) {
  .auto-card { padding-inline: 12px; }
  .auto-choice-grid { gap: 7px; margin-block: 18px 14px; }
  .auto-choice { min-height: 94px; padding-inline: 4px; border-radius: 11px; }
  .auto-choice-number, .auto-choice-icon { font-size: 29px; }
  .auto-choice strong { font-size: 12px; }
  .auto-choice small { font-size: 8px; letter-spacing: 0; }
  .auto-footnote { font-size: 10px; }
}