/* assets/css/hud.css */

/* =========================
   HUD (top)
========================= */
.hud{
  position:fixed;
  left:0; right:0; top:0;
  padding:10px 14px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  pointer-events:none;
  mix-blend-mode:screen;
  z-index:40;
}

.hud .box{
  border:1px solid rgba(124,255,155,.35);
  padding:8px 10px;
  background:linear-gradient(180deg, rgba(124,255,155,.06), rgba(0,0,0,.0));
  box-shadow: 0 0 20px rgba(124,255,155,.08);
  backdrop-filter: blur(2px);
}

.hud .title{
  font-weight:700;
  letter-spacing:.08em;
}

.hud .sub{
  font-size:12px;
  opacity:.85;
  margin-top:4px;
  line-height:1.3;
}

.hud .right .sub{ text-align:right; }

/* =========================
   Hint
========================= */
.hint{
  position:fixed;
  right:14px;
  bottom:calc(min(32vh, 320px) + 26px);
  font-size:12px;
  opacity:.55;
  pointer-events:none;
  z-index:40;
}

/* =========================
   Log (bottom)
========================= */
.log{
  position:fixed;
  left:14px;
  right:14px;
  bottom:14px;
  height:min(32vh, 320px);
  border:1px solid rgba(124,255,155,.25);
  padding:10px 10px 8px;
  background:rgba(0,0,0,.18);
  box-shadow: 0 0 18px rgba(124,255,155,.08);
  pointer-events:none;
  overflow:hidden;
  z-index:40;
}

.log .lines{
  white-space:pre;
  font-size:12px;
  line-height:1.25;
  opacity:.92;
}

/* terminal input line */
.inputLine{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(124,255,155,.18);
  font-size:12px;
  line-height:1.25;
  display:flex;
  gap:8px;
  align-items:baseline;
  opacity:.95;
}

.prompt{
  opacity:.8;
  letter-spacing:.04em;
}

.caret{
  display:inline-block;
  margin-left:2px;
  opacity:.9;
  animation: caretBlink 1s steps(1,end) infinite;
  text-shadow:0 0 10px rgba(124,255,155,.35);
}

@keyframes caretBlink{
  0%, 49%{opacity:.95}
  50%, 100%{opacity:.0}
}

/* =========================
   Fake meters (right HUD)
========================= */
.meters{
  margin-top:8px;
  padding-top:8px;
  border-top:1px dashed rgba(124,255,155,.25);
  font-size:12px;
  opacity:.9;
}

.mrow{
  display:flex;
  justify-content:space-between;
  gap:14px;
  line-height:1.35;
}

.mrow .k{
  opacity:.75;
  letter-spacing:.06em;
}

.mrow .v{
  opacity:1;
  text-shadow:0 0 10px rgba(124,255,155,.35);
}

/* =========================
   Progress bar (left HUD)
========================= */
.pwrap{
  margin-top:10px;
  padding-top:8px;
  border-top:1px dashed rgba(124,255,155,.22);
}

.plabel{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  opacity:.9;
  letter-spacing:.08em;
  margin-bottom:6px;
}

.pbar{
  height:10px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(124,255,155,.35);
  background:rgba(0,0,0,.25);
  box-shadow:0 0 18px rgba(124,255,155,.08) inset;
}

.pfill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(90deg,
    rgba(124,255,155,.22),
    rgba(124,255,155,.85),
    rgba(124,255,155,.22));
  box-shadow:0 0 18px rgba(124,255,155,.25);
  transform:translateZ(0);
}

.pwrap.isIdle{
  opacity:.35;
  filter:saturate(.85);
}

/* =========================
   Fullscreen button
========================= */
.fsBtn{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:9999;
  padding:14px 18px;
  border-radius:14px;
  border:1px solid rgba(124,255,155,.55);
  background:rgba(0,0,0,.55);
  color:rgba(124,255,155,1);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight:700;
  letter-spacing:.12em;
  box-shadow:0 0 28px rgba(124,255,155,.12);
  cursor:pointer;
  user-select:none;
}

.fsBtn:hover{filter:brightness(1.15);}
.fsBtn:active{transform:translate(-50%,-50%) scale(0.98);}
.fsBtn.isHidden{display:none;}

/* =========================
   BIG ACCESS GRANTED overlay
========================= */
.bigMsg{
  position:fixed; inset:0;
  display:none;
  align-items:center; justify-content:center;
  z-index:9998;
  pointer-events:none;
  background:radial-gradient(circle at center, rgba(0,0,0,.2), rgba(0,0,0,.75));
}

.bigMsg.show{ display:flex; }

.bigMsgInner{
  padding:22px 26px;
  border-radius:22px;
  border:1px solid rgba(124,255,155,.55);
  background:rgba(0,0,0,.55);
  box-shadow:0 0 60px rgba(124,255,155,.15);
  text-align:center;
  transform: translateZ(0);
}

.bigMsgTitle{
  font-size:min(8vw, 72px);
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  text-shadow:0 0 24px rgba(124,255,155,.45);
  line-height:1.05;
}

.bigMsgSub{
  margin-top:10px;
  font-size:12px;
  opacity:.75;
  letter-spacing:.14em;
}

.bigMsg.show .bigMsgInner{
  animation: bigFlash 1.2s steps(1,end) both;
}

@keyframes bigFlash{
  0%{opacity:0; transform:scale(.98);}
  10%{opacity:1; transform:scale(1.01);}
  20%{opacity:.2;}
  30%{opacity:1;}
  45%{opacity:.35;}
  60%{opacity:1;}
  100%{opacity:0; transform:scale(1.02);}
}

/* =========================
   Blackout overlay
========================= */
.blackout{
  position:fixed; inset:0;
  z-index:9997;
  pointer-events:none;
  opacity:0;
  background:rgba(0,0,0,1);
  transition: opacity 120ms linear;
}

.blackout.on{ opacity:1; transition: opacity 40ms linear; }

.blackout.comeback{
  opacity:0;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.06), rgba(0,0,0,0) 55%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.03) 0px,
      rgba(255,255,255,.03) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 4px
    );
  mix-blend-mode:overlay;
  animation: comeback 220ms steps(1,end) 1;
}

@keyframes comeback{
  0%{opacity:0}
  20%{opacity:1}
  40%{opacity:.2}
  60%{opacity:.9}
  100%{opacity:0}
}

/* =========================
   Noise overlay (texture-driven)
========================= */
.noise{
  position:fixed; inset:0;
  z-index:9996;
  pointer-events:none;
  opacity:0;

  background-image:
    var(--noise-url),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.02) 0px,
      rgba(255,255,255,.02) 1px,
      rgba(0,0,0,0) 2px,
      rgba(0,0,0,0) 5px
    ),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);

  background-repeat: repeat, repeat, no-repeat;
  background-size: 220px 220px, auto, auto;
  background-position: 0 0, 0 0, center;

  mix-blend-mode:overlay;
  transform:translateZ(0);
  filter:contrast(1.25);
}

.noise.on{
  opacity:1;
  animation: noiseFlicker 120ms steps(1,end) infinite;
}

@keyframes noiseFlicker{
  0%{transform:translate(0,0) scale(1.02)}
  25%{transform:translate(-2px,1px) scale(1.02)}
  50%{transform:translate(2px,-1px) scale(1.02)}
  75%{transform:translate(-1px,-2px) scale(1.02)}
  100%{transform:translate(1px,2px) scale(1.02)}
}