/* HUSKISS — rock and howl all nite */

:root {
  --s: 1;          /* raw artwork scale */
  --u: 1;          /* clamped UI scale */
  --red: #E61E2D;
  --red-dark: #8f141d;
  --yellow: #FFD45A;
  --navy: #05070f;
  --anton: 'Anton', Impact, 'Arial Black', sans-serif;
  --oswald: 'Oswald', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --vt: 'VT323', 'Courier New', monospace;
}

* { box-sizing: border-box; }

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

body {
  font-family: var(--oswald);
  color: #fff;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

img { -webkit-user-drag: none; }

/* ---------- world ---------- */
#scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  overflow: clip;
}
#world {
  position: absolute;
  left: 0;
  top: 0;
  width: 1536px;
  height: 864px;
  transform-origin: 0 0;
  opacity: 0;
  transition: opacity .4s ease;
}
#world.ready { opacity: 1; }

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1536px;
  height: 864px;
}

.bleed {
  position: absolute;
  left: -512px;
  top: -80px;
  width: 2560px;
  height: 1024px;
}

#plate { z-index: 1; }

.win {
  z-index: 2;
  opacity: 0;
  transition: opacity .12s linear;
}

/* moon glow */
#glow {
  position: absolute;
  left: 768px;
  top: 150px;
  width: 380px;
  height: 380px;
  margin-left: -190px;
  margin-top: -190px;
  z-index: 3;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,248,230,.95) 0%, rgba(255,246,225,.45) 38%, rgba(255,244,220,0) 70%);
  opacity: .45;
  animation: breathe 4s ease-in-out infinite;
}
@keyframes breathe { 0%,100% { opacity:.35 } 50% { opacity:.55 } }
#glow.flash { animation: glowFlash .3s ease-out; }
@keyframes glowFlash { 0% { opacity:.9; scale:1.5 } 100% { opacity:.45; scale:1 } }

/* ---------- heads ---------- */
#heads { position: absolute; inset: 0; z-index: 4; }
#heads-bob { position: absolute; inset: 0; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-4px) } }

#heads-punch { position: absolute; inset: 0; transform-origin: 768px 640px; }
#heads-punch.punch { animation: punch .12s ease-out; }
@keyframes punch { 0% { transform: scale(1) } 45% { transform: scale(1.045) } 100% { transform: scale(1) } }

#heads-motion { position: absolute; inset: 0; transform-origin: 768px 640px; }
#heads-motion.bang { animation: bang 1.4s linear; }
@keyframes bang {
  0%   { transform: rotate(-1.2deg) translateY(6px) }
  12.5%{ transform: rotate(1.2deg)  translateY(0) }
  25%  { transform: rotate(-1.2deg) translateY(6px) }
  37.5%{ transform: rotate(1.2deg)  translateY(0) }
  50%  { transform: rotate(-1.2deg) translateY(6px) }
  62.5%{ transform: rotate(1.2deg)  translateY(0) }
  75%  { transform: rotate(-1.2deg) translateY(6px) }
  87.5%{ transform: rotate(1.2deg)  translateY(0) }
  100% { transform: rotate(-1.2deg) translateY(6px) }
}

.heads-img { position: absolute; left: 0; top: 0; width: 1536px; height: 864px; }
#h-idle { opacity: 1; transition: opacity .12s linear; }
#h-chorus { opacity: 0; transition: opacity .12s linear; }
#heads.chorus #h-idle { opacity: 0; transition-duration: .08s; }
#heads.chorus #h-chorus { opacity: 1; transition-duration: .08s; }

/* ---------- lettering ---------- */
.letter {
  position: absolute;
  z-index: 5;
  font-family: var(--anton);
  font-size: 96px;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 10px var(--red);
  paint-order: stroke fill;
  text-shadow: 5px 6px 0 #000;
  opacity: 0;
  transition: opacity .2s ease;
  pointer-events: none;
}
#awoo { left: 250px; top: 250px; transform: translate(-50%,-50%) rotate(-10deg); }
#oooo { left: 1290px; top: 250px; transform: translate(-50%,-50%) rotate(10deg); }
.letter-inner { display: inline-block; }
.letter.pop { opacity: 1; transition-duration: .12s; }
.letter.pop .letter-inner { animation: letterPop .25s ease-out, wobble 1.2s ease-in-out .25s infinite; }
@keyframes letterPop { 0% { transform: scale(.3) } 60% { transform: scale(1.12) } 100% { transform: scale(1) } }
@keyframes wobble { 0%,100% { rotate: -2.5deg } 50% { rotate: 2.5deg } }

/* ---------- bubbles ---------- */
#bubbles { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.bubble {
  position: absolute;
  background: #fff;
  border: 4px solid #000;
  border-radius: 14px;
  padding: 10px 16px;
  font-family: var(--anton);
  font-size: 26px;
  line-height: 1;
  color: #000;
  white-space: nowrap;
  opacity: 0;
  scale: .6;
}
.bubble.show {
  opacity: 1;
  animation: bubblePop .3s cubic-bezier(.2,1.4,.4,1) both,
             bubbleFloat 1.2s ease-out .3s both;
}
.bubble.hide { animation: none; opacity: 0; scale: 1; translate: 0 -20px; transition: opacity .3s ease; }
@keyframes bubblePop { 0% { scale:.6; opacity:0 } 60% { scale:1.08; opacity:1 } 100% { scale:1; opacity:1 } }
@keyframes bubbleFloat { from { translate: 0 0 } to { translate: 0 -20px } }
.bubble::after {
  content: '';
  position: absolute;
  left: var(--tail, 50%);
  bottom: -16px;
  margin-left: -11px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 16px solid #000;
}
.bubble::before {
  content: '';
  position: absolute;
  left: var(--tail, 50%);
  bottom: -8px;
  margin-left: -6px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 9px solid #fff;
  z-index: 1;
}

/* ---------- HOWL button (inside #world -> raw s) ---------- */
#howl-wrap {
  position: absolute;
  left: 768px;
  top: 748px;
  transform: translate(-50%,-50%);
  z-index: 7;
}
#howl {
  position: relative;
  width: 300px;
  height: 92px;
  border-radius: 46px;
  border: 5px solid #fff;
  background: var(--red);
  box-shadow: 6px 8px 0 #000;
  color: #fff;
  font-family: var(--anton);
  font-size: 52px;
  letter-spacing: .01em;
  -webkit-text-stroke: 3px #000;
  paint-order: stroke fill;
  cursor: pointer;
  transform: translateY(0);
  transition: background .15s ease, transform .1s ease, box-shadow .1s ease;
  outline: none;
}
#howl::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 46px;
  border: 4px solid rgba(255,255,255,.85);
  animation: ringPulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes ringPulse { 0% { transform: scale(1); opacity:.8 } 70% { transform: scale(1.12); opacity:0 } 100% { opacity:0 } }
#howl:hover { background: #ff2b3a; transform: translateY(-2px); }
#howl:active { transform: translateY(4px); box-shadow: 2px 3px 0 #000; }
#howl:focus-visible { box-shadow: 6px 8px 0 #000, 0 0 0 4px rgba(255,255,255,.9); }
#howl:disabled { cursor: default; background: var(--red-dark); color: #f3c9cd; }
#howl.busy { font-size: 40px; }
#howl.busy::after { display: none; }
#howl:disabled:hover { transform: translateY(0); background: var(--red-dark); }

.hint {
  position: absolute;
  left: 768px;
  top: 806px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 7;
  font-family: var(--oswald);
  font-weight: 300;
  font-size: 16px;
  letter-spacing: .05em;
  color: #aab2c0;
  white-space: nowrap;
  opacity: 1;
  transition: opacity .15s ease;
}

.status {
  position: absolute;
  left: 768px;
  top: 806px;
  transform: translateX(-50%);
  margin: 0;
  z-index: 8;
  font-family: var(--oswald);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: .04em;
  color: var(--yellow);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .15s ease;
}
body.has-status .hint { opacity: 0; }
body.has-status .status { opacity: 1; }
.status.warn { color: var(--yellow); }
.status.ok { color: #7dffa1; }
.status.err { color: #ff8a8a; }

/* ---------- viewport-anchored UI (uses --u) ---------- */
#header {
  position: fixed;
  left: calc(28px * var(--u));
  top: calc(22px * var(--u));
  z-index: 20;
  pointer-events: none;
}
#logo {
  font-family: var(--anton);
  font-size: calc(84px * var(--u));
  line-height: .92;
  color: #fff;
  letter-spacing: .015em;
  -webkit-text-stroke: calc(7px * var(--u)) var(--red);
  paint-order: stroke fill;
  text-shadow: calc(4px * var(--u)) calc(6px * var(--u)) 0 #000;
}
#tagline {
  margin-top: calc(6px * var(--u));
  display: flex;
  align-items: center;
  gap: calc(9px * var(--u));
}
.ticker-ca {
  font-family: var(--anton);
  font-size: calc(19px * var(--u));
  line-height: 1;
  letter-spacing: .04em;
  color: #fff;
  background: var(--red);
  border: 2px solid #000;
  border-radius: calc(5px * var(--u));
  padding: calc(3px * var(--u)) calc(10px * var(--u));
  box-shadow: calc(2px * var(--u)) calc(3px * var(--u)) 0 #000;
}
.ticker-rest {
  font-family: var(--oswald);
  font-weight: 400;
  font-size: calc(14px * var(--u));
  letter-spacing: .12em;
  color: #c9d1de;
  white-space: nowrap;
}

#utility {
  position: fixed;
  right: calc(28px * var(--u));
  top: calc(22px * var(--u));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: calc(10px * var(--u));
}
.chip {
  font-family: var(--oswald);
  font-weight: 500;
  font-size: calc(15px * var(--u));
  letter-spacing: .06em;
  line-height: 1;
  padding: calc(9px * var(--u)) calc(15px * var(--u));
  border-radius: calc(6px * var(--u));
  border: 3px solid #fff;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.chip-x { background: #000; color: #fff; border-color: #fff; }
.chip-pump { background: #fff; color: #000; border-color: #fff; }
.chip-ca { background: var(--red); color: #fff; border-color: #fff; }
.chip:hover { filter: brightness(1.12); }
.chip:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#hud-left {
  position: fixed;
  left: calc(28px * var(--u));
  bottom: calc(24px * var(--u));
  z-index: 20;
  background: rgba(3,6,14,.72);
  border: 3px solid #fff;
  border-radius: calc(8px * var(--u));
  padding: calc(10px * var(--u)) calc(16px * var(--u)) calc(6px * var(--u));
  min-width: calc(232px * var(--u));
}
.hud-label {
  font-family: var(--oswald);
  font-weight: 400;
  font-size: calc(15px * var(--u));
  letter-spacing: .07em;
  color: #d6dde8;
}
#complaints {
  font-family: var(--anton);
  font-size: calc(46px * var(--u));
  line-height: 1;
  color: #fff;
  transition: color .2s ease;
}
#complaints.bump { animation: bump .3s ease-out; color: var(--yellow); }
@keyframes bump { 0% { transform: scale(1) } 40% { transform: scale(1.25) } 100% { transform: scale(1) } }

#hud-right {
  position: fixed;
  right: calc(28px * var(--u));
  bottom: calc(24px * var(--u));
  z-index: 20;
  display: flex;
  align-items: center;
  gap: calc(14px * var(--u));
  background: rgba(3,6,14,.72);
  border: 3px solid #fff;
  border-radius: calc(8px * var(--u));
  padding: calc(8px * var(--u)) calc(14px * var(--u));
}
#sound {
  background: transparent;
  border: 0;
  padding: 0;
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  width: calc(30px * var(--u));
  height: calc(30px * var(--u));
}
#sound svg { width: 100%; height: 100%; display: block; }
#sound .slash { display: none; }
#sound.muted .wave { display: none; }
#sound.muted .slash { display: block; }
#sound.muted { color: #8b93a3; }
#sound:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 4px; }

#clock {
  font-family: var(--vt);
  font-size: calc(42px * var(--u));
  line-height: 1;
  color: #ff2b18;
  letter-spacing: .03em;
  text-shadow: 0 0 calc(10px * var(--u)) rgba(255,43,24,.85);
}
#clock .colon { animation: blink 1s steps(1,end) infinite; }
@keyframes blink { 0%,49% { opacity:1 } 50%,100% { opacity:.15 } }

/* ---------- shake ---------- */
#stage.shake { animation: shake .3s ease-in-out; }
@keyframes shake {
  0%,100% { transform: translate(0,0) }
  25% { transform: translate(-3px,2px) }
  50% { transform: translate(3px,-2px) }
  75% { transform: translate(-2px,3px) }
}

/* ---------- loader ---------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  font-family: var(--vt);
  font-size: 26px;
  letter-spacing: .18em;
  color: #8b93a3;
  transition: opacity .4s ease;
}
#loader.done { opacity: 0; pointer-events: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #heads-bob, #glow, #howl::after, #clock .colon { animation: none; }
  #heads-punch.punch, #heads-motion.bang, #stage.shake { animation: none; }
  .letter.pop .letter-inner { animation: none; }
  .bubble { opacity: 0; scale: 1; translate: 0 0; }
  .bubble.show { animation: none; opacity: 1; scale: 1; translate: 0 0; }
  .bubble.hide { animation: none; opacity: 0; }
  #glow.flash { animation: none; opacity: .6; }
  #complaints.bump { animation: none; }
}