/* =========================
   DXZED PLANET – GLOBAL STYLE
   ========================= */

/* FONT */
@font-face {
  font-family: 'VT323';
  src: url('../public/fonts/VT323-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* ROOT VARIABLES */
:root {
  --main-yellow: #FFD700;
  --main-white: #f0f0f0;
  --bg-black: #000;

  /* ── CUSTOMIZABLE IMAGE SIZE ── */
  --logo-width: 940px;           /* desktop logo width  */
  --logo-width-tablet: 92vw;     /* tablet (601–900px)  */
  --logo-width-mobile: 300vw;    /* phone (≤600px)      */

  /* ── CUSTOMIZABLE MENU ── */
  --menu-font-size: 2.2rem;      /* desktop menu items  */
  --menu-font-size-mobile: 1.6rem; /* phone menu items  */
  --menu-gap: 10px;              /* gap between items   */
  --menu-offset-x: 20px;        /* horizontal nudge    */
  --menu-offset-y: -10px;       /* vertical nudge      */
}

/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: crosshair;
}

/* BODY */
body {
  background: var(--bg-black);
  color: var(--main-white);
  font-family: 'VT323', monospace;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-transform: uppercase;
}

/* =========================
   CRT EFFECTS
   ========================= */

/* Scanlines */
body::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%),
    linear-gradient(
      90deg,
      rgba(255,0,0,0.06),
      rgba(0,255,0,0.02),
      rgba(0,0,255,0.06)
    );
  background-size: 100% 2px, 3px 100%;
  pointer-events: none;
  z-index: 10;
}

/* Flicker */
@keyframes flicker {
  0%   { opacity: 0.97; }
  50%  { opacity: 1; }
}

.screen {
  animation: flicker 0.15s infinite;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  z-index: 2;
}

/* =========================
   LOGO
   ========================= */

.container-img {
  width: var(--logo-width);
  max-width: 98vw;
  margin-bottom: 12px;
  animation: hoverFloat 1.5s ease-in-out infinite;
}

@keyframes hoverFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* =========================
   MENU
   ========================= */

.menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--menu-gap);
  opacity: 0;
  transform: translate(var(--menu-offset-x), var(--menu-offset-y)) scale(0.9);
}

.menu-list.show {
  animation: popIn 0.35s ease-out forwards;
}

@keyframes popIn {
  100% {
    opacity: 1;
    transform: translate(var(--menu-offset-x), var(--menu-offset-y)) scale(1);
  }
}

.menu-item {
  text-decoration: none;
  font-size: var(--menu-font-size);
  color: var(--main-white);
  position: relative;
  transition: 0.15s;
}

.menu-item:hover::before {
  content: ">";
  position: absolute;
  left: -28px;
  color: var(--main-yellow);
}

.menu-item:hover {
  color: var(--main-yellow);
  transform: translateX(8px);
  text-shadow: 0 0 8px var(--main-yellow);
}

.shop-btn {
  color: var(--main-yellow);
}

/* =========================
   INSERT COIN
   ========================= */

.coin {
  margin-top: 14px;
  font-size: 1.2rem;
  color: #555;
  opacity: 0;
  transform: translate(20px, -10px);
}

.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% { opacity: 0; }
}

/* =========================
   FOOTER
   ========================= */

.footer {
  position: fixed;
  bottom: 14px;
  width: 100%;
  text-align: center;
  font-size: 1.3rem;
  color: #666;
  z-index: 3;
}

.footer a {
  color: #777;
  text-decoration: none;
  margin: 0 14px;
}

.footer a:hover {
  color: var(--main-yellow);
  text-shadow: 0 0 6px var(--main-yellow);
}

/* =========================
   CRT SHUTDOWN
   ========================= */

.shutdown {
  animation: crtOff 0.6s ease-in forwards;
}

@keyframes crtOff {
  0%   { transform: scaleY(1);    opacity: 1; }
  60%  { transform: scaleY(0.02); opacity: 1; }
  100% { transform: scaleY(0);    opacity: 0; }
}

/* =========================
   TELEPORT ANIMATION
   (shared by all breakpoints)
   ========================= */

@keyframes teleportIn {
  0%   { opacity: 0;    transform: scale(0)    rotate(-15deg); filter: brightness(8) blur(6px); }
  20%  { opacity: 1;    transform: scale(1.12) rotate(3deg);   filter: brightness(4) blur(2px); }
  40%  { opacity: 0.6;  transform: scale(0.95) rotate(-2deg);  filter: brightness(6) blur(1px); }
  60%  { opacity: 1;    transform: scale(1.05) rotate(1deg);   filter: brightness(3) blur(0px); }
  80%  { opacity: 0.85; transform: scale(0.98);                filter: brightness(1.5); }
  100% { opacity: 1;    transform: scale(1)    rotate(0deg);   filter: brightness(1); }
}

@keyframes twinkle {
  0%   { filter: brightness(2); }
  100% { filter: brightness(1); }
}

/* =========================
   RESPONSIVE – TABLET
   (601px – 900px)
   ========================= */

@media (max-width: 900px) {
  .container-img {
    width: var(--logo-width-tablet);
    max-width: 98vw;
    animation:
      teleportIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards,
      twinkle    1.1s ease-out 0.2s forwards,
      hoverFloat 1.5s ease-in-out 1.1s infinite;
  }
}

/* =========================
   RESPONSIVE – MOBILE / PHONE
   (≤ 600px)
   ========================= */

@media (max-width: 600px) {
  .container-img {
    width: var(--logo-width-mobile);
    max-width: 100vw;
    animation:
      teleportIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards,
      twinkle    1.1s ease-out 0.2s forwards,
      hoverFloat 1.5s ease-in-out 1.1s infinite;
  }

  .container-img img {
    width: 100%;
    height: auto;
    display: block;
  }

  .menu-item {
    font-size: var(--menu-font-size-mobile);
  }

  .coin {
    font-size: 0.85rem;
  }

  .footer {
    font-size: 0.9rem;
  }

  .footer a {
    margin: 0 8px;
  }
}