:root{
  --ink:#e8e3da;
  --dim:#8e8b86;
  --gold:#e0a844;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden;
  font-family:"Courier New",ui-monospace,monospace;color:var(--ink);
  -webkit-font-smoothing:none;}
body{display:flex;align-items:center;justify-content:center;touch-action:none;}

#frame{position:relative;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;}

canvas#game{
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  background:#05070a;
  display:block;
  box-shadow:0 0 90px rgba(0,0,0,.9);
  touch-action:none;
  outline:none;
}

/* ---------- on-screen pause (works when Esc is swallowed by an embed) ---------- */
#btnPause{
  position:absolute;top:14px;right:16px;z-index:25;
  width:30px;height:30px;line-height:1;
  background:rgba(5,7,10,.42);border:1px solid rgba(224,168,68,.28);
  color:rgba(236,231,222,.5);font-family:inherit;font-size:11px;letter-spacing:.1em;
  cursor:pointer;transition:.2s;opacity:.5;
}
#btnPause:hover{opacity:1;border-color:var(--gold);color:var(--gold)}
#btnPause[hidden]{display:none}

/* ---------- loader ---------- */
#loader,#pause{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:#05070a;z-index:20;flex-direction:column;
}
#loader[hidden],#pause[hidden]{display:none}
.lo-inner{text-align:center;width:min(70vw,460px)}
.lo-title{letter-spacing:.32em;font-size:14px;color:var(--dim);margin-bottom:22px}
.lo-bar{height:2px;background:#1b1f26;overflow:hidden}
.lo-fill{height:100%;width:0;background:var(--gold);transition:width .2s linear}
.lo-note{margin-top:14px;font-size:11px;color:#4d5259;letter-spacing:.2em}

/* ---------- pause ---------- */
#pause{background:rgba(3,5,8,.92);z-index:30}
.pausebox{width:min(84vw,420px);text-align:center;display:flex;flex-direction:column;gap:16px}
.pausebox h2{letter-spacing:.4em;font-size:15px;color:var(--gold);font-weight:400}
.pausebox label{display:flex;align-items:center;justify-content:space-between;
  font-size:11px;letter-spacing:.2em;color:var(--dim);gap:14px}
.pausebox input[type=range]{flex:1;accent-color:var(--gold);background:transparent}
.prow{display:flex;gap:10px;justify-content:center;margin-top:6px}
.pausebox button{
  background:none;border:1px solid #3a4048;color:var(--ink);padding:11px 20px;
  letter-spacing:.2em;font-size:11px;cursor:pointer;font-family:inherit;transition:.2s;flex:1
}
.pausebox button:hover{border-color:var(--gold);color:var(--gold)}
.hint{font-size:10px;color:#3f444b;letter-spacing:.12em;line-height:1.9;margin-top:4px}