/* ==========================================================================
   ROCK BREAKER - style.css
   Arcade cabinet: pure black, faint CRT scanlines, nothing decorative.
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #050505;
  overflow: hidden;
  /* fix-20: a phone must not treat the playfield as a page. No text
     selection from a thumb that slid off a button, no long-press callout,
     no drag-select on the canvas - the long-press MENU is stopped at the
     source, on the canvas, in touch.js. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

body {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: #cfd8e3;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#game {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  /* fix-20: the canvas owns every finger on the screen. Without this a
     one-finger drag scrolls/pans and a two-finger pinch zooms the PAGE,
     which is exactly what a player holding LEFT and THRUST does by
     accident. The game's own gesture is a pointer event, not a scroll. */
  touch-action: none;
}

/* faint scanline overlay - a nod, not a gimmick */
#crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0) 0px,
    rgba(0, 0, 0, 0) 2px,
    rgba(0, 0, 0, 0.28) 3px,
    rgba(0, 0, 0, 0.28) 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.5;
  z-index: 2;
}

#hud {
  position: fixed;
  left: 0; right: 0; top: 0;
  padding: 10px 14px;
  font-size: 13px;
  letter-spacing: 0.12em;
  color: #8fa3b8;
  pointer-events: none;
  z-index: 3;
  display: flex;
  justify-content: space-between;
}

#hud b { color: #e8f4ff; font-weight: 600; }

#brand {
  position: fixed;
  left: 0; right: 0; bottom: 6px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.3em;
  color: #3a4552;
  pointer-events: none;
  z-index: 3;
}

/* dev overlay text lives in the canvas, not the DOM (see render.js) */
.dev { color: #7cff9b; }

/* ============================================================
   fix-18: the title screen is DRAWN, in the canvas, by
   RB.Render.drawTitle. This cabinet has no DOM chrome over the
   playfield on purpose (#hud and #brand are pointer-transparent
   and sit at z-index 3, but the title paints nothing there), so
   the only thing that can hide on a page load is the game itself.
   The rules below are a guard, not a UI: they state in CSS what
   the title requires, so any future DOM chrome has to be added
   deliberately rather than by accident.
     ============================================================ */
html.rb-title body,
body.rb-title { overflow: hidden; }        /* a title never scrolls */

/* Nothing above the canvas may intercept the first Enter press:
   the title's only input is the keyboard, and focus must stay on
   the document. That is why #hud and #brand carry
   pointer-events: none above, and why no element on the page is
   focusable. */
html.rb-title #hud,
html.rb-title #brand { pointer-events: none; }