/* css/galaxies.css — EXPLORE (the guest home + the Realm pages).
   Same language as the rest of the site: pixel type for names and labels,
   crisp-edged scenes, the deep warp behind; blue = public signal, gold =
   Earth LinC / the verb. Busy is the enemy: one place, one job, few words. */

:root { --gx-top: 88px; }
@media (max-width: 760px) { :root { --gx-top: 100px; } }

/* ══ GUEST: THE HOP — Galaxies ↔ Airwaves without a word. The corner holds a
   small thing from the other world (the radio · an empty ship); Navi makes
   the trip herself (flyers drawn by galaxies.js). The corner carries
   language · ABOUT · QUEST · ENTER, as on today's homepage. ══ */
#gx-hop {
  /* in from the corner — somewhere the eye actually lands, not the edge */
  position: fixed; left: clamp(24px, 5vw, 88px); bottom: clamp(28px, 7vh, 80px); z-index: 418;
  width: 92px; height: 76px; padding: 0; border: none; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#gx-hop:focus-visible { outline: 1px dashed rgba(150,200,255,0.6); outline-offset: 2px; border-radius: 10px; }
/* a soft pool of light under whatever is sitting there */
#gx-hop::after {
  content: ''; position: absolute; left: 16px; right: 16px; bottom: 4px; height: 9px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(127,195,255,0.4), transparent);
  transition: opacity .3s ease;
}
#gx-hop.gx-hop-took::after { opacity: 0.3; }
.gx-hop-radio, .gx-hop-ship {
  position: absolute; left: 50%; bottom: 10px; display: block;
  transform: translateX(-50%); transform-origin: 50% 100%;
  transition: opacity .35s ease, transform .5s cubic-bezier(.34,1.6,.5,1);
}
.gx-hop-radio svg { display: block; width: 50px; height: 50px; image-rendering: pixelated; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35)); animation: gxBob 3s ease-in-out infinite; }
.gx-hop-ship svg { position: static; display: block; width: 76px; height: 34px;   /* static: it shares the .gx-ufo-ship class, which is absolute in Explore */
  animation: gxBob 2.6s ease-in-out infinite; }
/* the empty ship's beam, faint, waiting for someone */
.gx-hop-ship i {
  position: absolute; left: 50%; top: 26px; width: 30px; height: 18px; transform: translateX(-50%);
  clip-path: polygon(32% 0, 68% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(190,235,255,0.5), rgba(190,235,255,0));
  animation: gxAir 2.4s ease-in-out infinite;
}
/* which one is there: the OTHER world's thing */
.gx-hop-ship { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.5); pointer-events: none; }
body.gx-tune .gx-hop-ship { opacity: 1; transform: translateX(-50%); }
body.gx-tune .gx-hop-radio { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.5); }
#gx-hop.gx-hop-took .gx-hop-radio, #gx-hop.gx-hop-took .gx-hop-ship { opacity: 0; transform: translateX(-50%) scale(.3); transition-duration: .15s; }
/* hover: it wakes — the radio lifts and sings, the ship's light reaches */
#gx-hop:hover .gx-hop-radio { transform: translateX(-50%) translateY(-5px) rotate(-6deg); }
#gx-hop:hover .gx-hop-radio .plz-rx-w2 { animation-duration: 1.1s; }
#gx-hop:hover .gx-hop-radio .plz-rx-w1 { animation-duration: 1.1s; animation-delay: .15s; }
body.gx-tune #gx-hop:hover .gx-hop-ship { transform: translateX(-50%) translateY(-5px) rotate(4deg); }
#gx-hop:hover .gx-hop-ship i { animation-duration: .9s; }
body.ncp-nav-open #gx-hop, body.sky-open #gx-hop { opacity: 0; pointer-events: none; }

/* the flyers (above the scenes, below the drawer line) */
.gx-flyer { position: fixed; left: 0; top: 0; z-index: 425; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.gx-flyer > .gx-flyer-navi, .gx-flyer > .plz-rx { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.gx-flyer > .gx-flyer-navi { filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35)); }
.gx-flyer-ufo .gx-ufo-navi { opacity: 0; transform: translateY(26px) scale(.5); transition: opacity .3s ease, transform .38s cubic-bezier(.3,.7,.3,1); }
.gx-flyer-ufo.aboard .gx-ufo-navi { opacity: 1; transform: none; }
.gx-flyer-ufo .gx-ufo-ship { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx-flyer-beam {
  position: absolute; left: 50%; top: 84%; width: 46%; height: 130%; transform: translateX(-50%);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(200,240,255,0.75), rgba(160,225,255,0.15) 80%, rgba(160,225,255,0));
  opacity: 0; transition: opacity .18s ease;
}
.gx-flyer-ufo.beam .gx-flyer-beam { opacity: 1; }
/* Navi rising into the light (the dock keeps its home offset) */
#rn-navi-dock.gx-beamed { opacity: 0; transform: translateX(-50%) translateX(44px) translateY(-46px) scale(.4) !important; transition: transform .4s ease-in, opacity .4s ease-in !important; }
body.gx-hopping #rn-navi-dock, body.gx-hopping #plaza-entry, body.gx-hopping .gx-ufo { visibility: hidden !important; }

/* the corner: language · ABOUT · QUEST, the same quiet pixel words */
#home-quest {
  padding: 0 2px 5px; text-decoration: none;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.06em; line-height: 1;
  color: rgba(168,196,228,0.6); border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
#home-quest:hover { color: #eaf3ff; border-bottom-color: rgba(150,200,255,0.6); }
.gx-lang { position: relative; display: inline-block; padding: 0 2px 5px; cursor: pointer; }
.gx-lang-t { font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.06em; line-height: 1; color: rgba(168,196,228,0.6); transition: color .2s ease; }
.gx-lang:hover .gx-lang-t { color: #eaf3ff; }
.gx-lang select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }

/* the old stage retires here: no big props, no floating Navi (she rides the
   ship in Explore now) */
body.gx-page #rn-navi-dock, body.gx-page #plaza-entry,
body.gx-realm #plaza-entry, body.gx-realm #plz-chest, body.gx-realm #plz-station, body.gx-realm #rn-navi-dock { display: none !important; }
/* …except on the guest's open sky: there Navi stands with her radio again,
   at the top, as on the live homepage (the room starts below her) */
body.gx-page.gx-tune:not(.gx-inside) #rn-navi-dock { display: flex !important; }
body.gx-page.gx-tune:not(.gx-inside) #plaza-entry { display: inline-flex !important; }
body.gx-page.gx-tune:not(.gx-inside) #plaza-view { padding-top: 176px; }
body.gx-page #plaza-entry .plz-entry-lbl, body.gx-page #plaza-entry .plz-rx-mark { display: none; }   /* no words: the radio is enough */
/* Realm: Asterism is the NaviStars only — the TUNED | NAVISTARS switch goes
   (TUNED lives in Explore now: you tune in to galaxies, not people) */
/* (Joey's prototype hid Asterism's NAVISTARS · TUNED switch here. Zo 2026-11-02, ruling C: TUNED stays
   where it is in Realm — only inside a Galaxy is there no TUNED, just the Pass. Rule removed.) */
/* Airwaves is just the open sky now: following a PERSON is gone everywhere
   (the TUNE IN chip, the SCAN/TUNED lever, the manage list) */
/* ruling C: the airwaves keep TUNE IN and the SCAN · TUNED lever in Realm (gx-realm rules removed);
   inside a galaxy they are hidden further down (body.gx-inside), where there is only the Pass */
body.gx-page #plaza-view #plz-tune, body.gx-page .pbo-tune { display: none !important; }
@media (min-width: 860px) and (orientation: landscape) {
  body.gx-realm .plz-stage { width: min(1060px, 94vw); left: 0; }
  body.gx-realm .plz-tuner { width: min(860px, 92vw); left: 0; }
}

/* ══ THE REALM DRAWER — the top menu folded in (rows driven by galaxies.js) ══ */
.ncp-nav-drawer button.ncp-nav-link { width: 100%; background: none; border: none; text-align: left; cursor: pointer; font-family: var(--font-sans); font-size: 13.5px; line-height: inherit; letter-spacing: inherit; }   /* same face as the link rows */
.gx-nav-badge {
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 8px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #f5c542; color: #241a04; font-family: var(--font-pixel); font-size: 7.5px; font-weight: 400;
}
.gx-nav-badge[hidden] { display: none; }
.gx-nav-end { margin-left: auto; }
/* stars waiting: a gold dot on the menu button itself */
.gx-ham-dot {
  position: absolute; top: 7px; right: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: #f5c542; box-shadow: 0 0 0 2px rgba(10,16,28,0.9), 0 0 10px rgba(245,197,66,0.8);
  animation: gxAir 2.4s ease-in-out infinite;
}
.gx-ham-dot[hidden] { display: none; }
body.ncp-nav-open .gx-ham-dot { display: none; }
/* the room below the menu, for every scene */
body.gx-page #plaza-view, body.gx-realm #plaza-view { padding-top: var(--gx-top); }
body.gx-realm .plz-rig { top: var(--gx-top); }

/* ══ ABOUT LINC — a side sheet ═════════════════════════════════════════ */
#gx-about {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 430; width: min(420px, 92vw);
  padding: 30px 30px 40px; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(10,16,30,0.97); border-left: 1px solid rgba(150,190,225,0.18);
  box-shadow: -24px 0 60px rgba(0,0,0,0.45);
  transform: translateX(104%); transition: transform .32s cubic-bezier(.2,.8,.3,1);
}
#gx-about.on { transform: none; }
.gx-about-x {
  position: absolute; top: 16px; right: 18px; width: 32px; height: 32px; cursor: pointer;
  background: none; border: 1px solid rgba(150,190,225,0.22); border-radius: 8px;
  color: #cfe0f2; font-size: 18px; line-height: 1;
}
.gx-about-x:hover { border-color: rgba(150,190,225,0.5); }
.gx-about-kick { margin: 24px 0 10px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.26em; color: #7fc3ff; }
.gx-about-kick:first-of-type { margin-top: 6px; }
#gx-about h2 { font-family: var(--font-pixel); font-size: 13px; line-height: 1.7; color: #eef4fc; font-weight: 400; }
/* Joey 11-03 A2: "Make your thing a Galaxy." — a lead and a few real Galaxies (tap to step in) */
.gx-about-lead { margin: 14px 0 0; font-family: var(--font-sans); font-size: 14px; line-height: 1.6; color: rgba(205,218,238,0.86); }
.gx-about-words { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 22px; }
.gx-about-words[hidden] { display: none; }
.gx-about-words button { padding: 6px 11px; cursor: pointer; border-radius: 999px; border: 1px solid rgba(127,195,255,0.35); background: rgba(24,60,110,0.25); font-family: var(--font-mono); font-size: 11.5px; color: #cfe6ff; }
.gx-about-words button:hover { border-color: rgba(127,195,255,0.75); color: #fff; }
.gx-about-rules { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; }
.gx-about-rules li { position: relative; padding-left: 16px; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55; color: rgba(205,218,238,0.86); }
.gx-about-rules li::before { content: '✦'; position: absolute; left: 0; top: 0; font-size: 9px; color: #7fc3ff; }
.gx-about-rules b { color: #eef4fc; font-weight: 600; }
.gx-about-more { display: inline-block; margin-top: 28px; font-family: var(--font-pixel); font-size: 8.5px; color: rgba(168,196,228,0.75); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 4px; }
.gx-about-more:hover { color: #eaf3ff; border-bottom-color: rgba(150,200,255,0.6); }

/* ══ EXPLORE — the orbit ═══════════════════════════════════════════════ */
#gx-field {
  position: fixed; inset: 0; z-index: 150;
  display: flex; flex-direction: column;
  padding: var(--gx-top) 2vw 22px;
  transition: transform .5s cubic-bezier(.62,.04,.38,1), opacity .5s ease;
}
/* the camera leans into the island you chose (origin set in JS) */
#gx-field.gx-push { transform: scale(2.6); opacity: 0; pointer-events: none; }
#gx-field.gx-snap { transition: none !important; }
body.gx-inside #gx-field, body.gx-tune #gx-field { visibility: hidden; pointer-events: none; }
/* Realm: the orbit is the EXPLORE scene (body.gx-on); the station room only
   shows inside a galaxy there, and on TUNE it is the whole sky */
body.gx-realm:not(.gx-on) #gx-field { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s .3s; }
body.gx-realm.gx-on:not(.gx-inside) #plaza-view { opacity: 0 !important; visibility: hidden; pointer-events: none !important; }
body:not(.gx-inside) #gx-bar { display: none; }
body.gx-realm.rn-grid-open #gx-field, body.ncp-nav-open #gx-field { opacity: 0; pointer-events: none; }
body.sky-open #gx-field { opacity: 0 !important; pointer-events: none !important; }

.gx-orbit { position: relative; flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1180px; margin: 0 auto; touch-action: pan-y; }
/* first paint lands straight in the scene (no slide in from home) */
body.gx-boot, body.gx-boot * { transition: none !important; }
.gx-ring .gx {
  position: absolute; z-index: 2;
  transform: translate(-50%, -50%) scale(var(--ts, 1));
}
/* the orbit only animates once it has been seated (no sweep-in on load) */
.gx-ring.gx-ready .gx { transition: left .75s cubic-bezier(.45,.05,.3,1), top .75s cubic-bezier(.45,.05,.3,1), opacity .5s ease; }
.gx-ring .gx.gx-away { opacity: 0; pointer-events: none; }
/* 11-05 E-1: a room too small for the orbit (fit() decides) — Navi on top, every
   galaxy below in a scrolling grid, never squeezed into each other */
#gx-field.gx-flow-on { overflow-y: auto; overscroll-behavior: contain; }
.gx-orbit.gx-flow { display: flex; flex-direction: column; align-items: center; gap: 26px; flex: none; padding-top: 22px; }
.gx-flow .gx-core { position: relative; left: auto; top: auto; transform: none; width: min(460px, 100%); }
.gx-flow .gx-ring { display: grid; grid-template-columns: repeat(auto-fill, 240px); justify-content: center; gap: 22px 28px; width: 100%; padding: 4px 0 60px; }
.gx-flow .gx-ring .gx { position: relative; left: auto !important; top: auto !important; transform: none; }
.gx-flow .gx-ring .gx.gx-away { opacity: 1; pointer-events: auto; }
.gx-flow .gx-orbit-nav { display: none !important; }
/* the galaxies Navi found glow gold for a while */
.gx.gx-hit .gx-scene { filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45)) drop-shadow(0 0 18px rgba(245,197,66,0.55)); animation: gxHit 1.6s ease-in-out 3; }
.gx.gx-hit .gx-name { color: #f5d88c; }
@keyframes gxHit { 50% { transform: translate(-50%, calc(-50% - 6px)); } }

/* the middle: Navi on her ship, one question, one field */
.gx-core {
  position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%);
  width: min(460px, 40%); display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.gx-core-top { display: flex; align-items: center; gap: 18px; }
.gx-ufo { position: relative; flex: none; width: 168px; height: 77px; animation: gxBob 3.2s ease-in-out infinite; }
.gx-ufo-navi { position: absolute; left: 58px; top: -4px; width: 52px; height: 52px; image-rendering: pixelated; }
.gx-ufo-ship { position: absolute; inset: 0; width: 100%; height: 100%; }
.gx-ufo::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -10px; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,0.45), transparent); }
@keyframes gxBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.gx-ufo.gx-ufo-go { animation: gxGo .7s cubic-bezier(.3,.7,.3,1); }
@keyframes gxGo { 0% { transform: none; } 35% { transform: translateX(14px) rotate(-6deg); } 70% { transform: translateX(-4px) rotate(2deg); } 100% { transform: none; } }
.gx-ask-q { font-family: var(--font-pixel); font-size: 12px; line-height: 1.6; color: #eef4fc; text-shadow: 0 2px 10px rgba(0,0,0,0.6); }
.gx-ask { display: flex; align-items: stretch; gap: 12px; width: 100%; }
.gx-ask input {
  flex: 1 1 auto; min-width: 0; padding: 12px 4px; border: none; border-bottom: 2px solid rgba(150,190,225,0.28);
  background: none; outline: none; color: #eef4fc; font-family: var(--font-sans); font-size: 16px;
  transition: border-color .2s ease;
}
.gx-ask input::placeholder { color: rgba(168,190,220,0.45); }
.gx-ask input:focus { border-bottom-color: #f5c542; }
.gx-ask input::-webkit-search-cancel-button { filter: invert(.7); }
.gx-go {
  flex: none; cursor: pointer; padding: 0 22px; border: none; border-radius: 10px;
  background: linear-gradient(180deg,#f7d873,#e9b83f); color: #241a04;
  font-family: var(--font-sans); font-size: 20px; font-weight: 700; line-height: 1;   /* just →, set large (Joey 11-03) */
  box-shadow: 0 3px 0 #8f6416, 0 0 18px rgba(245,197,66,0.22);
  transition: transform .12s ease, box-shadow .12s ease;
}
.gx-go:hover { transform: translateY(1px); box-shadow: 0 2px 0 #8f6416, 0 0 24px rgba(245,197,66,0.35); }
/* Navi's answer */
.gx-reply {
  width: 100%; padding: 14px 14px 10px; border-radius: 14px; text-align: left;
  background: rgba(10,16,30,0.9); border: 1px solid rgba(150,190,225,0.2);
  box-shadow: 0 18px 40px rgba(0,0,0,0.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: gxReply .3s ease both;
}
@keyframes gxReply { from { opacity: 0; transform: translateY(6px); } }
.gx-reply[hidden] { display: none; }
.gx-reply-t { margin-bottom: 8px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(196,210,232,0.82); }
.gx-reply-g {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 8px; cursor: pointer; text-align: left;
  background: none; border: none; border-top: 1px solid rgba(150,190,225,0.1); border-radius: 6px;
}
.gx-reply-g:hover { background: rgba(150,190,225,0.07); }
.gx-reply-n { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-family: var(--font-pixel); font-size: 9px; line-height: 1.5; color: #eef4fc; }
.gx-reply-n em { font-style: normal; font-family: var(--font-sans); font-size: 12px; color: rgba(196,210,232,0.7); }
.gx-reply-g b { flex: none; font-family: var(--font-mono); font-size: 10px; font-weight: 400; color: #7fc3ff; }
.gx-reply-own { margin-top: 6px; padding: 6px 8px; background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; color: rgba(245,216,140,0.75); }
.gx-reply-own:hover { color: #f5d88c; }
.gx-reply-new {
  margin: 4px 0 6px; padding: 11px 16px; cursor: pointer; border: 1px solid rgba(245,197,66,0.55); border-radius: 10px;
  background: rgba(245,197,66,0.08); color: #f5c542; font-family: var(--font-pixel); font-size: 9.5px;
}
.gx-reply-new:hover { background: rgba(245,197,66,0.15); }
/* turning the orbit */
.gx-orbit-nav { position: absolute; left: 50%; bottom: 0; z-index: 3; transform: translateX(-50%); display: flex; gap: 14px; }
.gx-orbit-nav[hidden] { display: none; }
.gx-turn {
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: rgba(10,16,28,0.5); border: 1px solid rgba(200,216,240,0.22); color: #cfe0f2; font-size: 17px; line-height: 1;
  transition: border-color .15s ease, background .15s ease;
}
.gx-turn:hover { border-color: rgba(220,232,250,0.5); background: rgba(14,22,38,0.75); }

/* ── one galaxy ── */
.gx {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: none; border: none; padding: 4px 6px 10px; cursor: pointer; color: inherit;
  -webkit-tap-highlight-color: transparent;
  width: 240px; box-sizing: border-box;   /* 11-05 E-1: every tile the same size, whatever its words */
}
.gx:focus-visible { outline: none; }
.gx-stage { position: relative; display: block; width: 224px; height: 162px; }
.gx-scene {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 192px; height: 156px; transform: translate(-50%, -50%);
  image-rendering: pixelated;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
  transition: transform .45s cubic-bezier(.3,.7,.3,1), filter .45s ease;
}
.gx:hover .gx-scene, .gx:focus-visible .gx-scene, .gx.gx-peek .gx-scene {
  transform: translate(-50%, calc(-50% - 6px));
  filter: drop-shadow(0 16px 26px rgba(0,0,0,0.5)) drop-shadow(0 0 18px rgba(127,195,255,0.14));
}

/* stations as dust — one mote each, drifting; busy galaxies twinkle faster */
.gx-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gx-dust i {
  position: absolute; display: block; background: #a8d4ff; opacity: .5;
  animation: gxDust 6s ease-in-out infinite;
}
.gx-active .gx-dust i { background: #d2e9ff; }
@keyframes gxDust {
  0%, 100% { transform: translateY(0); opacity: .28; }
  50%      { transform: translateY(-4px); opacity: .85; }
}

/* a peek at what's inside: three stations fan up from behind the scene */
.gx-cards { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.gx-card {
  position: absolute; left: 50%; top: 50%;
  width: 54px; height: 68px; margin: -34px 0 0 -27px;
  border-radius: 5px; overflow: hidden; padding: 7px 6px; text-align: left;
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(14px) scale(.86);
  transition: transform .42s cubic-bezier(.3,.7,.3,1), opacity .3s ease;
}
.gx-card b { display: block; width: 14px; height: 2px; margin-bottom: 5px; }
.gx-card em {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  font-style: normal; font-family: var(--font-mono); font-size: 6.5px; line-height: 1.3; letter-spacing: .02em;
}
.gx:hover .gx-card, .gx:focus-visible .gx-card, .gx.gx-peek .gx-card { opacity: 1; }
.gx:hover .gx-card-0, .gx:focus-visible .gx-card-0, .gx.gx-peek .gx-card-0 { transform: translate(-60px, -66px) rotate(-9deg); }
.gx:hover .gx-card-1, .gx:focus-visible .gx-card-1, .gx.gx-peek .gx-card-1 { transform: translate(0, -80px); transition-delay: .04s; }
.gx:hover .gx-card-2, .gx:focus-visible .gx-card-2, .gx.gx-peek .gx-card-2 { transform: translate(60px, -66px) rotate(9deg); transition-delay: .08s; }

/* the words: name, one line, how many */
/* 11-05 E-1: the words take fixed room whatever their length or language — name at
   most two lines, the line under it at most two, cut with … */
.gx-name {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; max-width: 228px; height: 34px; margin-top: 2px;
  font-family: var(--font-pixel); font-size: 9.5px; line-height: 1.65; letter-spacing: 0.02em;
  color: #eef4fc;
  text-shadow: 0 1px 8px rgba(0,0,0,0.6);
}
.gx-name-t {
  min-width: 0; overflow: hidden; overflow-wrap: anywhere; text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
/* Chinese / Japanese / Korean: a font that has the letters, as large as the pixel English reads */
.gx-name.gx-cjk {
  font-family: 'Noto Sans SC', 'Noto Sans CJK SC', 'PingFang SC', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Microsoft YaHei', 'Meiryo', 'Malgun Gothic', 'Apple SD Gothic Neo', var(--font-sans), sans-serif;
  font-size: 13px; font-weight: 700; line-height: 1.3; letter-spacing: 0.03em;
}
.gx-flag { flex: none; width: 8px; height: 11px; margin-top: 2px; image-rendering: pixelated; }
.gx-name-t .gx-flag { display: inline-block; vertical-align: -1px; margin: 0 7px 0 0; }   /* rides the first line, so a two-line name stays centred */
.gx-blurb {
  width: 100%; max-width: 214px; height: 2.9em; margin-top: 6px; overflow: hidden;
  font-family: var(--font-sans); font-size: 12.5px; line-height: 1.45; color: rgba(196,210,232,0.78);
  text-wrap: balance; overflow-wrap: anywhere; text-shadow: 0 1px 6px rgba(4,8,18,0.55);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.gx-count {
  margin-top: 6px; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em;
  color: rgba(140,205,255,0.8); text-shadow: 0 1px 6px rgba(4,8,18,0.55);
}


/* ══ A GALAXY'S PAGE ═══════════════════════════════════════════════════ */
body.gx-page #plaza-view { transform: scale(.96); }
body.gx-page #plaza-view.plz-in { transform: none; }
#gx-bar {
  display: flex; align-items: center; gap: 16px;
  width: min(1060px, 94vw); margin-bottom: 10px; min-height: 26px;
}
.gx-back {
  flex: none; background: none; border: none; cursor: pointer; padding: 4px 2px;
  font-family: var(--font-pixel); font-size: 8.5px; letter-spacing: 0.06em;
  color: rgba(168,196,228,0.72); transition: color .2s ease;
}
.gx-back:hover, .gx-back:focus-visible { color: #eaf3ff; outline: none; }
.gx-where { display: inline-flex; align-items: center; gap: 10px; min-width: 0; padding-left: 16px; border-left: 1px solid rgba(140,180,235,0.2); }
.gx-mini { display: block; width: 48px; height: 39px; margin: -8px 0; }
/* the galaxy Navi holds, in place of the radio */
.gx-icon { image-rendering: pixelated; }
#gx-bar.gx-all .gx-where-scene { display: none; }
.gx-where-name {
  font-family: var(--font-pixel); font-size: 8.5px; color: #eef4fc;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gx-where-n { flex: none; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.14em; color: rgba(127,195,255,0.72); }

/* the bar names the galaxy only when the page header isn't there */
body.gx-wallmode #gx-bar .gx-where { visibility: hidden; }
.gx-detail { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4vw; padding: 18px 0 30px; }
.gx-detail-art { position: relative; padding: 0; border: none; background: none; cursor: pointer; }
.gx-big { display: block; width: 288px; height: 234px; image-rendering: pixelated; filter: drop-shadow(0 16px 30px rgba(0,0,0,0.5)); }
.gx-detail-art::after {   /* a soft halo, brighter while stirred */
  content: ''; position: absolute; inset: 10% 8%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(127,195,255,0.12), transparent); transition: opacity .3s ease;
}
.gx-detail-art.gx-stirred { animation: gxStir .9s ease; }
@keyframes gxStir { 0%, 100% { transform: none; } 20% { transform: rotate(-2deg) scale(1.03); } 45% { transform: rotate(2deg) scale(1.03); } 70% { transform: rotate(-1deg); } }
.gx-detail-info { min-width: 0; max-width: 560px; }
.gx-detail-kick { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.26em; color: #7fc3ff; }
.gx-detail-name { margin-top: 12px; font-family: var(--font-pixel); font-size: clamp(18px, 2.2vw, 26px); line-height: 1.4; font-weight: 400; color: #f2f6fc; }
.gx-detail-line { margin-top: 8px; font-family: var(--font-sans); font-size: 16px; color: #7fc3ff; }
.gx-detail-story { margin-top: 14px; font-family: var(--font-sans); font-size: 14.5px; line-height: 1.65; color: rgba(205,218,238,0.84); }
.gx-detail-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 22px; margin-top: 18px; }
.gx-detail-meta dt { font-family: var(--font-pixel); font-size: 8px; line-height: 2; color: rgba(160,180,210,0.6); }
.gx-detail-meta dd { font-family: var(--font-sans); font-size: 13.5px; color: #e7eefb; }
.gx-land {
  margin-top: 22px; padding: 12px 18px; cursor: pointer; border-radius: 10px; border: none;
  background: linear-gradient(180deg,#f7d873,#e9b83f); color: #241a04;
  font-family: var(--font-pixel); font-size: 9.5px; letter-spacing: 0.03em;
  box-shadow: 0 3px 0 #8f6416, 0 0 18px rgba(245,197,66,0.2);
}
.gx-land:hover { transform: translateY(1px); box-shadow: 0 2px 0 #8f6416, 0 0 24px rgba(245,197,66,0.32); }
.gx-sec { margin: 6px 0 14px; font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.06em; color: #7fc3ff; }
.gx-other {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; cursor: pointer;
  background: rgba(10,16,28,0.45); border: 1px dashed rgba(127,195,255,0.35); border-radius: 8px;
  font-family: var(--font-sans); font-size: 13px; color: #cfe6ff; transition: border-color .15s ease, background .15s ease;
}
.gx-other:hover { border-style: solid; border-color: rgba(127,195,255,0.7); background: rgba(24,90,140,0.2); }
.gx-other .gx-flag { margin-top: 0; }

/* ── INSIDE A GALAXY: just browsing ─────────────────────────────────────
   Nothing from the airwaves comes in — no dial, no frequency, no search, no
   SCAN/TUNED, no TUNE IN. What's left: the page, its name, Share, ‹ › on the
   canvas edges, and a row of marks along the top (one per station). The
   canvas takes the room the tuner gave back. */
.gx-segs { display: none; }
body.gx-inside .gx-segs {
  display: flex; gap: 4px;
  position: absolute; left: 14px; right: 14px; top: 10px; z-index: 7;
}
.gx-segs button {
  flex: 1 1 0; min-width: 0; height: 14px; padding: 5px 0; border: none; background: none; cursor: pointer;
}
.gx-segs i {
  display: block; height: 3px; border-radius: 2px;
  background: rgba(220,232,250,0.28);
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  transition: background .25s ease;
}
.gx-segs .gx-seen i { background: rgba(220,232,250,0.62); }
.gx-segs .gx-now i { background: #eef5ff; box-shadow: 0 0 8px rgba(127,195,255,0.6), 0 1px 3px rgba(0,0,0,0.35); }
.gx-segs button:hover i { background: rgba(238,245,255,0.85); }

body.gx-inside #plaza-view .plz-tuner,
body.gx-inside #plaza-view .plz-find,
body.gx-inside #plaza-view .plz-rig,
body.gx-inside #plaza-view .plz-tune,
body.gx-inside #plaza-view .plz-freq-toast,
body.gx-inside #plaza-view .plz-swipe { display: none !important; }
/* the ‹ › discs, on every screen size (they were phones-only) */
body.gx-inside #plaza-view .plz-step-m {
  display: flex; align-items: center; justify-content: center;
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 44px; height: 44px; padding: 0; cursor: pointer; border-radius: 50%;
  background: rgba(10,16,28,0.5); border: 1px solid rgba(200,216,240,0.25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #cfe0f2; font-size: 20px; line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
body.gx-inside #plaza-view .plz-step-prev { left: 14px; }
body.gx-inside #plaza-view .plz-step-next { right: 14px; }
body.gx-inside #plaza-view .plz-step-m:hover { color: #fff; border-color: rgba(220,232,250,0.55); background: rgba(14,22,38,0.72); }
/* room for the canvas now that the tuner is gone (+ the Realm's lever flank is given back) */
/* ── THE WALL — everything at once: a waterfall of the stations' real pages ── */
#gx-wall { display: none; }
body.gx-inside.gx-wallmode #gx-wall {
  display: block; flex: 1 1 auto; min-height: 0; width: min(1060px, 94vw);
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 2px 0 40px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent);
}
#gx-wall::-webkit-scrollbar { display: none; }
.gx-wall-in { columns: 5 168px; column-gap: 12px; }
body.gx-inside.gx-wallmode #plaza-view .plz-stage { display: none; }
body.gx-inside.gx-wallmode #plaza-view { padding-bottom: 0; }
.gx-tile {
  position: relative; display: block; width: 100%; margin: 0 0 12px; padding: 0;
  break-inside: avoid; overflow: hidden; cursor: pointer;
  border-radius: 14px; border: 1px solid rgba(150,190,225,0.18);
  background: linear-gradient(160deg, #111a30, #0b1222);
  box-shadow: 0 10px 26px rgba(0,0,0,0.35);
  animation: gxTileIn .55s cubic-bezier(.2,.7,.3,1) both;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
  -webkit-tap-highlight-color: transparent;
}
@keyframes gxTileIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* a little of the pass in every station card: notched where a stub would
   tear off, a faint perforation across — the caption lives below it */
.gx-tile {
  --tear: radial-gradient(circle 6px at 0 calc(100% - 44px), transparent 5.5px, #000 6px),
          radial-gradient(circle 6px at 100% calc(100% - 44px), transparent 5.5px, #000 6px);
  -webkit-mask: var(--tear); -webkit-mask-composite: source-in; mask: var(--tear); mask-composite: intersect;
}
.gx-tile::after {
  content: ''; position: absolute; left: 9px; right: 9px; bottom: 44px; z-index: 2; pointer-events: none;
  border-top: 1px dashed rgba(255,255,255,0.22); mix-blend-mode: difference;
}
.gx-tile:hover, .gx-tile:focus-visible {
  outline: none; transform: translateY(-3px);
  border-color: rgba(127,195,255,0.55);
  box-shadow: 0 14px 32px rgba(0,0,0,0.45), 0 0 18px rgba(24,176,245,0.22);
}
/* the page itself, rendered at twice the tile's width and scaled down —
   so it lays out like a real (narrow) screen, not a squashed desktop */
.gx-tile-pg { position: absolute; inset: 0; pointer-events: none; }
.gx-tile-pg iframe { display: block; width: 200%; height: 200%; border: 0; transform: scale(.5); transform-origin: 0 0; }
.gx-tile-pg::after {   /* a faint inner edge, so light pages don't bleed into the sky */
  content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
/* no caption at rest — the page IS the tile (it already carries its title).
   Who made it slides up on hover; touch screens go without. */
.gx-tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 9px;
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  background: linear-gradient(to bottom, transparent, rgba(5,9,18,0.88));
  opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease;
}
.gx-tile-cap b { font: 700 11.5px/1.3 var(--font-sans); color: #eef4fc; }
.gx-tile-cap em { font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; color: rgba(168,196,228,0.8); }
.gx-tile:hover .gx-tile-cap, .gx-tile:focus-visible .gx-tile-cap { opacity: 1; transform: none; }
@media (hover: none) { .gx-tile-cap { display: none; } }

/* the two-way switch at the end of the bar */
.gx-modes { display: inline-flex; gap: 2px; margin-left: auto; padding: 3px; border-radius: 9px; border: 1px solid rgba(150,190,225,0.18); background: rgba(8,13,24,0.45); }
.gx-modes button {
  display: flex; align-items: center; justify-content: center; width: 28px; height: 22px; padding: 0;
  border: none; border-radius: 6px; background: none; cursor: pointer; color: rgba(168,196,228,0.55);
  transition: color .2s ease, background .2s ease;
}
.gx-modes button svg { width: 11px; height: 11px; }
.gx-modes button:hover { color: #eaf3ff; }
.gx-modes button.on { color: #eef5ff; background: rgba(24,120,190,0.35); }
@media (max-width: 640px) {
  .gx-wall-in { columns: 2; column-gap: 8px; }
  .gx-tile { margin-bottom: 8px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) { .gx-tile { animation: none; } }

/* bottom clearance = the weather orb's corner (44px orb + inset) — Share must never sit on it */
body.gx-inside #plaza-view { padding-bottom: 84px; }
@media (min-width: 860px) and (orientation: landscape) {
  body.gx-inside .plz-stage { width: min(1060px, 94vw); left: 0; }
}
body.gx-inside .plz-acts .plz-share { width: auto; }


/* ══ PHONES — Navi and the question on top; the galaxies a swipeable row ══ */
/* ✦ CREATE — Realm's Explore scenes, beside the menu button; gold = your own */
#gx-create { position: fixed; top: 18px; right: 74px; z-index: 419; display: none; }
body.gx-realm.plaza-open.gx-on #gx-create { display: flex; align-items: center; gap: 14px; }
body.ncp-nav-open #gx-create, body.sky-open #gx-create { display: none !important; }
.gx-create-btn {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 13px 18px; border: none; border-radius: 12px;
  background: linear-gradient(180deg,#f7d873,#e9b83f); color: #241a04;
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: 0.06em; line-height: 1;
  box-shadow: 0 3px 0 #8f6416, 0 0 22px rgba(245,197,66,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.gx-create-btn:hover { transform: translateY(1px); box-shadow: 0 2px 0 #8f6416, 0 0 30px rgba(245,197,66,0.45), inset 0 1px 0 rgba(255,255,255,0.35); }

/* the "?" beside Navi's question — About LinC, a small explainer */
.gx-about-ico {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: 2px;
  width: 19px; height: 19px; margin-left: 10px; padding: 0; border-radius: 50%; cursor: pointer;
  background: none; border: 1px solid rgba(150,190,225,0.38); color: rgba(190,210,235,0.75);
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1;
  transition: border-color .15s ease, color .15s ease;
}
.gx-about-ico:hover { border-color: rgba(200,226,255,0.8); color: #eef4fc; }
/* Realm: EXPLORE · TUNED, above the scene */
.gx-view { position: relative; z-index: 4; flex: none; display: flex; justify-content: center; gap: 30px; margin: 0 auto 8px; }
.gx-view button {
  position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; cursor: pointer;
  background: none; border: none; font-family: var(--font-pixel); font-size: 8.5px; letter-spacing: 0.06em; color: rgba(168,196,228,0.55);
}
.gx-view button:hover { color: #dbe8f6; }
.gx-view button.on { color: #eef4fc; }
.gx-view button.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: #18B0F5; box-shadow: 0 0 8px rgba(24,176,245,0.8); }
.gx-view i { font-style: normal; font-family: var(--font-mono); font-size: 9px; color: #7fc3ff; }
/* ══ TUNED — browse the galaxies you keep (no search, no orbit) ══════════ */
body.gx-tn-on .gx-orbit { display: none; }
.gx-tn { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 1180px; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 14px 0 40px; }
.gx-tn::-webkit-scrollbar { display: none; }
.gx-tn[hidden] { display: none; }
.gx-tn-row { display: flex; justify-content: center; gap: 18px; overflow-x: auto; padding: 6px 4px 14px; scrollbar-width: none; }
.gx-tn-row::-webkit-scrollbar { display: none; }
.gx-tn-g { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 156px; padding: 0; background: none; border: none; cursor: pointer; }
.gx-tn-face {
  position: relative; display: block; width: 156px; height: 128px; border-radius: 16px;
  background: radial-gradient(circle at 50% 60%, rgba(24,60,110,0.35), rgba(8,14,26,0.4) 75%);
  border: 1px solid rgba(150,190,225,0.16); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.gx-tn-cv { position: absolute; left: 50%; top: 50%; width: 144px; height: 117px; transform: translate(-50%, -50%); image-rendering: pixelated; }
.gx-tn-g:hover .gx-tn-face { border-color: rgba(150,190,225,0.42); transform: translateY(-2px); }
/* each face is a pass: notched at the tear, a stub with its number below */
.gx-tn-face {
  --tear: radial-gradient(circle 7px at 0 calc(100% - 26px), transparent 6.5px, #000 7px),
          radial-gradient(circle 7px at 100% calc(100% - 26px), transparent 6.5px, #000 7px);
  height: 154px !important; border-radius: 12px !important;
  -webkit-mask: var(--tear); -webkit-mask-composite: source-in; mask: var(--tear); mask-composite: intersect;
}
.gx-tn-face .gx-tn-cv { top: calc(50% - 13px); }
.gx-tn-stub {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 10px;
  border-top: 1px dashed rgba(245,197,66,0.35); background: rgba(245,197,66,0.06);
}
.gx-tn-stub em { font-style: normal; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.22em; color: rgba(245,216,140,0.65); }
.gx-tn-stub b { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; color: #f5c542; }
/* 11-06 X-1: a faint PASS tag in the top-left corner of every face (KEEPSAKE on a dissolved one) */
.gx-tn-tag { position: absolute; top: 9px; left: 9px; z-index: 1; padding: 3px 7px; border-radius: 5px; background: rgba(8,12,22,0.55);
  border: 1px solid rgba(245,216,140,0.28); font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.22em; color: rgba(245,216,140,0.7); }
.gx-tn-gone .gx-tn-tag { color: rgba(205,218,238,0.6); border-color: rgba(205,218,238,0.25); }
.gx-tn-g.on .gx-tn-face { border-color: rgba(245,197,66,0.7); box-shadow: 0 0 0 3px rgba(245,197,66,0.12), 0 12px 28px rgba(0,0,0,0.35); }
/* lit: a station landed since you looked — the cool dot (the old TUNED light) */
.gx-tn-dot { position: absolute; top: 9px; right: 9px; width: 9px; height: 9px; border-radius: 50%; background: #5fd8ff; box-shadow: 0 0 0 2px rgba(10,16,28,0.85), 0 0 10px rgba(95,216,255,0.85); animation: gxAir 2.6s ease-in-out infinite; }
.gx-tn-name { max-width: 156px; font-family: var(--font-pixel); font-size: 8px; line-height: 1.6; color: rgba(205,218,238,0.8); text-align: center; text-wrap: balance; }
.gx-tn-g.on .gx-tn-name { color: #f2f6fc; }
.gx-tn-shelf { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(150,190,225,0.12); }
.gx-tn-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.gx-tn-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.gx-tn-title span { font-family: var(--font-pixel); font-size: 12px; line-height: 1.5; color: #f2f6fc; }
.gx-tn-title em { font-style: normal; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; color: rgba(127,195,255,0.8); }
.gx-tn-acts { display: flex; gap: 10px; }
/* 11-06 X-2: Enter Galaxy → stands out — blue outline, light blue fill */
.gx-tn-open {
  padding: 10px 14px; cursor: pointer; border-radius: 10px; background: rgba(95,190,255,0.16);
  border: 1px solid rgba(110,195,255,0.85); color: #e6f4ff; font-family: var(--font-pixel); font-size: 8.5px;
  box-shadow: 0 0 14px rgba(95,190,255,0.18);
}
.gx-tn-open:hover { background: rgba(95,190,255,0.26); border-color: #8fd2ff; }
.gx-tn-cards { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; }
.gx-tn-card.gx-tile { flex: 0 0 176px; width: 176px; aspect-ratio: 3 / 4; margin: 0; }
.gx-tn-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 12vh; font-family: var(--font-mono); font-size: 12px; color: rgba(185,201,226,0.65); }
.gx-tn-go { padding: 11px 16px; cursor: pointer; border-radius: 10px; border: 1px solid rgba(245,197,66,0.55); background: rgba(245,197,66,0.08); color: #f5c542; font-family: var(--font-pixel); font-size: 9px; }
/* a galaxy's page: TUNE IN beside Land */
.gx-detail-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
.gx-detail-acts .gx-land { margin-top: 0; }
.gx-ticket { flex: none; width: 15px; height: 10px; image-rendering: pixelated; }
.gx-view .gx-ticket { width: 13px; height: 8px; margin-right: 2px; }
/* GET GALAXY PASS — a ticket-shaped button (notched both sides), gold outline */
.gx-tune-g {
  --notch: radial-gradient(circle 5px at 0 50%, transparent 4.5px, #000 5px) left / 51% 100% no-repeat,
           radial-gradient(circle 5px at 100% 50%, transparent 4.5px, #000 5px) right / 51% 100% no-repeat;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 20px; cursor: pointer; border-radius: 6px;
  background: linear-gradient(180deg, rgba(245,197,66,0.16), rgba(245,197,66,0.06)); border: 1px solid rgba(245,197,66,0.7); color: #f5c542;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: 0.04em;
  -webkit-mask: var(--notch); mask: var(--notch);
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.gx-tune-g:hover { background: linear-gradient(180deg, rgba(245,197,66,0.3), rgba(245,197,66,0.12)); color: #ffe08a; transform: translateY(-1px); }
.gx-tune-g.on { background: rgba(245,197,66,0.1); border-style: dashed; color: #f5d88c; }
.gx-tune-g.gx-got { animation: gxGot .7s cubic-bezier(.3,1.6,.5,1); }
@keyframes gxGot { 0% { transform: scale(.8); filter: brightness(2); } 100% { transform: none; filter: none; } }
.gx-tn-return {
  padding: 10px 6px; cursor: pointer; background: none; border: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: rgba(168,196,228,0.55);
}
.gx-tn-return:hover { color: #dbe8f6; text-decoration: underline; text-underline-offset: 4px; }

/* ══ THE PASS — issued with a small ceremony (#gx-issue), kept in My Galaxy Passes ══ */
#gx-issue {
  position: fixed; inset: 0; z-index: 620; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: rgba(4,8,18,0); cursor: pointer; perspective: 900px;
  transition: background .4s ease;
}
#gx-issue.in { background: rgba(4,8,18,0.62); }
#gx-issue.out { background: rgba(4,8,18,0); }
.gx-pass {
  --cut: 104px;   /* the stub's width: the perforation sits here */
  --tear: radial-gradient(circle 9px at calc(100% - var(--cut)) 0, transparent 8.5px, #000 9px),
          radial-gradient(circle 9px at calc(100% - var(--cut)) 100%, transparent 8.5px, #000 9px);
  position: relative; display: flex; width: min(520px, 92vw); height: 200px; overflow: hidden;
  border-radius: 14px; color: #eef4fc;
  background: linear-gradient(135deg, #1a2a4c 0%, #0f1a33 55%, #1b1a36 100%);
  box-shadow: inset 0 0 0 1px rgba(245,197,66,0.45), inset 0 1px 0 rgba(255,255,255,0.12);
  -webkit-mask: var(--tear); -webkit-mask-composite: source-in; mask: var(--tear); mask-composite: intersect;
  opacity: 0; transform: translateY(70px) rotateX(62deg) scale(.9); transform-origin: 50% 100%;
  transition: transform .62s cubic-bezier(.2,1.25,.4,1), opacity .35s ease;
}
#gx-issue.in .gx-pass { opacity: 1; transform: none; }
#gx-issue.out .gx-pass { opacity: .25; transition: transform .52s cubic-bezier(.6,.05,.4,1), opacity .52s ease; }
.gx-pass-art { flex: none; position: relative; width: 168px; background: radial-gradient(circle at 50% 60%, rgba(40,90,150,0.45), rgba(8,14,26,0.2) 75%); }
.gx-pass-cv { position: absolute; left: 50%; top: 50%; width: 192px; height: 156px; transform: translate(-50%, -50%); image-rendering: pixelated; }
.gx-pass-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 18px 16px 18px 18px; }
.gx-pass-kick { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.22em; color: #f5c542; }
.gx-pass-name { font-family: var(--font-pixel); font-size: 13px; line-height: 1.55; text-wrap: balance; }
.gx-pass-meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; margin: 2px 0 0; }
.gx-pass-meta dt { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em; color: rgba(168,196,228,0.6); }
.gx-pass-meta dd { margin: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: #dfe9f7; text-transform: uppercase; }
.gx-pass-stub {
  flex: none; position: relative; width: var(--cut); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  border-left: 2px dashed rgba(245,197,66,0.4); background: rgba(245,197,66,0.06);
}
.gx-pass-stub em { font-style: normal; font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.2em; color: rgba(245,216,140,0.7); }
.gx-pass-stub b { font-family: var(--font-pixel); font-size: 12px; font-weight: 400; color: #f5c542; }
.gx-pass-stub span { margin: 8px 0 22px; font-family: var(--font-mono); font-size: 7.5px; line-height: 1.6; letter-spacing: 0.14em; text-align: center; color: rgba(205,218,238,0.6); }
/* the stamp: a gold ✦ seal thumped onto the stub */
.gx-pass-stamp {
  position: absolute; right: 6px; bottom: 8px; width: 46px; height: 46px; border-radius: 50%;   /* low on the stub, clear of the number */
  border: 2px solid rgba(245,197,66,0.85); box-shadow: inset 0 0 0 4px rgba(245,197,66,0.18);
  opacity: 0; transform: scale(2.4) rotate(-30deg); pointer-events: none;
}
.gx-pass-stamp::after { content: '\2726'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: 19px; color: rgba(245,197,66,0.9); }
#gx-issue.stamped .gx-pass-stamp { opacity: .9; transform: rotate(-14deg); transition: transform .3s cubic-bezier(.5,1.8,.6,1), opacity .12s ease; }
#gx-issue.stamped .gx-pass { animation: gxThump .3s ease; }
@keyframes gxThump { 40% { transform: scale(.985) translateY(2px); } }
/* light runs across the pass once (the hologram) */
.gx-pass-holo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.0) 38%, rgba(200,236,255,0.28) 46%, rgba(255,226,150,0.22) 52%, transparent 62%);
  transform: translateX(-100%);
}
#gx-issue.shine .gx-pass-holo { transform: translateX(100%); transition: transform 1s cubic-bezier(.4,.1,.3,1); }
.gx-issue-line { margin: 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: rgba(230,214,170,0); transition: color .4s ease .5s; }
#gx-issue.in .gx-issue-line { color: rgba(230,214,170,0.85); }
#gx-issue.out .gx-issue-line { color: transparent; transition-delay: 0s; }

@media (max-width: 760px) {
  .gx-tn-face { height: 122px !important; }
  .gx-pass { --cut: 78px; height: 164px; }
  .gx-pass-art { width: 104px; }
  .gx-pass-cv { width: 128px; height: 104px; }
  .gx-pass-main { padding: 14px 10px 14px 12px; gap: 8px; }
  .gx-pass-name { font-size: 10.5px; }
  .gx-pass-stub b { font-size: 9px; }
  .gx-tn-row { justify-content: flex-start; gap: 12px; }
  .gx-tn-g { width: 118px; }
  .gx-tn-face { width: 118px; height: 96px; border-radius: 12px; }
  .gx-tn-cv { width: 96px; height: 78px; }
  .gx-tn-name { max-width: 118px; font-size: 7px; }
  .gx-tn-card.gx-tile { flex-basis: 138px; width: 138px; }
  .gx-detail-acts { justify-content: center; }
  #gx-create { top: 18px; right: 72px; }
  .gx-create-btn { padding: 11px 13px; font-size: 8.5px; }
  /* phones: the sky's globe takes the bottom-left — the hop sits opposite */
  /* phones: well clear of the bottom edge (and of iOS's toolbar / home bar) */
  #gx-hop { left: auto; right: 16px; bottom: calc(34px + env(safe-area-inset-bottom, 0px)); transform: scale(.85); transform-origin: 100% 100%; }
  /* phones: the corner keeps ABOUT + ENTER only (the rest ran under the logo) */
  #home-top .gx-lang, #home-top #home-quest, #home-top #home-sep { display: none; }
  body.gx-page.gx-tune:not(.gx-inside) #plaza-view { padding-top: calc(6vh + 126px); }
  .gx-lang-t, #home-quest { font-size: 7.5px; }
  #gx-field { overflow-y: auto; overscroll-behavior: contain; }
  .gx-orbit { display: flex; flex-direction: column; gap: 22px; flex: none; }
  .gx-core { position: relative; left: auto; top: auto; transform: none; width: 100%; padding: 6px 4px 0; }
  .gx-ufo { width: 126px; height: 58px; }
  .gx-ufo-navi { left: 43px; top: -3px; width: 40px; height: 40px; }
  .gx-ask-q { font-size: 10px; }
  /* phones: every galaxy, two by two, scrolling down (no orbit to turn) */
  .gx-ring { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 2vw; padding: 6px 0 70px; }
  .gx-ring > .gx:nth-child(even) { margin-top: 28px; }
  .gx-ring .gx { position: relative; left: auto !important; top: auto !important; transform: none; }
  .gx-ring .gx.gx-away { opacity: 1; pointer-events: auto; }
  .gx-orbit-nav { display: none !important; }
  .gx-stage { width: 160px; height: 128px; }
  .gx-scene { width: 144px; height: 117px; }
  .gx-card { width: 44px; height: 56px; margin: -28px 0 0 -22px; padding: 5px; }
  .gx-card em { font-size: 5.5px; }
  .gx.gx-peek .gx-card-0 { transform: translate(-44px, -52px) rotate(-9deg); }
  .gx.gx-peek .gx-card-1 { transform: translate(0, -62px); }
  .gx.gx-peek .gx-card-2 { transform: translate(44px, -52px) rotate(9deg); }
  /* 11-05 E-1: phones keep only the name and how many Stations */
  .gx { width: 100%; max-width: 176px; }
  .gx-name { font-size: 8px; max-width: 164px; height: 28px; gap: 5px; }
  .gx-name.gx-cjk { font-size: 12px; }
  .gx-blurb { display: none; }
  .gx-where-scene { display: none; }
  .gx-detail { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 10px; padding-top: 6px; }
  .gx-big { width: 192px; height: 156px; }
  .gx-detail-kick { justify-content: center; }
  .gx-detail-meta { justify-content: center; text-align: left; }
  #gx-about { padding: 24px 22px 36px; }
}

/* ── still, for anyone who asked for less motion ── */
@media (prefers-reduced-motion: reduce) {
  .gx-dust i, .gx-ufo, .gx-hop-radio svg, .gx-hop-ship svg, .gx-hop-ship i { animation: none !important; }
  #gx-field, .gx-scene, .gx-card, .gx-ring .gx, #gx-about { transition: none !important; }
  .gx.gx-hit .gx-scene, .gx-detail-art.gx-stirred { animation: none !important; }
  body.gx-page #plaza-view { transform: none; }
}
.gx-tile-cap em.gx-also { color: #f5d88c; }

/* ══ inside a galaxy: ALL · MINE (only when some are yours) · an empty galaxy ══ */
.gx-sec-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.gx-whose { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; border: 1px solid rgba(150,190,225,0.2); background: rgba(8,13,24,0.45); }
.gx-whose button { padding: 5px 10px; border: none; border-radius: 7px; background: none; cursor: pointer; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; color: rgba(185,201,226,0.6); }
.gx-whose button:hover { color: #e7eefb; }
.gx-whose button.on { background: rgba(24,120,190,0.35); color: #eef5ff; }
#gx-wall.gx-only-mine .gx-tile:not([data-mine]) { display: none; }
/* beta fix: scoped to the notice — body carries the same class name while a galaxy is empty
   (galaxies.js buildWall), and this rule used to centre and box the whole page */
div.gx-wall-empty { margin: 4px 0 30px; padding: 26px 18px; border-radius: 14px; border: 1px dashed rgba(150,190,225,0.25); text-align: center; font-family: var(--font-mono); font-size: 12px; color: rgba(185,201,226,0.7); }
body.gx-wall-empty .gx-modes { visibility: hidden; }
/* a pass to a dissolved galaxy: a keepsake — greyed, its note instead of stations */
.gx-tn-gone .gx-tn-face { filter: grayscale(1) brightness(.75); }
.gx-tn-gone .gx-tn-stub b, .gx-tn-gone .gx-tn-stub em { color: rgba(205,218,238,0.6); }
.gx-tn-gone .gx-tn-name { color: rgba(205,218,238,0.5); }
.gx-tn-keep { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.gx-tn-keep .gx-tn-title em { color: rgba(238,163,163,0.8); }
.gx-tn-keep p { max-width: 520px; margin: 0; font-family: var(--font-sans); font-size: 13.5px; line-height: 1.6; color: rgba(205,218,238,0.75); }
.gx-tn-keep .gx-tn-return { padding-left: 0; }


/* ══ Joey 11-03 (phase A) — copied from his css/galaxies.css ══ */
/* the radio is an easter egg of the front page only: inside a galaxy it's gone */
#gx-hop { transition: opacity .3s ease, visibility .3s; }
body.gx-inside #gx-hop { opacity: 0; visibility: hidden; pointer-events: none; }

/* a galaxy's title line: what it is (left) · Manage (its host only) and Share (right) */
.gx-detail-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
.gx-detail-tools { display: flex; align-items: center; gap: 8px; flex: none; }
.gx-share-g {
  display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; cursor: pointer; border-radius: 9px;
  background: rgba(10,16,28,0.45); border: 1px solid rgba(150,190,225,0.28); color: #cfe0f5; transition: border-color .15s ease, color .15s ease;
}
.gx-share-g svg { width: 15px; height: 15px; }
.gx-share-g:hover { border-color: rgba(150,190,225,0.7); color: #fff; }
.gx-manage {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; text-decoration: none; white-space: nowrap;
  background: rgba(245,197,66,0.1); border: 1px solid rgba(245,197,66,0.5); color: #f5d88c;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em;
}
.gx-manage-who { color: rgba(245,216,140,0.75); font-weight: 400; }
.gx-manage:hover { background: rgba(245,197,66,0.18); color: #ffe39a; }
@media (max-width: 760px) {
  .gx-detail-top { width: 100%; }
  .gx-manage-who { display: none; }   /* phones: just "Manage ↗" */
}

/* news in the galaxies you hold a pass to (Asterism's twin, in the signal blue) — ruling G */
.gx-view button.gx-has-new { position: relative; }
.gx-view button.gx-has-new::before {
  content: ''; position: absolute; top: -2px; right: -10px; width: 7px; height: 7px; border-radius: 50%;
  background: #5fd8ff; box-shadow: 0 0 0 2px rgba(10,16,28,0.85), 0 0 10px rgba(95,216,255,0.85); animation: gxAir 2.6s ease-in-out infinite;
}
.gx-nav-badge-g { background: #5fd8ff; color: #04202a; }
#gx-newtoast {
  position: fixed; top: 20px; left: 50%; z-index: 430; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis;
  background: rgba(8,22,34,0.82); border: 1px solid rgba(95,216,255,0.45); color: #d8f4ff;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 26px rgba(0,0,0,0.4), 0 0 18px rgba(95,216,255,0.15);
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em;
  opacity: 0; transform: translateX(-50%) translateY(-12px); transition: opacity .4s ease, transform .4s cubic-bezier(.3,.8,.3,1);
}
#gx-newtoast.show { opacity: 1; transform: translateX(-50%); }
#gx-newtoast i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #5fd8ff; box-shadow: 0 0 10px rgba(95,216,255,0.9); }
body.ncp-nav-open #gx-newtoast, body.gx-about-open #gx-newtoast { display: none; }
@media (max-width: 760px) { #gx-newtoast { top: 70px; font-size: 9px; letter-spacing: 0.1em; } }

@media (max-width: 760px) { #gx-about { padding-top: 78px; } }   /* clear of the menu button's row */
/* beta fix (11-04): the open sheet sits above the menu button and + NEW GALAXY, so its × is reachable */
body.gx-about-open #gx-about { z-index: 470; }

/* ══ phase B (11-04): a Galaxy's own page, framed under the platform row ══ */
body.gx-inside.gx-wallmode #gx-wall.gx-staged {
  display: flex; flex-direction: column; gap: 10px; width: min(1240px, 96vw); overflow: hidden; padding: 0 0 12px;
  -webkit-mask-image: none; mask-image: none;
}
.gx-stage-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gx-stage-acts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gx-stage-acts .gx-tune-g { margin: 0; }
.gx-stage-box { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 16px; overflow: hidden; border: 1px solid rgba(150,190,225,0.18); background: rgba(6,10,20,0.6); }
.gx-stage-frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.gx-stage-wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: rgba(185,201,226,0.6); }
@media (max-width: 760px) {
  .gx-stage-bar { justify-content: center; }
  .gx-stage-acts { justify-content: center; width: 100%; }
}
.gx-stage-acts .gx-land { margin-top: 0; }
/* part 3: the phase-A page's way into Navi's chat */
.gx-ask-navi { height: 40px; padding: 0 16px; cursor: pointer; border-radius: 10px; border: 1px solid rgba(127,195,255,0.5); background: rgba(24,120,190,0.2); color: #cfe6ff; font-family: var(--font-mono); font-size: 12px; font-weight: 700; }
.gx-ask-navi:hover { background: rgba(24,120,190,0.32); }

/* ══ feedback 11-04 §1: a Galaxy's page is the whole screen ═════════════════════════
   P-1 it covers the Realm (pill, + NEW GALAXY, menu, the sky orb) · P-2 the platform
   layer: ‹ Explore Galaxies top-left, the host's Manage ↗ top-right, nothing else ·
   P-4 a Station opens full screen over it with one ‹ Back in the Explore spot. */
body.gx-inside.gx-wallmode #gx-wall {
  position: fixed; inset: 0; z-index: 600; width: auto; margin: 0; padding: 76px max(16px, calc((100vw - 1060px) / 2)) 48px;
  overflow-y: auto; background: radial-gradient(120% 80% at 50% 0%, #142240 0%, #0a1222 55%, #070b16 100%);
  -webkit-mask-image: none; mask-image: none;
}
body.gx-inside.gx-wallmode #gx-wall.gx-staged { display: block; width: auto; padding: 0; overflow: hidden; background: #070b16; }
#gx-wall.gx-staged .gx-stage-box { position: absolute; inset: 0; border: 0; border-radius: 0; background: none; }
#gx-plat { display: none; }
body.gx-inside #gx-plat { display: block; }
body.gx-st-open #gx-plat { display: none; }
.gx-plat-btn {
  position: fixed; top: 14px; z-index: 605; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px;
  border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: rgba(8,13,24,0.72); border: 1px solid rgba(200,216,240,0.32); color: #e7eefb;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.gx-plat-btn:hover, .gx-plat-btn:focus-visible { border-color: rgba(245,197,66,0.6); color: #f5d97a; outline: none; }
.gx-plat-explore, .gx-stfs-back { left: 14px; }
/* the host's corner: ✦ Refine (RF-3) · Manage ↗ */
.gx-plat-host { position: fixed; top: 14px; right: 14px; z-index: 605; display: flex; gap: 8px; align-items: flex-start; }
.gx-plat-host[hidden], .gx-plat-host [hidden] { display: none !important; }
.gx-plat-host .gx-plat-btn { position: static; }
.gx-plat-manage { border-color: rgba(245,197,66,0.5); color: #f5d88c; }
.gx-plat-refine { color: #f5d88c; }
.gx-rf-pop { position: absolute; top: 44px; right: 0; width: min(340px, calc(100vw - 28px)); box-sizing: border-box; padding: 12px; border-radius: 14px;
  background: rgba(8,13,24,0.94); border: 1px solid rgba(245,197,66,0.35); box-shadow: 0 14px 34px rgba(0,0,0,0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.gx-rf-k { margin: 0 0 8px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; color: rgba(185,201,226,0.7); }
.gx-rf-in { display: block; width: 100%; box-sizing: border-box; resize: none; padding: 9px 11px; border-radius: 10px; border: 1px solid rgba(150,190,225,0.3);
  background: rgba(4,8,18,0.7); color: #eef4fc; font: 15px/1.45 var(--font-sans, system-ui, sans-serif); outline: none; }
.gx-rf-in:focus { border-color: rgba(127,195,255,0.7); }
.gx-rf-st { min-height: 0; margin: 8px 0 0; font: 12.5px/1.45 var(--font-sans, system-ui, sans-serif); color: rgba(205,221,242,0.8); }
.gx-rf-st:empty { display: none; }
.gx-rf-undo { padding: 0; border: 0; background: none; color: #f5d88c; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.gx-rf-go { display: block; width: 100%; margin-top: 10px; height: 38px; border-radius: 10px; border: 0; cursor: pointer; background: linear-gradient(#f7d470, #e9b93a); color: #1a1406;
  font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: 0.04em; }
.gx-rf-go span { font-weight: 600; opacity: 0.7; }
.gx-rf-go:disabled { opacity: 0.5; cursor: default; }
/* Refine at work: the page dims in place */
.gx-stage-box.gx-refining .gx-stage-frame { filter: brightness(0.45) saturate(0.7); transition: filter .3s ease; pointer-events: none; }
.gx-plat-manage .gx-manage-ph { display: none; }
@media (max-width: 600px) {
  .gx-plat-manage .gx-manage-who { display: none; }
  .gx-plat-manage .gx-manage-ph { display: inline; }   /* phones: ✦ Manage ↗ */
}
#gx-stfs { position: fixed; inset: 0; z-index: 610; background: #05070f; opacity: 0; transition: opacity .2s ease; }
#gx-stfs.on { opacity: 1; }
#gx-stfs iframe { display: block; width: 100%; height: 100%; border: 0; }
.gx-stfs-back { z-index: 611; }
/* phase A page (no Navi-built page yet): no view toggle, no ALL · MINE */
body.gx-inside #gx-wall .gx-whose { display: none; }

/* ══ feedback 11-04 §6: the Realm is two modules — Galaxies and Stations ══════════════
   Stations = AIRWAVES · TUNED · NAVISTARS (R-2), the same row as EXPLORE · MY GALAXY
   PASSES and at its height; the old TUNED · NAVISTARS row, the SCAN / TUNED lever and
   the footer invite are gone (R-3/R-6); + NEW STATION where + NEW GALAXY is; CLAIM TO
   YOUR WALLET on NaviStars only, left of it (R-5). */
#gx-stabs { display: none; position: fixed; top: var(--gx-top); left: 0; right: 0; z-index: 419; margin: 0; }
body.gx-mod-stations #gx-stabs { display: flex; }
body.gx-inside #gx-stabs, body.ncp-nav-open #gx-stabs, body.sky-open #gx-stabs, body.rn-grid-open #gx-stabs, body.rn-claiming #gx-stabs { display: none; }
body.gx-mod-stations #rn-class { display: none; }
body.gx-realm #rn-make { display: none !important; }
body.gx-realm .plz-rig { display: none !important; }
body.gx-mod-stations #plaza-view { padding-top: calc(var(--gx-top) + 40px); }
body.gx-mod-stations #rn-tr { display: none; }
body.gx-mod-stations #gx-create { display: flex; align-items: center; gap: 14px; }
#gx-create .gx-new-station { display: none; text-decoration: none; }
body.gx-mod-stations #gx-create .gx-new-galaxy { display: none; }
body.gx-mod-stations #gx-create .gx-new-station { display: inline-flex; }
#gx-create #rlm-claim-pill { display: none; }
body.gx-st-navistars #gx-create #rlm-claim-pill { display: block; }
@media (max-width: 760px) {
  #gx-create .gx-cb-t { display: none; }   /* R-6: phones show just + */
  #gx-create .gx-create-btn { min-width: 40px; justify-content: center; font-size: 12px; }
  #gx-create { gap: 8px; }
}
/* 11-09 report: a quiet ⚑ top-right for anyone but the host; the box reuses the Refine pop */
.gx-plat-rep { position: fixed; top: 14px; right: 14px; z-index: 605; }
.gx-plat-rep[hidden], .gx-plat-rep [hidden] { display: none !important; }
.gx-plat-rep .gx-plat-btn { position: static; width: 36px; padding: 0; justify-content: center; font-size: 14px; color: rgba(231,238,251,0.75); }
.gx-plat-signin { display: none !important; }
body.gx-guest .gx-plat-rep { display: flex; gap: 8px; }
body.gx-guest .gx-plat-rep[hidden] { display: none !important; }
body.gx-guest .gx-plat-signin { display: inline-flex !important; width: auto; padding: 0 14px; font-size: 11px; color: #f5c542; border-color: rgba(245,197,66,0.5); }
.gx-rep-why { display: grid; gap: 7px; margin: 0 0 10px; }
.gx-rep-why label { display: flex; align-items: center; gap: 8px; cursor: pointer; font: 14px/1.35 var(--font-sans, system-ui, sans-serif); color: #e7eefb; }
.gx-rep-why input { accent-color: #f5c542; margin: 0; }
.gx-rep-fine { margin: 9px 0 0; font: 11.5px/1.45 var(--font-sans, system-ui, sans-serif); color: rgba(185,201,226,0.6); }
#gx-gone { position: fixed; left: 50%; top: 72px; z-index: 700; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 11px 18px; border-radius: 999px;
  background: rgba(8,13,24,0.9); border: 1px solid rgba(200,216,240,0.3); color: #e7eefb; font: 14px/1.4 var(--font-sans, system-ui, sans-serif);
  opacity: 0; transform: translate(-50%, -8px); transition: opacity .35s ease, transform .35s ease; pointer-events: none; }
#gx-gone.show { opacity: 1; transform: translate(-50%, 0); }

/* ── 11-10 (Ellen, Zo): a GUEST on the Galaxies (body.gx-guest, set by account.js) ──
   Nothing of an account shows — no name, no credits, no wallet, no NaviStars waiting —
   and SIGN IN sits where the nameplate was, top left. */
body.gx-guest #rlm-id, body.gx-guest .rn-cr-wrap, body.gx-guest #rlm-claim-pill, body.gx-guest #rn-navi-dock, body.gx-guest .gx-ham-dot { display: none !important; }
#gx-signin {
  display: inline-flex; align-items: center; height: 30px; padding: 0 14px;
  background: rgba(12,20,38,0.5); border: 1px solid rgba(245,197,66,0.45); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  font-family: var(--font-pixel); font-size: 9.5px; letter-spacing: 0.06em; color: #f5c542;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: border-color 0.25s ease, background 0.25s ease;
}
#gx-signin:hover, #gx-signin:focus-visible { background: rgba(245,197,66,0.12); border-color: #f5c542; }