/* style.css — The Daily Prezle. Colors and fonts are defined once here. */
:root {
  --paper: #EFE8D8;        /* newsprint */
  --ink: #1B1A17;
  --ink-soft: #2E2B25;
  --muted: #5B564C;
  --faint: #8A8374;
  --red: #A8322A;          /* the one accent ink */
  --cameo-bg: #E7DFCB;     /* inside the portrait ovals (light in both editions) */
  --rule-soft: rgba(27,26,23,.35);
  --glow-center: rgba(255,250,236,.55);
  --glow-edge: rgba(110,84,40,.18);
  --grain-opacity: .55;
  --masthead: 'UnifrakturMaguntia', serif;
  --head: 'Old Standard TT', Georgia, serif;
  --body: 'IM Fell English', Georgia, serif;
  --sc: 'IM Fell English SC', Georgia, serif;
}
/* The Night Edition: dark sepia paper and cream ink when the phone is in dark mode. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1F1912;
    --ink: #EDE3CF;
    --ink-soft: #DCCFB6;
    --muted: #B3A68E;
    --faint: #7E735F;
    --red: #E2735D;
    --rule-soft: rgba(237,227,207,.3);
    --glow-center: rgba(255,230,190,.06);
    --glow-edge: rgba(0,0,0,.4);
    --grain-opacity: .35;
  }
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { background: var(--paper); overscroll-behavior: none; touch-action: manipulation; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
/* While playing, the page itself never scrolls or bounces. */
body.locked { position: fixed; inset: 0; overflow: hidden; }
button { font: inherit; color: inherit; touch-action: manipulation; }
[hidden] { display: none !important; }

/* Paper: a light center, darker aged edges, and a grain layer over everything. */
.paper {
  max-width: 460px;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 18px calc(14px + env(safe-area-inset-bottom));
  background-image:
    radial-gradient(ellipse at 50% 35%, var(--glow-center) 0%, rgba(0,0,0,0) 55%, var(--glow-edge) 100%),
    url("mottle.png");
  background-size: 100% 100%, 512px 512px;
}
body.locked .paper { height: 100%; display: flex; flex-direction: column; }
.grain {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background-image: url("grain.png"); background-size: 160px 160px;
  mix-blend-mode: multiply; opacity: var(--grain-opacity);
}
@media (prefers-color-scheme: dark) { .grain { mix-blend-mode: normal; } }
.ink { text-shadow: 0 0 .6px currentColor; }
.rough { filter: url(#rough); }

/* ---------- Masthead ---------- */
header { flex: none; }
.ears { display: flex; gap: 10px; }
.ear { flex: 1; border: 1px solid var(--ink); padding: 3px 6px; text-align: center; }
.ear-title { font-family: var(--sc); font-size: 11px; letter-spacing: .08em; }
.ear-text { font-size: 12px; font-style: italic; line-height: 1.2; }
.masthead {
  margin: 8px 0 4px; text-align: center;
  font-family: var(--masthead); font-weight: 400; font-size: clamp(34px, 10.5vw, 46px); line-height: 1;
}
.dateline {
  border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink);
  padding: 1px 2px; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--sc); font-size: 12px; letter-spacing: .05em;
}
.sound {
  width: 36px; height: 26px; border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: var(--ink);
}
.sound .mute { display: none; }
.sound[aria-pressed="false"] .mute { display: inline; }
.sound[aria-pressed="false"] .waves { display: none; }

/* ---------- Game layout: stage fills the space, actions pinned at the bottom ---------- */
.screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.stage {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; -webkit-overflow-scrolling: touch;
}
.view { flex: 1; display: flex; flex-direction: column; }
.actions { flex: none; padding-top: 10px; }

/* ---------- Progress ---------- */
.progress { display: flex; justify-content: center; gap: 22px; margin: 10px 0 8px; font-family: var(--head); flex: none; }
.progress .step { display: flex; flex-direction: column; align-items: center; min-width: 22px; color: var(--faint); }
.progress .numeral { font-size: 15px; font-weight: 700; padding: 0 3px; }
.progress .pts { font-family: var(--sc); font-size: 11px; height: 13px; color: var(--muted); }
.progress .done { color: var(--ink); }
.progress .done .pts.exact { color: var(--red); }
.progress .now { color: var(--ink); }
.progress .now .numeral { border-bottom: 2px solid var(--ink); }

/* ---------- Question ---------- */
.kicker-row {
  display: flex; justify-content: space-between; align-items: baseline; flex: none;
  border-top: 1px solid var(--ink); padding-top: 6px;
  font-family: var(--sc); font-size: 13px; letter-spacing: .1em;
}
.kicker { color: var(--red); }
.muted-sc { font-family: var(--sc); color: var(--muted); letter-spacing: .08em; font-size: 13px; }
.headline { margin: 8px 4px 0; text-align: center; font-family: var(--head); font-weight: 700; line-height: 1.08; }
.headline.caps { text-transform: uppercase; letter-spacing: .01em; }
.rule-short { width: 64px; margin: 10px auto 8px; border-top: 1px solid var(--ink); flex: none; }
.deck { margin: 0 10px; text-align: center; font-style: italic; font-size: 17px; line-height: 1.3; color: var(--ink-soft); }
.dial-block { flex: none; padding-top: 6px; }

/* ---------- Cameos (engraved ovals) ---------- */
.cameo {
  display: block; border-radius: 50%; overflow: hidden; flex: none;
  background-color: var(--cameo-bg);
  background-image: repeating-linear-gradient(135deg, rgba(27,26,23,.16) 0 1px, transparent 1px 3px);
  border: 1.5px solid var(--ink);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4.5px var(--ink);
}
.cameo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cameo-xl { width: clamp(104px, 21vh, 150px); aspect-ratio: 104 / 132; margin: 8px auto 0; }
.cameo-lg { width: 96px; height: 122px; }

/* ---------- The dial ---------- */
.dial-row { display: flex; align-items: center; gap: 4px; }
.round-btn {
  width: 44px; height: 44px; flex: none; border-radius: 50%; cursor: pointer; padding: 0;
  border: 1px solid var(--ink); background: transparent; color: var(--ink);
  box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.wheel {
  position: relative; flex: 1; height: 146px; overflow: hidden;
  touch-action: none;            /* the dial owns every touch: no page scroll, no zoom */
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab; outline: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.wheel:active { cursor: grabbing; }
.wheel:focus-visible { box-shadow: 0 0 0 2px var(--red); border-radius: 8px; }
.wheel .item {
  position: absolute; left: 50%; top: 50%;
  width: 104px; height: 132px; margin: -66px 0 0 -52px;
  padding: 0; border: 0; background: none; cursor: pointer; will-change: transform, opacity;
}
.wheel .item .cameo { width: 100%; height: 100%; }
.wheel .item img { pointer-events: none; -webkit-user-drag: none; }
.wheel .token {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 700; font-size: 30px; color: #1B1A17;
}
.wheel .token small { font-family: var(--sc); font-weight: 400; font-size: 12px; letter-spacing: .1em; color: #5B564C; }
.pick { text-align: center; margin-top: 4px; }
.pick-num { font-family: var(--head); font-weight: 700; font-size: 32px; line-height: 1; }
.pick-name { font-family: var(--sc); font-size: 17px; letter-spacing: .08em; margin-top: 2px; min-height: 22px; }

/* ---------- Buttons ---------- */
.press {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 54px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  box-shadow: inset 0 0 0 3px var(--ink), inset 0 0 0 4px var(--paper);
  font-family: var(--head); font-weight: 700; font-size: 17px; letter-spacing: .14em; text-transform: uppercase;
}
.press:active { transform: translateY(1px); }
.hint { margin: 8px 0 0; text-align: center; font-size: 14px; font-style: italic; color: var(--muted); min-height: 1em; }

/* ---------- Answer ---------- */
.recap { margin: 6px 8px 0; text-align: center; font-style: italic; font-size: 14px; line-height: 1.3; color: var(--muted); }
/* The quip: stamped onto the page, then typed out like a telegram. */
.quip-box {
  align-self: center; margin: 10px 6px 0; padding: 6px 14px; max-width: 100%;
  border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px;
  transform: rotate(-1.5deg); filter: url(#stampfx);
  text-align: center; font-style: italic; font-size: 21px; line-height: 1.25; color: var(--ink);
}
.quip-box.exact { color: var(--red); }
.quip-box .ghost { visibility: hidden; }
.slam { animation: slam 340ms cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes slam {
  0%   { transform: scale(1.9) rotate(-9deg); opacity: 0; }
  55%  { transform: scale(.94) rotate(-2.5deg); opacity: 1; }
  75%  { transform: scale(1.02) rotate(-1.2deg); }
  100% { transform: scale(1) rotate(-1.5deg); }
}
.stamp.slam { animation-name: slamStamp; }
@keyframes slamStamp {
  0%   { transform: scale(2) rotate(-16deg); opacity: 0; }
  55%  { transform: scale(.92) rotate(-6deg); opacity: .95; }
  100% { transform: scale(1) rotate(-7deg); opacity: .9; }
}
.section-rule {
  margin: 12px 0 4px; display: flex; align-items: center; gap: 10px; flex: none;
  font-family: var(--sc); font-size: 13px; letter-spacing: .12em;
}
.section-rule::before, .section-rule::after { content: ""; flex: 1; border-top: 1px solid var(--ink); }
#reveal .section-rule { color: var(--red); }
.headline-answer { text-transform: uppercase; margin-top: 2px; }
.answer-row { margin-top: 10px; display: flex; gap: 12px; align-items: center; }
.answer-info { flex: 1; min-width: 0; }
.answer-num { font-family: var(--head); font-weight: 700; font-size: 34px; line-height: 1; }
.answer-name { font-family: var(--sc); font-size: 17px; letter-spacing: .05em; line-height: 1.15; margin-top: 2px; }
.answer-years { font-size: 15px; color: var(--muted); margin-top: 2px; }
.stamp {
  flex: none; transform: rotate(-7deg); filter: url(#stampfx); opacity: .9;
  border: 2.5px solid currentColor; color: var(--ink); padding: 4px 9px; text-align: center;
  font-family: var(--head); font-weight: 700; line-height: 1; font-size: 26px;
}
.stamp.exact { color: var(--red); }
.stamp-label { font-size: 10px; letter-spacing: .14em; margin-top: 2px; text-transform: uppercase; }
.guess-row {
  margin-top: 10px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
  padding: 7px 2px; display: flex; align-items: baseline; gap: 10px; font-size: 16px; line-height: 1.3;
}
.fact-block { margin-top: 10px; }
.dropcap { margin: 4px 0 0; font-size: 16px; line-height: 1.36; text-align: justify; hyphens: auto; }
.dropcap::first-letter { float: left; font-family: var(--head); font-weight: 700; font-size: 44px; line-height: .85; padding: 4px 6px 0 0; }

/* ---------- Final edition ---------- */
#summary { padding-bottom: 20px; }
.final-head { text-align: center; margin-top: 16px; }
.final-kicker { font-family: var(--head); font-weight: 700; font-size: 24px; letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.final-score { font-family: var(--head); font-weight: 700; font-size: 108px; line-height: .92; color: var(--red); margin: 4px 0; }
.press-share { margin-top: 18px; height: 60px; font-size: 19px; }
.review { list-style: none; margin: 0; padding: 0; }
.review li {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) 70px; column-gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--rule-soft);
}
.review .num { font-family: var(--head); font-weight: 700; font-size: 16px; line-height: 1.2; }
.review .q { font-size: 15.5px; line-height: 1.25; }
.review .d { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.review .p { text-align: right; font-family: var(--head); line-height: 1.1; }
.review .p b { font-size: 18px; }
.review .p.exact b { color: var(--red); }
.review .p small { display: block; font-size: 11px; color: var(--muted); }
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--ink); }
.numbers div { text-align: center; padding: 8px 2px; border-right: 1px solid var(--ink); }
.numbers div:last-child { border-right: 0; }
.numbers b { display: block; font-family: var(--head); font-size: 24px; line-height: 1; }
.numbers span { font-family: var(--sc); font-size: 11.5px; letter-spacing: .06em; }
.next-edition { margin: 16px 0 0; text-align: center; font-style: italic; font-size: 14px; color: var(--muted); }
footer { margin-top: 20px; text-align: center; font-family: var(--sc); font-size: 12px; letter-spacing: .06em; }
footer a { color: var(--muted); }

/* ---------- Shorter phones: drop the ears and the instructions, tighten spacing ---------- */
@media (max-height: 760px) {
  .ears { display: none; }
  .masthead { margin-top: 2px; font-size: clamp(30px, 9.5vw, 40px); }
  .progress { margin: 8px 0 6px; }
  .deck { font-size: 15.5px; }
  .press { height: 50px; }
}
@media (max-height: 640px) {
  #askView .deck, #askView .rule-short { display: none; }
  .fact-block .muted-sc { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .slam, .stamp.slam { animation: none; }
}
.guess-row .muted-sc { white-space: nowrap; }

/* ---------- Side columns (desktop only) ---------- */
.col { display: none; }
.col-head {
  font-family: var(--sc); font-size: 14px; letter-spacing: .12em; text-align: center;
  border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink); padding: 3px 0; margin: 0 0 10px;
}
.col-head + .col-text { margin-top: 0; }
.col-text { font-size: 15px; line-height: 1.38; text-align: justify; hyphens: auto; margin: 0 0 12px; }
.col-text.small { font-size: 14px; font-style: italic; color: var(--muted); text-align: left; }
.col .col-head:not(:first-child) { margin-top: 18px; }
kbd {
  font-family: var(--head); font-size: 13px; border: 1px solid var(--ink); border-radius: 3px;
  padding: 0 5px; box-shadow: 0 1px 0 var(--ink);
}
.keys { text-align: left; line-height: 1.8; }
.scorecard { list-style: none; margin: 0 0 12px; padding: 0; }
.scorecard li {
  display: grid; grid-template-columns: 34px 1fr auto; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: 1px solid var(--rule-soft); font-family: var(--head);
}
.scorecard .n { font-weight: 700; }
.scorecard .w { font-family: var(--sc); font-size: 13px; color: var(--muted); }
.scorecard .s { font-weight: 700; font-size: 18px; }
.scorecard .s.exact { color: var(--red); }
.scorecard .s.pending { color: var(--faint); font-weight: 400; }
.scorecard li.now .n { border-bottom: 2px solid var(--ink); justify-self: start; }
.scorecard .total { border-bottom: 0; border-top: 3px double var(--ink); margin-top: 4px; }

/* ---------- Desktop: a broadsheet front page ---------- */
@media (min-width: 960px) and (min-height: 620px) {
  .paper { max-width: 1240px; padding: 22px 40px 22px; }
  header {
    display: grid; grid-template-columns: 230px minmax(0, 1fr) 230px; column-gap: 24px; align-items: center;
    grid-template-areas: "earL mast earR" "date date date";
  }
  .ears { display: contents; }
  .ear:first-child { grid-area: earL; }
  .ear:last-child { grid-area: earR; }
  .ear { padding: 6px 10px; }
  .ear-title { font-size: 13px; }
  .ear-text { font-size: 15px; }
  .masthead { grid-area: mast; font-size: 78px; margin: 0; }
  .dateline { grid-area: date; margin-top: 8px; font-size: 14px; padding: 3px 4px; }

  #game {
    display: grid; column-gap: 34px;
    grid-template-columns: 250px minmax(0, 1fr) 250px;
    grid-template-rows: minmax(0, 1fr) auto auto;
  }
  .col { display: block; grid-row: 1; overflow-y: auto; padding-top: 16px; }
  .col-left { grid-column: 1; padding-right: 30px; border-right: 1px solid var(--ink); margin-right: -34px; }
  .col-right { grid-column: 3; padding-left: 30px; border-left: 1px solid var(--ink); margin-left: -34px; }
  .stage { grid-column: 2; grid-row: 1; padding: 0 8px; }
  .progress { display: none; }                 /* the Scorecard column shows progress on desktop */
  .kicker-row { margin-top: 16px; font-size: 15px; }
  .headline { font-size: clamp(30px, 3.2vw, 46px) !important; margin-top: 14px; }
  #askView .deck { font-size: 20px; }
  .cameo-xl { width: clamp(120px, 19vh, 170px); }
  .dial-block { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--ink); margin-top: 12px; padding-top: 10px; }
  .wheel { height: 196px; }
  .wheel .item { width: 128px; height: 162px; margin: -81px 0 0 -64px; }
  .wheel .token { font-size: 36px; }
  .pick-num { font-size: 38px; }
  .pick-name { font-size: 20px; }
  .actions { grid-column: 2; grid-row: 3; width: 100%; max-width: 440px; justify-self: center; }
  #reveal { max-width: 640px; width: 100%; align-self: center; }
  .quip-box { font-size: 26px; }
  .headline-answer { font-size: 36px !important; }
  .cameo-lg { width: 112px; height: 142px; }
  .answer-num { font-size: 40px; }
  .dropcap { font-size: 17px; }
  #summary { max-width: 640px; margin: 0 auto; }
}
/* Shorter desktop windows (laptops): a smaller masthead and dial, and no shortcut box. */
@media (min-width: 960px) and (min-height: 620px) and (max-height: 820px) {
  .masthead { font-size: 58px; }
  .ear-text { font-size: 13px; }
  .wheel { height: 168px; }
  .wheel .item { width: 112px; height: 142px; margin: -71px 0 0 -56px; }
  .col-left .col-head:not(:first-child), .col-left .keys { display: none; }
  .headline { font-size: clamp(26px, 2.8vw, 38px) !important; }
}

/* ---------- Phones: no dead space between the question and the dial ----------
   While asking, the question and the dial travel together as one block, centered in the
   space above the pinned button. On the answer screen the stage fills the space as before. */
@media (max-width: 959px), (max-height: 619px) {
  #game.asking .stage { flex: 0 1 auto; margin-top: auto; }
  #game.asking .dial-block { margin-bottom: auto; padding-top: 14px; }
  #game.asking #askView { flex: none; }
}
/* Big phones: a bigger dial so it fills the room. */
@media (max-width: 959px) and (min-height: 780px) {
  .wheel { height: 176px; }
  .wheel .item { width: 124px; height: 158px; margin: -79px 0 0 -62px; }
  .wheel .token { font-size: 34px; }
  .pick-num { font-size: 36px; }
}