/* Sendy's Metaverse: the 3D world (js/meta/), its HUD layer and the Menu.
   House rules hold here too: every font-size is max(var(--text-floor), …); control
   labels are near-black on a light fill; motion stops with reduced motion or html.motion-off. */

:root { --meta-void: #05030e; --meta-ink: #1f1238; --meta-lime: #c6f000; --meta-magenta: #ff2bd6; --meta-cyan: #00e5ff; --meta-gold: #ffb340; }

/* ===== the world under the HUD ===== */
.meta-host { position: fixed; left: 0; right: 0; top: var(--hud-h); bottom: 0; z-index: 1; overflow: hidden; background: var(--meta-void); outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.meta-host[hidden] { display: none; }
.meta-canvas { display: block; width: 100%; height: 100%; }
@media (max-width: 760px) { .meta-host { bottom: var(--dock-h); } }
body[data-view="world"] { overflow: hidden; }
body[data-view="world"] main { display: none; }
html.meta-on body::before, html.meta-on body::after { display: none; }

/* a place's page over the paused, dimmed world: the page scrolls, the world waits behind it */
.meta-host.is-under .meta-canvas { filter: brightness(0.42) saturate(0.85); }
.meta-host.is-under .meta-layer { display: none; }
html.meta-overlay main { position: relative; z-index: 2; }
html.meta-overlay body[data-view="scene"] main::before { content: ""; position: fixed; inset: var(--hud-h) 0 0 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 0%, rgba(20, 8, 40, 0.55), rgba(5, 3, 14, 0.82) 70%); }
html.meta-overlay .scene { background: linear-gradient(180deg, rgba(12, 8, 26, 0.86), rgba(8, 6, 18, 0.93)); border: 1px solid color-mix(in srgb, var(--region) 30%, transparent); border-radius: var(--r-4); padding: 1rem; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@media (max-width: 760px) { html.meta-overlay .scene { padding: 0.7rem; border-radius: var(--r-3); } }

/* ===== the world's HUD layer ===== */
.meta-layer { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.meta-layer button, .meta-layer .meta-go, .meta-layer .meta-photo { pointer-events: auto; }
.meta-labels { position: absolute; inset: 0; overflow: hidden; }
.meta-label { position: absolute; left: 0; top: 0; will-change: transform; white-space: nowrap; }
.meta-nameplate { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.7rem 0.28rem 0.32rem; border-radius: var(--r-pill); background: rgba(10, 6, 24, 0.82); border: 1.5px solid color-mix(in srgb, var(--fam, var(--meta-lime)) 70%, transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--fam, var(--meta-lime)) 35%, transparent), 0 6px 14px rgba(0, 0, 0, 0.45); font-weight: 800; font-size: max(var(--text-floor), 0.88rem); color: #fff8ee; }
.meta-nameplate b { font-weight: 800; }
.meta-np-token { display: inline-grid; width: 22px; height: 22px; }
.meta-np-token svg { width: 22px; height: 22px; }
.meta-np-badge { font-style: normal; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--meta-gold); color: #120a02; font-weight: 900; display: inline-grid; place-items: center; font-size: max(var(--text-floor), 0.75rem); }
.meta-np-state { display: none; color: var(--diamond); font-weight: 700; font-size: max(var(--text-floor), 0.75rem); }
.meta-nameplate[data-state="scaffold"] .meta-np-state, .meta-nameplate[data-state="ruin"] .meta-np-state { display: inline; }
.meta-nameplate[data-state="scaffold"] .meta-np-state::before { content: "🚧 build site"; }
.meta-nameplate[data-state="ruin"] .meta-np-state::before { content: "not here yet"; }
.meta-ringsign { display: grid; justify-items: center; line-height: 1.1; padding: 0.3rem 0.75rem; border-radius: var(--r-2); background: rgba(10, 6, 24, 0.78); border: 1.5px solid var(--fam); box-shadow: 0 0 18px color-mix(in srgb, var(--fam) 45%, transparent); color: #fff; font-size: max(var(--text-floor), 0.85rem); }
.meta-ringsign small { color: var(--fam); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; font-size: max(var(--text-floor), 0.68rem); }
.meta-ringsign b { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.03em; font-size: max(var(--text-floor), 1rem); }
.meta-beacon { padding: 0.3rem 0.75rem; border-radius: var(--r-pill); background: var(--meta-gold); color: #160c02; font-weight: 800; font-size: max(var(--text-floor), 0.9rem); box-shadow: 0 0 22px rgba(255, 179, 64, 0.6); }
.meta-beacon:empty { display: none; }
.meta-beacon span { opacity: 0.8; font-variant-numeric: tabular-nums; }
.meta-plate { display: grid; justify-items: center; line-height: 1.1; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); background: rgba(10, 6, 24, 0.78); color: #fff; font-size: max(var(--text-floor), 0.82rem); border: 1px solid rgba(198, 240, 0, 0.45); }
.meta-plate small { color: var(--text-dim); font-size: max(var(--text-floor), 0.7rem); }
.meta-plate small[hidden] { display: none; }
.meta-plate-npc { border-color: var(--meta-gold); }
.meta-bubble { max-width: 240px; white-space: normal; padding: 0.45rem 0.7rem; border-radius: 14px 14px 14px 4px; background: #fff8ee; color: #160c22; font-weight: 700; font-size: max(var(--text-floor), 0.86rem); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); }
.meta-bubble[hidden] { display: none; }

/* the minimap */
.meta-minimap { position: absolute; top: 12px; right: 12px; width: 168px; height: 168px; padding: 0; border-radius: 50%; overflow: hidden; border: 2px solid color-mix(in srgb, var(--meta-lime) 60%, transparent); box-shadow: 0 0 0 4px rgba(5, 3, 14, 0.7), 0 0 22px rgba(198, 240, 0, 0.25); background: #0a0418; cursor: pointer; }
.meta-minimap canvas { width: 100%; height: 100%; display: block; }
.meta-minimap-name { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); padding: 0.05rem 0.5rem; border-radius: var(--r-pill); background: rgba(5, 3, 14, 0.82); color: #fff; font-weight: 800; white-space: nowrap; font-size: max(var(--text-floor), 0.72rem); }
.meta-minimap-name:empty { display: none; }

/* the region banner */
.meta-banner { position: absolute; left: 50%; top: 14%; transform: translate(-50%, -10px); display: grid; justify-items: center; opacity: 0; transition: opacity 0.5s ease, transform 0.5s var(--ease-out); text-align: center; }
.meta-banner.on { opacity: 1; transform: translate(-50%, 0); }
.meta-banner small { color: #fff; letter-spacing: 0.3em; text-transform: uppercase; font-weight: 800; text-shadow: 0 2px 8px #000; font-size: max(var(--text-floor), 0.8rem); }
.meta-banner b { font-family: var(--font-disp); font-weight: 400; font-size: max(var(--text-floor), clamp(2rem, 6vw, 3.6rem)); color: var(--region, var(--meta-lime)); letter-spacing: 0.04em; text-shadow: 0 0 16px var(--region, var(--meta-lime)), 0 4px 0 #1f1238, 0 8px 22px rgba(0, 0, 0, 0.7); }

/* the prompt */
.meta-prompt { position: absolute; left: 50%; bottom: 7%; transform: translate(-50%, 12px); display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1rem 0.45rem 0.45rem; border-radius: var(--r-pill); background: rgba(10, 6, 24, 0.9); border: 1.5px solid var(--meta-lime); color: #fff; font-size: max(var(--text-floor), 1.02rem); box-shadow: 0 0 22px rgba(198, 240, 0, 0.35); opacity: 0; transition: opacity 0.18s ease, transform 0.18s var(--ease-out); white-space: nowrap; max-width: calc(100% - 24px); }
.meta-prompt.on { opacity: 1; transform: translate(-50%, 0); }
.meta-prompt kbd { display: inline-grid; place-items: center; min-width: 34px; height: 34px; border-radius: 9px; background: var(--meta-lime); color: #0b1000; font-family: var(--font-disp); font-size: max(var(--text-floor), 1.1rem); box-shadow: 0 3px 0 #6f8a00; }
.meta-prompt-token svg { width: 26px; height: 26px; display: block; }
.meta-prompt > span:last-child { overflow: hidden; text-overflow: ellipsis; }

/* the Go ▶ card */
.meta-go { position: absolute; left: 50%; top: 12px; transform: translate(-50%, -12px); display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.5rem 0.45rem 0.9rem; border-radius: var(--r-3); background: rgba(14, 8, 28, 0.94); border: 1.5px solid var(--meta-gold); box-shadow: 0 0 24px rgba(255, 179, 64, 0.35); opacity: 0; pointer-events: none !important; transition: opacity 0.2s ease, transform 0.2s var(--ease-out); max-width: calc(100% - 200px); }
.meta-go.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto !important; }
.meta-go-txt { display: grid; line-height: 1.15; min-width: 0; }
.meta-go-txt small { color: var(--meta-gold); font-weight: 800; font-size: max(var(--text-floor), 0.72rem); text-transform: uppercase; letter-spacing: 0.08em; }
.meta-go-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: max(var(--text-floor), 1rem); }
.meta-go-d { color: var(--text-dim); font-size: max(var(--text-floor), 0.78rem); font-variant-numeric: tabular-nums; }

/* the hint, photo mode, the warp flash */
.meta-hint { position: absolute; left: 12px; bottom: 12px; max-width: min(380px, 30%); padding: 0.45rem 0.8rem; border-radius: var(--r-2); background: rgba(10, 6, 24, 0.8); color: var(--text-dim); font-size: max(var(--text-floor), 0.82rem); opacity: 0; transition: opacity 0.6s ease; }
.meta-hint.on { opacity: 1; }
.meta-hint kbd { display: inline-block; padding: 0 0.35rem; border-radius: 5px; background: var(--ink-4); color: #fff; font-family: var(--mono); font-size: max(var(--text-floor), 0.78rem); }
.meta-photo { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem 0.45rem 1rem; border-radius: var(--r-pill); background: rgba(10, 6, 24, 0.88); color: #fff; font-size: max(var(--text-floor), 0.9rem); }
.meta-photo.on { display: inline-flex; }
.meta-layer.is-photo > :not(.meta-photo):not(.meta-labels) { display: none; }
.meta-layer.is-photo .meta-labels { opacity: 0; }
html.meta-photo-on .hud { opacity: 0.12; transition: opacity 0.3s ease; }
html.meta-photo-on .hud:hover { opacity: 1; }
.meta-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.meta-flash.on { animation: meta-flash 0.55s ease-out; }
@keyframes meta-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* speed lines: streaks round the edge of the view during a blast-off (dying away) and nitro (held) */
.meta-speed { position: absolute; inset: 0; opacity: 0; pointer-events: none; display: none;
  background: repeating-conic-gradient(from 0deg at 50% 54%, transparent 0deg 3.1deg, rgba(255, 244, 220, 0.5) 3.1deg 3.5deg, transparent 3.5deg 7.3deg, rgba(255, 200, 120, 0.32) 7.3deg 7.6deg, transparent 7.6deg 11deg);
  -webkit-mask-image: radial-gradient(ellipse 72% 68% at 50% 54%, transparent 46%, #000 92%); mask-image: radial-gradient(ellipse 72% 68% at 50% 54%, transparent 46%, #000 92%);
  animation: meta-speed 0.24s steps(3) infinite; }
.meta-speed.on { display: block; }
.meta-speed.hot { background: repeating-conic-gradient(from 0deg at 50% 54%, transparent 0deg 2.6deg, rgba(225, 250, 255, 0.75) 2.6deg 3.1deg, transparent 3.1deg 6.1deg, rgba(120, 220, 255, 0.5) 6.1deg 6.5deg, transparent 6.5deg 9.4deg); }
@keyframes meta-speed { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(2.4deg) scale(1.06); } }

/* the nitro gauge: ready (lime), burning (white-blue, draining), recharging (dim, filling) */
.meta-nitro-gauge { position: absolute; right: 14px; bottom: 80px; z-index: 3; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem 0.25rem 0.45rem; border-radius: var(--r-pill); border: 2px solid color-mix(in srgb, var(--meta-lime) 70%, transparent); background: rgba(10, 6, 24, 0.86); color: #fff8ee; font-weight: 800; font-size: max(var(--text-floor), 0.86rem); box-shadow: 0 0 0 2px rgba(5, 3, 14, 0.7), 0 0 14px rgba(198, 240, 0, 0.25); pointer-events: none; white-space: nowrap; }
.meta-nitro-gauge i { font-style: normal; font-size: max(var(--text-floor), 1.05rem); line-height: 1; }
.meta-nitro-gauge b { font-family: var(--font-disp); font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; color: var(--meta-lime); font-size: max(var(--text-floor), 0.86rem); }
.meta-nitro-bar { position: relative; width: 58px; height: 9px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.meta-nitro-bar > span { position: absolute; inset: 0; transform-origin: left center; background: var(--meta-lime); border-radius: inherit; }
.meta-nitro-gauge small { min-width: 3.4em; text-align: right; color: var(--text-dim, #cfc4e8); font-size: max(var(--text-floor), 0.8rem); }
.meta-nitro-gauge[data-state="active"] { border-color: #bff2ff; box-shadow: 0 0 0 2px rgba(5, 3, 14, 0.7), 0 0 22px rgba(159, 224, 255, 0.75); }
.meta-nitro-gauge[data-state="active"] b, .meta-nitro-gauge[data-state="active"] small { color: #dff8ff; }
.meta-nitro-gauge[data-state="active"] .meta-nitro-bar > span { background: linear-gradient(90deg, #9fe0ff, #ffffff); }
.meta-nitro-gauge[data-state="cool"] { border-color: rgba(255, 255, 255, 0.25); box-shadow: 0 0 0 2px rgba(5, 3, 14, 0.7); }
.meta-nitro-gauge[data-state="cool"] b { color: #b9b0cf; }
.meta-nitro-gauge[data-state="cool"] .meta-nitro-bar > span { background: #8d84a8; }
.meta-nitro-gauge.no { animation: meta-nitro-no 0.3s ease-out; }
@keyframes meta-nitro-no { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.meta-layer.is-photo .meta-nitro-gauge, .meta-layer.is-photo .meta-speed { display: none; }

/* the touch kit (coarse pointers only) */
.meta-touch { display: none; }
@media (pointer: coarse) {
  .meta-touch { display: block; position: absolute; inset: 0; pointer-events: none; }
  .meta-stick-zone { position: absolute; left: 0; bottom: 0; width: 46%; height: 52%; pointer-events: auto; touch-action: none; }
  .meta-stick { position: absolute; left: 0; top: 0; width: 120px; height: 120px; border-radius: 50%; border: 2px solid rgba(198, 240, 0, 0.5); background: radial-gradient(circle, rgba(198, 240, 0, 0.1), rgba(10, 6, 24, 0.45)); opacity: 0; transition: opacity 0.12s ease; }
  .meta-stick.on { opacity: 1; }
  .meta-stick i { position: absolute; left: 36px; top: 36px; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e6ff8a, var(--meta-lime) 60%, #7e9a00); box-shadow: 0 0 14px rgba(198, 240, 0, 0.6); }
  .meta-tbtn { position: absolute; width: 72px; height: 72px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.35); font-family: var(--font-disp); font-size: max(var(--text-floor), 1.6rem); color: #0b1000; background: radial-gradient(circle at 35% 30%, #e6ff8a, var(--meta-lime) 65%, #7e9a00); box-shadow: 0 5px 0 #5a6e00, 0 0 18px rgba(198, 240, 0, 0.45); pointer-events: auto; touch-action: none; }
  .meta-tbtn.down { transform: translateY(3px) scale(0.95); box-shadow: 0 2px 0 #5a6e00; }
  .meta-jump { right: 18px; bottom: 22px; width: 84px; height: 84px; }
  .meta-act { right: 112px; bottom: 34px; background: radial-gradient(circle at 35% 30%, #fff1c9, var(--meta-gold) 65%, #c27a00); box-shadow: 0 5px 0 #8a5600, 0 0 18px rgba(255, 179, 64, 0.5); }
  .meta-act[hidden] { display: none; }
  .meta-pound { right: 30px; bottom: 122px; width: 58px; height: 58px; font-size: max(var(--text-floor), 1.3rem); background: radial-gradient(circle at 35% 30%, #ffc4ea, var(--meta-magenta) 65%, #a0108a); box-shadow: 0 4px 0 #7a0a68; display: none; }
  .meta-pound.show { display: block; }
  /* rocket flight: ⤓ takes the pound button's spot (no pounding mid-flight) */
  .meta-down { right: 30px; bottom: 122px; width: 58px; height: 58px; font-size: max(var(--text-floor), 1.3rem); color: #00121a; background: radial-gradient(circle at 35% 30%, #d6fbff, var(--meta-cyan) 65%, #007f99); box-shadow: 0 4px 0 #005466, 0 0 16px rgba(0, 229, 255, 0.45); display: none; }
  .meta-down.show { display: block; }
  .meta-down.show ~ .meta-jump { box-shadow: 0 5px 0 #5a6e00, 0 0 26px rgba(255, 179, 64, 0.75); }
  /* nitro: ⚡ left of the emote button, its ring the gauge (dark where it isn't charged yet) */
  .meta-nitro { right: 104px; bottom: 196px; width: 52px; height: 52px; font-size: max(var(--text-floor), 1.35rem); color: #00121a; background: conic-gradient(transparent 0 var(--k, 100%), rgba(10, 6, 24, 0.62) var(--k, 100%) 100%), radial-gradient(circle at 35% 30%, #effcff, var(--meta-cyan) 62%, #0088a8); box-shadow: 0 4px 0 #005466, 0 0 18px rgba(0, 229, 255, 0.5); }
  .meta-nitro[data-state="active"] { border-color: #ffffff; box-shadow: 0 4px 0 #005466, 0 0 30px rgba(191, 242, 255, 0.95); }
  .meta-nitro[data-state="cool"] { filter: saturate(0.3) brightness(0.85); }
  .meta-prompt { bottom: 128px; }
  .meta-hint { bottom: auto; top: 12px; left: 12px; max-width: calc(100% - 196px); }
  .meta-nitro-gauge { right: 28px; bottom: 258px; padding: 0.2rem 0.55rem 0.2rem 0.4rem; }
  .meta-nitro-gauge b { display: none; } /* (narrow: the ⚡ says it, clear of the hint on the left) */
  .meta-nitro-bar { width: 44px; }
}
@media (max-width: 760px) {
  .meta-minimap { width: 112px; height: 112px; top: 8px; right: 8px; }
  .meta-go { top: auto; bottom: 120px; max-width: calc(100% - 24px); }
  .meta-banner { top: 20%; }
}

/* the debug overlay (?debug=1) */
.meta-debug { position: absolute; left: 8px; top: 8px; z-index: 5; margin: 0; padding: 0.4rem 0.6rem; border-radius: 8px; background: rgba(0, 0, 0, 0.72); color: #c6f000; font-family: var(--mono); font-size: max(var(--text-floor), 0.75rem); line-height: 1.35; pointer-events: none; white-space: pre; }

/* ===== the HUD: the Menu button and the Send Power meter ===== */
.meta-menu-btn { width: auto; min-width: 44px; padding: 0 0.7rem; gap: 0.35rem; display: inline-flex; align-items: center; background: var(--green-bright); border-color: var(--green-bright); font-weight: 900; }
.meta-menu-btn .meta-burger { font-size: max(var(--text-floor), 1.15rem); line-height: 1; }
.meta-menu-word { font-family: var(--font-disp); font-weight: 400; font-size: max(var(--text-floor), 0.95rem); letter-spacing: 0.03em; }
@media (max-width: 1150px) { .meta-menu-word { display: none; } .meta-menu-btn { padding: 0; width: 44px; justify-content: center; } }
.meta-power { gap: 0.4rem; cursor: pointer; border-color: color-mix(in srgb, var(--green-bright) 45%, var(--ink-5)); }
.meta-power-lv { font-weight: 900; white-space: nowrap; }
.meta-power-bar { position: relative; width: 58px; height: 8px; border-radius: 999px; background: var(--ink-4); overflow: hidden; }
.meta-power-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, var(--green-dark), var(--green-bright)); box-shadow: 0 0 8px var(--glow-g); }
.meta-power-n { font-variant-numeric: tabular-nums; }
.meta-power-join { border-color: var(--gold); color: var(--text); }
@media (max-width: 760px) { .meta-power-n { display: none; } .meta-power-bar { width: 36px; } }
@media (max-width: 420px) { .meta-power-lv { font-size: max(var(--text-floor), 0.8rem); } }

/* ===== the Menu ===== */
.meta-menu { position: fixed; inset: 0; z-index: 300; display: none; align-items: flex-start; justify-content: center; padding: calc(var(--hud-h) + 0.6rem) 0.8rem 0.8rem; background: rgba(4, 2, 12, 0.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.meta-menu.open { display: flex; animation: meta-in var(--dur-2) var(--ease-out); }
@keyframes meta-in { from { opacity: 0; transform: translateY(8px); } }
.meta-menu-card { width: min(980px, 100%); max-height: calc(100vh - var(--hud-h) - 1.4rem); display: flex; flex-direction: column; border-radius: var(--r-4); background: linear-gradient(180deg, rgba(30, 14, 56, 0.97), rgba(10, 6, 24, 0.98)); border: 1.5px solid color-mix(in srgb, var(--meta-magenta) 45%, transparent); box-shadow: 0 0 0 1px rgba(198, 240, 0, 0.12), 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(255, 43, 214, 0.18); overflow: hidden; }
.meta-menu-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.8rem 0.9rem; border-bottom: 1px solid rgba(255, 43, 214, 0.25); }
.meta-menu-head h2 { font-size: max(var(--text-floor), 1.6rem); color: var(--green-bright); }
.meta-search { flex: 1; min-width: 0; min-height: 46px; padding: 0 1rem; border-radius: var(--r-pill); border: 1.5px solid rgba(198, 240, 0, 0.45); background: rgba(5, 3, 14, 0.7); color: var(--text); font-size: max(var(--text-floor), 1rem); }
.meta-search:focus { outline: none; border-color: var(--green-bright); box-shadow: 0 0 0 3px rgba(198, 240, 0, 0.25); }
.meta-x { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 0 !important; }
.meta-menu-scroll { overflow-y: auto; padding: 0.9rem; overscroll-behavior: contain; }
.meta-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.55rem; }
.meta-feature { display: flex; align-items: center; gap: 0.6rem; min-height: 60px; padding: 0.55rem 0.8rem; border-radius: var(--r-3); border: 1.5px solid var(--ctl-fill-lo); background: linear-gradient(180deg, var(--green-bright), var(--green-dark)); color: var(--on-green); text-align: left; cursor: pointer; transition: transform var(--dur-1) ease; }
.meta-feature:hover { transform: translateY(-2px); }
.meta-feature-icon { font-size: max(var(--text-floor), 1.6rem); }
.meta-feature-txt { display: grid; line-height: 1.15; }
.meta-feature-txt b { font-family: var(--font-disp); font-weight: 400; font-size: max(var(--text-floor), 1.02rem); letter-spacing: 0.02em; }
.meta-feature-txt small { font-weight: 700; font-size: max(var(--text-floor), 0.78rem); opacity: 0.85; }
.meta-feature.is-coming { background: linear-gradient(180deg, #cdbcff, #9b84e6); border-color: #9b84e6; }
.meta-more { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.7rem 0 0.2rem; }
.meta-sub { margin: 1rem 0 0.5rem; font-family: var(--font-disp); font-weight: 400; color: var(--green-bright); font-size: max(var(--text-floor), 1.25rem); }
.meta-sub small { font-family: var(--font-body); color: var(--text-dim); font-weight: 700; font-size: max(var(--text-floor), 0.8rem); }
.meta-region { margin-bottom: 0.7rem; }
.meta-region h4 { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0 0.4rem; color: var(--region); font-size: max(var(--text-floor), 1rem); text-shadow: 0 0 10px color-mix(in srgb, var(--region) 45%, transparent); }
.meta-region-warp { min-height: 34px; padding: 0 0.7rem; border-radius: var(--r-pill); border: 1.5px solid color-mix(in srgb, var(--region) 70%, transparent); background: color-mix(in srgb, var(--region) 85%, white); color: #120a20; font-weight: 800; cursor: pointer; font-size: max(var(--text-floor), 0.78rem); }
.meta-place-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.35rem; }
.meta-place { display: flex; gap: 0.25rem; }
.meta-place-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.3rem 0.6rem 0.3rem 0.35rem; border-radius: var(--r-2); border: 1.5px solid color-mix(in srgb, var(--region) 40%, transparent); background: #f4efff; color: #160c22; font-weight: 800; text-align: left; cursor: pointer; font-size: max(var(--text-floor), 0.88rem); }
.meta-place-go:hover { background: #ffffff; border-color: var(--region); }
.meta-place-token { flex: 0 0 22px; height: 22px; }
.meta-place-token svg { display: block; }
.meta-place-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta-place-state { margin-left: auto; color: #6a4fc0; font-weight: 700; font-size: max(var(--text-floor), 0.7rem); white-space: nowrap; }
.meta-place-warp { flex: 0 0 44px; min-height: 44px; border-radius: var(--r-2); border: 1.5px solid color-mix(in srgb, var(--region) 50%, transparent); background: color-mix(in srgb, var(--region) 80%, white); color: #120a20; font-weight: 900; cursor: pointer; font-size: max(var(--text-floor), 1rem); }
.meta-view { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid rgba(255, 43, 214, 0.2); }
.meta-results { display: grid; gap: 0.35rem; }
.meta-results[hidden], .meta-menu-main[hidden] { display: none; }
.meta-result { display: flex; align-items: center; gap: 0.65rem; min-height: 52px; padding: 0.4rem 0.7rem; border-radius: var(--r-2); border: 1.5px solid transparent; background: #f4efff; color: #160c22; text-align: left; cursor: pointer; }
.meta-result:hover, .meta-result:focus-visible { background: #fff; border-color: var(--green-bright); }
.meta-result-icon { font-size: max(var(--text-floor), 1.3rem); }
.meta-result-txt { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.meta-result-txt b { font-size: max(var(--text-floor), 0.95rem); }
.meta-result-txt small { color: #5a4c70; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: max(var(--text-floor), 0.75rem); }
.meta-result-kind { padding: 0.1rem 0.5rem; border-radius: var(--r-pill); background: #e3dbff; color: #3a2a6a; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: max(var(--text-floor), 0.66rem); }
.meta-result-verb .meta-result-kind { background: #e6ff8a; color: #2a3600; }
@media (max-width: 760px) {
  .meta-menu { padding: calc(var(--hud-h) + 0.3rem) 0.35rem calc(var(--dock-h) + 0.3rem); }
  .meta-menu-card { max-height: calc(100vh - var(--hud-h) - var(--dock-h) - 0.6rem); }
  .meta-menu-head h2 { display: none; }
  .meta-features { grid-template-columns: 1fr 1fr; }
  .meta-feature { min-height: 56px; padding: 0.45rem 0.55rem; gap: 0.4rem; }
  .meta-feature-icon { font-size: max(var(--text-floor), 1.3rem); }
  .meta-feature-txt small { display: none; }
  .meta-place-list { grid-template-columns: 1fr; }
}

/* ===== the panel (Menu.panel): stubs today, the Season Pass and dialogues in phase 2 ===== */
.meta-sheet { position: fixed; inset: 0; z-index: 310; display: flex; align-items: center; justify-content: center; padding: calc(var(--hud-h) + 0.6rem) 0.8rem 0.8rem; background: rgba(4, 2, 12, 0.55); opacity: 0; transition: opacity var(--dur-2) ease; }
.meta-sheet.open { opacity: 1; }
.meta-sheet-card { width: min(560px, 100%); max-height: calc(100vh - var(--hud-h) - 1.4rem); display: flex; flex-direction: column; border-radius: var(--r-4); background: linear-gradient(180deg, rgba(30, 14, 56, 0.98), rgba(10, 6, 24, 0.99)); border: 1.5px solid rgba(198, 240, 0, 0.4); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); overflow: hidden; }
.meta-sheet.wide .meta-sheet-card { width: min(980px, 100%); }
.meta-sheet-head { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 0.9rem; border-bottom: 1px solid rgba(198, 240, 0, 0.2); }
.meta-sheet-head h2 { flex: 1; color: var(--green-bright); font-size: max(var(--text-floor), 1.4rem); }
.meta-sheet-body { padding: 1rem; overflow-y: auto; display: grid; gap: 0.8rem; }
.meta-coming .chip { margin-right: 0.3rem; }
@media (max-width: 760px) { .meta-sheet { padding: calc(var(--hud-h) + 0.3rem) 0.35rem calc(var(--dock-h) + 0.3rem); } }

/* reduced motion: nothing slides or flashes */
html.motion-off .meta-banner, html.motion-off .meta-prompt, html.motion-off .meta-go, html.motion-off .meta-menu.open, html.motion-off .meta-sheet { transition: none; animation: none; }
html.motion-off .meta-flash.on, html.motion-off .meta-speed, html.motion-off .meta-nitro-gauge.no { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .meta-banner, .meta-prompt, .meta-go, .meta-sheet { transition: none; }
  .meta-menu.open, .meta-flash.on, .meta-speed, .meta-nitro-gauge.no { animation: none; }
}