:root { 
  --bg-color:#050505; 
  --accent-color:#f0f0f0; 
  --dim-color:#888; 
  --sonar-color: rgba(255,255,255,0.15); 
}

* { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
  user-select: none; 
  -webkit-tap-highlight-color: transparent; 
}

/* --- SCROLL LOCK FIX --- */
html {
  width: 100%;
  height: 100%;
  overflow: hidden; /* Disables scroll on the root */
  overscroll-behavior: none; /* Prevents iOS rubber-banding/bounce */
}

body {
  background: var(--bg-color);
  color: var(--accent-color);
  font-family: 'Courier New', monospace;
  width: 100%;
  height: 100%; /* Force body to match viewport height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden; /* Double lock on body */
  position: relative;
  touch-action: none; /* Disables standard touch gestures (scrolling) */
}

/* Fixed Sonar Container */
.sonar-container { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  pointer-events: none; 
  z-index: 0; 
}

.ripple { 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%,-50%); 
  border: 1px solid var(--sonar-color); 
  border-radius: 50%; 
  opacity: 0; 
  animation: ripple-anim 4s linear infinite; 
}
.bg-ripple:nth-child(1) { animation-delay: 0s; }
.bg-ripple:nth-child(2) { animation-delay: 1.3s; }
.bg-ripple:nth-child(3) { animation-delay: 2.6s; }

@keyframes ripple-anim {
  0% { width: 0; height: 0; opacity: 0.8; border-width: 2px; }
  100% { width: 150vmax; height: 150vmax; opacity: 0; border-width: 0px; }
}

.content-wrapper { 
  z-index: 10; 
  text-align: center; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  gap: 2rem; 
  max-width: 700px; 
  padding: 30px; 
  transition: opacity 1s ease; 
  width: 100%; 
}

h1 { 
  font-size: 3rem; 
  letter-spacing: .3rem; 
  font-weight: 700; 
  text-transform: uppercase; 
  text-shadow: 0 0 10px rgba(255,255,255,.2); 
  line-height: 1.2; 
}

.subtitle { 
  color: var(--dim-color); 
  font-size: 1.1rem; 
  margin-top: -1.5rem; 
  font-weight: 600; 
  letter-spacing: 1px; 
  opacity: 0; 
  animation: fade-in 2s ease-out forwards 1s; 
}

.icon-eye { margin-bottom: 1rem; color: var(--accent-color); }

.loader-container { width: 400px; margin-top: 2rem; }
.progress-label { display: flex; justify-content: center; font-size: 1rem; color: var(--accent-color); margin-bottom: .8rem; width: 100%; letter-spacing: 1px; }
.progress-bar-bg { width: 100%; height: 4px; background: #333; position: relative; overflow: hidden; border-radius: 2px; }
.progress-bar-fill { position: absolute; left: 0; top: 0; height: 100%; width: 0; background: var(--accent-color); box-shadow: 0 0 15px rgba(255,255,255,.8); transition: width .2s; }

.button-group { 
  margin-top: 3rem; 
  display: flex; 
  gap: 1.5rem; 
  opacity: 0; 
  pointer-events: none; 
  transition: all .5s; 
  width: 100%; 
  justify-content: center; 
}
.button-group.visible { opacity: 1; pointer-events: auto; }

.action-btn { 
  background: transparent; 
  border: 2px solid var(--accent-color); 
  color: var(--accent-color); 
  padding: 1.2rem 2rem; 
  font-family: inherit; 
  font-size: 1rem; 
  font-weight: bold; 
  text-transform: uppercase; 
  letter-spacing: 3px; 
  cursor: pointer; 
  transition: all .3s; 
  min-width: 140px; 
}
.action-btn:hover { 
  background: var(--accent-color); 
  color: var(--bg-color); 
  box-shadow: 0 0 25px rgba(255,255,255,.4); 
  transform: translateY(-2px); 
}

.modal-overlay { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: rgba(0,0,0,.95); 
  backdrop-filter: blur(5px); 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  z-index: 200; 
  opacity: 0; 
  pointer-events: none; 
  transition: opacity .3s; 
  touch-action: auto; /* Re-enable touch inside modals if needed */
}
.modal-overlay.visible { opacity: 1; pointer-events: auto; }

.modal-content { 
  background: #111; 
  border: 1px solid var(--dim-color); 
  padding: 2.5rem; 
  max-width: 500px; 
  width: 90%; 
  text-align: center; 
  box-shadow: 0 0 40px rgba(255,255,255,.1); 
}

.modal-title { font-size: 1.5rem; margin-bottom: 1.5rem; letter-spacing: 3px; color: var(--accent-color); border-bottom: 1px solid #333; padding-bottom: 1rem; text-transform: uppercase; }
.review-textarea { width: 100%; height: 100px; background: #000; border: 1px solid #333; color: var(--accent-color); font-family: inherit; padding: 10px; margin-bottom: 20px; resize: none; outline: none; }
.review-input { width: 100%; background: #000; border: 1px solid #333; color: var(--accent-color); font-family: inherit; padding: 10px; margin-bottom: 15px; outline: none; text-transform: uppercase; }
.star-container { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; }
.star { font-size: 2rem; cursor: pointer; color: #333; transition: color .2s, transform .2s; }
.star.active { color: var(--accent-color); text-shadow: 0 0 10px rgba(255,255,255,.5); }
.star:hover { transform: scale(1.2); }

.view-section { animation: fadeIn 0.4s ease-out; }
.modal-scroll-area { 
  max-height: 300px; 
  overflow-y: auto; /* Keep scroll INSIDE the review list only */
  text-align: left; 
  margin-bottom: 20px; 
  padding-right: 5px; 
  border-top: 1px solid #222; 
  border-bottom: 1px solid #222;
  touch-action: pan-y; /* Allow scrolling here specifically */
}
.modal-scroll-area::-webkit-scrollbar { width: 4px; }
.modal-scroll-area::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }

.review-item { border-bottom: 1px solid #222; padding: 8px 6px; }
.review-stars { color: gold; margin-bottom: 6px; }
.small { font-size: .85rem; color: #aaa; }
.text-link { color: var(--dim-color); font-size: 0.8rem; text-decoration: underline; cursor: pointer; margin-top: 15px; letter-spacing: 1px; }
.about-text { color: #ccc; font-family: 'Courier New', monospace; line-height: 1.6; text-align: left; margin-bottom: 2rem; font-size: 0.95rem; }
.changelog-list { list-style: none; text-align: left; color: #aaa; margin-bottom: 2rem; padding: 0 10px; }
.changelog-list li { margin-bottom: 10px; border-bottom: 1px solid #222; padding-bottom: 8px; display: flex; justify-content: space-between; }
.changelog-list li strong { color: var(--accent-color); margin-right: 10px; min-width: 70px; }
.close-modal-btn { background: var(--accent-color); border: none; color: var(--bg-color); padding: 0.8rem 2rem; cursor: pointer; font-weight: bold; letter-spacing: 1px; transition: all 0.3s; text-transform: uppercase; font-family: inherit; margin-top: 1rem; }
.close-modal-btn:hover { opacity: 0.8; transform: translateY(-2px); box-shadow: 0 0 15px rgba(255,255,255,0.3); }
.version-tag { position: absolute; bottom: 20px; right: 20px; color: #333; font-size: 0.8rem; cursor: pointer; z-index: 100; transition: color 0.3s; }
.version-tag:hover { color: var(--accent-color); }
.blackout-curtain { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 50; pointer-events: none; opacity: 0; transition: opacity 2s ease-in-out; }

@keyframes breathe { 0%,100%{opacity:.5;transform:scale(.95)} 50%{opacity:1;transform:scale(1.05)} }
@keyframes fade-in { to{opacity:1;margin-top:0} }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- MOBILE SPECIFIC --- */
@media screen and (max-width: 768px) {
  /* Enforce No Scroll on Mobile too */
  body {
    height: 100%;
    overflow: hidden;
  }
  
  .content-wrapper { 
    width: 100%; 
    padding: 15px; 
    gap: 1rem; 
  }
  
  /* Scale down text to ensure it fits without scrolling */
  h1 { font-size: 2rem; letter-spacing: 0.1rem; }
  .subtitle { font-size: 0.85rem; }
  
  .loader-container { width: 90%; max-width: 300px; margin-top: 1.5rem; }
  
  /* Stack buttons for mobile to fit width better, but keep them compact */
  .button-group { 
    flex-direction: column; 
    gap: 1rem; 
    align-items: center; 
    width: 100%; 
    margin-top: 2rem;
  }
  
  .action-btn { width: 100%; max-width: 280px; padding: 1rem; font-size: 1rem; }
  
  .modal-content { padding: 1.5rem; width: 95%; }
  .modal-title { font-size: 1.2rem; margin-bottom: 1rem; }
  .star { font-size: 2.5rem; padding: 0 5px; }
  .review-textarea { height: 80px; }
  
  .version-tag { position: absolute; bottom: 15px; }
}