:root {
  --bg: #02030a;
  --cyan: #00f0ff;
  --mag: #ff2ccb;
  --vio: #8f6bff;
  --lime: #c6ff4d;
  --ice: #f2fcff;
  --hud-h: clamp(4.2rem, 12dvh, 5.6rem);
  --dock-h: clamp(3.2rem, 9dvh, 4.2rem);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--ice);
  font-family: "Share Tech Mono", monospace;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  display: grid;
  grid-template-rows: var(--hud-h) minmax(0, 1fr) var(--dock-h);
  touch-action: manipulation;
}

.world { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.world__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.world__grid {
  position: absolute; inset: -25% 0 0;
  background-image:
    linear-gradient(rgba(0,240,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,.06) 1px, transparent 1px);
  background-size: 60px 60px;
  transform: perspective(520px) rotateX(62deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(transparent, #000 28%, #000 72%, transparent);
  animation: gridMove 16s linear infinite;
}
.world__orb {
  position: absolute; width: 50vmax; height: 50vmax; border-radius: 50%;
  filter: blur(110px); opacity: .3;
}
.world__orb--a { top: -12%; left: -10%; background: #0040ff; }
.world__orb--b { right: -12%; bottom: -16%; background: #a00070; }
.world__scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0,0,0,.14) 2px 4px);
  opacity: .35;
}
.world__flash {
  position: absolute; inset: 0; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at 50% 42%, rgba(255,255,255,.7), rgba(0,240,255,.35), transparent 58%);
}
.world__flash.on { animation: flash .65s ease-out; }
.world__pulse {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(circle at 50% 48%, rgba(0,240,255,.14), transparent 42%);
  transition: opacity .08s linear;
}
.world__pulse.on { opacity: 1; }

.hud {
  position: relative; z-index: 4;
  width: min(560px, 100%);
  margin: 0 auto;
  padding: clamp(.35rem, 1.4dvh, .75rem) clamp(.6rem, 2vw, 1.1rem) 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
}
.hud__brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.hud__mark {
  width: clamp(26px, 4.5dvh, 34px);
  height: clamp(26px, 4.5dvh, 34px);
  flex-shrink: 0;
  display: grid; place-items: center;
  font-family: Orbitron, sans-serif; font-weight: 800; color: #02030a;
  font-size: clamp(.7rem, 1.6dvh, .95rem);
  background: linear-gradient(135deg, var(--cyan), var(--mag));
  clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow: 0 0 18px rgba(0,240,255,.45);
}
.hud__title {
  font-family: Orbitron, sans-serif; font-weight: 800;
  letter-spacing: .22em;
  font-size: clamp(.62rem, 1.8dvh + .3vw, .9rem);
  text-shadow: 0 0 14px rgba(0,240,255,.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud__meta {
  font-size: clamp(.48rem, 1.2dvh, .58rem);
  letter-spacing: .12em;
  color: rgba(0,240,255,.5);
  margin-top: .1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud__line {
  margin-top: clamp(.2rem, .8dvh, .55rem);
  min-height: 1em;
  font-size: clamp(.55rem, 1.5dvh, .7rem);
  letter-spacing: .1em;
  color: var(--mag);
  text-shadow: 0 0 10px rgba(255,44,203,.35);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud__bar {
  margin-top: clamp(.15rem, .6dvh, .35rem);
  height: 2px;
  background: rgba(0,240,255,.12);
  overflow: hidden;
  flex-shrink: 0;
}
.hud__bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cyan), var(--mag), var(--lime));
  box-shadow: 0 0 10px rgba(0,240,255,.7);
  transition: width .2s linear;
}

.stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 0 clamp(.4rem, 2vw, 1rem);
}

.rig {
  position: relative;
  max-width: 100%;
  max-height: 100%;
  width: min(100%, 460px, calc((100dvh - var(--hud-h) - var(--dock-h) - 0.5rem) * 0.74));
  aspect-ratio: 23 / 31;
  height: auto;
  transform: scale(.94);
  opacity: .85;
  transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity .8s ease;
}
.rig.is-live {
  transform: scale(1);
  opacity: 1;
}
.rig.is-drop {
  animation: dropKick .45s cubic-bezier(.2,.8,.2,1);
}

.rig__sparks {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5;
}

.plinth {
  position: absolute; left: 50%; bottom: 2%;
  width: 55%; height: 12%;
  transform: translateX(-50%) scale(.6);
  opacity: 0; z-index: 1;
}
.rig.is-plinth .plinth {
  animation: plinthIn .8s cubic-bezier(.16,1,.3,1) forwards;
}
.rig.is-alive .plinth {
  animation: none; opacity: 1; transform: translateX(-50%) scale(1);
}
.plinth__core {
  position: absolute; inset: 28% 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,240,255,.35), transparent 70%);
  border: 1px solid rgba(0,240,255,.4);
  box-shadow: 0 0 30px rgba(0,240,255,.25), inset 0 0 20px rgba(255,44,203,.12);
}
.plinth__ring, .plinth__ring--2 {
  position: absolute; inset: 10% 0; border-radius: 50%;
  border: 1px solid rgba(255,44,203,.35);
}
.plinth__ring--2 {
  inset: -5% 10%;
  border-color: rgba(0,240,255,.25);
  border-style: dashed;
}
.rig.is-alive .plinth__ring { animation: spin 14s linear infinite; }
.rig.is-alive .plinth__ring--2 { animation: spinRev 18s linear infinite; }

.bouquet {
  position: absolute;
  inset: 0 0 8%;
  z-index: 3;
  transform-origin: 50% 85%;
}

.flower {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: var(--size);
  height: calc(var(--size) * 2.05);
  transform: translateX(-50%) rotate(var(--tilt)) translateX(var(--x));
  transform-origin: 50% 100%;
  --accent: #00f0ff;
}

.stem {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 56%;
  transform-origin: bottom center;
}
.stem svg {
  width: clamp(14px, 6%, 24px);
  height: 100%;
  margin-left: -12px;
  overflow: visible;
}
.stem path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--accent));
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}
.rig.is-stems .stem path {
  animation: drawStem .9s calc(var(--si) * 75ms) cubic-bezier(.4,0,.2,1) forwards;
}
.rig.is-alive .stem path {
  animation: none;
  stroke-dashoffset: 0;
}

.leaf {
  position: absolute;
  bottom: 26%;
  width: clamp(14px, 5.5%, 26px);
  height: clamp(7px, 2.5%, 12px);
  background: linear-gradient(135deg, var(--accent), transparent);
  border-radius: 0 80% 0 80%;
  opacity: 0;
  box-shadow: 0 0 10px var(--accent);
}
.leaf-l { left: calc(50% - 28px); transform: rotate(-32deg) scale(0); transform-origin: right center; }
.leaf-r { left: calc(50% + 2px); transform: rotate(32deg) scaleX(-1) scale(0); transform-origin: left center; }
.rig.is-stems .leaf-l {
  animation: leafL .5s calc(350ms + var(--si) * 75ms) cubic-bezier(.2,1.3,.3,1) forwards;
}
.rig.is-stems .leaf-r {
  animation: leafR .5s calc(420ms + var(--si) * 75ms) cubic-bezier(.2,1.3,.3,1) forwards;
}
.rig.is-alive .leaf-l { animation: none; opacity: .9; transform: rotate(-32deg) scale(1); }
.rig.is-alive .leaf-r { animation: none; opacity: .9; transform: rotate(32deg) scaleX(-1) scale(1); }

.head {
  position: absolute;
  left: 50%; top: 2%;
  width: 100%; aspect-ratio: 1;
  transform: translateX(-50%) scale(0) rotate(-18deg);
  transform-origin: 50% 75%;
  perspective: 700px;
  transform-style: preserve-3d;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--accent) 70%, transparent));
}
.rig.is-bloom .head {
  animation: headIn .7s calc(var(--bd)) cubic-bezier(.16,1.2,.3,1) forwards;
}
.rig.is-alive .head {
  animation: sway calc(4.8s + var(--si) * .25s) calc(var(--si) * .1s) ease-in-out infinite;
  transform: translateX(-50%) scale(1) rotate(0);
}

.petal {
  position: absolute;
  left: 50%; top: 58%;
  width: var(--pw); height: var(--ph);
  margin-left: calc(var(--pw) / -2);
  margin-top: calc(var(--ph) * -1);
  transform-origin: 50% 100%;
  --rot: calc(var(--p) * 360deg / var(--n));
  transform: rotate(var(--rot)) rotateX(70deg) scale(.12);
  opacity: 0;
}
.petal svg { width: 100%; height: 100%; overflow: visible; display: block; }
.layer { position: absolute; inset: 0; transform-style: preserve-3d; }
.layer-a .petal { --pw: 32%; --ph: 58%; }
.layer-b .petal { --pw: 26%; --ph: 48%; }
.layer-c .petal { --pw: 18%; --ph: 34%; }

.rig.is-bloom .petal {
  animation: petalOpen .95s calc(var(--bd) + 90ms + var(--p) * 32ms) cubic-bezier(.14,1.15,.25,1) forwards;
}
.rig.is-alive .petal {
  animation: none;
  opacity: 1;
  transform: rotate(var(--rot)) rotateX(0) scale(1);
}
.rig.is-alive .layer-a { animation: breathe 7s ease-in-out infinite; }
.rig.is-alive .layer-b { animation: breatheRev 8.5s ease-in-out infinite; }

.core {
  position: absolute; left: 50%; top: 58%;
  width: 18%; height: 18%;
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fff, var(--accent) 48%, #070b18 78%);
  box-shadow: 0 0 18px var(--accent), 0 0 36px rgba(255,255,255,.2);
  opacity: 0; z-index: 4;
}
.rig.is-bloom .core {
  animation: coreIn .45s calc(var(--bd) + 480ms) cubic-bezier(.2,1.5,.3,1) forwards;
}
.rig.is-alive .core {
  animation: corePulse 2s ease-in-out infinite;
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}

.halo {
  position: absolute; left: 50%; top: 58%;
  width: 78%; height: 78%;
  transform: translate(-50%, -50%) scale(.2);
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--accent) 80%, white);
  opacity: 0; pointer-events: none;
}
.rig.is-bloom .halo {
  animation: haloOut 1s calc(var(--bd) + 420ms) ease-out forwards;
}

.controls {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(.4rem, 1.5vw, .7rem);
  padding: 0 clamp(.5rem, 2vw, 1rem);
  min-height: 0;
  overflow: hidden;
}
.btn {
  font-family: Orbitron, sans-serif; font-weight: 700;
  letter-spacing: .14em;
  font-size: clamp(.52rem, 1.5dvh, .68rem);
  border: 1px solid rgba(0,240,255,.4);
  background: rgba(0,18,28,.8); color: var(--cyan);
  padding: clamp(.4rem, 1.2dvh, .72rem) clamp(.7rem, 2.5vw, 1.15rem);
  cursor: pointer;
  clip-path: polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  white-space: nowrap;
}
.btn--main {
  background: linear-gradient(180deg, rgba(0,60,70,.9), rgba(0,12,22,.95));
  box-shadow: 0 0 22px rgba(0,240,255,.22);
}
.btn:hover { color: #fff; border-color: var(--mag); }
.btn:disabled { opacity: .45; pointer-events: none; }
.btn[aria-pressed="true"] { color: #667; border-color: #445; }

@keyframes gridMove { to { background-position: 0 60px; } }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }
@keyframes plinthIn {
  from { opacity: 0; transform: translateX(-50%) scale(.5) translateY(20px); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}
@keyframes drawStem { to { stroke-dashoffset: 0; } }
@keyframes leafL { to { opacity: .9; transform: rotate(-32deg) scale(1); } }
@keyframes leafR { to { opacity: .9; transform: rotate(32deg) scaleX(-1) scale(1); } }
@keyframes headIn {
  0% { transform: translateX(-50%) scale(0) rotate(-18deg); filter: blur(4px); }
  65% { transform: translateX(-50%) scale(1.08) rotate(3deg); filter: blur(0); }
  100% { transform: translateX(-50%) scale(1) rotate(0); }
}
@keyframes petalOpen {
  0% { opacity: 0; transform: rotate(var(--rot)) rotateX(75deg) scale(.1) translateY(24px); }
  55% { opacity: 1; }
  78% { transform: rotate(var(--rot)) rotateX(-8deg) scale(1.06) translateY(-3px); }
  100% { opacity: 1; transform: rotate(var(--rot)) rotateX(0) scale(1) translateY(0); }
}
@keyframes coreIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(0); }
  to { opacity: 1; transform: translate(-50%,-50%) scale(1); }
}
@keyframes corePulse {
  0%,100% { transform: translate(-50%,-50%) scale(1); }
  50% { transform: translate(-50%,-50%) scale(1.14); }
}
@keyframes haloOut {
  from { opacity: .85; transform: translate(-50%,-50%) scale(.35); }
  to { opacity: 0; transform: translate(-50%,-50%) scale(1.9); }
}
@keyframes sway {
  0%,100% { transform: translateX(-50%) scale(1) rotate(0); }
  50% { transform: translateX(-50%) scale(1.03) rotate(2.2deg); }
}
@keyframes breathe {
  0%,100% { transform: rotate(0); }
  50% { transform: rotate(2deg); }
}
@keyframes breatheRev {
  0%,100% { transform: rotate(0); }
  50% { transform: rotate(-2.5deg); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinRev { to { transform: rotate(-360deg); } }
@keyframes dropKick {
  0% { transform: scale(1); }
  40% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@media (max-height: 640px) {
  :root {
    --hud-h: clamp(3.4rem, 11dvh, 4.4rem);
    --dock-h: clamp(2.6rem, 8dvh, 3.4rem);
  }
  .hud__meta { display: none; }
}

@media (max-height: 500px) {
  .hud__mark { display: none; }
  .btn { letter-spacing: .08em; }
}