/* Brand tokens mirror brand/brand.py. If those change, change these.
   Deliberately not a build step: one stylesheet, no toolchain, nothing to break at 8:45pm. */
:root {
  --ivory:      #F8F5ED;
  --charcoal:   #1F2320;
  --terracotta: #B76A4E;
  --ink:        #2A2E2A;
  --muted:      #6B6560;
  --rule:       #E3DED2;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --sans: "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

/* Used at 8:45pm, one-handed, in a dim room, by somebody tired. Everything below is sized for
   that: big targets, high contrast, nothing under 17px. */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#app { max-width: 34rem; margin: 0 auto; padding: 2rem 1.25rem 1rem; }
.screen[hidden] { display: none; }
.screen { animation: rise .18s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

h1 { font-size: 2rem; line-height: 1.15; margin: .2rem 0 .8rem; color: var(--charcoal); font-weight: 700; }
h2.question {
  font-size: 1.6rem; line-height: 1.3; margin: .4rem 0 1.4rem;
  color: var(--charcoal); font-weight: 700;
}
/* The wordmark is a rendered PNG, not a web font. Nothing on this page waits on a font to
   download before the brand shows up. (It is Times New Roman, not the Didone once assumed; see brand/brand.py.)
   Served at 587x119 and shown at 40px tall, so it stays sharp on a retina screen. The
   intrinsic width and height are on the tag so the h1 below does not jump when it loads.

   32px, not the 40 it started at. Both this and the h1 are serif, and at 40 the wordmark's
   cap height came within 15% of "The Newlywed Game", so the top of the page read as two
   titles arguing. At 32 the ratio is about 1.45 to 1 and the order is obvious: the game is
   the page, the publication is who is handing it to you. */
.wordmark { display: block; height: 32px; width: auto; margin: 0 0 1.3rem; }

.kicker {
  font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .4rem;
}
.lede { font-size: 1.1rem; margin: 0 0 1rem; }
.prompt { font-size: 1.05rem; color: var(--terracotta); margin: 0 0 .25rem; font-weight: 700; }
.note { font-family: var(--sans); font-size: .9rem; line-height: 1.5; color: var(--muted); margin: 1rem 0 0; }

/* The join code is read aloud across a room, so it is the biggest thing on the screen. */
.code {
  font-family: var(--sans); font-size: 2.9rem; font-weight: 700; letter-spacing: .18em;
  color: var(--terracotta); margin: 0 0 .5rem; word-break: break-all;
}

button, .as-link {
  display: block; width: 100%; min-height: 3.5rem;
  font-family: var(--sans); font-size: 1.05rem; font-weight: 600;
  border-radius: .6rem; border: 1.5px solid var(--charcoal);
  cursor: pointer; margin: .75rem 0 0; padding: .9rem 1rem;
  text-align: center; text-decoration: none;
}
.primary { background: var(--charcoal); color: var(--ivory); }
.secondary { background: transparent; color: var(--charcoal); }
button:disabled { opacity: .38; cursor: not-allowed; }
button:active { transform: translateY(1px); }
.as-link { line-height: 1.7; }
.row { display: flex; gap: .6rem; }
.row button { margin-top: 0; }

label {
  display: block; font-family: var(--sans); font-size: .9rem; font-weight: 600;
  color: var(--muted); margin: 1.2rem 0 .4rem;
}
input, textarea {
  width: 100%; font-family: var(--serif); font-size: 1.1rem; color: var(--ink);
  background: #fff; border: 1.5px solid var(--rule); border-radius: .6rem;
  padding: .85rem .9rem; resize: vertical;
}
input:focus, textarea:focus { outline: 2px solid var(--terracotta); outline-offset: 1px; border-color: var(--terracotta); }
#code { font-family: var(--sans); font-size: 1.7rem; letter-spacing: .16em; text-align: center; text-transform: uppercase; }

.or { display: flex; align-items: center; gap: .8rem; margin: 1.6rem 0 .4rem; color: var(--muted); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.or span { font-family: var(--sans); font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; }

.seats { list-style: none; padding: 0; margin: 1.2rem 0 0; }
.seats li {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--sans); font-size: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--rule);
}
.seats .dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--rule); flex: none; }
.seats .dot.on { background: var(--terracotta); }

/* Couple count. A segmented control rather than a dropdown: on a phone a native select is a
   full-screen modal for four options, and this is the first thing anyone touches. */
.seg { display: flex; gap: .5rem; margin: .1rem 0 0; }
.seg button {
  flex: 1; margin: 0; min-height: 3.1rem; padding: .7rem .3rem;
  border: 1.5px solid var(--rule); background: #fff; color: var(--muted); font-size: .98rem;
}
.seg button.on { border-color: var(--charcoal); background: var(--charcoal); color: var(--ivory); }
.seg button:first-child { flex: 1.5; }

.reveal-group { margin: 0 0 1.4rem; }
.reveal-group + .reveal-group { padding-top: 1.1rem; border-top: 1px solid var(--rule); }
.reveal-who {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 .5rem;
}
.reveal-group.is-mine .reveal-who { color: var(--terracotta); }
.verdict-tag { font-family: var(--sans); font-size: .82rem; font-weight: 700; margin-left: .5rem; }
.verdict-tag.hit { color: var(--terracotta); }
.verdict-tag.miss { color: var(--muted); }

.card { border: 1.5px solid var(--rule); border-radius: .7rem; padding: 1rem 1.1rem; margin: 0 0 .8rem; background: #fff; }
.card.accent { border-color: var(--terracotta); }
.card-label { font-family: var(--sans); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem; }
.card-text { font-size: 1.2rem; margin: 0; color: var(--charcoal); }

.waiting { font-size: 1.15rem; color: var(--muted); }
.dots i { display: inline-block; width: .32rem; height: .32rem; margin-left: .22rem; border-radius: 50%; background: var(--terracotta); animation: blink 1.3s infinite; }
.dots i:nth-child(2) { animation-delay: .18s; }
.dots i:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.scores { list-style: none; padding: 0; margin: 1rem 0 1.4rem; }
.scores li { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--sans); font-size: 1.15rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.scores .pts { font-weight: 700; color: var(--terracotta); }

/* The reconnecting banner. Fixed to the top so the screen underneath does not jump, and dark on
   ivory so it reads in a dim room without being alarming. Losing the connection is routine here. */
.net {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  padding: calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;
  background: var(--charcoal); color: var(--ivory);
  font-family: var(--sans); font-size: .95rem; text-align: center;
}
.net .dots i { background: var(--ivory); }
/* Push the screen down while the banner is up, so it never sits on top of the round and points. */
body:has(#net:not([hidden])) #app { padding-top: calc(4.2rem + env(safe-area-inset-top)); }

/* The end-screen invite. Deliberately quieter than "Play again": a rule above it, muted sans, a
   text link rather than a button. Someone who just finished a game is owed their scores first. */
.invite { margin: 2rem 0 0; padding: 1.2rem 0 0; border-top: 1px solid var(--rule); }
.invite p { font-family: var(--sans); font-size: .95rem; line-height: 1.55; color: var(--muted); margin: 0 0 .5rem; }
.invite a {
  display: inline-block; min-height: 2.75rem; line-height: 2.75rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 600; color: var(--terracotta);
  text-decoration: underline; text-underline-offset: .2em;
}

/* Instructions. A native <dialog> so Escape, focus trapping and the backdrop come free, and so it
   still behaves if the script fails. Scrolls inside itself rather than the page, because on a phone
   a modal that scrolls the page behind it loses your place. */
dialog#how {
  border: none; border-radius: .9rem; padding: 0; background: var(--ivory); color: var(--ink);
  width: min(34rem, calc(100vw - 1.6rem)); max-height: 85vh; overflow: hidden;
}
dialog#how::backdrop { background: rgba(31, 35, 32, .55); }
.sheet { display: flex; flex-direction: column; max-height: 85vh; }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--rule); flex: none; background: var(--ivory);
}
.sheet-head h2 { margin: 0; font-size: 1.35rem; color: var(--charcoal); }
.close {
  width: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0; flex: none;
  font-size: 1.7rem; line-height: 1; border: none; background: transparent; color: var(--muted);
}
.sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .4rem 1.25rem 1.6rem; }
.sheet-body h3 {
  font-family: var(--sans); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--terracotta); margin: 1.5rem 0 .4rem;
}
.sheet-body p { margin: 0 0 .8rem; font-size: 1.02rem; line-height: 1.62; }

@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
  .dots i { animation: none; opacity: .6; }
}