/* The canvas letterboxes itself; the page just gets out of the way. */
:root { color-scheme: dark; }

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1c140e;
  font-family: "Trebuchet MS", "Avenir Next", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Pinned to the viewport rather than sized with 100vw: on platforms that keep
   a scrollbar gutter, 100vw is wider than the visible area and the right-hand
   edge of the canvas — where the score sits — gets clipped. */
#game {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  image-rendering: auto;
}

/* Read, never seen. See the comment beside it in index.html. `visibility:
   hidden` rather than `display: none`, because a display:none element has no
   computed padding to read. */
#safe-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding:
    env(safe-area-inset-top, 0px)
    env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px)
    env(safe-area-inset-left, 0px);
}

noscript {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff6e4;
  font-size: 18px;
}

/* ------------------------------------------------------------ leaderboard
   The score entry form. Styled to sit inside the game rather than on top of
   it, but built from real form controls: see the note in index.html. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 8, 5, 0.82);
  /* The body blocks both of these so the lane cannot be dragged around. The
     form is the one thing on the page that must scroll, because a phone in
     landscape with a keyboard up has almost no height left. */
  overflow-y: auto;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
.overlay[hidden] { display: none; }

#entry-form {
  width: min(440px, 100%);
  /* Keeps the form off the notch and above the home indicator. */
  margin: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
  padding: 26px 24px 22px;
  border: 2px solid rgba(255, 216, 168, 0.28);
  border-radius: 18px;
  background: #241a12;
  color: #fff6e4;
  user-select: none;
}

#entry-form h2 {
  margin-bottom: 4px;
  color: #ffd447;
  font-size: 26px;
  font-weight: 900;
  letter-spacing: 0.01em;
}

#entry-form .lede { margin-bottom: 18px; font-size: 15px; color: rgba(255, 246, 228, 0.72); }
#entry-form .lede strong { color: #ffd447; font-size: 19px; }

#entry-form label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 246, 228, 0.82);
}

#entry-form .req {
  margin-left: 6px;
  color: #8fe0a8;
  font-size: 11px;
  letter-spacing: 0.06em;
}

/* The name field and the dice, on one line. The dice is square and as tall as
   the field so it clears the 44px touch minimum on its own, without the label
   being counted towards it. */
#entry-form .namerow {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 4px;
}

#entry-form #entry-dice {
  flex: none;
  width: 48px;
  min-height: 48px;
  padding: 0;
  font-size: 20px;
  line-height: 1;
}

/* Announced, not shown. The dice's own face is an emoji, which a screen reader
   reads as "game die" if it reads it at all. */
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

#entry-form input[type="text"] {
  width: 100%;
  padding: 11px 13px;
  border: 2px solid rgba(255, 216, 168, 0.3);
  border-radius: 10px;
  background: rgba(12, 8, 5, 0.55);
  color: #fff6e4;
  font-family: inherit;
  /* 16px exactly. Anything smaller and iOS Safari zooms the whole page in when
     the field takes focus, which throws the canvas letterbox out. */
  font-size: 16px;
  font-weight: 700;
  user-select: text;
}

#entry-form input:focus-visible {
  outline: none;
  border-color: #ffd447;
  box-shadow: 0 0 0 3px rgba(255, 212, 71, 0.22);
}

#entry-form .hint {
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 246, 228, 0.5);
}

/* The fieldset, the legend and the consent tick lived here. They styled the
   email and phone fields, which no longer exist — see index.html and
   docs/DECISIONS.md, session 38. Deleted rather than left in place: dead CSS is
   how a deleted field quietly comes back looking as though it belongs. */

#entry-form .error {
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(255, 90, 70, 0.14);
  color: #ff9a8a;
  font-size: 13.5px;
  font-weight: 700;
}
#entry-form .error[hidden] { display: none; }

#entry-form .row { display: flex; gap: 10px; }

#entry-form button {
  flex: 1;
  /* 46px tall: the form is the one part of the game a player meets with a
     thumb and no practice, so nothing here is a small target. */
  min-height: 46px;
  padding: 12px 16px;
  border: 2px solid rgba(255, 212, 71, 0.75);
  border-radius: 10px;
  background: transparent;
  color: #ffd447;
  font-family: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

#entry-form button.primary {
  border-color: #fff6e4;
  background: #ffd447;
  color: #241a12;
}

#entry-form button:disabled { opacity: 0.5; cursor: default; }
#entry-form button:focus-visible { outline: 3px solid #8fe0a8; outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
  #entry-form { animation: entry-in 160ms ease-out; }
}
@keyframes entry-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}