/* --- Degular Display -------------------------------------------------------
   Drop the .otf files into game/fonts/ and these load automatically.
   font-display: swap means text shows in the fallback first, then upgrades to
   Degular the instant the file is available — nothing breaks if a file is
   missing, it just stays on the fallback. */

@font-face {
  font-family: "Degular Display";
  src: url("fonts/DegularDisplay-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Degular Display";
  src: url("fonts/DegularDisplay-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* The page is just a full-screen black backdrop with one canvas on it.
   Black is deliberate: it becomes the letterbox bars around the 16:9 play field. */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;      /* never scroll — this is a fixed full-screen surface */
  background: #000;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
}


/* --- Touch --------------------------------------------------------------------
   The online practice build is played by tapping the screen. Without this the
   browser treats those taps as gestures: double-tap zooms, a drag pans, and a
   long press pops up a selection menu. touch-action: none turns the whole surface
   into something that only reports pointer events, which is what input.js wants.
   Harmless on the cabinet, which is a keyboard and a physical button. */
html, body, #game {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* --- Turn your phone ----------------------------------------------------------
   Hidden by default, including on every desktop and on the cabinet. It appears
   only when the viewport is actually taller than it is wide, so it is impossible
   for it to cover a game that is playable. */
#rotate {
  display: none;
}

@media (orientation: portrait) and (max-width: 900px) {
  #rotate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10;
    align-items: center;
    justify-content: center;
    background: #12284B;          /* Deep Blue, the brand field colour */
    padding: 24px;
    text-align: center;
  }

  .rotate-inner { max-width: 22rem; }

  .rotate-icon {
    font-size: 68px;
    line-height: 1;
    color: #b96846;               /* copper, accent only */
    margin-bottom: 18px;
  }

  .rotate-title {
    font-family: "Degular Display", system-ui, -apple-system, Segoe UI, sans-serif;
    font-weight: 500;
    font-size: 27px;
    color: #FFFFFF;
    margin-bottom: 10px;
  }

  .rotate-note {
    font-family: "Degular Display", system-ui, -apple-system, Segoe UI, sans-serif;
    font-size: 18px;
    color: #E5D99E;               /* mustard */
  }
}