/* tokens, sampled straight off assets/avatar.png (PIL pixel probe) */
:root{
  --bg: #11143d;
  --panel: #1a1e57;
  --green: #8cff9c;
  --cream: #fff7dc;
  --cream-dim: rgba(255, 247, 220, 0.55);
  --line: rgba(140, 255, 156, 0.28);
}

*{ box-sizing: border-box; }

@font-face{
  font-family: "Azeret Mono";
  src: url("fonts/azeret-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Azeret Mono";
  src: url("fonts/azeret-mono-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face{
  font-family: "Azeret Mono";
  src: url("fonts/azeret-mono-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html, body{
  height: 100%;
  margin: 0;
  background: var(--bg);
  overflow: hidden;
}

body{
  font-family: "Azeret Mono", ui-monospace, "SF Mono", monospace;
  -webkit-font-smoothing: antialiased;
}

.stage{
  min-height: 100dvh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 4vh, 40px) clamp(16px, 5vw, 32px);
}

.frame{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(10px, 2vh, 16px);
  width: 100%;
  max-width: 520px;
}

.sticker{
  width: min(58vw, 62vh, 400px);
  height: auto;
  display: block;
}

/* the HUD readout: the muzzle's own sound-bar tell, made real */
.hud{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.hud-label{
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
}

.hud-clock{
  color: var(--cream-dim);
  margin-left: 6px;
}

.bars{
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 22px;
  padding: 5px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
}

.bar{
  width: 5px;
  height: 30%;
  background: var(--green);
  border-radius: 1px;
  transform-origin: bottom;
  animation: eq 1000ms ease-in-out infinite;
}
.bar:nth-child(1){ animation-duration: 820ms; animation-delay: -600ms; }
.bar:nth-child(2){ animation-duration: 960ms; animation-delay: -200ms; }
.bar:nth-child(3){ animation-duration: 740ms; animation-delay: -900ms; }
.bar:nth-child(4){ animation-duration: 1080ms; animation-delay: -50ms; }
.bar:nth-child(5){ animation-duration: 700ms; animation-delay: -400ms; }
.bar:nth-child(6){ animation-duration: 900ms; animation-delay: -750ms; }
.bar:nth-child(7){ animation-duration: 1020ms; animation-delay: -300ms; }

@keyframes eq{
  0%, 100%{ height: 20%; }
  50%{ height: 95%; }
}

.line{
  margin: 0;
  max-width: 34ch;
  text-align: center;
  color: var(--cream);
  font-size: clamp(13px, 3vw, 16px);
  line-height: 1.5;
}

.chrome{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 2px;
}

.ticker{
  color: var(--green);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.03em;
}

.sep{ color: var(--cream-dim); }

.ca{
  font-family: inherit;
  font-size: 12.5px;
  color: var(--cream);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 6px 10px;
  cursor: pointer;
  letter-spacing: 0.01em;
}
.ca:hover{ border-color: var(--green); }

.credit{
  position: fixed;
  left: 0;
  right: 0;
  bottom: clamp(10px, 2.4vh, 20px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.credit a{
  color: var(--cream-dim);
  text-decoration: none;
  padding: 4px 6px;
}
.credit a:hover{ color: var(--green); }

@media (prefers-reduced-motion: reduce){
  .bar{
    animation: none !important;
  }
  .bar:nth-child(1){ height: 40%; }
  .bar:nth-child(2){ height: 70%; }
  .bar:nth-child(3){ height: 30%; }
  .bar:nth-child(4){ height: 90%; }
  .bar:nth-child(5){ height: 50%; }
  .bar:nth-child(6){ height: 65%; }
  .bar:nth-child(7){ height: 35%; }
}

@media (max-width: 400px){
  .sticker{ width: min(66vw, 300px); }
  .line{ font-size: 13px; }
}