/* testworld1.css — styles for the experimental V2 character creator and the
   Earth-to-space zoom. Loaded after the game's own sheets; nothing here changes
   existing selectors except the far-view gating rules at the bottom. */

/* ------------------------------------------------------ V2 creator --- */
.v2-editor-bg { z-index: 60; }                    /* above the start screen (50) */
.modal-bg .modal.v2-editor { max-width: 400px; }
.v2-editor-note { margin: -6px 0 10px; font-family: var(--font-num); font-size: 15px; color: var(--cream-dim); }
.v2-editor-preview {
  display: block; width: 100%; max-width: 336px; aspect-ratio: 4 / 1; margin: 0 auto 12px;
  image-rendering: pixelated; background: #0b3a33; border: 2px solid #9c6c2a;
}
.v2-editor-rows { display: grid; gap: 6px; margin-bottom: 10px; }
.v2-editor-row { display: grid; grid-template-columns: 1fr 40px minmax(110px, 1.2fr) 40px; align-items: center; gap: 6px; }
.v2-editor-slot { font-size: 14px; color: var(--cream-dim); }
.v2-editor-value { text-align: center; font-family: var(--font-num); font-size: 18px; color: var(--cream); }
.btn.v2-editor-step { min-height: 40px; padding: 0; font-family: var(--font-num); font-size: 20px; }
.v2-editor-presets, .v2-editor-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.v2-editor-actions { justify-content: flex-end; }
.v2-editor-actions .btn { min-width: 110px; }

.outfit-swatch.v2-swatch { width: 60px; height: 64px; }
.outfit-swatch.v2-swatch canvas { width: 48px; height: 48px; image-rendering: pixelated; }
.btn.v2-customize { align-self: center; min-height: 44px; padding: 0 10px; }
.outfit-row { flex-wrap: wrap; }
.btn.tw1-character-btn { display: block; width: 100%; margin: 0 0 10px; }

/* ------------------------------------------------- Earth-to-space zoom --- */
.tw1-zoom-chip {
  display: none; position: absolute; left: 12px; bottom: calc(18px + var(--safe-bot)); z-index: 23;
  padding: 5px 9px 6px; max-width: calc(100% - 100px);   /* clear of the round action buttons */
  font-family: var(--font-num); font-size: 17px; line-height: 1.1; color: var(--cream);
  background: #0d0b29e6; border: 2px solid #9c6c2a; pointer-events: none;
}
.tw1-zoom-chip b { color: var(--gold); font-weight: 400; letter-spacing: 1px; }
.tw1-zoom-chip i { display: block; height: 4px; margin-top: 4px; background: var(--cream); border: 1px solid #0b3a33; box-sizing: content-box; }
.tw1-zoom-chip small { display: block; margin-top: 4px; font-size: 12px; color: var(--cream-dim); }
body.tw1-far-view .tw1-zoom-chip { display: block; }

/* ------------------------------------------------------- HUD fixes --- */
/* The world-event / raid announcement sits above the mode panel and the journey card. */
#big-toast { z-index: 25; top: 42%; }
/* In event, dungeon and PvP mode the objective line wraps to two lines instead of being cut short. */
#hud .map-mode-panel:not(.mode-normal) .map-mode-detail { white-space: normal; text-overflow: clip; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* The boot note keeps its icon beside the text instead of wrapping under it. */
#boot-status:not([hidden]) { display: flex; align-items: center; gap: 8px; text-align: left; }
#boot-status .pe-icon { --icon-size: 16px; flex: none; }

/* Outside the street band the world is look-only: no gathering, no walking. */
body.tw1-far-view #btn-action,
body.tw1-far-view #joystick { display: none !important; }

/* The compass (main.js setupTurn): shown while the street world is turned (view-turn.js), its needle on north; a tap
   turns the map back to north. Above the Center button. */
#btn-compass { position: absolute; right: 10px; bottom: 466px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-family: var(--font-pixel); color: var(--cream); }
#btn-compass[hidden] { display: none !important; }
#btn-compass .needle { display: flex; flex-direction: column; align-items: center; gap: 1px; transform: rotate(var(--north, 0deg)); transition: transform 0.2s ease-out; }
#btn-compass .needle i { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #e05a4a; }
#btn-compass .needle b { font-size: 11px; line-height: 1; font-weight: normal; transform: rotate(calc(-1 * var(--north, 0deg))); }   /* the N stays upright */
@media (max-height: 700px) { #btn-compass { bottom: 421px; } }