/*
 * Settings screen: the approved artwork, shown unchanged and whole.
 *   landscape → assets/settings.webp         1672 × 941
 *   portrait  → assets/settings-mobile.webp   941 × 1671
 * The blue felt (assets/felt-blue.webp) covers the viewport behind it.
 *
 * Every control is a real input placed exactly over its painted control, in
 * percentages of the picture (gold-border boxes measured from the files):
 *                     landscape (px)              portrait (px)
 *   Sound toggle      x 1045–1200, y 337–387      x 664–863, y 627–693
 *   Music toggle      x 1045–1200, y 399–446      x 664–863, y 721–786
 *   Language          x  866–1198, y 457–509      x 462–863, y 818–885
 *   1 Card            x  874–1041, y 612–657      x 474–669, y 1088–1153
 *   3 Cards           x 1051–1205, y 613–657      x 684–877, y 1091–1152
 *   Statistics        x  742–1058, y 668–715      x 230–711, y 1194–1268
 *   How to Play       x  742–1058, y 731–779      x 230–713, y 1308–1386
 *   Close             x  664–1004, y 828–904      x 247–688, y 1475–1601
 *
 * The painted picture shows the default state (both ON, 1 Card, English).
 * Only when a control differs from it is a face drawn over the painted one:
 * an OFF toggle, the swapped 1 / 3 Cards pills, or another language.
 * Statistics, How to Play and Close are invisible buttons over the painting.
 */

.settings {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #0a3f95 url("../assets/felt-blue.webp") center / cover no-repeat;
  color: #14215c;
}
.settings[open] { display: grid; place-items: center; }
.settings::backdrop { background: #0a3f95; }

.settings-art {
  --avail-w: calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right));
  --avail-h: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  position: relative;
  width: min(var(--avail-w), calc(var(--avail-h) * 1672 / 941));
  aspect-ratio: 1672 / 941;
}
.settings-art picture,
.settings-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* ---- every control: an exact box over its painted twin ---- */
.st {
  position: absolute;
  container-type: size;   /* faces size their text from the control's own height */
  border-radius: 999px;
  -webkit-tap-highlight-color: transparent;
}
/* The real input fills the box, invisible; the painting (or a face) shows through. */
.st > input,
.st > select {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  font-size: 16px;   /* no zoom-on-focus on iOS */
}
.st:has(:focus-visible) { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(10, 40, 110, 0.6); }

/* Faces drawn over the painting share the painted gold rim. */
.st .face {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  border-radius: 999px;
  padding: 7cqh;
  background: linear-gradient(180deg, #fde27a 0%, #f2bf2a 45%, #c98e0c 100%);
  box-shadow: 0 0.6cqh 1.2cqh rgba(20, 30, 80, 0.35);
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.st .face > b {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 999px;
}

/* OFF toggle: grey track, knob on the left. */
.st-toggle > input:not(:checked) ~ .face { display: flex; }
.face-off > b {
  justify-content: flex-end;
  padding: 0 16cqh 0 6cqh;
  background: linear-gradient(180deg, #b6bccb 0%, #8c93a6 55%, #727a8f 100%);
  box-shadow: inset 0 0.8cqh 1.5cqh rgba(0, 0, 0, 0.25);
  color: #fff;
  font-size: 50cqh;
  letter-spacing: 0.02em;
  text-shadow: 0 0.6cqh 0 rgba(30, 36, 60, 0.45);
  position: relative;
}
.face-off > b::before {
  content: "";
  position: absolute;
  left: 3cqh;
  top: 50%;
  width: 78cqh;
  height: 78cqh;
  border-radius: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle at 40% 35%, #fff 0%, #f1f1f1 55%, #cfd2da 100%);
  box-shadow: 0 0.8cqh 1.6cqh rgba(0, 0, 0, 0.35);
}

/* Draw Cards: the painting shows 1 Card selected; with 3 Cards both pills swap. */
.face-pill > b { justify-content: center; font-size: 58cqh; }
.face-green > b {
  background: linear-gradient(180deg, #8fd23f 0%, #5cad22 50%, #3e8c16 100%);
  color: #f4ffe6;
  text-shadow: 0 0.7cqh 0 rgba(20, 70, 10, 0.55);
}
.face-cream > b {
  background: linear-gradient(180deg, #fffaf0 0%, #f8eedb 100%);
  color: #14215c;
}
.settings[data-draw="3"] .st-draw .face { display: flex; }

/* Language: the painting shows English (US); every other language gets its own face. */
.face-lang > b {
  gap: 7%;
  padding: 0 9% 0 8%;
  background: linear-gradient(180deg, #ffffff 0%, #f6efe0 100%);
  color: #14215c;
  font-size: 52cqh;
}
.face-lang .flag {
  flex: none;
  width: 52cqh;
  height: 36cqh;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.settings[data-lang="es"] .flag { background: linear-gradient(180deg, #c60b1e 0 25%, #ffc400 25% 75%, #c60b1e 75%); }
.settings[data-lang="de"] .flag { background: linear-gradient(180deg, #000 0 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6%); }
.settings[data-lang="it"] .flag { background: linear-gradient(90deg, #009246 0 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%); }
.settings[data-lang="fr"] .flag { background: linear-gradient(90deg, #002395 0 33.3%, #fff 33.3% 66.6%, #ed2939 66.6%); }
.settings[data-lang="pl"] .flag { background: linear-gradient(180deg, #fff 0 50%, #dc143c 50%); }
.face-lang .caret {
  margin-left: auto;
  width: 0;
  height: 0;
  border-left: 18cqh solid transparent;
  border-right: 18cqh solid transparent;
  border-top: 20cqh solid #14215c;
}
.settings:not([data-lang="en"]) .st-lang .face { display: flex; }

/* Statistics, How to Play, Close: invisible buttons over the painted ones. */
.st-btn {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.st-btn:focus { outline: none; }
.st-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 6px rgba(10, 40, 110, 0.6); }

.st-sound { left: 62.500%; top: 35.813%; width: 9.330%; height: 5.420%; }
.st-music { left: 62.500%; top: 42.402%; width: 9.330%; height: 5.101%; }
.st-lang  { left: 51.794%; top: 48.565%; width: 19.916%; height: 5.632%; }
.st-one   { left: 52.273%; top: 65.037%; width: 10.048%; height: 4.888%; }
.st-three { left: 62.859%; top: 65.143%; width: 9.270%; height: 4.782%; }
.st-stats { left: 44.378%; top: 70.988%; width: 18.959%; height: 5.101%; }
.st-help  { left: 44.378%; top: 77.683%; width: 18.959%; height: 5.207%; }
.st-close { left: 39.713%; top: 87.991%; width: 20.395%; height: 8.183%; }

/* ---- portrait screens: the vertical artwork ---- */
@media (orientation: portrait) {
  .settings-art {
    width: min(var(--avail-w), calc(var(--avail-h) * 941 / 1671));
    aspect-ratio: 941 / 1671;
  }
  .st-sound { left: 70.563%; top: 37.522%; width: 21.254%; height: 4.010%; }
  .st-music { left: 70.563%; top: 43.148%; width: 21.254%; height: 3.950%; }
  .st-lang  { left: 49.097%; top: 48.953%; width: 42.721%; height: 4.069%; }
  .st-one   { left: 50.372%; top: 65.111%; width: 20.829%; height: 3.950%; }
  .st-three { left: 72.689%; top: 65.290%; width: 20.616%; height: 3.710%; }
  .st-stats { left: 24.442%; top: 71.454%; width: 51.222%; height: 4.488%; }
  .st-help  { left: 24.442%; top: 78.276%; width: 51.435%; height: 4.728%; }
  .st-close { left: 26.249%; top: 88.270%; width: 46.971%; height: 7.600%; }
}

/*
 * Statistics window: the approved artwork (assets/stats.webp, 1272 × 1237),
 * the same picture on every screen. The painted sample numbers are covered
 * with the card's own cream (rgb 250 228 189, measured) and the real numbers
 * are written on top in the navy of the labels. Number boxes, in px:
 *   Played x 305–600 y 298–380 · Won x 870–1165 y 298–380
 *   Win rate x 305–600 y 488–572 · Best time x 870–1165 y 488–572
 *   Best score x 300–600 y 680–760 · Current streak x 870–1165 y 680–760
 *   Best streak x 560–1020 y 858–936 (centred) · Reset button x 242–1026 y 1024–1155
 * It sits alone on the blue felt (nothing behind shows through). The picture
 * has no Close button: tap the blue around it, or press Esc, to go back.
 */
.stats-dlg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #0a3f95 url("../assets/felt-blue.webp") center / cover no-repeat;
  overflow: hidden;
  cursor: pointer;   /* tapping outside the picture closes it */
}
.stats-dlg[open] { display: grid; place-items: center; outline: none; }
.stats-dlg::backdrop { background: #0a3f95; }

.stats-art {
  position: relative;
  container-type: inline-size;
  width: min(94vw, calc(90dvh * 1272 / 1237), 760px);
  aspect-ratio: 1272 / 1237;
  cursor: default;
}
.stats-art dl { margin: 0; }
.stats-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.sv {
  position: absolute;
  display: flex;
  align-items: center;
  margin: 0;
  background: rgb(250, 228, 189);
  color: #121b4d;
  font-family: var(--font-serif);
  font-weight: 800;
  font-size: 7.2cqw;
  line-height: 1;
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.sv-played { left: 23.978%; top: 24.091%; width: 23.270%; height: 6.710%; padding-left: 0.786cqw; }
.sv-won    { left: 68.396%; top: 24.091%; width: 23.270%; height: 6.710%; padding-left: 0.786cqw; }
.sv-rate   { left: 23.978%; top: 39.450%; width: 23.270%; height: 6.871%; padding-left: 1.022cqw; }
.sv-time   { left: 68.396%; top: 39.450%; width: 23.270%; height: 6.871%; padding-left: 0.786cqw; }
.sv-score  { left: 23.585%; top: 54.972%; width: 23.664%; height: 6.548%; padding-left: 0.629cqw; }
.sv-streak { left: 68.396%; top: 54.972%; width: 23.270%; height: 6.548%; padding-left: 2.987cqw; }
.sv-best   { left: 44.025%; top: 69.361%; width: 36.242%; height: 6.386%; justify-content: center; }

.st-reset { position: absolute; left: 19.025%; top: 82.781%; width: 61.714%; height: 10.671%; border-radius: 999px; }

/*
 * Reset statistics? — the approved popup artwork (assets/reset.webp, 1687 × 932)
 * alone on the blue felt, with invisible buttons over the painted ones, in px:
 *   ✕ x 1478–1638 y 98–262 · Cancel x 204–745 y 626–797 · Yes, continue x 786–1485 y 623–800
 */
.reset-dlg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #0a3f95 url("../assets/felt-blue.webp") center / cover no-repeat;
  overflow: hidden;
}
.reset-dlg[open] { display: grid; place-items: center; outline: none; }
.reset-dlg::backdrop { background: #0a3f95; }
.reset-art {
  position: relative;
  width: min(94vw, calc(80dvh * 1687 / 932), 620px);
  aspect-ratio: 1687 / 932;
}
.reset-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.reset-art .st-btn { position: absolute; border-radius: 999px; }
.rs-x { border-radius: 50% !important; }
.rs-x      { left: 87.611%; top: 10.515%; width: 9.544%; height: 17.704%; }
.rs-cancel { left: 12.092%; top: 67.167%; width: 32.128%; height: 18.455%; }
.rs-yes    { left: 46.592%; top: 66.845%; width: 41.494%; height: 19.099%; }

/*
 * "The Challenge" — the approved popup artwork (assets/challenge.webp, 1619 × 972,
 * transparent), shown for 4 s before every deal. Centred above the board on a
 * dark, see-through royal blue. Not interactive.
 */
.challenge-dlg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: transparent;
  overflow: hidden;
  outline: none;
}
.challenge-dlg[open] { display: grid; place-items: center; }
.challenge-dlg::backdrop { background: rgba(6, 26, 82, 0.62); }
.challenge-dlg img {
  display: block;
  width: min(94vw, calc(80dvh * 1619 / 972), 900px);
  height: auto;
  aspect-ratio: 1619 / 972;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  pointer-events: none;
}

/*
 * Victory! — the approved artwork (assets/victory.webp, 1448 × 1086, transparent),
 * alone on the blue felt. The sample results painted in it (5:17, 124, +420, 925)
 * are covered with the panel's cream (rgb 252 239 221, measured) and the real
 * results are written over them, right-aligned like the painting. A painted
 * "New Record" badge is covered the same way unless it is a new record.
 * Boxes, in px: values x 760–955 (Time y 505–560 · Moves 578–644 ·
 * Time Bonus 654–720 · Score 731–805); badges x 958–1206 (y 500–563, 734–797);
 * Close x 315–672 y 896–1000; New Game x 697–1137 y 887–1002.
 */
.win-dlg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: #0a3f95 url("../assets/felt-blue.webp") center / cover no-repeat;
  overflow: hidden;
  outline: none;
}
.win-dlg[open] { display: grid; place-items: center; }
.win-dlg::backdrop { background: #0a3f95; }
.win-art {
  position: relative;
  container-type: inline-size;
  width: min(96vw, calc(92dvh * 1448 / 1086), 860px);
  aspect-ratio: 1448 / 1086;
}
.win-art dl { margin: 0; }
.win-art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.wv {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;
  padding-right: 0.69cqw;     /* text ends at x 945, like the painted values */
  background: rgb(252, 239, 221);
  color: #0d1440;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 3.4cqw;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap;
}
.wv-score { color: #8a2410; font-size: 4.5cqw; }
.wc {
  position: absolute;
  background: linear-gradient(90deg, rgb(252, 239, 221), rgb(249, 235, 213));
}
.wc[hidden] { display: none; }
.win-art .st-btn { position: absolute; border-radius: 999px; }
.wv-time  { left: 52.486%; top: 46.501%; width: 13.536%; height: 5.157%; }
.wv-moves { left: 52.486%; top: 53.223%; width: 13.536%; height: 6.169%; }
.wv-bonus { left: 52.486%; top: 60.221%; width: 13.536%; height: 6.169%; }
.wv-score { left: 52.486%; top: 67.311%; width: 13.536%; height: 6.906%; }
.wc-time  { left: 66.160%; top: 46.041%; width: 17.196%; height: 5.893%; }
.wc-score { left: 66.160%; top: 67.587%; width: 17.196%; height: 5.893%; }
.wb-close { left: 21.754%; top: 82.505%; width: 24.724%; height: 9.669%; }
.wb-new   { left: 48.135%; top: 81.676%; width: 30.456%; height: 10.681%; }

/*
 * Time's Up! — the approved artwork (assets/timeup.webp, 1447 × 1087), the twin
 * of the Victory screen: same felt, sizing and number style (.win-dlg/.win-art/.wv).
 * Sample values (5 / 52, 0, 925) are covered with the panel's cream
 * (rgb 249 238 221, measured) and the real ones written over them, ending at
 * x 1174 like the painting. Boxes, in px: values x 900–1190 (Cards to
 * Foundation y 550–640 · Score 650–718 · Best Score 727–808);
 * Close x 302–678 y 890–1003; New Game x 701–1149 y 890–1003.
 */
.tu-art { aspect-ratio: 1447 / 1087; }
.tv { background: rgb(249, 238, 221); padding-right: 1.1cqw; font-size: 3.9cqw; }
.tv-score { color: #8a2410; }
.tv-cards { left: 62.198%; top: 50.598%; width: 20.111%; height: 8.372%; }
.tv-score { left: 62.198%; top: 59.798%; width: 20.111%; height: 6.348%; }
.tv-best  { left: 62.198%; top: 66.881%; width: 20.111%; height: 7.544%; }
.tb-close { left: 20.871%; top: 81.877%; width: 26.054%; height: 10.488%; }
.tb-new   { left: 48.445%; top: 81.877%; width: 31.030%; height: 10.488%; }