/* ====== PAGE LOCK + VIEW CONTROL ====== */

/* Lock page at 100% and remove all scrollbars */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;           /* disables scrollbars and wheel scrolling */
  height: 100%;
  width: 100%;
  overscroll-behavior: none;  /* stops mobile bounce */
  background: #0b0c10;        /* fallback background for game canvas */
}

/* Prevent scaling or double-tap zoom on touch devices */
body, html {
  touch-action: manipulation;
}

/* Prevent text selection or dragging (cleaner game feel) */
* {
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  box-sizing: border-box;
}

/* Optional: smoother fonts and fallback text color */
body {
  font-family: system-ui, sans-serif;
  color: #e6e6e6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Ensure the game canvas and overlays always fill the screen */
canvas, .wrap, .overlay {
  max-width: 100%;
  max-height: 100%;
}

/* ====== END PAGE LOCK ====== */


/* ===== GLOBAL RESET ===== */
html, body {
  height: 100%;
  margin: 0;
  background: #0b0c10;
  color: #e6e6e6;
  font-family: system-ui, Segoe UI, Roboto, Arial, sans-serif;
  overflow: hidden;
}

/* ===== GAME WRAPPER ===== */
.wrap {
  display: grid;
  place-items: center;
  height: 100%;
  gap: 12px;
}

canvas {
  background: #111318;
  image-rendering: pixelated;
  border: 0; /* removed visible border */
}

.hint {
  opacity: 0.7;
  font-size: 14px;
}

/* ===== OVERLAYS ===== */
.overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 10;
  transition: opacity 0.3s ease;
  background: rgba(0, 0, 0, 0.8);
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

/* ===== INTRO ===== */
.intro-layer {
  position: relative;
  width: 100%;
  height: 100%;
  background: radial-gradient(1200px 800px at 50% 60%, rgba(0,0,0,.35), rgba(0,0,0,.92));
  display: grid;
  place-items: center;
  overflow: hidden;
}

.intro-img {
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.45));
  animation: imgIn .6s ease-out both;
}

@keyframes imgIn {
  from { transform: scale(1.02); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.intro-text {
  position: absolute;
  inset: auto 0 15vh 0;
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 0 24px;
}

.line {
  background: linear-gradient(90deg, #fff 0%, #ff6666 40%, #fff 80%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fadeLine .8s ease-out forwards, sweepRed 10s linear infinite, flare 10s ease-in-out infinite;
  font-size: clamp(16px, 2.1vw, 26px);
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
}

.line.l2 { animation-delay: .55s, .55s, .55s; }
.line.l3 { animation-delay: 1.05s, 1.05s, 1.05s; }
.line.l4 { animation-delay: 1.55s, 1.55s, 1.55s; }

@keyframes fadeLine { to { opacity: 1; transform: translateY(0); } }
@keyframes sweepRed { 0% { background-position: -150% 0; } 100% { background-position: 150% 0; } }
@keyframes flare { 0%,100% { filter: brightness(1); } 45%,55% { filter: brightness(1.8); } }

.press-enter {
  margin-top: 22px;
  font-size: clamp(14px, 1.7vw, 20px);
  letter-spacing: .2px;
  opacity: 0;
  color: #fff;
  animation: fadeBlink 1.1s ease-out 2.05s forwards, blink 1.8s ease-in-out 3.2s infinite alternate;
}
@keyframes fadeBlink { to { opacity: 1; } }
@keyframes blink { from { opacity: .95; } to { opacity: .55; } }

/* ===== MENU ===== */
.panel {
  max-width: 760px;
  padding: 40px 50px;
  background: #111318;
  border: 1px solid #2b2f36;
  border-radius: 12px;
  box-shadow: 0 0 40px rgba(0,0,0,.6);
  text-align: center;
}

h2 {
  margin: 0 0 10px;
  font-size: 34px;
  color: #ffe680;
}

p {
  margin: 8px 0;
  line-height: 1.5;
}

.statline {
  margin-top: 12px;
  font-size: 15px;
}