:root {
  --sky: #FBF7EE; --ink: #2F2A26; --line: #C9BFAE;
  --red: #D64545; --gold: #E8A33D; --cream: #F5EFE0;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: var(--sky); color: var(--ink);
  font-family: Karla, system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
body { display: flex; flex-direction: column; align-items: center; }
.wrap { width: 100%; max-width: 860px; padding: 12px; flex: 1;
        display: flex; flex-direction: column; gap: 12px; }
.masthead { display: flex; align-items: center; justify-content: space-between;
            gap: 8px; flex-wrap: nowrap; }
.masthead h1 { font-family: Fraunces, Georgia, serif; margin: 0;
               font-size: clamp(1.05rem, 4.6vw, 1.5rem); white-space: nowrap; }
.masthead a { color: var(--ink); font-size: .8rem; opacity: .7;
              white-space: nowrap; }

.stage { position: relative; width: 100%; aspect-ratio: 800 / 260;
         border: 2px solid var(--ink); border-radius: 10px; overflow: hidden;
         background: var(--cream); touch-action: manipulation; }
.stage canvas { width: 100%; height: 100%; display: block; }

/* Panels sit below the stage rather than over it: the letterboxed stage is
   ~120px tall on a phone, which cannot hold the game-over email form. */
.overlay { display: flex; flex-direction: column;
           align-items: center; justify-content: center; gap: 10px;
           border: 2px solid var(--ink); border-radius: 10px;
           background: var(--cream); padding: 16px; text-align: center; }
.overlay[hidden] { display: none; }
.overlay h2 { font-family: Fraunces, Georgia, serif; margin: 0; font-size: 1.3rem; }
.overlay input[type=email], .overlay input[type=text] {
  width: min(320px, 90%); padding: 11px 12px; font-size: 16px; /* 16px: iOS won't zoom */
  border: 2px solid var(--ink); border-radius: 8px; background: #fff;
}
.overlay button { padding: 11px 26px; font-size: 1rem; font-weight: 700;
  border: 2px solid var(--ink); border-radius: 8px; background: var(--gold);
  color: var(--ink); cursor: pointer; }
.overlay button:disabled { opacity: .5; cursor: default; }
#over-form { display: flex; flex-direction: column; align-items: center; gap: 8px; }
#over-form[hidden] { display: none; }
.optin { display: flex; gap: 8px; align-items: flex-start;
         max-width: 320px; text-align: left; font-size: .82rem; }
.fine { font-size: .72rem; opacity: .75; max-width: 340px; line-height: 1.45; }
.err { color: var(--red); font-size: .82rem; min-height: 1em; }

.board { border: 2px solid var(--ink); border-radius: 10px; padding: 12px 14px; }
.board h3 { font-family: Fraunces, Georgia, serif; margin: 0 0 8px; font-size: 1rem; }
.board ol { margin: 0; padding-left: 22px; }
.board li { padding: 2px 0; }
.board li.me { font-weight: 700; color: var(--red); }
.board .empty { opacity: .6; font-size: .85rem; }
.winner { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line);
          font-size: .85rem; }

.mast-right { display: flex; align-items: center; gap: 8px; }
.toggle { border: 2px solid var(--ink); border-radius: 8px; background: var(--cream);
          font-size: .9rem; line-height: 1; padding: 5px 7px; cursor: pointer; }
.toggle[aria-pressed="false"] { opacity: .38; }

/* Thumb controls: touch devices only. A mouse has the arrow keys, and on a
   desktop these would just be clutter under the game. */
.pad { display: none; gap: 10px; }
.pad button { flex: 1; padding: 16px 0; font-size: 1rem; font-weight: 700;
              font-family: inherit; border: 2px solid var(--ink);
              border-radius: 10px; background: var(--gold); color: var(--ink);
              touch-action: manipulation; user-select: none; }
.pad button:active { background: var(--red); color: var(--cream); }
/* Driven by a body class set from JS feature detection, not by the media
   query alone: (hover:none) and (pointer:coarse) do not reliably match on
   every device, and if the pad fails to appear then ducking — and therefore
   every egg — is impossible on a phone. The query stays as a backstop. */
body.touch .pad { display: flex; }
@media (hover: none) and (pointer: coarse) { .pad { display: flex; } }