html, body{
  height:100%;
  margin:0;
  background:#000;
  color:#fff;
  overflow:hidden;
}

html, body {
  touch-action: manipulation;
}


:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --pixel: 'Press Start 2P', monospace;
}

#stageWrap{
  position:fixed;
  inset:0;
  padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 12px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 12px);
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

#stage{
  position:relative;
  width:380px;
  height:676px;
  background:#000;
  overflow:hidden;
  outline: 2px solid rgba(255,255,255,0.12);
  transform-origin:center center;
}

#bgVideo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

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

#moth{
  position:absolute;
  left:0;
  top:0;
  width:22px; /* half size */
  height:22px;
  display:block;
  opacity:1;
  pointer-events:none;
  image-rendering: pixelated;
  z-index:10;
}

#hud{
  position:absolute;
  top:10px;
  left:10px;
  right:10px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-family: var(--pixel);
  font-size:10px;
  line-height:1.4;
  z-index:30;
}

#hudText{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.label{ opacity:0.75; }

#hpWrap{
  margin-left:auto;
  width:120px;
  height:14px;
  border:2px solid rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  box-sizing:border-box;
}

#hpFill{
  height:100%;
  width:100%;
  background: rgba(255,255,255,0.85);
  transform-origin:left center;
}

#soundBtn{
  width:34px;
  height:34px;
  border:2px solid rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.35);
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

#soundBtn svg{ width:18px; height:18px; display:block; }

#flyBtn{
  position:absolute;
  left:50%;
  bottom:18px;
  transform: translateX(-50%);
  font-family: var(--pixel);
  font-size:12px;
  padding:14px 14px;
  border:3px solid rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.55);
  color:#fff;
  cursor:pointer;
  z-index:40;
  text-transform:uppercase;
}

#flyBtn:active{ transform: translateX(-50%) translateY(1px); }

.hidden{ display:none !important; }

#endScreen{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.78);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:60;
}

#endCard{
  width: calc(100% - 44px);
  max-width: 320px;
  border:3px solid rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.88);
  padding:22px 18px;
  box-sizing:border-box;
  font-family: var(--pixel);
  text-align:center;
}

#endTitle{ font-size:14px; margin-bottom:16px; }
#endPhrase{ font-size:10px; line-height:1.7; opacity:0.9; margin-bottom:18px; }
#endStats{ font-size:9px; opacity:0.75; margin-bottom:18px; }

#retryBtn{
  width:100%;
  font-family: var(--pixel);
  font-size:12px;
  padding:14px 10px;
  border:3px solid rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.55);
  color:#fff;
  cursor:pointer;
  text-transform:uppercase;
}

#tuning{
  position:absolute;
  left:10px;
  right:10px;
  bottom:78px;
  max-height: 55%;
  overflow:auto;
  border:3px solid rgba(255,255,255,0.9);
  background: rgba(0,0,0,0.85);
  padding:12px 12px;
  box-sizing:border-box;
  font-family: var(--pixel);
  font-size:9px;
  z-index:55;
}

.trow{ display:grid; grid-template-columns: 1fr 120px; gap:10px; align-items:center; margin-bottom:10px; }
.trow label{ opacity:0.85; }
.trow input[type="range"]{ width:120px; }
.trow .val{ opacity:0.9; text-align:right; }

#dbgOverlay .dbgRow{ white-space: nowrap; }

/* Ensure sound button icon states are visible if your app already styles them */
#soundBtn.sound-on{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M11 5L6 9H3v6h3l5 4V5z'/><path d='M15 9a4 4 0 0 1 0 6'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:18px 18px;
}
#soundBtn.sound-off{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'><path d='M11 5L6 9H3v6h3l5 4V5z'/><path d='M19 5L5 19'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:18px 18px;
}


/* LIFE label */
#hpLabel{
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  color: #fff;
  opacity: .85;
  margin-right: 6px;
  align-self: center;
  white-space: nowrap;
}