/* hand-page.css: the quiz block on a hand page (articles/<slug>/, share
   plan M5), the /h/ felt and keys from assets/css/share.css drawn inside an
   article. Every rule is scoped under .hand-quiz so the article's own
   stylesheet (css/style.css) keeps the rest of the page; the tokens the two
   sheets spell differently (the solid surface, the soft ink, the loss red)
   are redefined on the block. The values are CasinoTheme's, the contrast
   ratios are share.css's (white on the felt 7.87, ink on gold 13.10, soft
   ink on the felt 5.52, muted text on the background 7.57, all AA or
   better). System font stack, every image sized, motion off under
   prefers-reduced-motion. The behavior is assets/js/share-quiz.js. */

.hand-quiz {
  --surface: #1a1a2e;
  --felt-shade: rgba(0, 0, 0, 0.34);
  --gold-wall: #9e8000;
  --split: #af52de;
  --loss: #ff5252;
  --text-soft: rgba(255, 255, 255, 0.78);
  --text-muted: #a0a0a0;
  --ink: #141418;
  --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-round: ui-rounded, var(--font);
  --radius: 16px;
  --depth: 6px;
  --ease: 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 1.2em 0 2em;
  color: var(--text);
  font-size: 1rem;
  line-height: 1.3;
}

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

.hand-quiz p { margin: 0; }

/* The lede under the title, mockup 16's second line. */
.prose .hand-lede { margin: 0 0 1em; font-size: 1.08rem; }

/* The felt panel. The highlight sits under the cards, the edges fall to the
   dark felt. */
.hand-quiz .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;
}

/* FeltTag: the small uppercase capsule on a shaded pill. */
.hand-quiz .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;
}

.hand-quiz .tag.gold { color: var(--gold); }

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

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

.hand-quiz .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));
}

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

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

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

/* The two keys and the tag that lands under the chosen one. */
.hand-quiz .keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 18px;
}

.hand-quiz .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 tag lands. */
.hand-quiz .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. */
.hand-quiz .key,
.hand-quiz .btn,
.hand-quiz .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);
}

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

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

.hand-quiz .cta:hover,
.hand-quiz .btn:hover { opacity: 1; }

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

.hand-quiz .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. */
.hand-quiz .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);
}

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

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

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

/* PlayTile: the action's letter on its color, with its own thin edge. */
.hand-quiz .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);
}

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

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

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

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

.hand-quiz .tip,
.hand-quiz .friend {
  margin: 0 0 6px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.4;
}

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

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

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

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

/* Ask a friend beside the gold store button, mockup 16's last row. */
.hand-quiz .row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.hand-quiz .btn svg { flex: none; }

/* The gold button with the gloss line of the lesson buttons. */
.hand-quiz .cta {
  border-color: transparent;
  background: linear-gradient(var(--gold), var(--gold-muted));
  color: var(--ink);
  box-shadow: 0 var(--depth) 0 var(--gold-wall);
}

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

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

/* On a wide screen the block stays a phone's width: the felt, the rules
   line, the result panel and the row share one 430 px column. */
@media (min-width: 720px) {
.hand-quiz .felt, .hand-quiz .rules, .hand-quiz .panel, .hand-quiz .row { max-width: 430px; margin-left: auto; margin-right: auto; width: 100%; }
}

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

@media print {
.hand-quiz .row { display: none !important; }
}