:root { --amber:#ffad16; --cyan:#5ad6d8; --dim:#6a6860; --bg:#050505; }
* { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }

html, body {
  height:100%; background:var(--bg); color:var(--amber);
  font-family:"Courier New",monospace; overflow:hidden; user-select:none;
}

.game-wrap {
  display:flex; flex-direction:column; align-items:center;
  height:100%; padding:0 8px;
}

.game-header {
  display:flex; justify-content:space-between; align-items:center;
  width:100%; max-width:500px; padding:12px 0 6px;
  font-size:11px; color:var(--dim); letter-spacing:0.04em; flex-shrink:0;
}

.term-exit { color:var(--dim); text-decoration:none; font-size:11px; letter-spacing:0.1em; transition:color .15s; }
.term-exit:hover { color:var(--amber); }

#canvas { display:block; image-rendering:pixelated; image-rendering:crisp-edges; }

.mobile-controls { display:flex; gap:10px; padding:10px 0 6px; flex-shrink:0; }

.ctrl-btn {
  width:82px; height:50px;
  border:1px solid rgba(255,173,22,.4); background:rgba(255,173,22,.05);
  color:var(--amber); font:18px/1 "Courier New"; cursor:pointer;
  touch-action:manipulation; border-radius:0;
}
.ctrl-btn:active { background:rgba(255,173,22,.15); }
.ctrl-btn.fire { width:100px; color:var(--cyan); border-color:rgba(90,214,216,.4); }

#name-input {
  position:fixed; top:-200px; left:0;
  width:1px; height:1px; opacity:0; pointer-events:none;
  background:transparent; border:none; outline:none;
}