/* Exploration mode of the map editor (explore/): the panels go away like the game preview, a crosshair, the HUD panel, the hotbar and the spawn menu over the view. */
#app.explore { grid-template-columns: 0 1fr 0; grid-template-rows: 0 1fr; }
#app.explore #top, #app.explore #left, #app.explore #right, #app.explore .minimap, #app.explore .toolrail, #app.explore .toolcard, #app.explore .chantier, #app.explore #hud { display: none; }
#app.explore .selbar { display: none !important; }
#app.explore #view canvas:not(.minimap) { cursor: none; }

.xp-hud { position: absolute; inset: 0; pointer-events: none; z-index: 6; font-size: 13px; }
.xp-cross { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%); }
.xp-cross i, .xp-cross b { position: absolute; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.65); }
.xp-cross i { left: 10px; top: 0; width: 2px; height: 22px; } .xp-cross b { top: 10px; left: 0; width: 22px; height: 2px; }

.xp-panel { position: absolute; left: 12px; top: 12px; width: 300px; display: grid; gap: 6px; padding: 10px 12px; background: rgba(10, 13, 26, 0.82); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); color: var(--text); }
.xp-title { display: flex; align-items: center; gap: 8px; } .xp-title > b { color: var(--accent); font-size: 14px; }
.xp-mode { padding: 1px 8px; border-radius: 10px; font-size: 12px; } .xp-mode.fly { background: #1f3a5c; } .xp-mode.walk { background: #23502f; } .xp-hint { margin-left: auto; color: var(--dim); font-size: 11px; }
.xp-tool { display: flex; align-items: center; gap: 8px; font-size: 18px; } .xp-tool b { font-size: 17px; }
.xp-state { color: #bfe6ff; font-size: 12px; }
.xp-keys { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12.5px; } .xp-keys dt { color: var(--accent); font-weight: 600; white-space: nowrap; } .xp-keys dd { margin: 0; }
.xp-general { color: var(--dim); font-size: 11.5px; line-height: 1.45; border-top: 1px solid var(--line); padding-top: 6px; }
.xp-msg { color: #d9f5d0; font-size: 12px; min-height: 0; } .xp-msg:empty { display: none; }
.xp-free { position: absolute; left: 50%; top: calc(50% + 26px); transform: translateX(-50%); padding: 3px 10px; background: rgba(10, 13, 26, 0.75); border-radius: 6px; color: var(--text); font-size: 12px; white-space: nowrap; }

.xp-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; gap: 5px; }
.xp-slot { position: relative; width: 74px; height: 62px; display: grid; justify-items: center; align-content: center; gap: 2px; background: rgba(10, 13, 26, 0.78); border: 2px solid var(--line); border-radius: 8px; color: var(--dim); }
.xp-slot .xp-ico { font-size: 22px; line-height: 1; } .xp-slot .xp-lbl { font-size: 11.5px; } .xp-slot .xp-n { position: absolute; left: 5px; top: 2px; font-size: 11px; color: var(--dim); }
.xp-slot.on { border-color: var(--accent); background: rgba(58, 52, 20, 0.92); color: var(--text); } .xp-slot.on .xp-n { color: var(--accent); }

.xp-spawn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(720px, calc(100% - 40px)); max-height: calc(100% - 140px); z-index: 8; display: grid; grid-template-rows: auto auto 1fr; gap: 8px; padding: 12px; background: rgba(16, 20, 38, 0.96); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); }
.xp-spawn-head { display: flex; align-items: center; gap: 10px; } .xp-spawn-head b { color: var(--accent); } .xp-count { color: var(--dim); font-size: 12px; margin-left: auto; }
.xp-search { width: 100%; font-size: 14px; padding: 6px 9px; }
.xp-grid { overflow: auto; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; align-content: start; }
.xp-card { display: grid; gap: 2px; padding: 3px; text-align: center; font-size: 11px; } .xp-card span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .xp-card.on { border-color: var(--accent); }