/* share-daily.css: what the Daily pages (/c/ and /daily/) add to share.css:
   the three card backs, the ten hand play stage with three or four keys,
   the score chips and the ten tile grids of the results, the per hand
   list, the streak line and the prose. Same CasinoTheme values, no web
   fonts, every piece sized before it is filled so nothing shifts.

   Contrast (WCAG 2 ratios, computed from these values, 2026-10-16):
     gold #ffd700 on the chip's ink #141418           13.10
     white 85% on the ink (the chip's "of 10")        13.40
     ink soft (white 78%) on the felt (streak line)    5.52  (AA)
     text muted #a0a0a0 on the surface #1a1a2e         6.52  (the tip line)
     white on the shaded column over the felt          9.19 on the highlight,
       12.17 on the felt */

:root {
  --crimson: #6b0a14;
  --crimson-deep: #42050d;
  --chip-ink: #141418;
}

/* The three crimson backs, fanned like MockDealt with three BACK codes. The
   box keeps its height from the start. */
.backs {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 142px;
  margin: 22px 0 0;
  padding-top: 8px;
}

.backs i {
  position: relative;
  display: block;
  width: 84px;
  height: 122px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--crimson), var(--crimson-deep));
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
}

.backs i::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid var(--gold-muted);
  border-bottom-color: rgba(212, 175, 55, 0.5);
  border-radius: 8px;
}

.backs i:nth-child(1) { transform: rotate(-12deg) translateY(4px); }
.backs i:nth-child(2) { margin: 0 -26px; transform: translateY(0); z-index: 1; }
.backs i:nth-child(3) { transform: rotate(12deg) translateY(4px); }

/* The friend's score on its own line in the intro headline. */
.question .line { display: block; }

.note {
  margin: 20px 0 0;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.felt .cta { margin-top: 22px; }

/* The play stage: three keys in a row, four as two by two on a pair. */
.keys.daily { grid-template-columns: repeat(3, 1fr); }
.keys.daily.pair { grid-template-columns: repeat(2, 1fr); }
.keys.daily .key { padding: 0 8px; font-size: 17px; }
.keys.daily .col { gap: 0; }

.felt .result { margin-top: 14px; text-align: left; }
.felt .result h3 { margin: 0 0 6px; font: 900 20px/1.2 var(--font-round); outline: none; }

.btn.next { margin-top: 14px; }

/* The felt's headings take focus after a pick and after the ten, with no
   ring, as the /h/ verdict does; the results headline is a size smaller
   (mockup 08) so "You win this one." holds one line at 375. */
.felt .question:focus { outline: none; }
.felt .question, .felt .hand { text-wrap: balance; }
.stage[data-stage="results"] .question { font-size: clamp(28px, 8.6vw, 32px); }
/* The public page's headline at 34 px (mockup 18). */
[data-public] h1.question { font-size: clamp(28px, 9vw, 34px); }

/* The results: two shaded columns, one centered when there is no friend. */
.compare {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 16px;
}

.side {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 14px 8px 12px;
  border-radius: 18px;
  background: var(--felt-shade);
}

.compare.solo .side { flex: 0 1 230px; margin: 0 auto; }

.who { font: 700 16px/1.2 var(--font-round); }

/* ScoreChip: the gold face with the inserts ring and the dark center; calm
   is the friend's, a dark face with white inserts. The wall shows as the
   thick bottom edge. */
.chip {
  --d: 96px;
  --face: linear-gradient(var(--gold), var(--gold-muted));
  --insert: var(--chip-ink);
  --wall: var(--gold-wall);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--d);
  height: var(--d);
  margin-bottom: 7px;
  border-radius: 50%;
  background: var(--face);
  box-shadow: 0 7px 0 var(--wall), 0 12px 14px rgba(0, 0, 0, 0.4);
}

.chip::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 6deg, var(--insert) 0deg 20deg, transparent 20deg 45deg);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(var(--d) * 0.37), #000 calc(var(--d) * 0.38) calc(var(--d) * 0.5), transparent calc(var(--d) * 0.5));
  mask: radial-gradient(circle, transparent 0 calc(var(--d) * 0.37), #000 calc(var(--d) * 0.38) calc(var(--d) * 0.5), transparent calc(var(--d) * 0.5));
}

.chip::after {
  content: "";
  position: absolute;
  inset: 15%;
  border-radius: 50%;
  background: var(--chip-ink);
  box-shadow: inset 0 0 0 1.5px rgba(255, 215, 0, 0.55), 0 0 0 1.5px var(--gloss);
}

.chip b,
.chip small {
  position: relative;
  z-index: 1;
  line-height: 1;
}

.chip b { font: 900 calc(var(--d) * 0.37) / 1 var(--font-round); color: var(--gold); }
.chip small { margin-top: 2px; font: 900 calc(var(--d) * 0.085) / 1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }

.chip.calm {
  --face: linear-gradient(var(--surface), var(--chip-ink));
  --insert: var(--text);
  --wall: #000;
}

.chip.calm b { color: var(--text); }
.chip.calm::after { box-shadow: inset 0 0 0 1.5px rgba(255, 215, 0, 0.25), 0 0 0 1.5px var(--hairline); }

/* DailyGrid: ten tiles, five across, no glyphs. A right hand is a gold
   tile on its wall; a miss is an open slot. The grid is fluid: it fills
   its well up to 153 px (five 26 px tiles), so at 375 the two wells each
   hold their own five across (128 px inner) instead of overflowing. */
.grid {
  --depth: 2.5px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  width: 100%;
  max-width: 153px;
}

.grid i {
  display: block;
  width: auto;
  aspect-ratio: 1;
  margin-top: var(--depth);
  border: 1.5px solid var(--rim);
  border-radius: 26%;
  background: var(--felt-shade);
}

.grid i.on {
  position: relative;
  margin: 0 0 var(--depth);
  border: 0;
  background: linear-gradient(var(--gold), var(--gold-muted));
  box-shadow: 0 var(--depth) 0 var(--gold-wall);
}

.grid i.on::before {
  content: "";
  position: absolute;
  top: 3px;
  right: 20%;
  left: 20%;
  height: 2px;
  border-radius: 1px;
  background: var(--gloss);
}

.compare.solo .grid { --depth: 4px; max-width: 230px; gap: 8px; }

/* The per hand list: a mark, the hand, what happened, the reason. */
.list { display: flex; flex-direction: column; gap: 10px; }

.list .panel {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
}

.list .mark { flex: none; display: block; margin-top: 1px; color: var(--loss); }
.list .mark.check { color: var(--felt-bright); }
.list .mark.check path { stroke: #fff; }

.list .body { min-width: 0; }
.list b { display: block; font-size: 15px; }
.list p { margin: 2px 0 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.4; }
.list p.tip { color: var(--text-muted); }

/* The public page's intro row: both buttons on one line at 375. */
[data-daily] .row .btn { gap: 6px; padding: 0 8px; font-size: 14px; white-space: nowrap; }

/* The tall dark button with the plane and two lines; it grows when the
   second line wraps. */
.btn.tall { height: auto; min-height: 56px; padding: 8px 12px; }
.btn .stack { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.btn .stack small { font: 600 12.5px/1.3 var(--font); color: var(--text-soft); }

/* The streak line on the felt, with the white puck. */
.streak {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

.puck {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font: 900 14px/1 var(--font-round);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

.how h2 { margin: 4px 0 6px; font: 900 19px/1.2 var(--font-round); }
.how p { margin: 0; color: var(--text-soft); font-size: 15px; line-height: 1.45; }
.how p.small { margin-top: 6px; color: var(--text-muted); font-size: 13px; }

/* What shows when: with the script running the play button shows until
   the ten start, the store button and the share button after the ten
   (mockup 08), and the public page's row on the intro. Without it the
   intro, the prose and the store links show and the share buttons do not. */
.js .cta.play { display: flex; }
.js.is-playing .cta.play, .js.is-finished .cta.play { display: none; }
.js.is-finished .cta.store { display: flex; }
.js [data-daily] .pass { display: none; }
.js.is-finished [data-daily] .pass { display: flex; }
html:not(.js) .pass, html:not(.js) [data-daily] .row, html:not(.js) .cta.play { display: none; }
.js [data-daily] .row { display: grid; }
.js.is-playing [data-daily] .row, .js.is-finished [data-daily] .row { display: none; }
.js.is-finished .how { order: 9; }