/* The public World page: a full-screen canvas. The overlay (/css/app.css) owns the top bar (56 px)
   and the right-hand panel (380 px); the World keeps its own controls small and bottom-left. */
html, body { margin: 0; height: 100%; background: #05080d; color: #dce8f3; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; overflow: hidden; }
.awcg-world { position: fixed; inset: 0; }
.awcg-stage, .awcg-stage.maplibregl-map { position: absolute; inset: 0; outline: none; background: #05080d; }

/* World controls: bottom-left, above MapLibre's own buttons and credits. */
.awcg-ctl { display: flex; clear: both; margin: 0 0 6px 10px; gap: 4px; flex-wrap: wrap; max-width: 260px; }
.awcg-ctl button { min-height: 30px; padding: 4px 10px; border: 1px solid rgba(57, 210, 192, .35); border-radius: 6px; background: rgba(8, 13, 20, .86);
  color: #dce8f3; font: 600 12px/1 system-ui, sans-serif; cursor: pointer; }
.awcg-ctl button:hover { border-color: #39d2c0; }
.awcg-ctl button.on { background: rgba(57, 210, 192, .22); border-color: #39d2c0; color: #fff; }
.awcg-ctl button:focus-visible { outline: 2px solid #39d2c0; outline-offset: 1px; }

/* Speech bubbles over our guides. */
.awcg-bubble { position: absolute; left: 0; top: 0; z-index: 2; max-width: 240px; padding: 7px 10px; border: 1px solid rgba(57, 210, 192, .5); border-radius: 10px;
  background: rgba(8, 13, 20, .92); color: #e8f6ff; font: 12px/1.4 system-ui, sans-serif; pointer-events: none; white-space: normal; will-change: transform; }
.awcg-bubble b { display: block; color: #39d2c0; font-size: 11px; margin-bottom: 2px; }
.awcg-bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 10px; height: 10px; margin-left: -5px; background: inherit;
  border-right: 1px solid rgba(57, 210, 192, .5); border-bottom: 1px solid rgba(57, 210, 192, .5); transform: rotate(45deg); }

.awcg-note { position: absolute; left: 50%; top: 72px; transform: translateX(-50%); z-index: 4; max-width: min(520px, calc(100vw - 32px)); padding: 12px 14px;
  border: 1px solid rgba(248, 81, 73, .45); border-radius: 8px; background: rgba(20, 8, 10, .92); color: #ffd7d3; font-size: 13px; }

/* MapLibre's hover card for markers. */
.maplibregl-popup.admin-map-popup .maplibregl-popup-content { background: rgba(8, 13, 20, .94); color: #dce8f3; font: 12px/1.4 system-ui, sans-serif;
  border: 1px solid rgba(57, 210, 192, .35); border-radius: 6px; padding: 6px 9px; max-width: 320px; pointer-events: none; }
.maplibregl-popup.admin-map-popup .maplibregl-popup-tip { display: none; }
.awcg-stage .maplibregl-ctrl-bottom-left { z-index: 3; }
.awcg-stage .maplibregl-ctrl-attrib { background: rgba(8, 13, 20, .7); color: #9fb2c4; }
.awcg-stage .maplibregl-ctrl-attrib a { color: #cfe3f2; }

/* God's Eye View's hint line and close-range cursor (same style as AgentChain's World). */
.acw-nav-hint { position: absolute; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 6; max-width: calc(100% - 32px); background: rgba(8, 13, 20, .9);
  border: 1px solid rgba(57, 210, 192, .45); border-radius: 8px; color: #dce8f3; font: 12px/1.4 system-ui, sans-serif; padding: 7px 12px; pointer-events: none;
  opacity: 0; transition: opacity .35s ease; text-align: center; }
.acw-nav-hint.is-shown { opacity: 1; }
.acw-nav-hint[hidden] { display: none; }
.acw-close-nav .maplibregl-canvas-container { cursor: grab; }
.acw-close-nav .maplibregl-canvas-container.acw-turning { cursor: grabbing; }

/* The keys card (H). */
.awcg-keys { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 7; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 140px);
  overflow: auto; padding: 14px 16px; border: 1px solid rgba(57, 210, 192, .5); border-radius: 10px; background: rgba(8, 13, 20, .96); color: #dce8f3; font: 13px/1.45 system-ui, sans-serif; }
.awcg-keys[hidden] { display: none; }
.awcg-keys > b { display: block; font-size: 15px; margin-bottom: 8px; color: #39d2c0; }
.awcg-keys table { border-collapse: collapse; width: 100%; }
.awcg-keys th { text-align: left; white-space: nowrap; padding: 3px 12px 3px 0; color: #fff; vertical-align: top; font-weight: 600; }
.awcg-keys td { padding: 3px 0; color: #c6d4e1; }
.awcg-keys small { display: block; margin-top: 8px; color: #9fb2c4; }

/* Other players: name tags, and the hover card over any robot. */
.awcg-name { position: absolute; left: 0; top: 0; z-index: 2; padding: 2px 7px; border-radius: 9px; background: rgba(8, 13, 20, .82); color: #f2f7fb;
  font: 600 11px/1.3 system-ui, sans-serif; white-space: nowrap; pointer-events: none; border: 1px solid rgba(232, 238, 245, .35); will-change: transform; }
.awcg-hover { position: absolute; left: 0; top: 0; z-index: 6; max-width: 260px; padding: 7px 10px; border-radius: 8px; background: rgba(8, 13, 20, .95);
  border: 1px solid rgba(57, 210, 192, .5); color: #dce8f3; font: 12px/1.4 system-ui, sans-serif; pointer-events: none; }
.awcg-hover[hidden] { display: none; }
.awcg-hover b { display: block; color: #fff; font-size: 13px; }
.awcg-hover small { display: block; color: #b9c8d6; }
.awcg-hover .awcg-hover-hint { color: #7f93a6; margin-top: 3px; }