: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; cursor:crosshair; touch-action:none; }

.confirm-btn {
  margin-top:10px; padding:12px 32px; flex-shrink:0;
  border:1px solid var(--cyan); background:rgba(90,214,216,.08);
  color:var(--cyan); font:bold 13px/1 "Courier New";
  letter-spacing:.1em; text-transform:uppercase; cursor:pointer;
  transition:background .15s;
}
.confirm-btn:hover { background:rgba(90,214,216,.2); }

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