: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:10px 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; justify-content:space-between;
  width:100%; max-width:340px; padding:8px 0 4px; flex-shrink:0;
}

.dpad {
  position:relative; width:120px; height:120px;
}
.ctrl-btn {
  position:absolute; width:38px; height:38px;
  border:1px solid rgba(255,173,22,.4); background:rgba(255,173,22,.05);
  color:var(--amber); font:14px/1 "Courier New"; cursor:pointer;
  touch-action:manipulation; border-radius:0; display:flex; align-items:center; justify-content:center;
}
.ctrl-btn:active { background:rgba(255,173,22,.18); }
.dpad-up    { top:0;   left:41px; }
.dpad-left  { top:41px; left:0;  }
.dpad-down  { top:82px; left:41px; }
.dpad-right { top:41px; left:82px; }
.ctrl-btn.fire {
  position:static; width:90px; height:90px;
  font-size:13px; font-weight:bold; letter-spacing:.08em;
  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;
}