/* ==========================================================
   N9 v0.16.6 FINAL PRESENTATION LAYER
   One authoritative layout layer replacing stacked patch CSS.
   ========================================================== */

:root{
  --n9-safe:14px;
}

/* --- REAL PLANET ASSETS --- */
body.n9-game-page #grid.pulse-grid .node .planet-surface{
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:cover!important;
  border:0!important;
  border-radius:50%!important;
  animation:none!important;
  transition:filter .16s ease,box-shadow .16s ease!important;
  box-shadow:
    inset -13px -11px 20px rgba(0,0,0,.52),
    inset 5px 4px 9px rgba(255,255,255,.10),
    0 7px 17px rgba(0,0,0,.46)!important;
}
body.n9-game-page #grid.pulse-grid .node.n1 .planet-surface{background-image:url('../images/planets/sun.png')!important}
body.n9-game-page #grid.pulse-grid .node.n2 .planet-surface{background-image:url('../images/planets/mercury.png')!important}
body.n9-game-page #grid.pulse-grid .node.n3 .planet-surface{background-image:url('../images/planets/earth.png')!important}
body.n9-game-page #grid.pulse-grid .node.n4 .planet-surface{background-image:url('../images/planets/moon.png')!important}
body.n9-game-page #grid.pulse-grid .node.n5 .planet-surface{background-image:url('../images/planets/jupiter.png')!important}
body.n9-game-page #grid.pulse-grid .node.n6 .planet-surface{background-image:url('../images/planets/saturn.png')!important}
body.n9-game-page #grid.pulse-grid .node.n7 .planet-surface{background-image:url('../images/planets/uranus.png')!important}
body.n9-game-page #grid.pulse-grid .node.n8 .planet-surface{background-image:url('../images/planets/neptune.png')!important}
body.n9-game-page #grid.pulse-grid .node.n9 .planet-surface{background-image:url('../images/planets/nova.png')!important}

/*
 IMPORTANT:
 The planet button itself MUST retain translate(-50%,-50%).
 Earlier patches set transform:none, which shifted every planet away
 from its requested left/top anchor. Only the inner artwork stays static.
*/
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:focus-visible,
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-game-page #grid.pulse-grid .node.combo-match,
body.n9-game-page #grid.pulse-grid .node.exact-match{
  position:absolute!important;
  transform:translate(-50%,-50%)!important;
  translate:none!important;
  rotate:none!important;
  scale:1!important;
  animation:none!important;
  transition:filter .16s ease,opacity .16s ease!important;
  will-change:auto!important;
}
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.selected .planet-surface,
body.n9-game-page #grid.pulse-grid .node.hit .planet-surface{
  transform:none!important;
  animation:none!important;
}
body.n9-game-page #grid.pulse-grid .node:hover .planet-surface{
  filter:brightness(1.06) saturate(1.05) drop-shadow(0 0 7px rgba(84,218,255,.44))!important;
}
body.n9-game-page #grid.pulse-grid .node.selected .planet-surface{
  filter:brightness(1.08) saturate(1.08) drop-shadow(0 0 10px rgba(212,80,255,.65))!important;
}

/* Make number a UI marker, not a snooker-ball centre */
body.n9-game-page #grid.pulse-grid .planet-number{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
  z-index:8!important;
  width:27px!important;height:27px!important;min-width:27px!important;
  display:grid!important;place-items:center!important;
  border-radius:50%!important;
  border:1px solid rgba(255,255,255,.78)!important;
  background:rgba(4,8,19,.70)!important;
  color:#fff!important;
  font-weight:900!important;
  font-size:13px!important;
  text-shadow:0 1px 3px #000!important;
  box-shadow:0 3px 10px rgba(0,0,0,.60)!important;
}

/* --- ORBITS CENTER AROUND THE SUN --- */
body.n9-game-page #grid.pulse-grid .n9-orbit-system .n9-orbit{
  left:50%!important;
  top:50%!important;
  transform:translate(-50%,-50%)!important;
}

/* desktop/laptop */
@media (min-width:701px){
  body.n9-game-page .reactor-stage{
    min-height:560px!important;
  }
  body.n9-game-page #grid.pulse-grid{
    inset:8px!important;
    overflow:hidden!important;
    min-height:540px!important;
    padding:20px!important;
  }

  /* Sun */
  body.n9-game-page #grid.pulse-grid .node.n1{left:50%!important;top:50%!important;width:104px!important;height:104px!important;z-index:9!important}
  /* clockwise solar-system composition */
  body.n9-game-page #grid.pulse-grid .node.n2{left:50%!important;top:14%!important;width:58px!important;height:58px!important}
  body.n9-game-page #grid.pulse-grid .node.n3{left:73%!important;top:25%!important;width:70px!important;height:70px!important}
  body.n9-game-page #grid.pulse-grid .node.n4{left:86%!important;top:49%!important;width:58px!important;height:58px!important}
  body.n9-game-page #grid.pulse-grid .node.n5{left:69%!important;top:63%!important;width:88px!important;height:88px!important}
  body.n9-game-page #grid.pulse-grid .node.n6{left:73%!important;top:79%!important;width:82px!important;height:82px!important}
  body.n9-game-page #grid.pulse-grid .node.n7{left:50%!important;top:84%!important;width:72px!important;height:72px!important}
  body.n9-game-page #grid.pulse-grid .node.n8{left:27%!important;top:74%!important;width:72px!important;height:72px!important}
  body.n9-game-page #grid.pulse-grid .node.n9{left:14%!important;top:50%!important;width:70px!important;height:70px!important}

  body.n9-game-page #grid.pulse-grid .node.n1 .planet-surface{
    filter:brightness(1.08) saturate(1.08) drop-shadow(0 0 17px rgba(255,147,33,.54))!important;
  }
}

/* --- MOBILE LAYOUT --- */
@media (max-width:700px){
  body.n9-game-page{
    overflow-x:hidden!important;
  }

  body.n9-game-page main.shell,
  body.n9-game-page .game-shell,
  body.n9-game-page .casino-shell{
    width:100%!important;
    max-width:100%!important;
    padding:6px!important;
    margin:0!important;
    overflow:visible!important;
  }

  /* clean, non-overlapping mobile header */
  body.n9-game-page .casino-topnav.compact-nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:6px!important;
    min-height:62px!important;
    height:auto!important;
    padding:7px 8px!important;
    overflow:visible!important;
  }
  body.n9-game-page .casino-topnav .casino-nav-menu,
  body.n9-game-page .casino-topnav .n9-audio-controls,
  body.n9-game-page .casino-topnav .n9-account-pill,
  body.n9-game-page .casino-topnav .n9-login-btn,
  body.n9-game-page .casino-topnav .n9-register-btn,
  body.n9-game-page .casino-topnav .n9-demo-session-pill{
    display:none!important;
  }
  body.n9-game-page .casino-topnav .nav-left{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
  }
  body.n9-game-page .casino-topnav .nav-left .back{
    display:none!important;
  }
  body.n9-game-page .casino-topnav .n9-game-logo{
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    white-space:nowrap!important;
  }
  body.n9-game-page .casino-topnav .n9-game-logo b{font-size:28px!important}
  body.n9-game-page .casino-topnav .n9-game-logo small{
    font-size:7px!important;
    letter-spacing:.17em!important;
  }

  body.n9-game-page .casino-topnav .top-wallet-group{
    display:contents!important;
  }
  body.n9-game-page .casino-topnav .wallet{
    grid-column:2!important;
    width:auto!important;
    min-width:104px!important;
    padding:7px 9px!important;
    margin:0!important;
  }
  body.n9-game-page .casino-topnav .wallet small{font-size:7px!important}
  body.n9-game-page .casino-topnav .wallet strong{
    font-size:15px!important;
    white-space:nowrap!important;
  }
  body.n9-game-page .casino-topnav .deposit-btn{
    grid-column:3!important;
    min-width:74px!important;
    height:46px!important;
    padding:0 13px!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  /* no marketing/intro content inside the gameplay viewport */
  body.n9-game-page .n9-hero,
  body.n9-game-page .game-intro,
  body.n9-game-page .demo-ready,
  body.n9-game-page .operator-pitch,
  body.n9-game-page .commercial-intro{
    display:none!important;
  }

  body.n9-game-page .game-page-three-col{
    display:block!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
  }

  body.n9-game-page .main-reactor-card{
    width:100%!important;
    min-width:0!important;
    padding:7px!important;
    margin:0!important;
  }

  body.n9-game-page .round-head{
    min-height:48px!important;
    height:auto!important;
    padding:8px 9px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
  }
  body.n9-game-page .round-head h2{display:none!important}
  body.n9-game-page .round-head small{font-size:8px!important}
  body.n9-game-page .round-state{
    flex:0 0 auto!important;
    max-width:145px!important;
    padding:7px 9px!important;
  }
  body.n9-game-page .round-state b{font-size:8px!important;white-space:nowrap!important}

  /* main square-ish solar-system board */
  body.n9-game-page .reactor-stage{
    width:100%!important;
    min-height:0!important;
    height:auto!important;
    aspect-ratio:1 / 1.10!important;
    margin:6px 0 8px!important;
    overflow:hidden!important;
    border-radius:18px!important;
  }
  body.n9-game-page #grid.pulse-grid{
    inset:5px!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    padding:8px!important;
    overflow:hidden!important;
  }

  /* centered sun */
  body.n9-game-page #grid.pulse-grid .node.n1{left:50%!important;top:50%!important;width:78px!important;height:78px!important;z-index:9!important}
  body.n9-game-page #grid.pulse-grid .node.n2{left:50%!important;top:14%!important;width:48px!important;height:48px!important}
  body.n9-game-page #grid.pulse-grid .node.n3{left:75%!important;top:25%!important;width:56px!important;height:56px!important}
  body.n9-game-page #grid.pulse-grid .node.n4{left:87%!important;top:49%!important;width:50px!important;height:50px!important}
  body.n9-game-page #grid.pulse-grid .node.n5{left:68%!important;top:63%!important;width:66px!important;height:66px!important}
  body.n9-game-page #grid.pulse-grid .node.n6{left:72%!important;top:78%!important;width:60px!important;height:60px!important}
  body.n9-game-page #grid.pulse-grid .node.n7{left:50%!important;top:83%!important;width:56px!important;height:56px!important}
  body.n9-game-page #grid.pulse-grid .node.n8{left:27%!important;top:74%!important;width:56px!important;height:56px!important}
  body.n9-game-page #grid.pulse-grid .node.n9{left:13%!important;top:50%!important;width:54px!important;height:54px!important}

  /* Route/results get full width without clipping */
  body.n9-game-page .route-display{
    width:100%!important;
    display:grid!important;
    grid-template-columns:1fr 34px 1fr!important;
    min-width:0!important;
  }
  body.n9-game-page .route-box{
    min-width:0!important;
    padding:10px!important;
  }
  body.n9-game-page .route-box strong{
    font-size:12px!important;
    white-space:nowrap!important;
  }

  /* keep history and paytable accessible */
  body.n9-game-page .round-history-panel{
    display:block!important;
    width:100%!important;
    max-height:190px!important;
    overflow:auto!important;
    margin:8px 0!important;
  }
  body.n9-game-page .center-mobile-paytable.mobile-only-block{
    display:block!important;
    width:100%!important;
    margin:8px 0 104px!important;
  }
  body.n9-game-page .center-mobile-paytable .paytable-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
  }

  /* bottom betting bar; enough content padding prevents overlay */
  body.n9-game-page .mobile-actionbar.solo-mobile-bar{
    position:fixed!important;
    left:6px!important;
    right:6px!important;
    bottom:6px!important;
    width:auto!important;
    z-index:999!important;
    display:grid!important;
    grid-template-columns:60px minmax(0,1fr) 96px!important;
    gap:6px!important;
    padding:7px!important;
    border-radius:14px!important;
  }
  body.n9-game-page .mobile-actionbar .mobile-route{display:none!important}
  body.n9-game-page .mobile-actionbar .mobile-stake-control{min-width:0!important}
  body.n9-game-page .mobile-actionbar .pulse-button{min-width:0!important}
}

/* smallest phones */
@media (max-width:390px){
  body.n9-game-page .casino-topnav .wallet{min-width:94px!important}
  body.n9-game-page .casino-topnav .deposit-btn{min-width:68px!important;padding:0 9px!important}
  body.n9-game-page .reactor-stage{aspect-ratio:1 / 1.14!important}
  body.n9-game-page #grid.pulse-grid .node.n1{width:72px!important;height:72px!important}
  body.n9-game-page #grid.pulse-grid .node.n5{width:62px!important;height:62px!important}
}