/* Shared slot cabinet geometry. Artwork contains no changing words or numbers. */
[data-theme][data-viewport] {
  --slot-shell-art: none;
  --slot-ink: #06131e;
  --slot-gold: #e9b952;
  --slot-light: #ffe7a2;
}

/* Short landscape devices keep the entire cabinet, including SPIN, in view. */
@media (min-width: 701px) and (max-height: 600px) {
  body:has([data-theme][data-viewport]) [class*="socialGameDisclaimer"] { display: none !important; }
  body:has([data-theme][data-viewport]) [class*="practiceHeader"] {
    min-height: 38px !important;
    height: 38px !important;
    padding-block: 2px !important;
  }
  [data-theme][data-viewport] {
    width: min(100%, calc((100dvh - 50px) * 1.5)) !important;
    max-height: calc(100dvh - 50px) !important;
  }
}

body:has([data-theme][data-viewport]) .cb-player-cta { display: none !important; }

@media (min-width: 701px) {
  [data-theme][data-viewport] {
    width: min(100%, calc((100dvh - 230px) * 1.5));
    max-height: calc(100dvh - 230px);
    border: 0;
    background: transparent;
    box-shadow: 0 18px 54px #000b;
  }
  :fullscreen [data-theme][data-viewport] {
    width: min(100%, calc((100dvh - 92px) * 1.5));
    max-height: calc(100dvh - 92px);
  }
  [data-theme][data-viewport]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: var(--slot-shell-art) center / 100% 100% no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0 25%, #000 29%);
    mask-image: linear-gradient(to bottom, transparent 0 25%, #000 29%);
  }
  [data-theme][data-viewport] [class*="sceneLayer"] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  }
  [data-theme][data-viewport] [class*="logoPlate"] {
    left: 24% !important; top: 0 !important;
    width: 52% !important; height: 24% !important;
    z-index: 11;
  }
  [data-theme][data-viewport] [class*="jackpot"] { z-index: 11; }
  [data-theme][data-viewport] [class*="jackpot"][data-tier="grand"] { left: 4% !important; top: 3% !important; width: 25% !important; height: 10% !important; }
  [data-theme][data-viewport] [class*="jackpot"][data-tier="minor"] { left: 5.5% !important; top: 13% !important; width: 23% !important; height: 8% !important; }
  [data-theme][data-viewport] [class*="jackpot"][data-tier="major"] { left: 71% !important; top: 3% !important; width: 25% !important; height: 10% !important; }
  [data-theme][data-viewport] [class*="jackpot"][data-tier="mini"] { left: 71.5% !important; top: 13% !important; width: 23% !important; height: 8% !important; }
  [data-theme][data-viewport] [class*="linePlaque"] {
    visibility: visible;
    top: 42% !important;
    width: 6% !important;
    height: 15% !important;
    z-index: 11;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    color: var(--slot-light);
    text-shadow: 0 2px 2px #1a0800;
    left: 2.1% !important;
  }
  [data-theme][data-viewport] [class*="linePlaque"] + [class*="linePlaque"] { left: 91.9% !important; }
  [data-theme][data-viewport] [class*="linePlaque"] strong {
    font-size: clamp(17px, 3.45cqw, 40px);
    line-height: 1;
  }
  [data-theme][data-viewport] [class*="linePlaque"] span {
    font-size: clamp(8px, 1.32cqw, 16px);
    line-height: 1;
  }
  [data-theme][data-viewport] [class*="machineStatus"] { display: none; }
  [data-theme][data-viewport] [class*="reelFrame"] {
    left: 9% !important; top: 25% !important;
    width: 82% !important; height: 54% !important;
    padding: 0 !important; border: 0 !important;
    border-radius: 0 !important; box-shadow: none !important;
    background: transparent !important;
  }
  [data-theme][data-viewport] [class*="reelFrame"]::before { display: none !important; }
  [data-theme][data-viewport] [class*="reelInner"] { background-size: 100% 100%; background-color: transparent; }

  /* The control bar uses the same rects for every theme. Artwork only paints the shell. */
  [data-theme][data-viewport] [class*="hud"] {
    left: 0 !important; top: 82% !important;
    width: 100% !important; height: 17% !important;
    display: block !important; padding: 0 !important;
    background: transparent !important; background-image: none !important;
    border: 0 !important; box-shadow: none !important;
  }
  [data-theme][data-viewport] [class*="hud"] > * {
    position: absolute !important;
    margin: 0 !important; min-height: 0 !important;
    padding: 0 !important; border: 0 !important;
    background: transparent !important; background-image: none !important;
    box-shadow: none !important; border-radius: 0 !important;
    color: var(--slot-light) !important;
  }
  [data-theme][data-viewport] [class*="hud"] button:hover:not(:disabled) { filter: brightness(1.25); transform: none; }
  [data-theme][data-viewport] [class*="hud"] button:focus-visible { outline: 2px solid #fff0aa; outline-offset: 2px; }
  [data-theme][data-viewport] [class*="menuButton"] { left: .5%; top: 23%; width: 7%; height: 70%; }
  [data-theme][data-viewport] [class*="menuButton"] > * { opacity: 0; }

  [data-theme][data-viewport] [class*="balanceModule"] { left: 8.5%; top: 26%; width: 12.5%; height: 65%; display: flex; align-items: center; justify-content: center; padding: 0 !important; }
  [data-theme][data-viewport] [class*="balanceModule"] span { display: block !important; color: var(--slot-gold); font-size: clamp(8px,1cqw,12px); text-align: center; }
  [data-theme][data-viewport] [class*="balanceModule"] span svg { display: none; }
  [data-theme][data-viewport] [class*="balanceModule"] strong { font-size: clamp(12px,1.9cqw,27px); color: var(--slot-light); }

  [data-theme][data-viewport] [class*="betModule"] { left: 22%; top: 25%; width: 15%; height: 66%; display: block; }
  [data-theme][data-viewport] [class*="betModule"] > span { display: block !important; position: absolute; inset: 0 0 auto; text-align: center; color: var(--slot-gold); font-size: clamp(8px,1.05cqw,12px); }
  [data-theme][data-viewport] [class*="betModule"] > div { position: absolute; left: 0; right: 0; bottom: 4%; height: 62%; display: grid; grid-template-columns: 24% 52% 24%; gap: 0; }
  [data-theme][data-viewport] [class*="betModule"] > div button { border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; }
  [data-theme][data-viewport] [class*="betModule"] > div button svg { opacity: 0; }
  [data-theme][data-viewport] [class*="betModule"] > div strong { align-self: center; overflow: visible; text-overflow: clip; white-space: nowrap; font-size: clamp(11px,1.65cqw,23px); color: var(--slot-light); }
  [data-theme][data-viewport] [class*="maxBet"] { position: absolute !important; right: 0; top: -8%; width: 25%; height: 23%; border: 1px solid var(--slot-gold) !important; border-radius: 3px !important; background: #09141c !important; color: var(--slot-gold) !important; font-size: clamp(8px,.85cqw,10px) !important; }

  [data-theme][data-viewport] [class*="winModule"] { left: 38.5%; top: 24%; width: 23.5%; height: 68%; display: flex; align-items: center; justify-content: center; }
  [data-theme][data-viewport] [class*="winModule"] span { display: block !important; color: var(--slot-gold); font-size: clamp(8px,1cqw,13px); }
  [data-theme][data-viewport] [class*="winModule"] strong { color: #ffd35c; font-size: clamp(14px,2.1cqw,31px); }

  [data-theme][data-viewport] [class*="autoButton"] { left: 63%; top: 25%; width: 13%; height: 66%; }
  [data-theme][data-viewport] [class*="autoButton"] svg { opacity: 0 !important; }
  [data-theme][data-viewport] [class*="autoButton"] span { display: block !important; position: absolute; bottom: 4%; color: var(--slot-light); font-size: clamp(8px,.9cqw,12px); }
  [data-theme][data-viewport] [class*="spinButton"] { left: 76%; top: -13%; width: 13.5%; height: 112%; aspect-ratio: 1; overflow: visible; }
  [data-theme][data-viewport] [class*="spinButton"] svg, [data-theme][data-viewport] [class*="spinButton"] small { display: none !important; }
  [data-theme][data-viewport] [class*="spinButton"] strong { position: absolute; bottom: 5%; left: 0; width: 100%; color: #ffe48e; font-size: clamp(10px,1.25cqw,17px); text-shadow: 0 2px 3px #12370a; }
  [data-theme][data-viewport] [class*="turboButton"] { left: 91%; top: 23%; width: 8%; height: 70%; }
  [data-theme][data-viewport] [class*="turboButton"] svg { opacity: 0; }
  [data-theme][data-viewport] [class*="turboButton"] span { position: absolute; bottom: 2%; font-size: clamp(8px,.82cqw,11px); }
  [data-theme][data-viewport] [class*="settingsButton"] { right: .8%; top: -24%; width: 3.2%; height: 30%; border-radius: 50% !important; border: 1px solid var(--slot-gold) !important; background: #071421 !important; }
  [data-theme][data-viewport] [class*="settingsButton"] svg { opacity: 1; width: 58%; height: 58%; color: var(--slot-light); }
  [data-theme][data-viewport] [class*="settingsButton"] span { display: none; }
}

/* Pirate uses the existing portrait composition, fitted above the app dock. */
@media (max-width: 700px) and (orientation: portrait) {
  body:has([data-theme][data-viewport="mobilePortrait"]) [class*="mobileLandscapeHint"] {
    display: none !important;
  }
  [data-theme][data-viewport="mobilePortrait"] {
    aspect-ratio: auto !important;
    height: max(480px, calc(100dvh - 315px)) !important;
    max-height: none !important;
  }
  [data-theme][data-viewport="mobilePortrait"] [class*="machineStatus"] span:last-child {
    display: none;
  }
  /* The footer repeats the title and hardcodes LINES; the live side plaques carry the configured label. */
  [data-theme][data-viewport="mobilePortrait"] [class*="machineStatus"] {
    display: none !important;
  }
  [data-theme][data-viewport="mobilePortrait"] [class*="autoButton"][data-active="true"],
  [data-theme][data-viewport="mobilePortrait"] [class*="turboButton"][data-active="true"] {
    outline: 2px solid #b5ffcc;
    outline-offset: -3px;
    filter: drop-shadow(0 0 8px #7cffb8);
  }
}

/* V4: the stage owns one continuous background; the cabinet remains transparent. */
@media (min-width: 701px) {
  [data-theme][data-viewport] {
    background: transparent !important;
  }
  [data-theme][data-viewport]::before,
  [data-theme][data-viewport] [class*="sceneLayer"] {
    display: none !important;
  }

  /* The original MAX inherited a 42px minimum and covered the plus control. */
  [data-theme][data-viewport] [class*="maxBet"] {
    top: -21% !important;
    right: -1% !important;
    width: 34% !important;
    height: 35% !important;
    min-height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2;
    border: 1px solid #e7b451 !important;
    border-radius: 5px !important;
    background: linear-gradient(#263241, #07111b) !important;
    box-shadow: inset 0 1px 0 #ffe2a177, 0 3px 7px #000a !important;
    color: #ffe3a1 !important;
    font-size: clamp(9px, .9cqw, 12px) !important;
    font-weight: 800 !important;
  }

  /* These words and states are live UI, rather than decoration baked into art. */
  [data-theme][data-viewport] [class*="autoButton"] span {
    opacity: 1 !important;
    inset-inline: 0;
    bottom: 2% !important;
    text-align: center;
    font-size: clamp(9px, 1cqw, 13px) !important;
    text-shadow: 0 2px 3px #000;
  }
  [data-theme][data-viewport] [class*="turboButton"] span {
    inset-inline: 0;
    bottom: 1% !important;
    text-align: center;
    font-size: clamp(9px, .9cqw, 12px) !important;
    text-shadow: 0 2px 3px #000;
  }
  [data-theme][data-viewport] [class*="autoButton"][data-active="true"],
  [data-theme][data-viewport] [class*="turboButton"][data-active="true"] {
    filter: drop-shadow(0 0 8px #7cffb8);
  }
  [data-theme][data-viewport] [class*="autoButton"][data-active="true"] span,
  [data-theme][data-viewport] [class*="turboButton"][data-active="true"] span {
    color: #baffd5 !important;
  }

  /* Settings is a brass control attached to the outer rail. */
  [data-theme][data-viewport] [class*="settingsButton"] {
    top: -60% !important;
    right: .8% !important;
    width: clamp(38px, 4.2cqw, 50px) !important;
    height: clamp(38px, 4.2cqw, 50px) !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border: 2px solid #ebbb5c !important;
    border-radius: 50% !important;
    background: radial-gradient(circle at 35% 24%, #39465a, #101c2c 54%, #061018 78%) !important;
    box-shadow: inset 0 1px 1px #fff0b6aa, inset 0 -3px 3px #0009, 0 3px 0 #57330b, 0 5px 10px #000b !important;
  }
  [data-theme][data-viewport] [class*="settingsButton"] svg {
    width: 52% !important;
    height: 52% !important;
    stroke-width: 2.2;
  }
}

/* Dialogs belong above the fixed site chrome. Keep their heading and close action visible. */
body:has([data-theme][data-viewport]) [class*="slotAdvancedPanel"] {
  z-index: 5000 !important;
  top: 112px !important;
  transform: translateX(-50%) !important;
  max-height: calc(100dvh - 126px) !important;
  overflow: auto !important;
}
body:has([data-theme][data-viewport]) [class*="practiceShell"]:has([role="dialog"]) [class*="practiceHeader"] {
  visibility: hidden !important;
}

/* Auto play is a floating decision panel, not a second flex column that shrinks the game. */
body:has([data-theme][data-viewport]) [class*="slotAutoPanel"] {
  position: fixed !important;
  z-index: 5000 !important;
  left: 50% !important;
  top: 50% !important;
  width: min(560px, calc(100vw - 32px)) !important;
  max-height: calc(100dvh - 132px) !important;
  overflow: auto !important;
  transform: translate(-50%, -50%) !important;
  box-shadow: 0 0 0 100vmax #000b, 0 24px 70px #000 !important;
}

@media (min-width: 701px) {
  [data-theme][data-viewport] [class*="balanceModule"] span,
  [data-theme][data-viewport] [class*="winModule"] span { font-size: clamp(10px, 1.25cqw, 16px) !important; }
  [data-theme][data-viewport] [class*="balanceModule"] strong { font-size: clamp(16px, 2.5cqw, 33px) !important; }
  [data-theme][data-viewport] [class*="betModule"] > div strong { font-size: clamp(15px, 2.35cqw, 30px) !important; }
  [data-theme][data-viewport] [class*="winModule"] strong { font-size: clamp(21px, 3.8cqw, 49px) !important; }

  /* Keep the bet label and MAX on separate halves of their shared top row. */
  [data-theme][data-viewport] [class*="betModule"] > span {
    inset: 0 auto auto 1% !important;
    width: 68% !important;
    white-space: nowrap;
    font-size: clamp(8px, .85cqw, 11px) !important;
  }
}

@media (max-width: 700px) {
  body:has([data-theme][data-viewport]) [class*="slotAdvancedPanel"] {
    top: 88px !important;
    max-height: calc(100dvh - 164px) !important;
    width: calc(100vw - 16px) !important;
  }
  body:has([data-theme][data-viewport]) [class*="slotAutoPanel"] {
    top: 48% !important;
    max-height: calc(100dvh - 150px) !important;
  }
}

@media (min-width: 701px) and (max-height: 600px) {
  body:has([data-theme][data-viewport]) [class*="slotAdvancedPanel"] {
    top: 12px !important;
    max-height: calc(100dvh - 24px) !important;
  }
}

/* v8: keep dynamic slot controls inside the Pirate cabinet's painted brass insets. */
@media (min-width: 701px) {
  [data-theme][data-viewport] [class*="betModule"] > span {
    inset: 2% auto auto 2% !important;
    width: 58% !important;
    text-align: center !important;
    line-height: 1 !important;
    font-size: clamp(7px, .76cqw, 10px) !important;
  }

  [data-theme][data-viewport] [class*="maxBet"] {
    top: 1% !important;
    right: 2% !important;
    width: 27% !important;
    height: 30% !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: clamp(7px, .72cqw, 9px) !important;
    line-height: 1 !important;
  }

  [data-theme][data-viewport] [class*="autoButton"] span {
    bottom: 14% !important;
    font-size: clamp(8px, .82cqw, 11px) !important;
    line-height: 1 !important;
  }

  [data-theme][data-viewport] [class*="turboButton"] span {
    bottom: 8% !important;
    font-size: clamp(8px, .78cqw, 10px) !important;
    line-height: 1 !important;
  }

  /* Settings remains easy to reach but sits in the open upper-right header area,
     rather than floating above the lower control rail or covering TURBO. */
  [data-theme][data-viewport] [class*="settingsButton"] {
    top: -430% !important;
    right: .8% !important;
    width: clamp(32px, 3.5cqw, 40px) !important;
    height: clamp(32px, 3.5cqw, 40px) !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}

/* v12: fit the desktop cabinet and keep live words inside the painted insets.
   Short landscape keeps the smaller, independently tuned controls above. */
@media (min-width: 701px) and (min-height: 601px) {
  [data-theme][data-viewport] {
    width: 100% !important;
    max-height: none !important;
  }

}

/* Phaser's 1000:620 canvas was letterboxed to 71% of the painted grid.
   Fit five reel centres to five brass cells at all desktop heights. */
@media (min-width: 701px) {
  [data-theme][data-viewport] [data-slot-factory="pirate"] canvas {
    display: block !important;
    width: 89.5% !important;
    height: 100% !important;
    margin: 0 0 0 5.25% !important;
  }
}

@media (min-width: 701px) and (min-height: 601px) {
  [data-theme][data-viewport] [class*="betModule"] > span {
    inset: 7% auto auto 3% !important;
    width: 59% !important;
    font-size: clamp(10px, 1cqw, 14px) !important;
  }

  [data-theme][data-viewport] [class*="maxBet"] {
    top: 5% !important;
    right: 3% !important;
    width: 26% !important;
    height: 26% !important;
    font-size: clamp(10px, .9cqw, 12px) !important;
  }

  [data-theme][data-viewport] [class*="autoButton"] {
    left: 64.2% !important;
    width: 11.8% !important;
  }
  [data-theme][data-viewport] [class*="autoButton"] span {
    inset: 37% 4% auto 38% !important;
    width: 58% !important;
    height: auto !important;
    font-size: clamp(10px, 1.05cqw, 15px) !important;
    line-height: 1.08 !important;
    text-align: center !important;
    overflow: hidden !important;
  }

  [data-theme][data-viewport] [class*="turboButton"] span {
    bottom: 10% !important;
    font-size: clamp(9px, .95cqw, 13px) !important;
  }

  [data-theme][data-viewport] [class*="spinButton"] strong {
    bottom: 16% !important;
  }

  [data-theme][data-viewport] [class*="balanceModule"] strong,
  [data-theme][data-viewport] [class*="betModule"] > div strong,
  [data-theme][data-viewport] [class*="winModule"] strong {
    position: relative !important;
    top: -6px !important;
  }

  [data-theme][data-viewport] [class*="turboButton"] span {
    bottom: 16% !important;
  }
}