@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

:root{ --pulse:0; --vh:1vh; }

*{ box-sizing:border-box; }

html, body{ margin:0; padding:0; height:100%; }

body{

  font-family:'Share Tech Mono', monospace;

  color:#b8ffd9;

  background:

    radial-gradient(circle at 50% 45%, rgba(0,255,170,0.10) 0%, rgba(0,0,0,0) 35%),

    radial-gradient(circle at center, #070c10 0%, #020405 70%);

  overflow:hidden;

  overscroll-behavior:none;

  -webkit-text-size-adjust:100%;

  text-size-adjust:100%;

}

.mono{ font-variant-numeric: tabular-nums; }

#lp-field{

  position:relative;

  width:100vw;

  height: calc(var(--vh) * 100);

  overflow:hidden;

  isolation:isolate;

  touch-action: manipulation;

}

/* TOP UI */

#ui-top{

  position:absolute;

  top:10px;

  left:50%;

  transform:translateX(-50%);

  z-index:60;

  text-align:center;

  display:flex;

  flex-direction:column;

  gap:6px;

  pointer-events:none;

  width:min(720px, calc(100vw - 18px));

}

.ui-title{ font-size:12px; letter-spacing:1.8px; opacity:.78; }

/* HUD (compact) */

.hud{

  width:100%;

  padding:8px 8px 7px;

  border:1px solid rgba(0,255,170,0.12);

  background: rgba(0,0,0,0.22);

  box-shadow: 0 0 26px rgba(0,255,170,0.10);

  border-radius:14px;

  backdrop-filter: blur(6px);

}

.hud-grid{

  display:grid;

  grid-template-columns: repeat(6, 1fr);

  grid-template-areas:

    "crew crew reserve reserve reserve reserve"

    "mc mc price price liq liq";

  gap:6px;

}

.hud-pill{

  border:1px solid rgba(0,255,170,0.10);

  border-radius:12px;

  padding:7px 9px 6px;

  background: rgba(0,0,0,0.18);

  min-height:42px;

}

.hud-pill[data-slot="crew"]{ grid-area: crew; }

.hud-pill[data-slot="reserve"]{ grid-area: reserve; }

.hud-pill[data-slot="mc"]{ grid-area: mc; }

.hud-pill[data-slot="price"]{ grid-area: price; }

.hud-pill[data-slot="liq"]{ grid-area: liq; }

.p-k{ font-size:10px; opacity:.55; letter-spacing:1px; }

.p-v{ font-size:12px; opacity:.92; margin-top:3px; }

.hud-sub{

  margin-top:6px;

  display:flex;

  justify-content:space-between;

  gap:10px;

  font-size:11px;

  opacity:.70;

}

#updated-corner{

  position:absolute;

  top:10px;

  right:12px;

  z-index:70;

  font-size:11px;

  opacity:.55;

  pointer-events:none;

}

.quote{

  position:absolute;

  bottom:14px;

  left:50%;

  transform:translateX(-50%);

  font-size:11px;

  opacity:.55;

  z-index:60;

  text-align:center;

  padding:0 12px;

  pointer-events:none;

}

/* ✅ CREW LIST dropdown */

.crewbar{

  position:relative;

  width:100%;

  pointer-events:auto;

  display:flex;

  justify-content:flex-start;

}

.crew-toggle{

  pointer-events:auto;

  border:1px solid rgba(0,255,170,0.14);

  background: rgba(0,0,0,0.28);

  color:#b8ffd9;

  font-family:'Share Tech Mono', monospace;

  font-size:11px;

  letter-spacing:1px;

  padding:10px 12px 9px;

  border-radius:12px;

  backdrop-filter: blur(8px);

  box-shadow: 0 0 24px rgba(0,255,170,0.10);

  cursor:pointer;

  display:flex;

  align-items:center;

  gap:8px;

  -webkit-tap-highlight-color: transparent;

}

.crew-toggle:active{ opacity:.82; }

.crew-toggle .chev{

  display:inline-block;

  opacity:.7;

  transform: translateY(-1px) rotate(90deg);

  transition: transform .16s ease;

}

.drawer-open .crew-toggle .chev{

  transform: translateY(-1px) rotate(180deg);

}

.crew-drawer{

  position:absolute;

  left:0;

  top:44px;

  width: min(420px, 100%);

  max-height: min(520px, calc(var(--vh) * 100 - 190px));

  z-index:75;

  pointer-events:none;

  opacity:0;

  transform: translateY(-8px) scaleY(0.96);

  transform-origin: top left;

  transition: transform .18s ease, opacity .16s ease;

  border:1px solid rgba(0,255,170,0.12);

  border-radius:16px;

  background: rgba(0,0,0,0.42);

  backdrop-filter: blur(10px);

  box-shadow: 0 0 30px rgba(0,255,170,0.12);

  overflow:hidden;

  display:flex;

  flex-direction:column;

}

.drawer-open .crew-drawer{

  transform: translateY(0) scaleY(1);

  opacity:1;

  pointer-events:auto;

}

.crew-drawer-head{

  padding:10px 10px 8px;

  border-bottom:1px solid rgba(0,255,170,0.10);

  background: rgba(0,0,0,0.18);

  text-align:left;

}

.crew-drawer-title{

  font-size:12px;

  letter-spacing:1.4px;

  opacity:.92;

}

.crew-drawer-sub{

  margin-top:6px;

  font-size:11px;

  opacity:.62;

}

.crew-list{

  padding:6px;

  overflow:auto;

  scrollbar-width: thin;

  scrollbar-color: rgba(0,255,170,0.20) rgba(0,0,0,0.25);

}

.crew-row{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  padding:8px 8px;

  border-radius:12px;

  border:1px solid rgba(0,255,170,0.08);

  background: rgba(0,0,0,0.18);

  margin:6px 0;

  cursor:pointer;

  -webkit-tap-highlight-color: transparent;

}

.crew-row:hover{ border-color: rgba(0,255,170,0.14); }

.crew-row:active{ opacity:.85; }

.crew-left{

  display:flex;

  flex-direction:column;

  gap:2px;

  min-width:0;

  text-align:left;

}

.crew-wallet{

  font-size:11px;

  opacity:.92;

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis;

  max-width: 300px;

}

.crew-rank{

  font-size:10px;

  opacity:.55;

}

.crew-share{

  font-size:11px;

  opacity:.92;

  padding:4px 8px 3px;

  border-radius:999px;

  border:1px solid rgba(0,255,170,0.12);

  background: rgba(0,0,0,0.14);

}

.crew-drawer-foot{

  padding:8px 10px 10px;

  font-size:10px;

  opacity:.45;

  border-top:1px solid rgba(0,255,170,0.10);

  text-align:left;

}

/* ✅ row highlight pulse */

.crew-row.hl{

  border-color: rgba(0,255,170,0.32);

  box-shadow: 0 0 18px rgba(0,255,170,0.18);

  background: rgba(0,255,170,0.06);

  animation: rowHL 1.15s ease-out 1;

}

@keyframes rowHL{

  0%{ transform: translateZ(0) scale(1); }

  45%{ transform: translateZ(0) scale(1.02); }

  100%{ transform: translateZ(0) scale(1); }

}

/* CORE */

#gorboy-core{

  position:absolute;

  top:50%;

  left:50%;

  width:190px;

  height:190px;

  transform:translate(-50%, -50%);

  z-index:55;

  pointer-events:none;

}

#gorboy-core img{

  width:100%;

  height:auto;

  display:block;

  background:transparent;

  filter: drop-shadow(0 0 24px rgba(0,255,170,.42));

  animation: float 6s ease-in-out infinite;

  -webkit-user-drag:none;

}

@keyframes float{

  0%{ transform:translateY(0); }

  50%{ transform:translateY(-10px); }

  100%{ transform:translateY(0); }

}

/* HALO */

#data-halo{

  position:absolute;

  top:50%;

  left:50%;

  width:255px;

  height:255px;

  transform:translate(-50%, -50%);

  border-radius:50%;

  z-index:20;

  pointer-events:none;

  border:1px solid rgba(0,255,170,0.22);

  box-shadow:

    0 0 26px rgba(0,255,170,0.16),

    0 0 90px rgba(0,255,170,0.28),

    inset 0 0 44px rgba(0,255,170,0.18);

  background:

    radial-gradient(circle at 50% 50%,

      rgba(0,255,170, calc(0.26 + (var(--pulse) * 0.12))) 0%,

      rgba(0,255,170, calc(0.14 + (var(--pulse) * 0.07))) 22%,

      rgba(0,0,0,0.00) 64%

    );

  animation: haloPulse 3.2s ease-in-out infinite;

}

#data-halo::before{

  content:"";

  position:absolute;

  inset:-14px;

  border-radius:50%;

  border:1px solid rgba(0,255,170,0.11);

  box-shadow: 0 0 32px rgba(0,255,170,0.16);

  opacity:0;

  animation: haloWave 2.8s ease-out infinite;

}

#data-halo::after{

  content:"";

  position:absolute;

  inset:0;

  border-radius:50%;

  background:

    repeating-conic-gradient(

      from 0deg,

      rgba(0,255,170,0.00) 0deg 10deg,

      rgba(0,255,170,0.12) 10deg 16deg,

      rgba(0,255,170,0.00) 16deg 28deg

    );

  filter: blur(0.9px);

  opacity:0.28;

  mix-blend-mode: screen;

  animation: plasmaSpin 7.5s linear infinite;

}

/* Flame */

#data-halo .flame{

  position:absolute;

  inset:10px;

  border-radius:50%;

  overflow:hidden;

  opacity:0.95;

  filter: saturate(1.28) brightness(1.16);

  mix-blend-mode: screen;

  box-shadow: inset 0 0 42px rgba(0,0,0,0.55);

  -webkit-mask-image: radial-gradient(circle at 50% 56%, #000 0 58%, transparent 74%);

          mask-image: radial-gradient(circle at 50% 56%, #000 0 58%, transparent 74%);

}

#data-halo .flame::before{

  content:"";

  position:absolute;

  inset:-44%;

  border-radius:50%;

  background:

    conic-gradient(

      from 0deg,

      rgba(0,255,170,0.00) 0%,

      rgba(0,255,170,0.20) 7%,

      rgba(0,255,170,0.00) 14%,

      rgba(0,255,170,0.30) 24%,

      rgba(0,255,170,0.00) 34%,

      rgba(0,255,170,0.22) 44%,

      rgba(0,255,170,0.00) 56%,

      rgba(0,255,170,0.34) 66%,

      rgba(0,255,170,0.00) 78%,

      rgba(0,255,170,0.24) 90%,

      rgba(0,255,170,0.00) 100%

    ),

    radial-gradient(circle at 50% 62%,

      rgba(0,255,170, calc(0.26 + var(--pulse)*0.12)) 0%,

      rgba(0,255,170,0.08) 44%,

      rgba(0,0,0,0) 72%

    );

  filter: blur(1.9px);

  opacity:0.92;

  animation: flameSwirl 1.95s linear infinite;

  transform-origin: 50% 55%;

}

#data-halo .flame::after{

  content:"";

  position:absolute;

  inset:-38%;

  border-radius:50%;

  background:

    repeating-radial-gradient(

      circle at 50% 70%,

      rgba(0,255,170,0.00) 0 10px,

      rgba(0,255,170,0.16) 10px 16px,

      rgba(0,255,170,0.00) 16px 28px

    );

  filter: blur(2.3px);

  opacity:0.58;

  mix-blend-mode: screen;

  animation: flameFlicker 0.88s ease-in-out infinite;

  transform-origin: 50% 60%;

}

@keyframes haloPulse{

  0%{ transform:translate(-50%, -50%) scale(1); filter: saturate(1.10) brightness(1.05); }

  50%{ transform:translate(-50%, -50%) scale(1.05); filter: saturate(1.34) brightness(1.18); }

  100%{ transform:translate(-50%, -50%) scale(1); filter: saturate(1.10) brightness(1.05); }

}

@keyframes haloWave{

  0%{ transform:scale(0.92); opacity:0; }

  16%{ opacity:0.62; }

  72%{ opacity:0.10; }

  100%{ transform:scale(1.24); opacity:0; }

}

@keyframes plasmaSpin{

  0%{ transform: rotate(0deg); }

  100%{ transform: rotate(360deg); }

}

@keyframes flameSwirl{

  0%{ transform: translateY(18px) rotate(0deg) scale(1.06); }

  50%{ transform: translateY(8px) rotate(180deg) scale(1.12); }

  100%{ transform: translateY(18px) rotate(360deg) scale(1.06); }

}

@keyframes flameFlicker{

  0%{ transform: translateY(20px) rotate(-7deg) scale(1.08); opacity:0.48; }

  50%{ transform: translateY(11px) rotate(8deg) scale(1.15); opacity:0.66; }

  100%{ transform: translateY(20px) rotate(-7deg) scale(1.08); opacity:0.48; }

}

/* Beams */

#beams{ position:absolute; inset:0; z-index:26; pointer-events:none; opacity:0.95; }

/* Crew glyphs */

#crew-layer{ position:absolute; inset:0; z-index:30; pointer-events:auto; }

.crew-glyph{

  position:absolute;

  width:18px; height:18px;

  transform:translate(-50%, -50%);

  border-radius:7px;

  border:1px solid rgba(0,255,170,0.24);

  background: rgba(0,0,0,0.10);

  box-shadow: 0 0 10px rgba(0,255,170,0.12);

  opacity:0.95;

  overflow:hidden;

  cursor:pointer;

  user-select:none;

  -webkit-tap-highlight-color: transparent;

  animation: glyphPulse 3.2s ease-in-out infinite;

}

.crew-glyph canvas{ display:block; width:100%; height:100%; }

.crew-glyph[data-rank="1"], .crew-glyph[data-rank="2"], .crew-glyph[data-rank="3"]{

  width:22px; height:22px;

  border-color: rgba(0,255,170,0.40);

  box-shadow: 0 0 16px rgba(0,255,170,0.24);

}

.crew-glyph.focus{

  border-color: rgba(0,255,170,0.55);

  box-shadow: 0 0 22px rgba(0,255,170,0.26);

  animation: glyphFocus 1.1s ease-out 1;

}

@keyframes glyphFocus{

  0%{ transform:translate(-50%, -50%) scale(1); filter: brightness(1.05); }

  45%{ transform:translate(-50%, -50%) scale(1.16); filter: brightness(1.24); }

  100%{ transform:translate(-50%, -50%) scale(1); filter: brightness(1.05); }

}

@keyframes glyphPulse{

  0%{ transform:translate(-50%, -50%) scale(1); filter: brightness(1); }

  50%{ transform:translate(-50%, -50%) scale(1.06); filter: brightness(1.14); }

  100%{ transform:translate(-50%, -50%) scale(1); filter: brightness(1); }

}

/* Tooltip + toast + scanner */

#tooltip{

  position:absolute; z-index:90; width:230px;

  padding:8px 10px; border-radius:12px;

  border:1px solid rgba(0,255,170,0.16);

  background: rgba(0,0,0,0.55);

  box-shadow: 0 0 30px rgba(0,255,170,0.14);

  backdrop-filter: blur(8px);

  color:#caffea;

  opacity:0; transform: translateY(6px);

  pointer-events:none;

  transition: opacity .12s ease, transform .12s ease;

}

#tooltip.show{ opacity:1; transform: translateY(0); pointer-events:auto; }

.tt-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }

.tt-title{ font-size:11px; opacity:.95; letter-spacing:.6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:160px; }

.tt-badge{ font-size:10px; opacity:.7; border:1px solid rgba(0,255,170,0.14); padding:3px 6px 2px; border-radius:999px; background: rgba(0,0,0,0.18); }

.tt-grid{ display:grid; grid-template-columns: 44px 1fr; gap:6px 10px; font-size:11px; padding-top:6px; border-top: 1px solid rgba(0,255,170,0.08); }

.tt-k{ opacity:.55; }

.tt-v{ opacity:.92; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.copy{ cursor:pointer; pointer-events:auto; }

.copy:active{ opacity:.7; }

.tt-hint{ margin-top:7px; font-size:10px; opacity:.55; }

#toast{

  position:absolute; left:50%; bottom:54px;

  transform:translateX(-50%);

  z-index:95; font-size:11px;

  padding:7px 10px; border-radius:999px;

  border:1px solid rgba(0,255,170,0.14);

  background: rgba(0,0,0,0.45);

  box-shadow: 0 0 20px rgba(0,255,170,0.12);

  opacity:0; pointer-events:none;

  transition: opacity .14s ease, transform .14s ease;

}

#toast.show{ opacity:1; transform:translateX(-50%) translateY(-4px); }

#scanner-dot{

  position:absolute; right:14px; bottom:14px;

  width:8px; height:8px; border-radius:50%;

  background:rgba(0,255,170,0.35);

  box-shadow:0 0 12px rgba(0,255,170,0.25);

  z-index:80; opacity:0.65;

}

#scanner-dot.pulse{ animation: dotPulse .55s ease-out 1; }

@keyframes dotPulse{

  0%{ transform:scale(1); opacity:.65; }

  60%{ transform:scale(1.9); opacity:1; }

  100%{ transform:scale(1); opacity:.65; }

}

@media (max-width: 520px){

  #gorboy-core{ width:165px; height:165px; }

  #data-halo{ width:221px; height:221px; }

  #ui-top{ top:8px; gap:6px; }

  .hud{ padding:8px 8px 7px; }

  .hud-grid{

    grid-template-columns: repeat(2, 1fr);

    grid-template-areas:

      "crew reserve"

      "mc liq"

      "price price";

    gap:6px;

  }

  .hud-pill{ min-height:40px; padding:7px 9px 6px; }

  #updated-corner{ font-size:10px; }

  #tooltip{ width: 215px; }

  .crew-drawer{

    width: 100%;

    max-height: min(420px, calc(var(--vh) * 100 - 210px));

  }

}