/* ========================================================================== 
   BASELINE REALM STAGE 1 — SHARED / DESKTOP AUTHORITY — 2026-06-20
   Mobile orientation and viewport ownership live only in
   realm-stage-1-mobile-authority.css.
   ========================================================================== */

#ninjaPanel .realm-shell-card,
#ninjaPanel .realm-shell,
#ninjaPanel .realm-game-mount,
#ninjaPanel .realm-window{
  width:100%!important;
  max-width:none!important;
}

/* Desktop is a genuine 16:9 game stage. */
@media (min-width:1025px){
  #ninjaPanel #realmSceneFrame:not(:fullscreen):not(:-webkit-full-screen){
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:16 / 9!important;
  }
}

#ninjaPanel #realmSceneFrame:fullscreen,
#ninjaPanel #realmSceneFrame:-webkit-full-screen{
  width:100vw!important;
  height:100dvh!important;
  min-width:100vw!important;
  min-height:100dvh!important;
  max-width:none!important;
  max-height:100dvh!important;
  aspect-ratio:auto!important;
}

/* Basecamp is the navigation hub. */
#ninjaPanel #realmSceneFrame.is-basecamp-view #realmBasecampBtn{
  display:none!important;
}

#ninjaPanel .realm-basecamp-screen{
  background-size:100% 100%!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
}

#ninjaPanel .realm-location-button{
  grid-template-columns:38px minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  column-gap:8px!important;
  text-align:left!important;
}
#ninjaPanel .realm-location-button__icon{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:34px!important;
  height:34px!important;
  align-self:center!important;
  color:#fff0cf!important;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.42))!important;
}
#ninjaPanel .realm-location-button__icon svg,
#ninjaPanel .realm-fab__icon svg,
#ninjaPanel .realm-badge__icon svg,
#ninjaPanel .realm-combat-btn__icon svg,
#ninjaPanel .realm-orientation-gate svg{
  display:block!important;
  width:100%!important;
  height:100%!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}
#ninjaPanel .realm-location-button > span:not(.realm-location-button__icon){
  grid-column:2!important;
  grid-row:1!important;
}
#ninjaPanel .realm-location-button > small{
  grid-column:2!important;
  grid-row:2!important;
}

#ninjaPanel .realm-fab__icon{
  display:grid!important;
  place-items:center!important;
}
#ninjaPanel .realm-fab__icon svg{
  width:23px!important;
  height:23px!important;
}
#ninjaPanel .realm-combat-btn__icon svg{
  width:24px!important;
  height:24px!important;
}

#ninjaPanel .realm-badge[data-realm-badge-kind]{
  display:inline-grid!important;
  grid-template-columns:22px auto!important;
  align-items:center!important;
  gap:6px!important;
  min-width:0!important;
  min-height:34px!important;
  padding:6px 9px!important;
  border-radius:10px!important;
}
#ninjaPanel .realm-badge__icon{
  width:20px!important;
  height:20px!important;
  color:#ffe2a8!important;
}
#ninjaPanel .realm-badge__copy{
  display:grid!important;
  gap:0!important;
  line-height:1!important;
}
#ninjaPanel .realm-badge__label{
  font-size:9px!important;
  opacity:.78!important;
}
#ninjaPanel .realm-badge__value{
  font-size:13px!important;
  font-weight:900!important;
}

/* Cooldown must read as unavailable. */
#ninjaPanel #ninjaShurikenBtn:disabled{
  position:relative!important;
  opacity:.24!important;
  filter:grayscale(1) saturate(0) brightness(.28)!important;
  cursor:not-allowed!important;
  transform:none!important;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.72),0 3px 8px rgba(0,0,0,.28)!important;
}
#ninjaPanel #ninjaShurikenBtn:disabled::before{
  opacity:.35!important;
  background:#24201d!important;
}
#ninjaPanel #ninjaShurikenBtn:disabled::after{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:8!important;
  border-radius:inherit!important;
  background:rgba(8,8,8,.58)!important;
  box-shadow:inset 0 0 22px rgba(0,0,0,.85)!important;
  pointer-events:none!important;
}
#ninjaPanel #ninjaShurikenBtn:disabled .realm-combat-btn__copy,
#ninjaPanel #ninjaShurikenBtn:disabled .realm-combat-btn__icon{
  position:relative!important;
  z-index:9!important;
  color:#8b8b8b!important;
  -webkit-text-fill-color:#8b8b8b!important;
}

/* Gate appearance only. Mobile authority decides when it exists onscreen. */
#ninjaPanel .realm-orientation-gate{
  display:none;
  position:absolute;
  inset:0;
  z-index:2147483647;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 50% 35%,rgba(105,139,79,.30),transparent 35%),
    linear-gradient(180deg,#182c1e,#26170f);
  color:#fff0cf;
  text-align:center;
}
#ninjaPanel .realm-orientation-gate__panel{
  width:min(360px,92vw);
  display:grid;
  justify-items:center;
  gap:12px;
  padding:22px 20px;
  border:2px solid #2a170e;
  border-radius:18px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 2px,rgba(0,0,0,.04) 2px 6px),
    linear-gradient(180deg,#75482b,#3a2114);
  box-shadow:0 24px 54px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.16);
}
#ninjaPanel .realm-orientation-gate__icon{
  width:72px;
  height:72px;
  color:#f2cf91;
  animation:realmRotatePrompt 1.8s ease-in-out infinite;
}
#ninjaPanel .realm-orientation-gate strong{
  color:#fff0cf!important;
  -webkit-text-fill-color:#fff0cf!important;
  font-size:24px;
  line-height:1.1;
}
#ninjaPanel .realm-orientation-gate span{
  color:#dfc59d!important;
  -webkit-text-fill-color:#dfc59d!important;
  font-size:14px;
  line-height:1.4;
}
@keyframes realmRotatePrompt{
  0%,100%{transform:rotate(0deg)}
  50%{transform:rotate(90deg)}
}

@media (prefers-reduced-motion:reduce){
  #ninjaPanel .realm-orientation-gate__icon{animation:none!important;}
}
