/* Cowboy Mac — the page around the canvas. Black letterbox, crisp integer-scaled pixels, touch overlay. */
html, body { margin: 0; padding: 0; background: #0b0808; color: #f4e7c8; height: 100%; overflow: hidden;
  font-family: "Courier New", Courier, monospace; -webkit-user-select: none; user-select: none; touch-action: none; }
#stage { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: #0b0808; }
#game { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; outline: none; }
#loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; letter-spacing: 2px; font-size: 14px; }
#loading .bar { width: 240px; height: 10px; border: 2px solid #f4e7c8; margin: 0 auto 8px; }
#loading .fill { height: 100%; width: 0; background: #e8b040; transition: width .15s; }
#err { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 8px; max-height: 40%; overflow: auto;
  background: rgba(120, 0, 0, .9); color: #fff; font-size: 12px; white-space: pre-wrap; z-index: 20; }

/* Touch overlay: full-stage layer with absolutely placed buttons. Pointer events are handled on the layer. */
#touch { position: absolute; z-index: 10; touch-action: none;
  top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px); }
#touch[hidden] { display: none; }
.tb { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255, 240, 200, .16); border: 2px solid rgba(255, 240, 200, .45); color: rgba(255, 245, 220, .9);
  font-weight: bold; font-size: 18px; letter-spacing: 1px; pointer-events: auto; }
.tb-left  { left: 4vw;  bottom: 8vh; width: 15vmin; height: 15vmin; }
.tb-right { left: 24vw; bottom: 8vh; width: 15vmin; height: 15vmin; }
.tb-down  { left: 14vw; bottom: 26vh; width: 13vmin; height: 13vmin; }
.tb-jump  { right: 4vw; bottom: 8vh; width: 18vmin; height: 18vmin; font-size: 14px; }
.tb-shoot { right: 24vw; bottom: 12vh; width: 16vmin; height: 16vmin; font-size: 13px; background: rgba(232, 80, 60, .22); border-color: rgba(255, 120, 100, .6); }
.tb-reload{ right: 16vw; bottom: 32vh; width: 11vmin; height: 11vmin; }
.tb-pause { right: 2vw; top: 2vh; width: 9vmin; height: 9vmin; border-radius: 12px; font-size: 14px; }
@media (orientation: portrait) { .tb-jump { bottom: 12vh; } .tb-shoot { bottom: 30vh; right: 6vw; } .tb-reload { bottom: 46vh; right: 8vw; } }

/* Name entry for the leaderboard (a real input so phones get their keyboard). */
#name { position: absolute; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.55); }
#name[hidden] { display: none; }
#name .panel { background: #2a1a12; border: 3px solid #c89a5a; padding: 16px 20px; text-align: center; box-shadow: 0 0 0 3px #1a1010; }
#name .title { color: #f2c94c; letter-spacing: 2px; font-size: 13px; margin-bottom: 10px; }
#name input { font: inherit; font-size: 20px; letter-spacing: 3px; text-transform: uppercase; width: 12ch; padding: 6px 8px; background: #f4e7c8; color: #1a1010; border: 2px solid #5a3a1e; text-align: center; }
#name button { font: inherit; font-size: 16px; margin-left: 8px; padding: 6px 14px; background: #d33a2a; color: #fff; border: 2px solid #1a1010; cursor: pointer; }
#name .hint { color: #c89a5a; font-size: 11px; margin-top: 8px; }