/* casino-buttons - 2026-10-03 (button audit, package C / batch 5).
   The casino games (.kz-game) are left out of the site-wide actions-u1 layer on purpose; this file moves their buttons,
   the lobby tile CTAs and the intro skip onto the same U1 families, with the same recipe:
   - every selector is `html body :where(<family>):not(#c5#c5#c5)`: :where() keeps the families equal, the :not() adds a flat
     (3,0,0) that beats the network .sc-action paint layer (!important, up to 0,5,1) and the roulette skin (#kzRoulette ..., 1,2,0);
   - !important only where the live casino CSS already pins the property with !important;
   - lifts and presses use `translate` (network pins transform:none!important on .sc-action);
   - gold #FFD24A stays on SWGC amounts and the SWGC store only - no casino button is gold any more.
   Families: P primary (ice) · CASH (rocket cash-out, success green) · G glass · I icon tool · L text link · C chips and segments.
   Linked from kazino.html only, after casino-welcome-polish-20260930.css. */

/* Chakra Petch's "&" reads as "8" in tracked caps ("RULES & PAYOUTS", "LEAVE & CASH OUT"): borrow only that one glyph from
   the Inter file the page already loads (same URL, already cached; unicode-range keeps every other character Chakra Petch). */
@font-face { font-family: "C5 Amp"; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/inter-400-latin.woff2') format('woff2'); unicode-range: U+0026; }

:root {
  --c5-ink: #EAF0F7;
  --c5-hot: #F7FAFF;
  --c5-navy: #0B1220;
  --c5-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ================= 1. Shared geometry, type and motion ================= */

html body :where(
  .kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin, .kz-game .kz-fs, .kz-game .rl-lobby, .kz-game .rl-icon-button,
  .kz-game .rd-step, .kz-game .rl-tool, #rlRemoveChip, #rlVerify, #kzLobby .kz-tile__cta
):not(#c5#c5#c5) {
  --c5-ring: #E9F2FA;
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 7px !important;
  clip-path: none !important;
  font-family: "C5 Amp", "Chakra Petch", Inter, system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
  animation: none !important;
  transform: none !important;
  translate: 0 0;
  transition: translate .22s var(--c5-ease), background-color .2s ease, background-image .2s ease, border-color .2s ease,
    box-shadow .22s ease, color .2s ease, opacity .2s ease !important;
  -webkit-tap-highlight-color: transparent;
}
html body :where(.kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin):not(#c5#c5#c5) { min-height: 48px; }
/* Glass, icon tools and the compact header buttons use 600 like the U1 tiles. */
html body :where(.kz-game .kz-btn:not(.kz-btn--primary), .kz-game .kz-fs, .kz-game .rl-lobby, .kz-game .rl-icon-button,
  .kz-game .rd-step, .kz-game .rl-tool, #rlRemoveChip, #rlVerify):not(#c5#c5#c5) { font-weight: 600 !important; }
html body :where(.kz-game .kz-btn--sm, .kz-game .kz-fs, .kz-game .rl-lobby, #rlRemoveChip, #rlVerify):not(#c5#c5#c5) {
  min-height: 44px;
  font-size: 12px !important;
  letter-spacing: .1em !important;
}

/* Money buttons carry their stake: "DEAL · 50 SWGC". The amount keeps its leading " · " even inside a flex button. */
html body :where(.kz-game .kz-btn):not(#c5#c5#c5) { flex-wrap: wrap; justify-content: center; align-content: center; column-gap: 0 !important; text-align: center; }
html body .kz-game .kz-btn .kz-btn__verb { white-space: nowrap; }
html body .kz-game .kz-btn .kz-btn__amt { white-space: pre; font-weight: 600; font-variant-numeric: tabular-nums; }
html body .kz-game .kz-btn .kz-btn__amt[hidden] { display: none !important; }

/* ================= 2. P - primary: ice white with a lit top edge (= hero EXPLORE SERVERS) ================= */

html body :where(.kz-game .kz-btn--primary, #kzCrGo, .kz-game .rd-submit, #rlSpin):not(#c5#c5#c5) {
  color: #0B1220 !important;
  border-color: #F2F6FB !important;
  background-color: #EEF3F9 !important;
  background-image: linear-gradient(180deg, #F7FAFF 0%, #E4EBF3 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(96, 116, 142, .22),
    0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -10px rgba(0, 0, 0, .7) !important;
}
html body :where(.kz-game .kz-btn--primary, #kzCrGo, .kz-game .rd-submit, #rlSpin):not(#c5#c5#c5) svg { color: #0B1220 !important; }
@media (hover: hover) {
  html body :where(.kz-game .kz-btn--primary, #kzCrGo:not(.kz-cr-go--cash), .kz-game .rd-submit, #rlSpin):not(#c5#c5#c5):not(:disabled):not([aria-busy=true]):hover {
    color: #0B1220 !important;
    border-color: #FFFFFF !important;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #EDF2F8 100%) !important;
    box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(96, 116, 142, .18), 0 2px 4px rgba(0, 0, 0, .3),
      0 16px 34px -10px rgba(0, 0, 0, .78), 0 0 0 4px rgba(214, 234, 255, .16), 0 0 46px -2px rgba(214, 234, 255, .6) !important;
    translate: 0 -2px;
  }
}
html body :where(.kz-game .kz-btn--primary, #kzCrGo:not(.kz-cr-go--cash), .kz-game .rd-submit, #rlSpin):not(#c5#c5#c5):not(:disabled):active {
  border-color: #DCE5EF !important;
  background-image: linear-gradient(180deg, #D9E2EC 0%, #E7EDF4 100%) !important;
  box-shadow: inset 0 2px 4px rgba(11, 18, 32, .26), inset 0 -1px 0 rgba(255, 255, 255, .6), 0 1px 1px rgba(0, 0, 0, .35) !important;
  translate: 0 1px;
  transition-duration: .06s !important;
}

/* CASH - rocket CASH OUT while the round flies: the status green, so the state change reads at a glance (not gold). */
html body :where(#kzCrGo.kz-cr-go--cash):not(#c5#c5#c5) {
  --c5-ring: #9BF0CC;
  color: #06231A !important;
  border-color: #8FEBC6 !important;
  background-color: #46D6A0 !important;
  background-image: linear-gradient(180deg, #6BE6B6 0%, #3CC994 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(6, 60, 40, .3), 0 10px 26px -10px rgba(0, 0, 0, .7),
    0 0 30px -8px rgba(70, 214, 160, .55) !important;
}
@media (hover: hover) {
  html body :where(#kzCrGo.kz-cr-go--cash):not(#c5#c5#c5):not(:disabled):hover {
    background-image: linear-gradient(180deg, #7CEDC1 0%, #46D6A0 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 14px 30px -10px rgba(0, 0, 0, .75), 0 0 40px -6px rgba(70, 214, 160, .75) !important;
    translate: 0 -2px;
  }
}
html body :where(#kzCrGo.kz-cr-go--cash):not(#c5#c5#c5):not(:disabled):active {
  background-image: linear-gradient(180deg, #34B783 0%, #46D6A0 100%) !important;
  box-shadow: inset 0 2px 4px rgba(6, 40, 28, .35) !important;
  translate: 0 1px;
}

/* ================= 3. G - glass secondary, I - icon tools ================= */

html body :where(
  .kz-game .kz-btn:not(.kz-btn--primary):not(.kz-btn--ghost):not(.kz-net-reload), .kz-game .kz-fs, .kz-game .rl-lobby,
  .kz-game .rl-icon-button, .kz-game .rd-step, .kz-game .rl-tool, #rlRemoveChip, #rlVerify, #kzLobby .kz-tile__cta
):not(#c5#c5#c5) {
  color: var(--c5-ink) !important;
  border-color: rgba(214, 228, 245, .2) !important;
  border-top-color: rgba(226, 236, 248, .34) !important;
  background-color: transparent !important;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .075) 0%, rgba(255, 255, 255, .02) 100%),
    linear-gradient(180deg, rgba(26, 36, 54, .64) 0%, rgba(10, 16, 28, .78) 100%) !important;
  box-shadow: inset 0 1px 0 rgba(233, 242, 250, .1), 0 1px 2px rgba(0, 0, 0, .3), 0 10px 24px -14px rgba(0, 0, 0, .75) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
}
html body :where(.kz-game .kz-fs, .kz-game .rl-lobby, .kz-game .rl-icon-button, .kz-game .rd-step, .kz-game .rl-tool):not(#c5#c5#c5) svg { color: #C5D2E0 !important; }
@media (hover: hover) {
  html body :where(
    .kz-game .kz-btn:not(.kz-btn--primary):not(.kz-btn--ghost):not(.kz-net-reload), .kz-game .kz-fs, .kz-game .rl-lobby,
    .kz-game .rl-icon-button, .kz-game .rd-step, .kz-game .rl-tool, #rlRemoveChip, #rlVerify
  ):not(#c5#c5#c5):not(:disabled):not([aria-busy=true]):hover {
    color: var(--c5-hot) !important;
    border-color: rgba(226, 236, 248, .36) !important;
    border-top-color: rgba(240, 246, 252, .52) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, .035) 100%),
      linear-gradient(180deg, rgba(34, 46, 66, .72) 0%, rgba(14, 22, 36, .84) 100%) !important;
    box-shadow: inset 0 1px 0 rgba(233, 242, 250, .16), 0 4px 8px rgba(0, 0, 0, .24), 0 16px 30px -14px rgba(0, 0, 0, .8),
      0 0 0 3px rgba(214, 234, 255, .07) !important;
    translate: 0 -2px;
  }
  html body :where(.kz-game .kz-fs, .kz-game .rl-lobby, .kz-game .rl-icon-button, .kz-game .rd-step, .kz-game .rl-tool):not(#c5#c5#c5):not(:disabled):hover svg { color: #F7FAFF !important; }
}
html body :where(
  .kz-game .kz-btn:not(.kz-btn--primary):not(.kz-btn--ghost):not(.kz-net-reload), .kz-game .kz-fs, .kz-game .rl-lobby,
  .kz-game .rl-icon-button, .kz-game .rd-step, .kz-game .rl-tool, #rlRemoveChip, #rlVerify
):not(#c5#c5#c5):not(:disabled):active {
  background-image: linear-gradient(180deg, rgba(12, 18, 30, .82) 0%, rgba(20, 30, 46, .72) 100%) !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .45), 0 1px 1px rgba(0, 0, 0, .3) !important;
  translate: 0 1px;
  transition-duration: .06s !important;
}
/* the sound toggle keeps its pressed meaning: on = lit glass */
html body :where(.kz-game .kz-snd[aria-pressed=true]):not(#c5#c5#c5) { border-top-color: rgba(240, 246, 252, .5) !important; }

/* I - square icon tools, 44 x 44 */
html body :where(.kz-game .kz-snd, .kz-game .rl-icon-button):not(#c5#c5#c5):not([hidden]) {
  min-width: 44px !important;
  min-height: 44px !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-items: center;
}
html body :where(.kz-game .kz-fs, .kz-game .rl-lobby, .kz-game .rl-icon-button, .kz-game .rd-step):not(#c5#c5#c5) svg { width: 18px !important; height: 18px !important; flex: none; }

/* ← LOBBY: one look in all six games (label hides on phones, the name stays "Back to lobby") */
html body :where(.kz-game .kz-close):not(#c5#c5#c5):not([hidden]) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 8px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  height: auto !important;
  padding: 0 14px !important;
}
@media (hover: hover) {
  html body .kz-game .kz-close:not(#c5#c5#c5):hover svg { translate: -2px 0; transition: translate .22s var(--c5-ease); }
}

/* ================= 4. L - text link (decline insurance, reload page, skip intro) ================= */

html body :where(#kzNoIns, .kz-game .kz-net-reload, #kzLdSkip):not(#c5#c5#c5) {
  --c5-ring: #E9F2FA;
  min-height: 44px;
  padding: 0 12px !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  color: #E9F2FA !important;
  background: none !important;
  box-shadow: none !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(233, 242, 250, .4) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 4px;
  text-shadow: none !important;
  filter: none !important;
  transform: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: color .16s ease, text-decoration-color .16s ease !important;
}
@media (hover: hover) {
  html body :where(#kzNoIns, .kz-game .kz-net-reload, #kzLdSkip):not(#c5#c5#c5):not(:disabled):hover {
    color: #F7FAFF !important;
    text-decoration-color: currentColor !important;
    background: none !important;
    border-color: transparent !important;
  }
}
html body :where(#kzNoIns, .kz-game .kz-net-reload, #kzLdSkip):not(#c5#c5#c5):active { color: #C5D2E0 !important; }
/* the skip sits on the intro video: a soft scrim keeps the link legible on bright frames */
html body :where(#kzLdSkip):not(#c5#c5#c5) { background: rgba(6, 10, 18, .55) !important; }

/* ================= 5. C - stake chips and segmented switches (44px, one family in every game) ================= */

html body :where(.kz-game .kz-chip, .kz-game .sc-language[data-sc-game-switch] > button, .kz-game .rl-language > button):not(#c5#c5#c5) {
  --c5-ring: #E9F2FA;
  min-height: 44px !important;
  height: auto !important;
  min-width: 44px !important;
  padding: 0 12px !important;
  border: 1px solid rgba(214, 228, 245, .18) !important;
  border-radius: 7px !important;
  color: #C5D2E0 !important;
  background: linear-gradient(180deg, rgba(26, 36, 54, .55) 0%, rgba(10, 16, 28, .7) 100%) !important;
  box-shadow: none !important;
  font: 600 12px/18px "C5 Amp", "Chakra Petch", Inter, system-ui, sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  font-variant-numeric: tabular-nums;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1;
  transform: none !important;
  translate: 0 0;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, translate .12s ease !important;
}
@media (hover: hover) {
  html body :where(.kz-game .kz-chip, .kz-game .sc-language[data-sc-game-switch] > button, .kz-game .rl-language > button):not(#c5#c5#c5):not([aria-pressed=true]):not(:disabled):hover {
    color: #F7FAFF !important;
    border-color: rgba(226, 236, 248, .36) !important;
    background: linear-gradient(180deg, rgba(34, 46, 66, .7) 0%, rgba(14, 22, 36, .82) 100%) !important;
  }
}
html body :where(.kz-game .kz-chip, .kz-game .sc-language[data-sc-game-switch] > button, .kz-game .rl-language > button):not(#c5#c5#c5)[aria-pressed=true] {
  color: #0B1220 !important;
  border-color: #F2F6FB !important;
  background: linear-gradient(180deg, #F7FAFF 0%, #E4EBF3 100%) !important;
  box-shadow: inset 0 1px 0 #FFFFFF !important;
}
html body :where(.kz-game .kz-chip, .kz-game .sc-language[data-sc-game-switch] > button, .kz-game .rl-language > button):not(#c5#c5#c5):not(:disabled):active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .4) !important;
  translate: 0 1px;
  transition-duration: .06s !important;
}
html body :where(.kz-game .kz-chip):not(#c5#c5#c5):disabled { opacity: .45 !important; cursor: not-allowed; }
/* the segmented language switch: two halves of one control */
html body :where(.kz-game .sc-language[data-sc-game-switch], .kz-game .rl-language):not(#c5#c5#c5):not([hidden]) {
  display: inline-flex !important;
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  overflow: visible !important;
}

/* ================= 6. Disclosures: one style for "Rules & payouts" and "Settings" in every game ================= */

html body :where(.kz-game .kz-rules > summary, .kz-game .kz-preferences > summary, .kz-game .rl-details > details > summary):not(#c5#c5#c5):not([hidden]) {
  display: flex !important;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px !important;
  list-style: none !important;
  cursor: pointer;
  color: #C5D2E0 !important;
  font: 600 12px/18px "C5 Amp", "Chakra Petch", Inter, system-ui, sans-serif !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  border-radius: 7px;
}
html body :where(.kz-game .kz-rules > summary, .kz-game .kz-preferences > summary, .kz-game .rl-details > details > summary):not(#c5#c5#c5)::-webkit-details-marker { display: none; }
html body :where(.kz-game .kz-rules > summary, .kz-game .kz-preferences > summary, .kz-game .rl-details > details > summary):not(#c5#c5#c5)::marker { content: ""; }
html body :where(.kz-game .kz-rules > summary, .kz-game .kz-preferences > summary, .kz-game .rl-details > details > summary):not(#c5#c5#c5)::before {
  content: "" !important;
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 3px 0 2px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  rotate: -45deg;
  transition: rotate .2s var(--c5-ease);
}
html body :where(.kz-game details[open] > summary):not(#c5#c5#c5)::before { rotate: 45deg; }
@media (hover: hover) {
  html body :where(.kz-game .kz-rules > summary, .kz-game .kz-preferences > summary, .kz-game .rl-details > details > summary):not(#c5#c5#c5):hover { color: #F7FAFF !important; }
}
html body :where(.kz-game .kz-rules > summary, .kz-game .kz-preferences > summary, .kz-game .rl-details > details > summary):not(#c5#c5#c5):focus-visible {
  outline: 2px solid #E9F2FA !important;
  outline-offset: 2px !important;
}

/* ================= 7. Lobby tiles: glass bar at rest, the ice primary when the tile is hovered or focused ================= */

html body :where(#kzLobby .kz-tile__cta):not(#c5#c5#c5):not([hidden]) {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  font-size: 12px !important;
  letter-spacing: .14em !important;
}
html body :where(#kzLobby .kz-tile__cta):not(#c5#c5#c5) .kz-arrow { width: 16px; height: 16px; flex: none; color: currentColor !important; transition: translate .22s var(--c5-ease); }
html body :where(#kzLobby .kz-tile:is(:hover, :focus-visible) .kz-tile__cta):not(#c5#c5#c5) {
  color: #0B1220 !important;
  border-color: #FFFFFF !important;
  background-color: #EEF3F9 !important;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #EDF2F8 100%) !important;
  box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(96, 116, 142, .18), 0 10px 26px -10px rgba(0, 0, 0, .7),
    0 0 0 4px rgba(214, 234, 255, .14), 0 0 40px -4px rgba(214, 234, 255, .5) !important;
}
html body :where(#kzLobby .kz-tile:is(:hover, :focus-visible) .kz-tile__cta):not(#c5#c5#c5) .kz-arrow { translate: 3px 0; }
html body :where(#kzLobby .kz-tile:active .kz-tile__cta):not(#c5#c5#c5) {
  background-image: linear-gradient(180deg, #D9E2EC 0%, #E7EDF4 100%) !important;
  box-shadow: inset 0 2px 4px rgba(11, 18, 32, .26) !important;
}
/* Gate CTA. Package B's actions-u1 layer paints it (P family, and its selector outranks this one). This is the same ice
   primary as a fallback, so the gate never shows the old gold button with the new label if this package goes live first. */
html body :where(#kzGate .kz-gate__cta):not(#c5#c5#c5) {
  border-width: 1px !important;
  border-style: solid !important;
  border-radius: 7px !important;
  clip-path: none !important;
  font-family: "C5 Amp", "Chakra Petch", Inter, system-ui, sans-serif !important;
  font-size: 13px !important;
  line-height: 20px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  filter: none !important;
  color: #0B1220 !important;
  border-color: #F2F6FB !important;
  background-color: #EEF3F9 !important;
  background-image: linear-gradient(180deg, #F7FAFF 0%, #E4EBF3 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(96, 116, 142, .22),
    0 1px 2px rgba(0, 0, 0, .35), 0 10px 26px -10px rgba(0, 0, 0, .7) !important;
  translate: 0 0;
  transition: translate .22s var(--c5-ease), background-image .2s ease, border-color .2s ease, box-shadow .22s ease !important;
}
@media (hover: hover) {
  html body :where(#kzGate .kz-gate__cta):not(#c5#c5#c5):hover {
    border-color: #FFFFFF !important;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #EDF2F8 100%) !important;
    box-shadow: inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(96, 116, 142, .18), 0 2px 4px rgba(0, 0, 0, .3),
      0 16px 34px -10px rgba(0, 0, 0, .78), 0 0 0 4px rgba(214, 234, 255, .16), 0 0 46px -2px rgba(214, 234, 255, .6) !important;
    translate: 0 -2px;
  }
}
html body :where(#kzGate .kz-gate__cta):not(#c5#c5#c5):active {
  background-image: linear-gradient(180deg, #D9E2EC 0%, #E7EDF4 100%) !important;
  box-shadow: inset 0 2px 4px rgba(11, 18, 32, .26), 0 1px 1px rgba(0, 0, 0, .35) !important;
  translate: 0 1px;
}
html body :where(#kzGate .kz-gate__cta):not(#c5#c5#c5):focus-visible { outline: 2px solid #E9F2FA !important; outline-offset: 3px !important; }
/* the old arrow span rule (17px) must not reach the new label span */
html body #kzGate .kz-gate__cta > .kz-gate__cta-label:not(#c5) { font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; }
html body #kzGate .kz-gate__cta svg { width: 16px; height: 16px; flex: none; color: #0B1220 !important; }
html body #kzGate .kz-gate__cta { gap: 10px; }
@media (prefers-reduced-motion: reduce) { html body :where(#kzGate .kz-gate__cta):not(#c5#c5#c5) { translate: none !important; } }

/* the balance and BUY SWGC are for members: a guest (or a member who still has to verify) sees the gate instead */
html body[data-casino-state=guest] .kz-heading .net-wallet,
html body[data-casino-state=guest] .topbar :is(.kz-bal, #kzBuy) { display: none !important; }

/* ================= 8. Game-specific geometry ================= */

/* Blackjack insurance row: INSURE · 25 SWGC (glass, full width) over "No insurance" (link). One column, so the stake never
   spills out of the button. (Only the columns change: the row keeps its [hidden] handling and its own display.) */
html body .kz-console #kzInsRow:not(#c5) { grid-template-columns: minmax(0, 1fr) !important; }
html body :where(.kz-game #kzIns):not(#c5#c5#c5) { min-height: 44px; padding: 0 14px !important; width: 100%; }
html body :where(.kz-game #kzNoIns):not(#c5#c5#c5) { justify-self: center; }

/* Poker: long Lithuanian labels may take two lines inside the button instead of overflowing it */
html body :where(#kzHmActs .kz-btn, #kzHmNextRow .kz-btn):not(#c5#c5#c5) { white-space: normal; padding-inline: 10px !important; }
html body #kzHmActs .kz-btn .kz-btn__verb, html body #kzHmNextRow .kz-btn .kz-btn__verb { white-space: normal; }

/* Racing ticket: steppers 44 x 44, the submit label stays one line where it fits */
html body :where(.kz-game .rd-step):not(#c5#c5#c5):not([hidden]) { min-width: 44px !important; min-height: 44px !important; width: 44px; padding: 0 !important; display: inline-grid !important; place-items: center; }
html body :where(.kz-game .rd-submit):not(#c5#c5#c5) { gap: 12px; }
html body :where(.kz-game .rd-submit):not(#c5#c5#c5) .rd-submit-icon svg { width: 18px; height: 18px; }

/* Rocket: one bet button for bet / cash-out / waiting */
html body :where(#kzCrGo):not(#c5#c5#c5) { min-height: 52px; font-size: 14px !important; }

/* Roulette: SPIN · 150 SWGC, readable tools (11px, 44px targets), 12px disclosures */
html body :where(#rlSpin):not(#c5#c5#c5) { min-height: 56px; font-size: 14px !important; gap: 12px; }
html body :where(.kz-game .rl-tool):not(#c5#c5#c5):not([hidden]) {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px !important;
  min-width: 64px !important;
  min-height: 56px !important;
  padding: 6px 8px !important;
}
html body #kzRoulette .rl-tool:not(#c5#c5#c5) span,
html body #kzRoulette.kz-game--max .rl-tool:not(#c5#c5#c5) span { font: 600 11px/14px "C5 Amp", "Chakra Petch", Inter, system-ui, sans-serif !important; letter-spacing: .06em !important; white-space: nowrap; }
html body #kzRoulette .rl-tool:not(#c5#c5#c5) b,
html body #kzRoulette.kz-game--max .rl-tool:not(#c5#c5#c5) b { height: 18px; font-size: 16px; line-height: 18px; font-weight: 500; }
html body #kzRoulette .rl-tool:not(#c5#c5#c5) svg,
html body #kzRoulette.kz-game--max .rl-tool:not(#c5#c5#c5) svg { width: 18px !important; height: 18px !important; }
html body #kzRoulette .rl-tools:not(#c5) { gap: 8px !important; }
html body :where(#rlRemoveChip, #rlVerify):not(#c5#c5#c5) { padding: 0 14px !important; }
html body #kzRoulette .rl-details > details > summary:not(#c5) { font-size: 12px !important; }
html body :where(.kz-game .rl-lobby):not(#c5#c5#c5) { min-height: 44px !important; height: auto !important; }

@media (min-width: 821px) and (max-width: 1240px) {
  /* four readable tools need their own row next to SPIN */
  html body #kzRoulette.kz-game--max .rl-console:not(#c5) { grid-template-columns: minmax(170px, 1fr) auto; grid-template-rows: auto auto; row-gap: 12px; }
  html body #kzRoulette.kz-game--max .rl-funds:not(#c5) { grid-column: 1; grid-row: 1; }
  html body #kzRoulette.kz-game--max .rl-chip-select:not(#c5) { grid-column: 2; grid-row: 1; }
  html body #kzRoulette.kz-game--max .rl-tools:not(#c5) { grid-column: 1; grid-row: 2; }
  html body #kzRoulette.kz-game--max .rl-spin:not(#c5) { grid-column: 2; grid-row: 2; min-width: 240px; }
}
@media (max-width: 620px) {
  /* phones: tools get a full row (4 x 1fr), SPIN a full-width row under them */
  html body #kzRoulette.kz-game--max .rl-console:not(#c5) { grid-template-columns: minmax(0, 1fr); }
  html body #kzRoulette.kz-game--max .rl-funds:not(#c5), html body #kzRoulette.kz-game--max .rl-chip-select:not(#c5) { grid-column: 1; }
  html body #kzRoulette.kz-game--max .rl-tools:not(#c5):not([hidden]) { grid-column: 1; grid-row: 3; display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px !important; }
  html body #kzRoulette.kz-game--max .rl-tool:not(#c5) { min-width: 0 !important; width: 100%; min-height: 48px !important; gap: 3px !important; padding: 5px 4px !important; }
  html body #kzRoulette.kz-game--max .rl-spin:not(#c5) { grid-column: 1; grid-row: 4; min-height: 48px; padding: 0 12px; }
  /* the console is sticky over the felt: keep it as short as the readable tools allow */
  html body #kzRoulette.kz-game--max .rl-console:not(#c5) { row-gap: 10px !important; }
  /* header: 44px targets; the title gives way */
  html body #kzRoulette .rl-header:not(#c5) { gap: 8px; }
  html body #kzRoulette .rl-title h2:not(#c5) { font-size: 20px !important; letter-spacing: 2px; }
  html body #kzRoulette .rl-header-actions:not(#c5) { gap: 4px !important; flex: none; }
  html body :where(.kz-game .rl-language > button):not(#c5#c5#c5) { min-width: 40px !important; padding: 0 6px !important; }
  html body :where(.kz-game .rl-lobby):not(#c5#c5#c5) { padding: 0 !important; min-width: 44px !important; }
}

/* ================= 9. Shared states: focus, disabled, loading ================= */

html body :where(
  .kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin, .kz-game .kz-fs, .kz-game .rl-lobby, .kz-game .rl-icon-button,
  .kz-game .rd-step, .kz-game .rl-tool, #rlRemoveChip, #rlVerify, #kzNoIns, #kzLdSkip, .kz-game .kz-chip,
  .kz-game .sc-language[data-sc-game-switch] > button, .kz-game .rl-language > button
):not(#c5#c5#c5):focus-visible {
  outline: 2px solid var(--c5-ring, #E9F2FA) !important;
  outline-offset: 3px !important;
}
html body :where(
  .kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin, .kz-game .kz-fs, .kz-game .rl-lobby, .kz-game .rl-icon-button,
  .kz-game .rd-step, .kz-game .rl-tool, #rlRemoveChip, #rlVerify
):not(#c5#c5#c5):is(:disabled, [aria-disabled=true]) {
  opacity: .45 !important;
  cursor: not-allowed;
  translate: 0 0 !important;
  box-shadow: none !important;
}
/* Loading: the games set aria-busy="true" and swap the label (PROCESSING… / SUBMITTING… / CHECKING…); CSS adds the spinner. */
html body :where(.kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin):not(#c5#c5#c5)[aria-busy=true] {
  cursor: progress;
  translate: 0 0 !important;
  opacity: 1 !important;
}
html body :where(.kz-game .kz-btn, #kzCrGo, #rlSpin):not(#c5#c5#c5)[aria-busy=true]::after {
  content: "" !important;
  display: inline-block !important;
  position: static !important;
  width: 14px !important;
  height: 14px !important;
  margin: 0 0 0 10px !important;
  border: 2px solid currentColor !important;
  border-right-color: transparent !important;
  border-radius: 50% !important;
  background: none !important;
  opacity: .85 !important;
  animation: c5-spin .7s linear infinite !important;
}
@keyframes c5-spin { to { rotate: 360deg; } }

/* ================= 10. Narrow screens, touch, motion, forced colours ================= */

@media (max-width: 520px) {
  html body :where(.kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin, .kz-game .kz-fs, #kzLobby .kz-tile__cta):not(#c5#c5#c5) { letter-spacing: .08em !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body :where(.kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin, .kz-game .kz-fs, .kz-game .rl-lobby, .kz-game .rl-icon-button,
    .kz-game .rd-step, .kz-game .rl-tool, .kz-game .kz-chip, #kzLobby .kz-tile__cta):not(#c5#c5#c5),
  html body :where(.kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin, .kz-game .kz-fs, #kzLobby .kz-tile__cta):not(#c5#c5#c5) > *,
  html body :where(.kz-game details > summary):not(#c5#c5#c5)::before {
    translate: none !important;
    transition: background-color .01s, border-color .01s, color .01s, box-shadow .01s, opacity .01s !important;
  }
  html body :where(.kz-game .kz-btn, #kzCrGo, #rlSpin):not(#c5#c5#c5)[aria-busy=true]::after { animation-duration: 1.6s !important; }
}
/* the casino's own "fewer effects" switch (html.kz-calm) behaves like reduced motion */
html.kz-calm body :where(.kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin, .kz-game .kz-fs, .kz-game .rl-lobby, .kz-game .rl-icon-button,
  .kz-game .rd-step, .kz-game .rl-tool, .kz-game .kz-chip, #kzLobby .kz-tile__cta):not(#c5#c5#c5) { translate: none !important; }
@media (forced-colors: active) {
  html body :where(.kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin, .kz-game .kz-fs, .kz-game .rl-lobby, .kz-game .rl-icon-button,
    .kz-game .rd-step, .kz-game .rl-tool, .kz-game .kz-chip, #kzLobby .kz-tile__cta):not(#c5#c5#c5) { border-color: ButtonText !important; }
  html body :where(.kz-game .kz-btn, #kzCrGo, .kz-game .rd-submit, #rlSpin, .kz-game .kz-fs, .kz-game .kz-chip):not(#c5#c5#c5):focus-visible { outline-color: Highlight !important; }
}