/* HyprGrid hero globe (v13): canvas, HUD, ping tag, ping ring, hint and the no-WebGL texture.
   Colours come from the --globe-* properties; declare them on :root, #hero-stage or #hg-globe to theme the globe.
   Rules use :where() so any page selector overrides them. HUD and tag are plain text: no box, pill or strip.
   globe.js sets .hg-hud[data-side] (l under the centred globe, r under the text column) and --hg-hud-a. Phones have no HUD: any spot would sit on the map. */
@property --globe-land { syntax: '*'; inherits: true; initial-value: rgba(66,80,237,.22); }
@property --globe-land-hi { syntax: '*'; inherits: true; initial-value: #4250ED; }
@property --globe-state { syntax: '*'; inherits: true; initial-value: #4250ED; }
@property --globe-state-hi { syntax: '*'; inherits: true; initial-value: #2B36C9; }
@property --globe-shop { syntax: '*'; inherits: true; initial-value: #D2F801; }
@property --globe-shop-ring { syntax: '*'; inherits: true; initial-value: #15140F; }
@property --globe-body { syntax: '*'; inherits: true; initial-value: rgba(253,251,247,.92); }
@property --globe-rim { syntax: '*'; inherits: true; initial-value: rgba(66,80,237,.20); }
@property --globe-grid { syntax: '*'; inherits: true; initial-value: rgba(21,20,15,.07); }
@property --globe-road { syntax: '*'; inherits: true; initial-value: rgba(21,20,15,.45); }
@property --globe-road-hi { syntax: '*'; inherits: true; initial-value: #4250ED; }
@property --globe-ping { syntax: '*'; inherits: true; initial-value: #4250ED; }

:where(#hg-globe) {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  background: transparent; touch-action: pan-y; cursor: grab;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
:where(#hg-globe.is-grabbing) { cursor: grabbing; }
:where(#hg-globe[data-still]) { cursor: default; }

:where(.hg-hud) {
  position: absolute; z-index: 3; left: max(20px, calc((100% - var(--wrap, 1240px)) / 2)); bottom: 24px;
  display: flex; gap: 16px; margin: 0; padding: 0; background: none; border: 0;
  pointer-events: none; user-select: none; white-space: nowrap; opacity: var(--hg-hud-a, 1);
  font: 500 11px/1 var(--mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .1em; color: rgba(21,20,15,.46); font-variant-numeric: tabular-nums;
  text-shadow: 0 0 3px var(--bg, #F4EEE6), 0 0 8px var(--bg, #F4EEE6);
}
/* once the map holds the left, the HUD sits under the text column on the right */
:where(.hg-hud[data-side="r"]) { left: auto; right: max(24px, calc((100% - var(--wrap, 1240px)) / 2)); }
:where(.hg-hud) b { display: inline-block; margin-left: 6px; font-weight: 500; letter-spacing: .02em; color: var(--ink-hud, #15140F); text-align: left; }
:where(.hg-hud) span:nth-child(-n+2) b { min-width: 8.4ch; }
:where(.hg-hud) span:last-child b { min-width: 3ch; color: var(--globe-state, #4250ED); }

:where(.hg-tag) {
  position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; will-change: transform, opacity;
  margin: 0; padding: 0; background: none; border: 0; white-space: nowrap; pointer-events: none;
  font: 500 10.5px/14px var(--mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .05em; font-variant-numeric: tabular-nums; color: rgba(21,20,15,.7);
  text-shadow: 0 0 3px var(--bg, #F4EEE6), 0 0 7px var(--bg, #F4EEE6);
}
:where(.hg-tag) b { font-weight: 600; color: var(--globe-state, #4250ED); }
:where(.hg-tag)::before {
  content: ''; position: absolute; top: 50%; right: 100%; margin-right: 4px; width: calc(var(--hg-lead, 14px) - 8px); height: 1px;
  background: rgba(21,20,15,.34);
}
:where(.hg-tag[data-side="l"])::before { right: auto; left: 100%; margin: 0 0 0 4px; }
:where(.hg-tag[data-side="b"])::before { top: auto; bottom: 100%; right: auto; left: var(--hg-lx, 50%); margin: 0 0 3px; width: 1px; height: calc(var(--hg-lead, 16px) - 6px); }
:where(.hg-tag[hidden]) { display: none; }

:where(.hg-ring) {
  position: absolute; left: 0; top: 0; z-index: 2; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  box-sizing: border-box; border: 1.5px solid var(--globe-ping, #4250ED); border-radius: 50%;
  opacity: 0; pointer-events: none; will-change: transform, opacity;
}

:where(.hg-hint) {
  position: absolute; z-index: 3; left: 50%; bottom: 24px; transform: translateX(-50%);
  font: 500 10.5px/1 var(--mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: rgba(21,20,15,.46);
  pointer-events: none; transition: opacity .6s ease;
}
:where(.hg-hint[data-off]) { opacity: 0 !important; }

@media (max-width: 700px) {
  :where(.hg-hud) { display: none; }
  :where(.hg-hint) { bottom: 18px; }
}

/* No WebGL: a still dotted sphere in the theme colours */
:where(#hero-stage.no-gl) #hg-globe, :where(#hero-stage.no-gl) .hg-hint, :where(#hero-stage.no-gl) .hg-hud { display: none; }
:where(#hero-stage.no-gl)::before {
  content: ''; position: absolute; left: 50%; top: 78%; width: min(86vw, 460px); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(circle, var(--globe-land-hi, #4250ED) 0 1.1px, transparent 1.7px) 0 0 / 8px 8px,
    radial-gradient(circle, var(--globe-body, rgba(66,80,237,.05)) 0 70%, transparent 70.7%);
  -webkit-mask: radial-gradient(circle at 46% 42%, #000 0 30%, rgba(0,0,0,.28) 64%, rgba(0,0,0,.12) 70.4%, transparent 70.8%);
  mask: radial-gradient(circle at 46% 42%, #000 0 30%, rgba(0,0,0,.28) 64%, rgba(0,0,0,.12) 70.4%, transparent 70.8%);
  box-shadow: inset 0 0 0 1px var(--globe-rim, rgba(66,80,237,.2));
}