/* -------- 8-bit UI with full-image background -------- */

:root{
  /* move the form WELL below the logo area */
  --logo-offset: clamp(360px, 42vh, 520px);
  --form-gap: 32px;

  --pix: 6px;
  --edge: #0b1020;
  --panel: rgba(13,18,38,.78);
  --ink: #e8f0ff;
  --muted: #9bb3ff;
  --accent: #ff3e7d;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:#0a0f1f;             /* letterbox around image */
  font-family:"Press Start 2P",system-ui,monospace;
  font-size:14px;
  letter-spacing:.3px;
}

/* Always show the entire image */
.bg{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  object-fit:contain;
  object-position:center top;
  z-index:-1;
  pointer-events:none;
}

/* Center the form and push it lower */
.stage{
  min-height:100svh;
  display:grid;
  justify-items:center;
  padding-top: calc(var(--logo-offset) + var(--form-gap));
}

/* Pixel-style panel */
.panel{
  width:min(92vw, 360px);
  height:40vh;              /* ~30% of viewport */
  min-height:30vh;

  overflow:auto;

  display:flex;
  flex-direction:column;
  gap:14px;

  background:var(--panel);
  padding:22px 18px;

  border:var(--pix) solid var(--edge);
  box-shadow:0 var(--pix) 0 0 #000, 0 calc(var(--pix)*2) 0 0 #000;
  backdrop-filter:saturate(140%) blur(2px);
}

/* Inputs */
label{font-size:11px;color:var(--muted)}
input{
  height:44px;
  border:var(--pix) solid var(--edge);
  border-radius:0;
  background:#fff;
  color:#0a0a0a;
  padding:0 10px;
  font:inherit;
}
input:focus{outline:none;box-shadow:inset 0 0 0 var(--pix) #000}
input[type=number]{-moz-appearance:textfield}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Button */
.btn{
  height:48px;
  border:var(--pix) solid var(--edge);
  border-radius:0;
  background:var(--accent);
  color:#fff;
  font:inherit;
  cursor:pointer;
  transition:transform .02s, filter .15s;
}
.btn:active{transform:translateY(2px)}
@media (hover:hover){.btn:hover{filter:brightness(1.06)}}

/* Status text: plain, no background */
.msg{
  margin-top:8px;
  padding:0;
  border:0;
  box-shadow:none;
  background:none;
  font:inherit;
}
.msg.ok{ color:#2ee18b }   /* green */
.msg.err{ color:#ff4d6d }  /* red */
[hidden]{display:none!important}

/* Small screens: nudge down a bit less */
@media (max-width:360px){
  :root{ --logo-offset: clamp(300px, 40vh, 420px); --form-gap: 24px }
  .panel{ padding:18px 14px; gap:12px }
}