/* Basecamp owns its scene artwork and landmark presentation. Shared Realm
   chrome lives in realm-shell.css. */
#ninjaPanel #realmBasecampScreen.realm-basecamp-screen{
  position:absolute!important;
  inset:var(--realm-banner-height) 0 0!important;
  z-index:10!important;
  display:block!important;
  overflow:hidden!important;
  padding:0!important;
  background:
    linear-gradient(180deg,rgba(12,24,18,.06),rgba(12,22,15,.14)),
    url("../art/basecamp-settlement.svg") center center/94% 94% no-repeat!important;
}
#ninjaPanel #realmBasecampScreen[hidden]{display:none!important}
#ninjaPanel #realmBasecampScreen::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 34%,rgba(14,24,13,.08))!important;
}

/* Landmark hit areas align with the illustrated buildings. The gold outline is
   the interaction surface; the feature name sits slightly above centre and the
   supporting caption uses the larger outlined area rather than a tiny tooltip. */
#ninjaPanel #realmBasecampScreen .realm-location-button{
  position:absolute!important;
  z-index:5!important;
  width:clamp(136px,11.2vw,184px)!important;
  min-width:0!important;
  min-height:96px!important;
  padding:0!important;
  border:0!important;
  border-radius:12px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  transform:translate(-50%,-50%)!important;
  cursor:pointer!important;
  overflow:hidden!important;
  outline:none!important;
}
#ninjaPanel #realmBasecampScreen .realm-location-button:hover,
#ninjaPanel #realmBasecampScreen .realm-location-button:focus-visible{
  background:rgba(255,229,177,.035)!important;
  box-shadow:inset 0 0 0 2px rgba(255,218,145,.82),0 0 0 1px rgba(67,39,20,.42)!important;
  transform:translate(-50%,-50%) translateY(-2px)!important;
}
#ninjaPanel #realmBasecampScreen .realm-location-caption{
  position:absolute!important;
  inset:auto 5px 5px!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  align-items:end!important;
  justify-items:center!important;
  gap:3px!important;
  padding:6px 7px!important;
  border:0!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,rgba(30,18,11,.12),rgba(30,18,11,.82))!important;
  box-shadow:none!important;
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
  transition:background .15s ease!important;
  pointer-events:none!important;
  text-align:center!important;
}
#ninjaPanel #realmBasecampScreen .realm-location-button:is(:hover,:focus-visible) .realm-location-caption{
  background:linear-gradient(180deg,rgba(30,18,11,.30),rgba(30,18,11,.92))!important;
}
#ninjaPanel #realmBasecampScreen .realm-location-button__icon{display:none!important}
#ninjaPanel #realmBasecampScreen .realm-location-button__copy{
  display:inline-block!important;
  max-width:100%!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#fff0cf!important;
  -webkit-text-fill-color:#fff0cf!important;
  font-size:clamp(13px,1vw,16px)!important;
  font-weight:950!important;
  line-height:1.08!important;
  text-shadow:0 2px 3px rgba(0,0,0,.72)!important;
}
#ninjaPanel #realmBasecampScreen .realm-location-caption small{
  align-self:center!important;
  display:block!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#f2dfbd!important;
  -webkit-text-fill-color:#f2dfbd!important;
  font-size:clamp(10px,.78vw,12px)!important;
  line-height:1.24!important;
  font-weight:750!important;
  text-shadow:0 2px 3px rgba(0,0,0,.72)!important;
}
#ninjaPanel #realmBasecampScreen [data-basecamp-landmark="ninja-training"]{left:15.6%!important;top:45.5%!important}
#ninjaPanel #realmBasecampScreen [data-basecamp-landmark="workshop"]{left:36.2%!important;top:43.2%!important}
#ninjaPanel #realmBasecampScreen [data-basecamp-landmark="cooking"]{left:50%!important;top:47.2%!important}
#ninjaPanel #realmBasecampScreen [data-basecamp-landmark="merchant"]{left:69.5%!important;top:46.5%!important}
#ninjaPanel #realmBasecampScreen [data-basecamp-landmark="exploration"]{left:88.7%!important;top:48.2%!important}
#ninjaPanel #realmBasecampScreen [data-basecamp-landmark="calorie-escape"]{left:10.2%!important;top:69.8%!important}
#ninjaPanel #realmBasecampScreen [data-basecamp-landmark="storage"]{left:22.2%!important;top:68.5%!important}
#ninjaPanel #realmBasecampScreen [data-basecamp-landmark="tactical-operations"]{left:63.6%!important;top:70.4%!important}
#ninjaPanel #realmBasecampScreen [data-basecamp-landmark="party-preparation"]{left:81.8%!important;top:70.8%!important}
#ninjaPanel #realmBasecampScreen [data-basecamp-landmark="campfire-rest"]{left:50%!important;top:84.3%!important}

@media (max-width:1100px){
  #ninjaPanel #realmBasecampScreen .realm-location-button{width:132px!important;min-height:66px!important}
  #ninjaPanel #realmBasecampScreen .realm-location-caption small{font-size:10px!important;max-width:124px!important}
}
@media (max-width:760px) and (orientation:landscape){
  #ninjaPanel #realmBasecampScreen .realm-location-button{width:116px!important;min-height:58px!important}
  #ninjaPanel #realmBasecampScreen .realm-location-button__copy{font-size:11px!important}
  #ninjaPanel #realmBasecampScreen .realm-location-caption small{font-size:9px!important}
}
@media (prefers-reduced-motion:reduce){
  #ninjaPanel #realmBasecampScreen .realm-location-caption{transition:none!important}
}

/* Functional Basecamp services. */
#ninjaPanel .basecamp-service{display:grid;gap:14px;color:#fff0cf}
#ninjaPanel .basecamp-service>header{display:grid;gap:4px;padding:14px;border:1px solid rgba(245,213,151,.22);border-radius:14px;background:rgba(19,11,7,.42);box-shadow:none}
#ninjaPanel .basecamp-service>header span{font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#e4bf7c}
#ninjaPanel .basecamp-service>header strong{font-size:22px}
#ninjaPanel .basecamp-service>header small{color:#dbc7a7;line-height:1.4}
#ninjaPanel .basecamp-service section{display:grid;gap:9px}
#ninjaPanel .basecamp-service h5{margin:0;color:#ffe5ad;font-size:15px}
#ninjaPanel .basecamp-item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#ninjaPanel .basecamp-item-grid article{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px;border:1px solid rgba(245,213,151,.22);border-radius:11px;background:rgba(19,11,7,.42);box-shadow:none}
#ninjaPanel .basecamp-item-grid p{margin:0;color:#cdb895}
#ninjaPanel .basecamp-trade-list{display:grid;gap:8px}
#ninjaPanel .basecamp-trade-list article{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:10px;border:1px solid rgba(245,213,151,.22);border-radius:11px;background:rgba(19,11,7,.42);box-shadow:none}
#ninjaPanel .basecamp-trade-list article>div{display:grid;gap:2px}
#ninjaPanel .basecamp-service button{min-height:36px;padding:7px 10px;border:1px solid rgba(245,226,188,.28);border-radius:9px;background:linear-gradient(180deg,#8d5b37,#4c2d1b);color:#fff0cf;font-weight:850;cursor:pointer}
#ninjaPanel .basecamp-service button:disabled{opacity:.4;cursor:not-allowed}
#ninjaPanel .basecamp-roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#ninjaPanel .basecamp-roster button{display:grid;text-align:left;gap:3px}
#ninjaPanel .basecamp-roster button.is-selected{outline:2px solid #e4bf7c;background:linear-gradient(180deg,#a16c40,#5d3822)}
#ninjaPanel .basecamp-roster span{font-size:11px;color:#dbc7a7}
@media(max-width:760px){#ninjaPanel .basecamp-item-grid,#ninjaPanel .basecamp-roster{grid-template-columns:1fr}}

/* Basecamp owns the focused service presentation used inside Camp Management. */
#ninjaPanel .realm-drawer[data-basecamp-service] :is(.realm-tab-row,[role="tablist"] > [data-realm-tab]){display:none!important}
#ninjaPanel .realm-drawer[data-basecamp-service] .realm-drawer-pane:not([hidden]){padding-top:14px!important}