/* ── Reset ── */
*, *::before, *::after { box-sizing:border-box; -webkit-tap-highlight-color:transparent; touch-action:none; }
html {
  height: -webkit-fill-available;
}
body {
  margin:0; padding:0; overflow:hidden;
  width:100vw;
  height: 100vh;
  height: -webkit-fill-available;
  height: 100dvh;
  background:#000;
  -webkit-user-select:none; user-select:none;
  font-family:'Courier New',monospace;
}
/* p5 canvas: cover entire screen absolutely */
canvas {
  display:block;
  position:fixed !important;
  top:0 !important; left:0 !important;
  width:100vw !important;
  height:100vh !important;
  height:100dvh !important;
  touch-action:none; z-index:0 !important;
}
input[type="text"] { font-size:16px !important; }

/* ════════════════════════════════════════
   INTRO SCREEN — full canvas
════════════════════════════════════════ */
#intro-screen {
  position: fixed;
  inset: 0;
  z-index: 500;
  transition: opacity 0.4s ease;
}
#intro-screen.fade-out { opacity: 0; pointer-events: none; }

#intro-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  touch-action: auto !important;
  cursor: pointer;
}

/* ════════════════════════════════════════
   PORTRAIT ROTATE OVERLAY
════════════════════════════════════════ */
#rotate-overlay {
  display:none;
  position:fixed; inset:0; z-index:9999;
  background:#000;
  flex-direction:column; align-items:center; justify-content:center;
  color:#fff; text-align:center; gap:20px;
}
#rotate-overlay .rotate-icon {
  font-size:64px;
  animation:rotSpin 1.6s ease-in-out infinite;
}
#rotate-overlay p {
  font-size:12px; letter-spacing:0.3em;
  text-transform:uppercase; opacity:0.6; margin:0;
}
@keyframes rotSpin {
  0%   { transform:rotate(0deg); }
  40%  { transform:rotate(90deg); }
  60%  { transform:rotate(90deg); }
  100% { transform:rotate(0deg); }
}
@media (max-width:900px) and (orientation:portrait) {
  #rotate-overlay { display:flex; }
}

/* ════════════════════════════════════════
   END GAME BUTTONS
════════════════════════════════════════ */
#endBtns {
  position: fixed;
  left: 50%;
  bottom: 6%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  white-space: nowrap;
}

.end-btn {
  font-family: 'Courier New', monospace;
  font-weight: bold;
  letter-spacing: 0.12em;
  font-size: clamp(10px, 2.2vw, 13px);
  padding: clamp(8px,1.5vh,12px) clamp(14px,3vw,22px);
  cursor: pointer;
  border-radius: 0;
  touch-action: auto;
  transition: transform 0.08s, box-shadow 0.08s;
}
.end-btn:active {
  transform: translate(2px, 2px);
}

.end-btn-play {
  background: #000;
  color: #00ff89;
  border: 2px solid #00ff89;
  box-shadow: 3px 3px 0 #004422, 0 0 16px rgba(0,255,137,0.2);
  animation: playPulse 2s ease-in-out infinite alternate;
}
.end-btn-play:hover { background: #00ff89; color: #000; }

.end-btn-share {
  background: #000;
  color: #1d9bf0;
  border: 2px solid #1d9bf0;
  box-shadow: 3px 3px 0 #0a3050;
}
.end-btn-share:hover { background: #1d9bf0; color: #000; }

@keyframes playPulse {
  from { box-shadow: 3px 3px 0 #004422, 0 0 8px rgba(0,255,137,0.15); }
  to   { box-shadow: 3px 3px 0 #004422, 0 0 22px rgba(0,255,137,0.45); }
}
#pulse-container {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
}

.touch-pulse {
  position: absolute;
  width: 0; height: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.touch-pulse::before,
.touch-pulse::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #00ff89;
  animation: pulseRing 0.65s ease-out forwards;
}
.touch-pulse::after {
  animation-delay: 0.1s;
  border-color: rgba(0,255,137,0.5);
  animation-duration: 0.55s;
}
@keyframes pulseRing {
  0%   { width: 0px;   height: 0px;   opacity: 1; }
  100% { width: 80px;  height: 80px;  opacity: 0; }
}

/* ════════════════════════════════════════
   TUTORIAL OVERLAY
════════════════════════════════════════ */
#tutorial {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(0,0,0,0.5);
  font-family: 'Courier New', monospace;
}
#tut-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tut-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.tut-zone {
  color: rgba(0,255,137,0.9);
  font-size: clamp(9px, 2vw, 13px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 7px 12px;
  border: 1px solid rgba(0,255,137,0.35);
  background: rgba(0,0,0,0.55);
  white-space: nowrap;
  box-shadow: inset -2px -2px 0 rgba(0,255,137,0.15), inset 2px 2px 0 rgba(0,255,137,0.05);
  animation: tutPulse 1s ease-in-out infinite alternate;
}
.tut-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.tut-ape {
  width: clamp(40px, 8vw, 64px) !important;
  height: clamp(40px, 8vw, 64px) !important;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  position: relative !important;
  top: auto !important; left: auto !important;
  filter: drop-shadow(0 0 8px rgba(0,255,137,0.6));
  animation: floatApe 2s ease-in-out infinite;
}
@keyframes tutPulse {
  from { border-color: rgba(0,255,137,0.2); }
  to   { border-color: rgba(0,255,137,0.8); box-shadow: 0 0 10px rgba(0,255,137,0.3); }
}
@keyframes floatApe {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}
#tut-label {
  color: rgba(255,255,255,0.5);
  font-size: clamp(7px, 1.6vw, 11px);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  animation: blinkLabel 1.2s step-end infinite;
}
@keyframes blinkLabel {
  0%,100%{ opacity:0.5; } 50%{ opacity:0.1; }
}