/* share.css: the look of the share pages (/h/ today; /c/, /daily/ and the
   hand articles' quiz block later). Every color is a CasinoTheme value from
   Black Jack/Theme/CasinoTheme.swift; the felt, the chunky keys with the
   thick bottom edge, the FeltTag capsule and the PathPanel card are the
   Learn path's pieces drawn in CSS. System font stack, no web fonts, no
   layout shift (every image has its size), motion off under
   prefers-reduced-motion.

   Contrast (WCAG 2 ratios, computed from these values, 2026-10-16):
     white on the felt highlight #2e7d32          5.13  (AA)
     white on the felt #1b5e20                    7.87
     ink soft (white 78%) on the felt #1b5e20     5.52  (AA; 3.79 on the
       highlight, so the gradient keeps the highlight under the cards and the
       hand line sits on felt or darker)
     gold on a shaded tag over the highlight      6.56
     white on the surface #1a1a2e                17.06
     gold on the surface                         12.16
     ink #141418 on gold #ffd700 / muted #d4af37 13.10 / 8.74
     ink 72% on gold muted (the CTA subtitle)     4.93  (AA)
     text muted #a0a0a0 on the background         7.57 */

:root {
  --bg: #0a0a0a;
  --surface: #1a1a2e;
  --felt: #1b5e20;
  --felt-bright: #2e7d32;
  --felt-dark: #0f3c14;
  --gold: #ffd700;
  --gold-muted: #d4af37;
  --gold-wall: #9e8000;
  --card-red: #e63946;
  --split: #af52de;
  --loss: #ff5252;
  --text: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.78);
  --text-muted: #a0a0a0;
  --ink: #141418;
  --felt-shade: rgba(0, 0, 0, 0.34);
  --edge-shade: rgba(0, 0, 0, 0.42);
  --hairline: rgba(255, 255, 255, 0.14);
  --rim: rgba(255, 255, 255, 0.4);
  --gloss: rgba(255, 255, 255, 0.45);
  --gold-stroke: rgba(255, 215, 0, 0.35);
  --gold-stroke-soft: rgba(255, 215, 0, 0.25);
  --font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-round: ui-rounded, var(--font);
  --radius: 16px;
  --depth: 6px;
  --ease: 0.25s ease;
}

* { box-sizing: border-box; }

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.3;
}

img { display: block; }

/* The reveal shows parts the server sends hidden; no display rule below
   may bring them back early. */
[hidden] { display: none !important; }

a { color: inherit; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 430px;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(10px + env(safe-area-inset-top)) 18px calc(18px + env(safe-area-inset-bottom));
}

@media (min-width: 720px) {
.wrap { padding-top: 32px; }
}

main { display: flex; flex-direction: column; gap: 14px; }

/* The top strip: icon, name, the quiet store link. */
.top { display: flex; align-items: center; gap: 10px; }

.top img { border-radius: 8px; }

.brand { display: flex; flex-direction: column; min-width: 0; }

.brand b { font: 800 17px/1.2 var(--font-round); }

.brand span { font-size: 12px; color: var(--text-muted); }

.get {
  margin-left: auto;
  padding: 7px 12px;
  border: 1px solid rgba(255, 215, 0, 0.6);
  border-radius: 999px;
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* The felt panel. The highlight sits under the cards, the edges fall to the
   dark felt; the question and the hand line read on felt or darker. */
.felt {
  padding: 18px;
  border: 1px solid rgba(255, 215, 0, 0.3);
  border-radius: 24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 58%, var(--felt-bright) 0%, var(--felt) 45%, var(--felt-dark) 100%);
  text-align: center;
}

.lost {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
}

/* FeltTag: the small uppercase capsule on a shaded pill. */
.tag {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--felt-shade);
  color: var(--text);
  font: 900 11px/1 var(--font);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag.gold { color: var(--gold); }
.tag.soft { color: var(--text-soft); }

.question { margin: 12px 0 2px; font: 900 clamp(30px, 10.5vw, 38px)/1.1 var(--font-round); overflow-wrap: anywhere; }

.hand {
  margin: 0;
  color: var(--text-soft);
  font-size: 17px;
  font-weight: 600;
}

/* The table: the dealt pair, then the dealer's card, each over its tag. */
.table {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 26px;
  margin-top: 16px;
}

.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.card { height: auto; border-radius: 5px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.1)); }

.dealt { display: flex; align-items: flex-start; padding: 0 4px 4px; }

.dealt .card:first-child { transform: rotate(-4deg); }

.dealt .card:last-child { margin-left: -31px; transform: rotate(4deg) translateY(3%); }

/* The two keys and the tags that land under them after the reveal. */
.keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* The tag row keeps its height from the start, so the panel does not grow
   when the tags land. */
.under { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 23px; }

/* Chunky: a face on a wall, the wall showing as the thick bottom edge; a
   press sinks the face onto it. */
.key,
.btn,
.cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0 0 var(--depth);
  padding: 0 12px;
  border: 1px solid var(--gold-stroke);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: 700 18px/1.2 var(--font-round);
  text-decoration: none;
  box-shadow: 0 var(--depth) 0 var(--bg);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: background-color var(--ease), color var(--ease), opacity var(--ease), border-color var(--ease), box-shadow var(--ease);
}

.key { height: 56px; }
.btn { height: 48px; --depth: 5px; font-size: 17px; border-color: rgba(255, 215, 0, 0.3); }

.key:active,
.btn:active,
.cta:active { transform: translateY(var(--depth)); box-shadow: 0 0 0 var(--bg); }

.key[aria-disabled="true"] { cursor: default; }
.key[aria-disabled="true"]:active { transform: none; box-shadow: 0 var(--depth) 0 var(--bg); }

.key .mark { display: none; flex: none; color: var(--ink); }

/* The reveal: the right play turns gold, the other dims; a wrong pick keeps
   its face, takes the loss color on its edge and shows the cross. */
.key.is-right {
  border-color: transparent;
  background: linear-gradient(var(--gold), var(--gold-muted));
  color: var(--ink);
  box-shadow: 0 var(--depth) 0 var(--gold-wall);
}

.key.is-right:active { box-shadow: 0 0 0 var(--gold-wall); }
.key.is-right .tile { display: none; }
.key.is-right .mark.check { display: block; }

.key.is-wrong { border-color: var(--loss); opacity: 0.85; }
.key.is-wrong .tile { display: none; }
.key.is-wrong .mark.cross { display: block; color: var(--loss); }

.key.is-dim { opacity: 0.4; }

/* PlayTile: the action's letter on its color, with its own thin edge. */
.tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
  border: 1px solid var(--hairline);
  border-radius: 7px;
  background: var(--tile);
  color: #fff;
  font: 900 13px/1 var(--font-round);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--tile) 58%, #000);
}

.tile.hit { --tile: var(--card-red); }
.tile.stand { --tile: var(--felt); border-color: var(--rim); }
.tile.double { --tile: var(--gold); color: #000; }
.tile.split { --tile: var(--split); }
.tile.surrender { --tile: var(--surface); border-color: var(--rim); }

.rules {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  text-align: center;
}

.lead {
  margin: 0 20px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

/* PathPanel: the result card. */
.panel {
  padding: 14px;
  border: 1px solid var(--gold-stroke-soft);
  border-radius: 16px;
  background: var(--surface);
}

.panel[hidden] { display: none; }

.panel h2 { margin: 0 0 6px; font: 900 22px/1.2 var(--font-round); outline: none; }

.panel p {
  margin: 0 0 6px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.4;
}

.panel p:last-child { margin-bottom: 0; }

.panel .friend { color: var(--gold); font-weight: 600; }

/* The link to a hand's breakdown page, drawn only for a spot that has one. */
.panel .more { margin-top: 8px; font-weight: 600; }
.panel .more a { color: var(--gold); }

.panel .friend[hidden] { display: none; }

.result.is-in { animation: rise var(--ease); }

@keyframes rise {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}

/* The gold CTA with the gloss line of the lesson buttons. */
.cta {
  flex-direction: column;
  gap: 0;
  min-height: 60px;
  padding: 8px 12px;
  border-color: transparent;
  background: linear-gradient(var(--gold), var(--gold-muted));
  color: var(--ink);
  box-shadow: 0 var(--depth) 0 var(--gold-wall);
}

.cta::before {
  content: "";
  position: absolute;
  top: 4px;
  right: 18px;
  left: 18px;
  height: 2px;
  border-radius: 1px;
  background: var(--gloss);
}

.cta:active { box-shadow: 0 0 0 var(--gold-wall); }

.cta b { font: 700 17px/1.2 var(--font-round); }

.cta small { font: 600 11.5px/1.3 var(--font); opacity: 0.72; text-align: center; }

.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* With the script running, the store button, the row and the app link wait
   for the reveal (mockups 04 and 05); without it they show from the start. */
.js .cta, .js .row, .js .open { display: none; }
.js.is-answered .cta { display: flex; }
.js.is-answered .row { display: grid; }
.js.is-answered .open { display: block; }

.btn svg { flex: none; }

.open { margin: 0; font-size: 14px; text-align: center; }

.open a { color: var(--gold); }

.foot {
  margin-top: auto;
  padding-top: 24px;
  color: var(--text-muted);
  font-size: 12px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition: none !important; animation: none !important; }
}