/* Shared game navigation, loaded after the site's responsive styles. */
.topbar nav.game-navigation {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex!important;
  gap:4px;
  width:396px;
  margin:0;
  padding:5px;
  box-sizing:border-box;
  border-radius:22px;
  background:#171e1b;
  box-shadow:0 8px 24px #0002;
}
.game-navigation .game-link {
  flex:1;
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-width:0;
  height:50px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0;
  border-radius:16px;
  background:transparent;
  color:#9fb3a8;
  text-decoration:none;
  font:700 14px/1 Inter,Arial,sans-serif;
  transition:background .18s,color .18s,box-shadow .18s;
  -webkit-tap-highlight-color:transparent;
}
.game-link svg {
  width:23px;
  height:23px;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.game-link svg {padding:6px;box-sizing:content-box;border-radius:11px;background:#29362e80;transition:background .18s,filter .18s}
.game-navigation .game-link:hover {background:#25362d;color:#c8ffe7}
.game-navigation .game-link::after {content:"";position:absolute;bottom:0;left:28%;right:28%;height:3px;border-radius:3px 3px 0 0;background:#55ffcf;opacity:0;transition:opacity .18s;box-shadow:0 -3px 14px #42ffb899}
.game-navigation .game-link[aria-current=page] {
  background:radial-gradient(ellipse at 20% 0%,#58ffbf30,transparent 85%),linear-gradient(120deg,#284c3b,#1e362d);
  color:#75ffcf;
  box-shadow:0 4px 16px #0002;
}
.game-navigation .game-link[aria-current=page]::after {opacity:1}
.game-link[aria-current=page] svg {background:#4dffc620;filter:drop-shadow(0 0 6px #39ffb835)}
.game-link[aria-current=page] svg {stroke:currentColor}
.game-link:focus-visible,.duel-back:focus-visible {outline:2px solid #55ffda;outline-offset:4px}

/* Keep the counters beside the logo without changing the centered navigation. */
@media(min-width:1180px) {
  .topbar>.site-logo {align-self:center;margin-top:0}
  .topbar .header-metrics {
    position:absolute;top:50%;left:calc(clamp(16px,2.2vw,38px) + 195px);transform:translateY(-50%);
    display:flex!important;width:auto;height:auto;margin:0;gap:18px;
  }
  .topbar .header-stat {display:flex;align-items:center;gap:5px;padding:0;border:0;min-width:0}
  .topbar .header-stat>span:last-child {display:flex;flex-direction:column;align-items:flex-start;gap:3px}
  .topbar .header-stat small {display:block;font-size:10px;line-height:13px}
  .topbar .header-stat b {font-size:13px;line-height:16px}
  .topbar .header-stat-icon,.topbar .header-stat-icon svg {width:23px;height:23px}
}
/* Match the native important layer so its legacy banner positioning cannot win. */
@layer skinboost-fixes {
#winsRailToggle {border:0!important}
body:has(.game-navigation) .mobile-back {display:none!important}
@media(min-width:1800px) {
  body .fortune-strip {
    left:calc(clamp(16px,2.2vw,38px) + 410px)!important;
    top:13px!important;
    width:min(340px,calc(50vw - clamp(16px,2.2vw,38px) - 632px))!important;
    height:60px!important;
  }
  body .fortune-strip .fortune-copy strong,body .fortune-strip .creator-copy strong {font-size:15px!important}
  body .fortune-strip>.fortune-banner,body .fortune-strip>.creator-banner {border-radius:16px!important;padding:9px 12px!important}
}
@media(min-width:1180px) and (max-width:1799px) {
  body .fortune-strip {
    position:relative!important;inset:auto!important;
    width:340px!important;height:76px!important;margin:14px 24px!important;
  }
}
@media(max-width:1179px) {
  .topbar {gap:0 12px!important;padding:0 12px!important}
  body .fortune-strip {
    position:relative!important;inset:auto!important;
    width:min(560px,calc(100% - 24px))!important;height:100px!important;
    margin:12px!important;
  }
}
@media(max-width:600px) {
  body .fortune-strip {height:76px!important;margin:8px 12px!important}
}
}
@media(min-width:1180px) and (max-width:1399px) {
  .topbar .header-social-links {display:none!important}
}
@media(min-width:1180px) and (max-width:1279px) {
  .topbar nav.game-navigation {width:366px}
}
@media(max-width:1179px) {
  :root {--skinboost-header-height:118px!important}
  .topbar {
    display:grid!important;grid-template-columns:auto 1fr auto;grid-template-rows:62px 56px;
    align-items:center;column-gap:12px!important;padding:0 12px!important;
  }
  .topbar>.site-logo {grid-column:1;grid-row:1;align-self:center;margin:0}
  .topbar>.header-metrics {grid-column:2;grid-row:1;margin:0}
  .topbar>.head-actions {grid-column:3;grid-row:1;height:62px;margin:0!important}
  .topbar nav.game-navigation {
    grid-column:1/-1;grid-row:2;position:static;transform:none;
    width:min(100%,396px);justify-self:center;align-self:start;
  }
  .game-navigation .game-link {height:46px;font-size:13px;border-radius:15px}
  .game-link svg {width:21px;height:21px}
}
@media(max-width:370px) {
  .topbar nav.game-navigation {gap:6px}
  .game-navigation .game-link {gap:6px;font-size:12px}
  .game-link svg {width:19px;height:19px}
}
@media(prefers-reduced-motion:reduce) {.game-navigation .game-link {transition:none}}

html.duel-route #upgradeView {display:none}
html.duel-route #duelView {display:block}
body:has(#duelView.active) .mobile-back {display:none!important}
.duel-preview {
  min-height:480px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:50px 24px;border-radius:24px;text-align:center;color:#edf4f0;
  background:radial-gradient(ellipse at 50% 35%,#1a493733,transparent 65%),#191f1c;
}
.duel-emblem {display:grid;place-items:center;width:100px;height:100px;border-radius:30px;background:#233c30;color:#56e8bd;margin-bottom:24px}
.duel-emblem svg {width:52px;height:52px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.duel-status {font:600 11px Inter,sans-serif;color:#78deb9;background:#284134;padding:6px 12px;border-radius:9px}
.duel-preview h1 {font:700 36px Inter,sans-serif;margin:14px 0 10px}
.duel-preview p {color:#92a69c;font:14px/1.6 Inter,sans-serif;margin:0}
.duel-back {display:flex;align-items:center;gap:16px;margin-top:30px;padding:16px 22px;background:#00cfa0;border-radius:16px;color:#063d2c;text-decoration:none;font:600 13px Inter,sans-serif}
.duel-back:hover {background:#55ffcf}
@media(max-width:700px){
 .topbar nav.game-navigation{position:absolute;grid-area:auto;justify-self:auto;align-self:auto;top:62px;left:50%;transform:translateX(-50%);width:calc(100% - 24px);max-width:396px;transition:none}
 .game-navigation .game-link{transition:color .18s}
 .game-link>span{display:block;max-width:80px;opacity:1;overflow:hidden;white-space:nowrap;transition:opacity .18s ease}
 .topbar.navigation-compact nav.game-navigation{width:138px;top:8px;left:54px;transform:none}
 .navigation-compact .game-link{gap:0}
 .navigation-compact .game-link>span{max-width:0;opacity:0}
 .topbar>.header-metrics{transition:opacity .18s ease}
 .topbar.navigation-compact>.header-metrics{opacity:0;pointer-events:none}
}
@layer skinboost-fixes {
 @media(max-width:700px){
  .topbar{transition:none}
  .topbar.navigation-compact{height:62px!important;grid-template-rows:62px!important}
  .topbar.navigation-compact .game-link{height:36px!important}
  .topbar.navigation-compact .head-actions{position:absolute;right:12px;top:0}
  .topbar.navigation-compact #topupButton,.topbar.navigation-compact .user-avatar,.topbar.navigation-compact .support-fab{display:none!important}
  .topbar.navigation-compact .wallet-group .balance-pill{width:104px!important;min-width:104px!important;padding:0 7px!important}
  .topbar.navigation-compact .balance-pill b{font-size:11px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar.navigation-compact .wallet-group{max-width:104px!important}
 }
}
@media(prefers-reduced-motion:reduce){.topbar nav.game-navigation,.game-navigation .game-link,.game-link>span{transition:none}}

/* One selected surface; no nested icon tiles or expensive glow filters. */
.game-navigation .game-link svg,
.game-navigation .game-link[aria-current="page"] svg {background:transparent;filter:none}
@media(max-width:700px) {
 .topbar nav.game-navigation {background:transparent;box-shadow:none;overflow:visible}
 .game-navigation .game-link {box-shadow:none}
 .game-navigation .game-link[aria-current="page"] {background:#284c3b;box-shadow:none}
 .game-navigation .game-link::after {box-shadow:none}
}
@layer skinboost-fixes {
 #upgradeView #ownedGrid.is-owned-empty {
  height:auto!important;min-height:260px!important;max-height:none!important;
  grid-template-rows:auto!important;grid-auto-rows:auto!important;
 }
 #upgradeView #ownedGrid.is-owned-empty .owned-empty-pay {
  height:auto!important;min-height:260px!important;max-height:none!important;
  box-sizing:border-box;border-radius:18px;
 }
}

.game-navigation .game-link{justify-content:center;gap:8px}
.game-navigation .game-link svg{padding:0}
.game-navigation .game-link>span{flex:0 0 auto}
.game-navigation .game-link svg{display:none!important}
.game-navigation .game-link{gap:0!important}
@layer skinboost-fixes {
 .topbar.navigation-slim .game-navigation .game-link{height:42px!important}
 @media(max-width:700px){
  .topbar.navigation-slim{height:110px!important;grid-template-rows:62px 48px!important}
  .topbar.navigation-slim .game-navigation .game-link{height:38px!important}
  .topbar.navigation-slim .game-navigation{top:62px!important;left:50%!important;transform:translateX(-50%)!important;width:calc(100% - 24px)!important;max-width:396px!important}
  .topbar.navigation-slim .game-link>span{max-width:none!important;opacity:1!important}
 }
}
@media(max-width:700px){.navigation-compact .game-link{gap:0}}

@layer skinboost-fixes {
 /* The header is opaque: backdrop blur adds work without changing its pixels. */
 .topbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
 @media(min-width:701px){
  #upgradeView #ownedGrid.is-owned-empty{grid-template-rows:minmax(0,1fr)!important}
  #upgradeView #ownedGrid.is-owned-empty .owned-empty-pay{height:100%!important;align-self:stretch!important}
  #upgradeView #ownedGrid.is-owned-empty .owned-empty-pay-card{transform:none!important}
 }
 .wheel-wrap::before,.wheel-wrap::after{will-change:transform,opacity}
 .wheel-wrap.perf-offscreen::before,.wheel-wrap.perf-offscreen::after{animation-play-state:paused!important;will-change:auto}
}