:root {
  color-scheme: dark;
  --bg: #071225;
  --surface: #111f37;
  --surface-2: #172743;
  --surface-3: #213453;
  --line: #2c4669;
  --line-soft: rgba(103, 148, 198, 0.2);
  --blue: #3aa0ff;
  --blue-2: #1675da;
  --text: #f7faff;
  --muted: #91a6bf;
  --green: #45d69b;
  --danger: #ff6b79;
  --nav-height: 76px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: #030a15;
}

body {
  color: var(--text);
}

.cloud-sync-banner {
  position: sticky;
  top: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(16, 36, 67, 0.96);
  color: #dbeafe;
  font-size: 13px;
  line-height: 1.25;
}

.cloud-sync-banner.error {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(69, 22, 35, 0.96);
  color: #fee2e2;
}

.cloud-sync-banner strong {
  color: #ffffff;
}

.cloud-sync-banner .button.tiny {
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

.app-shell {
  width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 95% -5%, rgba(44, 140, 236, 0.16), transparent 28%),
    linear-gradient(180deg, #09162b 0%, var(--bg) 100%);
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
}

.login-shell {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: calc(86px + env(safe-area-inset-top)) 18px 34px;
  background:
    radial-gradient(circle at 82% 8%, rgba(58, 160, 255, 0.18), transparent 32%),
    radial-gradient(circle at 18% 0%, rgba(49, 116, 206, 0.12), transparent 28%),
    linear-gradient(180deg, #08162c 0%, #030a15 100%);
}

.agent-login-link {
  position: fixed;
  top: calc(22px + env(safe-area-inset-top));
  left: 21px;
  min-height: 58px;
  padding: 0 20px;
  border: 1px solid rgba(101, 166, 239, 0.52);
  border-radius: 999px;
  background: rgba(17, 31, 55, 0.74);
  color: #c6dcff;
  font-size: 17px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.login-card {
  width: min(100%, 646px);
  padding: 31px 30px 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(23, 39, 67, 0.98), rgba(11, 22, 42, 0.98));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.36);
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 26px;
}

.login-brand strong,
.login-brand span {
  display: block;
}

.login-brand span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
}

.login-brand .brand-mark {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  font-size: 28px;
}

.login-brand strong {
  font-size: 24px;
  letter-spacing: 0.01em;
}

.login-pill {
  display: inline-flex;
  margin-bottom: 24px;
  padding: 8px 13px;
  border: 1px solid rgba(69, 214, 155, 0.32);
  border-radius: 999px;
  color: #8ff1c8;
  background: rgba(69, 214, 155, 0.08);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.login-card h1 {
  margin: 0 0 24px;
  font-size: clamp(38px, 5vw, 42px);
  line-height: 1;
}

.login-card p,
.login-hint {
  color: var(--muted);
  line-height: 1.45;
}

.login-card p {
  margin: 0 0 26px;
  font-size: 24px;
}

.login-card form {
  display: grid;
  gap: 17px;
  margin-top: 0;
}

.login-card label {
  display: grid;
  gap: 10px;
  color: #dceaff;
  font-size: 19px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.login-submit {
  min-height: 64px;
  margin-top: 7px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.login-error {
  padding: 10px 12px;
  border: 1px solid rgba(255, 107, 121, 0.45);
  border-radius: 12px;
  background: rgba(255, 107, 121, 0.1);
  color: #ffc6ce;
  font-size: 13px;
}

.login-hint {
  margin-top: 24px;
  padding: 20px 18px;
  border: 1px solid rgba(103, 148, 198, 0.26);
  border-radius: 16px;
  background: rgba(7, 18, 37, 0.54);
  font-size: 16px;
}

.login-card .field {
  height: 51px;
  border-radius: 10px;
  font-size: 21px;
  font-weight: 800;
}

.mgmt-credit-usage-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr)) minmax(180px, 240px) auto;
  gap: 10px;
  align-items: stretch;
  margin: 14px 0;
}

.mgmt-credit-usage-bar article,
.mgmt-credit-usage-bar label {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #d4dce8;
  border-radius: 12px;
  background: #f8fafc;
  color: #344055;
}

.mgmt-credit-usage-bar span,
.mgmt-credit-usage-bar label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.mgmt-credit-usage-bar strong {
  font-size: 20px;
  color: #111827;
}

.mgmt-credit-usage-bar small {
  color: #667085;
  font-size: 12px;
  text-transform: none;
  letter-spacing: 0;
}

.mgmt-credit-usage-bar .button {
  min-height: 48px;
  align-self: stretch;
}

@media (max-width: 620px) {
  .mgmt-credit-usage-bar {
    grid-template-columns: 1fr;
  }

  .mgmt-credit-usage-bar .button {
    width: 100%;
  }

  .login-shell {
    padding: calc(74px + env(safe-area-inset-top)) 16px 22px;
  }

  .agent-login-link {
    top: calc(14px + env(safe-area-inset-top));
    left: 14px;
    min-height: 44px;
    padding: 0 15px;
    font-size: 14px;
  }

  .login-card {
    padding: 22px 18px 18px;
  }

  .login-brand span {
    font-size: 10px;
  }

  .login-brand strong {
    font-size: 19px;
  }

  .login-card p {
    font-size: 17px;
  }

  .login-card label {
    font-size: 13px;
  }

  .login-submit {
    min-height: 52px;
  }
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(9px + env(safe-area-inset-top)) 14px 10px;
  background: rgba(7, 18, 37, 0.94);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.brand-row,
.balance-row,
.screen-head,
.market-head,
.game-row,
.tabs,
.betslip-tools,
.totals,
.modal-actions,
.slip-title,
.history-head {
  display: flex;
  align-items: center;
}

.brand-row {
  justify-content: space-between;
  gap: 12px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.mini-link {
  min-height: 28px;
  padding: 0 9px;
  border: 1px solid rgba(103, 148, 198, 0.34);
  border-radius: 999px;
  background: rgba(17, 31, 55, 0.72);
  color: #b9d8ff;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.session-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #48b4ff, #1767ce);
  box-shadow: 0 7px 20px rgba(35, 132, 230, 0.3);
  font-size: 19px;
  transform: rotate(-7deg);
}

.brand-copy strong {
  display: block;
  font-size: 15px;
  letter-spacing: 0.08em;
}

.brand-copy span,
.eyebrow {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sim-pill,
.status-pill {
  padding: 5px 8px;
  border: 1px solid rgba(69, 214, 155, 0.38);
  border-radius: 999px;
  color: #8ff1c8;
  background: rgba(69, 214, 155, 0.09);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.balance-row {
  gap: 8px;
  margin-top: 10px;
}

.balance-chip {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(17, 31, 55, 0.72);
  color: #dbe8f7;
  text-align: center;
  font-size: 12px;
}

.balance-chip.freeplay {
  border-color: rgba(255, 204, 102, 0.5);
  color: #ffe7a3;
  background: rgba(255, 204, 102, 0.09);
}

.player-net-chip {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 9px 11px;
  border: 1px solid rgba(139, 162, 191, 0.32);
  border-radius: 11px;
  background: rgba(13, 25, 45, 0.82);
  text-align: center;
}

.player-net-chip span,
.player-net-chip small {
  color: #9eb0c8;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.player-net-chip strong {
  color: #dbe8f7;
  font-size: 15px;
  font-weight: 950;
}

.player-net-chip.up {
  border-color: rgba(82, 225, 143, 0.5);
  background: rgba(24, 95, 58, 0.18);
}

.player-net-chip.up strong {
  color: #70f0a4;
}

.player-net-chip.down {
  border-color: rgba(255, 102, 122, 0.5);
  background: rgba(115, 30, 46, 0.22);
}

.player-net-chip.down strong {
  color: #ff8293;
}

.player-net-chip.flat strong {
  color: #dbe8f7;
}

.freeplay-notice {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 204, 102, 0.35);
  border-radius: 9px;
  color: #ffe7a3;
  background: rgba(255, 204, 102, 0.08);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.home-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.casino-promo {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  padding: 11px;
  border: 1px solid #6c4fc6;
  border-radius: 10px;
  background:
    radial-gradient(circle at 90% 10%, rgba(161, 98, 255, 0.24), transparent 42%),
    linear-gradient(135deg, #182744, #201b42);
}

.live-promo {
  border-color: #2da36e;
  background:
    radial-gradient(circle at 90% 10%, rgba(72, 223, 142, 0.22), transparent 42%),
    linear-gradient(135deg, #142940, #123526);
}

.casino-promo h2 {
  margin: 2px 0;
  font-size: 15px;
}

.casino-promo p {
  margin: 0;
  color: #b9acd8;
  font-size: 8px;
  line-height: 1.35;
}

.casino-enter-button {
  min-height: 36px;
  padding: 0 12px;
  border-color: #a788ff;
  background: linear-gradient(135deg, #6540bb, #8d62e8);
  white-space: nowrap;
}

.live-promo .casino-enter-button {
  border-color: #59d492;
  background: linear-gradient(135deg, #14754b, #22a66d);
}

.odds-admin-card {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #3e6186;
  border-radius: 10px;
  background: #111f37;
}

.odds-admin-card > div {
  display: grid;
  gap: 3px;
}

.odds-admin-card strong {
  font-size: 10px;
  text-transform: uppercase;
}

.odds-admin-card span {
  color: var(--muted);
  font-size: 8px;
}

.odds-admin-card .button {
  min-height: 36px;
  padding: 0 10px;
  font-size: 9px;
}

.odds-admin-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.odds-admin-actions .button.ghost {
  border-color: #456b91;
  background: #172841;
}

@media (max-width: 430px) {
  .odds-admin-card {
    grid-template-columns: 1fr;
  }

  .odds-admin-actions,
  .odds-admin-actions .button {
    width: 100%;
  }
}

.odds-unavailable,
.odds-loading {
  margin-bottom: 10px;
  padding: 16px;
  border: 1px solid #475d78;
  border-radius: 9px;
  background: #111f37;
  color: #b8c9dc;
  font-size: 11px;
  text-align: center;
}

.odds-unavailable {
  border-color: #7b4854;
  color: #ffb7c0;
}

.content {
  padding: 13px 10px 20px;
}

.screen-head {
  justify-content: space-between;
  margin: 0 2px 12px;
}

.screen-head h1 {
  margin: 3px 0 0;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.screen-head.with-back {
  align-items: flex-end;
}

.screen-head.with-back .mobile-page-head {
  flex: 1;
}

.mobile-page-head {
  display: grid;
  gap: 7px;
  margin: 0 2px 12px;
}

.mobile-page-head h1 {
  margin: 2px 0 0;
  font-size: 20px;
  letter-spacing: -0.03em;
}

.screen-head .mobile-page-head {
  margin-bottom: 0;
}

.back-button {
  width: max-content;
  min-width: 76px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid #4d739c;
  border-radius: 9px;
  background: #13233d;
  color: #dcecff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}

.back-button:disabled {
  opacity: 0.38;
  cursor: default;
}

.modal-back-button {
  margin-bottom: 12px;
}

.screen-copy {
  margin: -4px 2px 13px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.icon-button,
.square-button {
  display: grid;
  border: 1px solid var(--line);
  place-items: center;
  background: var(--surface);
  cursor: pointer;
}

.icon-button {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.tutorial-button {
  width: 100%;
  min-height: 56px;
  margin-bottom: 13px;
  border: 1px solid #55b6ff;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 100%, rgba(111, 200, 255, 0.24), transparent 60%),
    linear-gradient(135deg, #1478dd, #3c9cf1);
  box-shadow: 0 10px 24px rgba(13, 102, 190, 0.24);
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.sport-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: rgba(17, 31, 55, 0.84);
}

.sport-row {
  width: 100%;
  min-height: 48px;
  display: grid;
  grid-template-columns: 32px 1fr 24px;
  align-items: center;
  gap: 9px;
  padding: 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line-soft);
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.sport-row:last-child {
  border-bottom: 0;
}

.sport-row.open {
  background: linear-gradient(90deg, rgba(58, 160, 255, 0.27), transparent 65%);
}

.sport-icon,
.team-dot {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eff6ff;
  color: #0d2645;
}

.sport-icon {
  width: 25px;
  height: 25px;
  font-size: 14px;
}

.sport-label {
  overflow: hidden;
  font-size: 12px;
  font-weight: 690;
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sport-label small {
  display: block;
  margin-top: 3px;
  color: #7896b8;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0;
}

.chevron {
  color: #7ba0c8;
  font-size: 18px;
  text-align: center;
  transition: transform 0.2s;
}

.open .chevron {
  color: var(--blue);
  transform: rotate(180deg);
}

.sub-list {
  background: rgba(7, 18, 37, 0.48);
}

.sub-row {
  min-height: 43px;
  font-size: 11px;
  color: #dbe8f7;
}

.sub-row::before {
  content: none;
}

.action-row {
  display: flex;
  gap: 8px;
}

.square-button {
  width: 39px;
  height: 36px;
  border-radius: 10px;
  font-size: 16px;
}

.square-button.primary {
  border-color: #339be9;
  background: var(--blue-2);
}

.odds-header {
  position: sticky;
  top: 89px;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr repeat(3, minmax(70px, 0.82fr));
  gap: 6px;
  margin-bottom: 10px;
  padding: 9px 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(7, 18, 37, 0.96);
  color: #c6d4e5;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.league-group {
  margin-bottom: 12px;
}

.market-head {
  justify-content: space-between;
  gap: 8px;
  padding: 8px 9px;
  border: 1px solid #287dcc;
  border-radius: 9px 9px 0 0;
  background: #0b182d;
}

.market-title {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
}

.market-title span {
  overflow: hidden;
  font-size: 10px;
  font-weight: 850;
  line-height: 1.15;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.market-date {
  color: #e8f3ff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.game-card {
  padding: 7px;
  border: 1px solid var(--line);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(145deg, rgba(28, 44, 70, 0.98), rgba(17, 31, 55, 0.98));
}

.game-row {
  display: grid;
  grid-template-columns: 1fr repeat(3, minmax(70px, 0.82fr));
  gap: 6px;
  min-height: 45px;
}

.team {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  padding-left: 4px;
  font-size: 11px;
  font-weight: 700;
}

.team span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-dot {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  font-size: 8px;
}

.odds-button {
  min-height: 37px;
  align-self: center;
  padding: 3px 2px;
  border: 1px solid #6682a5;
  border-radius: 8px;
  background: rgba(18, 32, 56, 0.95);
  color: #eef6ff;
  font-size: 11px;
  line-height: 1.15;
  cursor: pointer;
}

.odds-button:active {
  transform: scale(0.97);
}

.odds-button.selected {
  border-color: #6bc3ff;
  background: linear-gradient(145deg, #228ee6, #1767c2);
  box-shadow: 0 0 0 1px rgba(107, 195, 255, 0.2), 0 6px 15px rgba(14, 105, 198, 0.28);
}

.odds-button.blank {
  visibility: hidden;
}

.prop-market-card {
  margin: 8px;
  overflow: hidden;
  border: 1px solid #345276;
  border-radius: 9px;
  background: rgba(8, 20, 39, 0.48);
}

.prop-market-title {
  padding: 9px 10px;
  border-bottom: 1px solid var(--line-soft);
  color: #a9c9ea;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.prop-outcomes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
}

.generic-odd {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 8px;
  padding: 7px 9px;
  border: 1px solid #587596;
  border-radius: 8px;
  background: #172943;
  color: #f4f8ff;
  text-align: left;
  cursor: pointer;
}

.generic-odd span {
  overflow: hidden;
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
}

.generic-odd small {
  color: #8caaca;
  font-size: 10px;
}

.generic-odd strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: #dcecff;
  font-size: 12px;
}

.generic-odd.selected {
  border-color: #45a8ff;
  background: linear-gradient(145deg, #176fbd, #235b91);
  box-shadow: 0 0 0 1px rgba(69, 168, 255, 0.25);
}

.live-dot {
  color: #72f0a7;
  font-weight: 900;
}

.live-game-card {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 7px 0;
  padding: 11px;
  border: 1px solid #345276;
  border-radius: 10px;
  background: #172943;
  color: #f2f8ff;
  text-align: left;
  cursor: pointer;
}

.live-game-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.live-game-main strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.live-game-main span,
.live-game-meta small,
.live-game-meta span {
  color: #9fb7d2;
  font-size: 10px;
}

.live-game-meta {
  display: grid;
  align-content: center;
  gap: 5px;
  text-align: right;
}

.live-score-card {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  padding: 13px;
  border: 1px solid #2a8b60;
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 10%, rgba(94, 255, 167, 0.16), transparent 40%),
    #10233a;
}

.live-score-card h2 {
  margin: 0;
  font-size: 17px;
}

.live-score-card strong {
  color: #f6fbff;
  font-size: 20px;
}

.live-score-card small {
  color: #a8bdd4;
  font-size: 10px;
}

.live-validation-message {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #2f9b6e;
  border-radius: 9px;
  background: rgba(48, 196, 124, 0.1);
  color: #a8f5cf;
  font-size: 11px;
  line-height: 1.45;
}

.live-validation-message.warning {
  border-color: #c99b35;
  background: rgba(201, 155, 53, 0.12);
  color: #ffe1a6;
}

.game-time {
  margin: 3px 3px 1px;
  color: #d8e8f8;
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.tabs {
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 11px;
  scrollbar-width: none;
}

.tab {
  min-width: 88px;
  padding: 9px 14px;
  border: 1px solid #617b9b;
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

.tab.active {
  border-color: #53b8ff;
  background: #236fae;
  color: white;
}

.bet-type-tabs .tab {
  min-width: max-content;
  padding-right: 13px;
  padding-left: 13px;
}

.selection-tools {
  margin: -2px 1px 10px;
  padding: 0 3px 8px;
  border-bottom: 1px solid var(--line-soft);
}

.betslip-overview {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(17, 31, 55, 0.9);
}

.betslip-overview > p {
  margin: 0;
  padding: 11px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
}

.overview-selection {
  display: grid;
  grid-template-columns: 1fr auto 30px;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.overview-selection:last-child {
  border-bottom: 0;
}

.overview-selection > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.overview-selection strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.overview-selection div span {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.overview-clear-button {
  width: 100%;
  margin-top: 10px;
}

.builder-card {
  overflow: hidden;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: linear-gradient(145deg, rgba(28, 44, 70, 0.98), rgba(13, 26, 47, 0.98));
}

.ticket-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 12px;
  border-bottom: 1px solid #327fbe;
  background: #0b182d;
  font-size: 11px;
  text-transform: uppercase;
}

.ticket-heading span {
  color: #67bdff;
  font-weight: 900;
  letter-spacing: 0.09em;
}

.ticket-heading strong {
  font-size: 10px;
}

.ticket-legs {
  padding: 3px 11px;
}

.ticket-leg {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 54px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.ticket-leg:last-child {
  border-bottom: 0;
}

.ticket-leg > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.ticket-leg strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.ticket-leg span,
.ticket-leg small {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.ticket-leg .odds-chip {
  color: #dcecff;
  font-size: 11px;
}

.amount-label,
.select-label {
  display: grid;
  gap: 7px;
  margin: 11px;
  color: #bdcbda;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.amount-label.compact {
  grid-template-columns: 46px 1fr;
  align-items: center;
  margin: 7px 0;
}

.large-field {
  height: 42px;
  font-size: 15px;
}

.select-field {
  height: 40px;
  padding: 0 10px;
  text-align: left;
}

.calculation-grid,
.round-stats,
.modal-totals {
  display: grid;
  gap: 1px;
  background: var(--line-soft);
}

.calculation-grid {
  grid-template-columns: repeat(2, 1fr);
  overflow: hidden;
  margin: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.calculation-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.calculation-grid span,
.round-stats span,
.modal-totals span {
  display: grid;
  gap: 4px;
  padding: 9px 5px;
  background: #101d33;
  color: var(--muted);
  font-size: 8px;
  text-align: center;
  text-transform: uppercase;
}

.calculation-grid strong,
.round-stats strong,
.modal-totals strong {
  color: white;
  font-size: 12px;
}

.logic-note,
.builder-warning {
  margin: 10px 12px 12px;
  font-size: 9px;
  line-height: 1.45;
  text-align: center;
}

.logic-note {
  color: var(--muted);
}

.logic-note.top-note {
  margin-bottom: 4px;
}

.builder-warning {
  padding: 8px;
  border: 1px solid rgba(255, 184, 77, 0.25);
  border-radius: 7px;
  background: rgba(255, 184, 77, 0.08);
  color: #ffd18c;
}

.if-chain {
  padding: 8px;
}

.if-step {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #101d33;
}

.if-step.dragging {
  opacity: 0.45;
}

.if-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line-soft);
  color: #70c1ff;
  font-size: 10px;
  text-transform: uppercase;
}

.drag-handle {
  color: var(--muted);
  cursor: grab;
  font-size: 18px;
}

.reorder-buttons {
  display: flex;
  gap: 4px;
  margin-left: auto;
}

.reorder-buttons button {
  width: 27px;
  height: 25px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-2);
}

.reorder-buttons button:disabled {
  opacity: 0.25;
}

.if-step .ticket-leg {
  min-height: 48px;
}

.possible-win {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.possible-win strong {
  color: #8ff1c8;
}

.if-arrow {
  padding: 8px;
  color: #62b7fa;
  font-size: 9px;
  font-weight: 850;
  text-align: center;
}

.selected-team-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 11px;
}

.selected-team-list span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  color: #cbd8e6;
  font-size: 9px;
  text-transform: uppercase;
}

.combination-list {
  display: grid;
  gap: 4px;
  max-height: 144px;
  overflow: auto;
  margin: 8px 11px;
  padding: 8px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(7, 18, 37, 0.45);
}

.combination-list span {
  padding: 4px 2px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--muted);
  font-size: 9px;
}

.round-stats {
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  margin: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.modal-totals {
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  margin-bottom: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.bulk-card,
.slip-card,
.empty-state,
.history-card,
.safety-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(17, 31, 55, 0.9);
}

.player-week-filter {
  display: grid;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px;
}

.player-week-filter label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850;
  text-transform: uppercase;
}

.casino-shell {
  width: 100%;
  min-height: 100dvh;
  margin: 0 auto;
  padding-bottom: calc(70px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 100% 0%, rgba(126, 79, 215, 0.2), transparent 32%),
    linear-gradient(180deg, #0d1125, #071225 52%, #050b18);
  color: var(--text);
}

.casino-header {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: calc(10px + env(safe-area-inset-top)) 12px 11px;
  border-bottom: 1px solid #41366c;
  background: rgba(8, 15, 32, 0.96);
  backdrop-filter: blur(16px);
}

.casino-sports-back,
.casino-lobby-back {
  border-color: #765db2;
  background: #211d3e;
}

.casino-game-summary {
  display: grid;
  grid-template-columns: minmax(104px, 1.35fr) repeat(3, minmax(58px, 0.72fr));
  gap: 5px;
  align-items: stretch;
}

.casino-game-summary .back-button {
  width: 100%;
  min-width: 0;
  padding-right: 6px;
  padding-left: 6px;
}

.casino-game-summary > span {
  display: grid;
  min-width: 0;
  padding: 6px 4px;
  border: 1px solid #384c67;
  border-radius: 8px;
  place-items: center;
  background: #101b2e;
  text-align: center;
}

.casino-game-summary small {
  color: var(--muted);
  font-size: 7px;
  text-transform: uppercase;
}

.casino-game-summary strong {
  overflow: hidden;
  max-width: 100%;
  font-size: 10px;
  text-overflow: ellipsis;
}

.casino-game-summary .risk strong { color: #ffd77a; }
.casino-game-summary .wins strong { color: #66e2a7; }
.casino-game-summary .losses strong { color: #ff7f8c; }

.casino-brand-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
}

.casino-brand-row h1 {
  margin: 2px 0 0;
  font-size: 21px;
}

.casino-balance {
  display: grid;
  gap: 3px;
  padding: 7px 10px;
  border: 1px solid #57477c;
  border-radius: 8px;
  background: #17182f;
  text-align: right;
}

.casino-balance span {
  color: #a99fbe;
  font-size: 8px;
  text-transform: uppercase;
}

.casino-balance strong {
  color: #aef3d3;
  font-size: 13px;
}

.casino-header-metrics {
  display: grid;
  gap: 7px;
  justify-items: end;
  min-width: 128px;
}

.casino-net-chip {
  width: 100%;
  margin-top: 0;
  padding: 7px 9px;
  border-color: rgba(82, 150, 255, 0.35);
  background: #121b31;
  text-align: right;
}

.casino-net-chip strong {
  font-size: 12px;
}

.casino-net-chip small {
  display: none;
}

.casino-content {
  padding: 13px 10px calc(100px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}

.casino-intro {
  margin: 0 2px 13px;
}

.casino-intro h2 {
  margin: 3px 0;
  font-size: 20px;
}

.casino-intro p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.casino-game-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.casino-game-card {
  display: grid;
  min-height: 128px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--game-accent) 55%, #334561);
  border-radius: 12px;
  place-items: center;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--game-accent) 22%, transparent), transparent 58%),
    linear-gradient(145deg, #1a2942, #111b30);
  cursor: pointer;
}

.casino-game-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 2px solid var(--game-accent);
  border-radius: 50%;
  box-shadow: 0 0 18px color-mix(in srgb, var(--game-accent) 32%, transparent);
  color: var(--game-accent);
  font-size: 15px;
  font-weight: 900;
}

.casino-game-icon.large {
  width: 64px;
  height: 64px;
  margin: 0 auto 10px;
  font-size: 19px;
}

.casino-game-card strong {
  font-size: 13px;
}

.casino-game-card small {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.casino-placeholder-card {
  margin-top: 12px;
  padding: 18px 14px;
  border: 1px solid color-mix(in srgb, var(--game-accent) 55%, #334561);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--game-accent) 18%, transparent), transparent 40%),
    #111c31;
  text-align: center;
}

.casino-playable-card {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--game-accent) 55%, #334561);
  border-radius: 13px;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--game-accent) 14%, transparent), transparent 30%),
    #111c31;
}

.casino-play-cockpit {
  position: sticky;
  top: calc(112px + env(safe-area-inset-top));
  z-index: 18;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 -7px 10px;
  padding: 8px 7px;
  border: 1px solid #4a5070;
  border-radius: 10px;
  background: rgba(9, 17, 35, 0.96);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
  flex-wrap: wrap;
}

.casino-play-cockpit .chip-selector {
  flex: 1;
  justify-content: flex-start;
  gap: 4px;
  overflow: hidden;
  margin: 0;
}

.casino-play-cockpit .casino-chip {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-width: 3px;
  font-size: 8px;
}

.casino-play-cockpit button {
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid #526c8c;
  border-radius: 8px;
  background: #172944;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.casino-play-cockpit button.primary {
  border-color: #70c5ff;
  background: linear-gradient(135deg, #1777bd, #309fe7);
}

.cockpit-actions {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.cockpit-wager {
  height: 39px;
  flex: 1;
  font-size: 13px;
}

.custom-chip-input {
  width: 66px;
  height: 39px;
  flex: 0 0 66px;
  font-size: 12px;
}

.cockpit-status,
.cockpit-wager-display {
  display: grid;
  min-width: 92px;
  gap: 2px;
  color: var(--muted);
  font-size: 8px;
  text-align: center;
  text-transform: uppercase;
}

.cockpit-wager-display strong {
  color: white;
  font-size: 14px;
}

.game-stage {
  scroll-margin-top: 205px;
}

.game-result-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
}

.game-result-banner.win {
  border: 1px solid #62e5aa;
  background: linear-gradient(90deg, rgba(36, 142, 95, 0.68), rgba(28, 83, 65, 0.72));
  color: #caffea;
  animation: win-pulse 0.75s ease-out 3;
}

.game-result-banner.loss {
  border: 1px solid #a74c5b;
  background: rgba(102, 31, 45, 0.55);
  color: #ffc1c8;
  animation: loss-flash 0.45s ease-out;
}

.game-result-banner.push {
  border: 1px solid #657b98;
  background: rgba(49, 65, 88, 0.7);
  color: #d6e4f4;
}

.game-result-banner span {
  font-size: 15px;
}

.playable-game-title {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 12px;
}

.playable-game-title h2 {
  margin: 2px 0 0;
  font-size: 20px;
}

.casino-main-action {
  width: 100%;
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--game-accent) 80%, white);
  border-radius: 10px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--game-accent) 70%, #174c88), var(--game-accent));
  box-shadow: 0 8px 20px color-mix(in srgb, var(--game-accent) 22%, transparent);
  color: white;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.casino-main-action:disabled {
  opacity: 0.4;
}

.chip-selector {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin: 12px 0;
}

.casino-chip {
  width: 43px;
  height: 43px;
  border: 4px dashed rgba(255, 255, 255, 0.65);
  border-radius: 50%;
  background: #27629b;
  box-shadow: inset 0 0 0 2px #10233d;
  font-size: 10px;
  font-weight: 900;
}

.casino-chip:nth-child(2) { background: #c33e50; }
.casino-chip:nth-child(3) { background: #287f5d; }
.casino-chip:nth-child(4) { background: #6e4ea8; }
.casino-chip:nth-child(5) { background: #252d3c; }
.casino-chip.active {
  outline: 3px solid #ffdf78;
  transform: translateY(-3px);
}

.game-action-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-top: 11px;
}

.game-action-grid.four {
  grid-template-columns: repeat(2, 1fr);
}

.game-action-grid button,
.bet-choice-row button,
.keno-tools button,
.slot-wager-row button {
  min-height: 43px;
  border: 1px solid #526c8c;
  border-radius: 8px;
  background: #172944;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.game-action-grid button.primary {
  border-color: #62baff;
  background: #2379bd;
}

.game-action-grid button:disabled {
  opacity: 0.35;
}

.roulette-wheel {
  position: relative;
  display: grid;
  width: 258px;
  height: 258px;
  margin: 12px auto;
  border: 13px solid #8a652c;
  border-radius: 50%;
  place-items: center;
  background:
    conic-gradient(#168050 0deg 9.73deg, transparent 9.73deg 360deg),
    repeating-conic-gradient(from 9.73deg, #b72b3e 0deg 9.73deg, #111a29 9.73deg 19.46deg);
  box-shadow: inset 0 0 0 8px #d1a458, 0 10px 25px rgba(0, 0, 0, 0.4);
}

.roulette-wheel::after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: #111a29;
  box-shadow: inset 0 0 0 5px #c99d50;
}

.roulette-wheel strong {
  z-index: 4;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 50%;
  font-size: 25px;
}

.roulette-wheel strong.red { background: #a2293c; }
.roulette-wheel strong.black { background: #0b111b; }
.roulette-wheel strong.green { background: #168050; }
.roulette-wheel strong.neutral { background: #273247; }

.roulette-ball {
  position: absolute;
  top: 7px;
  left: calc(50% - 7px);
  z-index: 5;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 2px 5px #000;
  transform-origin: 7px 108px;
}

.roulette-ball.landed {
  transform: rotate(var(--landing-angle)) translateY(7px);
}

.roulette-wheel.spinning {
  animation: roulette-wheel-spin 8s cubic-bezier(0.02, 0.86, 0.14, 1) forwards;
}

.roulette-number-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 50%;
}

.roulette-number-ring span {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 18px;
  height: 18px;
  margin: -9px;
  place-items: center;
  border-radius: 3px;
  color: white;
  font-size: 7px;
  font-weight: 900;
  transform:
    rotate(var(--angle))
    translateY(-101px)
    rotate(calc(-1 * var(--angle)));
}

.roulette-number-ring span.red { background: #b3263b; }
.roulette-number-ring span.black { background: #0b111b; }
.roulette-number-ring span.green { background: #168050; }

.roulette-number-ring span.green {
  width: 23px;
  height: 23px;
  margin: -11.5px;
  border: 2px solid #a8f2ce;
  box-shadow: 0 0 10px rgba(67, 225, 151, 0.85);
  font-size: 9px;
}


.roulette-stage {
  min-height: 245px;
  padding: 4px 0 10px;
  text-align: center;
}

.roulette-winning-number {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.roulette-winning-number strong {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: white;
  font-size: 15px;
}

.roulette-winning-number .red { background: #a2293c; }
.roulette-winning-number .black { background: #101621; }
.roulette-winning-number .green { background: #19734c; }

.number-cell.winning {
  outline: 3px solid #ffe478;
  box-shadow: 0 0 14px #ffd24f;
  animation: number-win 0.6s ease-out 3;
}

.roulette-board {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 5px;
}

.number-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}

.number-cell {
  position: relative;
  min-height: 36px;
  padding: 0;
  border: 1px solid #6d8098;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 850;
}

.number-cell.red { background: #9e293b; }
.number-cell.black { background: #111824; }
.number-cell.green { background: #19734c; }
.number-cell i,
.outside-bets i,
.sicbo-board i {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  min-width: 14px;
  height: 14px;
  padding: 0 2px;
  place-items: center;
  border-radius: 50%;
  background: #ffd768;
  color: #162033;
  font-size: 7px;
  font-style: normal;
}

.outside-bets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  margin-top: 6px;
}

.inside-bets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
  margin-top: 6px;
}

.inside-bets button {
  position: relative;
  min-height: 40px;
  border: 1px solid #84704d;
  border-radius: 6px;
  background: #24302b;
  font-size: 9px;
}

.outside-bets button,
.sicbo-board button {
  position: relative;
  min-height: 39px;
  border: 1px solid #577391;
  border-radius: 6px;
  background: #152b43;
  font-size: 9px;
}

.game-history {
  margin-top: 13px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
}

.game-history h3 {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.game-history > div {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.game-history > div > span {
  display: grid;
  min-width: 0;
  min-height: 42px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  place-items: center;
  background: #0d192b;
  font-size: 9px;
  text-align: center;
}

.game-history .red { color: #ff7180; }
.game-history .black { color: white; }
.game-history .green { color: #72e6b2; }

.game-history small {
  color: var(--muted);
  font-size: 7px;
}

.blackjack-table,
.baccarat-table {
  display: grid;
  gap: 10px;
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #33664f;
  border-radius: 45px 45px 12px 12px;
  background: radial-gradient(circle at 50% 30%, #176041, #0b3527);
}

.baccarat-table .game-result-banner {
  grid-column: 1 / -1;
}

.hand-zone {
  min-height: 91px;
  padding: 8px;
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 10px;
}

.hand-zone.active {
  border-color: #ffd66d;
  box-shadow: 0 0 12px rgba(255, 214, 109, 0.2);
}

.hand-zone label {
  display: block;
  margin-bottom: 7px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.hand-zone small {
  color: #bfdfd1;
  font-size: 8px;
}

.card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.playing-card {
  display: grid;
  width: 39px;
  height: 54px;
  padding: 4px;
  border-radius: 5px;
  background: #f8fbff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  color: #121c2b;
  text-align: left;
}

.playing-card.card-enter {
  animation: card-deal 0.28s ease-out both;
}

.playing-card i {
  align-self: end;
  font-size: 17px;
  font-style: normal;
  text-align: center;
}

.playing-card.red-suit { color: #c52d40; }
.playing-card.hidden {
  place-items: center;
  background: repeating-linear-gradient(45deg, #2c63a1, #2c63a1 4px, #173a68 4px, #173a68 8px);
  color: white;
  font-size: 18px;
}

.empty-table {
  padding: 35px 10px;
  color: #9bc4b2;
  font-size: 10px;
  text-align: center;
}

.blackjack-actions {
  grid-template-columns: repeat(3, 1fr);
}

.baccarat-table {
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  border-radius: 12px;
}

.versus {
  color: #e5c77a;
  font-size: 10px;
  font-weight: 900;
}

.versus {
  display: grid;
  gap: 3px;
  place-items: center;
}

.versus span {
  color: #c6a5ff;
  font-size: 8px;
}

.bet-choice-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 10px 0;
}

.bet-choice-row button {
  display: grid;
  place-items: center;
}

.bet-choice-row button.active {
  border-color: #b89aff;
  background: #5f45a2;
}

.bet-choice-row small {
  display: block;
  color: #c9bddf;
  font-size: 7px;
}

.baccarat-side-bets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: 8px 0 12px;
}

.baccarat-side-bets button {
  min-height: 42px;
  padding: 5px;
  border: 1px solid #5d557c;
  border-radius: 7px;
  background: #1d213d;
  font-size: 8px;
  font-weight: 750;
  text-transform: capitalize;
}

.baccarat-side-bets button.active {
  border-color: #c2a0ff;
  background: #65469d;
  box-shadow: 0 0 12px rgba(184, 143, 255, 0.25);
}

.craps-table {
  padding: 12px;
  border: 2px solid #b08a45;
  border-radius: 12px;
  background: #15543b;
}

.craps-throw-zone {
  position: relative;
  min-height: 176px;
  overflow: hidden;
  margin: 12px 0;
  border: 2px solid #d0ad65;
  border-radius: 12px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 50% 70%, #1d704f, #0f4a35);
  background-size: 24px 24px, 24px 24px, auto;
  perspective: 500px;
}

.craps-back-wall {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 27px;
  border-bottom: 3px solid #6d4f2c;
  background: repeating-linear-gradient(90deg, #241e1c 0 5px, #44352d 5px 10px);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.35);
}

.craps-throw-zone .dice-row {
  position: absolute;
  inset: 28px 0 22px;
  margin: 0;
}

.craps-die {
  position: absolute;
  bottom: 18px;
  left: calc(50% - 65px);
  display: grid;
  width: 58px;
  height: 58px;
  padding: 8px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid #ff8d96;
  border-radius: 11px;
  background: linear-gradient(145deg, #ef3d50, #a70f25);
  box-shadow: inset -6px -7px 10px rgba(72, 0, 10, 0.3), inset 4px 4px 8px rgba(255, 170, 177, 0.22), 0 7px 13px rgba(0, 0, 0, 0.4);
  transform-style: preserve-3d;
}

.craps-die.die-2 {
  left: calc(50% + 8px);
}

.craps-die .pip {
  display: block;
  width: 8px;
  height: 8px;
  align-self: center;
  justify-self: center;
  border-radius: 50%;
  background: transparent;
}

.craps-die .pip.show {
  background: #fff8ec;
  box-shadow: inset 1px 1px 2px rgba(86, 0, 8, 0.45);
}

.craps-die.throwing.die-1 {
  animation: craps-throw-one 4s cubic-bezier(0.12, 0.63, 0.2, 1) forwards;
}

.craps-die.throwing.die-2 {
  animation: craps-throw-two 4s cubic-bezier(0.12, 0.63, 0.2, 1) forwards;
}

.throw-status {
  position: absolute;
  right: 0;
  bottom: 5px;
  left: 0;
  color: #d0e9dc;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.craps-roll-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -5px 0 10px;
  padding: 8px 10px;
  border: 1px solid #d3b772;
  border-radius: 8px;
  background: #0c3528;
  color: #d7e7df;
  font-size: 10px;
}

.craps-roll-result span strong {
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin: 0 2px;
  place-items: center;
  border-radius: 5px;
  background: #c91f36;
  color: white;
}

.craps-roll-result > b {
  color: #ffe19a;
  font-size: 13px;
}

.craps-table .game-result-banner {
  margin-bottom: 10px;
}

.point-indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: #0d2f24;
  font-size: 9px;
  text-transform: uppercase;
}

.point-indicator strong {
  font-size: 17px;
}

.dice-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 14px 0;
}

.die {
  display: grid;
  width: 52px;
  height: 52px;
  border-radius: 9px;
  place-items: center;
  background: #f6f8fb;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
  color: #162033;
  font-size: 22px;
  font-weight: 900;
}

.die.rolling {
  animation: dice-roll 0.35s linear infinite;
}

.dice-row b {
  font-size: 10px;
}

.craps-bets {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 5px;
}

.craps-bets button {
  min-height: 38px;
  border: 1px solid #d4bc76;
  border-radius: 6px;
  background: rgba(6, 38, 27, 0.62);
  font-size: 9px;
  font-weight: 800;
}

.craps-bets button.active {
  background: #be8c37;
  color: #151b22;
}

.craps-bets button.bet-win {
  border-color: #72e0aa;
  background: #1f7b57;
  animation: win-pulse 0.65s ease-out 2;
}

.craps-bets button.bet-loss {
  border-color: #c75a68;
  background: #682d39;
}

.slot-machine {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  margin: 13px 0;
  padding: 8px;
  border: 5px solid #c69a40;
  border-radius: 13px;
  background: #291d33;
}

.slot-cabinet {
  padding: 10px;
  border: 5px solid #a9782b;
  border-radius: 20px;
  background: linear-gradient(145deg, #372143, #151a2a);
  box-shadow: inset 0 0 0 3px #e6bd63, 0 14px 30px rgba(0, 0, 0, 0.45);
}

.slot-marquee {
  padding: 9px;
  color: #ffdf75;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.16em;
  text-align: center;
  text-shadow: 0 0 10px #ff8e35;
}

.slot-marquee b {
  color: white;
}

.slot-cabinet .slot-machine {
  margin: 4px 0;
  border-width: 3px;
}

.payline-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  color: #f1bd4f;
  font-size: 8px;
  text-align: center;
}

.slot-readout {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 7px;
  background: #090d18;
}

.slot-readout span {
  display: grid;
  gap: 3px;
  color: #8d98ab;
  font-size: 7px;
  text-transform: uppercase;
}

.slot-readout b {
  color: #8df0c2;
  font-size: 11px;
}

.slot-spin-button {
  min-width: 65px;
  border-radius: 999px !important;
  background: radial-gradient(circle, #ef5858, #a8172e) !important;
  box-shadow: 0 0 15px rgba(255, 71, 88, 0.35);
}

.slot-reel {
  display: grid;
  gap: 3px;
  background: #eef3f8;
  will-change: transform, filter;
}

.slot-reel-window {
  height: 153px;
  overflow: hidden;
  border: 2px solid #8f6d35;
  border-radius: 8px;
  background: #eef3f8;
  box-shadow: inset 0 8px 12px rgba(0, 0, 0, 0.22), inset 0 -8px 12px rgba(0, 0, 0, 0.22);
}

.slot-reel span {
  display: grid;
  min-width: 0;
  height: 49px;
  padding: 2px;
  place-items: center;
  border-bottom: 1px solid #d3dbe4;
  background: linear-gradient(180deg, #ffffff, #e8edf3);
  color: #162033;
  font-size: 8px;
  font-weight: 900;
}

.slot-reel span.winner {
  background: #ffe077;
  box-shadow: inset 0 0 0 3px #e9901e;
}

.slot-machine.spinning .slot-reel {
  animation-name: slot-reel-scroll;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0.08, 0.72, 0.14, 1);
}

.slot-machine.spinning .reel-1 { animation-duration: 1.6s; }
.slot-machine.spinning .reel-2 { animation-duration: 1.95s; }
.slot-machine.spinning .reel-3 { animation-duration: 2.3s; }
.slot-machine.spinning .reel-4 { animation-duration: 2.65s; }
.slot-machine.spinning .reel-5 { animation-duration: 3s; }

.slot-machine:not(.spinning) .slot-reel {
  animation: reel-land 0.35s ease-out;
}

.symbol-picture {
  display: grid !important;
  width: 40px;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  place-items: center;
  background: transparent !important;
  font-size: 27px !important;
  line-height: 1;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
}

.symbol-picture.seven {
  color: #ef233c;
  font-family: Georgia, serif;
  font-size: 35px !important;
  font-style: italic;
  text-shadow: 2px 2px 0 #ffcf4b;
}

.symbol-picture.bell { color: #f2b632; }
.symbol-picture.cherry { color: #d91e36; }
.symbol-picture.lemon { color: #f4d72f; }
.symbol-picture.diamond { color: #20a8e8; }

.symbol-picture.bar {
  width: 42px;
  height: 24px !important;
  border: 3px solid #f1d05a !important;
  border-radius: 4px;
  background: linear-gradient(#252a33, #05070b) !important;
  color: white;
  font-size: 12px !important;
  letter-spacing: 0.05em;
  box-shadow: 0 0 0 2px #111;
}

.symbol-picture.wild {
  color: #9b43e9;
  font-size: 29px !important;
  text-shadow: 0 0 7px #e3b6ff;
}

.symbol-picture.wild small {
  margin-top: -8px;
  color: #7522bd;
  font-size: 6px;
  font-weight: 950;
}

.slot-wager-row {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  gap: 7px;
  align-items: center;
  margin: 10px 0;
}

.slot-wager-row > div {
  display: grid;
  place-items: center;
}

.slot-wager-row span {
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
}

.slot-wager-row strong {
  font-size: 17px;
}

.payout-table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 11px;
}

.payout-table > span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--muted);
  font-size: 8px;
}

.payout-table .symbol-picture {
  width: 25px;
  height: 25px !important;
  font-size: 18px !important;
}

.payout-table .symbol-picture.seven { font-size: 23px !important; }
.payout-table .symbol-picture.bar {
  width: 28px;
  height: 17px !important;
  border-width: 2px !important;
  font-size: 8px !important;
}

.sicbo-dice {
  margin-top: 12px;
  padding: 11px;
  border-radius: 12px;
  background: #391c2c;
}

.sicbo-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  max-height: 310px;
  overflow-y: auto;
  padding: 3px;
}

.keno-tools {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
  align-items: center;
  margin: 12px 0 8px;
}

.keno-tools span {
  font-size: 9px;
  text-align: center;
}

.keno-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
}

.keno-board button {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: 1px solid #4c6d8d;
  border-radius: 5px;
  background: #13253d;
  font-size: 9px;
}

.keno-board button.selected {
  border-color: #d6a94a;
  background: #795d28;
}

.keno-board button.drawn {
  box-shadow: inset 0 0 0 2px #4eb5ef;
}

.keno-board button.match {
  background: #20885f;
  box-shadow: inset 0 0 0 2px #8af1c8;
}

.keno-result {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid #4b718f;
  border-radius: 8px;
  background: #12283a;
  text-align: center;
}

.keno-stage {
  min-height: 74px;
  padding: 8px;
  border: 1px solid #385b77;
  border-radius: 9px;
  background: #0e1d30;
  text-align: center;
}

.keno-stage > p {
  color: var(--muted);
  font-size: 10px;
}

.keno-result span {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

@keyframes wheel-spin {
  to { transform: rotate(360deg); }
}

@keyframes roulette-wheel-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(900deg); }
}

@keyframes dice-roll {
  50% { transform: rotate(16deg) scale(0.88); }
}

@keyframes craps-throw-one {
  0% { transform: translate(-155px, 74px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.72); }
  18% { transform: translate(-112px, -28px) rotateX(380deg) rotateY(280deg) rotateZ(160deg) scale(0.88); }
  40% { transform: translate(-72px, 20px) rotateX(760deg) rotateY(620deg) rotateZ(430deg) scale(1); }
  62% { transform: translate(-38px, -8px) rotateX(1120deg) rotateY(910deg) rotateZ(670deg) scale(0.94); }
  75% { transform: translate(-20px, 20px) rotateX(1330deg) rotateY(1090deg) rotateZ(810deg) scale(1); }
  84% { transform: translate(-11px, 4px) rotateX(1390deg) rotateY(1050deg) rotateZ(690deg) scale(0.97); }
  90% { transform: translate(-6px, 12px) rotateX(1420deg) rotateY(1070deg) rotateZ(710deg) scale(1); }
  95% { transform: translate(-2px, 5px) rotateX(1435deg) rotateY(1078deg) rotateZ(718deg) scale(0.99); }
  100% { transform: translate(0, 0) rotateX(1440deg) rotateY(1080deg) rotateZ(720deg) scale(1); }
}

@keyframes craps-throw-two {
  0% { transform: translate(-170px, 82px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(0.7); }
  18% { transform: translate(-125px, -18px) rotateX(330deg) rotateY(410deg) rotateZ(210deg) scale(0.86); }
  40% { transform: translate(-82px, 28px) rotateX(710deg) rotateY(790deg) rotateZ(500deg) scale(1); }
  62% { transform: translate(-45px, -14px) rotateX(1060deg) rotateY(1170deg) rotateZ(760deg) scale(0.95); }
  75% { transform: translate(-24px, 18px) rotateX(1280deg) rotateY(1390deg) rotateZ(900deg) scale(1); }
  84% { transform: translate(-13px, 2px) rotateX(1370deg) rotateY(1375deg) rotateZ(1010deg) scale(0.97); }
  90% { transform: translate(-7px, 12px) rotateX(1410deg) rotateY(1415deg) rotateZ(1050deg) scale(1); }
  95% { transform: translate(-3px, 5px) rotateX(1433deg) rotateY(1435deg) rotateZ(1073deg) scale(0.99); }
  100% { transform: translate(0, 0) rotateX(1440deg) rotateY(1440deg) rotateZ(1080deg) scale(1); }
}

@keyframes reel-blur {
  50% { transform: translateY(5px); filter: blur(2px); }
}

@keyframes slot-reel-scroll {
  0% { transform: translateY(0); filter: blur(0); }
  8% { transform: translateY(-145px); filter: blur(2.5px); }
  35% { transform: translateY(-520px); filter: blur(3px); }
  68% { transform: translateY(-700px); filter: blur(1.7px); }
  84% { transform: translateY(-755px); filter: blur(0.8px); }
  93% { transform: translateY(-784px); filter: blur(0); }
  97% { transform: translateY(-775px); filter: blur(0); }
  100% { transform: translateY(-780px); filter: blur(0); }
}

@keyframes reel-land {
  0% { transform: translateY(-7px); }
  65% { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

@keyframes card-deal {
  from { opacity: 0; transform: translateY(-18px) rotate(-5deg); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}

@keyframes win-pulse {
  0% { transform: scale(0.96); box-shadow: 0 0 0 rgba(72, 230, 160, 0); }
  50% { transform: scale(1.02); box-shadow: 0 0 26px rgba(72, 230, 160, 0.34); }
  100% { transform: scale(1); box-shadow: 0 0 0 rgba(72, 230, 160, 0); }
}

@keyframes loss-flash {
  50% { background: rgba(140, 40, 55, 0.78); }
}

@keyframes number-win {
  50% { transform: scale(1.08); }
}

.chicken-mini-stat {
  display: grid;
  gap: 2px;
  min-width: 92px;
  padding: 7px 9px;
  border: 1px solid #314a68;
  border-radius: 10px;
  background: #101d32;
  color: #9fb0c8;
  font-size: 9px;
  text-transform: uppercase;
}

.chicken-mini-stat strong {
  color: #fff;
  font-size: 14px;
}

.chicken-stage {
  display: grid;
  gap: 10px;
  width: min(100%, 680px);
  margin: 0 auto;
}

.chicken-game-title {
  display: grid;
  gap: 3px;
  padding: 4px 2px 2px;
  text-align: center;
}

.chicken-game-kicker {
  color: #ffd166;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.chicken-game-title strong {
  color: #fff;
  font-size: clamp(21px, 5vw, 30px);
  line-height: 1;
  text-transform: uppercase;
}

.chicken-game-title small {
  color: #9fb0c8;
  font-size: 11px;
}

.chicken-topline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.chicken-topline > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 8px 5px;
  border: 1px solid #314866;
  border-radius: 11px;
  background: #101d32;
  text-align: center;
}

.chicken-topline span {
  overflow: hidden;
  color: #91a7c3;
  font-size: 9px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.chicken-topline strong {
  color: #fff;
  font-size: 15px;
}

.chicken-board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(35px, .78fr) repeat(7, minmax(31px, 1fr)) minmax(37px, .82fr);
  width: 100%;
  min-height: 286px;
  padding: 0;
  overflow: hidden;
  border: 2px solid #34577c;
  border-radius: 20px;
  background: #182332;
  box-shadow: inset 0 0 40px rgba(0,0,0,.42), 0 14px 26px rgba(0,0,0,.28);
  color: inherit;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.chicken-board:disabled {
  cursor: default;
  opacity: 1;
}

.chicken-board:not(:disabled) {
  cursor: pointer;
}

.chicken-board:not(:disabled):active {
  transform: scale(.995);
}

.safe-zone {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-width: 0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,255,255,.12), transparent 38%),
    linear-gradient(180deg, #2a724c, #17472f);
  color: #d2ffe5;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .08em;
  text-align: center;
}

.safe-zone::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 18px, rgba(255,255,255,.05) 19px 20px);
}

.safe-zone span {
  position: relative;
  z-index: 2;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.safe-zone.finish {
  background:
    radial-gradient(circle at 50% 20%, rgba(255,229,155,.2), transparent 42%),
    linear-gradient(180deg, #8b6117, #4a3512);
  color: #ffe59b;
}

.chicken-road-lane {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255,255,255,.08);
  border-left: 1px solid rgba(0,0,0,.28);
  background:
    linear-gradient(90deg, transparent 48%, rgba(255,255,255,.08) 49% 51%, transparent 52%),
    linear-gradient(180deg, #26313f, #17212f);
}

.chicken-road-lane.next {
  background:
    linear-gradient(90deg, transparent 47%, rgba(255,209,102,.22) 48% 52%, transparent 53%),
    linear-gradient(180deg, #313a42, #202937);
}

.chicken-road-lane.cleared {
  box-shadow: inset 0 0 24px rgba(67,224,151,.12);
}

.lane-dashes {
  position: absolute;
  inset: 0;
  opacity: .52;
  background: repeating-linear-gradient(180deg, transparent 0 17px, rgba(255,255,255,.58) 18px 29px, transparent 30px 47px);
  clip-path: polygon(47% 0, 53% 0, 53% 100%, 47% 100%);
}


.lane-pad {
  position: absolute;
  top: 58%;
  left: 50%;
  z-index: 5;
  display: grid;
  width: min(29px, 72%);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #6b7788;
  border-radius: 50%;
  background: radial-gradient(circle, #4b5664 0 32%, #27313e 34% 58%, #101722 60%);
  box-shadow: 0 5px 9px rgba(0,0,0,.38);
  transform: translate(-50%, -50%);
}

.lane-pad i {
  color: #9eabbc;
  font-size: 8px;
  font-style: normal;
  font-weight: 900;
}

.chicken-road-lane.next .lane-pad {
  border-color: #ffd166;
  box-shadow: 0 0 0 4px rgba(255,209,102,.12), 0 0 22px rgba(255,209,102,.34);
  animation: chicken-pad-pulse 1s ease-in-out infinite;
}

.chicken-road-lane.cleared .lane-pad {
  border-color: #4fe09b;
  background: radial-gradient(circle, #39bd7d 0 32%, #1d704d 34% 58%, #0f3526 60%);
}

.road-vehicle,
.attempt-vehicle,
.impact-vehicle {
  position: absolute;
  left: 50%;
  z-index: 6;
  width: min(34px, 82%);
  height: 66px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 11px 11px 14px 14px;
  background: linear-gradient(90deg, #ef4962 0 13%, #bd263f 14% 82%, #7d1429 83%);
  box-shadow: 0 9px 12px rgba(0,0,0,.42), inset 4px 0 5px rgba(255,255,255,.14), inset -4px 0 5px rgba(0,0,0,.18);
  transform: translateX(-50%);
  transform-origin: center;
}

.road-vehicle::before,
.road-vehicle::after,
.attempt-vehicle::before,
.attempt-vehicle::after,
.impact-vehicle::before,
.impact-vehicle::after {
  content: "";
  position: absolute;
  left: -4px;
  width: 5px;
  height: 15px;
  border-radius: 4px 2px 2px 4px;
  background: #050a11;
  box-shadow: 36px 0 0 #050a11;
}

.road-vehicle::before,
.attempt-vehicle::before,
.impact-vehicle::before { top: 9px; }

.road-vehicle::after,
.attempt-vehicle::after,
.impact-vehicle::after { bottom: 9px; }

.vehicle-cabin,
.vehicle-glass,
.vehicle-lights {
  position: absolute;
  pointer-events: none;
}

.vehicle-cabin {
  inset: 12px 5px 17px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(8,25,43,.22));
}

.vehicle-glass {
  top: 15px;
  right: 7px;
  left: 7px;
  height: 17px;
  border-radius: 5px 5px 2px 2px;
  background: linear-gradient(150deg, #bdeaff 0 28%, #38647e 31% 68%, #162f44 70%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}

.vehicle-lights {
  right: 5px;
  bottom: 3px;
  left: 5px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #fff4a8 0 25%, transparent 26% 74%, #fff4a8 75%);
  box-shadow: 0 3px 8px rgba(255,226,117,.32);
}

.vehicle-0 { background: linear-gradient(90deg, #ff6378 0 13%, #c51f3e 14% 82%, #86142c 83%); }
.vehicle-1 { background: linear-gradient(90deg, #62c8ff 0 13%, #1676b6 14% 82%, #0e456f 83%); }
.vehicle-2 { background: linear-gradient(90deg, #ffe079 0 13%, #d79618 14% 82%, #8a5709 83%); }
.vehicle-3 {
  height: 80px;
  border-radius: 7px 7px 12px 12px;
  background: linear-gradient(90deg, #c6d3dc 0 12%, #65798b 13% 84%, #344454 85%);
}
.vehicle-3 .vehicle-cabin { top: 43px; bottom: 12px; }
.vehicle-3 .vehicle-glass { top: 47px; height: 14px; }
.vehicle-3 .vehicle-lights { bottom: 3px; }

.road-vehicle {
  top: -92px;
  opacity: .94;
  animation: chicken-vehicle-down var(--lane-speed, 2.8s) linear infinite;
  animation-delay: var(--lane-delay, 0s);
  will-change: transform;
}

.chicken-road-lane.reverse .road-vehicle {
  top: auto;
  bottom: -92px;
  animation-name: chicken-vehicle-up;
}

.road-vehicle.ghost {
  opacity: .54;
  animation-delay: calc(var(--lane-delay, 0s) - 1.24s);
  animation-duration: calc(var(--lane-speed, 2.8s) * 1.1);
  filter: saturate(.82) brightness(.88);
  transform: translateX(-50%) scale(.86);
}

.chicken-token {
  position: absolute;
  top: 58%;
  left: var(--chicken-left, 5.55%);
  z-index: 14;
  width: 50px;
  height: 51px;
  pointer-events: none;
  transform: translate(-50%, -58%);
  transition: filter .18s;
  will-change: left, transform;
}

.chicken-runner {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  transform-origin: 48% 74%;
}

.chicken-torso {
  position: absolute;
  top: 13px;
  left: 8px;
  width: 29px;
  height: 27px;
  border: 2px solid #dba93d;
  border-radius: 52% 48% 46% 54%;
  background: radial-gradient(circle at 33% 27%, #fffdf2 0 24%, #ffe17e 48%, #e49a2c 100%);
  box-shadow: inset -4px -3px 5px rgba(155,74,10,.18), 0 4px 5px rgba(0,0,0,.25);
  transform: rotate(-5deg);
}

.chicken-wing {
  position: absolute;
  top: 21px;
  left: 9px;
  z-index: 3;
  width: 19px;
  height: 14px;
  border: 1px solid #d28b22;
  border-radius: 65% 38% 70% 32%;
  background: linear-gradient(145deg, #fff4ba, #e9a635);
  transform: rotate(12deg);
  transform-origin: 80% 35%;
}

.chicken-tail {
  position: absolute;
  top: 13px;
  left: 1px;
  z-index: 1;
  width: 15px;
  height: 17px;
  border-radius: 75% 15% 70% 25%;
  background: #fff6cf;
  box-shadow: -4px -3px 0 -1px #f5c954, -1px 5px 0 -2px #db8b2a;
  transform: rotate(-32deg);
  transform-origin: 100% 70%;
}

.chicken-neck {
  position: absolute;
  top: 8px;
  left: 30px;
  z-index: 2;
  width: 10px;
  height: 19px;
  border-radius: 48%;
  background: linear-gradient(90deg, #ffe988, #e6a32e);
  transform: rotate(-11deg);
}

.chicken-head {
  position: absolute;
  top: 1px;
  left: 31px;
  z-index: 4;
  width: 19px;
  height: 19px;
  border: 1px solid #d59427;
  border-radius: 50% 52% 44% 48%;
  background: radial-gradient(circle at 34% 28%, #fffceb, #ffd968 67%, #e29a2e);
  box-shadow: 0 2px 3px rgba(0,0,0,.2);
}

.chicken-eye {
  position: absolute;
  top: 5px;
  right: 4px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #101621;
  box-shadow: 0 0 0 1px #fff;
}

.chicken-beak {
  position: absolute;
  top: 9px;
  right: -8px;
  width: 9px;
  height: 7px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  background: #ff8a2a;
}

.chicken-comb {
  position: absolute;
  top: -6px;
  left: 3px;
  width: 12px;
  height: 8px;
  border-radius: 60% 60% 20% 20%;
  background: radial-gradient(circle at 20% 70%, #ef304e 0 28%, transparent 30%), radial-gradient(circle at 52% 48%, #ff4960 0 34%, transparent 36%), radial-gradient(circle at 85% 70%, #d91f3d 0 29%, transparent 31%);
}

.chicken-leg {
  position: absolute;
  top: 37px;
  left: 20px;
  z-index: 1;
  width: 3px;
  height: 10px;
  border-radius: 3px;
  background: #e89127;
  transform-origin: 50% 0;
}

.chicken-leg b {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 9px;
  height: 3px;
  border-radius: 4px;
  background: #e89127;
  transform-origin: left center;
}

.chicken-leg.leg-front { left: 31px; }

.chicken-shadow {
  position: absolute;
  bottom: -2px;
  left: 45%;
  width: 35px;
  height: 7px;
  border-radius: 50%;
  background: rgba(0,0,0,.48);
  filter: blur(2px);
  transform: translateX(-50%);
}

.chicken-token.running {
  animation: chicken-lane-run var(--vehicle-duration, 1.2s) cubic-bezier(.19,.68,.24,1) forwards;
}

.chicken-token.running .chicken-runner {
  animation: chicken-runner-bob .19s linear infinite;
}

.chicken-token.running .chicken-head {
  animation: chicken-head-counter .19s linear infinite;
}

.chicken-token.running .chicken-wing {
  animation: chicken-wing-swing .19s ease-in-out infinite alternate;
}

.chicken-token.running .chicken-tail {
  animation: chicken-tail-flick .19s ease-in-out infinite alternate;
}

.chicken-token.running .leg-front {
  animation: chicken-leg-front .19s linear infinite;
}

.chicken-token.running .leg-back {
  animation: chicken-leg-back .19s linear infinite;
}

.chicken-token.running .leg-front b,
.chicken-token.running .leg-back b {
  animation: chicken-foot-stride .19s linear infinite;
}

.chicken-token.running .leg-back b { animation-delay: -.095s; }

.chicken-token.impact .chicken-runner {
  animation: chicken-impact-tumble .82s cubic-bezier(.2,.68,.22,1) forwards;
}

.chicken-token.hit {
  filter: grayscale(.42) saturate(.78);
}

.chicken-token.hit .chicken-runner {
  transform: translate(4px, 5px) rotate(76deg) scale(.92);
}

.impact-feathers {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: none;
}

.chicken-token.impact .impact-feathers { display: block; }

.impact-feathers i {
  position: absolute;
  top: 20px;
  left: 21px;
  width: 10px;
  height: 5px;
  border-radius: 80% 20% 80% 20%;
  background: #fff7d6;
  opacity: 0;
  animation: chicken-feather-one .72s ease-out forwards;
}

.impact-feathers i:nth-child(2) { animation-name: chicken-feather-two; animation-delay: .05s; }
.impact-feathers i:nth-child(3) { animation-name: chicken-feather-three; animation-delay: .1s; }

.attempt-vehicle,
.impact-vehicle {
  left: var(--attempt-left, 16.66%);
  z-index: 16;
  will-change: transform;
}

.attempt-vehicle.near-miss {
  top: 58%;
  animation: chicken-near-miss-car var(--vehicle-duration, 1.2s) linear forwards;
}

.attempt-vehicle.saved {
  top: 58%;
  z-index: 17;
  animation: chicken-save-car-down var(--vehicle-duration, 1.2s) cubic-bezier(.16,.72,.22,1) forwards;
}

.attempt-vehicle.danger {
  top: 58%;
  animation: chicken-danger-car var(--vehicle-duration, 1.2s) cubic-bezier(.18,.72,.24,1) forwards;
}

.impact-vehicle {
  top: 58%;
  animation: chicken-impact-car .82s cubic-bezier(.28,.58,.3,1) forwards;
}

.attempt-vehicle.near-miss.traffic-up {
  animation-name: chicken-near-miss-car-up;
}

.attempt-vehicle.saved.traffic-up {
  animation-name: chicken-save-car-up;
}

.attempt-vehicle.danger.traffic-up {
  animation-name: chicken-danger-car-up;
}

.impact-vehicle.traffic-up {
  animation-name: chicken-impact-car-up;
}

.chicken-save-block {
  position: absolute;
  top: calc(58% - 28px);
  left: var(--attempt-left, 16.66%);
  z-index: 18;
  width: 32px;
  height: 25px;
  border: 2px solid #9e8c72;
  border-radius: 45% 54% 38% 48%;
  background:
    radial-gradient(circle at 30% 27%, rgba(255,255,255,.34) 0 3px, transparent 4px),
    linear-gradient(145deg, #c9baa1, #776a59 58%, #4c443a);
  box-shadow: inset -5px -5px 7px rgba(38,31,24,.34), 0 6px 8px rgba(0,0,0,.42);
  transform: translate(-50%, -50%);
  animation: chicken-save-block-pop var(--vehicle-duration, 1.2s) ease-out forwards;
  pointer-events: none;
}

.chicken-save-block.traffic-up {
  top: calc(58% + 28px);
}

.chicken-save-block > i,
.chicken-save-block > b,
.chicken-save-block > em {
  position: absolute;
  display: block;
  border-radius: 50%;
  background: rgba(69,59,48,.36);
}

.chicken-save-block > i { top: 5px; left: 7px; width: 7px; height: 4px; }
.chicken-save-block > b { right: 5px; bottom: 5px; width: 9px; height: 5px; }
.chicken-save-block > em { top: 4px; right: 6px; width: 4px; height: 4px; }

.save-impact-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 3px, #ffd166 4px 8px, rgba(255,132,72,.68) 9px 14px, transparent 15px);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: chicken-save-impact var(--vehicle-duration, 1.2s) ease-out forwards;
}

.impact-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 49px;
  height: 49px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 4px, #ffd166 5px 10px, rgba(255,119,72,.7) 11px 16px, transparent 17px);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: chicken-impact-burst .72s ease-out forwards;
}
.chicken-tap-cue {
  position: absolute;
  right: 9px;
  bottom: 9px;
  z-index: 20;
  display: grid;
  gap: 1px;
  min-width: 104px;
  padding: 7px 10px;
  border: 1px solid rgba(255,209,102,.66);
  border-radius: 11px;
  background: rgba(7,13,24,.88);
  box-shadow: 0 5px 18px rgba(0,0,0,.32);
  color: #fff;
  text-align: left;
}

.chicken-tap-cue span {
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.chicken-tap-cue small {
  color: #ffd166;
  font-size: 9px;
  font-weight: 850;
}

.chicken-result-panel {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid #314866;
  border-radius: 13px;
  background: #101d32;
  text-align: center;
}

.chicken-result-panel strong {
  color: #fff;
  font-size: 14px;
}

.chicken-result-panel span {
  color: #7fe0a9;
  font-size: 13px;
  font-weight: 800;
}

.chicken-result-panel small {
  color: #91a7c3;
  font-size: 9px;
}

.chicken-progress-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  width: min(100%, 680px);
  margin: 9px auto;
}

.chicken-progress-strip span {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 2px;
  border: 1px solid #314866;
  border-radius: 9px;
  background: #101d32;
  color: #91a7c3;
  font-size: clamp(8px, 2.2vw, 10px);
  font-weight: 850;
  text-align: center;
}

.chicken-progress-strip b {
  color: #5aa9ff;
  font-size: 8px;
}

.chicken-progress-strip small {
  display: block;
  margin-top: 2px;
  color: #91a8c9;
  font-size: 9px;
  line-height: 1.1;
  white-space: nowrap;
}

.chicken-progress-strip span.current {
  border-color: #ffd166;
  background: #3a2f16;
  color: #ffe59b;
}

.chicken-progress-strip span.cleared {
  border-color: #4fe09b;
  background: #113727;
  color: #b7ffd9;
}

.chicken-continue-prompt {
  display: grid;
  gap: 4px;
  width: min(100%, 680px);
  margin: 9px auto 0;
  padding: 11px 13px;
  border: 1px solid rgba(255, 207, 92, .55);
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(59, 42, 12, .96), rgba(23, 31, 47, .98));
  color: #fff;
  text-align: center;
}

.chicken-continue-prompt strong {
  color: #ffe39a;
  font-size: 14px;
  line-height: 1.25;
}

.chicken-continue-prompt span {
  color: #c9d6e7;
  font-size: 11px;
  line-height: 1.35;
}
.chicken-controls {
  position: sticky;
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 25;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(100%, 680px);
  margin: 9px auto 0;
  padding: 9px;
  border: 1px solid #314866;
  border-radius: 15px;
  background: rgba(8,14,29,.97);
  box-shadow: 0 -10px 24px rgba(0,0,0,.3);
  backdrop-filter: blur(14px);
}

.chicken-controls .wager-stack {
  grid-column: 1 / -1;
}

.wager-stack {
  display: grid;
  gap: 5px;
  color: #91a7c3;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.chicken-main-button,
.cashout-button {
  min-height: 54px;
  border-radius: 13px;
  font-size: 13px;
  font-weight: 950;
  text-transform: uppercase;
  touch-action: manipulation;
}

.chicken-controls > .chicken-main-button:only-child,
.chicken-controls > .wager-stack + .chicken-main-button {
  grid-column: 1 / -1;
}

.cashout-button {
  border: 1px solid #69e0a5;
  background: linear-gradient(135deg, #16834e, #20b875);
  color: #fff;
}

@keyframes chicken-vehicle-down {
  from { transform: translate(-50%, -108px); }
  to { transform: translate(-50%, 410px); }
}

@keyframes chicken-vehicle-up {
  from { transform: translate(-50%, 108px); }
  to { transform: translate(-50%, -410px); }
}

@keyframes chicken-pad-pulse {
  50% { transform: translate(-50%, -50%) scale(1.09); }
}

@keyframes chicken-lane-run {
  0% {
    left: var(--chicken-start-left, var(--chicken-left));
    transform: translate(-50%, -58%) translateY(0) rotate(0deg);
  }
  12% { transform: translate(-50%, -58%) translateY(-1px) rotate(-5deg); }
  72% { transform: translate(-50%, -58%) translateY(-1px) rotate(-3deg); }
  91% { transform: translate(-50%, -58%) translateY(0) rotate(2deg); }
  100% {
    left: var(--chicken-left);
    transform: translate(-50%, -58%) translateY(0) rotate(0deg);
  }
}

@keyframes chicken-runner-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  25% { transform: translateY(-2px) rotate(-4deg); }
  50% { transform: translateY(0) rotate(-1deg); }
  75% { transform: translateY(-1px) rotate(-3deg); }
}

@keyframes chicken-head-counter {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50% { transform: translateY(2px) rotate(5deg); }
}

@keyframes chicken-wing-swing {
  from { transform: rotate(20deg) translateX(-1px); }
  to { transform: rotate(-16deg) translateX(2px); }
}

@keyframes chicken-tail-flick {
  from { transform: rotate(-38deg); }
  to { transform: rotate(-19deg); }
}

@keyframes chicken-leg-front {
  0%, 100% { transform: rotate(-36deg); }
  25% { transform: rotate(5deg); }
  50% { transform: rotate(38deg); }
  75% { transform: rotate(1deg); }
}

@keyframes chicken-leg-back {
  0%, 100% { transform: rotate(38deg); }
  25% { transform: rotate(1deg); }
  50% { transform: rotate(-36deg); }
  75% { transform: rotate(5deg); }
}

@keyframes chicken-foot-stride {
  0%, 100% { transform: rotate(15deg) scaleX(.8); }
  50% { transform: rotate(-10deg) scaleX(1.08); }
}

@keyframes chicken-near-miss-car {
  0% { transform: translate(-50%, -50%) translateY(-360px); opacity: 0; }
  7% { opacity: 1; }
  48% { transform: translate(-50%, -50%) translateY(-18px); opacity: 1; }
  55% { transform: translate(-50%, -50%) translateY(42px); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(370px); opacity: .92; }
}

@keyframes chicken-save-car-down {
  0% { transform: translate(-50%, -50%) translateY(-360px); opacity: 0; }
  7% { opacity: 1; }
  62% { transform: translate(-50%, -50%) translateY(-72px) rotate(0); opacity: 1; }
  69% { transform: translate(-50%, -50%) translateY(-83px) rotate(-5deg); }
  78% { transform: translate(-50%, -50%) translateY(-68px) rotate(3deg); }
  100% { transform: translate(-50%, -50%) translateY(-72px) rotate(0); opacity: 1; }
}

@keyframes chicken-save-car-up {
  0% { transform: translate(-50%, -50%) translateY(360px); opacity: 0; }
  7% { opacity: 1; }
  62% { transform: translate(-50%, -50%) translateY(72px) rotate(0); opacity: 1; }
  69% { transform: translate(-50%, -50%) translateY(83px) rotate(5deg); }
  78% { transform: translate(-50%, -50%) translateY(68px) rotate(-3deg); }
  100% { transform: translate(-50%, -50%) translateY(72px) rotate(0); opacity: 1; }
}

@keyframes chicken-danger-car {
  0% { transform: translate(-50%, -50%) translateY(-360px); opacity: 0; }
  7% { opacity: 1; }
  82% { transform: translate(-50%, -50%) translateY(-48px); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(0); opacity: 1; }
}

@keyframes chicken-near-miss-car-up {
  0% { transform: translate(-50%, -50%) translateY(360px); opacity: 0; }
  7% { opacity: 1; }
  48% { transform: translate(-50%, -50%) translateY(18px); opacity: 1; }
  55% { transform: translate(-50%, -50%) translateY(-42px); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(-370px); opacity: .92; }
}

@keyframes chicken-danger-car-up {
  0% { transform: translate(-50%, -50%) translateY(360px); opacity: 0; }
  7% { opacity: 1; }
  82% { transform: translate(-50%, -50%) translateY(48px); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(0); opacity: 1; }
}

@keyframes chicken-impact-car {
  0%, 10% { transform: translate(-50%, -50%) translateY(0); opacity: 1; }
  28% { transform: translate(-50%, -50%) translateY(26px); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(390px); opacity: .9; }
}

@keyframes chicken-impact-car-up {
  0%, 10% { transform: translate(-50%, -50%) translateY(0); opacity: 1; }
  28% { transform: translate(-50%, -50%) translateY(-26px); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(-390px); opacity: .9; }
}

@keyframes chicken-impact-tumble {
  0%, 8% { transform: translate(0, 0) rotate(-4deg) scale(1); }
  32% { transform: translate(9px, -13px) rotate(46deg) scale(1.04); }
  62% { transform: translate(14px, -5px) rotate(118deg) scale(.97); }
  100% { transform: translate(17px, 7px) rotate(163deg) scale(.9); }
}

@keyframes chicken-feather-one {
  0%, 12% { opacity: 0; transform: translate(0,0) rotate(0) scale(.5); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(-25px,-28px) rotate(-145deg) scale(1); }
}

@keyframes chicken-feather-two {
  0%, 12% { opacity: 0; transform: translate(0,0) rotate(0) scale(.5); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(30px,-22px) rotate(130deg) scale(.9); }
}

@keyframes chicken-feather-three {
  0%, 12% { opacity: 0; transform: translate(0,0) rotate(0) scale(.5); }
  24% { opacity: 1; }
  100% { opacity: 0; transform: translate(20px,25px) rotate(190deg) scale(.8); }
}

@keyframes chicken-save-block-pop {
  0%, 7% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
  16%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  65% { transform: translate(-50%, -50%) scale(1); }
  70% { transform: translate(-50%, -50%) scale(1.13) rotate(5deg); }
  79% { transform: translate(-50%, -50%) scale(.96) rotate(-3deg); }
}

@keyframes chicken-save-impact {
  0%, 60% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  67% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
  86%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.65); }
}

@keyframes chicken-impact-burst {
  0%, 10% { opacity: 0; transform: translate(-50%, -50%) scale(.25); }
  25% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.85); }
}
@media (max-width: 520px) {
  .chicken-stage,
  .chicken-controls,
  .chicken-progress-strip {
    width: 100%;
    max-width: 100%;
  }

  .chicken-board {
    min-height: 248px;
    border-radius: 16px;
  }

  .chicken-token {
    width: 46px;
    height: 48px;
  }

  .chicken-runner {
    scale: .88;
  }

  .chicken-tap-cue {
    right: 6px;
    bottom: 6px;
    min-width: 92px;
    padding: 6px 8px;
  }


  .chicken-controls {
    bottom: calc(66px + env(safe-area-inset-bottom));
    border-radius: 13px;
  }

  .chicken-main-button,
  .cashout-button {
    min-height: 52px;
    font-size: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .road-vehicle,
  .attempt-vehicle,
  .impact-vehicle,
  .chicken-token,
  .chicken-runner,
  .chicken-head,
  .chicken-wing,
  .chicken-tail,
  .chicken-leg,
  .chicken-leg b,
  .impact-feathers i,
  .chicken-save-block,
  .save-impact-burst,
  .lane-pad {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

.minefield-stage {
  display: grid;
  gap: 12px;
  max-width: 430px;
  margin: 0 auto;
}

.minefield-risk-select {
  min-width: 132px;
  height: 39px;
  flex: 1;
}

.minefield-cockpit-actions {
  grid-template-columns: 1fr;
}

.minefield-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.minefield-stats > div {
  display: grid;
  gap: 2px;
  padding: 8px 6px;
  border: 1px solid #314866;
  border-radius: 12px;
  background: #101d32;
  text-align: center;
}

.minefield-stats span {
  color: #91a7c3;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.minefield-stats strong {
  color: #fff;
  font-size: 13px;
}

.minefield-board {
  display: grid;
  grid-template-columns: repeat(var(--minefield-size, 5), minmax(0, 1fr));
  gap: 8px;
  padding: 12px;
  border: 2px solid #334a70;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(124, 92, 255, 0.18), transparent 48%),
    #0c1728;
  box-shadow: inset 0 0 35px rgba(0,0,0,0.32), 0 12px 24px rgba(0,0,0,0.25);
}

.minefield-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 50px;
  border: 1px solid #405f88;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(93, 123, 168, 0.38), rgba(20, 35, 58, 0.94)),
    #162943;
  color: #dbe8f7;
  font-size: 22px;
  font-weight: 950;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.22);
  transform-style: preserve-3d;
  transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.minefield-tile:not(:disabled):active {
  transform: scale(0.94);
}

.minefield-tile.selected {
  animation: minefield-flip 0.42s ease;
}

.minefield-tile.safe {
  border-color: #55e59a;
  background: radial-gradient(circle, rgba(85,229,154,0.32), rgba(16,62,42,0.96));
  color: #a8ffd0;
  animation: minefield-safe-glow 0.65s ease;
}

.minefield-tile.mine {
  border-color: #ff6378;
  background: radial-gradient(circle, rgba(255,99,120,0.36), rgba(75,15,28,0.96));
  color: #ffd3d8;
  animation: minefield-explode 0.72s ease;
}

.minefield-tile.mine::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 18px;
  background: radial-gradient(circle, rgba(255,220,120,0.72), rgba(255,99,120,0.28) 42%, transparent 68%);
  animation: minefield-blast-ring 0.72s ease forwards;
  pointer-events: none;
}

.minefield-status {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #314866;
  border-radius: 14px;
  background: #101d32;
  text-align: center;
}

.minefield-status strong {
  color: #fff;
  font-size: 14px;
}

.minefield-status span {
  color: #8ff1c8;
  font-size: 13px;
  font-weight: 850;
}

.minefield-status small {
  color: #91a7c3;
  font-size: 10px;
}

.minefield-controls {
  position: sticky;
  bottom: calc(78px + env(safe-area-inset-bottom));
  z-index: 15;
  display: grid;
  gap: 8px;
  max-width: 430px;
  margin: 10px auto 0;
  padding: 10px;
  border: 1px solid #314866;
  border-radius: 16px;
  background: rgba(8, 14, 29, 0.96);
  box-shadow: 0 -10px 24px rgba(0,0,0,0.28);
  backdrop-filter: blur(14px);
}

@keyframes minefield-flip {
  0% { transform: rotateY(0deg) scale(1); }
  50% { transform: rotateY(88deg) scale(0.96); }
  100% { transform: rotateY(0deg) scale(1); }
}

@keyframes minefield-safe-glow {
  0% { box-shadow: 0 0 0 rgba(85,229,154,0); }
  55% { box-shadow: 0 0 24px rgba(85,229,154,0.45); }
  100% { box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 6px 14px rgba(0,0,0,0.22); }
}

@keyframes minefield-explode {
  0% { transform: scale(1); }
  35% { transform: scale(1.12) rotate(2deg); }
  55% { transform: scale(0.94) rotate(-2deg); }
  100% { transform: scale(1); }
}

@keyframes minefield-blast-ring {
  0% { opacity: 0; transform: scale(0.35); }
  45% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}

@media (max-width: 380px) {
  .minefield-board {
    gap: 6px;
    padding: 10px;
  }

  .minefield-tile {
    min-height: 44px;
    border-radius: 12px;
  }
}

.rooster-stage {
  display: grid;
  gap: 12px;
  max-width: 430px;
  margin: 0 auto;
}

.rooster-cockpit-actions {
  grid-template-columns: 1fr;
}

.rooster-topline,
.rooster-extras {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}

.rooster-extras {
  grid-template-columns: repeat(2, 1fr);
}

.rooster-topline > div,
.rooster-extras > div {
  display: grid;
  gap: 2px;
  padding: 8px 6px;
  border: 1px solid #314866;
  border-radius: 12px;
  background: #101d32;
  text-align: center;
}

.rooster-topline span,
.rooster-extras span {
  color: #91a7c3;
  font-size: 8px;
  font-weight: 850;
  text-transform: uppercase;
}

.rooster-topline strong,
.rooster-extras strong {
  color: #fff;
  font-size: 13px;
}

.rooster-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.rooster-picker button {
  display: grid;
  gap: 4px;
  min-height: 88px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--rooster-color) 50%, #3a5272);
  border-radius: 16px;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--rooster-color) 22%, transparent), #101d32 68%);
  color: #fff;
  text-align: center;
}

.rooster-picker button.selected {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--rooster-color) 70%, white), 0 12px 22px rgba(0,0,0,0.25);
}

.rooster-picker span {
  font-size: 28px;
}

.rooster-picker small {
  color: #aebed3;
  font-weight: 850;
}

.rooster-arena {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  gap: 8px;
  min-height: 260px;
  padding: 50px 12px 14px;
  overflow: hidden;
  border: 2px solid #4b5f85;
  border-radius: 22px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 205, 92, 0.28), transparent 28%),
    radial-gradient(circle at 80% 24%, rgba(92, 218, 255, 0.24), transparent 30%),
    linear-gradient(180deg, #263b73 0%, #152443 54%, #5b3a22 55%, #7b5030 100%);
  box-shadow: inset 0 0 45px rgba(0,0,0,0.34), 0 12px 24px rgba(0,0,0,0.24);
}

.rooster-arena::before {
  content: "👏 🎺 🐣 🎉 🐥 👏";
  position: absolute;
  top: 26px;
  left: 0;
  right: 0;
  color: rgba(255,255,255,0.55);
  font-size: 15px;
  text-align: center;
  letter-spacing: 8px;
  animation: rooster-crowd-bounce 1.1s ease-in-out infinite;
}

.arena-title {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: #ffe8a6;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.arena-title strong {
  color: #fff;
  text-align: right;
}

.rooster-fighter {
  position: relative;
  z-index: 2;
  align-self: end;
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 16px;
  background: rgba(8, 16, 31, 0.58);
  text-align: center;
}

.rooster-fighter.red {
  --fighter-color: #ff5368;
}

.rooster-fighter.green {
  --fighter-color: #46dc8d;
}

.rooster-avatar {
  display: grid;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  place-items: center;
  border: 3px solid var(--fighter-color);
  border-radius: 999px;
  background: radial-gradient(circle at 35% 20%, #fff, color-mix(in srgb, var(--fighter-color) 42%, #ffd166) 68%);
  font-size: 38px;
  box-shadow: 0 9px 18px rgba(0,0,0,0.3);
}

.rooster-fighter.battling .rooster-avatar {
  animation: rooster-battle-hop 0.72s ease-in-out infinite;
}

.rooster-fighter.green.battling .rooster-avatar {
  animation-delay: 0.24s;
}

.rooster-fighter.winner .rooster-avatar {
  animation: rooster-winner-dance 0.5s ease-in-out infinite;
}

.rooster-fighter strong {
  color: #fff;
  font-size: 12px;
}

.bar {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(0,0,0,0.38);
}

.bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width 0.65s ease;
}

.bar.health i {
  background: linear-gradient(90deg, #ff5368, #ffd166);
}

.bar.stamina i {
  background: linear-gradient(90deg, #4ba3ff, #8ff1c8);
}

.versus-badge {
  align-self: center;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 999px;
  background: #fff3;
  color: #fff;
  font-weight: 950;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.28);
}

.rooster-status {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #314866;
  border-radius: 14px;
  background: #101d32;
  text-align: center;
}

.rooster-status strong {
  color: #fff;
}

.rooster-status span {
  color: #8ff1c8;
  font-weight: 850;
}

.rooster-status small {
  color: #91a7c3;
  font-size: 10px;
}

.rooster-action-log {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.rooster-action-log span {
  padding: 7px 8px;
  border: 1px solid #314866;
  border-radius: 999px;
  background: #101d32;
  color: #cdd9ec;
  font-size: 10px;
  font-weight: 850;
  text-align: center;
}

.rooster-action-log span.red {
  border-color: rgba(255,83,104,0.42);
  color: #ffacb7;
}

.rooster-action-log span.green {
  border-color: rgba(70,220,141,0.42);
  color: #adffd0;
}

.rooster-leaderboard {
  display: grid;
  gap: 6px;
  padding: 10px;
  border: 1px solid #314866;
  border-radius: 14px;
  background: #101d32;
}

.rooster-leaderboard h3 {
  margin: 0;
  color: #fff;
  font-size: 13px;
}

.rooster-leaderboard span {
  display: flex;
  justify-content: space-between;
  color: #cdd9ec;
  font-size: 11px;
}

@keyframes rooster-battle-hop {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  45% { transform: translateY(-16px) rotate(5deg); }
}

@keyframes rooster-winner-dance {
  0%, 100% { transform: translateY(0) rotate(-8deg) scale(1.02); }
  50% { transform: translateY(-9px) rotate(8deg) scale(1.08); }
}

@keyframes rooster-crowd-bounce {
  50% { transform: translateY(-3px); }
}

@media (max-width: 380px) {
  .rooster-arena {
    grid-template-columns: 1fr 34px 1fr;
    padding-left: 8px;
    padding-right: 8px;
  }

  .rooster-avatar {
    width: 58px;
    height: 58px;
    font-size: 31px;
  }

  .versus-badge {
    width: 34px;
    height: 34px;
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  html,
  body {
    overflow-x: hidden;
  }

  .casino-header {
    padding-right: 9px;
    padding-left: 9px;
  }

  .casino-brand-row {
    gap: 8px;
  }

  .casino-brand-row h1 {
    font-size: clamp(17px, 5vw, 21px);
  }

  .casino-header-metrics {
    min-width: 106px;
    gap: 4px;
  }

  .casino-balance,
  .casino-net-chip {
    padding: 4px 6px;
    border-radius: 7px;
  }

  .casino-balance span,
  .casino-net-chip span {
    font-size: 7px;
  }

  .casino-balance strong,
  .casino-net-chip strong {
    font-size: 11px;
  }

  .casino-net-chip small {
    display: none;
  }

  .casino-game-summary {
    grid-template-columns: 1fr 0.78fr 0.78fr;
    margin-bottom: 8px;
  }

  .casino-game-summary .back-button {
    grid-column: 1 / -1;
    min-height: 38px;
  }

  .casino-playable-card {
    margin-top: 8px;
    padding: 10px;
    border-radius: 14px;
  }

  .casino-playable-card .playable-game-title,
  .casino-playable-card .game-demo-balance {
    display: none;
  }

  .casino-play-cockpit {
    top: calc(84px + env(safe-area-inset-top));
    gap: 6px;
    margin-right: 0;
    margin-left: 0;
    padding: 7px;
  }

  .casino-play-cockpit .cockpit-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .casino-play-cockpit button,
  .casino-play-cockpit .field {
    min-height: 42px;
    font-size: 10px;
  }

  .chicken-stage,
  .minefield-stage,
  .rooster-stage,
  .chicken-controls,
  .minefield-controls {
    max-width: min(100%, 390px);
  }

  .chicken-board {
    grid-template-rows: none;
    min-height: 248px;
    border-radius: 17px;
  }

  .chicken-token {
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  .chicken-topline,
  .minefield-stats,
  .rooster-topline {
    gap: 5px;
  }

  .chicken-topline > div,
  .minefield-stats > div,
  .rooster-topline > div {
    padding: 7px 4px;
  }

  .chicken-topline strong,
  .minefield-stats strong,
  .rooster-topline strong {
    font-size: 12px;
  }

  .chicken-progress-strip {
    gap: 4px;
  }

  .chicken-progress-strip span {
    padding: 6px 2px;
    font-size: 9px;
  }

  .chicken-controls,
  .minefield-controls {
    bottom: calc(66px + env(safe-area-inset-bottom));
    border-radius: 14px;
  }

  .chicken-main-button,
  .cashout-button {
    min-height: 50px;
    font-size: 13px;
  }

  .minefield-board {
    width: min(100%, 310px);
    gap: 6px;
    padding: 10px;
    justify-self: center;
    border-radius: 17px;
  }

  .minefield-tile {
    min-height: 0;
    border-radius: 12px;
    font-size: 19px;
  }

  .minefield-risk-select {
    width: 100%;
    min-width: 0;
  }

  .rooster-picker {
    gap: 7px;
  }

  .rooster-picker button {
    min-height: 78px;
    padding: 8px 6px;
  }

  .rooster-picker span {
    font-size: 24px;
  }

  .rooster-arena {
    min-height: 232px;
    padding: 46px 8px 12px;
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    gap: 6px;
    border-radius: 18px;
  }

  .rooster-arena::before {
    font-size: 13px;
    letter-spacing: 5px;
  }

  .arena-title {
    align-items: center;
    font-size: 9px;
  }

  .rooster-fighter {
    padding: 8px 6px;
    min-width: 0;
  }

  .rooster-avatar {
    width: 58px;
    height: 58px;
    font-size: 31px;
  }

  .rooster-fighter strong {
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .versus-badge {
    width: 36px;
    height: 36px;
    font-size: 12px;
  }

  .rooster-action-log {
    grid-template-columns: 1fr;
  }

  .rooster-action-log span {
    padding: 7px;
  }

  .casino-bottom-nav {
    height: calc(58px + env(safe-area-inset-bottom));
  }
}

.casino-placeholder-card h2 {
  margin: 3px 0 13px;
  font-size: 22px;
}

.game-demo-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0b1628;
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.game-demo-balance strong {
  color: #aef3d3;
  font-size: 14px;
}

.casino-wager-label {
  margin: 15px 0 10px;
  text-align: left;
}

.casino-start-button {
  width: 100%;
}

.casino-coming-soon {
  margin: 15px 0 0;
  color: var(--muted);
  font-size: 10px;
  text-transform: uppercase;
}

.casino-result-message {
  margin-top: 11px;
  padding: 9px;
  border: 1px solid #496b83;
  border-radius: 8px;
  background: #12283a;
  color: #c8eaff;
  font-size: 10px;
  line-height: 1.4;
}

.casino-safety {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #3b365c;
  border-radius: 8px;
  color: #8f89a5;
  font-size: 8px;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
}

.casino-bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  display: grid;
  height: calc(64px + env(safe-area-inset-bottom));
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #654fa0;
  background: rgba(7, 11, 25, 0.97);
}

.casino-bottom-nav button {
  display: flex;
  border: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  background: transparent;
  color: #88839b;
  font-size: 8px;
  text-transform: uppercase;
}

.casino-bottom-nav button span {
  font-size: 20px;
}

.casino-bottom-nav button.active {
  color: #b99aff;
}

.casino-history-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.casino-history-card {
  display: grid;
  gap: 8px;
  padding: 11px;
  border: 1px solid #383754;
  border-radius: 9px;
  background: #121b30;
}

.casino-history-card > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.casino-history-card strong {
  font-size: 11px;
  text-transform: capitalize;
}

.casino-history-card span {
  color: var(--muted);
  font-size: 9px;
}

.casino-history-card .positive {
  color: #83e6b8;
}

.casino-history-card .negative {
  color: #ff8793;
}

.bulk-card {
  margin-bottom: 9px;
  padding: 10px;
}

.bulk-row {
  display: grid;
  grid-template-columns: 1fr 132px;
  align-items: center;
  gap: 10px;
  color: #c4d2e1;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.field {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid #587294;
  border-radius: 8px;
  outline: none;
  background: #101d33;
  color: white;
  text-align: center;
}

.field:focus {
  border-color: #58b9ff;
  box-shadow: 0 0 0 2px rgba(58, 160, 255, 0.12);
}

.betslip-tools {
  justify-content: space-between;
  margin-top: 9px;
}

.check-label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #bdcbda;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

input[type="checkbox"] {
  width: 19px;
  height: 19px;
  margin: 0;
  accent-color: var(--blue);
}

.slip-card {
  margin-bottom: 9px;
  overflow: hidden;
}

.slip-title {
  gap: 9px;
  padding: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.slip-title strong {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.odds-chip {
  min-width: 74px;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #dcecff;
  background: #0f1c31;
  font-size: 11px;
  text-align: center;
}

.trash {
  border: 0;
  background: transparent;
  color: #4eb0ff;
  font-size: 19px;
  cursor: pointer;
}

.slip-meta {
  padding: 8px 10px 2px;
  color: #b7c5d4;
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}

.slip-market {
  padding: 1px 10px 9px;
  color: var(--muted);
  font-size: 8px;
  text-align: center;
  text-transform: uppercase;
}

.wager-inputs {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 10px;
  color: #cbd8e6;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.empty-state {
  display: grid;
  min-height: 270px;
  padding: 32px;
  place-items: center;
  text-align: center;
}

.empty-icon {
  margin-bottom: 10px;
  font-size: 42px;
  opacity: 0.7;
}

.empty-state h2 {
  margin: 0 0 7px;
  font-size: 17px;
}

.empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.betslip-footer {
  position: sticky;
  bottom: calc(var(--nav-height) + env(safe-area-inset-bottom));
  z-index: 9;
  margin: 16px -10px -20px;
  padding: 8px 10px 12px;
  border-top: 1px solid var(--line);
  background: rgba(7, 18, 37, 0.97);
  backdrop-filter: blur(14px);
}

.totals {
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #cbd8e6;
  font-size: 11px;
  font-weight: 800;
}

.footer-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.button {
  min-height: 42px;
  border: 1px solid #6883a5;
  border-radius: 8px;
  background: #172743;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
}

.button.primary {
  border-color: #5ebaff;
  background: linear-gradient(135deg, #176fc1, #2c8ad8);
}

.button.danger {
  color: #ffb0b7;
}

.button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.bottom-nav {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 30;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom));
  border-top: 1px solid #2d90de;
  background: rgba(4, 12, 26, 0.97);
  backdrop-filter: blur(16px);
}

.nav-inner {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.nav-button {
  position: relative;
  display: flex;
  border: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 3px;
  background: transparent;
  color: #8195ac;
  font-size: 8px;
  text-transform: uppercase;
  cursor: pointer;
}

.nav-button.active {
  color: #f5faff;
}

.nav-icon {
  font-size: 21px;
  line-height: 1;
}

.nav-button.active .nav-icon {
  color: var(--blue);
}

.center-action {
  align-self: start;
  width: 66px;
  height: 66px;
  margin: -18px auto 0;
  border: 5px solid #14223a;
  border-radius: 50%;
  background: white;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  color: var(--blue);
  font-size: 27px;
}

.badge {
  position: absolute;
  top: 9px;
  right: calc(50% - 22px);
  display: grid;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  place-items: center;
  border: 2px solid #071225;
  border-radius: 999px;
  background: #ff5b6e;
  color: white;
  font-size: 9px;
  font-weight: 900;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  padding: 18px;
  place-items: center;
  background: rgba(0, 5, 14, 0.78);
  backdrop-filter: blur(7px);
}

.modal {
  width: min(100%, 430px);
  max-height: 86dvh;
  overflow: auto;
  padding: 18px;
  border: 1px solid #446b97;
  border-radius: 15px;
  background: #101e35;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.modal h2 {
  margin: 0 0 9px;
  font-size: 19px;
}

.modal p {
  margin: 0 0 13px;
  color: #b8c8d8;
  font-size: 12px;
  line-height: 1.5;
}

.confirm-list {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.confirm-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 11px;
}

.confirm-bet-context {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.confirm-bet-context strong,
.confirm-bet-context span,
.confirm-bet-context small,
.overview-event,
.ticket-leg-event {
  overflow-wrap: anywhere;
  white-space: normal;
}

.confirm-bet-context span,
.confirm-bet-context small,
.overview-event,
.ticket-leg-event {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
}

.confirm-odds {
  flex: 0 0 auto;
  white-space: nowrap;
}

.modal-actions {
  justify-content: flex-end;
  gap: 8px;
}

.toast {
  position: fixed;
  top: calc(82px + env(safe-area-inset-top));
  left: 50%;
  z-index: 120;
  width: calc(100% - 28px);
  max-width: 430px;
  padding: 11px 14px;
  border: 1px solid rgba(69, 214, 155, 0.6);
  border-radius: 10px;
  background: #123b34;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.38);
  color: #b8ffe3;
  font-size: 12px;
  font-weight: 750;
  text-align: center;
  transform: translateX(-50%);
}

.history-card {
  margin-bottom: 10px;
  padding: 12px;
}

.history-head {
  justify-content: space-between;
  margin-bottom: 9px;
}

.history-head strong {
  font-size: 12px;
}

.history-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.history-list li {
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  color: #cbd8e6;
  font-size: 11px;
}

.history-total {
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  color: #e5f2ff;
  font-size: 11px;
  font-weight: 800;
}

.safety-card {
  margin-top: 12px;
  padding: 11px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.live-bj-topbar {
  grid-template-columns: 1fr auto auto;
}

.live-bj-video,
.live-bj-table,
.live-bj-bet-panel,
.live-command-card,
.card-entry-board {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid rgba(77, 139, 202, 0.45);
  border-radius: 14px;
  background: #1d2a43;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.live-bj-video-frame {
  display: grid;
  min-height: 145px;
  place-items: center;
  border: 1px dashed rgba(166, 194, 228, 0.4);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 38%, rgba(69, 214, 155, 0.18), transparent 34%),
    linear-gradient(160deg, #0b1528, #111f36);
  color: #d8e9ff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.live-bj-instruction {
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(58, 160, 255, 0.14);
  color: #d7ebff;
  font-size: 12px;
  font-weight: 800;
}

.dealer-zone {
  display: grid;
  gap: 8px;
  justify-items: center;
  margin-bottom: 12px;
  padding: 12px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 0%, rgba(69, 214, 155, 0.22), rgba(10, 18, 33, 0.82) 64%);
}

.live-seat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

.live-seat {
  padding: 10px;
  border: 1px solid rgba(123, 155, 190, 0.32);
  border-radius: 12px;
  background: #15223a;
}

.live-seat.player-seat {
  border-color: rgba(58, 160, 255, 0.85);
}

.live-seat.active-turn {
  box-shadow: 0 0 0 2px rgba(69, 214, 155, 0.35);
}

.live-seat-head,
.live-seat-meta,
.live-result,
.wager-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.live-seat-head strong {
  color: #f4f9ff;
  font-size: 12px;
}

.live-seat-head span,
.live-seat-meta,
.muted-mini {
  color: #9fb1c7;
  font-size: 10px;
}

.live-seat-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 42px;
  align-items: center;
}

.live-card {
  display: grid;
  width: 34px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(211, 226, 244, 0.86);
  border-radius: 7px;
  background: #f8fbff;
  color: #172136;
  font-size: 12px;
  font-weight: 950;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32);
}

.live-card.red {
  color: #d33d44;
}

.live-card.black {
  color: #111827;
}

.live-card.empty,
.live-card.hidden {
  background: linear-gradient(145deg, #2c7ed8, #173f79);
  color: white;
}

.chip-row,
.live-bj-actions,
.live-bj-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  width: 48px;
  height: 48px;
  border: 3px dashed rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  background: #2d68aa;
  color: white;
  font-weight: 950;
}

.chip.active {
  background: #45d69b;
  color: #061524;
}

.wager-line {
  margin: 10px 0;
  color: #d9e9fb;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.wager-line .field {
  max-width: 150px;
}

.stacked {
  flex-direction: column;
}

.danger-lite {
  border-color: rgba(255, 91, 110, 0.65);
  color: #ffd3d9;
}

.card-entry-board {
  display: grid;
  gap: 12px;
}

.card-suit-row {
  display: grid;
  gap: 8px;
}

.card-suit-row > strong {
  color: #f5fbff;
}

.card-entry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.card-entry {
  min-height: 42px;
  border: 1px solid rgba(211, 226, 244, 0.75);
  border-radius: 8px;
  background: #f7fbff;
  color: #111827;
  font-weight: 950;
}

.card-entry.red {
  color: #d33d44;
}

.card-entry:disabled {
  opacity: 0.32;
}

.card-history {
  display: grid;
  gap: 8px;
}

.card-history > div {
  display: grid;
  grid-template-columns: 32px 42px 1fr;
  gap: 8px;
  align-items: center;
  color: #bcd0e6;
  font-size: 11px;
}

.live-result.positive {
  color: #74f0ba;
}

.live-result.negative {
  color: #ff9cac;
}

.mgmt-shell {
  display: grid;
  min-height: 100dvh;
  grid-template-columns: 290px 1fr;
  background: #f4f6f9;
  color: #2d3441;
}

.mgmt-sidebar {
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow: auto;
  padding: 18px 0;
  background: #252b3d;
  color: #c9ced9;
}

.mgmt-brand {
  padding: 0 22px 18px;
  color: white;
  font-size: 18px;
  font-weight: 900;
}

.mgmt-brand small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.mgmt-sidebar button {
  display: flex;
  width: 100%;
  min-height: 54px;
  align-items: center;
  gap: 18px;
  padding: 0 24px;
  border: 0;
  background: transparent;
  color: #c8ccd6;
  font-size: 15px;
  font-weight: 750;
  text-align: left;
}

.mgmt-sidebar button span {
  width: 22px;
  color: #8fbaff;
  font-size: 20px;
}

.mgmt-sidebar button.active,
.mgmt-sidebar button:hover {
  background: #3b4259;
  color: white;
}

.mgmt-main {
  min-width: 0;
  padding: 24px;
}

.mgmt-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.mgmt-title-actions {
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mgmt-main .button,
.mgmt-live-panel .button,
.mgmt-panel .button,
.mgmt-form-panel .button {
  min-height: 44px;
  border: 1px solid #b9c4d3;
  border-radius: 5px;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.mgmt-main .button:hover,
.mgmt-live-panel .button:hover,
.mgmt-panel .button:hover,
.mgmt-form-panel .button:hover,
.mgmt-refresh-icon:hover {
  border-color: #448cff;
  background: #f4f8ff;
  color: #12325f;
}

.mgmt-main .button.primary,
.mgmt-form-panel .button.primary,
.mgmt-panel .button.primary,
.mgmt-live-panel .button.primary {
  border-color: #2f7ee8;
  background: #448cff;
  color: #ffffff;
}

.mgmt-main .button.danger-lite,
.mgmt-main .button.danger {
  border-color: #ef4444;
  background: #fff5f5;
  color: #b42318;
}

.mgmt-main .button:disabled {
  background: #eef2f7;
  color: #8a94a6;
}

.mgmt-week-filter {
  display: grid;
  gap: 5px;
  min-width: 180px;
  color: #657184;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.mgmt-title h1 {
  margin: 0;
  padding: 10px 16px;
  border-radius: 6px;
  background: #dcecff;
  color: #448cff;
  font-size: 30px;
  font-weight: 500;
}

.mgmt-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.mgmt-card-grid article,
.mgmt-stat-card,
.mgmt-panel,
.mgmt-form-panel {
  border: 1px solid #dbe1eb;
  border-radius: 10px;
  background: white;
  box-shadow: 0 10px 30px rgba(20, 36, 61, 0.06);
}

.mgmt-card-grid article,
.mgmt-stat-card {
  padding: 18px;
}

.mgmt-stat-card {
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.mgmt-stat-card:hover,
.mgmt-stat-card:focus-visible {
  border-color: #448cff;
  box-shadow: 0 14px 34px rgba(68, 140, 255, 0.16);
  transform: translateY(-1px);
  outline: none;
}

.mgmt-card-grid span,
.mgmt-stat-card span {
  display: block;
  margin-bottom: 8px;
  color: #6a7280;
  font-size: 13px;
}

.mgmt-card-grid strong,
.mgmt-stat-card strong {
  display: block;
  color: #273244;
  font-size: 27px;
}

.mgmt-stat-card small {
  display: block;
  margin-top: 8px;
  color: #448cff;
  font-size: 11px;
  font-weight: 800;
}

.mgmt-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.mgmt-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 16px;
}

.mgmt-live-panel {
  overflow: hidden;
  border: 1px solid #dbe1eb;
  border-radius: 10px;
  background: white;
  box-shadow: 0 10px 30px rgba(20, 36, 61, 0.06);
}

.mgmt-panel-title {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  border-bottom: 1px solid #e2e6ec;
}

.mgmt-panel-title h2 {
  margin: 0;
  color: #111827;
  font-size: 20px;
}

.mgmt-refresh-icon {
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid #d7dce5;
  border-radius: 4px;
  background: #fbfcff;
  color: #1f5fd0;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}

.mgmt-table-wrap {
  overflow: auto;
}

.sticky-filter {
  position: sticky;
  top: 0;
  z-index: 5;
  background: #ffffff;
}

.mgmt-data-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  color: #4b5563;
}

.mgmt-data-table th,
.mgmt-data-table td {
  padding: 12px 10px;
  border-right: 1px solid #d8dce3;
  border-bottom: 1px solid #d8dce3;
  background: #f4f2f2;
  text-align: right;
  font-size: 16px;
}

.mgmt-data-table tr:nth-child(even) td,
.mgmt-data-table tr:nth-child(even) th {
  background: #fff;
}

.mgmt-data-table th:first-child,
.mgmt-data-table td:first-child {
  text-align: left;
  position: sticky;
  left: 0;
  z-index: 2;
}

.mgmt-data-table thead th {
  background: #eeeeef;
  font-weight: 500;
}

.mgmt-data-table .linkish {
  color: #3f75ff;
  font-weight: 600;
}

.mgmt-data-table td.linkish,
.mgmt-data-table .clickable-row {
  cursor: pointer;
}

.mgmt-data-table td.linkish:hover,
.mgmt-data-table .clickable-row:hover td {
  background: #e5f1ff;
}

.mgmt-data-table .group-row th {
  background: #dcebfb;
  color: #2f3b52;
  font-weight: 700;
  text-align: left;
}

.mgmt-data-table .total-row th,
.mgmt-data-table .total-row td {
  background: #d8d8d8;
  font-weight: 700;
}

.mgmt-drill-panel {
  margin-top: 18px;
}

.mgmt-row.action-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(220px, 2fr) minmax(160px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
}

@media (max-width: 720px) {
  .mgmt-row,
  .mgmt-row.action-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .mgmt-form-grid,
  .mgmt-dashboard-grid,
  .mgmt-card-grid {
    grid-template-columns: 1fr;
  }

  .mgmt-data-table th,
  .mgmt-data-table td {
    padding: 10px 8px;
    font-size: 14px;
  }

  .mgmt-title-actions {
    width: 100%;
  }

  .mgmt-limit-profile-form .mgmt-form-grid,
  .casino-limit-fields {
    grid-template-columns: 1fr;
  }

  .mgmt-form-action-bar {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .mgmt-form-action-bar .button {
    width: 100%;
    min-width: 0;
  }

  .limit-filter-drawer:not([open]) {
    display: block;
  }

  .limit-filter-grid,
  .limit-profile-card,
  .limit-profile-card dl {
    grid-template-columns: 1fr;
  }

  .limit-card-actions {
    grid-template-columns: 1fr 1fr;
  }

  .limit-card-actions .button {
    min-width: 0;
    width: 100%;
  }

  .settlement-table-wrap {
    display: none;
  }

  .settlement-card-list {
    display: grid;
    gap: 12px;
  }

  .provider-check-cell {
    min-width: 0;
  }
}

.mgmt-data-table.winloss {
  min-width: 760px;
}

.mgmt-data-table.winloss .business-drill-cell {
  padding: 0;
}

.mgmt-bu-cell-button {
  display: flex;
  width: 100%;
  min-height: 46px;
  padding: 12px 10px;
  border: 0;
  align-items: center;
  justify-content: flex-end;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  text-align: right;
  cursor: pointer;
}

.mgmt-data-table.winloss th:first-child .mgmt-bu-cell-button {
  justify-content: flex-start;
  text-align: left;
}

.mgmt-bu-cell-button:hover,
.mgmt-bu-cell-button:focus-visible {
  background: #e5f1ff;
  outline: 2px solid #3f75ff;
  outline-offset: -2px;
}

.mgmt-data-table.winloss th span,
.mgmt-data-table.winloss th small {
  display: block;
}

.mgmt-data-table.winloss th small {
  margin-top: 4px;
  font-size: 14px;
}

.mgmt-data-table.transaction-summary-table {
  min-width: 1180px;
}

.mgmt-data-table.all-transactions-table {
  min-width: 1280px;
}

.mgmt-data-table.settlement-data-table {
  min-width: 1180px;
}

.mgmt-data-table.settlement-data-table td,
.mgmt-data-table.settlement-data-table th {
  vertical-align: top;
}

.mgmt-data-table.settlement-data-table td small,
.mgmt-data-table.settlement-data-table th small {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
}

.provider-check-cell {
  display: grid;
  gap: 8px;
  min-width: 260px;
  text-align: left;
}

.provider-check {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border: 1px solid #dbe3f0;
  border-left: 4px solid #94a3b8;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  line-height: 1.25;
}

.provider-check strong,
.provider-check b,
.provider-check em,
.provider-check i,
.provider-check small {
  display: block;
}

.provider-check strong {
  color: #111827;
  font-size: 13px;
}

.provider-check em {
  color: #64748b;
  font-size: 11px;
  font-style: normal;
  text-transform: uppercase;
}

.provider-check b {
  font-size: 13px;
  text-transform: capitalize;
}

.provider-check i {
  color: #2563eb;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.provider-check small {
  color: #6b7280;
  font-size: 11px;
  line-height: 1.35;
}

.provider-check.won {
  border-left-color: #138a00;
}

.provider-check.lost {
  border-left-color: #f10f20;
}

.provider-check.pending {
  border-left-color: #335dff;
}

.provider-check.neutral,
.provider-check.empty {
  border-left-color: #94a3b8;
}

.settlement-outcome {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef2ff;
  color: #334155;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.settlement-outcome.won {
  background: #e7f8e5;
  color: #138a00;
}

.settlement-outcome.lost {
  background: #ffe7e9;
  color: #f10f20;
}

.settlement-outcome.pending {
  background: #e5f1ff;
  color: #335dff;
}

.settlement-card-list {
  display: none;
}

.settlement-card {
  display: grid;
  gap: 12px;
  padding: 12px;
  border: 1px solid #d8dce3;
  border-radius: 14px;
  background: #fff;
}

.settlement-card-head {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.settlement-card-head strong,
.settlement-card-head small,
.settlement-card-body > small {
  display: block;
}

.settlement-card-head small,
.settlement-card-body > small {
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
}

.settlement-card-body {
  display: grid;
  gap: 10px;
}

.settlement-time-grid {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #f8fafc;
  color: #64748b;
  font-size: 12px;
}

.settlement-time-grid strong {
  color: #111827;
}

.transaction-detail-cell {
  min-width: 420px;
}

.transaction-detail-cell span,
.transaction-detail-cell small {
  display: block;
}

.transaction-detail-cell small {
  margin-top: 5px;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.35;
}

.ledger-line {
  display: block;
  color: #4b5563;
  font-weight: 700;
  line-height: 1.35;
}

.ledger-money {
  margin-top: 4px;
}

.ledger-status {
  margin-right: 2px;
  font-weight: 900;
}

.ledger-status.pending {
  color: #335dff;
}

.ledger-status.won {
  color: #138a00;
}

.ledger-status.lost {
  color: #f10f20;
}

.ledger-status.neutral {
  color: #64748b;
}

.ledger-code,
.ledger-ref,
.ledger-score {
  color: #64748b;
}

.ledger-ticket {
  display: grid;
  gap: 7px;
  min-width: 0;
  max-width: 760px;
  padding: 8px 10px;
  border: 1px solid #dbe3f0;
  border-radius: 10px;
  background: #fff;
  color: #1f2937;
  line-height: 1.35;
}

.ledger-ticket-top,
.ledger-ticket-bet,
.ledger-ticket-meta,
.ledger-ticket-money {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  align-items: center;
}

.ledger-ticket-event {
  color: #111827;
  font-weight: 900;
}

.ledger-ticket-bet span,
.ledger-ticket-meta span,
.ledger-ticket-money span {
  display: inline-block;
}

.ledger-ticket-bet {
  color: #374151;
  font-size: 14px;
}

.ledger-ticket-meta {
  color: #6b7280;
  font-size: 12px;
}

.ledger-ticket-money {
  padding-top: 6px;
  border-top: 1px dashed #dbe3f0;
  color: #111827;
  font-size: 13px;
}

.ledger-provider,
.transaction-detail-cell .ledger-provider {
  display: none;
}

.mgmt-ledger-detail {
  padding: 18px 24px 22px;
  border-top: 1px solid #d8dce3;
}

.mgmt-ledger-detail h3 {
  margin: 0 0 12px;
  color: #111827;
  font-size: 18px;
}

.mgmt-ledger-stack {
  display: grid;
  gap: 0;
  border: 1px solid #d8dce3;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}

.mgmt-ledger-item {
  display: grid;
  grid-template-columns: 190px minmax(320px, 1fr) 120px;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #d8dce3;
  background: #f4f2f2;
}

.mgmt-ledger-item:nth-child(even) {
  background: #fff;
}

.mgmt-ledger-item:last-child {
  border-bottom: 0;
}

.mgmt-ledger-player strong,
.mgmt-ledger-player small,
.mgmt-ledger-meta {
  display: block;
}

.mgmt-ledger-player strong {
  color: #1f2937;
}

.mgmt-ledger-player small,
.mgmt-ledger-meta {
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
}

.mgmt-ledger-main .transaction-detail-cell {
  min-width: 0;
}

.mgmt-ledger-amount {
  text-align: right;
}

.mgmt-ledger-amount strong,
.mgmt-ledger-amount small {
  display: block;
}

.mgmt-ledger-amount small {
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
}

@media (max-width: 720px) {
  .transaction-detail-cell {
    min-width: 0;
  }

  .mgmt-ledger-detail {
    padding: 10px;
  }

  .mgmt-ledger-detail h3 {
    margin-bottom: 8px;
    font-size: 16px;
  }

  .mgmt-ledger-item {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 10px;
    align-items: start;
    padding: 8px;
  }

  .mgmt-ledger-player {
    min-width: 0;
  }

  .mgmt-ledger-player strong {
    overflow-wrap: anywhere;
  }

  .mgmt-ledger-player small,
  .mgmt-ledger-amount small {
    margin-top: 1px;
    font-size: 10px;
  }

  .mgmt-ledger-main {
    grid-column: 1 / -1;
    min-width: 0;
  }

  .mgmt-ledger-amount {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    white-space: nowrap;
  }

  .ledger-ticket {
    gap: 4px;
    max-width: none;
    padding: 7px 8px;
    line-height: 1.25;
  }

  .ledger-ticket-top,
  .ledger-ticket-bet,
  .ledger-ticket-meta,
  .ledger-ticket-money {
    gap: 3px 8px;
  }

  .ledger-ticket-event {
    font-size: 13px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .ledger-ticket-bet {
    font-size: 12px;
  }

  .ledger-ticket-meta {
    font-size: 10px;
    line-height: 1.25;
  }

  .ledger-ticket-meta span,
  .ledger-ticket-bet span,
  .ledger-ticket-money span {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .ledger-ticket-money {
    padding-top: 4px;
    font-size: 11px;
  }

  .mgmt-ledger-main > small {
    margin-top: 3px;
    font-size: 10px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .mgmt-ledger-main > small:not(.mgmt-ledger-meta),
  .transaction-detail-cell > small {
    display: none;
  }
}

.mgmt-shell .positive {
  color: #138a00;
  font-weight: 700;
}

.mgmt-shell .negative {
  color: #f10f20;
  font-weight: 700;
}

.mgmt-panel,
.mgmt-form-panel {
  margin-bottom: 16px;
  padding: 18px;
}

.mgmt-panel h2,
.mgmt-form-panel h2 {
  margin: 0 0 14px;
  color: #353c49;
  font-size: 17px;
}

.mgmt-note {
  margin: 8px 0;
  padding: 12px;
  border: 1px solid #4b91ff;
  border-radius: 7px;
  background: #dcecff;
  color: #364050;
}

.mgmt-form-panel form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mgmt-form-panel form .button {
  justify-self: start;
}

.mgmt-form-panel form.mgmt-limit-profile-form {
  display: block;
}

.mgmt-limit-profile-form > .field {
  width: 100%;
  margin-bottom: 12px;
}

.mgmt-limit-profile-form .mgmt-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mgmt-limit-profile-form .mgmt-form-block {
  margin-top: 14px;
  border-color: #dbe4f0;
  background: #ffffff;
}

.mgmt-limit-profile-form .mgmt-form-block h3 {
  color: #1f2937;
}

.limit-profile-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}

.limit-filter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.limit-filter-head h2 {
  margin: 0;
}

.limit-filter-head span {
  color: #64748b;
  font-size: 13px;
  font-weight: 700;
}

.limit-filter-drawer {
  margin-top: 12px;
}

.limit-filter-drawer summary,
.limit-form-section summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: 1px solid #dbe4f0;
  border-radius: 10px;
  background: #f4f8ff;
  color: #1f2937;
  cursor: pointer;
  font-weight: 850;
  list-style: none;
}

.limit-filter-drawer summary::-webkit-details-marker,
.limit-form-section summary::-webkit-details-marker {
  display: none;
}

.limit-filter-drawer summary::after,
.limit-form-section summary::after {
  content: "▾";
  color: #448cff;
}

.limit-filter-drawer[open] summary::after,
.limit-form-section[open] summary::after {
  transform: rotate(180deg);
}

.limit-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding-top: 12px;
}

.limit-filter-grid label {
  display: grid;
  gap: 6px;
  color: #475569;
  font-size: 12px;
  font-weight: 800;
}

.limit-profile-list {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.limit-profile-card {
  display: grid;
  grid-template-columns: minmax(220px, 1.2fr) minmax(260px, 1.5fr) auto;
  gap: 16px;
  align-items: center;
  padding: 16px;
  border: 1px solid #dbe1eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(20, 36, 61, 0.06);
}

.limit-profile-card h3 {
  margin: 8px 0 6px;
  color: #1f2937;
  font-size: 18px;
}

.limit-profile-card p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.limit-profile-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.limit-profile-card dt {
  color: #64748b;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.limit-profile-card dd {
  margin: 2px 0 0;
  color: #263244;
  font-size: 13px;
  font-weight: 700;
}

.limit-card-actions {
  display: grid;
  gap: 8px;
}

.status-pill {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e8f7ef;
  color: #067647;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.status-pill.inactive {
  background: #fff7df;
  color: #9a6700;
}

.status-pill.archived {
  background: #eef2f7;
  color: #64748b;
}

.status-pill.warning {
  background: #fff4d6;
  color: #9a5b00;
}

.review-bet-card {
  display: grid;
  gap: 14px;
  margin: 14px 0;
  padding: 16px;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.review-bet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.review-bet-head strong {
  display: block;
  color: #172033;
  font-size: 15px;
  font-weight: 900;
}

.review-bet-head span:not(.status-pill) {
  display: block;
  margin-top: 3px;
  color: #64748b;
  font-size: 12px;
  font-weight: 750;
}

.review-bet-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.review-bet-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e4ebf5;
  border-radius: 10px;
  background: #f8fafc;
}

.review-bet-grid small {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.review-bet-grid strong {
  display: block;
  overflow-wrap: anywhere;
  color: #273348;
  font-size: 13px;
  font-weight: 850;
}

.review-action-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(82px, auto));
  gap: 10px;
  align-items: center;
}

.review-action-row .button {
  min-height: 44px;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .review-bet-card {
    padding: 14px;
  }

  .review-bet-head {
    align-items: stretch;
    flex-direction: column;
  }

  .review-bet-grid {
    grid-template-columns: 1fr;
  }

  .review-action-row {
    grid-template-columns: 1fr;
  }

  .review-action-row .button {
    width: 100%;
  }
}

.limit-form-section {
  margin: 14px 0;
}

.limit-form-section > .mgmt-form-grid,
.limit-form-section > .mgmt-checkbox-grid,
.limit-form-section > .casino-limit-list,
.limit-form-section > .mgmt-note {
  margin-top: 12px;
}

.limit-form-section small {
  color: #64748b;
  font-size: 11px;
}

.mgmt-form-action-bar {
  position: sticky;
  bottom: 0;
  z-index: 8;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin: 20px -18px -18px;
  padding: 14px 18px;
  border-top: 1px solid #dbe1eb;
  border-radius: 0 0 10px 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(10px);
}

.mgmt-form-action-bar .button {
  width: auto;
  min-width: 140px;
  min-height: 48px;
  max-height: 52px;
  align-self: center;
  justify-self: auto;
  padding: 0 20px;
}

.mgmt-form-panel .field,
.mgmt-main .field {
  min-height: 48px;
  border-color: #cfd6e1;
  background: white;
  color: #2f3745;
}

.mgmt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid #e3e8f0;
}

.mgmt-row strong {
  color: #2f3745;
}

.mgmt-row span {
  color: #697383;
  font-size: 13px;
}

.agent-tree,
.agent-tree ul {
  margin: 0;
  padding-left: 22px;
  list-style: none;
}

.agent-tree > li {
  padding-left: 0;
}

.tree-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 7px 0;
  padding: 12px;
  border-left: 4px solid #448cff;
  border-radius: 8px;
  background: #f3f7ff;
}

.tree-row.player {
  border-left-color: #45d69b;
  background: #f1fff8;
}

.tree-row span {
  color: #667185;
  font-size: 12px;
}

.profile-card {
  margin-bottom: 12px;
  padding: 14px;
  border: 1px solid #e1e6ee;
  border-radius: 8px;
  background: #fafcff;
}

.profile-card strong {
  display: block;
  margin-bottom: 5px;
  color: #2e3747;
}

.profile-card p,
.profile-card span {
  color: #667185;
  font-size: 13px;
}

.profile-card pre {
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-radius: 8px;
  background: #20283b;
  color: #dcecff;
  font-size: 11px;
}

.casino-control-list {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.casino-scope-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}

.casino-scope-filters label {
  display: grid;
  gap: 6px;
  color: #465163;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.casino-scope-filters .hidden {
  display: none;
}

.mgmt-form-block {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(103, 148, 198, 0.22);
  border-radius: 12px;
  background: rgba(7, 18, 37, 0.28);
}

.mgmt-form-block h3 {
  margin: 0;
  font-size: 14px;
}

.mgmt-checkbox-grid,
.mgmt-check-grid,
.mgmt-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mgmt-check {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(103, 148, 198, 0.28);
  border-radius: 10px;
  background: rgba(17, 31, 55, 0.58);
  color: #dceaff;
  font-size: 12px;
  font-weight: 800;
}

.mgmt-check input {
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
}

.casino-limit-list {
  display: grid;
  gap: 12px;
}

.casino-limit-row {
  overflow: hidden;
  border: 1px solid #dbe4f0;
  border-radius: 14px;
  background: #fbfdff;
}

.casino-limit-row summary {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: #f4f8ff;
  color: #253044;
  cursor: pointer;
  list-style: none;
}

.casino-limit-row summary::-webkit-details-marker {
  display: none;
}

.casino-limit-row summary::after {
  content: "▾";
  color: #448cff;
  font-size: 18px;
  font-weight: 900;
}

.casino-limit-row[open] summary::after {
  transform: rotate(180deg);
}

.casino-limit-row strong {
  color: #1f2937;
  font-size: 15px;
}

.casino-limit-row summary span {
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}

.casino-limit-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
}

.casino-limit-row label,
.mgmt-form-grid label {
  display: grid;
  gap: 5px;
  color: #4b5563;
  font-size: 11px;
  font-weight: 800;
}

.casino-control-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(180px, 1fr) 44px;
  gap: 14px;
  align-items: center;
  padding: 13px;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  background: #fbfdff;
}

.casino-control-row span {
  display: grid;
  gap: 3px;
}

.casino-control-row strong {
  color: #2d3544;
}

.casino-control-row small {
  color: #667185;
  font-size: 12px;
}

.casino-control-row input[type="range"] {
  width: 100%;
  accent-color: #448cff;
}

.casino-control-row output {
  min-width: 36px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #20283b;
  color: #dcecff;
  font-weight: 900;
  text-align: center;
}

.casino-multiplier-control {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 11px;
  border: 1px solid #dce5f2;
  border-radius: 9px;
  background: #f5f8fd;
  color: #374151;
  font-size: 12px;
  font-weight: 850;
}

.casino-multiplier-control > span {
  display: grid;
  grid-template-columns: minmax(0, 180px) auto;
  align-items: center;
  justify-content: start;
  gap: 8px;
}

.casino-multiplier-control .field {
  width: 100%;
}

.casino-multiplier-control b {
  color: #526078;
  white-space: nowrap;
}

.casino-control-extra {
  grid-column: 1 / -1;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e4f3;
  border-radius: 10px;
  background: #f7fbff;
}

.casino-control-extra h3 {
  margin: 0;
  color: #263247;
  font-size: 15px;
}

.casino-control-extra p {
  margin: 0;
  color: #667185;
  font-size: 12px;
}

.minefield-payout-row {
  display: grid;
  grid-template-columns: 90px repeat(2, minmax(120px, 1fr));
  gap: 10px;
  align-items: end;
}

.minefield-payout-row strong {
  padding-bottom: 10px;
}

.minefield-payout-row label {
  display: grid;
  gap: 5px;
  color: #445066;
  font-size: 12px;
  font-weight: 800;
}

@media (min-width: 641px) {
  .app-shell {
    max-width: 480px;
    min-height: 100dvh;
    box-shadow: 0 0 55px rgba(0, 0, 0, 0.55);
  }

  .bottom-nav {
    left: 50%;
    width: 480px;
    transform: translateX(-50%);
  }

  .casino-shell {
    max-width: 480px;
    box-shadow: 0 0 55px rgba(0, 0, 0, 0.55);
  }

  .casino-bottom-nav {
    left: 50%;
    width: 480px;
    transform: translateX(-50%);
  }
}

@media (max-width: 780px) {
  .mgmt-shell {
    display: block;
  }

  .mgmt-sidebar {
    position: relative;
    display: flex;
    height: auto;
    overflow-x: auto;
    padding: 10px;
    gap: 8px;
  }

  .mgmt-brand {
    display: none;
  }

  .mgmt-sidebar button {
    width: auto;
    min-width: max-content;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px;
  }

  .mgmt-sidebar button span {
    width: auto;
  }

  .mgmt-main {
    padding: 14px;
  }

  .mgmt-title h1 {
    font-size: 22px;
  }

  .mgmt-card-grid,
  .mgmt-form-panel form,
  .casino-scope-filters {
    grid-template-columns: 1fr;
  }

  .mgmt-row,
  .tree-row,
  .mgmt-title,
  .casino-control-row {
    align-items: flex-start;
    grid-template-columns: 1fr;
    flex-direction: column;
  }

  .minefield-payout-row {
    grid-template-columns: 1fr;
  }

  .minefield-payout-row strong {
    padding-bottom: 0;
  }
}

@media (max-width: 370px) {
  .game-row,
  .odds-header {
    grid-template-columns: minmax(92px, 1fr) repeat(3, minmax(63px, 0.78fr));
    gap: 4px;
  }

  .team {
    gap: 4px;
    font-size: 10px;
  }

  .odds-button {
    font-size: 10px;
  }
}

.session-resume-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 78px;
  z-index: 80;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(93, 170, 255, 0.55);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(30, 47, 81, 0.98), rgba(13, 23, 44, 0.98));
  color: #f7fbff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.session-resume-banner span {
  display: block;
  margin-top: 3px;
  color: #b9c6dd;
  font-size: 12px;
}

.session-resume-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.button.small {
  min-height: 34px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 12px;
}

.admin-game-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.admin-game-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d8e1ef;
  border-radius: 14px;
  background: #fff;
}

.admin-game-card h3 {
  margin: 0;
}

@media (max-width: 780px) {
  .session-resume-banner {
    bottom: 72px;
  }

  .admin-game-rule-grid {
    grid-template-columns: 1fr;
  }
}

.manual-event-market-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.manual-market-row {
  border: 1px solid rgba(90, 115, 150, 0.28);
  border-radius: 12px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.92);
  display: grid;
  gap: 10px;
}

.manual-market-row strong {
  color: #273142;
}

@media (max-width: 720px) {
  .manual-event-market-grid {
    grid-template-columns: 1fr;
  }
}


.bet-leg-stack {
  display: grid;
  gap: 8px;
  margin: 9px 0 4px;
}

.bet-leg-stack-title {
  color: #93c5fd;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bet-leg-card {
  display: grid;
  gap: 4px;
  padding: 9px 10px;
  border: 1px solid rgba(104, 142, 190, 0.45);
  border-radius: 12px;
  background: rgba(9, 20, 42, 0.54);
  color: #e8f1ff;
}

.bet-leg-top,
.bet-leg-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.bet-leg-top span,
.bet-leg-market,
.bet-leg-event,
.bet-leg-meta {
  color: #91a5c3;
  font-size: 10px;
  font-weight: 750;
}

.bet-leg-top strong,
.bet-leg-selection {
  color: #ffffff;
  font-size: 12px;
  font-weight: 950;
}

.bet-leg-selection {
  line-height: 1.25;
}

.bet-leg-event {
  line-height: 1.35;
}

.leg-chip {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.18);
  color: #cbd5e1;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}

.leg-chip.live {
  background: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.ledger-ticket .bet-leg-stack {
  margin-top: 4px;
}

.ledger-ticket .bet-leg-stack-title {
  color: #2563eb;
}

.ledger-ticket .bet-leg-card {
  border-color: #d7e2f2;
  background: #f8fafc;
  color: #1f2937;
}

.ledger-ticket .bet-leg-top strong,
.ledger-ticket .bet-leg-selection {
  color: #111827;
}

.ledger-ticket .bet-leg-top span,
.ledger-ticket .bet-leg-market,
.ledger-ticket .bet-leg-event,
.ledger-ticket .bet-leg-meta {
  color: #64748b;
}

@media (max-width: 720px) {
  .ledger-ticket .bet-leg-stack {
    gap: 4px;
    margin: 2px 0 0;
  }

  .ledger-ticket .bet-leg-card {
    gap: 2px;
    padding: 6px 7px;
    border-radius: 8px;
  }

  .ledger-ticket .bet-leg-top,
  .ledger-ticket .bet-leg-meta {
    gap: 3px 6px;
  }

  .ledger-ticket .bet-leg-top strong,
  .ledger-ticket .bet-leg-selection {
    font-size: 11px;
  }

  .ledger-ticket .bet-leg-top span,
  .ledger-ticket .bet-leg-market,
  .ledger-ticket .bet-leg-event,
  .ledger-ticket .bet-leg-meta {
    font-size: 9px;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .ledger-ticket .bet-leg-stack:not(.multi) .bet-leg-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 7px;
  }

  .ledger-ticket .bet-leg-stack:not(.multi) .bet-leg-top {
    display: contents;
  }

  .ledger-ticket .bet-leg-stack:not(.multi) .bet-leg-top span {
    grid-column: 1;
    grid-row: 1;
  }

  .ledger-ticket .bet-leg-stack:not(.multi) .bet-leg-selection {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .ledger-ticket .bet-leg-stack:not(.multi) .bet-leg-top strong {
    grid-column: 3;
    grid-row: 1;
  }

  .ledger-ticket .bet-leg-stack:not(.multi) .bet-leg-market {
    grid-column: 1 / 2;
    grid-row: 2;
  }

  .ledger-ticket .bet-leg-stack:not(.multi) .bet-leg-event {
    grid-column: 2 / 4;
    grid-row: 2;
    min-width: 0;
  }

  .ledger-ticket .bet-leg-stack:not(.multi) .bet-leg-meta {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

@media (max-width: 520px) {
  .bet-leg-card {
    padding: 10px;
  }

  .bet-leg-top strong,
  .bet-leg-selection {
    font-size: 13px;
  }

  .history-total {
    flex-wrap: wrap;
    gap: 6px 12px;
  }
}

.risk-management-panel form { display: grid; gap: 14px; max-width: 720px; }
.risk-player-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.risk-player-card { display: grid; gap: 5px; padding: 14px; border: 1px solid #dbe4f0; border-radius: 12px; background: #fff; }
.risk-player-card > span:not(.status-pill), .risk-player-card small { color: #64748b; }
@media (max-width: 720px) { .risk-player-grid { grid-template-columns: 1fr; } .risk-management-panel form .button { width: 100%; min-height: 48px; } }


/* Management win/loss colors follow the player-facing convention. */
.mgmt-shell .mgmt-stat-card strong.positive,
.mgmt-shell .mgmt-overall-result.positive,
.mgmt-shell .overall-site-result strong.positive {
  color: #138a00;
}

.mgmt-shell .mgmt-stat-card strong.negative,
.mgmt-shell .mgmt-overall-result.negative,
.mgmt-shell .overall-site-result strong.negative {
  color: #f10f20;
}

.mgmt-shell .overall-site-result strong {
  white-space: normal;
  line-height: 1.15;
}

.baccarat-road{margin-top:14px;padding:12px;border:1px solid #344d76;border-radius:14px;background:#0b152b;overflow:hidden}
.baccarat-road-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px}
.baccarat-road-head span{color:#8fa7ca;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.baccarat-road-head h3{margin:2px 0 0;color:#fff;font-size:17px}.baccarat-road-head small{color:#a9bad5;text-align:right}
.baccarat-road-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-bottom:10px}.baccarat-road-stats>div{display:grid;gap:1px;min-width:0;padding:8px 5px;text-align:center;border:1px solid #2e4163;border-radius:9px;background:#12203b}
.baccarat-road-stats span,.baccarat-road-stats small{color:#9fb0cc;font-size:10px}.baccarat-road-stats strong{color:#fff;font-size:17px}.baccarat-road-stats .player strong{color:#4d94ff}.baccarat-road-stats .banker strong{color:#ff586e}.baccarat-road-stats .tie strong{color:#48d48a}
.baccarat-bead-plate{display:grid;grid-template-rows:repeat(6,30px);grid-auto-flow:column;grid-auto-columns:30px;gap:4px;max-width:100%;padding:8px;overflow-x:auto;border:1px solid #263a5b;border-radius:10px;background-color:#eef3fb;background-image:linear-gradient(#d6deea 1px,transparent 1px),linear-gradient(90deg,#d6deea 1px,transparent 1px);background-size:34px 34px}
.baccarat-bead{display:grid;place-items:center;width:28px;height:28px;border:3px solid currentColor;border-radius:50%;background:#fff;font-size:11px;font-weight:900}.baccarat-bead.player{color:#2878e2}.baccarat-bead.banker{color:#e23d56}.baccarat-bead.tie{color:#22965f}
.baccarat-road-empty{grid-row:1/span 2;grid-column:1/span 8;align-self:center;color:#50627d;font-size:12px}.baccarat-road-note,.baccarat-road-error{margin:9px 2px 0;color:#899dbd;font-size:11px;line-height:1.35}.baccarat-road-error{color:#ff9a9a}
@media(max-width:430px){.baccarat-road{padding:10px}.baccarat-road-head{align-items:flex-start}.baccarat-road-head small{max-width:130px}.baccarat-road-stats{gap:4px}.baccarat-road-stats>div{padding:7px 2px}.baccarat-road-stats strong{font-size:15px}}

.awards-promo {
  border-color: #c89636;
  background: radial-gradient(circle at 90% 10%, rgba(255, 202, 87, 0.22), transparent 42%), linear-gradient(135deg, #1b2944, #3a2a14);
}
.awards-league { display: grid; gap: 9px; }
.award-market-card { margin: 0; padding: 10px; }
.award-market-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 2px 2px 8px; }
.award-market-heading h3 { margin: 5px 0 2px; color: #fff; font-size: 14px; line-height: 1.25; }
.award-market-heading small, .award-candidate-count { color: #9fb5d3; font-size: 10px; }
.award-candidate-count { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #38557a; border-radius: 999px; background: #101e36; }
.award-outcomes { padding: 0; }
@media (max-width: 430px) {
  .award-market-card { padding: 8px; }
  .award-market-heading h3 { font-size: 13px; }
  .award-outcomes { gap: 6px; }
  .award-outcomes .generic-odd { min-height: 44px; padding: 6px 7px; }
  .award-outcomes .generic-odd span { font-size: 10px; white-space: normal; overflow-wrap: anywhere; }
}

/* Keep complete participant, event, and selection names visible beside odds. */
.sport-label,
.market-title span,
.team span:last-child,
.live-game-main strong,
.overview-selection strong,
.ticket-leg strong,
.slip-title strong,
.casino-game-summary strong,
.rooster-fighter strong {
  min-width: 0;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.generic-odd span,
.bet-leg-selection,
.bet-leg-event,
.bet-leg-market {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

.odds-button,
.generic-odd strong,
.odds-chip,
.market-date,
.award-candidate-count {
  flex-shrink: 0;
  white-space: nowrap;
}

.team,
.live-game-main,
.award-market-heading > div,
.overview-selection > div,
.slip-title strong,
.ticket-leg > div {
  min-width: 0;
}

.award-market-heading h3,
.live-score-card h2 {
  overflow-wrap: anywhere;
  word-break: normal;
}

@media (max-width: 430px) {
  .sport-label,
  .market-title span,
  .team span:last-child,
  .live-game-main strong,
  .overview-selection strong,
  .ticket-leg strong,
  .slip-title strong {
    line-height: 1.25;
  }

  .generic-odd {
    align-items: start;
  }

  .generic-odd strong {
    align-self: center;
  }
}


/* Management player IP report */
.ip-report-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ip-report-title {
  align-items: end;
  gap: 18px;
}
.ip-report-title > div {
  min-width: 0;
}
.ip-report-search {
  display: grid;
  flex: 0 1 340px;
  gap: 6px;
  color: #657184;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}
.player-ip-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.player-ip-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #dbe1eb;
  border-radius: 12px;
  background: #f9fbfe;
}
.player-ip-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e4e9f1;
}
.player-ip-card-head > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}
.player-ip-card-head strong,
.player-ip-card-head span {
  overflow-wrap: anywhere;
}
.player-ip-card-head > div span {
  color: #657184;
  font-size: 12px;
}
.player-ip-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
  margin: 14px 0 0;
}
.player-ip-facts div {
  min-width: 0;
}
.player-ip-facts dt {
  color: #778297;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.player-ip-facts dd {
  margin: 3px 0 0;
  color: #273244;
  font-size: 13px;
  font-weight: 700;
  overflow-wrap: anywhere;
}
.ip-address {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.player-ip-history {
  margin-top: 14px;
  border-top: 1px solid #e4e9f1;
}
.player-ip-history summary {
  padding: 12px 0 0;
  color: #286dd0;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}
.player-ip-history p {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(120px, 0.9fr);
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px;
  border-radius: 8px;
  background: #fff;
  color: #526074;
  font-size: 11px;
}
.player-ip-history p > * {
  min-width: 0;
  overflow-wrap: anywhere;
}
.ip-not-captured {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #e4e9f1;
}
@media (max-width: 780px) {
  .ip-report-summary,
  .player-ip-grid,
  .player-ip-facts {
    grid-template-columns: 1fr;
  }
  .ip-report-title {
    align-items: stretch;
  }
  .ip-report-search {
    width: 100%;
    flex-basis: auto;
  }
  .player-ip-card {
    padding: 14px;
  }
  .player-ip-history p {
    grid-template-columns: 1fr;
    gap: 3px;
  }
}


/* Baccarat visual table refresh. Gameplay selectors and actions are unchanged. */
.baccarat-casino-shell {
  overflow: hidden;
  margin: 12px 0 0;
  border: 1px solid #9c7838;
  border-radius: 22px;
  background: #080f1c;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
}

.baccarat-felt {
  position: relative;
  overflow: hidden;
  padding: 18px 14px 0;
  background:
    radial-gradient(circle at 50% 22%, rgba(62, 206, 186, 0.22), transparent 34%),
    repeating-linear-gradient(128deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #087f7a 0%, #055f62 48%, #073f4c 100%);
}

.baccarat-felt::after {
  content: "";
  position: absolute;
  right: -12%;
  bottom: -54px;
  left: -12%;
  height: 82px;
  border: 6px solid #c89536;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #493018, #160d09 55%, #080606);
  box-shadow: inset 0 5px 0 #f0c465, 0 -6px 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.baccarat-hero {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  max-width: 430px;
  margin: 0 auto 14px;
  color: #f9f3df;
}

.baccarat-crest {
  display: grid;
  width: 40px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 225, 153, 0.7);
  border-radius: 50% 50% 44% 44%;
  background: linear-gradient(145deg, #fff4bc, #a87929);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
  color: #17494e;
  font-family: Georgia, serif;
  font-size: 24px;
  font-weight: 900;
}

.baccarat-hero small {
  display: block;
  color: #b9e3dc;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.baccarat-hero h2 {
  margin: 2px 0 0;
  color: #fff8e8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.baccarat-hero p {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(244, 207, 120, 0.58);
  border-radius: 999px;
  color: #f9d889;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.baccarat-casino-shell .baccarat-table {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr);
  min-height: 142px;
  margin: 0 auto;
  padding: 12px;
  border: 1px solid rgba(255, 238, 190, 0.38);
  border-radius: 76px 76px 18px 18px;
  background: rgba(1, 53, 55, 0.48);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(2px);
}

.baccarat-casino-shell .hand-zone {
  display: grid;
  min-width: 0;
  min-height: 106px;
  align-content: start;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: rgba(0, 29, 34, 0.2);
}

.baccarat-casino-shell .hand-zone label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  color: #eaf8f3;
}

.baccarat-casino-shell .hand-zone label span {
  font-size: 10px;
  letter-spacing: 0.1em;
}

.baccarat-casino-shell .hand-zone label strong {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid #efce7a;
  border-radius: 50%;
  background: #082e34;
  color: #ffe3a0;
  font-size: 13px;
}

.baccarat-casino-shell .card-row {
  min-height: 56px;
  align-items: center;
  justify-content: center;
}

.baccarat-casino-shell .versus {
  width: 42px;
  height: 58px;
  border: 1px solid rgba(244, 207, 120, 0.65);
  border-radius: 50%;
  align-self: center;
  background: rgba(2, 39, 44, 0.86);
  box-shadow: 0 0 18px rgba(242, 200, 91, 0.16);
  color: #f5dc98;
}

.baccarat-casino-shell .versus span {
  color: #8ee0d4;
  font-size: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.baccarat-betting-console {
  position: relative;
  z-index: 2;
  padding: 14px 8px 58px;
}

.baccarat-bet-callout {
  max-width: 330px;
  margin: 0 auto 12px;
  padding: 8px 14px;
  border: 1px solid #e2b755;
  border-radius: 7px;
  background: rgba(2, 13, 18, 0.88);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}

.baccarat-main-bets {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: 400px;
  gap: 10px;
  margin: 0 auto;
}

.baccarat-main-bets button {
  aspect-ratio: 1 / 1;
  min-width: 0;
  min-height: 0;
  padding: 6px;
  border: 2px solid #f0d78f;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17, 92, 92, 0.92) 0 55%, rgba(5, 39, 47, 0.96) 56%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.16), 0 6px 16px rgba(0, 0, 0, 0.22);
  color: #fffdf4;
}

.baccarat-main-bets button span {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 3.1vw, 16px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.baccarat-main-bets button small {
  margin-top: 2px;
  color: #d6eee9;
  font-size: 7px;
}

.baccarat-main-bets button.active {
  border-color: #fff3b0;
  background: radial-gradient(circle, #58caba 0 54%, #167d78 55%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.28), 0 0 20px rgba(128, 255, 226, 0.58);
  transform: translateY(-2px);
}

.baccarat-chip-rail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 2vw, 11px);
  max-width: 430px;
  margin: 16px auto 0;
}

.baccarat-chip {
  --chip: #c7952e;
  display: grid;
  width: clamp(42px, 12vw, 55px);
  height: clamp(42px, 12vw, 55px);
  flex: 0 0 auto;
  place-items: center;
  border: 4px dashed #fff6db;
  border-radius: 50%;
  background: var(--chip);
  box-shadow: inset 0 0 0 4px var(--chip), inset 0 0 0 6px #fff4cf, 0 5px 12px rgba(0, 0, 0, 0.28);
  color: white;
  font-size: 11px;
}

.baccarat-chip b {
  display: grid;
  width: 58%;
  height: 58%;
  place-items: center;
  border-radius: 50%;
  background: rgba(6, 21, 32, 0.28);
}

.baccarat-chip.chip-1 { --chip: #c82332; }
.baccarat-chip.chip-2 { --chip: #7c29a8; }
.baccarat-chip.chip-3 { --chip: #1859b9; }
.baccarat-chip.chip-4 { --chip: #1b8b45; }

.baccarat-side-panel {
  padding: 13px;
  background: linear-gradient(180deg, #141c2c, #0c1422);
}

.baccarat-side-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #eef4ff;
}

.baccarat-side-heading span {
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.baccarat-side-heading small {
  color: #8fa5c5;
  font-size: 8px;
}

.baccarat-side-panel .baccarat-side-bets {
  margin: 10px 0 0;
}

@media (max-width: 430px) {
  .baccarat-casino-shell {
    border-radius: 18px;
  }
  .baccarat-felt {
    padding: 14px 9px 0;
  }
  .baccarat-hero {
    grid-template-columns: auto 1fr;
    margin-bottom: 10px;
  }
  .baccarat-hero p {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 2px;
  }
  .baccarat-hero h2 {
    font-size: 23px;
  }
  .baccarat-crest {
    width: 35px;
    height: 40px;
    font-size: 20px;
  }
  .baccarat-casino-shell .baccarat-table {
    grid-template-columns: minmax(0, 1fr) 34px minmax(0, 1fr);
    min-height: 130px;
    padding: 8px;
    border-radius: 52px 52px 14px 14px;
  }
  .baccarat-casino-shell .hand-zone {
    min-height: 96px;
    padding: 8px 5px;
  }
  .baccarat-casino-shell .hand-zone label {
    margin-bottom: 6px;
  }
  .baccarat-casino-shell .playing-card {
    width: 34px;
    height: 48px;
  }
  .baccarat-casino-shell .versus {
    width: 32px;
    height: 48px;
  }
  .baccarat-betting-console {
    padding: 12px 5px 54px;
  }
  .baccarat-main-bets {
    gap: 7px;
  }
  .baccarat-main-bets button {
    padding: 4px;
  }
  .baccarat-chip-rail {
    gap: 5px;
  }
  .baccarat-side-panel {
    padding: 11px 9px;
  }
  .baccarat-side-panel .baccarat-side-bets {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .baccarat-main-bets button {
    transition: none;
  }
}


/* Blackjack visual table refresh. Gameplay selectors and actions are unchanged. */
.blackjack-casino-shell {
  overflow: hidden;
  margin: 12px 0 0;
  border: 1px solid #9c7838;
  border-radius: 22px;
  background: #080f1c;
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.3);
}

.blackjack-felt {
  position: relative;
  overflow: hidden;
  padding: 18px 14px 14px;
  background:
    radial-gradient(circle at 50% 18%, rgba(62, 206, 186, 0.2), transparent 34%),
    repeating-linear-gradient(128deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
    linear-gradient(160deg, #087f7a 0%, #055f62 48%, #073f4c 100%);
}

.blackjack-felt::after {
  content: "";
  position: absolute;
  right: -14%;
  bottom: -62px;
  left: -14%;
  height: 94px;
  border: 6px solid #c89536;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #493018, #160d09 55%, #080606);
  box-shadow: inset 0 5px 0 #f0c465, 0 -6px 20px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.blackjack-hero {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  max-width: 460px;
  margin: 0 auto 13px;
  color: #f9f3df;
}

.blackjack-crest {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 2px solid #ead082;
  border-radius: 50%;
  background: radial-gradient(circle, #173e42 0 56%, #b98831 57%);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.12), 0 6px 15px rgba(0, 0, 0, 0.25);
  color: #fff3bd;
  font-family: Georgia, serif;
  font-size: 19px;
  font-weight: 900;
}

.blackjack-hero small {
  display: block;
  color: #b9e3dc;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.blackjack-hero h2 {
  margin: 2px 0 0;
  color: #fff8e8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.blackjack-hero p {
  margin: 0;
  padding: 7px 9px;
  border: 1px solid rgba(244, 207, 120, 0.58);
  border-radius: 999px;
  color: #f9d889;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.blackjack-casino-shell .blackjack-table {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 320px;
  margin: 0 auto;
  padding: 16px 14px 22px;
  border: 1px solid rgba(255, 238, 190, 0.42);
  border-radius: 110px 110px 26px 26px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(6, 74, 69, 0.24), transparent 55%),
    rgba(1, 53, 55, 0.48);
  box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(2px);
}

.blackjack-casino-shell .hand-zone {
  min-width: 0;
  min-height: 104px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 18px;
  background: rgba(0, 29, 34, 0.25);
}

.blackjack-casino-shell .hand-zone.active {
  border-color: #f5d579;
  background: rgba(7, 76, 72, 0.52);
  box-shadow: 0 0 18px rgba(255, 214, 109, 0.28), inset 0 0 0 1px rgba(255, 243, 184, 0.18);
}

.blackjack-casino-shell .hand-zone label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
  color: #eaf8f3;
}

.blackjack-casino-shell .hand-zone label span {
  min-width: 0;
  font-size: 10px;
  letter-spacing: 0.1em;
  overflow-wrap: anywhere;
}

.blackjack-casino-shell .hand-zone label strong {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #efce7a;
  border-radius: 50%;
  background: #082e34;
  color: #ffe3a0;
  font-size: 13px;
}

.blackjack-dealer-zone {
  width: min(100%, 250px);
  margin: 0 auto;
}

.blackjack-casino-shell .card-row {
  min-height: 62px;
  align-items: center;
  justify-content: center;
}

.blackjack-casino-shell .playing-card {
  width: 43px;
  height: 60px;
  border: 1px solid rgba(255, 255, 255, 0.86);
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.34);
}

.blackjack-table-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 13px auto;
  color: #efd58c;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.blackjack-table-rule::before,
.blackjack-table-rule::after {
  width: min(18vw, 78px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(239, 213, 140, 0.75));
  content: "";
}

.blackjack-table-rule::after {
  background: linear-gradient(90deg, rgba(239, 213, 140, 0.75), transparent);
}

.blackjack-table-rule b {
  color: #fff1bd;
  font-size: 15px;
}

.blackjack-player-hands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 9px;
}

.blackjack-player-zone small {
  display: block;
  margin-top: 8px;
  color: #cde5dc;
  text-align: center;
}

.blackjack-casino-shell .empty-table {
  display: grid;
  min-height: 112px;
  padding: 20px 10px;
  place-items: center;
  align-content: center;
  border: 1px dashed rgba(255, 240, 190, 0.42);
  border-radius: 24px;
  color: #dcefe8;
}

.blackjack-casino-shell .empty-table span {
  color: #e9cf82;
  font-size: 27px;
}

.blackjack-casino-shell .empty-table strong {
  margin-top: 3px;
  color: #fff8df;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 16px;
}

.blackjack-casino-shell .empty-table small {
  margin-top: 3px;
  color: #b4d5cb;
  font-size: 9px;
}

.blackjack-casino-shell .game-result-banner {
  margin-top: 12px;
}

.blackjack-control-panel {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  padding: 12px 10px 50px;
  border: 1px solid rgba(239, 205, 117, 0.35);
  border-radius: 16px;
  background: rgba(3, 32, 36, 0.7);
}

.blackjack-turn-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
  padding: 0 3px;
}

.blackjack-turn-label span {
  color: #b7ded5;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.blackjack-turn-label strong {
  color: #ffe099;
  font-size: 11px;
}

.blackjack-casino-shell .blackjack-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.blackjack-casino-shell .blackjack-actions button {
  display: grid;
  min-width: 0;
  min-height: 56px;
  padding: 8px 5px;
  place-items: center;
  align-content: center;
  border: 1px solid #5c8290;
  border-radius: 12px;
  background: linear-gradient(180deg, #173d4a, #102a39);
  color: #f3f8f8;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.blackjack-casino-shell .blackjack-actions button span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.blackjack-casino-shell .blackjack-actions button small {
  margin-top: 3px;
  color: #9ebbc5;
  font-size: 7px;
  font-weight: 700;
}

.blackjack-casino-shell .blackjack-actions .blackjack-primary-action {
  border-color: #e2be66;
  background: linear-gradient(180deg, #16847b, #0c5f60);
  color: #fff8dc;
}

.blackjack-casino-shell .blackjack-actions .blackjack-primary-action small {
  color: #d2f0e9;
}

.blackjack-casino-shell .blackjack-actions button:disabled {
  border-color: #35535d;
  background: #183039;
  box-shadow: none;
  color: #6f8b92;
  opacity: 0.55;
}

.blackjack-table-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  min-height: 45px;
  padding: 10px 10px 20px;
  color: #e5cf91;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.blackjack-table-footer b {
  font-size: 17px;
}

@media (max-width: 430px) {
  .blackjack-casino-shell {
    border-radius: 18px;
  }
  .blackjack-felt {
    padding: 14px 9px 10px;
  }
  .blackjack-hero {
    grid-template-columns: auto 1fr;
    margin-bottom: 10px;
  }
  .blackjack-hero p {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 2px;
  }
  .blackjack-hero h2 {
    font-size: 23px;
  }
  .blackjack-crest {
    width: 39px;
    height: 39px;
    font-size: 17px;
  }
  .blackjack-casino-shell .blackjack-table {
    min-height: 292px;
    padding: 13px 9px 18px;
    border-radius: 76px 76px 20px 20px;
  }
  .blackjack-dealer-zone {
    width: min(82%, 235px);
  }
  .blackjack-casino-shell .hand-zone {
    min-height: 98px;
    padding: 8px;
  }
  .blackjack-casino-shell .playing-card {
    width: 38px;
    height: 54px;
  }
  .blackjack-player-hands {
    grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
    gap: 7px;
  }
  .blackjack-table-rule {
    margin: 10px auto;
    font-size: 8px;
  }
  .blackjack-control-panel {
    padding: 10px 6px 48px;
  }
  .blackjack-casino-shell .blackjack-actions {
    gap: 6px;
  }
  .blackjack-casino-shell .blackjack-actions button {
    min-height: 54px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blackjack-casino-shell .playing-card {
    animation: none;
  }
}


/* Heads or Tails and Plinko */
.coin-game-stage,.plinko-stage{display:grid;gap:16px;justify-items:center;padding:18px;border:1px solid #314c78;border-radius:18px;background:radial-gradient(circle at 50% 15%,#1f355b,#091329 72%);overflow:hidden}
.coin-choice-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;max-width:430px}
.coin-choice-row button{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:10px;min-height:58px;padding:8px 14px;color:#dce9ff;border:1px solid #45628d;border-radius:14px;background:#142440;text-align:left}
.coin-choice-row button span{display:grid;place-items:center;width:42px;height:42px;border:2px solid #e8c76c;border-radius:50%;color:#ffe89a;background:#71551c;font-weight:900}
.coin-choice-row button.active{border-color:#f2cf6c;box-shadow:0 0 0 2px rgba(242,207,108,.25);background:#253452}
.casino-coin{display:grid;place-items:center;width:126px;height:126px;border:8px double #ffdf79;border-radius:50%;color:#fff6c9;background:radial-gradient(circle at 35% 30%,#fff0a9,#c28b20 45%,#61400b);box-shadow:0 18px 32px rgba(0,0,0,.38),inset 0 0 0 5px rgba(255,255,255,.14);font-size:52px;font-weight:950}
.casino-coin.flipping{animation:coin-flip 1.2s cubic-bezier(.2,.8,.25,1)}
.coin-result{display:grid;gap:3px;text-align:center}.coin-result strong{color:#fff;font-size:19px}.coin-result small{color:#9fb5d7}
@keyframes coin-flip{0%{transform:rotateY(0) translateY(0)}45%{transform:rotateY(900deg) translateY(-28px) scale(1.1)}100%{transform:rotateY(1800deg) translateY(0)}}
.plinko-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:12px}.plinko-options label{display:grid;gap:5px;color:#a9bad5;font-size:11px;text-transform:uppercase}.plinko-turbo{display:flex!important;align-items:center;justify-content:center;gap:8px;min-height:48px;margin-top:17px;border:1px solid #334d75;border-radius:10px;background:#13213b}
.plinko-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;width:100%}.plinko-stats span{display:grid;gap:2px;padding:8px;border:1px solid #2d446a;border-radius:10px;color:#8fa7ca;text-align:center;font-size:10px;text-transform:uppercase}.plinko-stats b{color:#fff;font-size:15px;text-transform:capitalize}
.plinko-board{position:relative;width:min(100%,520px);height:clamp(260px,62vw,430px);padding:22px 8px 8px;border:1px solid #29476f;border-radius:18px;background:linear-gradient(180deg,#0b1d3a,#071125)}
.plinko-pegs{display:grid;align-content:space-between;height:100%}.plinko-peg-row{display:flex;justify-content:space-evenly}.plinko-peg-row i{width:7px;height:7px;border-radius:50%;background:#c9e7ff;box-shadow:0 0 7px #59bfff}
.plinko-ball{position:absolute;z-index:3;left:50%;top:14px;width:16px;height:16px;border:1px solid #fff3ad;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff9cb 0 12%,#ffdf5d 30%,#d99008 82%);box-shadow:0 3px 7px #0008,0 0 10px #ffcf35;transform:translate(-50%,-50%);transform-origin:center;will-change:left,top,transform}.plinko-ball.peg-impact{filter:brightness(1.16);scale:1.08 .88}.plinko-ball.plinko-landed{box-shadow:0 2px 5px #0009,0 0 16px #ffe16a;scale:1.08 .92}
.plinko-slots{display:grid;grid-template-columns:repeat(var(--slot-count),minmax(0,1fr));gap:2px;width:100%;max-width:540px}.plinko-slots span{min-width:0;padding:7px 1px;border-radius:5px 5px 9px 9px;color:#e9f4ff;background:#284a77;text-align:center;font-size:9px;font-weight:800;overflow:hidden}.plinko-slots span:nth-child(-n+2),.plinko-slots span:nth-last-child(-n+2){background:#b5483b}.plinko-slots span.winning{outline:3px solid #ffe36c;box-shadow:0 0 16px #ffcf3d;color:#071125;background:#ffe36c}
.casino-control-direction{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin:0 0 10px;padding:9px 12px;border:1px solid #d0d9e8;border-radius:10px;background:#f6f8fc;color:#526178;font-size:12px}.casino-control-direction strong:last-child{text-align:right;color:#16764a}.casino-control-direction strong:first-child{color:#a12f3c}
@media(max-width:520px){.plinko-board{height:330px}.plinko-options{grid-template-columns:repeat(2,minmax(0,1fr))}.plinko-turbo{grid-column:1/-1;margin-top:0}.plinko-slots span{font-size:8px;padding:6px 0}.coin-choice-row button{grid-template-columns:38px 1fr;padding:8px}.coin-choice-row button span{width:34px;height:34px}}
@media(prefers-reduced-motion:reduce){.casino-coin.flipping{animation:none}.plinko-ball{transition:none;will-change:auto}}

.plinko-options{grid-template-columns:repeat(4,minmax(0,1fr))}@media(max-width:520px){.plinko-options{grid-template-columns:repeat(2,minmax(0,1fr))}.plinko-turbo{grid-column:auto}}