html, body { margin: 0; height: 100%; background: #000; overflow: hidden; overscroll-behavior: none; }
body { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#c, #gl { position: fixed; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
/* reads the safe-area insets for the game */
#safe { position: fixed; visibility: hidden; pointer-events: none; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
/* the board name box: a backdrop over the whole game (it takes every press while open) with the box near the top, so
   a phone keyboard never covers it, landscape included */
#namebox { position: fixed; inset: 0; z-index: 10; display: flex; justify-content: center; align-items: flex-start; box-sizing: border-box;
  padding: max(env(safe-area-inset-top), 8vh) max(env(safe-area-inset-right), 8px) 8px max(env(safe-area-inset-left), 8px);
  background: rgba(0, 0, 0, .6); touch-action: manipulation; }
#namebox[hidden] { display: none; }
#namebox .box { background: #141838; border: 3px solid #e8d8a0; box-shadow: 0 0 0 3px #000; box-sizing: border-box;
  padding: 14px 16px; color: #f8d048; font: bold 14px/1.4 ui-monospace, Menlo, Consolas, monospace; text-align: center; width: min(92vw, 340px); }
#namebox label { display: block; margin-bottom: 8px; }
#namebox label.bad { color: #ff6a5a; }
#namebox input { width: 100%; box-sizing: border-box; font: bold 20px ui-monospace, Menlo, Consolas, monospace; text-transform: uppercase; padding: 8px;
  min-height: 44px; background: #000; color: #fff; border: 2px solid #4a58b0; border-radius: 0; text-align: center; -webkit-user-select: text; user-select: text; }
#namebox .row { display: flex; gap: 10px; margin-top: 12px; }
#namebox button { flex: 1; min-height: 44px; font: bold 14px ui-monospace, Menlo, Consolas, monospace; padding: 12px 18px; background: #2f3a7a; color: #fff;
  border: 0; border-top: 2px solid #6a78c8; border-radius: 0; cursor: pointer; touch-action: manipulation; }
#namebox button + button { background: #262a48; color: #9aa0c8; }
#namebox button:focus-visible, #namebox input:focus-visible { outline: 2px solid #f8d048; outline-offset: 2px; }
@media (max-height: 500px) { #namebox { padding-top: max(env(safe-area-inset-top), 6px); } #namebox .box { padding: 8px 14px; } #namebox label { margin-bottom: 4px; } #namebox .row { margin-top: 8px; } }
@media (min-width: 900px) and (min-height: 600px) {
  #namebox { padding-top: 18vh; }
  #namebox .box { width: 480px; font-size: 20px; padding: 20px 24px; }
  #namebox input { font-size: 28px; }
  #namebox button { font-size: 20px; }
}