* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #020611;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: auto;
}

body {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.wsp-page {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  background:
    radial-gradient(circle at 50% 8%, rgba(0, 160, 255, .16), transparent 30%),
    radial-gradient(circle at 98% 50%, rgba(255, 188, 40, .08), transparent 22%),
    #020611;
}

.wsp-stage {
  position: relative;
  width: min(100vw, 2098px);
  aspect-ratio: 2098 / 750;
  min-width: 1050px;
  overflow: hidden;
  background: #030712;
  box-shadow:
    0 0 40px rgba(0, 184, 255, .2),
    0 0 80px rgba(0, 0, 0, .65);
}

.wsp-preview-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.wsp-hotspot {
  position: absolute;
  z-index: 30;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 16px;
  outline: none;
}

.wsp-hotspot:focus-visible {
  box-shadow: 0 0 0 3px rgba(255,255,255,.95), 0 0 22px rgba(0,190,255,.95);
}

.wsp-spin {
  left: 76.8%;
  top: 31.8%;
  width: 20.4%;
  height: 25.3%;
}

.wsp-auto {
  left: 76.8%;
  top: 59.3%;
  width: 20.4%;
  height: 17.3%;
}

.wsp-hold {
  top: 67.3%;
  width: 10.5%;
  height: 10.9%;
}

.wsp-hold-1 { left: 34.0%; }
.wsp-hold-2 { left: 46.4%; }
.wsp-hold-3 { left: 58.9%; }

.wsp-help {
  left: 7.1%;
  bottom: 5.6%;
  width: 5.8%;
  height: 14.2%;
}

.wsp-sound {
  left: 1.2%;
  bottom: 5.6%;
  width: 5.4%;
  height: 14.2%;
}

.wsp-nudge {
  left: 14.0%;
  bottom: 5.6%;
  width: 14.4%;
  height: 14.2%;
}

.wsp-back {
  left: .9%;
  bottom: .4%;
  width: 8.0%;
  height: 2.6%;
  border-radius: 4px;
}

/* Live reel layer. It covers the static reel symbols so the wheels really roll. */
.wsp-live-reels {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.wsp-reel-window {
  position: absolute;
  top: 16.1%;
  width: 10.1%;
  height: 48.7%;
  overflow: hidden;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(0,0,0,.30), transparent 9%, transparent 91%, rgba(0,0,0,.30)),
    radial-gradient(circle at 50% 9%, rgba(255,255,255,.98), rgba(245,248,250,.94) 25%, rgba(218,222,226,.92) 55%, rgba(175,180,186,.92) 100%);
  box-shadow:
    inset 0 0 38px rgba(255,255,255,.34),
    inset 0 0 17px rgba(0,0,0,.56),
    0 0 16px rgba(0,178,255,.24);
}

.wsp-reel-window::before,
.wsp-reel-window::after {
  content: "";
  position: absolute;
  z-index: 6;
  left: 0;
  width: 100%;
  height: 19%;
  pointer-events: none;
}

.wsp-reel-window::before {
  top: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,0));
}

.wsp-reel-window::after {
  bottom: 0;
  background: linear-gradient(0deg, rgba(0,0,0,.22), rgba(255,255,255,0));
}

.wsp-reel-window-1 { left: 34.0%; }
.wsp-reel-window-2 { left: 46.45%; }
.wsp-reel-window-3 { left: 58.95%; }

.wsp-reel-strip {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.wsp-cell {
  width: 100%;
  height: 33.333333%;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 5px 4px rgba(0,0,0,.34));
}

.wsp-stage.is-spinning .wsp-reel-window:not(.is-held) .wsp-reel-strip {
  animation: wspReelRoll .26s linear infinite;
}

.wsp-stage.is-spinning .wsp-reel-window:not(.is-held) .wsp-cell {
  filter: blur(.8px) drop-shadow(0 5px 4px rgba(0,0,0,.38));
}

.wsp-stage.is-spinning .wsp-reel-window-2:not(.is-held) .wsp-reel-strip { animation-duration: .21s; }
.wsp-stage.is-spinning .wsp-reel-window-3:not(.is-held) .wsp-reel-strip { animation-duration: .18s; }

.wsp-reel-window.is-held {
  box-shadow:
    inset 0 0 32px rgba(255,218,70,.34),
    inset 0 0 16px rgba(0,0,0,.55),
    0 0 24px rgba(255,215,70,.55),
    0 0 12px rgba(0,190,255,.4);
}

.wsp-held-badge {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%) scale(.92);
  padding: .18em .62em;
  border: 1px solid rgba(255,235,120,.85);
  border-radius: 999px;
  background: rgba(8, 12, 20, .75);
  color: #ffe56c;
  font-size: clamp(10px, 1vw, 18px);
  font-weight: 900;
  letter-spacing: .12em;
  opacity: 0;
  text-shadow: 0 0 8px rgba(255,205,45,.9);
}

.wsp-reel-window.is-held .wsp-held-badge {
  opacity: 1;
}

.wsp-payline {
  position: absolute;
  z-index: 11;
  left: 31.4%;
  top: 40.45%;
  width: 43.5%;
  height: 1.9%;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.95), transparent 18%),
    linear-gradient(90deg, transparent, rgba(255,244,135,.95) 5%, rgba(255,117,44,1) 49%, rgba(255,244,135,.95) 95%, transparent);
  filter: drop-shadow(0 0 5px rgba(255,230,95,1)) drop-shadow(0 0 10px rgba(255,96,20,.9));
  opacity: .86;
  mix-blend-mode: screen;
}

.wsp-win-glow {
  position: absolute;
  z-index: 12;
  left: 33.4%;
  top: 34.0%;
  width: 38.2%;
  height: 16%;
  border-radius: 22px;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255,244,135,.26), transparent 64%);
  box-shadow: 0 0 38px rgba(255,221,85,.35);
}

.wsp-stage.is-win .wsp-win-glow {
  animation: wspWinGlow 1.1s ease-out;
}

.wsp-dynamic-stat {
  position: absolute;
  z-index: 22;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(2, 7, 18, .97), rgba(6, 18, 38, .95));
  color: #f7fbff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(19px, 2.05vw, 42px);
  font-weight: 900;
  letter-spacing: .02em;
  line-height: 1;
  text-shadow: 0 0 8px rgba(180,230,255,.8);
  pointer-events: none;
}

.wsp-dynamic-credit {
  left: 36.0%;
  top: 85.0%;
  width: 8.3%;
  height: 6.7%;
}

.wsp-dynamic-lastwin {
  left: 52.2%;
  top: 85.0%;
  width: 7.2%;
  height: 6.7%;
}

.wsp-result-banner {
  position: absolute;
  z-index: 24;
  left: 35.2%;
  top: 10.2%;
  width: 29.6%;
  min-height: 4.4%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .35em .9em;
  border: 1px solid rgba(255, 214, 72, .8);
  border-radius: 999px;
  background: rgba(3, 10, 24, .74);
  color: #ffe56c;
  font-size: clamp(12px, 1.15vw, 22px);
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 9px rgba(255, 211, 45, .95);
  box-shadow: 0 0 18px rgba(0, 187, 255, .28), inset 0 0 14px rgba(0, 123, 255, .22);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}

.wsp-result-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.wsp-stage.is-auto::after,
.wsp-stage.is-active-click::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 86% 47%, rgba(255,255,255,.18), transparent 18%);
}

.wsp-stage.is-active-click::after {
  animation: wspFlash .35s ease-out;
}

.wsp-toast {
  position: absolute;
  z-index: 40;
  left: 50%;
  bottom: 3.4%;
  transform: translateX(-50%) translateY(18px);
  max-width: 70%;
  padding: 10px 18px;
  border: 1px solid rgba(255, 210, 80, .75);
  border-radius: 14px;
  background: rgba(2, 8, 20, .92);
  color: #fff;
  font-size: clamp(13px, 1.1vw, 18px);
  line-height: 1.2;
  text-align: center;
  text-shadow: 0 0 10px rgba(0,180,255,.8);
  box-shadow: 0 0 22px rgba(0,170,255,.32), inset 0 0 18px rgba(0,100,255,.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.wsp-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Symbols */
.wsp-symbol {
  position: relative;
  width: min(74%, 118px);
  height: min(74%, 106px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wsp-symbol--bar {
  width: 72%;
  height: 38%;
  border-radius: 7px;
  background: linear-gradient(#242424, #040404);
  border: 2px solid rgba(255, 206, 108, .72);
  box-shadow:
    inset 0 0 12px rgba(255,255,255,.22),
    0 4px 4px rgba(0,0,0,.45);
}

.wsp-symbol--bar span {
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(27px, 3.6vw, 58px);
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1;
  text-shadow: 0 2px 0 #000, 0 0 7px rgba(255,255,255,.85);
}

.wsp-symbol--seven span {
  color: #e31313;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(60px, 7.1vw, 120px);
  font-weight: 900;
  line-height: .9;
  -webkit-text-stroke: clamp(1px, .15vw, 3px) #ffdf42;
  text-shadow: 0 3px 0 #650000, 0 0 9px rgba(255,230,30,.9), 0 0 4px #000;
}

.wsp-fruit {
  position: relative;
  display: block;
}

.wsp-fruit--orange {
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.85), transparent 12%),
    radial-gradient(circle at 42% 42%, #ffcf66 0 11%, transparent 12%),
    radial-gradient(circle at 66% 68%, #c95700, transparent 49%),
    linear-gradient(135deg, #ffe27b, #ff8f08 45%, #d55a00 100%);
  border: 1px solid rgba(126,60,0,.55);
}

.wsp-fruit--orange::before {
  content: "";
  position: absolute;
  right: 16%;
  top: 2%;
  width: 22%;
  height: 13%;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #41a51d, #154d0e);
  transform: rotate(-22deg);
}

.wsp-fruit--lemon {
  width: 78%;
  height: 52%;
  border-radius: 48% 52% 46% 54% / 60% 64% 36% 40%;
  background:
    radial-gradient(circle at 29% 23%, rgba(255,255,255,.8), transparent 12%),
    linear-gradient(135deg, #fff070, #ffc400 52%, #d98100 100%);
  border: 1px solid rgba(125,85,0,.55);
  transform: rotate(-12deg);
}

.wsp-fruit--lemon::after {
  content: "";
  position: absolute;
  right: -4%;
  top: 12%;
  width: 23%;
  height: 18%;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #56b62a, #1a5f14);
  transform: rotate(24deg);
}

.wsp-fruit--plum {
  width: 74%;
  height: 62%;
  border-radius: 52% 48% 48% 52% / 55% 60% 40% 45%;
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.72), transparent 13%),
    radial-gradient(circle at 65% 65%, #3b083e, transparent 53%),
    linear-gradient(135deg, #ba44ff, #751296 48%, #3f0748 100%);
  border: 1px solid rgba(45,0,52,.55);
  transform: rotate(-10deg);
}

.wsp-fruit--plum::before {
  content: "";
  position: absolute;
  right: 4%;
  top: 2%;
  width: 17%;
  height: 9%;
  background: #4e2a10;
  border-radius: 7px;
  transform: rotate(-33deg);
}

.wsp-fruit--cherries {
  width: 76%;
  height: 73%;
}

.wsp-fruit--cherries::before,
.wsp-fruit--cherries::after {
  content: "";
  position: absolute;
  bottom: 9%;
  width: 43%;
  height: 46%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 27% 24%, rgba(255,255,255,.92), transparent 12%),
    radial-gradient(circle at 65% 70%, #7e0000, transparent 45%),
    linear-gradient(135deg, #ff4a42, #ca0000 56%, #850000 100%);
  border: 1px solid rgba(95,0,0,.65);
}

.wsp-fruit--cherries::before { left: 9%; }
.wsp-fruit--cherries::after { right: 8%; }

.wsp-cherry-stem-a,
.wsp-cherry-stem-b {
  position: absolute;
  top: 19%;
  width: 37%;
  height: 38%;
  border-top: 3px solid #315611;
  border-radius: 50%;
}

.wsp-cherry-stem-a { left: 28%; transform: rotate(-47deg); }
.wsp-cherry-stem-b { right: 24%; transform: rotate(29deg); }

.wsp-cherry-leaf {
  position: absolute;
  top: 12%;
  right: 26%;
  width: 24%;
  height: 13%;
  border-radius: 70% 0 70% 0;
  background: linear-gradient(135deg, #47aa23, #123e09);
  transform: rotate(19deg);
}

@keyframes wspReelRoll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-66.6666%); }
}

@keyframes wspFlash {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes wspWinGlow {
  0% { opacity: 0; transform: scaleX(.98); }
  30% { opacity: 1; transform: scaleX(1.01); }
  100% { opacity: 0; transform: scaleX(1); }
}

@media (max-width: 1100px) {
  .wsp-stage {
    min-width: 1000px;
  }
}

/* V3.2: Realistic one-spin HOLD offer, 5 paylines and clearer win display. */
.wsp-hold-status {
  position: absolute;
  z-index: 25;
  left: 34.2%;
  top: 65.0%;
  width: 36.8%;
  min-height: 3.6%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .25em .8em;
  border: 1px solid rgba(255, 215, 85, .82);
  border-radius: 999px;
  background: rgba(4, 12, 25, .82);
  color: #ffe56c;
  font-size: clamp(10px, .95vw, 18px);
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(255, 220, 90, .88);
  box-shadow: inset 0 0 14px rgba(0, 135, 255, .22), 0 0 18px rgba(0, 170, 255, .25);
  pointer-events: none;
}

.wsp-stage:not(.has-hold-offer) .wsp-hold-status {
  color: #b9c9d8;
  border-color: rgba(80, 150, 190, .58);
  background: rgba(1, 7, 17, .74);
  text-shadow: 0 0 8px rgba(0, 180, 255, .5);
}


.wsp-stage.has-hold-offer .wsp-hold-status {
  color: #fff2a6;
  border-color: rgba(255, 226, 95, .95);
  box-shadow: inset 0 0 15px rgba(255, 209, 55, .18), 0 0 22px rgba(255, 209, 55, .25), 0 0 18px rgba(0, 180, 255, .22);
}

.wsp-stage.has-hold-offer .wsp-hotspot.wsp-hold:not(.is-disabled)::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(255, 222, 82, .88);
  box-shadow: 0 0 16px rgba(255, 218, 60, .75), inset 0 0 15px rgba(255, 248, 160, .22);
  animation: wspHoldPulse 1s ease-in-out infinite alternate;
}

@keyframes wspHoldPulse {
  from { opacity: .52; transform: scale(.99); }
  to { opacity: 1; transform: scale(1.02); }
}

.wsp-hotspot.wsp-hold.is-disabled {
  cursor: not-allowed;
}

.wsp-hotspot.wsp-hold.is-disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, .20);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .35);
}

.wsp-hotspot.wsp-hold.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 218, 60, .11);
  box-shadow: 0 0 18px rgba(255, 218, 60, .7), inset 0 0 14px rgba(255, 250, 160, .42);
}

/* V3.3: fruit-machine logic overlays and owner-settings polish */
.wsp-features {
  right: .9%;
  bottom: 5.6%;
  width: 7.7%;
  height: 14.2%;
}

.wsp-dynamic-stat {
  font-size: clamp(18px, 1.75vw, 35px);
  letter-spacing: .01em;
}

.wsp-dynamic-credit {
  left: 37.0%;
  top: 85.25%;
  width: 7.8%;
  height: 6.1%;
}

.wsp-dynamic-lastwin {
  left: 53.0%;
  top: 85.25%;
  width: 6.4%;
  height: 6.1%;
}

.wsp-stage.has-hold-offer .wsp-hotspot.wsp-hold.is-eligible::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px solid rgba(255, 224, 75, .96);
  box-shadow:
    0 0 18px rgba(255, 218, 60, .85),
    0 0 28px rgba(0, 190, 255, .42),
    inset 0 0 14px rgba(255, 248, 160, .22);
  animation: wspHoldPulse 1s ease-in-out infinite alternate;
}

.wsp-stage.has-hold-offer .wsp-hotspot.wsp-hold.is-disabled:not(.is-eligible)::before {
  content: none;
}

.wsp-hotspot.wsp-hold.is-selected::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 3px solid rgba(255, 247, 145, 1);
  box-shadow:
    0 0 24px rgba(255, 220, 60, .95),
    0 0 42px rgba(255, 120, 0, .45),
    inset 0 0 19px rgba(255, 255, 255, .24);
}

.wsp-stage.has-nudge-offer .wsp-nudge::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid rgba(255, 225, 88, .9);
  box-shadow: 0 0 22px rgba(255, 220, 80, .65);
  animation: wspHoldPulse 1s ease-in-out infinite alternate;
}

.wsp-result-banner {
  left: 34.2%;
  top: 9.8%;
  width: 33.0%;
}

.wsp-hold-status {
  left: 33.2%;
  top: 65.35%;
  width: 39.0%;
  min-height: 3.4%;
  font-size: clamp(10px, .82vw, 16px);
}

.wsp-stage.has-hold-offer .wsp-hold-status {
  color: #fff4a8;
  border-color: rgba(255, 225, 92, .98);
  background: rgba(10, 20, 28, .9);
}

@media (max-width: 1100px) {
  .wsp-dynamic-stat { font-size: 22px; }
}

/* V3.4: mindre tekst på spilfladen, renere HOLD-visning og bedre tal-overlays */
.wsp-dynamic-stat {
  background: linear-gradient(180deg, rgba(2, 7, 18, 1), rgba(5, 15, 32, 1));
  box-shadow: inset 0 0 14px rgba(0, 120, 255, .22), 0 0 8px rgba(0,0,0,.55);
  overflow: hidden;
  white-space: nowrap;
}

.wsp-dynamic-credit {
  left: 34.85%;
  top: 84.75%;
  width: 11.15%;
  height: 7.0%;
  justify-content: flex-end;
  padding-right: 1.0%;
}

.wsp-dynamic-lastwin {
  left: 50.65%;
  top: 84.75%;
  width: 9.1%;
  height: 7.0%;
}

.wsp-hold-status {
  left: 39.2%;
  top: 66.35%;
  width: 25.2%;
  min-height: 3.1%;
  max-height: 3.1%;
  padding: .15em .65em;
  font-size: clamp(10px, .78vw, 15px);
  letter-spacing: .08em;
  opacity: 0;
  transform: translateY(4px);
  overflow: hidden;
  white-space: nowrap;
  transition: opacity .16s ease, transform .16s ease;
}

.wsp-stage.has-hold-offer .wsp-hold-status,
.wsp-stage.has-hold-selected .wsp-hold-status,
.wsp-stage.has-nudge-offer .wsp-hold-status,
.wsp-stage.is-spinning .wsp-hold-status {
  opacity: 1;
  transform: translateY(0);
}

.wsp-result-banner {
  left: 38.1%;
  top: 8.9%;
  width: 25.2%;
  min-height: 3.8%;
  padding: .23em .65em;
  font-size: clamp(11px, .82vw, 16px);
  overflow: hidden;
  white-space: nowrap;
}

.wsp-toast {
  bottom: 2.2%;
  max-width: 42%;
  padding: 7px 13px;
  font-size: clamp(12px, .85vw, 15px);
  border-radius: 11px;
}

.wsp-stage.has-hold-offer .wsp-hotspot.wsp-hold.is-eligible::before,
.wsp-hotspot.wsp-hold.is-selected::before {
  inset: -3px;
}

@media (max-width: 1100px) {
  .wsp-dynamic-credit { font-size: 20px; }
  .wsp-dynamic-lastwin { font-size: 20px; }
  .wsp-toast { max-width: 54%; }
}


/* V3.6: manuelt HOLD-tilbud uden auto-hold og uden lange beskeder på selve spillet */
.wsp-hold-status {
  left: 41.1%;
  top: 66.15%;
  width: 21.0%;
  min-height: 2.65%;
  max-height: 2.65%;
  padding: .08em .45em;
  font-size: clamp(9px, .68vw, 13px);
  letter-spacing: .09em;
}

.wsp-result-banner {
  left: 39.4%;
  top: 8.7%;
  width: 22.5%;
  min-height: 3.25%;
  font-size: clamp(10px, .72vw, 14px);
}

.wsp-stage.has-hold-selected .wsp-hotspot.wsp-hold.is-selected::before {
  border-color: rgba(255, 248, 150, 1);
  box-shadow:
    0 0 22px rgba(255, 219, 70, .95),
    0 0 34px rgba(0, 196, 255, .42),
    inset 0 0 16px rgba(255, 255, 255, .22);
}

.wsp-stage.has-hold-offer .wsp-hotspot.wsp-hold.is-eligible:not(.is-selected)::before {
  opacity: .65;
}

/* V3.7: PPP Parkinglot Bonus */
.wsp-symbol--ppp {
  width: 52%;
  height: 48%;
  border-radius: 10px;
  background:
    linear-gradient(145deg, rgba(112, 202, 255, .95), rgba(12, 85, 202, 1) 45%, rgba(2, 22, 85, 1));
  border: 2px solid rgba(166, 226, 255, .9);
  box-shadow:
    inset 0 0 12px rgba(255, 255, 255, .42),
    0 0 18px rgba(0, 180, 255, .72),
    0 5px 6px rgba(0, 0, 0, .42);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wsp-symbol--ppp span {
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(28px, 3.2vw, 64px);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 #001d56, 0 0 12px rgba(255, 255, 255, .8);
}

.wsp-ppp-bonus {
  position: absolute;
  z-index: 60;
  left: 32.7%;
  top: 18.0%;
  width: 38.8%;
  height: 44.0%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(0, 165, 255, .32), rgba(2, 7, 18, .86) 64%, rgba(0, 0, 0, .92));
  border: 2px solid rgba(255, 210, 70, .95);
  border-radius: 22px;
  box-shadow:
    0 0 28px rgba(255, 210, 55, .42),
    0 0 38px rgba(0, 180, 255, .45),
    inset 0 0 32px rgba(0, 100, 210, .35);
  opacity: 0;
  transform: translateY(6px) scale(.98);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.wsp-ppp-bonus.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wsp-ppp-bonus[hidden] {
  display: none;
}

.wsp-ppp-card {
  width: 92%;
  height: 88%;
  border-radius: 18px;
  border: 1px solid rgba(82, 205, 255, .72);
  background:
    linear-gradient(180deg, rgba(7, 20, 42, .96), rgba(2, 8, 18, .98));
  padding: 3.2% 4.2%;
  text-align: center;
  box-shadow: inset 0 0 28px rgba(0, 160, 255, .22);
}

.wsp-ppp-title {
  color: #ffe76b;
  font-size: clamp(24px, 2.4vw, 54px);
  font-weight: 1000;
  letter-spacing: .08em;
  text-shadow: 0 0 14px rgba(255, 225, 80, .85), 0 3px 0 #4b2200;
}

.wsp-ppp-subtitle {
  margin-top: .3em;
  color: #76eaff;
  font-size: clamp(12px, 1vw, 21px);
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wsp-ppp-road {
  position: relative;
  height: 18%;
  margin: 4% auto;
  width: 72%;
  border-radius: 8px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    linear-gradient(180deg, #202a32, #090d12);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
}

.wsp-ppp-road::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.9) 18%, transparent 18%, transparent 34%);
  transform: translateX(-50%);
}

.wsp-ppp-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3.0%;
  margin-top: 4%;
}

.wsp-ppp-pick {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  border: 2px solid rgba(255, 222, 82, .98);
  background: linear-gradient(145deg, #39bdff, #0754c8 52%, #021d63);
  color: #fff;
  font-size: clamp(24px, 2.7vw, 58px);
  font-weight: 1000;
  cursor: pointer;
  text-shadow: 0 2px 0 #001b52, 0 0 12px rgba(255,255,255,.8);
  box-shadow:
    inset 0 0 20px rgba(255,255,255,.32),
    0 0 18px rgba(0, 180, 255, .55),
    0 0 10px rgba(255, 214, 70, .28);
}

.wsp-ppp-pick:hover,
.wsp-ppp-pick:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.42),
    0 0 24px rgba(0, 210, 255, .8),
    0 0 22px rgba(255, 214, 70, .44);
}

.wsp-ppp-pick.is-revealed {
  background: linear-gradient(145deg, #ffe86a, #ff9b0b 58%, #5a2100);
  color: #071326;
  font-size: clamp(14px, 1.55vw, 32px);
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}

.wsp-ppp-note {
  margin-top: 4%;
  color: #eaf7ff;
  font-size: clamp(10px, .82vw, 15px);
  opacity: .9;
}


/* V3.8: tydelig Auto Spin-status og auto-HOLD flow */
.wsp-stage.is-auto .wsp-auto::before {
  content: "AUTO KØRER";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 8%;
  padding: .18em .5em;
  border-radius: 999px;
  border: 1px solid rgba(210, 255, 180, .95);
  background: linear-gradient(180deg, rgba(38, 255, 72, .92), rgba(0, 86, 20, .95));
  color: #fff;
  font-weight: 900;
  font-size: clamp(10px, .85vw, 17px);
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 0 9px rgba(255,255,255,.9), 0 0 14px rgba(0,255,90,.8);
  box-shadow: 0 0 24px rgba(40,255,86,.8), inset 0 0 16px rgba(255,255,255,.22);
  animation: wspAutoPulse 1s ease-in-out infinite alternate;
}

.wsp-stage.is-auto .wsp-auto {
  box-shadow: 0 0 0 3px rgba(80, 255, 110, .72), 0 0 34px rgba(0, 255, 80, .8);
}

.wsp-stage.is-auto.has-hold-selected .wsp-hold-status,
.wsp-stage.is-auto.has-hold-offer .wsp-hold-status {
  color: #dbffb0;
  border-color: rgba(106, 255, 96, .98);
  box-shadow: inset 0 0 15px rgba(72, 255, 86, .22), 0 0 22px rgba(56, 255, 86, .36);
}

@keyframes wspAutoPulse {
  from { opacity: .76; transform: scale(.98); }
  to { opacity: 1; transform: scale(1.02); }
}

/* V4.0: Wimmer Road 40 / Racetrack bonus, star/bell symbols and clearer feature panels */
.wsp-symbol--star span {
  color: #ffdf55;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(62px, 6.4vw, 118px);
  font-weight: 900;
  line-height: .9;
  -webkit-text-stroke: clamp(1px, .12vw, 2px) #6d3200;
  text-shadow: 0 2px 0 #5a2600, 0 0 10px rgba(255,230,90,.95), 0 0 22px rgba(255,150,0,.75);
}

.wsp-symbol--bell span {
  font-size: clamp(46px, 4.7vw, 86px);
  filter: drop-shadow(0 0 7px rgba(255,221,70,.75)) drop-shadow(0 4px 2px rgba(0,0,0,.45));
}

.wsp-road-panel,
.wsp-trail-panel {
  position: absolute;
  z-index: 23;
  width: 6.2%;
  min-height: 3.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  border: 1px solid rgba(255, 214, 70, .72);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(3,12,24,.92), rgba(1,6,16,.92));
  box-shadow: inset 0 0 12px rgba(0,165,255,.22), 0 0 12px rgba(255,210,60,.18);
  color: #eaf8ff;
  font-weight: 900;
  font-size: clamp(9px, .70vw, 13px);
  letter-spacing: .05em;
  pointer-events: none;
  text-transform: uppercase;
}

.wsp-road-panel span,
.wsp-trail-panel span { color: #67e7ff; }
.wsp-road-panel strong,
.wsp-trail-panel strong { color: #ffe56c; text-shadow: 0 0 8px rgba(255,210,60,.85); }
.wsp-road-panel { left: 19.6%; top: 79.9%; }
.wsp-trail-panel { left: 20.0%; top: 84.0%; }

.wsp-stage.is-road-active .wsp-road-panel {
  border-color: rgba(72,255,118,.95);
  box-shadow: inset 0 0 14px rgba(65,255,110,.22), 0 0 18px rgba(65,255,110,.38);
}

.wsp-road-bonus {
  position: absolute;
  z-index: 70;
  left: 30.4%;
  top: 13.0%;
  width: 45.2%;
  height: 59.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 42%, rgba(0, 160, 255, .28), rgba(1, 6, 17, .86) 64%, rgba(0,0,0,.94));
  border: 2px solid rgba(255, 214, 72, .95);
  border-radius: 24px;
  box-shadow: 0 0 30px rgba(255, 210, 55, .36), 0 0 48px rgba(0, 188, 255, .42), inset 0 0 38px rgba(0, 110, 230, .35);
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.985);
  transition: opacity .20s ease, transform .20s ease;
}

.wsp-road-bonus.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.wsp-road-bonus[hidden] { display: none; }

.wsp-road-card {
  position: relative;
  width: 94%;
  height: 90%;
  border: 1px solid rgba(91, 216, 255, .72);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(8, 22, 42, .98), rgba(2, 8, 18, .99));
  padding: 2.7% 3.2%;
  text-align: center;
  box-shadow: inset 0 0 30px rgba(0, 160, 255, .24);
  overflow: hidden;
}

.wsp-road-card::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle at 50% 80%, rgba(255,210,50,.10), transparent 24%), radial-gradient(circle at 18% 20%, rgba(0,195,255,.10), transparent 20%);
  pointer-events: none;
}

.wsp-road-title {
  position: relative;
  z-index: 2;
  color: #ffe66c;
  font-size: clamp(23px, 2.2vw, 46px);
  font-weight: 1000;
  letter-spacing: .08em;
  text-shadow: 0 0 14px rgba(255, 225, 70, .82), 0 3px 0 #3d1c00;
}

.wsp-road-subtitle {
  position: relative;
  z-index: 2;
  margin-top: .25em;
  color: #75eaff;
  font-size: clamp(11px, .95vw, 18px);
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wsp-road-track {
  position: relative;
  z-index: 2;
  margin: 3.2% auto 2.4%;
  width: 93%;
  height: 63%;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 1.2%;
  border-radius: 18px;
  padding: 1.4%;
  background: linear-gradient(180deg, #162733, #090e15);
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: inset 0 0 26px rgba(0,0,0,.75), 0 0 20px rgba(0,185,255,.18);
}

.wsp-road-track::before {
  content: "";
  position: absolute;
  inset: 45% 4%;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.9), rgba(255,255,255,.9) 18px, transparent 18px, transparent 34px);
  opacity: .24;
  pointer-events: none;
}

.wsp-road-cell {
  position: relative;
  min-width: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(10,34,54,.96), rgba(3,12,23,.98));
  border: 1px solid rgba(70, 190, 255, .42);
  color: #e8fbff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 10px rgba(0,130,255,.12);
  overflow: hidden;
}

.wsp-road-cell span {
  font-size: clamp(8px, .58vw, 12px);
  opacity: .72;
  line-height: 1;
}

.wsp-road-cell strong {
  margin-top: .15em;
  font-size: clamp(8px, .66vw, 14px);
  line-height: 1;
  letter-spacing: .04em;
}

.wsp-road-cell--credit strong,
.wsp-road-cell--miniJackpot strong { color: #ffe46d; }
.wsp-road-cell--nudge strong { color: #70eaff; }
.wsp-road-cell--flash strong { color: #ff6185; }
.wsp-road-cell--superHold strong,
.wsp-road-cell--holdFeature strong { color: #90ff75; }
.wsp-road-cell--empty { opacity: .78; }
.wsp-road-cell--ppp strong { color: #85b8ff; }

.wsp-road-cell.is-current {
  border-color: rgba(255, 230, 90, .98);
  box-shadow: 0 0 18px rgba(255,220,70,.52), inset 0 0 18px rgba(255,220,70,.18);
}

.wsp-road-cell.is-hit {
  animation: wspRoadHit 1.1s ease-in-out 2;
}

.wsp-road-car {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(22px, 2.0vw, 42px);
  filter: drop-shadow(0 0 10px rgba(255,230,80,.9)) drop-shadow(0 0 14px rgba(0,185,255,.95));
  transition: left .12s linear, top .12s linear;
  pointer-events: none;
}

.wsp-road-car.is-driving { animation: wspRoadCarBounce .22s ease-in-out infinite alternate; }

.wsp-road-status {
  position: relative;
  z-index: 2;
  min-height: 8%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 215, 70, .72);
  border-radius: 999px;
  background: rgba(4, 12, 25, .86);
  color: #fff0a8;
  font-size: clamp(11px, .88vw, 17px);
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(255, 225, 90, .8);
}

.wsp-ppp-bonus .wsp-ppp-grid { display: none; }
.wsp-ppp-bonus .wsp-ppp-road { height: 30%; margin-top: 6%; }
.wsp-ppp-bonus .wsp-ppp-road::after {
  content: "🚗";
  position: absolute;
  left: 6%;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(20px, 2vw, 38px);
  animation: wspPppCar 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 10px rgba(255,230,80,.9));
}

@keyframes wspRoadHit {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); background: linear-gradient(180deg, rgba(255,235,105,.98), rgba(180,96,0,.96)); color: #071327; }
}

@keyframes wspRoadCarBounce {
  from { transform: translate(-50%, -50%) scale(.98); }
  to { transform: translate(-50%, -57%) scale(1.04); }
}

@keyframes wspPppCar {
  from { left: 8%; }
  to { left: 82%; }
}

@media (max-width: 1100px) {
  .wsp-road-panel,
  .wsp-trail-panel { font-size: 9px; }
  .wsp-road-title { font-size: 23px; }
  .wsp-road-cell strong { font-size: 8px; }
}

/* V4.2: synlig NUDGE-bank, gevinsttabel og tydelig Road 40-udbetaling */
.wsp-dynamic-nudge {
  left: 17.0%;
  top: 84.75%;
  width: 7.8%;
  height: 7.0%;
  justify-content: center;
  gap: .25em;
  color: #8ff2ff;
  font-size: clamp(10px, .88vw, 17px);
  letter-spacing: .06em;
  text-shadow: 0 0 8px rgba(0, 220, 255, .88);
}

.wsp-dynamic-nudge span {
  color: #ffe56c;
  font-size: 1.25em;
  text-shadow: 0 0 9px rgba(255, 220, 80, .9);
}

.wsp-feature-note {
  position: absolute;
  z-index: 23;
  left: 31.8%;
  top: 79.05%;
  width: 42.0%;
  min-height: 3.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .2em .8em;
  border-radius: 999px;
  border: 1px solid rgba(105, 220, 255, .7);
  background: rgba(2, 9, 21, .82);
  color: #eafcff;
  font-size: clamp(9px, .70vw, 14px);
  font-weight: 900;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0, 185, 255, .75);
  box-shadow: inset 0 0 13px rgba(0, 160, 255, .20), 0 0 12px rgba(0, 185, 255, .18);
  pointer-events: none;
}

.wsp-stage.is-nudge-select .wsp-hold-status {
  opacity: 1;
  transform: translateY(0);
  color: #8ff2ff;
  border-color: rgba(105, 230, 255, .95);
  background: rgba(3, 16, 32, .94);
  box-shadow: inset 0 0 16px rgba(0, 190, 255, .25), 0 0 24px rgba(0, 190, 255, .45);
}

.wsp-stage.is-nudge-select .wsp-hotspot.wsp-hold.is-nudge-target::before {
  content: "NUDGE";
  position: absolute;
  inset: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  border: 2px solid rgba(120, 240, 255, .98);
  background: rgba(0, 130, 210, .16);
  color: #ffffff;
  font-size: clamp(10px, .82vw, 16px);
  font-weight: 1000;
  letter-spacing: .08em;
  text-shadow: 0 0 10px rgba(0, 220, 255, 1);
  box-shadow: 0 0 22px rgba(0, 220, 255, .86), inset 0 0 15px rgba(255,255,255,.22);
  animation: wspHoldPulse .8s ease-in-out infinite alternate;
}

.wsp-paytable-modal {
  position: absolute;
  z-index: 90;
  left: 25.2%;
  top: 10.4%;
  width: 58.8%;
  height: 70.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2%;
  border-radius: 24px;
  background: radial-gradient(circle at 50% 35%, rgba(0, 180, 255, .26), rgba(2, 7, 18, .92) 65%, rgba(0,0,0,.96));
  border: 2px solid rgba(255, 218, 76, .95);
  box-shadow: 0 0 34px rgba(255, 218, 76, .36), 0 0 50px rgba(0, 190, 255, .42), inset 0 0 42px rgba(0, 120, 255, .28);
  opacity: 0;
  transform: translateY(8px) scale(.985);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.wsp-paytable-modal.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.wsp-paytable-modal[hidden] { display: none; }

.wsp-paytable-card {
  position: relative;
  width: 96%;
  height: 94%;
  padding: 2.6% 3.0%;
  border-radius: 20px;
  border: 1px solid rgba(100, 220, 255, .72);
  background: linear-gradient(180deg, rgba(8, 23, 45, .98), rgba(2, 8, 18, .99));
  box-shadow: inset 0 0 30px rgba(0, 170, 255, .22);
  color: #fff;
}

.wsp-paytable-close {
  position: absolute;
  right: 2.0%;
  top: 2.0%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 230, 120, .85);
  background: linear-gradient(180deg, #ff596e, #700015);
  color: #fff;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(255, 60, 90, .45);
}

.wsp-paytable-title {
  margin-bottom: 2.3%;
  color: #ffe66c;
  font-size: clamp(20px, 2.0vw, 42px);
  font-weight: 1000;
  letter-spacing: .08em;
  text-align: center;
  text-shadow: 0 0 14px rgba(255, 225, 70, .82), 0 3px 0 #3d1c00;
}

.wsp-paytable-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2%;
  height: 78%;
}

.wsp-paytable-grid section {
  min-width: 0;
  padding: 4.2% 4.5%;
  border-radius: 16px;
  border: 1px solid rgba(100, 220, 255, .48);
  background: rgba(2, 10, 24, .78);
  box-shadow: inset 0 0 18px rgba(0, 160, 255, .16);
}

.wsp-paytable-grid h3 {
  margin: 0 0 .7em;
  color: #76eaff;
  font-size: clamp(14px, 1.15vw, 23px);
  letter-spacing: .07em;
  text-transform: uppercase;
}

.wsp-paytable-grid p {
  display: flex;
  justify-content: space-between;
  gap: .8em;
  margin: .42em 0;
  padding-bottom: .42em;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: clamp(10px, .82vw, 16px);
  line-height: 1.15;
}

.wsp-paytable-grid b {
  color: #ffe56c;
  white-space: nowrap;
}

.wsp-paytable-grid span {
  color: #eafcff;
  text-align: right;
}

.wsp-road-status {
  padding-left: .7em;
  padding-right: .7em;
}

@media (max-width: 1100px) {
  .wsp-paytable-close { width: 30px; height: 30px; font-size: 23px; }
  .wsp-feature-note { font-size: 9px; }
  .wsp-dynamic-nudge { font-size: 11px; }
}


/* V4.3: Små symbolstriber mellem hjulene, så bonus-/feature-symboler ikke kun ligger i topbjælken. */
.wsp-reel-guides {
  position: absolute;
  inset: 0;
  z-index: 13;
  pointer-events: none;
}

.wsp-reel-guide-strip {
  position: absolute;
  top: 16.2%;
  width: 1.45%;
  height: 48.5%;
  border-radius: 999px;
  border: 1px solid rgba(180, 220, 255, .86);
  background:
    linear-gradient(180deg, rgba(255,255,255,.80), rgba(234,241,248,.94) 16%, rgba(218,225,234,.94) 84%, rgba(255,255,255,.75)),
    linear-gradient(90deg, rgba(0,0,0,.28), transparent 24%, transparent 76%, rgba(0,0,0,.30));
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.72),
    inset 0 0 12px rgba(0,0,0,.34),
    0 0 10px rgba(0,185,255,.40),
    0 0 5px rgba(255,213,69,.26);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: .38% .08%;
  overflow: hidden;
}

.wsp-reel-guide-left { left: 31.95%; }
.wsp-reel-guide-mid1 { left: 44.55%; }
.wsp-reel-guide-mid2 { left: 57.05%; }
.wsp-reel-guide-right { left: 69.55%; }

.wsp-reel-guide-strip::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 9%;
  bottom: 9%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(0,100,180,.45), transparent);
  opacity: .55;
}

.wsp-reel-guide-strip span {
  position: relative;
  z-index: 2;
  min-width: 78%;
  min-height: 8.2%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: #10213a;
  font-size: clamp(8px, .74vw, 15px);
  font-weight: 1000;
  line-height: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,.75);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

.wsp-reel-guide-strip .wsp-guide-arrow {
  color: #d99a00;
  font-size: clamp(8px, .64vw, 13px);
}

.wsp-reel-guide-strip .wsp-guide-bar {
  min-width: 90%;
  border-radius: 4px;
  background: linear-gradient(#2d2d2d, #020202);
  color: #fff;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(5px, .43vw, 9px);
  letter-spacing: .03em;
  text-shadow: 0 1px 0 #000, 0 0 4px rgba(255,255,255,.65);
}

.wsp-reel-guide-strip .wsp-guide-seven {
  color: #e01414;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(11px, .90vw, 20px);
  -webkit-text-stroke: .5px #ffdf45;
  text-shadow: 0 1px 0 #5b0000, 0 0 4px rgba(255,230,60,.8);
}

.wsp-reel-guide-strip .wsp-guide-ppp {
  width: 78%;
  aspect-ratio: 1 / .88;
  border-radius: 4px;
  border: 1px solid rgba(202,234,255,.92);
  background: linear-gradient(145deg, #69d7ff, #0c63d5 52%, #05205f);
  color: #fff;
  text-shadow: 0 1px 0 #001a54, 0 0 6px rgba(255,255,255,.85);
  box-shadow: inset 0 0 6px rgba(255,255,255,.3), 0 0 8px rgba(0,180,255,.55);
}

.wsp-reel-guide-strip .wsp-guide-star {
  color: #ffd94d;
  font-size: clamp(10px, .82vw, 18px);
  -webkit-text-stroke: .4px #7a3500;
  text-shadow: 0 1px 0 #623000, 0 0 7px rgba(255,210,50,.9);
}

.wsp-stage.is-spinning .wsp-reel-guide-strip {
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.74),
    inset 0 0 12px rgba(0,0,0,.34),
    0 0 14px rgba(0,200,255,.55),
    0 0 9px rgba(255,213,69,.38);
}

.wsp-stage.has-hold-offer .wsp-reel-guide-strip,
.wsp-stage.is-road-active .wsp-reel-guide-strip {
  border-color: rgba(255, 226, 82, .96);
  box-shadow:
    inset 0 0 10px rgba(255,255,255,.74),
    inset 0 0 12px rgba(0,0,0,.34),
    0 0 16px rgba(255,215,55,.50),
    0 0 13px rgba(0,185,255,.50);
}

@media (max-width: 820px) {
  .wsp-reel-guide-strip {
    width: 1.7%;
    border-radius: 12px;
  }
  .wsp-reel-guide-left { left: 31.75%; }
  .wsp-reel-guide-mid1 { left: 44.38%; }
  .wsp-reel-guide-mid2 { left: 56.9%; }
  .wsp-reel-guide-right { left: 69.36%; }
}