/* Monero World: the directory as a walkable town.
 * Ported from xmrpad/web/world.css. The town sits inside the app shell, so the
 * stage fills the space under the top bar (and above the phone tab bar). */

.world-page {
  --accent: #ff974f;
  --line: #30383f;
  --dim: #abb4bd;
  --panel: #191e23;
  --ink: #eef1ef;
  --radius: 12px;
}
.world-main { position: relative; }

.stage-wrap {
  position: relative;
  width: 100%;
  height: calc(100dvh - 71px);
  min-height: 460px;
  overflow: hidden;
  background: #0a0f0b;
}
#stage {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
  outline: none;
}
#stage:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

.world-page button.small {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(29, 34, 40, 0.92);
  color: var(--ink);
  font: 600 12px system-ui, sans-serif;
  cursor: pointer;
}
.world-page button.small:hover { border-color: var(--accent); }
.world-page button.small[aria-pressed="true"] { background: #3a2a20; color: #ffc091; border-color: #6b4a33; }
.world-page .muted { color: var(--dim); }

.hud {
  position: absolute;
  z-index: 5;
  background: rgba(13, 13, 15, 0.84);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 9px;
  backdrop-filter: blur(3px);
}
.hud-top { top: 12px; left: 12px; max-width: min(520px, calc(100% - 24px)); }
.hud-top p { margin: 0; font-size: 11px; line-height: 1.45; }
.hud-controls {
  top: 12px;
  right: 12px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  padding: 5px;
  max-width: min(440px, calc(100% - 24px));
}
.hud-key { left: 12px; right: 12px; bottom: 12px; margin: 0; z-index: 7; font-size: 11px; line-height: 1.45; color: var(--dim); }
.hud-key[hidden] { display: none; }

.world-switch {
  position: absolute;
  z-index: 6;
  top: 64px;
  left: 12px;
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(13, 13, 15, 0.88);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.world-switch a {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 7px;
  font: 600 12px system-ui, sans-serif;
  color: var(--dim) !important;
  text-decoration: none;
}
.world-switch a[aria-current="page"] { background: #3a2a20; color: #ffc091 !important; }

.finder {
  position: absolute;
  z-index: 7;
  top: 112px;
  left: 12px;
  width: min(360px, calc(100% - 24px));
  max-height: calc(100% - 200px);
  overflow: auto;
  padding: 12px;
  background: rgba(13, 13, 15, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
  color: var(--ink);
}
.finder[hidden] { display: none; }
.finder label { display: block; font-size: 12px; font-weight: 600; margin: 12px 0 4px; }
.finder label:first-child { margin-top: 0; }
.finder input, .finder select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  background: #12181d;
  color: var(--ink);
  border: 1px solid #404b55;
  border-radius: 8px;
  font: 14px system-ui, sans-serif;
}
.hits { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.hits button { text-align: left; width: 100%; }

#minimap {
  position: absolute;
  z-index: 5;
  left: 12px;
  bottom: 12px;
  width: 240px;
  height: 136px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(10, 12, 14, 0.88);
  cursor: pointer;
  image-rendering: pixelated;
}
#minimap.big { inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; background: rgba(6, 7, 9, 0.97); z-index: 6; }

.plaque {
  position: absolute;
  z-index: 5;
  right: 12px;
  bottom: 12px;
  max-width: min(380px, calc(100% - 24px));
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--ink);
  background: rgba(13, 13, 15, 0.92);
  border: 1px solid var(--line);
  border-radius: 8px;
  backdrop-filter: blur(3px);
  cursor: pointer;
}
.plaque[hidden] { display: none; }
.plaque b { font-size: 13px; }

.dpad {
  position: absolute;
  z-index: 5;
  left: 12px;
  bottom: 12px;
  display: grid;
  grid-template-columns: repeat(3, 48px);
  grid-template-rows: repeat(2, 48px);
  gap: 5px;
}
.dpad button { min-height: 48px; padding: 0; opacity: 0.85; background: rgba(29, 29, 34, 0.9); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.dpad button[data-dir="up"] { grid-area: 1 / 2; }
.dpad button[data-dir="left"] { grid-area: 2 / 1; }
.dpad button[data-dir="down"] { grid-area: 2 / 2; }
.dpad button[data-dir="right"] { grid-area: 2 / 3; }
@media (hover: hover) and (pointer: fine) { .dpad { display: none; } }
@media (hover: none), (pointer: coarse) {
  #minimap { left: auto; right: 12px; bottom: auto; top: 112px; width: 132px; height: 86px; }
  #minimap.big { inset: 0; width: 100%; height: 100%; top: 0; }
  .plaque { bottom: 116px; }
}

.below { max-width: 1040px; margin: 0 auto; padding: 18px 14px 64px; color: var(--ink); }
.below .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.below summary { cursor: pointer; font-weight: 650; min-height: 32px; }
.below .kv { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; font-size: 13px; }
.below .kv dt { color: var(--dim); }
.below .kv dd { margin: 0; }
.below footer { font-size: 12px; color: var(--dim); }
.status { font-size: 13px; padding: 10px 12px; border-radius: 8px; background: #3a2025; color: #ffc4cc; }
.scroll-hint {
  position: absolute; z-index: 5; left: 50%; bottom: 12px; transform: translateX(-50%);
  font-size: 11px; color: var(--dim); background: rgba(13, 13, 15, 0.8);
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; margin: 0;
}
@media (max-width: 860px) { .scroll-hint { display: none; } }

.legend { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.legend li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: center; }
.legend li > div { display: grid; gap: 2px; }
.legend canvas.swatch { width: 96px; height: auto; image-rendering: pixelated; }

.world-page dialog#entry {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  width: min(560px, calc(100vw - 28px));
  max-height: 86vh;
  overflow: auto;
}
.world-page dialog#entry::backdrop { background: rgba(4, 4, 6, 0.74); }
.world-page dialog#entry .kv { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; font-size: 13px; }
.world-page dialog#entry .kv dt { color: var(--dim); }
.world-page dialog#entry .kv dd { margin: 0; overflow-wrap: anywhere; }
.world-page dialog#entry a { color: #ffbd8b; }
.world-page dialog#entry .buttons { margin-top: 14px; display: flex; justify-content: flex-end; }
.world-page dialog#entry .buttons button { min-height: 40px; padding: 8px 16px; border-radius: 8px; border: 1px solid var(--line); background: #222930; color: var(--ink); cursor: pointer; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stage-wrap:fullscreen { height: 100%; min-height: 0; }
.stage-wrap:fullscreen #stage { height: 100%; }

@media (max-width: 760px) {
  .stage-wrap { height: calc(100dvh - 64px - 64px); min-height: 420px; }
  .hud-top { display: none; }
  .world-switch { top: 12px; }
  .world-switch { top: 12px; }
  .hud-controls { top: 12px; left: auto; right: 12px; max-width: calc(100% - 150px); justify-content: flex-end; }
  #mapmode, #sky, #fullscreen, #recentre { display: none; }
  #minimap:not(.big) { left: auto; right: 12px; bottom: auto; top: 64px; width: 120px; height: 72px; }
  .plaque { left: 12px; right: 72px; bottom: 12px; max-width: none; }
  .finder { top: 64px; }
  .below .kv { grid-template-columns: 1fr; }
}