/* ═══════════════════════════════════════════════════════════════════════
   Bithereum007 World Hub (game/game.html) — story lobby.
   Builds on css/game-home.css (tokens, world, panels, portal, dock).
   Scoped to body[data-game-hub]. Presentation only.
   ═══════════════════════════════════════════════════════════════════════ */

body[data-game-hub] { padding-bottom: 0; }

/* Loading overlay in the HQ style */
body[data-game-hub] #loading-overlay { background: radial-gradient(circle at 50% 45%, #1a1446, #05041a 70%); }
body[data-game-hub] .loader-ring { border-color: rgba(127, 227, 255, .15); border-top-color: var(--gh-cyan); box-shadow: 0 0 30px rgba(78, 216, 255, .35); }
body[data-game-hub] .loader-text { font-family: var(--gh-font-hud); letter-spacing: .24em; color: var(--gh-cyan-2); font-size: .72rem; margin-top: 18px; }

/* ── TOP BAR ──────────────────────────────────────────────────────────── */
.gx-topbar {
  position: relative; z-index: 30;
  display: flex; align-items: center; gap: 16px;
  max-width: 1720px; margin: 0 auto; padding: 16px clamp(16px, 2.2vw, 34px) 0;
}
.gx-tabs {
  display: flex; gap: 4px; margin: 0 auto; padding: 4px; overflow-x: auto; scrollbar-width: none;
  background: rgba(14, 12, 44, .62); border: 1px solid var(--gh-line);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 100%, 0 100%);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.gx-tabs::-webkit-scrollbar { display: none; }
.gx-tab {
  flex: 0 0 auto; padding: 8px 14px; text-decoration: none; white-space: nowrap;
  font-family: var(--gh-font-label); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gh-muted); transition: color .2s, background .2s;
}
.gx-tab:hover { color: #fff; }
.gx-tab.active { color: var(--gh-ink); background: linear-gradient(135deg, #d8fbff, var(--gh-cyan)); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.gx-topbar-actions { display: inline-flex; gap: 6px; }

/* ── LAYOUT ───────────────────────────────────────────────────────────── */
.gx-hub {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(300px, 370px) minmax(0, 1fr) minmax(300px, 380px);
  grid-template-areas:
    "left    stage   right"
    "regions regions regions"
    "ops     ops     ops";
  gap: 22px 28px;
  max-width: 1720px; margin: 0 auto;
  padding: 18px clamp(16px, 2.2vw, 34px) calc(112px + env(safe-area-inset-bottom, 0px));
  overflow-x: clip;
}
@supports not (overflow: clip) { .gx-hub { overflow-x: hidden; } }
.gx-stage { grid-area: stage; }
.gx-left { grid-area: left; }
.gx-right { grid-area: right; }
.gx-regions { grid-area: regions; }
.gx-ops { grid-area: ops; }
.gx-left, .gx-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* ── STORY STAGE + PORTAL ─────────────────────────────────────────────── */
.gx-stage {
  display: flex; flex-direction: column; align-items: center; gap: 64px; min-width: 0;
  text-align: center; padding-top: 8px;
}
.gx-stage-head { position: relative; display: flex; align-items: center; gap: 18px; max-width: 640px; text-align: left; animation: gh-rise .8s ease both; }
/* Localised shade so the title stays readable over the moon/sky — no box. */
.gx-stage-head::before {
  content: ''; position: absolute; inset: -28px -48px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(5, 4, 20, .62), rgba(5, 4, 20, .3) 60%, transparent);
}
.gx-emblem {
  position: relative; flex: 0 0 auto; width: 88px; height: 88px; padding: 8px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: linear-gradient(160deg, rgba(78, 216, 255, .35), rgba(143, 107, 255, .25));
}
body[data-game-hub] #scene-character-art img, body[data-game-hub] #scene-character-art svg { animation: none; }
body[data-game-hub] #scene-character-art:empty::before { font-size: 2.6rem; }
.gx-stage-copy { min-width: 0; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.gx-title {
  margin: 0; font-family: var(--gh-font-hud); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 2.8vw, 2.6rem); line-height: 1.05; letter-spacing: .05em; color: #fff;
  text-shadow: 0 0 26px rgba(127, 227, 255, .45), 0 3px 0 rgba(0, 0, 0, .4);
  text-wrap: balance;
}
.gx-summary { margin: 0; color: var(--gh-text); opacity: .86; font-size: .98rem; line-height: 1.5; max-width: 52ch; text-shadow: 0 1px 8px rgba(0, 0, 0, .7); }
.gx-status-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px;
  font-family: var(--gh-font-label); font-weight: 700; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gh-gold); background: rgba(255, 210, 63, .1); border: 1px solid rgba(255, 210, 63, .35);
  clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
}
/* The PLAY STORY button wears the shared portal (button reset). */
button.gh-portal { border: 0; padding: 0; background: none; font: inherit; color: #fff; -webkit-appearance: none; appearance: none; }
.gx-portal { --size: clamp(210px, 19vw, 290px); }
.gx-portal .gh-portal-title { font-size: clamp(1.1rem, 1.7vw, 1.5rem); }
/* Region tint on the portal core (data-region-theme set by the existing logic) */
#scene-stage[data-region-theme="south_america"] .gh-portal-glow { background: radial-gradient(circle, rgba(77, 255, 166, .34), rgba(78, 216, 255, .2) 40%, transparent 70%); }
#scene-stage[data-region-theme="europe"] .gh-portal-glow { background: radial-gradient(circle, rgba(189, 147, 249, .4), rgba(78, 216, 255, .18) 40%, transparent 70%); }
#scene-stage[data-region-theme="africa"] .gh-portal-glow { background: radial-gradient(circle, rgba(255, 184, 108, .38), rgba(255, 95, 210, .16) 40%, transparent 70%); }
#scene-stage[data-region-theme="asia"] .gh-portal-glow { background: radial-gradient(circle, rgba(255, 121, 198, .38), rgba(143, 107, 255, .2) 40%, transparent 70%); }
#scene-stage[data-region-theme="oceania"] .gh-portal-glow { background: radial-gradient(circle, rgba(139, 233, 253, .4), rgba(77, 255, 166, .16) 40%, transparent 70%); }
.gx-proceed { min-height: 52px; padding: 0 30px; font-size: .86rem; }
body[data-game-hub] #replay-intro { font-family: var(--gh-font-label); font-weight: 700; letter-spacing: .14em; color: var(--gh-muted); }
body[data-game-hub] #replay-intro:hover { color: var(--gh-cyan-2); }

/* ── CHARACTER PANEL ──────────────────────────────────────────────────── */
.gx-viewer { position: relative; }
body[data-game-hub] #identity-poster-art {
  height: 250px; margin: 0; border: 0; border-radius: 0;
  background: radial-gradient(ellipse at 50% 70%, rgba(78, 216, 255, .18), transparent 65%);
}
.gx-viewer-floor {
  position: absolute; left: 50%; bottom: 14px; width: 62%; height: 26px; transform: translateX(-50%); pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(127, 227, 255, .35), transparent 70%),
    radial-gradient(closest-side, transparent 64%, rgba(127, 227, 255, .7) 68%, transparent 74%);
  animation: gh-floor 4s ease-in-out infinite;
}
.gx-identity-title { margin: 10px 0 2px; font-family: var(--gh-font-hud); font-size: 1rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.gx-identity-copy { margin: 0 0 10px; color: var(--gh-muted); font-size: .86rem; line-height: 1.5; }
.gx-identity-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.gx-customize { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(127, 227, 255, .2); display: flex; flex-direction: column; gap: 12px; }
.gx-sub-head { margin: 0; font-family: var(--gh-font-hud); font-size: .7rem; letter-spacing: .22em; color: var(--gh-cyan-2); }
.gx-field { display: flex; flex-direction: column; gap: 5px; }
.gx-field label { font-family: var(--gh-font-label); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gh-muted); }
.gx-field select, .gx-acquire input {
  min-height: 44px; padding: 0 12px; font: 600 16px var(--gh-font-label); letter-spacing: .03em; color: var(--gh-text); color-scheme: dark;
  background: rgba(4, 3, 16, .65); border: 1px solid rgba(127, 227, 255, .3); border-radius: 0;
}
.gx-field select:focus { outline: none; border-color: var(--gh-cyan); box-shadow: 0 0 0 3px rgba(78, 216, 255, .2); }
.gx-field small { color: var(--gh-dim); font-size: .72rem; line-height: 1.4; }
.gx-wide { width: 100%; }

/* ── PLAYER STATUS ────────────────────────────────────────────────────── */
.gx-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gx-stat {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0;
  background: linear-gradient(135deg, rgba(127, 227, 255, .08), rgba(127, 227, 255, .02));
  border-left: 2px solid rgba(127, 227, 255, .45);
}
.gx-stat-wide { grid-column: 1 / -1; }
.gx-stat-label { font-family: var(--gh-font-label); font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--gh-muted); }
.gx-stat-value { font-family: var(--gh-font-hud); font-weight: 900; font-size: 1.5rem; color: #fff; line-height: 1.1; overflow-wrap: anywhere; }
.gx-stat-text { font-size: 1rem; letter-spacing: .06em; }
.gx-gold { color: var(--gh-gold); text-shadow: 0 0 12px rgba(255, 210, 63, .45); }
.gx-stat-detail { font-size: .7rem; color: var(--gh-dim); }
.gx-stat-hearts { min-height: 32px; display: flex; align-items: center; }
body[data-game-hub] .gx-stat-hearts .bv-hearts-pill { background: transparent !important; border: 0 !important; padding: 2px 0 !important; font-family: var(--gh-font-hud) !important; }

/* ── MISSIONS (rendered by the existing renderGamePage) ───────────────── */
.gx-mission-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.gx-mission-list .op-item {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon info" "icon actions"; gap: 4px 12px; align-items: center;
  padding: 10px 10px 10px 8px; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  background: linear-gradient(90deg, rgba(127, 227, 255, .08), transparent 85%);
  border-left: 2px solid var(--gh-cyan);
  animation: gh-rise .5s ease both;
}
.gx-mission-list .op-item:hover { background: linear-gradient(90deg, rgba(127, 227, 255, .16), transparent 90%); transform: none; }
.gx-mission-list .op-icon {
  grid-area: icon; width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.15rem; border-radius: 0; box-shadow: none; border: 0;
  background: linear-gradient(160deg, rgba(78, 216, 255, .3), rgba(143, 107, 255, .25));
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.gx-mission-list .op-info { grid-area: info; min-width: 0; }
.gx-mission-list .op-title { font-family: var(--gh-font-label); font-weight: 700; font-size: .95rem; letter-spacing: .03em; color: #fff; -webkit-text-stroke: 0; text-shadow: none; }
.gx-mission-list .op-desc { color: var(--gh-muted); font-size: .74rem; line-height: 1.35; }
.gx-mission-list .mission-actions { grid-area: actions; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gx-mission-list .op-status { font-family: var(--gh-font-label); font-weight: 700; font-size: .7rem; letter-spacing: .16em; }
.gx-mission-list .btn, .gx-mission-list .btn-ghost {
  min-height: 32px; padding: 0 14px; border: 0; border-radius: 0; box-shadow: none; text-shadow: none;
  font-family: var(--gh-font-hud); font-weight: 700; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gh-ink); background: linear-gradient(135deg, #d8fbff, var(--gh-cyan));
  clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); cursor: pointer;
}
.gx-mission-list .btn-ghost { background: rgba(127, 227, 255, .14); color: var(--gh-text); }
.gx-mission-list .op-item[data-state="done"] { border-left-color: var(--gh-green); background: linear-gradient(90deg, rgba(77, 255, 166, .08), transparent 85%); }
.gx-mission-list .op-item[data-state="locked"] { border-left-color: var(--gh-dim); opacity: .7; }
.gx-mission-list .op-item[data-state="locked"] .op-icon { filter: grayscale(1); }
.gx-mission-list .op-item[data-state="ready"] .op-icon { animation: gh-icon-pulse 2.6s ease-in-out infinite; }

/* ── CREDITS + LEDGER ─────────────────────────────────────────────────── */
.gx-wallet { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.gx-coin {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center;
  font: 900 1.3rem var(--gh-font-hud); color: #6b4300;
  background: radial-gradient(circle at 32% 28%, #fffbe0 0 10%, transparent 30%), radial-gradient(circle, #ffe680 0 52%, #e9a400 53% 60%, #ffd23f 61% 70%, #b87400 71% 100%);
  box-shadow: 0 0 20px rgba(255, 210, 63, .45);
  animation: gh-coin 6s linear infinite;
}
.gx-wallet-value {
  font-family: var(--gh-font-hud); font-weight: 900; font-size: 1.9rem; line-height: 1;
  background: linear-gradient(180deg, #fff6c8, var(--gh-gold) 55%, var(--gh-gold-2)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gx-wallet-meta { font-size: .74rem; color: var(--gh-muted); }
body[data-game-hub] .gx-feed { max-height: 220px; }
body[data-game-hub] .gx-feed .activity-icon { font-size: .9rem; }

/* ── REGION MAP + FIELD OPS strips ────────────────────────────────────── */
.gx-strip-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.gx-strip-head h2 { margin: 0; font-family: var(--gh-font-hud); font-size: .82rem; letter-spacing: .24em; color: var(--gh-cyan-2); text-shadow: 0 0 12px rgba(78, 216, 255, .4); }
.gx-strip-head span { font-family: var(--gh-font-label); font-weight: 600; font-size: .82rem; color: var(--gh-muted); }
.gx-region-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
body[data-game-hub] .gx-region {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: 150px; padding: 14px;
  text-align: left; cursor: pointer; color: #fff; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; font: inherit;
  background: linear-gradient(0deg, rgba(7, 6, 26, .92) 15%, rgba(7, 6, 26, .2)), var(--map), #141238;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
  outline: 1px solid rgba(127, 227, 255, .2); outline-offset: -1px;
  transition: transform .25s, outline-color .25s, filter .25s;
}
body[data-game-hub] .gx-region:hover { transform: translateY(-4px); outline-color: rgba(127, 227, 255, .6); filter: brightness(1.12); }
body[data-game-hub] .gx-region.active { outline: 2px solid var(--gh-gold); outline-offset: -2px; box-shadow: none; }
body[data-game-hub] .gx-region.active::after {
  content: '✓ HOME'; position: absolute; top: 10px; left: 16px; padding: 2px 8px;
  font: 700 .58rem var(--gh-font-hud); letter-spacing: .14em; color: var(--gh-ink); background: var(--gh-gold);
}
body[data-game-hub] .gx-region strong { font-family: var(--gh-font-label); font-size: 1rem; letter-spacing: .04em; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
body[data-game-hub] .gx-region.active strong { color: var(--gh-gold); }
body[data-game-hub] .gx-region span { font-size: .72rem; line-height: 1.35; color: var(--gh-muted); }
/* Continent tiles: region light + holo grid + landmark glyph (pure CSS; no image downloads) */
.gx-region { --hue: 78, 216, 255; }
.gx-region[data-region-key="north_america"] { --hue: 78, 216, 255;  --glyph: '🗽'; }
.gx-region[data-region-key="south_america"] { --hue: 77, 255, 166;  --glyph: '🌴'; }
.gx-region[data-region-key="europe"]        { --hue: 189, 147, 249; --glyph: '🏰'; }
.gx-region[data-region-key="africa"]        { --hue: 255, 184, 108; --glyph: '🌅'; }
.gx-region[data-region-key="asia"]          { --hue: 255, 121, 198; --glyph: '🏯'; }
.gx-region[data-region-key="oceania"]       { --hue: 139, 233, 253; --glyph: '🏝'; }
body[data-game-hub] .gx-region {
  --map: radial-gradient(120% 90% at 80% 10%, rgba(var(--hue), .45), transparent 60%),
         repeating-linear-gradient(0deg, rgba(var(--hue), .12) 0 1px, transparent 1px 18px),
         repeating-linear-gradient(90deg, rgba(var(--hue), .12) 0 1px, transparent 1px 18px);
}
body[data-game-hub] .gx-region::before {
  content: var(--glyph); position: absolute; right: 8px; top: 2px; font-size: 3.6rem; line-height: 1;
  opacity: .32; filter: saturate(.8) drop-shadow(0 0 18px rgba(var(--hue), .8)); transition: opacity .25s, transform .25s; pointer-events: none;
}
body[data-game-hub] .gx-region:hover::before, body[data-game-hub] .gx-region.active::before { opacity: .6; transform: scale(1.06); }
.gx-regions.gh-flash, .gx-ops.gh-flash { animation: gh-flash 1.1s ease; }

.gx-op-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.gx-op {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px; min-height: 120px; text-align: left;
  font: inherit; color: var(--gh-text); text-decoration: none; cursor: pointer; border: 0;
  background: var(--gh-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  box-shadow: inset 0 0 0 1px rgba(127, 227, 255, .18);
  transition: transform .2s, box-shadow .2s;
}
.gx-op:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(127, 227, 255, .55), 0 0 24px rgba(78, 216, 255, .15); }
.gx-op-icon { width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.15rem; margin-bottom: 4px;
  background: linear-gradient(160deg, rgba(78, 216, 255, .3), rgba(143, 107, 255, .25)); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.gx-op strong { font-family: var(--gh-font-label); font-weight: 700; font-size: .95rem; letter-spacing: .03em; color: #fff; }
.gx-op span:last-child { font-size: .72rem; color: var(--gh-muted); line-height: 1.35; }
.gx-acquire { display: flex; gap: 10px; align-items: end; margin-top: 12px; }

/* ── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .gx-hub {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "stage stage" "left right" "regions regions" "ops ops";
  }
  .gx-region-grid, .gx-op-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .gx-stage { gap: 52px; }
  .gx-topbar { flex-wrap: wrap; padding-top: 12px; gap: 10px; }
  .gx-topbar .gh-brand-text span { display: none; }
  .gx-tabs { order: 3; width: 100%; margin: 0; }
  .gx-topbar-actions { margin-left: auto; }
  .gx-hub {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "stage" "right" "left" "regions" "ops";
    padding: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px)); gap: 16px;
  }
  .gx-stage-head { flex-direction: column; align-items: center; text-align: center; }
  .gx-stage-copy { align-items: center; }
  .gx-portal { --size: min(64vw, 250px); }
  .gx-region-grid, .gx-op-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-game-hub] .gx-region { min-height: 120px; }
  .gx-op { min-height: 0; }
}

/* ── WORLD GATE (js/world-gate.js): charge → dive ─────────────────────── */
.gx-left, .gx-right, .gx-topbar, .gx-regions, .gx-ops, .gx-stage-head, #replay-intro {
  transition: transform .75s cubic-bezier(.6, 0, .4, 1), opacity .6s ease, filter .6s ease;
}
body.gate-charging .gx-left { transform: translateX(-115%) rotateY(18deg); opacity: 0; filter: blur(2px); }
body.gate-charging .gx-right { transform: translateX(115%) rotateY(-18deg); opacity: 0; filter: blur(2px); }
body.gate-charging .gx-topbar { transform: translateY(-160%); opacity: 0; }
body.gate-charging .gx-regions, body.gate-charging .gx-ops { transform: translateY(60px); opacity: 0; }
body.gate-charging .gx-stage-head { transform: translateY(-40px) scale(.94); opacity: 0; }
body.gate-charging #replay-intro { opacity: 0; }
body.gate-charging .gh-dock { transform: translate(-50%, 170%); opacity: 0; transition: transform .7s cubic-bezier(.6, 0, .4, 1), opacity .5s; }
body.gate-charging .gx-left, body.gate-charging .gx-right, body.gate-charging .gx-topbar,
body.gate-charging .gx-regions, body.gate-charging .gx-ops, body.gate-charging .gh-dock { pointer-events: none; }
/* the portal powers up */
body.gate-charging [data-world-anchor].gh-portal { animation: gate-pulse .42s ease-in-out infinite; }
body.gate-charging [data-world-anchor] .gh-portal-rings .r1 { animation-duration: 1.1s; }
body.gate-charging [data-world-anchor] .gh-portal-rings .r2 { animation-duration: .7s; }
body.gate-charging [data-world-anchor] .gh-portal-rings .r3 { animation-duration: 2s; }
body.gate-charging [data-world-anchor] .gh-portal-core::before { animation-duration: 1s; }
body.gate-charging [data-world-anchor] .gh-portal-glow { opacity: 1; filter: blur(2px) brightness(1.6); }
body.gate-charging [data-world-anchor] .gh-portal-sparks i { animation-duration: .9s; opacity: 1; }
body.gate-charging [data-world-anchor] .gh-portal-text { animation: gate-text .4s ease .55s forwards; }
body.gate-charging [data-world-anchor] .gh-portal-text,
body.gate-charging [data-world-anchor] .gh-portal-text * { color: #c9fff0; text-shadow: 0 0 10px #36f39a, 0 0 22px rgba(54, 243, 154, .6); font-family: "JetBrains Mono", ui-monospace, monospace; }
body.gate-charging .gx-proceed[data-world-anchor] { color: #c9fff0; text-shadow: 0 0 10px #36f39a; font-family: "JetBrains Mono", ui-monospace, monospace; }
@keyframes gate-pulse { 50% { transform: scale(1.06); } }
@keyframes gate-text { to { opacity: 0; transform: scale(.8); letter-spacing: .4em; } }
/* the dive: the portal bursts toward the camera and the city falls into
   shadow behind the opening doors (the canvas draws the doors + code). */
body.gate-diving [data-world-anchor].gh-portal { animation: gate-dive .9s cubic-bezier(.6, 0, .8, .2) forwards; }
@keyframes gate-dive { 35% { transform: scale(1.12); opacity: 1; } to { transform: scale(1.9); opacity: 0; filter: brightness(1.8) blur(3px); } }
.gh-world-inner { transition: transform 1.7s cubic-bezier(.55, 0, .45, 1); transform-origin: var(--gate-ox, 50%) var(--gate-oy, 50%); }
body.gate-diving .gh-world-inner { transform: scale(1.16); }
.gh-world::after {
  content: ''; position: absolute; inset: 0; z-index: 40; pointer-events: none;
  background: radial-gradient(circle at var(--gate-ox, 50%) var(--gate-oy, 50%), rgba(3, 11, 26, .25), rgba(3, 11, 26, .8) 60%);
  opacity: 0; transition: opacity 1s ease;
}
body.gate-diving .gh-world::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  body.gate-diving .gx-hub, body.gate-diving .gx-topbar { opacity: 0; transition: opacity .2s; }
}