/* ============================================================
   N9 COSMIC ROUTE — V0.20.4
   FINAL STYLE FREEZE
   Premium Stylized Space Casino
   Visual/layout layer only — no gameplay logic changes
   ============================================================ */

:root{
  --n9-panel:rgba(3,10,27,.92);
  --n9-panel-2:rgba(5,14,36,.88);
  --n9-cyan:#4de9ff;
  --n9-cyan-soft:rgba(77,233,255,.36);
  --n9-purple:#8d46ff;
  --n9-magenta:#ef54ff;
  --n9-gold:#ffc857;
  --n9-text:#f6f8ff;
  --n9-muted:#9cafc8;
}

/* ============================
   GLOBAL PREMIUM SURFACES
   ============================ */
body.n9-game-page .reactor-card.main-reactor-card,
body.n9-arena-v170 .reactor-card.main-reactor-card{
  border:1px solid rgba(75,218,255,.42)!important;
  background:
    linear-gradient(180deg,rgba(3,9,26,.82),rgba(2,7,20,.72)),
    radial-gradient(circle at 50% 10%,rgba(105,69,255,.11),transparent 34%)!important;
  box-shadow:
    0 18px 42px rgba(0,0,0,.40),
    0 0 28px rgba(55,205,255,.08),
    inset 0 1px 0 rgba(255,255,255,.055)!important;
}

body.n9-game-page .reactor-stage,
body.n9-arena-v170 .reactor-stage{
  border:1px solid rgba(71,227,255,.58)!important;
  background:
    linear-gradient(180deg,rgba(2,8,22,.08),rgba(2,7,18,.14)),
    radial-gradient(circle at 50% 49%,rgba(46,178,255,.09),transparent 32%)!important;
  box-shadow:
    inset 0 0 58px rgba(23,145,255,.10),
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 18px rgba(44,216,255,.09)!important;
}

/* keep the board cinematic without becoming visually noisy */
body.n9-game-page #grid.pulse-grid,
body.n9-arena-v170 #grid.pulse-grid{
  isolation:isolate!important;
}

body.n9-game-page #grid.pulse-grid::after,
body.n9-arena-v170 #grid.pulse-grid::after{
  content:""!important;
  position:absolute!important;
  inset:3%!important;
  pointer-events:none!important;
  z-index:1!important;
  border-radius:24px!important;
  background:
    radial-gradient(circle at 50% 49%,rgba(28,180,255,.08),transparent 24%),
    radial-gradient(circle at 50% 58%,transparent 50%,rgba(0,0,0,.12) 88%)!important;
}

/* ============================
   PROFESSIONAL PLANET SYSTEM
   ============================ */
body.n9-game-page #grid.pulse-grid .node,
body.n9-arena-v170 #grid.pulse-grid .node{
  z-index:8!important;
}

body.n9-game-page #grid.pulse-grid .node .planet-surface,
body.n9-arena-v170 #grid.pulse-grid .node .planet-surface{
  border:1px solid rgba(228,240,255,.42)!important;
  box-shadow:
    inset -16px -13px 24px rgba(0,0,0,.52),
    inset 7px 5px 12px rgba(255,255,255,.14),
    0 9px 20px rgba(0,0,0,.48),
    0 0 17px rgba(93,187,255,.18)!important;
  filter:brightness(1.10) saturate(1.14) contrast(1.06)!important;
  transition:filter .16s ease,box-shadow .16s ease,outline-color .16s ease!important;
}

/* Per-planet commercial polish */
body.n9-game-page #grid.pulse-grid .node.n1 .planet-surface,
body.n9-arena-v170 #grid.pulse-grid .node.n1 .planet-surface{
  filter:brightness(1.22) saturate(1.22) contrast(1.08)!important;
  box-shadow:
    inset -12px -10px 22px rgba(116,32,0,.28),
    inset 7px 5px 12px rgba(255,255,255,.20),
    0 0 17px rgba(255,228,130,.82),
    0 0 42px rgba(255,151,45,.55),
    0 0 76px rgba(255,88,25,.24)!important;
}

body.n9-game-page #grid.pulse-grid .node.n3 .planet-surface,
body.n9-arena-v170 #grid.pulse-grid .node.n3 .planet-surface{
  filter:brightness(1.13) saturate(1.22) contrast(1.08)!important;
}

body.n9-game-page #grid.pulse-grid .node.n5 .planet-surface,
body.n9-arena-v170 #grid.pulse-grid .node.n5 .planet-surface{
  filter:brightness(1.12) saturate(1.20) contrast(1.08)!important;
}

body.n9-game-page #grid.pulse-grid .node.n6 .planet-surface,
body.n9-arena-v170 #grid.pulse-grid .node.n6 .planet-surface{
  filter:brightness(1.13) saturate(1.12) contrast(1.05)!important;
}

body.n9-game-page #grid.pulse-grid .node.n8 .planet-surface,
body.n9-arena-v170 #grid.pulse-grid .node.n8 .planet-surface{
  filter:brightness(1.12) saturate(1.22) contrast(1.08)!important;
}

body.n9-game-page #grid.pulse-grid .node.n9 .planet-surface,
body.n9-arena-v170 #grid.pulse-grid .node.n9 .planet-surface{
  filter:brightness(1.14) saturate(1.28) contrast(1.09)!important;
  box-shadow:
    inset -15px -12px 22px rgba(0,0,0,.50),
    inset 7px 5px 12px rgba(255,255,255,.12),
    0 8px 20px rgba(0,0,0,.48),
    0 0 20px rgba(229,69,255,.38)!important;
}

/* Number badge: casino-readable, visually consistent */
body.n9-game-page #grid.pulse-grid .planet-number,
body.n9-arena-v170 #grid.pulse-grid .planet-number{
  width:31px!important;
  height:31px!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.13),transparent 31%),
    rgba(4,7,18,.86)!important;
  border:2px solid rgba(255,255,255,.92)!important;
  color:white!important;
  font-size:15px!important;
  font-weight:950!important;
  text-shadow:0 2px 4px rgba(0,0,0,.7)!important;
  box-shadow:
    0 3px 9px rgba(0,0,0,.42),
    0 0 8px rgba(92,219,255,.16)!important;
}

/* Planet names remain secondary but readable */
body.n9-game-page #grid.pulse-grid .planet-name,
body.n9-arena-v170 #grid.pulse-grid .planet-name{
  color:#e9f5ff!important;
  background:rgba(2,8,22,.76)!important;
  border:1px solid rgba(106,203,255,.22)!important;
  border-radius:7px!important;
  padding:3px 7px!important;
  font-size:9px!important;
  font-weight:850!important;
  letter-spacing:.055em!important;
  text-shadow:0 1px 3px #000!important;
  box-shadow:0 3px 10px rgba(0,0,0,.22)!important;
}

/* clean orbital guide system */
body.n9-game-page #grid.pulse-grid .n9-orbit-system .n9-orbit,
body.n9-arena-v170 #grid.pulse-grid .n9-orbit-system .n9-orbit{
  border-color:rgba(100,178,255,.16)!important;
  box-shadow:
    0 0 5px rgba(65,207,255,.055),
    inset 0 0 4px rgba(160,94,255,.04)!important;
}

/* selection is a UI state, not a position change */
body.n9-game-page #grid.pulse-grid .node.selected,
body.n9-arena-v170 #grid.pulse-grid .node.selected{
  transform:translate(-50%,-50%)!important;
}

body.n9-game-page #grid.pulse-grid .node.selected .planet-surface,
body.n9-arena-v170 #grid.pulse-grid .node.selected .planet-surface{
  transform:none!important;
  outline:2px solid rgba(244,91,255,.94)!important;
  outline-offset:5px!important;
  filter:brightness(1.16) saturate(1.18) contrast(1.07)!important;
  box-shadow:
    inset -15px -12px 22px rgba(0,0,0,.46),
    inset 7px 5px 12px rgba(255,255,255,.12),
    0 0 12px rgba(244,91,255,.92),
    0 0 27px rgba(207,61,255,.48),
    0 0 38px rgba(77,224,255,.19)!important;
}

/* Saturn ring stays premium and contained */
body.n9-game-page #grid.pulse-grid .node.n6 .planet-ring,
body.n9-arena-v170 #grid.pulse-grid .node.n6 .planet-ring{
  width:158%!important;
  height:34%!important;
  border:2px solid rgba(245,212,144,.68)!important;
  box-shadow:
    0 0 7px rgba(255,214,138,.17),
    inset 0 0 7px rgba(255,230,173,.11)!important;
  opacity:.96!important;
}

/* route distinction: selected = magenta, draw = cyan */
body.n9-game-page .planet-route-overlay path,
body.n9-arena-v170 .planet-route-overlay path{
  stroke:#ef54ff!important;
  filter:drop-shadow(0 0 4px rgba(239,84,255,.65))!important;
}
body.n9-game-page #arenaDrawOverlay path,
body.n9-arena-v170 #arenaDrawOverlay path,
body.n9-game-page .n9-draw-route-overlay path,
body.n9-arena-v170 .n9-draw-route-overlay path{
  stroke:#54f0df!important;
  filter:drop-shadow(0 0 5px rgba(84,240,223,.68))!important;
}

/* ============================
   CONTROLS
   ============================ */
body.n9-game-page .quick-actions button,
body.n9-arena-v170 .quick-actions button,
body.n9-game-page .n9-replay-strip button,
body.n9-arena-v170 .n9-replay-strip button{
  color:#f7fbff!important;
  font-weight:900!important;
  border-width:1px!important;
  text-shadow:0 1px 4px rgba(0,0,0,.65)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 7px 15px rgba(0,0,0,.20)!important;
}

body.n9-game-page #repeatBetBtn,
body.n9-game-page #repeatBetFloat,
body.n9-arena-v170 #repeatBetBtn{
  border-color:rgba(49,210,255,.82)!important;
  background:linear-gradient(180deg,rgba(5,23,43,.96),rgba(3,13,28,.96))!important;
}

body.n9-game-page #doubleBetBtn,
body.n9-game-page #doubleBetFloat,
body.n9-arena-v170 #doubleBetBtn{
  border-color:rgba(255,198,63,.72)!important;
  background:linear-gradient(180deg,rgba(35,27,10,.94),rgba(15,13,8,.96))!important;
}

body.n9-game-page #rebetPulseBtn,
body.n9-game-page #rebetPulseFloat,
body.n9-arena-v170 #rebetPulseBtn{
  border-color:rgba(226,74,255,.80)!important;
  background:linear-gradient(180deg,rgba(36,9,47,.95),rgba(18,6,31,.96))!important;
}

body.n9-game-page #pulseBtn,
body.n9-game-page #lockBtn,
body.n9-arena-v170 #pulseBtn,
body.n9-arena-v170 #lockBtn{
  color:white!important;
  background:
    linear-gradient(135deg,#6839c7 0%,#8d3de0 50%,#ba30e8 100%)!important;
  border:1px solid rgba(231,132,255,.66)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 22px rgba(179,61,255,.24),
    0 10px 22px rgba(0,0,0,.28)!important;
}

/* ============================
   DESKTOP REFINEMENT
   ============================ */
@media(min-width:768px){
  body.n9-game-page .reactor-stage,
  body.n9-arena-v170 .reactor-stage{
    min-height:620px!important;
  }

  body.n9-game-page #grid.pulse-grid .node.n6,
  body.n9-arena-v170 #grid.pulse-grid .node.n6{
    left:74%!important;
    top:72%!important;
  }
  body.n9-game-page #grid.pulse-grid .node.n7,
  body.n9-arena-v170 #grid.pulse-grid .node.n7{
    left:53%!important;
    top:84%!important;
  }
}

/* ============================
   MOBILE FINAL HEADER
   Logo | Wallet | Logout | Arena — ONE LINE
   ============================ */
@media(max-width:767px){
  body.n9-game-page .casino-topnav.compact-nav,
  body.n9-arena-v170 .casino-topnav.compact-nav{
    display:grid!important;
    grid-template-columns:auto minmax(0,1fr)!important;
    align-items:center!important;
    gap:5px!important;
    flex-wrap:nowrap!important;
    padding:5px 6px!important;
    min-height:50px!important;
  }

  body.n9-game-page .casino-topnav .nav-left,
  body.n9-arena-v170 .casino-topnav .nav-left{
    min-width:0!important;
    width:auto!important;
    gap:0!important;
    flex:0 0 auto!important;
  }

  body.n9-game-page .casino-topnav .nav-left .back,
  body.n9-arena-v170 .casino-topnav .nav-left .back{
    display:none!important;
  }

  body.n9-game-page .n9-game-logo,
  body.n9-arena-v170 .n9-game-logo{
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    width:auto!important;
    min-width:0!important;
    padding:0!important;
  }

  body.n9-game-page .n9-game-logo b,
  body.n9-arena-v170 .n9-game-logo b{
    font-size:29px!important;
    line-height:1!important;
  }

  body.n9-game-page .n9-game-logo small,
  body.n9-arena-v170 .n9-game-logo small{
    display:block!important;
    font-size:6px!important;
    line-height:1.05!important;
    letter-spacing:.16em!important;
    white-space:nowrap!important;
  }

  body.n9-game-page .casino-nav-menu,
  body.n9-arena-v170 .casino-nav-menu,
  body.n9-game-page .n9-audio-controls,
  body.n9-arena-v170 .n9-audio-controls,
  body.n9-game-page .n9-user-menu,
  body.n9-arena-v170 .n9-user-menu{
    display:none!important;
  }

  body.n9-game-page .top-wallet-group,
  body.n9-arena-v170 .top-wallet-group{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:minmax(86px,1fr) 58px 60px!important;
    gap:4px!important;
    align-items:center!important;
    justify-content:stretch!important;
  }

  body.n9-game-page .wallet.casino-wallet,
  body.n9-arena-v170 .wallet.casino-wallet{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    padding:4px 5px!important;
    border-radius:9px!important;
    overflow:hidden!important;
  }

  body.n9-game-page .wallet.casino-wallet small,
  body.n9-arena-v170 .wallet.casino-wallet small{
    display:block!important;
    font-size:6px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body.n9-game-page .wallet.casino-wallet .n9-wallet-line,
  body.n9-arena-v170 .wallet.casino-wallet .n9-wallet-line{
    gap:3px!important;
    justify-content:center!important;
  }

  body.n9-game-page .wallet.casino-wallet strong,
  body.n9-arena-v170 .wallet.casino-wallet strong{
    font-size:11px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  body.n9-game-page .n9-balance-eye-btn,
  body.n9-arena-v170 .n9-balance-eye-btn{
    width:17px!important;
    height:17px!important;
    font-size:10px!important;
    flex:0 0 17px!important;
  }

  body.n9-game-page .n9-header-logout,
  body.n9-arena-v170 .n9-header-logout,
  body.n9-game-page .deposit-btn,
  body.n9-arena-v170 .deposit-btn{
    width:100%!important;
    min-width:0!important;
    height:40px!important;
    min-height:40px!important;
    padding:0 4px!important;
    border-radius:9px!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }

  /* Board stays the main attraction */
  body.n9-game-page .reactor-stage,
  body.n9-arena-v170 .reactor-stage{
    min-height:435px!important;
    border-radius:16px!important;
  }

  body.n9-game-page #grid.pulse-grid,
  body.n9-arena-v170 #grid.pulse-grid{
    min-height:415px!important;
  }

  /* fixed mobile constellation */
  body.n9-game-page #grid.pulse-grid .node.n1,
  body.n9-arena-v170 #grid.pulse-grid .node.n1{left:50%!important;top:49%!important}
  body.n9-game-page #grid.pulse-grid .node.n2,
  body.n9-arena-v170 #grid.pulse-grid .node.n2{left:50%!important;top:13%!important}
  body.n9-game-page #grid.pulse-grid .node.n3,
  body.n9-arena-v170 #grid.pulse-grid .node.n3{left:75%!important;top:25%!important}
  body.n9-game-page #grid.pulse-grid .node.n4,
  body.n9-arena-v170 #grid.pulse-grid .node.n4{left:87%!important;top:49%!important}
  body.n9-game-page #grid.pulse-grid .node.n5,
  body.n9-arena-v170 #grid.pulse-grid .node.n5{left:29%!important;top:34%!important}
  body.n9-game-page #grid.pulse-grid .node.n6,
  body.n9-arena-v170 #grid.pulse-grid .node.n6{
    left:76%!important;
    top:69%!important;
    width:61px!important;
    height:61px!important;
  }
  body.n9-game-page #grid.pulse-grid .node.n7,
  body.n9-arena-v170 #grid.pulse-grid .node.n7{left:57%!important;top:84%!important}
  body.n9-game-page #grid.pulse-grid .node.n8,
  body.n9-arena-v170 #grid.pulse-grid .node.n8{left:27%!important;top:74%!important}
  body.n9-game-page #grid.pulse-grid .node.n9,
  body.n9-arena-v170 #grid.pulse-grid .node.n9{left:13%!important;top:50%!important}

  /* absolutely stable on touch/select */
  body.n9-game-page #grid.pulse-grid .node,
  body.n9-game-page #grid.pulse-grid .node:hover,
  body.n9-game-page #grid.pulse-grid .node:focus,
  body.n9-game-page #grid.pulse-grid .node:active,
  body.n9-game-page #grid.pulse-grid .node.selected,
  body.n9-game-page #grid.pulse-grid .node.hit,
  body.n9-arena-v170 #grid.pulse-grid .node,
  body.n9-arena-v170 #grid.pulse-grid .node:hover,
  body.n9-arena-v170 #grid.pulse-grid .node:focus,
  body.n9-arena-v170 #grid.pulse-grid .node:active,
  body.n9-arena-v170 #grid.pulse-grid .node.selected,
  body.n9-arena-v170 #grid.pulse-grid .node.hit{
    transform:translate(-50%,-50%)!important;
    margin:0!important;
  }

  body.n9-game-page #grid.pulse-grid .node .planet-surface,
  body.n9-game-page #grid.pulse-grid .node:hover .planet-surface,
  body.n9-game-page #grid.pulse-grid .node:focus .planet-surface,
  body.n9-game-page #grid.pulse-grid .node:active .planet-surface,
  body.n9-game-page #grid.pulse-grid .node.selected .planet-surface,
  body.n9-game-page #grid.pulse-grid .node.hit .planet-surface,
  body.n9-arena-v170 #grid.pulse-grid .node .planet-surface,
  body.n9-arena-v170 #grid.pulse-grid .node:hover .planet-surface,
  body.n9-arena-v170 #grid.pulse-grid .node:focus .planet-surface,
  body.n9-arena-v170 #grid.pulse-grid .node:active .planet-surface,
  body.n9-arena-v170 #grid.pulse-grid .node.selected .planet-surface,
  body.n9-arena-v170 #grid.pulse-grid .node.hit .planet-surface{
    transform:none!important;
  }

  body.n9-game-page #grid.pulse-grid .planet-name,
  body.n9-arena-v170 #grid.pulse-grid .planet-name{
    font-size:8px!important;
    padding:2px 5px!important;
  }

  body.n9-game-page #grid.pulse-grid .planet-number,
  body.n9-arena-v170 #grid.pulse-grid .planet-number{
    width:27px!important;
    height:27px!important;
    font-size:13px!important;
  }

  /* stronger, professional mobile replay row */
  body.n9-game-page .quick-actions button,
  body.n9-arena-v170 .quick-actions button{
    min-height:47px!important;
    font-size:10px!important;
    letter-spacing:.02em!important;
  }
}

/* narrow phones: preserve one-line header */
@media(max-width:400px){
  body.n9-game-page .casino-topnav.compact-nav,
  body.n9-arena-v170 .casino-topnav.compact-nav{
    grid-template-columns:100px minmax(0,1fr)!important;
    gap:4px!important;
  }

  body.n9-game-page .n9-game-logo b,
  body.n9-arena-v170 .n9-game-logo b{
    font-size:25px!important;
  }

  body.n9-game-page .n9-game-logo small,
  body.n9-arena-v170 .n9-game-logo small{
    font-size:5px!important;
    letter-spacing:.10em!important;
  }

  body.n9-game-page .top-wallet-group,
  body.n9-arena-v170 .top-wallet-group{
    grid-template-columns:minmax(78px,1fr) 53px 55px!important;
    gap:3px!important;
  }

  body.n9-game-page .wallet.casino-wallet strong,
  body.n9-arena-v170 .wallet.casino-wallet strong{
    font-size:10px!important;
  }

  body.n9-game-page .n9-header-logout,
  body.n9-arena-v170 .n9-header-logout,
  body.n9-game-page .deposit-btn,
  body.n9-arena-v170 .deposit-btn{
    font-size:8px!important;
  }
}