/* The page frame. iPhone Safari rules (BUILD_PLAN 2.8, GAME_DESIGN 12.1):
   safe-area padding, 100dvh, no rubber band, no double-tap zoom, no text
   inflation on rotation, no callout or selection on what you tap. */

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  background: var(--page);
  color: var(--c4);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
  overscroll-behavior: none;
}

body {
  margin: 0;
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: manipulation;
  background: var(--page);
  font-family: var(--font-pixel);
  font-kerning: none;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
  letter-spacing: 0;
  hyphens: none;
  -webkit-hyphens: none;
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; font-variant-ligatures: none; }

[hidden] { display: none !important; }

/* ---- The title page ------------------------------------------------- */

.title-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100dvh;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  overflow: hidden;
}

.plate {
  --plate-w: 320px;      /* the picture's width, set by home.js */
  --title-room: 88px;    /* the cover's quiet sky (its top 88 rows), set by home.js */
  position: relative;
  margin: 0;
  flex: none;
  line-height: 0;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* The picture: sized in device pixels by display.js, never smoothed. */
.picture {
  display: block;
  width: 320px;
  height: 320px;
  background: var(--c0);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* The title sits centered in the cover's quiet sky. Its type scales with the
   plate's width, but never past what the sky can hold: the block is about
   0.26 of the unit tall, so a unit of 3.3 x the room leaves a margin above
   and below (on the SE's 4x2 pixel the room is only 88 pt). */
.cover-title {
  --u: min(var(--plate-w), calc(var(--title-room) * 3.3));
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--title-room);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  line-height: 1;
  pointer-events: none;
}

/* The title waits for the picture to finish drawing, then steps in, like a
   1984 screen. If the script never runs, it shows anyway after 3 s. */
@media (prefers-reduced-motion: no-preference) {
  .plate.drawing .cover-title {
    opacity: 0;
    animation: title-safety 0s 3s forwards;
  }
  .plate:not(.drawing) .cover-title {
    transition: opacity 480ms steps(4, end);
  }
}

@keyframes title-safety { to { opacity: 1; } }

.title {
  margin: 0;
  font-weight: 700;
  color: var(--c4);
  text-shadow: 0 2px 0 var(--c0);
}

.title-small {
  display: block;
  font-size: calc(var(--u) * 0.062);
  color: var(--c5);
}

.title-big {
  display: block;
  margin-top: calc(var(--u) * 0.006);
  font-size: calc(var(--u) * 0.145);
  line-height: 0.95;
}

.tagline {
  margin: calc(var(--u) * 0.012) 0 0;
  font-size: calc(var(--u) * 0.04);
  font-weight: 400;
  color: var(--c6);
  text-shadow: 0 1px 0 var(--c0);
}

/* Decorations VoiceOver shouldn't read: the second declaration gives them
   empty alt text where supported; older engines keep the first. */
.tagline::before { content: "~ "; content: "~ " / ""; }
.tagline::after { content: " ~"; content: " ~" / ""; }

/* ---- The shelf under the cover --------------------------------------- */

.shelf {
  flex: none;
  width: 100%;
  max-width: 440px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
  padding: 14px 12px 8px;
}

/* The Sierra box: snow, a double brick border, ink text (doc 12.2). */
.box {
  background: var(--box-fill);
  color: var(--ink);
  border: 4px double var(--box-border);
  border-radius: 0;
}

.choice {
  -webkit-appearance: none;
  appearance: none;
  opacity: 1; /* iOS dims disabled buttons on its own; the colors below say it */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: var(--choice-h);
  padding: 8px 14px;
  text-align: left;
  font-size: 20px;
  line-height: 1.1;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: pointer;
}

.choice-label::before { content: "> "; content: "> " / ""; }

.choice-note {
  font-size: 15px;
  color: var(--c9);
}

.choice:disabled {
  cursor: default;
  background: var(--c5);
}

.choice:disabled .choice-label { color: var(--c2); }
.choice:disabled .choice-label::before { content: "- "; content: "- " / ""; }

.install {
  margin: 2px 2px 0;
  font-size: 15px;
  line-height: 1.3;
  color: var(--c5);
}

/* The update note (E.7): a new build waits until Restart. */
.update-note {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
}

.update-line {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  color: var(--ink);
}

/* The stamps: Works offline, once the game is saved on the phone, and the
   build code alone (app.build). */
.stamps {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 4px 2px 0;
  font-size: 13px;
  line-height: 1.2;
  color: var(--c3);
}

.offline-stamp {
  border: 1px solid var(--c3);
  padding: 0 4px;
}

.offline-stamp::before { content: "✓ "; content: "✓ " / ""; }

/* Five quick taps on the build code open the debug menu (E.11). The hit
   area is 44 pt, and the stamp looks no different: nothing marks it. */
.build-stamp {
  /* Pixelify's 5 reads as an S, and the code is read off the phone. */
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  display: inline-block;
  padding: 14px 8px;
  margin: -14px -8px;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* ---- Held sideways --------------------------------------------------- */

.upright {
  display: none;
  position: fixed;
  inset: 0;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  background: var(--c0);
  text-align: center;
}

/* The turn-the-phone glyph: whole 16x16 grid squares, like the art. */
.turn-glyph {
  flex: none;
  width: 64px;
  height: 64px;
  color: var(--c4);
}

.upright p {
  margin: 0;
  padding: 18px 22px;
  font-size: 20px;
  color: var(--ink);
  background: var(--box-fill);
  border: 4px double var(--box-border);
}

@media (orientation: landscape) and (max-height: 540px) {
  .title-page { display: none; }
  .upright { display: flex; }
}

/* ---- Sheets: the error sheet and the debug menu ---------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: var(--safe-top) var(--safe-right) 0 var(--safe-left);
  background: rgb(27 31 42 / 0.72);
}

/* An error comes first, even over the debug menu. */
#error-sheet { z-index: 20; }

.sheet {
  width: 100%;
  max-width: 440px;
  max-height: 80dvh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px calc(14px + var(--safe-bottom));
}

.sheet-line {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
}

/* The bug report, exactly as it is copied: selectable, so a long press
   can copy it too. */
.report {
  flex: none;
  margin: 0;
  max-height: 40dvh;
  overflow: auto;
  font: 12px/1.3 ui-monospace, monospace;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--ink);
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
}

/* Inputs at 16 px or more, or iOS zooms the page (BUILD_PLAN 2.8). */
textarea.report {
  width: 100%;
  min-height: 8em;
  font-size: 16px;
  background: var(--c4);
  border: 1px solid var(--c2);
  border-radius: 0;
  resize: none;
}

/* Copied: a ✓ after the label for two seconds (no words). */
.done::after { content: " ✓"; content: " ✓" / ""; }

/* ---- The debug menu (built by ui/debug.js when it opens) ------------- */

.debug-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.debug-id {
  margin: 0;
  font-size: 15px;
  color: var(--c2);
  user-select: text;
  -webkit-user-select: text;
}

.debug-close {
  flex: none;
  width: var(--target);
  height: var(--target);
  margin: -8px -6px -8px 0;
  padding: 0;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  background: none;
  border: 0;
  cursor: pointer;
}

/* While the copy fallback shows the report selected, the plain copy hides. */
.debug textarea.report:not([hidden]) + pre.report { display: none; }

.debug-note-label {
  font-size: 15px;
  color: var(--c2);
}

.debug-note {
  width: 100%;
  font: 16px/1.3 var(--font-pixel);
  color: var(--ink);
  background: var(--c4);
  border: 1px solid var(--c2);
  border-radius: 0;
  resize: vertical;
}

.marks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 15px;
}

.marks-label { color: var(--c2); margin-right: 4px; }

.marks-mode {
  min-height: var(--target);
  padding: 4px 10px;
  color: var(--ink);
  background: var(--c4);
  border: 1px solid var(--c2);
  border-radius: 0;
  cursor: pointer;
}

.marks-mode[aria-pressed="true"] {
  color: var(--c4);
  background: var(--c2);
}

/* ---- Preview's debug marks ------------------------------------------- */

/* Preview's debug marks (GAME_DESIGN 18.6): draft dotted, changed dashed,
   cut struck through, placeholders cyan, a missing id in brackets. Main
   never carries data-t-state, so none of this applies there. */
html[data-marks="on"] [data-t-state="draft"],
html[data-marks="drafts"] [data-t-state="draft"] { text-decoration: underline dotted var(--c6); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html[data-marks="on"] [data-t-state="changed"] { text-decoration: underline dashed var(--c3); text-decoration-thickness: 2px; text-underline-offset: 3px; }
html[data-marks="on"] [data-t-state="cut"] { text-decoration: line-through var(--c9); }
html[data-marks="on"] .t-ph { color: var(--c3); }
html[data-marks] [data-t-state="missing"] { outline: 1px dashed var(--c6); }