/* ARIA World embedded into 總覽(v0) — a bounded card, not the standalone full-page preview
   (see world-explorer.css / world-explorer.html for that). Same canvas element/JS, just a
   smaller host so the existing resize()/ResizeObserver logic naturally fits a card instead
   of the whole viewport. */
.world-panel {
  position: relative;
  height: 460px;
  border-radius: 10px;
  overflow: hidden;
  background: #040a13;
  margin-bottom: 14px;
  border: 1px solid var(--border);
}
.world-panel canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.world-panel .world-header {
  position: absolute; left: 16px; right: 16px; top: 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  pointer-events: none; color: #dbe8ef;
}
.world-panel .world-brand { font-size: 15px; letter-spacing: .14em; }
.world-panel .world-brand span { font-size: 10px; letter-spacing: .24em; margin-left: 8px; color: #91a8b8; }
.world-panel .world-note { font-size: 11px; color: #a2b6c3; margin: 0; text-align: right; }
.world-panel .world-caption {
  position: absolute; bottom: 10px; left: 16px; right: 16px; text-align: center;
  font-size: 12px; letter-spacing: .08em; color: #cdd9e0; pointer-events: none;
}
.world-panel #fallback[hidden] { display: none; }
.world-panel #fallback {
  position: absolute; top: 40%; left: 8%; right: 8%; padding: 14px; font-size: 13px;
  background: #182e40; color: #dbe8ef; border-radius: 6px;
}
.world-panel canvas:focus-visible { outline: 2px solid #91bfc8; outline-offset: -3px; }