:root {
  --bg: #02030a;
  --glass: rgba(8, 10, 18, .2);
  --line: rgba(255,255,255,.08);
  --glowA: rgba(116, 219, 255, .18);
  --glowB: rgba(255, 89, 173, .18);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #08101d 0%, #03040a 40%, #000 100%);
}
body {
  position: relative;
  touch-action: manipulation;
  user-select: none;
}

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #010208;
}

.frame {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.frame-a {
  background:
    radial-gradient(circle at 50% 115%, rgba(255, 125, 60, .12), transparent 35%),
    radial-gradient(circle at 16% 14%, rgba(95, 180, 255, .08), transparent 20%),
    radial-gradient(circle at 84% 18%, rgba(255, 60, 130, .06), transparent 22%);
  mix-blend-mode: screen;
}
.frame-b {
  opacity: .12;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.10) 0px,
    rgba(255,255,255,.10) 1px,
    transparent 2px,
    transparent 4px
  );
}
.frame-c {
  opacity: .09;
  mix-blend-mode: screen;
  background-image:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 60% 55%, rgba(255,255,255,.05) 0 1px, transparent 1.25px),
    radial-gradient(circle at 72% 76%, rgba(255,255,255,.09) 0 1px, transparent 1.35px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
  animation: drift 10s linear infinite;
}

.dock {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 18px;
  z-index: 5;
}

.glyph {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.11), transparent 42%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015)),
    rgba(5, 7, 14, .22);
  box-shadow:
    0 20px 48px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.05),
    0 0 40px rgba(90, 160, 255, .06);
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease;
  overflow: hidden;
}
.glyph:hover,
.glyph:focus-visible {
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(255,255,255,.22);
  outline: none;
}
.glyph:active {
  transform: translateY(1px) scale(.985);
}
.glyph::before,
.glyph::after,
.glyph span,
.glyph span::before,
.glyph span::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
}
.glyph::before {
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.10);
  transform: rotate(12deg);
}
.glyph::after {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.04);
  transform: scale(1.02);
}
.glyph span {
  width: 56px;
  height: 56px;
  filter: drop-shadow(0 0 18px rgba(255,255,255,.12));
}

.pulse span::before,
.pulse span::after {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid rgba(188, 235, 255, .92);
}
.pulse span::after {
  width: 24px;
  height: 24px;
  box-shadow: 0 0 16px rgba(160, 226, 255, .28);
}
.pulse span {
  transform: rotate(0deg);
}
.pulse {
  box-shadow:
    0 20px 48px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 40px rgba(78, 196, 255, .12);
}
.pulse::before {
  background:
    conic-gradient(from 0deg, transparent 0 30%, rgba(132, 217, 255, .14) 40%, transparent 55%, rgba(132,217,255,.18) 70%, transparent 100%);
  border: none;
}

.rift span::before,
.rift span::after {
  clip-path: polygon(50% 0%, 78% 22%, 100% 50%, 78% 78%, 50% 100%, 22% 78%, 0% 50%, 22% 22%);
  border: 3px solid rgba(255, 212, 232, .96);
  width: 54px;
  height: 54px;
}
.rift span::after {
  width: 24px;
  height: 24px;
  transform: rotate(22deg);
  box-shadow: 0 0 16px rgba(255, 168, 214, .24);
}
.rift {
  box-shadow:
    0 20px 48px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 40px rgba(255, 105, 180, .13);
}
.rift::before {
  background:
    conic-gradient(from 180deg, transparent 0 20%, rgba(255, 120, 190, .18) 34%, transparent 45%, rgba(255, 120, 190, .12) 58%, transparent 100%);
  border: none;
}

.glyph:hover::before { animation: ring 2.1s linear infinite; }
.glyph:hover span { animation: breathe 1.35s ease-in-out infinite; }

@keyframes drift {
  0%   { transform: translate3d(0,0,0); }
  50%  { transform: translate3d(-12px,6px,0); }
  100% { transform: translate3d(0,0,0); }
}
@keyframes ring {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes breathe {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}

@media (max-width: 780px) {
  .dock { bottom: 18px; gap: 14px; }
  .glyph { width: 78px; height: 78px; }
  .glyph::before { width: 62px; height: 62px; }
  .glyph span { width: 48px; height: 48px; }
  .pulse span::before,.rift span::before { width: 48px; height: 48px; }
}