/* Luck meter recoloured to the site palette (neutral track, accent marker). Layout and data unchanged. */
.sl-luck-bar{height:4px;background:var(--line)}
.sl-luck-bar i{width:14px;height:14px;margin:-5px 0 0 -7px;border:2px solid var(--accent);background:var(--surface);box-shadow:0 0 0 4px var(--accent-soft)}
.sl-lm{stroke:var(--accent)}
.sl-lt.you{fill:var(--accent)}

/* ============ Slots machine: clean cabinet (A) with a neon "lights down" state for bonus moments (D) ============ */
.sl-machine{--sw:2.3;--sym-bonus:var(--accent);
  color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:18px 18px 20px;
  box-shadow:var(--shadow-lg);background-clip:border-box;position:relative}
/* title + one hairline that sweeps in accent on wins */
.sl-marquee{background:none;box-shadow:none;border-radius:0;padding:2px 0 0;margin:0 0 14px;text-align:center}
.sl-machine.bonus .sl-marquee{background:none}
.sl-mq-t{padding:0 0 10px;font:400 34px/1.1 var(--serif);letter-spacing:-.01em;text-transform:none}
.sl-mq-main,.sl-mq-bonus{font-family:var(--serif);font-style:italic;font-weight:400;font-size:34px;letter-spacing:-.01em;color:var(--ink);text-shadow:none}
.sl-mq-main .serif,.sl-mq-bonus .serif{font-size:inherit;color:var(--accent);text-shadow:none;letter-spacing:-.01em}
.sl-mq-bonus{color:var(--accent)}
.sl-bulbs{display:none}
.sl-bulbs:last-child{display:block;position:relative;height:1px;margin:0;background:var(--line);filter:none;animation:none;overflow:hidden}
.sl-bulbs:last-child::after{content:"";position:absolute;top:0;bottom:0;width:36%;left:-40%;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0}
.sl-machine.win .sl-bulbs:last-child::after,.sl-machine.big .sl-bulbs:last-child::after,.sl-machine.bonus .sl-bulbs:last-child::after{opacity:1;animation:sla-sweep 1.1s var(--ease) infinite}
@keyframes sla-sweep{to{left:104%}}
.sl-fsbar{background:var(--accent-soft);box-shadow:none;border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--accent);border-radius:999px;font:500 13px/1.3 var(--sans);margin:-2px 0 12px}
.sl-fsbar b{color:var(--ink);font-family:var(--mono)}
/* reels: a clean window, hairline dividers */
.sl-window{padding:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:none;overflow:hidden}
.sl-reels{gap:0;padding:0;border-radius:0;background:transparent;height:calc(var(--cell,94px) * 3)}
.sl-machine.bonus .sl-reels{background:transparent}
.sl-reels::after{inset:0;border-radius:0;background:linear-gradient(180deg,var(--surface) 0%,transparent 26%,transparent 74%,var(--surface) 100%);opacity:.9;z-index:3}
.sl-reel,.sl-machine.bonus .sl-reel{border-radius:0;background:transparent}
.sl-reels{z-index:1}
.sl-line{z-index:0}
.sl-reel+.sl-reel{border-left:1px solid var(--line)}
.sl-reel::after{display:none}
.sl-reel.antic{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 30px 2px color-mix(in srgb,var(--accent) 55%,transparent);animation:sla-antic .5s ease-in-out infinite alternate;z-index:2}
@keyframes sla-antic{to{box-shadow:inset 0 0 0 1.5px var(--accent),0 0 46px 8px color-mix(in srgb,var(--accent) 75%,transparent)}}
.sl-strip.spinning{filter:blur(1.4px);opacity:.75}
.sl-cell{color:var(--ink)}
.sl-cell svg{width:60%;height:60%;filter:none}
.sl-cell.hit{color:var(--accent)}
.sl-cell.hit::before{inset:12%;border-radius:16px;background:var(--accent-soft);border:1px solid color-mix(in srgb,var(--accent) 55%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--accent) 35%,transparent);animation:sla-hit .7s ease-in-out infinite alternate}
@keyframes sla-hit{from{opacity:.55}to{opacity:1}}
.sl-cell.hit svg{animation:none;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 55%,transparent))}
.sl-line{left:0;right:0;height:1px;margin-top:-.5px;border-radius:0;background:repeating-linear-gradient(90deg,var(--line) 0 6px,transparent 6px 12px);box-shadow:none;opacity:1}
.sl-machine.bonus .sl-line{height:2px;margin-top:-1px;background:var(--accent);box-shadow:0 0 14px 1px color-mix(in srgb,var(--accent) 70%,transparent)}
.sl-flash{inset:-1px;border-radius:16px;box-shadow:inset 0 0 0 1.5px var(--accent),0 0 34px 2px color-mix(in srgb,var(--accent) 45%,transparent)}
/* readouts */
.sl-led{gap:0;margin:14px 0 0;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sl-led>div,.sl-machine.bonus .sl-led>div{border-radius:0;background:var(--surface);box-shadow:none;padding:8px 10px}
.sl-led>div+div{border-left:1px solid var(--line)}
.sl-led span{color:var(--muted);font-size:10px;letter-spacing:.12em}
.sl-led b{color:var(--ink);text-shadow:none;font-weight:600;font-size:17px}
.sl-led .w b{color:var(--accent);text-shadow:none;font-size:17px}
.sl-led .neg b{color:var(--danger);text-shadow:none}
.sl-msg{color:var(--ink);font:500 15.5px/1.45 var(--sans);min-height:48px;margin:12px 0 10px}
.sl-msg b{color:var(--ink);font-family:var(--mono)}
.sl-msg.good,.sl-msg.ldw,.sl-msg.near{color:var(--accent)}
.sl-msg.good b{color:var(--accent);font-size:17px;text-shadow:none}
.sl-msg .sl-sub{color:var(--muted);font-weight:400}
.sl-msg .sl-tag{color:var(--muted)}
.sl-spin{font:600 15px/1 var(--sans);letter-spacing:.01em;text-transform:none;min-height:52px;min-width:140px;color:var(--bg);background:var(--ink);text-shadow:none;border-radius:999px;
  box-shadow:0 8px 20px -10px color-mix(in srgb,var(--ink) 60%,transparent);transition:background .2s,transform .12s var(--ease),box-shadow .2s}
.sl-spin:hover{background:var(--accent);color:var(--accent-ink);filter:none}
.sl-spin:active{transform:scale(.97);box-shadow:none}
.sl-machine.bonus .sl-spin{background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 24px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.sl-btn{color:var(--muted);background:var(--surface);border:1px solid var(--line);font-weight:500}
.sl-btn:hover{border-color:var(--ink);color:var(--ink)}
.sl-spin:focus-visible,.sl-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* celebrations */
.sl-over{border-radius:21px;background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 58%),color-mix(in srgb,var(--surface) 80%,transparent);backdrop-filter:blur(4px)}
.sl-tier{font:400 italic clamp(64px,9.5vw,96px)/.95 var(--serif);letter-spacing:-.02em;color:var(--ink);background:none;-webkit-background-clip:border-box;background-clip:border-box;filter:none;text-shadow:none;animation:sla-rise .7s var(--ease)}
.sl-tier.mega{color:var(--accent);background:none;filter:none}
.sl-tier.bonus{color:var(--accent);background:none;filter:none;font-size:clamp(56px,8.5vw,84px)}
@keyframes sla-rise{from{transform:translateY(14px) scale(.96);opacity:0;filter:blur(6px)}}
.sl-tsub{font:500 14px/1.3 var(--sans);color:var(--muted)}
.sl-tsub b{font:600 18px var(--mono);color:var(--ink);text-shadow:none}
.sl-amt{font:600 clamp(30px,5vw,40px)/1 var(--mono);color:var(--accent);text-shadow:none;letter-spacing:-.03em;margin-top:14px}
.sl-skip{color:var(--muted);font:11px var(--mono);letter-spacing:.06em;text-transform:uppercase;margin-top:18px}
.sl-burst i{width:10px;height:10px;border-radius:50%;background:var(--accent)}
.sl-burst i.a{background:var(--ink);width:6px;height:6px}
.sl-burst i.g{background:color-mix(in srgb,var(--accent) 55%,transparent);width:15px;height:15px}
.sl-burst i.c{width:20px;height:20px;border-radius:50%;background:transparent;border:1.5px solid var(--accent);box-shadow:0 0 10px color-mix(in srgb,var(--accent) 50%,transparent)}
/* bonus wheel: grays + accent */
.sl-wrot svg{filter:drop-shadow(0 16px 24px color-mix(in srgb,var(--ink) 14%,transparent))}
.sl-wrot text{font:600 18px var(--mono);fill:var(--ink);stroke:none;letter-spacing:-.02em}
.sl-wseg path{stroke:var(--line);stroke-width:1}
.sl-wseg.w-a path{fill:var(--surface)}
.sl-wseg.w-b path{fill:var(--line-2)}
.sl-wseg.w-top path{fill:var(--accent-soft)}
.sl-wseg.w-top text{fill:var(--accent)}
.sl-wseg.on path{filter:none;fill:var(--accent)}
.sl-wseg.on text{fill:var(--accent-ink)}
.w-rim{fill:none;stroke:var(--line);stroke-width:1.5}
.w-ticks path{stroke:var(--muted);stroke-width:1;opacity:.55}
.w-hub{fill:var(--surface);stroke:var(--ink);stroke-width:1.5}
.w-hub-d{fill:var(--accent)}
.sl-wptr{filter:none}
.sl-wptr path{fill:var(--ink)}

.sl-wheel{width:min(272px,68vw)}
.sl-over.wheel,.sl-over.bonus{background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(6px)}
.sl-over.trigger{background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 58%),color-mix(in srgb,var(--surface) 68%,transparent);backdrop-filter:blur(2px)}
.sl-over.tier{background:radial-gradient(circle at 50% 44%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 58%),color-mix(in srgb,var(--surface) 82%,transparent);backdrop-filter:blur(3px)}
.sl-mini{background:var(--surface);color:var(--ink);--sw:2.4}

/* ============ Lit state: lights go down for the bonus moments ============
   JS (slots-skin.js) toggles .lit on the machine for: bonus trigger, wheel, free spins, bonus total, Big/Mega Win.
   Colours are registered custom properties, so the cabinet fades dark and fades back to the clean card. */
@property --surface{syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --bg{syntax:"<color>";inherits:true;initial-value:#fafaf8}
@property --ink{syntax:"<color>";inherits:true;initial-value:#0e0f11}
@property --muted{syntax:"<color>";inherits:true;initial-value:#60656e}
@property --line{syntax:"<color>";inherits:true;initial-value:#e8e8e3}
@property --line-2{syntax:"<color>";inherits:true;initial-value:#f0f0ec}
@property --accent{syntax:"<color>";inherits:true;initial-value:#2f5bea}
@property --accent-ink{syntax:"<color>";inherits:true;initial-value:#ffffff}
@property --accent-soft{syntax:"<color>";inherits:true;initial-value:rgba(47,91,234,.08)}
.sl-machine{--neon-rgb:122,152,255;
  transition:--surface .8s var(--ease),--bg .8s var(--ease),--ink .8s var(--ease),--muted .8s var(--ease),--line .8s var(--ease),--line-2 .8s var(--ease),--accent .8s var(--ease),--accent-ink .8s var(--ease),--accent-soft .8s var(--ease),background-color .8s var(--ease),border-color .8s var(--ease),color .8s var(--ease)}
.sl-machine.lit{--surface:#06070c;--bg:#06070c;--ink:#eef2ff;--muted:rgba(206,216,255,.66);--line:rgba(var(--neon-rgb),.30);--line-2:rgba(var(--neon-rgb),.10);
  --accent:#8aa5ff;--accent-ink:#05060b;--accent-soft:rgba(var(--neon-rgb),.16);
  --tube:0 0 3px rgba(255,255,255,.75),0 0 10px rgba(var(--neon-rgb),1),0 0 26px rgba(var(--neon-rgb),.8),0 0 56px rgba(var(--neon-rgb),.5);
  --tube-sm:0 0 8px rgba(var(--neon-rgb),.85),0 0 20px rgba(var(--neon-rgb),.45);
}
/* neon edge: a ring that fades in, plus a slow breathing halo */
.sl-machine::before,.sl-machine::after{content:"";position:absolute;inset:-1px;border-radius:23px;pointer-events:none;z-index:7;opacity:0;transition:opacity .8s var(--ease)}
.sl-machine::before{border:2px solid color-mix(in srgb,var(--accent) 72%,#fff);background:radial-gradient(120% 55% at 50% 0%,rgba(var(--neon-rgb),.10),transparent 62%);box-shadow:inset 0 0 22px rgba(var(--neon-rgb),.3),0 0 6px rgba(var(--neon-rgb),.95),0 0 20px rgba(var(--neon-rgb),.75),0 0 48px -2px rgba(var(--neon-rgb),.55)}
.sl-machine::after{box-shadow:0 0 90px 6px rgba(var(--neon-rgb),.38),0 0 150px 24px rgba(var(--neon-rgb),.16)}
.sl-machine.lit::before{opacity:1}
.sl-machine.lit::after{opacity:1;animation:sld-breathe 2.6s ease-in-out infinite}
@keyframes sld-breathe{0%,100%{opacity:.55}50%{opacity:1}}
/* neon lettering */
.sl-machine.lit .sl-mq-main,.sl-machine.lit .sl-mq-bonus,.sl-machine.lit .sl-mq-main .serif,.sl-machine.lit .sl-mq-bonus .serif{color:#f4f7ff;text-shadow:var(--tube)}
.sl-machine.lit .sl-tier,.sl-machine.lit .sl-tier.mega,.sl-machine.lit .sl-tier.bonus{color:#f4f7ff;text-shadow:var(--tube);animation:sla-rise .7s var(--ease),sld-on .9s steps(1,end) 1}
@keyframes sld-on{0%{opacity:.25}10%{opacity:1}20%{opacity:.3}32%{opacity:1}44%{opacity:.55}56%,100%{opacity:1}}
.sl-machine.lit .sl-amt{color:#fff;text-shadow:0 0 6px rgba(255,255,255,.45),0 0 18px rgba(var(--neon-rgb),.95)}
.sl-machine.lit .sl-tsub{color:rgba(206,216,255,.78)}
.sl-machine.lit .sl-tsub b{color:#fff;text-shadow:var(--tube-sm)}
.sl-machine.lit .sl-fsbar{border-color:rgba(var(--neon-rgb),.6);color:#e3eaff;text-shadow:var(--tube-sm)}
.sl-machine.lit .sl-fsbar b{color:#fff}
.sl-machine.lit .sl-msg.good b,.sl-machine.lit .sl-led .w b{text-shadow:var(--tube-sm);color:#fff}
.sl-machine.lit .sl-msg.good,.sl-machine.lit .sl-msg.near,.sl-machine.lit .sl-msg.ldw{color:#fff;text-shadow:0 0 12px rgba(var(--neon-rgb),.7)}
.sl-machine.lit .sl-window{box-shadow:inset 0 0 28px rgba(var(--neon-rgb),.10),0 0 22px -6px rgba(var(--neon-rgb),.45)}
.sl-machine.lit .sl-led,.sl-machine.lit .sl-btn{border-color:rgba(var(--neon-rgb),.28)}
.sl-machine.lit .sl-spin{box-shadow:0 0 22px rgba(var(--neon-rgb),.55)}
.sl-machine.lit .sl-cell.hit svg{filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 10px rgba(var(--neon-rgb),1)) drop-shadow(0 0 22px rgba(var(--neon-rgb),.7))}
.sl-machine.lit .sl-line{background:linear-gradient(90deg,transparent,var(--accent) 12%,#fff 50%,var(--accent) 88%,transparent);box-shadow:0 0 14px 2px rgba(var(--neon-rgb),.85)}
.sl-machine.lit .sl-bulbs:last-child{height:2px;margin-top:-.5px;background:rgba(var(--neon-rgb),.35);box-shadow:0 0 8px rgba(var(--neon-rgb),.7)}
.sl-machine.lit .sl-bulbs:last-child::after{opacity:1;animation:sla-sweep 1.1s var(--ease) infinite}
.sl-machine.lit .sl-over{animation:sld-fade .45s var(--ease)}
@keyframes sld-fade{from{opacity:0}}
.sl-machine.lit .sl-burst i{box-shadow:0 0 8px 1px rgba(var(--neon-rgb),.9)}
.sl-machine.lit .sl-burst i.a{background:#fff}
/* wheel under the lights: outlined segments, glowing rim, light-chase */
.sl-machine.lit .sl-wrot svg{filter:drop-shadow(0 0 18px rgba(var(--neon-rgb),.35))}
.sl-machine.lit .w-rim{stroke:var(--accent);stroke-width:1.4;filter:drop-shadow(0 0 4px rgba(var(--neon-rgb),.9))}
.sl-machine.lit .w-hub{stroke:var(--accent)}
.sl-machine.lit .sl-wseg path{stroke:rgba(var(--neon-rgb),.5)}
.sl-machine.lit .sl-wseg.on path{fill:rgba(var(--neon-rgb),.34);stroke:#fff;stroke-width:1.4}
.sl-machine.lit .sl-wseg.on text{fill:#fff;filter:drop-shadow(0 0 6px rgba(var(--neon-rgb),1))}
.sl-machine.lit .sl-wptr{filter:drop-shadow(0 0 6px rgba(var(--neon-rgb),1))}
.sl-machine.lit .sl-wptr path{fill:#fff}
.sl-wrim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sl-wrim circle{fill:var(--accent);opacity:.3;animation:sld-rim 1.44s linear infinite}
@keyframes sld-rim{0%{opacity:1;filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px rgba(var(--neon-rgb),1))}22%{opacity:.3;filter:none}100%{opacity:.3}}
.sl-wheel{position:relative}
/* reduced motion: same look, nothing moves */
@media (prefers-reduced-motion:reduce){
  .sl-machine,.sl-machine::before,.sl-machine::after{transition:none}
  .sl-machine.lit::after{animation:none;opacity:.8}
  .sl-wrim circle{animation:none;opacity:.6;filter:none}
  .sl-machine.lit .sl-tier,.sl-machine.lit .sl-tier.mega,.sl-machine.lit .sl-tier.bonus,.sl-machine.lit .sl-over,.sl-machine.lit .sl-bulbs:last-child::after{animation:none}
}

/* ============ Lines picker, drawn winning lines, and the "Do the number of lines matter?" lab ============ */
.sl-lines{display:flex;align-items:center;justify-content:center;gap:10px;margin:12px 0 0;flex-wrap:wrap}
.sl-lines-l{font:500 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sl-lines-seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.sl-lines-seg button{font:600 13px/1 var(--mono);color:var(--muted);background:transparent;border:0;min-width:46px;min-height:34px;padding:0 12px;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.sl-lines-seg button+button{border-left:1px solid var(--line)}
.sl-lines-seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent)}
.sl-lines-seg button:hover:not(:disabled):not([aria-pressed="true"]){color:var(--ink)}
.sl-lines-seg button:disabled{cursor:default;opacity:.55}
.sl-lines-seg button:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.sl-lines-n{font:400 12px/1 var(--sans);color:var(--muted)}
@media (pointer:coarse){.sl-lines-seg button{min-height:44px}}
.sl-machine.multi .sl-line{display:none}
.sl-wl{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}
.sl-wl-l,.sl-wl-g{fill:none;stroke:var(--accent);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;animation:sl-wl-in .4s var(--ease)}
.sl-wl-l{opacity:.95}
.sl-wl-g{stroke-width:6;opacity:.16}
@keyframes sl-wl-in{from{opacity:0}}
.sl-ln{margin-top:0}
.sl-ln-ctl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:0 0 16px}
.sl-ln-lab{font:500 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sl-ln-sub{font-size:12.5px;color:var(--muted)}
.sl-ln-split{margin:0 0 18px}
.sl-ln-st{margin:0 0 12px;font-size:14.5px;line-height:1.5;max-width:60ch}
.sl-ln-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--line-2)}
.sl-ln-bar i{display:block;height:100%;transition:width .6s var(--ease)}
.sl-ln-bar .b0,.sl-ln-key .b0{background:color-mix(in srgb,var(--ink) 14%,var(--surface))}
.sl-ln-bar .b1,.sl-ln-key .b1{background:color-mix(in srgb,var(--accent) 38%,var(--surface))}
.sl-ln-bar .b2,.sl-ln-key .b2{background:var(--accent)}
.sl-ln-key{display:flex;flex-wrap:wrap;gap:6px 18px;list-style:none;margin:10px 0 0;padding:0;font-size:12.5px;color:var(--muted)}
.sl-ln-key li{display:inline-flex;align-items:center;gap:7px}
.sl-ln-key i{width:12px;height:12px;border-radius:4px;display:inline-block}
.sl-ln-key b{font:600 12.5px var(--mono);color:var(--ink)}
.sl-ln-tw{overflow-x:auto;margin:0 -2px;padding:0 2px}
.sl-ln-t{width:100%;min-width:520px;border-collapse:collapse;font-size:13.5px}
.sl-ln-t th,.sl-ln-t td{padding:9px 10px;border-top:1px solid var(--line);text-align:left;font-weight:400}
.sl-ln-t thead th{border-top:0;font:500 11.5px/1.2 var(--mono);letter-spacing:.04em;color:var(--muted);vertical-align:bottom}
.sl-ln-t .n{text-align:right;font-family:var(--mono)}
.sl-ln-t tbody th{font-family:var(--mono);font-weight:600}
.sl-ln-t tbody tr.on td,.sl-ln-t tbody tr.on th{background:var(--accent-soft)}
.sl-ln-take{margin-top:clamp(28px,4vw,44px)}
@media (max-width:900px){.sl-ln-kpis dd .a{flex-basis:100%}}
@media (max-width:560px){.sl-ln-t{min-width:0;font-size:12.5px}.sl-ln-t th,.sl-ln-t td{padding:8px 4px}.sl-ln-t thead th{font-size:9.5px;letter-spacing:0;padding-bottom:6px}}
@media (prefers-reduced-motion:reduce){.sl-wl-l,.sl-wl-g{animation:none}.sl-ln-bar i{transition:none}.sl-lines-seg button{transition:none}}