/* Menu shell world layer (docs/menu-shell.md). The campaign map lives here, outside #lobby-panel, and stays
   alive while the other tabs open as layers on top. Loaded right after style.css so the restated
   "#lobby-panel button" look keeps the same cascade position it had when the map lived inside the panel. */
#world-layer{position:absolute;inset:0;z-index:6;margin-top:var(--safe-top,0px);margin-bottom:var(--safe-bottom,0px);overflow:hidden}
#world-layer[hidden],.mode-sandbox #world-layer,.battle #world-layer,.online-battle #world-layer{display:none!important}
#world-layer .campaign-viewport{position:absolute;inset:0;height:auto;min-height:0;border:0;border-radius:0;overflow:clip}
/* Covered by a tab: the map is not painted at all, so no world peeks out around the tab panel
   (above it behind the transparent top bar / safe area, or beside the bottom tabs on phones). The body's slate-navy
   backdrop fills the screen instead; the map frame is shown again on return to the map. */
#world-layer.is-covered{pointer-events:none;visibility:hidden}
#world-layer button{padding:9px 13px;border:1px solid #a58e61;border-radius:7px;color:#f2deb0;background:#242842;cursor:pointer}
#world-layer button:disabled{opacity:.45;cursor:default}
#world-layer button>.resource-icon{width:21px;height:21px;margin-right:6px}
#world-layer small{color:#d4b777}
:root #world-layer small{color:var(--wr-gold,#d4b777);font-family:var(--wr-font-display,inherit);font-weight:700;text-shadow:0 1px 0 #10142a}
/* Tabs appear as a layer: a short rise instead of a loading screen. */
.mode-online #lobby-panel:not([hidden]){animation:menu-layer-in .12s ease-out}
@keyframes menu-layer-in{from{opacity:0;transform:translateY(6px)}}
.reduce-motion #lobby-panel,html.reduce-motion #lobby-panel{animation:none!important}
@media (prefers-reduced-motion:reduce){.mode-online #lobby-panel{animation:none}}
#world-layer .world-map-2d{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#0b1620}
/* A tall world-map popup on a phone (world-map.html reaches the card down to the bottom tabs): the quest reward bar and Quest / PvP
   under it blur and dim like the map behind the popup and take no taps; world-map-embed.js cuts the card and its round x out of the dock
   (clip-path), so both show on top. Without clip-path: path() the dock is simply hidden while the popup is open. */
body.world-popup-open #world-action-dock{filter:blur(3px) brightness(.42) saturate(.8);pointer-events:none!important;transition:none}
body.world-popup-open #world-action-dock *{pointer-events:none!important;animation-play-state:paused!important}
html.no-clip-path body.world-popup-open #world-action-dock{visibility:hidden}