/* Hermes — 3D stage, projected labels and immersive HUD (mobile-first) */

.hermes-word { color: #f4feff; text-shadow: 0 0 28px rgba(0, 230, 255, .45); }

#coverScreen { transition: opacity .45s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
#coverScreen.is-leaving { opacity: 0; transform: scale(1.04); pointer-events: none; }
#coverScreen[hidden] { display: none !important; }

.gl-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.gl-fallback { display: grid; place-items: center; padding: 2rem; text-align: center; color: #a1a1aa; font-size: 12px; }

.net-ui { transition: opacity .5s ease, transform .5s ease; }
body.is-diving .net-ui { opacity: 0; pointer-events: none; }
body.is-diving aside.net-ui { transform: translateX(-100%); }

/* Projected labels */
.label-layer { position: absolute; inset: 0; pointer-events: none; z-index: 10; transition: opacity .3s ease; }
.label-layer.is-hidden { opacity: 0; }
.gl-label {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
  white-space: nowrap; will-change: transform, opacity; transition: opacity .25s ease;
  text-shadow: 0 1px 8px rgba(0,0,0,.9), 0 0 2px rgba(0,0,0,.9);
}
.gl-label.is-hidden { opacity: 0; }
.gl-label__badge {
  font: 700 8px/1 'JetBrains Mono', monospace; letter-spacing: .08em; padding: 2px 5px; border-radius: 4px;
  color: var(--tone); border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
  background: rgba(8,10,16,.7);
}
.gl-label__title { font: 700 10px/1.2 'Orbitron', sans-serif; letter-spacing: .06em; color: #f4f4f5; text-transform: uppercase; }
.gl-label__sub { font: 400 9px/1.2 'JetBrains Mono', monospace; color: #8c93a8; }
.gl-label.is-focus .gl-label__title { color: #fff; text-shadow: 0 0 12px var(--tone), 0 1px 8px #000; }
.gl-label.is-focus .gl-label__badge { background: color-mix(in srgb, var(--tone) 25%, #080a10); color: #fff; }
.gl-label--below .gl-label__badge { order: -1; }

/* Network stats + hint */
.stats-strip {
  position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 20; display: flex; gap: 6px; overflow-x: auto;
  scrollbar-width: none; padding: 6px; border-radius: 14px;
  background: rgba(10,12,20,.55); border: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(12px);
}
.stats-strip::-webkit-scrollbar { display: none; }
.stat { flex: 0 0 auto; display: flex; flex-direction: column; padding: 4px 10px; border-radius: 10px; background: rgba(255,255,255,.03); }
.stat span { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: #71717a; }
.stat strong { font-size: 13px; color: #fff; }
.live-dot { width: 6px; height: 6px; border-radius: 9999px; background: #34d399; box-shadow: 0 0 8px #34d399; animation: pulse 2s infinite; }
.dive-hint {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 78px; z-index: 20; display: none;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #71717a; white-space: nowrap;
}

/* Immersive HUD */
.dive-hud { position: absolute; inset: 0; z-index: 30; pointer-events: none; --tone: #00f0ff; --tone2: #ec4899; }
.dive-top, .dive-panel { opacity: 0; transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.2,1); }
.dive-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; transform: translateY(-12px); }
.dive-hud.is-open .dive-top, .dive-hud.is-open .dive-panel { opacity: 1; transform: none; pointer-events: auto; }
.dive-exit {
  padding: 8px 14px; border-radius: 10px; font: 700 11px 'JetBrains Mono', monospace; letter-spacing: .08em; color: #fff;
  background: rgba(10,12,20,.7); border: 1px solid color-mix(in srgb, var(--tone) 60%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tone) 35%, transparent); transition: background .2s;
}
.dive-exit:hover { background: color-mix(in srgb, var(--tone) 30%, #0a0c14); }
.dive-crumb { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #a1a1aa; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.dive-panel {
  position: absolute; left: 8px; right: 8px; bottom: 8px; max-height: 46%; overflow-y: auto; padding: 14px;
  border-radius: 18px; background: rgba(8,10,18,.72); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transform: translateY(24px);
}
.dive-badge { font: 800 9px 'JetBrains Mono', monospace; letter-spacing: .12em; color: var(--tone); text-transform: uppercase; }
.dive-name { font: 900 18px/1.1 'Orbitron', sans-serif; color: #fff; margin-top: 4px; text-shadow: 0 0 18px color-mix(in srgb, var(--tone) 60%, transparent); }
.dive-role { font-size: 11px; color: #a1a1aa; margin-top: 4px; }
.dive-human { font-size: 10px; color: #34d399; margin-top: 6px; }
.dive-section { margin: 14px 0 6px; font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #71717a; }
.dive-steps { display: flex; flex-direction: column; gap: 4px; counter-reset: step; }
.dive-step {
  position: relative; padding: 7px 10px 7px 34px; border-radius: 10px; cursor: pointer; counter-increment: step;
  background: rgba(255,255,255,.025); border: 1px solid transparent; transition: background .3s, border-color .3s;
}
.dive-step::before {
  content: counter(step, decimal-leading-zero); position: absolute; left: 10px; top: 8px;
  font: 700 9px 'JetBrains Mono', monospace; color: #52525b;
}
.dive-step__name { display: block; font-size: 11px; font-weight: 700; color: #d4d4d8; }
.dive-step__desc { display: block; font-size: 10px; color: #71717a; max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.dive-step:hover { background: rgba(255,255,255,.05); }
.dive-step.is-done::before { content: '✓'; color: color-mix(in srgb, var(--tone) 80%, #fff); }
.dive-step.is-active { background: color-mix(in srgb, var(--tone) 14%, transparent); border-color: color-mix(in srgb, var(--tone) 50%, transparent); }
.dive-step.is-active::before { color: var(--tone); }
.dive-step.is-active .dive-step__name { color: #fff; }
.dive-step.is-active .dive-step__desc { max-height: 40px; }
.dive-step.is-human.is-active { --tone: #10b981; }
.dive-log { display: flex; flex-direction: column; gap: 3px; min-height: 54px; font-size: 10px; color: #a1a1aa; }
.dive-log__line { animation: logIn .35s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dive-log__time { color: var(--tone); }
.dive-actions { display: flex; gap: 8px; margin-top: 12px; }
.dive-btn {
  flex: 1; padding: 9px 10px; border-radius: 10px; font: 700 10px 'JetBrains Mono', monospace; letter-spacing: .06em;
  text-transform: uppercase; color: #e4e4e7; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
}
.dive-btn:hover { background: rgba(255,255,255,.1); }
.dive-btn--primary { color: #fff; background: color-mix(in srgb, var(--tone) 70%, #000); border-color: var(--tone); box-shadow: 0 0 18px color-mix(in srgb, var(--tone) 40%, transparent); }

@keyframes logIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

@media (min-width: 768px) {
  .stats-strip { left: 16px; right: auto; bottom: 16px; }
  .dive-hint { display: block; bottom: 26px; left: auto; right: 20px; transform: none; }
  .dive-top { top: 18px; left: 20px; right: auto; }
  .dive-panel { left: auto; top: 18px; right: 18px; bottom: 18px; width: 340px; max-height: none; transform: translateX(24px); }
  .dive-name { font-size: 22px; }
  .gl-label__title { font-size: 11px; }
}