/* ══════════════════════════════════════════════════════════════════════════
   world.css — the World pane (src/features/world-panel.js, src/world/**).
   Loaded on the pane's first open, never at boot. The canvas fills the stage;
   the chrome above it is plain HTML in the theme's tokens. Every colour is a
   token (the --world-* ladder lives in tokens.css).
   ══════════════════════════════════════════════════════════════════════════ */

#panel-world.active {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* clip, not hidden: a hidden box still scrolls to show a focused control, and the World scrolls with it */
  overflow: clip;
}

#panel-world .world-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  min-height: 36px;
}

#panel-world .world-title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: calc(17px * var(--ui-scale, 1));
  color: var(--gold-2);
}

#panel-world .world-scenes {
  display: flex;
  gap: 6px;
  margin-left: auto;
}

/* Forged Steel: the scene picks are square steel buttons; the shown one lifted, outlined in gold. */
#panel-world .world-scene {
  min-height: 36px;
  min-width: 72px;
  padding: 4px 14px;
  border-radius: 0;
  border: 2px solid var(--steel-btn);
  background: var(--bg-1);
  color: var(--ink-2);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: calc(14.5px * var(--ui-scale, 1));
  cursor: pointer;
}

#panel-world .world-scene:hover { color: var(--ink); }

#panel-world .world-scene.active {
  color: var(--gold-2);
  border-color: var(--gold);
  background: var(--bg-3);
}

#panel-world .world-scene[hidden] { display: none; }

#panel-world .world-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 0;
  overflow: clip;   /* never scrollable (see #panel-world.active) */
  border: 1px solid var(--line-soft);
  background: var(--world-void);
}

#panel-world .world-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

#panel-world .world-status {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3);
}

#panel-world .world-stage.is-hot { cursor: pointer; }
/* The town zoom (src/world/town-zoom.js): two small steel squares on the stage's right edge, the
   scene picks' steel; never on the phone (the script hides it there). */
#panel-world .world-zoom {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#panel-world .world-zoom[hidden] { display: none; }
#panel-world .world-zoom-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 0;
  border: 2px solid var(--steel-btn);
  background: var(--bg-1);
  color: var(--ink-2);
  font-family: var(--f-ui);
  font-weight: 700;
  font-size: calc(18px * var(--ui-scale, 1));
  line-height: 1;
  cursor: pointer;
}
#panel-world .world-zoom-btn:hover:not(:disabled) { color: var(--gold-2); border-color: var(--gold); }
#panel-world .world-zoom-btn:disabled { color: var(--ink-3); cursor: default; }
/* A fight the World has no map for: one slim line along the foot of the town or
   home, clear of the plaza, the crier and the names along the top. */
#panel-world .world-idle {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 20px);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 2px 12px;
  border: 6px solid transparent;
  border-image: url('../../assets/ui/steel-frame-thin.png') 3 / 6px stretch;
  image-rendering: pixelated;
  background: var(--hud-fill);
  color: var(--ink-2);
  font-family: var(--f-ui);
  font-size: var(--t-micro);
}
#panel-world .world-idle[hidden] { display: none; }
#panel-world .world-idle-line { margin: 0; }
#panel-world .world-idle-line b { color: var(--ink); }
/* Its one way on is the gold plate primary (shell.css, assets/ui/gold-plate.png). */
#panel-world .world-idle-go {
  flex-shrink: 0;
  min-height: 36px;
  padding: 0 12px;
  border: solid transparent;
  border-width: 6px 6px 10px;
  border-radius: 0;
  border-image: url('../../assets/ui/gold-plate.png') 3 3 5 3 fill / 6px 6px 10px stretch;
  image-rendering: pixelated;
  background: none;
  color: var(--bg-0);
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  cursor: pointer;
}
#panel-world .world-idle-go:hover { filter: brightness(1.08); }

/* The landscape phone: a thumb-sized pick, and the stage takes the rest; the
   Analyzer folds to its numbers and the actions shrink to fit the short stage. */
@media (max-width: 540px), (max-height: 540px) and (max-width: 1024px) {
  #panel-world.active { gap: 4px; }
  #panel-world .world-scene { min-height: var(--tap); min-width: 64px; padding: 2px 10px; }
  /* 14.5 px is the floor here too (ART_DIRECTION §10; it was 11 px): the line wraps rather than shrinks. */
  #panel-world .world-idle { bottom: 4px; gap: 8px; padding: 0 2px 0 10px; font-size: var(--t-micro); }
  #panel-world .world-idle-go { min-height: var(--tap); padding: 0 10px; font-size: var(--t-micro); }
}