/* Shared stacking order for desktop and touch layouts. Keep responsive rules
   on these tokens so viewport changes cannot change which UI is on top. */
:root {
  --z-world:0;
  --z-status:10;
  --z-widget:20;
  --z-control:30;
  --z-menu:40;
  --z-popover:50;
  --z-tooltip:60;
  --z-drag:65;
  --z-notice:70;
  --z-death:75;
  --z-screen:80;
  --z-install:90;
  --z-loading:100;

  /* Relative only to the owning component, never to the entire HUD. */
  --z-local-base:0;
  --z-local-content:1;
  --z-local-overlay:2;
  --z-local-label:3;
  --z-local-header:5;
}

#game {isolation:isolate}
#world {position:relative;z-index:var(--z-world)}
.resource-card {z-index:var(--z-status)}
.player-card,.party-card,.target-card,.journey,.cast-panel,.bottom-left {
  z-index:var(--z-widget);
}
.topbar,.actionbar,#joystick {z-index:var(--z-control)}
#game .chat-panel:not(.chat-collapsed) {z-index:var(--z-menu)}
#zone-banner {z-index:var(--z-notice)}

/* Contain decorative layers, including when transforms are removed by dragging. */
.hotbar .slot,.resource-tube,.character-stage {isolation:isolate}

/* showModal() dialogs and their backdrops use the browser top layer, above
   loading, install prompts and every HUD layer. Do not simulate it with z-index. */
dialog {isolation:isolate}