: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:.04em; flex-shrink:0;
}
.term-exit { color:var(--dim); text-decoration:none; font-size:11px; letter-spacing:.1em; transition:color .15s; }
.term-exit:hover { color:var(--amber); }

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

.mobile-controls {
  display:flex; align-items:center; gap:6px; padding:10px 0 6px; flex-shrink:0;
}
.ctrl-btn {
  width:72px; 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.small { width:52px; height:42px; font-size:14px; }
.ctrl-btn:active { background:rgba(255,173,22,.15); }
.ctrl-btn.fire { width:86px; 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;
}