/* Shared surface details for the BloxFlare arcade. */
html[data-theme='dark'] {
  --detail-edge: #ffffff0c;
  --detail-rose: #f44466;
}

html[data-theme='dark'] .home-hero {
  background-image:
    linear-gradient(135deg, #ffffff0b 0, transparent 28%),
    radial-gradient(circle at 89% 52%, #9917372e, transparent 35%),
    radial-gradient(circle at 8% 99%, #53301e22, transparent 52%),
    linear-gradient(115deg, #1a1119 0%, #120e16 60%, #21111d 100%);
  box-shadow: inset 0 1px 0 #ffffff16, inset 0 0 90px #05020865, 0 28px 70px #0005;
}

html[data-theme='dark'] .home-game-card {
  background-image:
    linear-gradient(135deg, #ffffff0c, transparent 35%),
    radial-gradient(circle at 84% 72%, var(--flare-card-glow, #731c3023), transparent 46%),
    linear-gradient(160deg, #15131d, #0e0d15);
  box-shadow: inset 0 1px 0 #ffffff0c, inset 0 0 0 1px #0003;
}
html[data-theme='dark'] .home-game-card:hover {
  box-shadow: inset 0 1px 0 #ffffff19, inset 0 0 0 1px #0004, 0 20px 42px #0008;
}
html[data-theme='dark'] .home-card-art {
  background: radial-gradient(circle at 35% 25%, #ffffff15, transparent 60%), #17141f;
  box-shadow: inset 0 1px 0 #ffffff16, 0 7px 18px #0005;
}
html[data-theme='dark'] .home-benefits > div {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% -20%, #e02b4e15, transparent 55%),
    repeating-linear-gradient(135deg, transparent 0 23px, #ffffff02 24px 25px),
    #0d0c14;
  box-shadow: inset 0 1px 0 #ffffff0a, 0 14px 36px #0003;
}
html[data-theme='dark'] .home-benefits > div:nth-child(2) {
  background-color: #0d1118;
  background-image: radial-gradient(circle at 50% -20%, #4bd8d718, transparent 55%), repeating-linear-gradient(135deg, transparent 0 23px, #ffffff02 24px 25px);
}
html[data-theme='dark'] .home-benefits > div:nth-child(3) {
  background-color: #15100d;
  background-image: radial-gradient(circle at 50% -20%, #f2cd4a17, transparent 55%), repeating-linear-gradient(135deg, transparent 0 23px, #ffffff02 24px 25px);
}
html[data-theme='dark'] .home-benefits > div::before {
  content: '';
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  border-radius: 0 0 8px 8px;
  background: linear-gradient(90deg, transparent, #fa4567a0, transparent);
  pointer-events: none;
}
html[data-theme='dark'] .home-benefits > div:nth-child(2)::before { background: linear-gradient(90deg, transparent, #4bd8d7a0, transparent); }
html[data-theme='dark'] .home-benefits > div:nth-child(3)::before { background: linear-gradient(90deg, transparent, #f2cd4aa0, transparent); }
html[data-theme='dark'] .home-benefits > div > span {
  box-shadow: inset 0 1px 0 #ffffff19, 0 9px 26px #0006;
}

html[data-theme='dark'] .game-screen { --detail-game-accent: #f44466; --detail-game-glow: #ee245018; }
html[data-theme='dark'] #game-screen-mines { --detail-game-accent: #9fdb79; --detail-game-glow: #70c76517; }
html[data-theme='dark'] #game-screen-plinko { --detail-game-accent: #b48aff; --detail-game-glow: #a271e819; }
html[data-theme='dark'] #game-screen-crash { --detail-game-accent: #f1bd65; --detail-game-glow: #ec9a451b; }
html[data-theme='dark'] #game-screen-towers { --detail-game-accent: #69d0c9; --detail-game-glow: #47c6ba18; }
html[data-theme='dark'] #game-screen-cases { --detail-game-accent: #c697f3; --detail-game-glow: #a664d51b; }

html[data-theme='dark'] .game-view-heading {
  background-image: linear-gradient(90deg, var(--detail-game-glow), transparent 64%);
  box-shadow: inset 0 -1px 0 #ffffff08;
}
html[data-theme='dark'] .game-view-heading .eyebrow,
html[data-theme='dark'] .cases-section-heading .eyebrow {
  color: var(--detail-game-accent);
  letter-spacing: .13em;
}

html[data-theme='dark'] :is(.controls-panel, .board-panel, .arcade-controls, .arcade-stage,
  .roulette-room, .crash-room, .cases-pick, .cases-chances, .cases-action, .cases-battle,
  .profile-page-identity, .profile-page-balance, .profile-page-history, .profile-page-withdraw-form) {
  border-color: color-mix(in srgb, var(--detail-game-accent, #f44466) 17%, #282532);
  background-image:
    linear-gradient(145deg, #ffffff08 0, transparent 27%),
    radial-gradient(ellipse at 100% 0, var(--detail-game-glow, #ee245018), transparent 48%);
  box-shadow: inset 0 1px 0 var(--detail-edge), 0 14px 34px #0003;
}
html[data-theme='dark'] #game-screen-cases :is(.cases-pick, .cases-chances, .cases-action, .cases-battle) {
  background-image:
    linear-gradient(145deg, #ffffff08, transparent 31%),
    radial-gradient(ellipse at 100% 0, var(--detail-game-glow), transparent 48%),
    linear-gradient(140deg, #251923, #18131d);
  border-color: #503348;
  box-shadow: inset 0 1px 0 #ffffff0e, 0 14px 34px #0004;
}
html[data-theme='dark'] :is(.panel-heading, .stage-heading, .cases-section-heading, .profile-page-history-heading) {
  padding-bottom: 14px;
  border-bottom: 1px solid #ffffff0c;
}
html[data-theme='dark'] .step-number {
  box-shadow: inset 0 1px 0 #ffffff1a, 0 0 18px var(--detail-game-glow);
}
html[data-theme='dark'] .stage-tag,
html[data-theme='dark'] .round-indicator {
  box-shadow: inset 0 1px 0 #ffffff11;
}
html[data-theme='dark'] :is(.bet-input-wrap, .arcade-bet-input, .profile-page-withdraw-form input):focus-within {
  border-color: var(--detail-game-accent);
  box-shadow: 0 0 0 3px var(--detail-game-glow), inset 0 1px 0 #ffffff0d;
}
html[data-theme='dark'] .quick-bets button:enabled:hover,
html[data-theme='dark'] .cases-battle-formats button:hover,
html[data-theme='dark'] .cases-lobby button:hover {
  border-color: var(--detail-game-accent);
  box-shadow: 0 0 0 2px var(--detail-game-glow);
}

html[data-theme='dark'] .chat-panel {
  background-image: linear-gradient(180deg, #ffffff04, transparent 24%);
}
html[data-theme='dark'] .chat-stats-grid > div,
html[data-theme='dark'] .footer-community-card {
  box-shadow: inset 0 1px 0 #ffffff0b, 0 8px 20px #0003;
}
html[data-theme='dark'] .site-footer {
  background-image: linear-gradient(180deg, #f431500d, transparent 80px), radial-gradient(ellipse at 40% 0, #44102713, transparent 60%);
  box-shadow: inset 0 1px 0 #ffffff08;
}

/* Keep the wallet readable and its menu inside a narrow browser window. */
html[data-theme='dark'] .topbar .wallet-balance-button {
  width: auto;
  min-width: 78px;
  max-width: 138px;
}
html[data-theme='dark'] .topbar .wallet-balance-button strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
html[data-theme='dark'] .topbar .currency-menu {
  left: auto;
  right: 0;
  width: min(225px, calc(100vw - 24px));
  box-sizing: border-box;
}

.topbar .wallet-plus-button {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 38px;
  padding: 0;
  border: 1px solid #b82445;
  border-radius: 0 8px 8px 0;
  background: #eb234f;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  transition: background .18s, box-shadow .18s;
}
.topbar .wallet-plus-button:hover,
.topbar .wallet-plus-button[aria-expanded='true'] {
  background: #ff365f;
  box-shadow: 0 0 16px #ed244b55;
}
.topbar .wallet-plus-button:focus-visible,
.topbar .wallet-action-menu button:focus-visible {
  outline: 2px solid #ff7995;
  outline-offset: 2px;
}
.topbar .wallet-action-menu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 90;
  display: grid;
  gap: 4px;
  width: min(190px, calc(100vw - 24px));
  padding: 6px;
  border: 1px solid #45303c;
  border-radius: 11px;
  background: #17131d;
  box-shadow: 0 16px 36px #0009;
}
.topbar .wallet-action-menu[hidden] { display: none; }
.topbar .wallet-action-menu button {
  width: 100%;
  min-height: 38px;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #f5e8ee;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
}
.topbar .wallet-action-menu button:hover { background: #37202d; color: #fff; }

@media (prefers-reduced-motion: reduce) {
  html[data-theme='dark'] .home-game-card,
  html[data-theme='dark'] .home-benefits > div { transition-duration: 0s; }
}