.slot-main { width: min(100% - 32px, 1280px); margin: 26px auto 70px; }
.slot-toolbar { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; font: 11px "IBM Plex Mono", monospace; color: var(--muted); }
.slot-toolbar a { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.slot-cabinet { --gold: #ffd65a; position: relative; isolation: isolate; padding: 0 20px 10px; overflow: hidden; border: 1px solid #b97821; border-radius: 18px; background: radial-gradient(ellipse at 15% 60%, #db5a00 0, transparent 36%), radial-gradient(ellipse at 92% 10%, #ba3900 0, transparent 45%), linear-gradient(125deg,#3d0209,#9b1207 50%,#23010b); }
.slot-cabinet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: conic-gradient(from 65deg at 15% 90%, transparent, #ffce5524, transparent 25%, #ffce5524, transparent 60%); pointer-events: none; }
.slot-cabinet h1 { position: relative; z-index: 2; margin: 0; padding: 8px 0 0; color: #ffe487; font-size: clamp(28px,6.6vw,84px); font-weight: 700; line-height: 1.05; text-align: center; letter-spacing: -.025em; -webkit-text-stroke: 1px #bc780b; text-shadow: 0 3px #a94105,0 5px #460d00,0 8px 14px #290000; }
.slot-cabinet h1::before,.slot-cabinet h1::after { content: ""; display: inline-block; width: 8%; height: 12px; margin: 0 3% 12px; border-block: 2px solid #eec454; border-radius: 50%; }
.reel-stage { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; gap: 12px; align-items: stretch; }
.reel-window { --symbol-height: clamp(110px,14.2vw,180px); position: relative; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; height: calc(var(--symbol-height) * 3 + 4px); }
.reel { min-width: 0; overflow: hidden; border: 2px solid #f5bc44; border-radius: 16px; background: #000; box-shadow: 0 6px 14px #330301; }
.reel-strip { display: grid; grid-auto-rows: var(--symbol-height); }
.symbol { display: grid; place-items: center; height: var(--symbol-height); position: relative; }
.symbol-art { display: block; width: min(100%,var(--symbol-height)); height: min(100%,var(--symbol-height)); aspect-ratio: 1; background: url('/assets/respin-fruits.png') 0 0 / 300% 200% no-repeat; }
.symbol img { display: block; width: 100%; height: 100%; max-width: var(--symbol-height); max-height: var(--symbol-height); object-fit: contain; padding: 6px; filter: drop-shadow(0 2px 3px #e4a526); }
.symbol.is-winning { background: #3b2700; box-shadow: inset 0 0 0 2px #ffd65a; }
.symbol.is-winning .symbol-art { mix-blend-mode: screen; }
.symbol.is-winning img,.symbol.is-winning .symbol-art { animation: symbol-win 800ms ease-out 2; }
.win-lines { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); overflow: visible; pointer-events: none; }
.win-lines polyline { stroke: #ffde60; stroke-width: 1; fill: none; stroke-dasharray: 450; animation: line-reveal 700ms ease-out; filter: drop-shadow(0 2px 2px #792404); }
.line-numbers { display: grid; grid-template-rows: 1fr 1fr 2fr 1fr 1fr; align-items: center; justify-items: center; }
.line-numbers b { display: grid; place-items: center; width: 34px; height: 40px; border: 1px solid #ffe580; border-radius: 50%; color: #241600; background: linear-gradient(#fffbbb,#ffd53c 45%,#bc730c); font-size: 24px; }
.slot-controls { display: grid; grid-template-columns: 1.2fr 1fr 1.2fr .55fr .85fr 46px; gap: 12px; align-items: stretch; margin: 22px 0 0; }
.readout { min-width: 0; display: grid; align-content: center; justify-items: center; padding: 8px; border: 1px solid #ebbd39; border-radius: 3px; background: #260514; }
.readout span,.readout label { color: #ffdc71; font-size: 14px; font-weight: 600; }
.readout strong { max-width: 100%; overflow-wrap: anywhere; font-size: clamp(22px,3vw,38px); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.15; }
.readout select { max-width: 100%; width: 100%; padding: 0 12px; border: 0; background: #260514; color: #fff; text-align: center; font-size: 32px; cursor: pointer; }
.gold-button { display: grid; place-items: center; align-content: center; min-height: 74px; padding: 8px 12px; border: 2px solid #ffe996; border-radius: 12px; background: linear-gradient(#fffac4,#ffd33b 48%,#e9a31b 52%,#ffda5c); box-shadow: inset 0 0 0 3px #c48b28,0 5px 8px #3a0905; color: #211500; font: 700 22px/.95 "Barlow Semi Condensed",sans-serif; cursor: pointer; transition: filter 150ms,transform 150ms; }
.gold-button:hover:not(:disabled) { filter: brightness(1.13); }
.gold-button:active:not(:disabled) { transform: translateY(2px); }
.gold-button:disabled { filter: saturate(.4); opacity: .7; cursor: not-allowed; }
.spin-button svg { width: 45px; height: 45px; fill: none; stroke: currentColor; stroke-width: 5; }
.spin-button span { margin-top: 4px; font-size: 12px; }
.sound-button { align-self: center; display: grid; place-items: center; width: 44px; height: 44px; padding: 8px; border: 1px solid #f4bf4a; border-radius: 50%; background: #39070b; color: #ffde76; cursor: pointer; }
.sound-button svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.sound-button[aria-pressed="false"] { opacity: .65; }
.slot-result { min-height: 22px; margin: 12px 0 0; color: #ffedc0; font-size: 16px; text-align: center; }
.bonus-meter { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 4px 0 12px; color: #fff0a0; font-size: 18px; }
.bonus-meter strong { font-size: 25px; }
.slot-cabinet.is-bonus { border-color: #ffe080; background: radial-gradient(ellipse at 50% 50%,#b9680c,#621b06 60%,#220108); }
.bonus-celebration { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 20px; background: #170305ed; text-align: center; animation: bonus-enter 450ms ease-out; }
.bonus-celebration img { width: min(36%,260px); max-height: 36%; object-fit: contain; filter: drop-shadow(0 5px 10px #d28a21); }
.bonus-celebration strong { color: #ffde70; font-size: clamp(25px,5vw,62px); line-height: 1; }
.bonus-celebration span { font-size: clamp(22px,4vw,44px); }
.bonus-celebration button { min-height: 54px; margin-top: 12px; }
.slot-error { color: #ff9d9d; margin: 14px 0 0; }
.slot-error:empty { display: none; }
.retry-button { min-height: 44px; padding: 10px 18px; margin: 12px 0; border: 1px solid var(--line-strong); background: var(--surface); color: #fff; cursor: pointer; }
.slot-rules,.slot-history { border-bottom: 1px solid var(--line); background: var(--bg); }
.slot-rules summary,.slot-history summary { padding: 22px 0; cursor: pointer; font-size: 18px; }
.rules-content { padding: 0 0 20px; color: #c8c8c8; font-size: 16px; line-height: 1.55; }
.rules-content p { max-width: 75ch; }
.paytable { display: flex; flex-wrap: wrap; gap: 24px; }
.paytable > div { display: grid; justify-items: center; }
.paytable .symbol { --symbol-height: 64px; width: 64px; }
.paytable strong { color: #fff; font: 12px "IBM Plex Mono",monospace; }
.slot-history ol { margin: 0; padding: 0 0 20px; list-style: none; }
.slot-history li { display: flex; justify-content: space-between; gap: 15px; padding: 12px 0; border-top: 1px solid var(--line); color: #c8c8c8; }
.slot-gate { padding: 15vh 20px; color: var(--muted); text-align: center; }
.slot-cabinet :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
@keyframes symbol-win { 50% { transform: scale(.9); } }
@keyframes line-reveal { from { stroke-dashoffset: 450; } to { stroke-dashoffset: 0; } }
@keyframes bonus-enter { from { opacity: 0; transform: scale(.96); } }
@media (max-width: 760px) {
.slot-main { width: calc(100% - 20px); margin-top: 18px; }
.slot-toolbar { font-size: 9px; }
.slot-cabinet { padding: 6px 8px 10px; border-radius: 10px; }
.slot-cabinet h1 { font-size: clamp(27px,7.8vw,52px); padding: 6px 0 14px; -webkit-text-stroke: .4px #bc780b; }
.slot-cabinet h1::before,.slot-cabinet h1::after { height: 7px; margin-bottom: 5px; }
.reel-stage { grid-template-columns: 22px minmax(0,1fr) 22px; gap: 3px; }
.reel-window { --symbol-height: clamp(87px,24vw,165px); gap: 5px; }
.reel { border-width: 1px; border-radius: 9px; }
.line-numbers b { width: 20px; height: 25px; font-size: 16px; }
.slot-controls { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 14px; }
.readout { padding: 8px 3px; }
.readout span,.readout label { font-size: 10px; }
.readout select { font-size: 25px; }
.gold-button { min-height: 60px; font-size: 19px; }
.spin-button { grid-column: 2; }
.spin-button svg { width: 30px; height: 30px; }
.sound-button { justify-self: center; }
.slot-result { font-size: 14px; }
.bonus-meter { flex-direction: column; gap: 0; font-size: 12px; }
.bonus-meter strong { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .symbol.is-winning img,.symbol.is-winning .symbol-art,.win-lines polyline,.bonus-celebration { animation: none; } }