@font-face {
  font-family: "Maytorm";
  src: url("fonts/Maytorm-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

body {
  background: #000;
  overflow: hidden;
  font-family: "Courier New", Courier, monospace;
  -webkit-text-size-adjust: 100%;
}

#scene {
  position: fixed;
  inset: 0;
  background: #000;
}

#treeImg {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  object-fit: contain;
  object-position: center;
  image-rendering: pixelated;
  z-index: 1;
}

/* Apples: keep your glow */
#apples .apple {
  position: absolute;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  image-rendering: pixelated;
  z-index: 5;

  filter:
    drop-shadow(0 0 6px #ffd700)
    drop-shadow(0 0 12px #f4d03f)
    drop-shadow(0 0 20px #ffb700);
  animation: goldGlow 3s infinite alternate;
}

#apples .apple.falling { pointer-events: none; }

@keyframes goldGlow {
  from {
    filter:
      drop-shadow(0 0 4px #ffd700)
      drop-shadow(0 0 10px #f4d03f)
      drop-shadow(0 0 16px #ffa500);
  }
  to {
    filter:
      drop-shadow(0 0 8px #ffd700)
      drop-shadow(0 0 14px #f4d03f)
      drop-shadow(0 0 24px #ffe066);
  }
}

/* Side titles */
#leftSideTitle,
#rightSideTitle {
  position: absolute;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Maytorm", "Courier New", Courier, monospace;
  color: #e80101;
  letter-spacing: 3px;
  text-shadow: 2px 2px 0 #000, 0 0 18px rgba(255, 0, 0, 0.35);
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
}
#leftSideTitle { transform: rotate(180deg); }

/* PORTAL (visible for now; JS positions it so it stays glued to the GIF) */
#portalHotspot {
  position: absolute;
  width: 28px;   /* JS will overwrite size */
  height: 28px;  /* JS will overwrite size */
  left: 0;       /* JS will overwrite */
  top: 0;        /* JS will overwrite */
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 20;

  border: none;
  background: transparent;
  box-shadow: none;
}

#portalHotspot::before,
#portalHotspot::after {
  content: none;
}
/*#portalHotspot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: rgba(255, 0, 255, 0.95);
  transform: translate(-50%, -50%);
}

#portalHotspot::before { width: 18px; height: 2px; }
#portalHotspot::after  { width: 2px; height: 18px; }

/* Cursor trail */
.trail-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, #7d1226 0%, #7d1226 40%, #c8a24b 100%);
  opacity: 0.9;
  animation: trailFade 0.6s forwards;
  z-index: 1000;
}

@keyframes trailFade {
  from { transform: scale(1); opacity: 0.9; }
  to   { transform: scale(0.2); opacity: 0; }
}

.retro-player { display:flex; align-items:center; gap:14px; }
.retro-btn { background: transparent; border: 0; padding: 0; cursor: pointer; }
.retro-icon { display:block; width: 240px; height: auto; image-rendering: pixelated; }

#signInWrap {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 30;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

#signInWrap .mt-btn {
  display: inline-block;
  padding: 10px 12px;
  border: 3px outset #c0c0c0;
  background: #bfbfbf;
  color: #000;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  font-family: "Courier New", monospace;
}

#signInWrap .mt-btn:active { border-style: inset; }

@media (pointer: coarse) {
  #apples .apple {
    width: clamp(56px, 11vw, 82px);
    height: clamp(56px, 11vw, 82px);
    touch-action: manipulation;
  }

  #portalHotspot {
    min-width: 36px;
    min-height: 36px;
    touch-action: manipulation;
  }

  #signInWrap {
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }

  #signInWrap .mt-btn {
    min-height: 40px;
  }
}

@media (max-width: 480px) {
  #apples .apple {
    width: 52px;
    height: 52px;
  }

  #signInWrap .mt-btn {
    font-size: 13px !important;
    padding: 8px 10px !important;
  }
}