:root{
  --bg: #06101f;
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);

  --orange: #ff9a1f;
  --orange2:#ff7a18;

  --cyan: #21e6ff;
  --cyan2:#10cfff;

  --card: rgba(0,0,0,0.18);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);

  /* background image */
  background-image: url("assets/bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--bg);
}

/* Subtle vignette + depth like your mock */
.bg-overlay{
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1200px 700px at 50% 30%, rgba(0,0,0,0.10), rgba(0,0,0,0.65)),
    radial-gradient(900px 500px at 50% 55%, rgba(0,0,0,0.05), rgba(0,0,0,0.35));
}

/* Top nav */
.nav{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 26px 38px;
  z-index: 5;
}

.nav__brand img{
  width: 62px;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.55));
}

.nav__links{
  display: flex;
  align-items: center;
  gap: 26px;
}

.nav__link{
  text-decoration: none;
  color: rgba(255,255,255,0.75);
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: 14px;
  transition: transform 140ms ease, color 140ms ease;
}

.nav__link:hover{
  color: rgba(255,255,255,0.95);
  transform: translateY(-1px);
}

.nav__link.is-active{
  color: rgba(255,255,255,0.95);
}

.nav__discord{
  display: inline-flex;
  align-items: center;
  gap: 10px;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1px;

  padding: 12px 18px;
  border-radius: 16px;

  color: rgba(255,255,255,0.95);
  text-decoration: none;

  background: rgba(120,130,255,0.16);
  border: 1px solid rgba(160,170,255,0.28);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 14px 40px rgba(0,0,0,0.28),
    0 0 26px rgba(140,150,255,0.18);

  transition: transform 140ms ease, filter 140ms ease, background 140ms ease;
}

.nav__discord:hover{
  transform: translateY(-1px);
  background: rgba(120,130,255,0.20);
  filter: brightness(1.06);
}

.nav__discord i{
  font-size: 14px;
  opacity: 0.92;
}


.nav__discordIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 7px;

  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
}

/* Hero layout */
.hero{
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 120px 24px 64px;
  position: relative;
  z-index: 1;
}

.hero__content{
  width: min(920px, 92vw);
  text-align: center;
}

.hero__logo{
  width: min(520px, 72vw);
  height: auto;
  display: block;
  margin: 0 auto 26px;
  filter: drop-shadow(0 26px 40px rgba(0,0,0,0.55));
}

.hero__title{
  margin: 0 0 8px;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 800;
  color: rgba(255,255,255,0.92);
}

.hero__subtitle{
  margin: 0 0 28px;
  font-size: clamp(16px, 1.6vw, 20px);
  color: rgba(255,255,255,0.70);
}

.hero__cta{
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-bottom: 26px;
}

.btn{
  font: inherit;
  cursor: pointer;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.92);

  padding: 14px 26px;
  border-radius: 12px;

  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 14px;

  min-width: 190px;
  text-align: center;

  position: relative;
  transition: transform 140ms ease, filter 140ms ease;
}

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

.btn--orange{
  border: 2px solid rgba(255, 160, 40, 0.85);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    0 0 18px rgba(255, 150, 35, 0.25);
  color: rgba(255, 180, 90, 0.95);
}

.btn--cyan{
  border: 2px solid rgba(40, 230, 255, 0.85);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.35),
    0 0 18px rgba(40, 230, 255, 0.22);
  color: rgba(130, 245, 255, 0.95);
}

/* disabled “coming soon” */
.btn:disabled{
  opacity: 0.55;
  cursor: not-allowed;
  filter: grayscale(10%);
}

.hero__community{
  margin: 0;
  color: rgba(255,255,255,0.70);
  font-size: 15px;
}

.hero__community a{
  color: rgba(60, 230, 255, 0.95);
  text-decoration: none;
}

.hero__community a:hover{
  text-decoration: underline;
}

.hero__legal{
  margin: 18px 0 0;
  color: rgba(255,255,255,0.40);
  font-size: 13px;
}

/* bottom-right tiny icon */
.corner-mark{
  position: fixed;
  right: 26px;
  bottom: 22px;
  width: 44px;
  opacity: 0.28;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
  z-index: 2;
}

/* Responsive tweaks */
@media (max-width: 700px){
  .nav{ padding: 18px 16px; }
  .nav__links{ gap: 16px; }
  .nav__link{ display: none; } /* keep it clean on mobile for now */
  .hero__cta{ flex-direction: column; gap: 14px; }
  .btn{ min-width: 240px; }
}

/* =========================
   ARCADE BOOT LOADER
========================= */

body.is-loading{
  background-image: none; /* black screen first */
  background-color: #000;
}

.loader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  display: grid;
  place-items: center;
}

.loader__panel{
  width: min(520px, 90vw);
  padding: 26px 22px;
  border-radius: 16px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 80px rgba(0,0,0,0.8);
  text-align: center;
  position: relative;
}

.loader__title{
  font-weight: 900;
  letter-spacing: 0.18em;
  font-size: 20px;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 0 18px rgba(60, 230, 255, 0.20);
}

.loader__subtitle{
  margin-top: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.70);
}

.loader__bar{
  margin-top: 16px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.10);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
}

.loader__barFill{
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,160,40,0.95), rgba(40,230,255,0.95));
  box-shadow: 0 0 20px rgba(40,230,255,0.20);
  transition: width 120ms linear;
}

.loader__hint{
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.08em;
}

/* scanlines + subtle CRT vibe */
.loader__scanlines{
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.06) 0px,
      rgba(255,255,255,0.06) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 6px
    );
  opacity: 0.12;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: scanMove 1.6s linear infinite;
}

@keyframes scanMove{
  from { transform: translateY(0); }
  to   { transform: translateY(8px); }
}

.loader__vignette{
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.05), rgba(0,0,0,0.85));
  pointer-events: none;
}

.loader--out{
  animation: loaderOut 900ms ease forwards;
}

@keyframes loaderOut{
  0%   { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* =========================
   INTRO ANIMATIONS (logo swoop)
========================= */

/* Hide everything during loading */
.is-loading .bg-overlay,
.is-loading .nav,
.is-loading .hero{
  opacity: 0;
}

/* When loaded, show background + run animations */
.is-loaded .bg-overlay,
.is-loaded .nav,
.is-loaded .hero{
  opacity: 1;
}

/* Base animation state */
.anim{
  opacity: 0;
  transform: translateY(10px);
  filter: blur(2px);
}

/* Logo swoop: comes from above + slight rotation */
.anim--logo{
  transform: translateY(-26px) scale(0.96) rotate(-1deg);
}

/* Corner mark */
.anim--corner{
  transform: translateY(10px) scale(0.96);
  opacity: 0;
}

/* Play animations once loaded */
.is-loaded .anim{
  animation: popIn 850ms cubic-bezier(.2,.9,.2,1) forwards;
}

/* Stagger timings */
.is-loaded .anim--nav{ animation-delay: 80ms; }
.is-loaded .anim--logo{ animation-delay: 160ms; }
.is-loaded .anim--title{ animation-delay: 300ms; }
.is-loaded .anim--sub{ animation-delay: 380ms; }
.is-loaded .anim--cta{ animation-delay: 480ms; }
.is-loaded .anim--community{ animation-delay: 600ms; }
.is-loaded .anim--legal{ animation-delay: 700ms; }
.is-loaded .anim--corner{ animation-delay: 760ms; }

@keyframes popIn{
  0%{
    opacity: 0;
    transform: translateY(10px) scale(0.98);
    filter: blur(2px);
  }
  55%{
    opacity: 1;
    transform: translateY(-2px) scale(1.01);
    filter: blur(0px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px) scale(1);
    filter: blur(0px);
  }
}

/* Extra “logo swoop” feel: little overshoot */
.is-loaded .anim--logo{
  animation-name: logoSwoop;
  animation-duration: 980ms;
}

@keyframes logoSwoop{
  0%{
    opacity: 0;
    transform: translateY(-34px) scale(0.94) rotate(-2deg);
    filter: blur(3px);
  }
  55%{
    opacity: 1;
    transform: translateY(6px) scale(1.02) rotate(0deg);
    filter: blur(0px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px) scale(1) rotate(0deg);
    filter: blur(0px);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .loader__scanlines,
  .loader--out,
  .is-loaded .anim{
    animation: none !important;
    transition: none !important;
  }
  .anim{ opacity: 1; transform: none; filter: none; }
}

.loader__hint{
  animation: blink 1.1s steps(2, end) infinite;
}

@keyframes blink{
  0%, 49% { opacity: 0.15; }
  50%, 100% { opacity: 0.85; }
}

/* =========================
   PRESS START INTRO SCREEN
========================= */

body.is-loading{
  background-image: none;
  background-color: #000;
}

.pressStart{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(circle at 50% 45%, #07020f 0%, #000 65%);
  overflow: hidden;
  opacity: 1;
  transition: opacity 700ms ease, transform 700ms ease;
}

.pressStart.ps--out{
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.ps__scanlines{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 7px
  );
  opacity: 0.10;
  mix-blend-mode: screen;
  animation: psScan 1.6s linear infinite;
}

@keyframes psScan{
  from { transform: translateY(0); }
  to { transform: translateY(10px); }
}

/* stars: simple animated noise field */
.ps__stars{
  position: absolute;
  inset: -40px;
  background-image:
    radial-gradient(rgba(255,255,255,0.9) 1px, transparent 1px),
    radial-gradient(rgba(255,80,170,0.55) 1px, transparent 1px),
    radial-gradient(rgba(80,220,255,0.55) 1px, transparent 1px);
  background-size: 120px 120px, 180px 180px, 240px 240px;
  background-position: 0 0, 40px 80px, 120px 30px;
  opacity: 0.18;
  animation: psStars 10s linear infinite;
  filter: blur(0.2px);
}

@keyframes psStars{
  from { transform: translateY(0); }
  to { transform: translateY(80px); }
}

/* perspective grid */
.ps__grid{
  position: absolute;
  left: 50%;
  top: 55%;
  width: 140vw;
  height: 90vh;
  transform: translateX(-50%) perspective(900px) rotateX(68deg);
  transform-origin: center top;
  background:
    repeating-linear-gradient(to right, rgba(120,80,255,0.35) 0 2px, transparent 2px 70px),
    repeating-linear-gradient(to bottom, rgba(120,80,255,0.35) 0 2px, transparent 2px 70px);
  opacity: 0.28;
  animation: psGrid 2.2s linear infinite;
  filter: drop-shadow(0 0 24px rgba(180,80,255,0.22));
}

@keyframes psGrid{
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 140px, 0 140px; }
}

/* HUD */
.ps__hud{
  position: absolute;
  top: 22px;
  left: 26px;
  right: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  font-family: "Press Start 2P", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ps__hudLabel{
  font-size: 12px;
  color: rgba(255,80,170,0.95);
  text-shadow: 0 0 18px rgba(255,80,170,0.25);
  margin-bottom: 6px;
}

.ps__hudValue{
  font-size: 14px;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 0 20px rgba(255,255,255,0.10);
}

.ps__hudCenter{
  text-align: center;
}

.ps__right{
  text-align: right;
}

.ps__hot{
  color: rgba(255,80,170,0.95);
}

/* Center text */
.ps__center{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -45%);
  text-align: center;
  font-family: "Press Start 2P", monospace;
  text-transform: uppercase;
}

.ps__title{
  font-size: clamp(34px, 4.4vw, 72px);
  color: rgba(255, 214, 60, 0.98);
  text-shadow:
    0 0 26px rgba(255, 214, 60, 0.22),
    0 0 60px rgba(255, 214, 60, 0.10);
  letter-spacing: 0.06em;
}

.ps__sub{
  margin-top: 18px;
  font-size: clamp(12px, 1.3vw, 18px);
  color: rgba(255,255,255,0.82);
  opacity: 0.85;
  animation: psBlink 1.1s steps(2, end) infinite;
}

@keyframes psBlink{
  0%, 49% { opacity: 0.15; }
  50%, 100% { opacity: 0.95; }
}

/* Credit */
.ps__credit{
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 20px rgba(255,80,170,0.14);
}

/* Hide your site content until start */
.is-loading .bg-overlay,
.is-loading .nav,
.is-loading .hero{
  opacity: 0;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .ps__scanlines, .ps__stars, .ps__grid, .ps__sub { animation: none !important; }
}

/* =========================
   INTRO: 3-STAGE ARCADE SEQUENCE
========================= */

:root{
  --pink: rgba(255,80,170,0.95);
  --cyan: rgba(80,220,255,0.95);
  --gold: rgba(255,214,60,0.98);
  --violet: rgba(150,100,255,0.70);
}

body.is-loading{
  background-image: none;
  background-color: #000;
}

/* overlay base */
.intro{
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(60,230,255,0.10), rgba(255,80,170,0.08), rgba(120,80,255,0.10)),
    radial-gradient(circle at 50% 40%, rgba(20,10,35,0.85) 0%, rgba(0,0,0,1) 60%),
    radial-gradient(circle at 20% 75%, rgba(40,120,255,0.20), transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(255,80,170,0.16), transparent 50%);
  opacity: 1;
  transition: opacity 520ms ease, transform 520ms ease;
}

/* cleaner transition out */
.intro.intro--out{
  opacity: 0;
  transform: translateY(-6px) scale(1.01);
  pointer-events: none;
}

/* CRT & scan effects */
.intro__crt{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,0.06), rgba(0,0,0,0.20)),
    linear-gradient(90deg, rgba(255,0,120,0.035), transparent 35%, rgba(0,220,255,0.035));
  filter: saturate(1.1);
  mix-blend-mode: screen;
  opacity: 0.55;
}

.intro__scanlines{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.06) 0px,
    rgba(255,255,255,0.06) 1px,
    rgba(0,0,0,0) 3px,
    rgba(0,0,0,0) 7px
  );
  opacity: 0.10;
  mix-blend-mode: screen;
  animation: introScan 1.4s linear infinite;
}

@keyframes introScan{
  from { transform: translateY(0); }
  to { transform: translateY(10px); }
}

.intro__vignette{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,0.05), rgba(0,0,0,0.88));
}

/* stars */
.intro__stars{
  position: absolute;
  inset: -40px;
  background-image:
    radial-gradient(rgba(255,255,255,0.95) 1px, transparent 1px),
    radial-gradient(rgba(255,80,170,0.60) 1px, transparent 1px),
    radial-gradient(rgba(80,220,255,0.55) 1px, transparent 1px);
  background-size: 120px 120px, 180px 180px, 240px 240px;
  background-position: 0 0, 40px 80px, 120px 30px;
  opacity: 0.18;
  animation: introStars 10s linear infinite;
  filter: blur(0.2px);
}

@keyframes introStars{
  from { transform: translateY(0); }
  to { transform: translateY(80px); }
}

/* grid */
.intro__grid{
  position: absolute;
  left: 50%;
  top: 56%;
  width: 140vw;
  height: 90vh;
  transform: translateX(-50%) perspective(900px) rotateX(68deg);
  transform-origin: center top;
  background:
    repeating-linear-gradient(to right, rgba(120,80,255,0.33) 0 2px, transparent 2px 70px),
    repeating-linear-gradient(to bottom, rgba(120,80,255,0.33) 0 2px, transparent 2px 70px);
  opacity: 0.28;
  animation: introGrid 2.0s linear infinite;
  filter: drop-shadow(0 0 26px rgba(180,80,255,0.22));
}

@keyframes introGrid{
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 140px, 0 140px; }
}

/* stronger HUD only on start */
.introHud{
  position: absolute;
  top: 22px;
  left: 26px;
  right: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  font-family: "Press Start 2P", monospace;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.15;
  transition: opacity 420ms ease;
}

.intro--start .introHud{ opacity: 0.95; }

.introHud__label{
  font-size: 12px;
  color: var(--pink);
  text-shadow: 0 0 18px rgba(255,80,170,0.25);
  margin-bottom: 6px;
}

.introHud__value{
  font-size: 14px;
  color: rgba(255,255,255,0.88);
  text-shadow: 0 0 20px rgba(255,255,255,0.10);
}

.introHud__center{ text-align: center; }
.introHud__right{ text-align: right; }
.introHud__hot{ color: var(--pink); }

/* screens */
.screen{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(8px);
  filter: blur(2px);
  pointer-events: none;
  transition: opacity 420ms ease, transform 420ms ease, filter 420ms ease;
}

.screen.is-active{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

.screen__center{
  text-align: center;
  font-family: "Press Start 2P", monospace;
  text-transform: uppercase;
  position: relative;
}

/* big titles */
.pixelTitle{
  letter-spacing: 0.06em;
  text-shadow:
    0 0 30px rgba(255,255,255,0.08),
    0 0 70px rgba(0,0,0,0.35);
  position: relative;
}

/* chromatic “arcade glow” */
.pixelTitle::before,
.pixelTitle::after{
  content: attr(class);
  display: none;
}

.pixelTitle--big{
  font-size: clamp(30px, 4vw, 62px);
  color: var(--gold);
  text-shadow:
    0 0 26px rgba(255,214,60,0.20),
    0 0 70px rgba(255,214,60,0.10);
}

.pixelTitle--huge{
  font-size: clamp(34px, 4.7vw, 76px);
  color: var(--gold);
  text-shadow:
    0 0 26px rgba(255,214,60,0.22),
    0 0 80px rgba(255,214,60,0.12);
  animation: titleFlicker 4.2s infinite;
}

/* subtle flicker */
@keyframes titleFlicker{
  0%, 100% { filter: brightness(1); }
  92% { filter: brightness(1); }
  93% { filter: brightness(1.25); }
  94% { filter: brightness(0.9); }
  95% { filter: brightness(1.2); }
  96% { filter: brightness(1); }
}

.pixelSub{
  margin-top: 16px;
  font-size: clamp(12px, 1.4vw, 18px);
  color: rgba(255,255,255,0.84);
  text-shadow: 0 0 20px rgba(80,220,255,0.10);
}

.pixelHint{
  margin-top: 18px;
  font-size: clamp(11px, 1.2vw, 16px);
  color: rgba(255,255,255,0.82);
  opacity: 0.85;
}

.pixelHint--blink{
  animation: blink 1.1s steps(2, end) infinite;
}

@keyframes blink{
  0%, 49% { opacity: 0.15; }
  50%, 100% { opacity: 0.95; }
}

/* coin stage extras */
.coinRow{
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
}

.coinChip{
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.55), rgba(255,214,60,0.95) 40%, rgba(255,80,170,0.55));
  box-shadow: 0 0 16px rgba(255,214,60,0.20);
  animation: coinSpin 1.2s linear infinite;
}

@keyframes coinSpin{
  0%{ transform: rotateY(0deg); }
  100%{ transform: rotateY(360deg); }
}

.coinText{
  font-size: 12px;
  color: rgba(255,255,255,0.82);
}

/* coin flash + micro shake */
.intro--coinFlash{
  animation: coinFlash 180ms ease;
}
@keyframes coinFlash{
  0%{ filter: brightness(1); transform: translateY(0); }
  45%{ filter: brightness(1.35); transform: translateY(1px); }
  100%{ filter: brightness(1); transform: translateY(0); }
}

/* presents stage */
.presentsText{
  display: grid;
  gap: 10px;
  align-items: center;
  justify-items: center;
}

.presentsSmall{
  font-size: clamp(12px, 1.4vw, 18px);
  color: rgba(255,255,255,0.72);
  letter-spacing: 0.12em;
}

.presentsBig{
  font-size: clamp(26px, 3.5vw, 54px);
  color: rgba(255,255,255,0.92);
  letter-spacing: 0.10em;
  text-shadow: 0 0 30px rgba(80,220,255,0.16);
  animation: presentsPop 900ms cubic-bezier(.2,.9,.2,1) both;
}

@keyframes presentsPop{
  0%{ opacity: 0; transform: translateY(10px) scale(0.98); filter: blur(3px); }
  60%{ opacity: 1; transform: translateY(-2px) scale(1.01); filter: blur(0); }
  100%{ opacity: 1; transform: translateY(0) scale(1); }
}

.presentsSweep{
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      transparent 0%,
      transparent 44%,
      rgba(255,255,255,0.10) 49%,
      rgba(80,220,255,0.14) 50%,
      rgba(255,80,170,0.10) 51%,
      transparent 56%,
      transparent 100%
    );

  opacity: 0;
  transform: translateX(-140%);
  filter: blur(0.35px);
  will-change: transform, opacity;
  animation: sweep 900ms ease forwards;
}

/* IMPORTANT: fade out before the edge */
@keyframes sweep{
  0%   { transform: translateX(-140%); opacity: 0; }
  12%  { opacity: 0.85; }
  78%  { opacity: 0.85; }
  100% { transform: translateX(140%); opacity: 0; }
}



@keyframes sweep{
  to{ transform: translateX(80%); }
}

/* bottom credit */
.bottomCredit{
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 20px rgba(255,80,170,0.14);
}
.hot{ color: var(--pink); }

/* Hide the main site until intro is done */
.is-loading .bg-overlay,
.is-loading .nav,
.is-loading .hero{
  opacity: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .intro__scanlines,
  .intro__stars,
  .intro__grid,
  .coinChip,
  .pixelTitle--huge{
    animation: none !important;
  }
}

/* =========================
   NEXT LEVEL UPGRADES
========================= */

/* Ghost logo behind PRESS START */
.startGhostLogo{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1.05);
  width: min(720px, 92vw);
  opacity: 0;
  filter: blur(1.4px) saturate(1.1) drop-shadow(0 0 60px rgba(80,220,255,0.10));
  transition: opacity 520ms ease, transform 520ms ease;
  pointer-events: none;
}

/* Reveal ghost logo only on start screen */
.intro--start .startGhostLogo{
  opacity: 0.16;
  transform: translate(-50%, -52%) scale(1.03);
}

/* When user hits start, logo flashes a bit (JS toggles .intro--logoFlash) */
.intro.intro--logoFlash .startGhostLogo{
  opacity: 0.28;
  filter: blur(1.2px) saturate(1.15) drop-shadow(0 0 90px rgba(255,214,60,0.12));
}

/* Micro screen shake + flash (JS toggles these classes) */
.intro.intro--punch{
  animation: punch 160ms ease;
}
@keyframes punch{
  0%{ transform: translate(0,0); }
  25%{ transform: translate(1px, 0px); }
  50%{ transform: translate(-1px, 1px); }
  75%{ transform: translate(1px, -1px); }
  100%{ transform: translate(0,0); }
}

.intro.intro--flash{
  animation: flash 180ms ease;
}
@keyframes flash{
  0%{ filter: brightness(1); }
  35%{ filter: brightness(1.25); }
  100%{ filter: brightness(1); }
}

/* Glitch effect (JS toggles .glitchNow on the PRESS START title) */
.glitchNow{
  text-shadow:
    2px 0 0 rgba(255,80,170,0.35),
    -2px 0 0 rgba(80,220,255,0.30),
    0 0 24px rgba(255,214,60,0.12);
  transform: translateY(-1px);
}

/* Sound hint */
.soundHint{
  margin-top: 16px;
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.06em;
}

/* Clean “enter site” polish: one-time CTA glow pulse on load */
.is-loaded .btn--orange,
.is-loaded .btn--cyan{
  animation: ctaPulse 900ms ease 1;
}
@keyframes ctaPulse{
  0%{ filter: brightness(1); transform: translateY(0); }
  40%{ filter: brightness(1.15); transform: translateY(-1px); }
  100%{ filter: brightness(1); transform: translateY(0); }
}

/* =========================
   SITE FX: particles + wake-up
========================= */

.fx-canvas{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;              /* behind everything */
  pointer-events: none;
  opacity: 0;              /* fades in on wake */
  transition: opacity 900ms ease;
}

.bg-overlay{
  z-index: 1;
}

.site-wake{
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;

  /* a quick “power on” bloom + scanline shimmer */
  background:
    radial-gradient(circle at 50% 45%, rgba(80,220,255,0.18), transparent 55%),
    radial-gradient(circle at 55% 55%, rgba(255,80,170,0.14), transparent 55%),
    radial-gradient(circle at 50% 50%, rgba(255,214,60,0.10), transparent 60%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,0.10) 0px,
      rgba(255,255,255,0.10) 1px,
      rgba(0,0,0,0) 4px,
      rgba(0,0,0,0) 9px
    );
  filter: blur(0.6px);
}

/* when site becomes visible, particles fade in */
.is-loaded .fx-canvas{
  opacity: 0.65;
}

/* wake animation fires once */
.is-loaded .site-wake{
  animation: siteWake 1200ms ease forwards;
}

@keyframes siteWake{
  0%   { opacity: 0; transform: scale(1.01); filter: blur(1.2px) brightness(1.0); }
  18%  { opacity: 0.90; transform: scale(1);    filter: blur(0.6px) brightness(1.25); }
  55%  { opacity: 0.35;                         filter: blur(0.5px) brightness(1.08); }
  100% { opacity: 0;                            filter: blur(0.6px) brightness(1.0); }
}

/* reduced motion: keep subtle, no animation */
@media (prefers-reduced-motion: reduce){
  .fx-canvas{ display: none; }
  .is-loaded .site-wake{ animation: none !important; opacity: 0; }
}

/* QUICK LOAD SCREEN */
.screen--boot{
  background: radial-gradient(circle at 50% 45%, rgba(80,220,255,0.06), transparent 55%);
}

.bootTitle{
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 0 22px rgba(80,220,255,0.12);
}

.bootBar{
  margin: 18px auto 0;
  width: min(420px, 80vw);
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
}

.bootBarFill{
  height: 100%;
  width: 100%;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(255,154,31,0.9), rgba(80,220,255,0.9));
  animation: bootFill 620ms ease forwards;
}

@keyframes bootFill{
  to{ transform: translateX(0%); }
}

/* =========================
   MUSIC MINI PLAYER (CLEAN)
========================= */
#bgMusic{ display:none !important; }

.musicMini{
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 99999;
  display: flex;
  align-items: flex-end;
  gap: 10px;
  pointer-events: auto;
}

.musicMini.is-hidden{ display:none; }

/* always-visible handle */
.musicMini__handle{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
  box-shadow: 0 18px 70px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}

.musicMini__handle:hover{ background: rgba(0,0,0,0.45); }

.musicMini__panel{
  width: 280px;
  max-width: calc(100vw - 90px);

  display: flex;
  gap: 12px;
  align-items: center;

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

  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);

  box-shadow:
    0 18px 70px rgba(0,0,0,0.50),
    inset 0 1px 0 rgba(255,255,255,0.06);

  transform-origin: bottom left;
  transition: opacity 180ms ease, transform 180ms ease;
}

.musicMini.is-collapsed .musicMini__panel{
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  pointer-events: none;
}

.musicMini__icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  object-fit: contain;          /* <<< important */
  padding: 6px;                 /* <<< gives breathing room */
  background: rgba(0,0,0,0.25); /* subtle backing */
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.musicMini__main{ flex: 1; min-width: 0; }

.musicMini__top{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.musicMini__text{ min-width: 0; }

.musicMini__title{
  font-size: 12px;
  font-weight: 800;
  color: rgba(255,255,255,0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.musicMini__author{
  margin-top: 2px;
  font-size: 11px;
  color: rgba(255,255,255,0.60);
}

/* equalizer */
.musicMini__eq{
  margin-left: 0;
  display: inline-flex;
  align-items: flex-end;
  gap: 3px;
  height: 14px;
  opacity: 0.9;
}

.musicMini__eq span{
  width: 3px;
  height: 6px;
  border-radius: 2px;
  background: rgba(80,220,255,0.70);
  animation: eq 900ms ease-in-out infinite;
  animation-play-state: paused;
}

.musicMini__eq span:nth-child(2){ animation-duration: 760ms; background: rgba(255,214,60,0.65); }
.musicMini__eq span:nth-child(3){ animation-duration: 980ms; background: rgba(255,80,170,0.60); }
.musicMini__eq span:nth-child(4){ animation-duration: 820ms; background: rgba(90,235,140,0.60); }
.musicMini__eq span:nth-child(5){ animation-duration: 1040ms; background: rgba(160,110,255,0.58); }

.musicMini.is-playing .musicMini__eq span{ animation-play-state: running; }

@keyframes eq{
  0%{ height: 4px; opacity: 0.65; }
  30%{ height: 14px; opacity: 1; }
  60%{ height: 6px; opacity: 0.75; }
  100%{ height: 10px; opacity: 0.90; }
}

/* progress row */
.musicMini__bar{
  display: flex;
  align-items: right;
  margin-top: 6px;   /* tighter */
}

.musicMini__progress{
  --p: 0%;
  flex: 1;
  height: 6px;
  border-radius: 999px;
  outline: none;
  -webkit-appearance: none;
  appearance: none;

  background: linear-gradient(
    90deg,
    rgba(80,220,255,0.85) 0%,
    rgba(255,214,60,0.55) var(--p),
    rgba(255,255,255,0.10) var(--p),
    rgba(255,255,255,0.10) 100%
  );
}

.musicMini__progress::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.90);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 18px rgba(0,0,0,0.40);
  cursor: pointer;
}

.musicMini__time{
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  min-width: 64px;   /* tighter */
  text-align: right;
}

.musicMini__slash{ opacity: 0.35; padding: 0 4px; }

/* controls */
.musicMini__controls{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.musicMini__btn{
  height: 32px;
  width: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  cursor: pointer;
}

.musicMini__btn:hover{ background: rgba(255,255,255,0.10); }

.musicMini__btn--play{
  background: rgba(80,220,255,0.10);
  border-color: rgba(80,220,255,0.22);
}

.musicMini__btn--play:hover{ background: rgba(80,220,255,0.14); }

.musicMini__spacer{ flex: 1; }