* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
body {
  background: radial-gradient(circle at top, #101020, #020308 60%, #000);
  color: #ffffff;
  height: 100vh;
  overflow: hidden;
}
#game-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
}
#canvas-container {
  position: absolute;
  inset: 0;
}
canvas {
  display: block;
}
#hud {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(4, 6, 20, 0.9);
  box-shadow: 0 8px 25px rgba(0,0,0,0.6);
  z-index: 10;
}

/* Cinematic big title */
#big-title{
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  padding: 6px 14px;
  font-size: clamp(20px, 5vw, 64px);
  background: linear-gradient(90deg, #ff4b81 0%, #ffc857 30%, #3af5ff 60%, #9bffb8 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; /* ensures WebKit paints the background clipped text */
  color: transparent;
  mix-blend-mode: screen;
  pointer-events: none;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,0.7));
  /* Shimmer runs continuously; tremble is now intermittent bursts (longer cycle) */
  animation: shimmer 3.2s linear infinite, tremble 6s ease-in-out infinite;
}

@keyframes shimmer{
  0%{ background-position: 0% 50%; }
  100%{ background-position: 200% 50%; }
}

@keyframes tremble{
  /* mostly steady, with short bursts at various points of the cycle to feel "random" */
  0%, 10%, 19.9%, 30%, 49.9%, 70%, 100% { transform: translateX(-50%) translateY(0) rotate(0deg); }
  2%  { transform: translateX(-50%) translateY(-2px) rotate(-1deg); }
  3.5% { transform: translateX(-50%) translateY(1.5px) rotate(0.6deg); }
  22% { transform: translateX(-50%) translateY(-1.6px) rotate(-0.8deg); }
  23.5% { transform: translateX(-50%) translateY(0.9px) rotate(0.5deg); }
  50% { transform: translateX(-50%) translateY(-2px) rotate(-1.2deg); }
  51.8% { transform: translateX(-50%) translateY(1.2px) rotate(0.7deg); }
  72% { transform: translateX(-50%) translateY(-0.8px) rotate(-0.4deg); }
}

/* Slightly raise HUD so it doesn't overlap the title */
#hud{ top: 70px; }
.hud-block {
  padding: 4px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  text-align: center;
  min-width: 60px;
}
.label {
  font-size: 9px;
  text-transform: uppercase;
  opacity: 0.7;
}
.value {
  font-size: 15px;
  font-weight: 700;
}
.overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 20;
  background: radial-gradient(circle at top, rgba(10,10,30,0.92), rgba(0,0,0,0.96));
}
.overlay.visible {
  display: flex;
}
.panel {
  padding: 20px 26px;
  border-radius: 18px;
  background: rgba(5,8,25,0.96);
  box-shadow: 0 16px 40px rgba(0,0,0,0.85);
  text-align: center;
  max-width: 360px;
}
h1 {
  font-size: 30px;
  margin-bottom: 8px;
  background: linear-gradient(to right, #ff4b81, #ffc857, #3af5ff);
  -webkit-background-clip: text;
  color: transparent;
}
h2 {
  font-size: 24px;
  margin-bottom: 8px;
}
.panel p {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 8px;
}
.panel ul {
  list-style: none;
  padding: 0;
  margin: 6px 0 14px;
  font-size: 12px;
  opacity: 0.9;
}
.panel li { margin: 2px 0; }
button {
  padding: 9px 22px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: #050812;
  background: linear-gradient(135deg, #ff4b81, #ffc857, #3af5ff);
  box-shadow: 0 10px 26px rgba(0,0,0,0.8);
}
button:hover { transform: translateY(-1px); box-shadow: 0 16px 34px rgba(0,0,0,0.9); }
button:active { transform: translateY(1px); box-shadow: 0 6px 16px rgba(0,0,0,1); }

/* download button style */
.download-btn{
  display:inline-block;
  margin-top:12px;
  padding:8px 12px;
  border-radius:12px;
  background: linear-gradient(90deg,#ffc857,#ff4b81,#3af5ff);
  color:#051019;
  font-weight:800;
  text-decoration:none;
  font-size:12px;
}
.download-btn small{ display:block; font-size:10px; opacity:0.8; margin-top:4px; color:#041018; }

/* small ESC hint inside HUD */
#esc-hint{
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  color: #cfe9ff;
  opacity: 0.95;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.04);
}

/* small music hint inside HUD */
#music-hint{
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  color: #eaf6ff;
  opacity: 0.95;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.04);
}

/* scrolling banner */
.banner-track{
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  /* duplicated items will scroll seamlessly; duration controlled by CSS variable */
  animation: banner-scroll var(--banner-duration, 160s) linear infinite;
}
.banner-item{
  white-space: nowrap;
  color: #ffffff;
  font-family: 'Orbitron', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 18px;
  padding-right: 120px; /* gap between repeated items */
  letter-spacing: 0.6px;
}

@keyframes banner-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* banner hidden by default; shown during gameplay by adding .banner-visible */
#scroll-banner{
  position: fixed;
  left: 0;
  width: 100%;
  height: 44px;
  overflow: hidden;
  z-index: 10001;
  pointer-events: none; /* don't block clicks */
  display: none;
  align-items: center;
}
.banner-visible{ display: flex !important; }

/* small shared styles for useful links shown on the start screen */
.bottom-useful-link{ color: #c0d8f8; text-decoration: none; font-size: 13px; display:flex; align-items:center; gap:8px; }
.bottom-useful-link:hover{ color:#fff; text-decoration:underline; }
.star-icon{ font-size:14px; margin-right:6px; }
.yellow-star{ color:#FFD700; }
.red-star{ color:#FF4136; }
.white-star{ color:#FFFFFF; }
.green-star{ color:#4CAF50; }

/* start-screen visible links (reuse bottom-useful-link styling but center them) */
#start-visible-links { display:flex; gap:10px; justify-content:center; align-items:center; flex-wrap:wrap; }
#start-visible-links .bottom-useful-link { display:inline-flex; padding:6px 10px; border-radius:8px; background: transparent; }

@media (max-width: 700px) {
  #start-visible-links { gap:8px; }
  .bottom-useful-link { font-size: 15px; }
}

/* page counter bottom-left */
#page-counter{
  position: fixed;
  left: 8px;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10005;
  pointer-events: auto;
}
#page-counter img{ height: 22px; width: auto; display:block; }
.counter-note{ color: #cfe9ff; font-size: 12px; opacity: 0.95; }

@media (max-width: 480px){
  #page-counter{ left:6px; bottom:6px; gap:6px; }
  #page-counter img{ height:18px; }
  .counter-note{ font-size:13px; }
}

/* hide counter while in-game (use class toggle for reliable control) */
body.in-game #page-counter { display: none !important; }
/* defensive class applied directly to the element to guarantee hiding while in-game */
.hide-in-game { display: none !important; }