/* style.css — Yard
   Mobile first. Everything here exists to stop a phone browser eating the
   controls. design.txt section 16(k). */

:root { color-scheme: dark; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d1014;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Without these a phone will pinch-zoom, double-tap-zoom, pull-to-refresh
     and rubber-band scroll during normal play. */
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;      /* no long-press menu on iOS */
  -webkit-tap-highlight-color: transparent;
}

#game {
  position: fixed;
  inset: 0;
  touch-action: none;               /* the single most important line here */
}

#game canvas {
  display: block;
  touch-action: none;
}

/* Shown only if the page fails to boot, so a blank screen is never ambiguous. */
#fatal {
  position: fixed;
  inset: 0;
  display: none;
  padding: 24px;
  color: #ff9b9b;
  background: #14171c;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow: auto;
  z-index: 10;
}

/* Title choices. DOM, so a password field and a thumb both work. */
#gate {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom));
  box-sizing: border-box;
}
#modes, #story-form, #story-continue { display: none; }
#gate button, #story-form input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 10px;
  min-height: 48px;
  border-radius: 8px;
  font: 18px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
#gate button {
  border: 1px solid #3a4654;
  background: #1a222c;
  color: #e8eef5;
}
#btn-arcade { color: #ffd479; }
#story-form label {
  display: block;
  margin: 0 0 10px;
  color: #a8b6c6;
  font-size: 13px;
}
#story-form input {
  margin-top: 4px;
  padding: 0 12px;
  border: 1px solid #3a4654;
  background: #0d1014;
  color: #e8eef5;
  font-size: 16px;
}
#story-error { min-height: 1.2em; margin: 0 0 10px; color: #ff9b9b; font-size: 14px; }
#story-name { margin: 0 0 10px; color: #e8eef5; font-size: 18px; text-align: center; }
#gate-hint {
  margin: 4px 0 0;
  color: #7d8b9d;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  white-space: pre-line;
}