/* ─────────────────────────────────────────────
   ARCHIVE RESCUE  •  final jam build
   Single-font edition – Galexica Mono Bold
────────────────────────────────────────────── */

/* ----------  Font import  ---------- */
@font-face{
  font-family:"GalexicaMonoBold";
  src:url("assets/fonts/GalexicaMonoBold.ttf") format("truetype");
  font-weight:normal;
  font-style:normal;
}

/* ----------  Global look  ---------- */
body{
  margin:0;
  height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:#ebdec7;
  color:#332b1a;
  font-family:"GalexicaMonoBold",monospace;
  font-size:20px;                 /* 16 px snaps to bitmap strike nicely */
}

.game{display:flex;flex-direction:column;align-items:center;}

/* ----------  HUD header  ---------- */
.hud{
  display:flex;                  /* ↶ | [stats] | ❚❚ */
  align-items:center;
  margin-bottom:7px;
}

.hud-inner{
  background:#f3ecde;
  border:2.5px solid #a0743a;
  padding:6px 16px;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:0 10px;                 /* equal gap to the two buttons */
  box-shadow:0 2px 5px rgba(0,0,0,.05);
}

.hud-box{text-align:center;}

.hud-title{
  font-size:21px;                /* larger for heading */
  margin:0 0 2px 0;
  letter-spacing:0.5px;          /* crisp caps */
}

.hud-info{
  font-size:21px;                /* timer / percent */
  margin:0;
  color:#6b4c2b;
}

/* ----------  HUD buttons  ---------- */
.hud-btn{
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  font:22px "GalexicaMonoBold",monospace;
  color:#332b1a;
  background:#f3ecde;
  border:2px solid #a0743a;
  cursor:pointer;
}

.hud-btn:hover{background:#e0d7c6;}

@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.7;}}
.hud-btn.blink{animation:pulse 1s infinite;}

/* ----------  Frame around the canvas  ---------- */
.frame{
  border:1px solid #A2602C;
  padding:4px;
  display:inline-block;
  background:#b26a34;
}

/* ----------  Canvas  ---------- */
canvas{
  width:calc(512px * 2);   /* upscale 2× */
  height:calc(384px * 2);
  display:block;
  cursor:none;
}

/* ----------  Modal overlay  ---------- */
#modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10;
}

#dialog{
  background:#ECE7DC;
  border:1px solid #a0743a;
  padding:20px 32px;
  box-shadow:0 0 8px #a0743a;
  text-align:center;
  max-width:320px;
  font-family:"GalexicaMonoBold",monospace;
}

#dialog p{
  margin:0 0 16px;
  font-size:22px;
  white-space:pre-line;           /* preserve \n from JS */
}

#dialog strong{                   /* bold title in splash */
  font-size:22px;
}

#dialog button{
  margin:0 16px;
  padding:6px 18px;
  background:#a0743a;
  border:none;
  color:#fff;
  font-family:inherit;
  font-size:21px;
  cursor:pointer;
}

#dialog button:hover{
  background:#cd9f61;
  color:#332b1a;
}

/* stack Save / Play-again with breathing room */
#dialog button + button{
  margin-top:14px;      /* adjust to taste */
}

/* ----------  Hidden helper  ---------- */
[hidden]{display:none !important;}