/* Isolation: ONLY inside #soma-wave-root */
#soma-wave-root{
  position: fixed;
  inset: 0;
  background:#000;
  color:#00ff66;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  overflow:hidden;
}
#soma-wave-root *{ box-sizing:border-box; }

#soma-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

#soma-ui{
  position:absolute;
  inset:0;
  pointer-events:none;
}

/* credits area: always below logo area, scrollable on mobile */
#soma-credits{
  position:absolute;
  left:50%;
  top:62%;
  transform:translateX(-50%);
  width:min(900px, 88vw);
  max-height:32vh;
  overflow:hidden; /* desktop: no scrollbar */
  white-space:pre-wrap;
  line-height:1.3;
  font-size:19px;
  text-shadow:0 0 10px rgba(0,255,102,.65), 0 0 2px rgba(0,255,102,.7);
  filter: blur(.08px);
  pointer-events:none;
  padding-bottom:52px;
}

/* Mobile scroll: allow reading long credits */
@media (max-width: 900px), (max-height: 720px){
  #soma-credits{
    overflow:auto;
    pointer-events:auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
  }
  #soma-credits::-webkit-scrollbar{ width:0; height:0; } /* WebKit */
}


/* Start button: square + big */
#soma-start{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:auto;
  border:2px solid rgba(0,255,102,.70);
  background:rgba(0,0,0,.70);
  color:#00ff66;
  width:190px;
  height:190px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:18px;
  letter-spacing:2px;
  text-transform:uppercase;
  border-radius:10px;
  cursor:pointer;
  white-space:pre-line;
  line-height:1.15;
  text-shadow:0 0 14px rgba(0,255,102,.85);
  box-shadow:0 0 26px rgba(0,255,102,.18);
  animation:soma_flicker 2.2s infinite;
}
#soma-start:focus{ outline:2px solid rgba(0,255,102,.75); outline-offset:3px; }

/* Back button (small) - fixed within root, never scrolls away */
#soma-close{
  position:absolute;
  left:50%;
  bottom:2.2%;
  transform:translateX(-50%);
  pointer-events:auto;
  border:1px solid rgba(0,255,102,.55);
  background:rgba(0,0,0,.65);
  color:#00ff66;
  padding:8px 14px;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  border-radius:6px;
  cursor:pointer;
  text-shadow:0 0 10px rgba(0,255,102,.65);
  box-shadow:0 0 18px rgba(0,255,102,.12);
}
#soma-close:focus{ outline:2px solid rgba(0,255,102,.6); outline-offset:2px; }

/* Mobile: give more room to credits + keep scroll */
@media (max-height: 720px){
  #soma-credits{ top:66%; font-size:17px; max-height:30vh; }
}
@media (max-height: 600px){
  #soma-credits{ top:68%; font-size:16px; max-height:30vh; }
  #soma-close{ bottom:1.2%; }
}

/* CRT scanlines + vignette */
#soma-wave-root::before{
  content:"";
  position:absolute;
  inset:0;
  background: repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0.0),
      rgba(0,0,0,0.0) 2px,
      rgba(0,0,0,0.18) 3px
    );
  mix-blend-mode: multiply;
  pointer-events:none;
  opacity:.55;
}
#soma-wave-root::after{
  content:"";
  position:absolute;
  inset:-10%;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 62%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
  opacity:.8;
}

@keyframes soma_flicker{
  0%,100%{ opacity:.9; }
  50%{ opacity:.35; }
  53%{ opacity:.85; }
  57%{ opacity:.55; }
}