/* BloxFlare's own compact arcade treatment. The live number is supplied by chat.js. */
html[data-theme="dark"] body {
  background:
    radial-gradient(ellipse at 31% -16%, #25101d 0, transparent 34%),
    radial-gradient(ellipse at 83% 75%, #18101e 0, transparent 31%),
    #0a0911;
}
html[data-theme="dark"] body::before { opacity:.045; }
html[data-theme="dark"] body::after { opacity:.055; }
html[data-theme="dark"] .app-shell { max-width:none; margin:0; padding:0 24px 70px; }
html[data-theme="dark"] .topbar {
  position:sticky; top:0; z-index:60; gap:7px; min-height:76px; margin:0 0 24px;
  padding:0 4px; border:0; border-bottom:1px solid #25202b; border-radius:0;
  background:#0a0911f2; box-shadow:none; backdrop-filter:blur(18px);
}
html[data-theme="dark"] .brand { gap:9px; font-size:22px; }
html[data-theme="dark"] .brand-mark {
  display:grid; place-items:center; width:35px; height:35px; border:1px solid #4a1b30;
  border-radius:11px; background:#26101c; box-shadow:0 0 22px #d21d4636;
  transform:none;
}
html[data-theme="dark"] .brand-mark::after { inset:11px; border-radius:2px; background:#ff3156; transform:rotate(18deg); }
html[data-theme="dark"] .brand:hover .brand-mark { transform:rotate(-12deg) scale(1.06); }
html[data-theme="dark"] .topbar .game-menu { gap:2px; }
html[data-theme="dark"] .topbar .game-link {
  min-height:45px; padding:6px 10px; border-radius:10px; color:#a9a2af;
  font-size:10px; letter-spacing:.045em; transition:background .22s,color .22s,transform .22s,box-shadow .22s;
}
html[data-theme="dark"] .topbar .game-link:hover { color:#fff; transform:translateY(-2px); }
html[data-theme="dark"] .topbar .game-link[aria-current="page"] {
  color:#ff496a; border-color:#4a172b; background:#32101f;
  box-shadow:inset 0 0 18px #eb24512b,0 0 17px #ed234522;
}
html[data-theme="dark"] .topbar .game-link .game-icon { transition:transform .25s,color .25s; }
html[data-theme="dark"] .topbar .game-link:hover .game-icon { transform:translateY(-2px) scale(1.16); color:#ff496a; }
html[data-theme="dark"] .topbar .header-online {
  display:inline-flex; min-height:36px; gap:5px; padding:5px 7px; border-color:#30252f;
  border-radius:8px; background:#15121b; color:#a89ca8; font-size:8px; letter-spacing:.05em;
}
html[data-theme="dark"] .topbar .header-online strong { color:#f5eff5; font-size:11px; }
.header-online-dot { animation:flare-live-pulse 2.1s ease-in-out infinite; }
.header-online-arrow { color:#ff4b6c; font-size:13px; line-height:1; animation:flare-arrow-rise 2.4s ease-in-out infinite; }
html[data-presence="offline"] .header-online-dot,html[data-presence="offline"] .header-online-arrow { animation:none; opacity:.55; }
html[data-theme="dark"] .topbar .account-trigger { min-height:38px; padding:7px 10px; border-radius:8px; }
html[data-theme="dark"] .topbar .account-trigger:hover { transform:translateY(-2px); }
html[data-theme="dark"] .topbar .wallet-balance-button { min-width:82px; width:auto; max-width:112px; border-radius:8px 0 0 8px; }
html[data-theme="dark"] .topbar .header-topup { border-radius:0 8px 8px 0; }
html[data-theme="dark"] .topbar .theme-toggle { border-radius:8px; }

html[data-theme="dark"] .home-hero {
  min-height:475px; margin-bottom:46px; padding:50px 54px; border-color:#35202e;
  border-radius:34px;
  background:
    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 0 90px #05020865,0 28px 70px #0005;
}
html[data-theme="dark"] .home-hero::before {
  top:auto; left:auto; right:6%; bottom:0; width:38%; height:70%; border:0; border-radius:0;
  background:repeating-linear-gradient(0deg,transparent 0 35px,#ff33540b 36px 37px),repeating-linear-gradient(90deg,transparent 0 35px,#ff33540b 36px 37px);
  transform:perspective(300px) rotateX(52deg); animation:flare-grid-drift 15s linear infinite;
}
html[data-theme="dark"] .home-hero::after {
  content:"›  ›  ›"; top:15%; right:5%; bottom:auto; width:auto; height:auto; border:0;
  color:#b5274963; font:900 38px/1 "Arial Black",sans-serif; letter-spacing:14px;
  transform:none; animation:flare-chevron 4s ease-in-out infinite;
}
html[data-theme="dark"] .home-kicker { border-color:#49343e; background:#ffffff08; }
html[data-theme="dark"] .home-hero h1 {
  max-width:700px; margin-top:25px; font-size:clamp(43px,4.8vw,71px);
  letter-spacing:-.065em; line-height:1.12;
}
html[data-theme="dark"] .home-hero h1 span { background-image:linear-gradient(92deg,#ff1e4d,#ff654d); }
html[data-theme="dark"] .home-hero-copy>p { max-width:600px; margin-top:31px; color:#aca4af; font-size:16px; line-height:1.75; }
html[data-theme="dark"] .home-play-button {
  position:relative; overflow:hidden; border-color:#fb2b51;
  background:linear-gradient(105deg,#f51e48,#de0633); box-shadow:0 8px 27px #e91b464e;
}
html[data-theme="dark"] .home-play-button::before {
  content:""; position:absolute; top:-80%; left:-36%; width:28%; height:250%;
  background:linear-gradient(90deg,transparent,#fff4,transparent); transform:rotate(24deg);
  animation:flare-button-shine 5.5s ease-in-out infinite;
}
html[data-theme="dark"] .home-play-button:hover { box-shadow:0 10px 34px #f71b4977; }
html[data-theme="dark"] .home-play-button span { display:inline-block; animation:flare-arrow-nudge 1.8s ease-in-out infinite; }
html[data-theme="dark"] .home-browse-button:hover { border-color:#7d4a5e; background:#ffffff10; }
html[data-theme="dark"] .home-hero-art { opacity:.2; filter:blur(.7px); }
html[data-theme="dark"] .home-hero-art .home-art-block { animation:bx-block 5s ease-in-out infinite; }
html[data-theme="dark"] .home-hero-art .block-green { animation-delay:-1s; }
html[data-theme="dark"] .home-hero-art .block-yellow { animation-delay:-2.2s; }
html[data-theme="dark"] .home-hero-art .block-pink { animation-delay:-3.2s; }
html[data-theme="dark"] .home-hero-art .block-teal { animation-delay:-1.8s; }

html[data-theme="dark"] .home-game-grid { gap:20px; }
html[data-theme="dark"] .home-game-card {
  min-height:310px; padding:30px; border-color:#292630; border-radius:32px;
  background:radial-gradient(circle at 84% 72%,var(--flare-card-glow,#731c3023),transparent 46%),#121019;
  transition:transform .32s cubic-bezier(.2,.8,.2,1),border-color .32s,box-shadow .32s;
}
html[data-theme="dark"] .home-game-card[data-game="plinko"] { --flare-card-glow:#51266d29; }
html[data-theme="dark"] .home-game-card[data-game="crash"] { --flare-card-glow:#81612629; }
html[data-theme="dark"] .home-game-card[data-game="towers"] { --flare-card-glow:#1b625e24; }
html[data-theme="dark"] .home-game-card[data-game="cases"] { --flare-card-glow:#56307429; }
html[data-theme="dark"] .home-game-card:hover {
  transform:translateY(-7px); border-color:#a23753;
  box-shadow:0 18px 40px #0007,inset 0 0 28px #d3214010;
}
.home-game-card.flare-revealed,.home-benefits>div.flare-revealed { animation:flare-reveal .65s both; }
.home-game-card.flare-revealed:nth-child(2),.home-benefits>div.flare-revealed:nth-child(2) { animation-delay:.07s; }
.home-game-card.flare-revealed:nth-child(3),.home-benefits>div.flare-revealed:nth-child(3) { animation-delay:.14s; }
.flare-count-change { animation:flare-count-pop .5s ease-out; }
html[data-theme="dark"] .home-game-card::before { font-size:36px; }
html[data-theme="dark"] .home-card-art { width:74px; height:74px; border-radius:21px; }
html[data-theme="dark"] .home-card-art>span { transition:transform .35s,filter .35s; }
html[data-theme="dark"] .home-game-card:hover .home-card-art>span { transform:rotate(-12deg) scale(1.14); filter:brightness(1.2); }
html[data-theme="dark"] .home-card-copy b { border-radius:11px; transition:border-color .2s,background .2s,color .2s; }
html[data-theme="dark"] .home-game-card:hover .home-card-copy b { border-color:#97354f; background:#411427; color:#fff; }
html[data-theme="dark"] .home-card-copy b span { display:inline-block; transition:transform .25s; }
html[data-theme="dark"] .home-game-card:hover .home-card-copy b span { transform:translate(4px,-4px); }
html[data-theme="dark"] .home-card-copy::after { animation:flare-available 3s ease-in-out infinite; }

html[data-theme="dark"] .home-benefits>div {
  min-height:210px; border-color:#292530; border-radius:30px; transition:transform .28s,border-color .28s,box-shadow .28s;
}
html[data-theme="dark"] .home-benefits>div:hover { transform:translateY(-6px); border-color:#6a2d46; box-shadow:0 16px 34px #0005; }
html[data-theme="dark"] .home-benefits>div>span { transition:transform .4s; }
html[data-theme="dark"] .home-benefits>div:hover>span { transform:rotate(-8deg) scale(1.1); }

html[data-theme="dark"] .chat-panel { border-left:1px solid #2a222d; background:#0d0c14; box-shadow:-12px 0 40px #0007; }
html[data-theme="dark"] .chat-stats { padding:21px 18px 19px; }
html[data-theme="dark"] .chat-stats-title::before { content:"⌁"; color:#ff3156; margin-right:7px; font-size:20px; line-height:0; }
html[data-theme="dark"] .chat-stats-title>span:first-child { margin-right:auto; }
html[data-theme="dark"] .chat-live i { animation:flare-live-pulse 2.1s ease-in-out infinite; }
html[data-theme="dark"] .chat-stats-grid>div { transition:border-color .25s,transform .25s,background .25s; }
html[data-theme="dark"] .chat-stats-grid>div:first-child { position:relative; }
html[data-theme="dark"] .chat-stats-grid>div:first-child::after {
  content:"↗"; position:absolute; top:9px; right:12px; color:#34cf91;
  font-size:18px; font-weight:900; animation:flare-arrow-rise 2.4s ease-in-out infinite;
}
html[data-theme="dark"] .chat-stats-grid>div:hover { transform:translateY(-3px); border-color:#6a344a; background:#1a1420; }
html[data-theme="dark"] .chat-nav button::after { content:"↗"; margin-left:auto; color:#a44563; font-size:16px; opacity:0; transform:translate(-4px,4px); transition:opacity .2s,transform .2s; }
html[data-theme="dark"] .chat-nav button:hover::after { opacity:1; transform:translate(0,0); }
html[data-theme="dark"] .chat-announcement::after { animation:flare-coins 8s linear infinite; }
html[data-theme="dark"] .chat-promo-arrow { animation:flare-arrow-rise 2.5s ease-in-out infinite; }
html[data-theme="dark"] .chat-empty::before { animation:flare-empty-float 4s ease-in-out infinite; }

html[data-theme="dark"] .game-view-heading,html[data-theme="dark"] .info-hero { border-bottom:1px solid #28212d!important; }
html[data-theme="dark"] .controls-panel,html[data-theme="dark"] .board-panel,
html[data-theme="dark"] .arcade-controls,html[data-theme="dark"] .arcade-stage {
  border-color:#302632; border-radius:22px; box-shadow:0 14px 35px #0003;
}
html[data-theme="dark"] .site-footer { border-radius:18px 18px 0 0; }

@media (min-width:1100px) {
  html[data-chat="open"] .app-shell { width:calc(100% - 360px); margin:0 360px 0 0; }
  html[data-chat="open"] .chat-panel { width:360px; }
  .topbar .game-link[data-game="mines"],.topbar .game-link[data-game="towers"],.topbar .game-link[data-game="cases"] { display:none; }
  html[data-theme="dark"] .topbar .header-online { display:inline-flex; }
  html[data-theme="dark"] .home-game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1100px) and (max-width:1299px) {
  html[data-theme="dark"] .topbar { flex-wrap:wrap; gap:0 8px; padding:8px 0; }
  html[data-theme="dark"] .topbar::after { content:""; order:1; flex-basis:100%; height:0; }
  html[data-theme="dark"] .topbar .game-menu { order:2; flex:1 1 auto; }
  html[data-theme="dark"] .topbar .header-extra { order:2; }
  html[data-theme="dark"] .topbar .game-link { min-height:34px; }
  html[data-theme="dark"] .topbar .brand { margin-right:auto; }
  html[data-theme="dark"] .topbar .header-online { margin-left:auto; }
}
@media (max-width:1099px) {
  html[data-theme="dark"] .topbar .header-online { display:none; }
  html[data-theme="dark"] .home-hero { min-height:470px; }
}
@media (max-width:850px) {
  html[data-theme="dark"] .topbar { flex-wrap:wrap; padding:9px 0; }
  html[data-theme="dark"] .topbar .game-menu { flex-basis:100%; order:2; }
  html[data-theme="dark"] .home-game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:580px) {
  html[data-theme="dark"] .app-shell { padding-inline:14px; }
  html[data-theme="dark"] .home-hero { min-height:440px; padding:35px 25px; border-radius:26px; }
  html[data-theme="dark"] .home-hero h1 { font-size:clamp(35px,8vw,48px); }
  html[data-theme="dark"] .home-hero-copy>p { font-size:14px; }
  html[data-theme="dark"] .home-game-grid { grid-template-columns:1fr; gap:13px; }
  html[data-theme="dark"] .home-game-card { min-height:260px; }
}
@media (prefers-reduced-motion:reduce) {
  .header-online-dot,.header-online-arrow,.chat-live i,
  html[data-theme="dark"] .home-hero::before,html[data-theme="dark"] .home-hero::after,
  html[data-theme="dark"] .home-play-button::before,html[data-theme="dark"] .home-play-button span,
  html[data-theme="dark"] .home-hero-art .home-art-block,html[data-theme="dark"] .home-card-copy::after,
  html[data-theme="dark"] .chat-announcement::after,html[data-theme="dark"] .chat-promo-arrow,
  html[data-theme="dark"] .chat-empty::before,html[data-theme="dark"] .chat-stats-grid>div:first-child::after { animation:none!important; }
}
@keyframes flare-live-pulse { 0%,100% { box-shadow:0 0 0 0 #2be49755,0 0 7px #2be49788; } 50% { box-shadow:0 0 0 5px #2be49700,0 0 14px #2be497b0; } }
@keyframes flare-arrow-rise { 0%,100% { transform:translate(0,0); opacity:.7; } 50% { transform:translate(3px,-3px); opacity:1; } }
@keyframes flare-arrow-nudge { 0%,100% { transform:translateX(0); } 50% { transform:translateX(4px); } }
@keyframes flare-grid-drift { from { background-position:0 0,0 0; } to { background-position:0 37px,37px 0; } }
@keyframes flare-chevron { 0%,100% { opacity:.25; transform:translateX(0); } 50% { opacity:.55; transform:translateX(12px); } }
@keyframes flare-button-shine { 0%,65%,100% { left:-36%; } 83% { left:140%; } }
@keyframes flare-available { 0%,100% { color:#8b7f91; } 50% { color:#37cb93; } }
@keyframes flare-coins { 0% { transform:translateX(0) rotate(23deg); } 100% { transform:translateX(-35px) rotate(23deg); } }
@keyframes flare-empty-float { 0%,100% { transform:translateY(0); opacity:.7; } 50% { transform:translateY(-5px); opacity:1; } }
@keyframes flare-reveal { from { opacity:.3; translate:0 18px; } to { opacity:1; translate:0 0; } }
@keyframes flare-count-pop { 0% { color:#35d692; transform:scale(.8); } 60% { color:#fff; transform:scale(1.15); } 100% { transform:scale(1); } }

/* Illustrated game identities shared by the navigation, dropdown and cards. */
.topbar .game-link[data-game] .game-icon:not(.icon-home),
.header-extra .menu-game-icon,
.home-game-card .home-card-art>span {
  background-color:transparent!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-size:contain!important;
  border:0!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  text-shadow:none!important;
}
.topbar .game-link[data-game] .game-icon:not(.icon-home) {
  display:block;
  flex:none;
  width:27px;
  height:27px;
}
.header-extra .menu-game-icon {
  display:inline-block;
  flex:none;
  width:24px;
  height:24px;
  margin-right:7px;
  vertical-align:middle;
}
.home-game-card .home-card-art>span,
.home-game-card:hover .home-card-art>span {
  display:block!important;
  width:68px!important;
  height:68px!important;
  filter:drop-shadow(0 8px 10px #0007);
}
.home-game-card:hover .home-card-art>span {
  transform:translateY(-4px) rotate(-5deg) scale(1.09)!important;
  filter:drop-shadow(0 12px 13px #0009) brightness(1.12);
}
.game-link[data-game="mines"] .game-icon,
.menu-game-icon.icon-mines,
.home-card-mines>span { background-image:url('/game-icons/mines.svg')!important; }
.game-link[data-game="plinko"] .game-icon,
.menu-game-icon.icon-plinko,
.home-card-plinko>span { background-image:url('/game-icons/plinko.svg')!important; }
.game-link[data-game="roulette"] .game-icon,
.menu-game-icon.icon-roulette,
.home-card-roulette>span { background-image:url('/game-icons/roulette.svg')!important; }
.game-link[data-game="crash"] .game-icon,
.menu-game-icon.icon-crash,
.home-card-crash>span { background-image:url('/game-icons/crash.svg')!important; }
.game-link[data-game="towers"] .game-icon,
.menu-game-icon.icon-towers,
.home-card-towers>span { background-image:url('/game-icons/towers.svg')!important; }
.game-link[data-game="cases"] .game-icon,
.menu-game-icon.icon-cases,
.home-card-cases>span { background-image:url('/game-icons/cases.svg')!important; }
html[data-theme="dark"] .home-card-art::after { display:none; }
@media (max-width:580px) {
  .home-game-card .home-card-art>span,
  .home-game-card:hover .home-card-art>span { width:60px!important; height:60px!important; }
}