/* Montserrat (SIL OFL 1.1), served locally: same font as the Zentral web app, and no
   request to a font CDN from the kiosk. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url('/vendor/fonts/montserrat-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url('/vendor/fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: swap; src: url('/vendor/fonts/montserrat-latin-700-normal.woff2') format('woff2'); }
/* Bold under a normal weight, for the wheel: its library sets the canvas font as
   "<size>px <family>" with no weight, so this family is how its labels come out bold. */
@font-face { font-family: 'Montserrat Wheel'; font-style: normal; font-weight: 400; font-display: block; src: url('/vendor/fonts/montserrat-latin-700-normal.woff2') format('woff2'); }

/*
 * Look: a sportsbook-style dark layout (near-black navy, solid orange calls to
 * action, heavy white headlines, dark promo cards with pill tags), drawn with
 * Zentral's own brand: its orange (#ff603b), its purple, its logo and Montserrat.
 */
:root {
  --brand-400: #ff886c;
  --brand-500: #ff603b;
  --brand-600: #e05434;
  --brand-700: #c74b2e;
  --brand-fg: #ffffff;
  --purple-500: #7a1ff0;
  --purple-300: #b58cff;

  --bg: #0f1117;
  --bg-glow: #1a1530;
  --surface: #191c25;
  --surface-2: #222634;
  --field: #11131a;
  --border: #2c3141;
  --border-strong: #3a4054;
  --text: #f4f5f7;
  --muted: #a3a9b8;
  --subtle: #747b8c;

  --danger: #ff6b57;
  --danger-soft: rgb(255 107 87 / 0.14);
  --ok: #3ddc97;
  --ok-soft: rgb(61 220 151 / 0.14);

  --radius: 10px;
  --radius-lg: 16px;
  color-scheme: dark;
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 85% -10%, var(--bg-glow), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgb(255 96 59 / 0.08), transparent 60%),
    var(--bg);
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  border-bottom: 1px solid var(--border);
  background: rgb(15 17 23 / 0.85);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 36px; height: 36px; display: block; }
/* The logo's own wordmark, cut out of the official file and shown white (the reversed
   version), because the purple original does not read on this background. The box is the
   wordmark's measured bounds in zentral-logo.png (1080 x 351): x 404-1017, y 108-243, plus
   2 px each side, scaled by --s. */
.brand-word { --s: 0.17; display: block; width: calc(618px * var(--s)); height: calc(140px * var(--s)); overflow: hidden; }
.brand-word img { display: block; height: calc(351px * var(--s)); margin: calc(-106px * var(--s)) 0 0 calc(-402px * var(--s)); filter: brightness(0) invert(1); }
.topbar-tag {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 6px 14px;
}

/* Page frame */
.page {
  flex: 1;
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: clamp(16px, 4vw, 40px);
}
.page.center { display: grid; place-items: center; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 24px 48px rgb(0 0 0 / 0.35);
}
.card.narrow { width: min(100%, 440px); }

h1 { margin: 0 0 12px; font-size: clamp(2rem, 4.5vw, 3.4rem); line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
h1 .accent, h2 .accent { color: var(--brand-500); }
h2 { margin: 0 0 16px; font-size: 1.35rem; font-weight: 700; }
/* Inside a card (PIN, staff) a page title, not a hero headline. */
.card h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
.eyebrow { margin: 0 0 12px; font-weight: 600; color: var(--muted); }
p.lead { margin: 0 0 28px; color: var(--muted); font-size: 1.1rem; }

/* Home: hero with prizes, form beside it */
.home { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: stretch; align-content: start; }
/* The form card runs as tall as the hero beside it; the extra height is spread between
   the form's rows instead of left as a blank band under the button. */
.home > .card { display: flex; flex-direction: column; }
.home > .card > form { flex: 1; align-content: space-between; }
@media (max-width: 960px) { .home { grid-template-columns: 1fr; } }
.hero { padding-top: clamp(0px, 2vw, 24px); }

/* Main prize banner: the free month, with a light sweep across it. */
.jackpot {
  position: relative;
  overflow: hidden;
  margin: 0 0 28px;
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--radius-lg);
  border: 1px solid rgb(255 255 255 / 0.12);
  background:
    radial-gradient(120% 140% at 0% 0%, rgb(255 255 255 / 0.2), transparent 50%),
    linear-gradient(120deg, var(--brand-500) 0%, var(--brand-700) 45%, #4b1497 100%);
  box-shadow: 0 24px 60px rgb(255 96 59 / 0.25);
}
.jackpot > * { position: relative; z-index: 1; }
.jackpot::after {
  content: '';
  position: absolute;
  right: -6%;
  top: 50%;
  width: 46%;
  aspect-ratio: 1;
  transform: translateY(-50%);
  background: url('/brand/zentral-mark.svg') center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.16;
}
.jackpot::before {
  content: '';
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -60%;
  width: 40%;
  z-index: 1;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.32), transparent);
  transform: skewX(-20deg);
  animation: shine 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
.jackpot .pill.hot { background: #ffffff; color: var(--brand-700); }
.jackpot-name { margin: 12px 0 8px; font-size: clamp(1.7rem, 3.4vw, 2.6rem); line-height: 1.05; }
.jackpot-text { margin: 0; max-width: 36ch; color: rgb(255 255 255 / 0.92); font-weight: 600; }

.section-title { display: flex; align-items: center; justify-content: space-between; margin: 0 0 14px; font-size: 1.15rem; }
.prize-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px; }
.prize-card {
  --prize: var(--brand-500);
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.prize-art {
  position: relative;
  /* Clips the logo watermark, which sits partly outside the art on purpose. */
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background:
    radial-gradient(120% 90% at 30% 20%, rgb(255 255 255 / 0.22), transparent 55%),
    linear-gradient(135deg, var(--prize), color-mix(in srgb, var(--prize) 45%, #000));
}
.prize-art::after {
  content: '';
  position: absolute;
  right: -12%;
  bottom: -18%;
  width: 70%;
  aspect-ratio: 1;
  background: url('/brand/zentral-mark.svg') center / contain no-repeat;
  filter: brightness(0) invert(1);
  opacity: 0.16;
}
.prize-body { display: grid; gap: 10px; align-content: start; padding: 12px 14px 16px; }
.prize-name { margin: 0; font-weight: 700; line-height: 1.25; }
.pill {
  justify-self: start;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 3px 10px;
}
.pill.hot { color: var(--brand-fg); background: var(--brand-500); border-color: transparent; }
.prize-card.sold-out { opacity: 0.5; }
/* Pale prize colours (white, cream): a soft light gradient and the mark in its own orange,
   instead of a white mark that would vanish. */
.prize-card.light .prize-art {
  background:
    radial-gradient(120% 90% at 30% 20%, rgb(255 255 255 / 0.9), transparent 55%),
    linear-gradient(135deg, var(--prize), color-mix(in srgb, var(--prize) 78%, #9aa1b2));
}
.prize-card.light .prize-art::after { filter: none; opacity: 0.22; }
.prize-card.sold-out .prize-art { filter: grayscale(1); }

/* Forms */
form { display: grid; gap: 16px; }
/* minmax(0, …): a plain 1fr never shrinks below its content, and an input's default
   width (wider in Firefox) then pushed the row out of the card. */
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 560px) { .row { grid-template-columns: 1fr; } }

label { display: grid; gap: 6px; min-width: 0; font-weight: 600; font-size: 0.95rem; }
input, select {
  width: 100%;
  min-width: 0;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 400;
  padding: 12px 14px;
  color: var(--text);
  background: var(--field);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
select option { background: var(--surface); color: var(--text); }
input:focus, select:focus {
  outline: 3px solid rgb(255 96 59 / 0.35);
  border-color: var(--brand-500);
}

label.check { display: flex; gap: 12px; align-items: center; font-weight: 400; color: var(--muted); }
/* No padding or margin: the generic input rule above would pad the box off its text. */
label.check input { width: 22px; height: 22px; margin: 0; padding: 0; flex: none; accent-color: var(--brand-500); }

button {
  font: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--radius);
  background: var(--brand-500);
  color: var(--brand-fg);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 8px 24px rgb(255 96 59 / 0.25);
}
button:hover { background: var(--brand-600); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid var(--brand-400); outline-offset: 3px; }
button:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
button.secondary { background: transparent; color: var(--text); border: 1px solid var(--border-strong); box-shadow: none; }
button.secondary:hover { background: var(--surface-2); }

.error { color: var(--danger); font-weight: 600; margin: 0; }
.notice { margin: -6px 0 0; font-size: 0.78rem; line-height: 1.45; color: var(--subtle); text-align: center; }
/* Takes no room (nor a grid gap) until there is a message to show. */
.error:empty { display: none; }
.hidden { display: none !important; }

/* Wheel */
.stage { display: grid; justify-items: center; align-content: start; gap: 24px; text-align: center; }
.stage-title { margin: 0; }
.wheel-wrap { position: relative; width: min(72vmin, 600px); aspect-ratio: 1; transition: width 0.4s ease; }
/* A warm glow behind the wheel; the rim, ticks and gem pointer are drawn by the wheel itself
   (wheel-items.js). */
.wheel-wrap::before, .attract-wheel::before {
  content: '';
  position: absolute;
  inset: 2%;
  border-radius: 50%;
  box-shadow: 0 0 90px 18px rgb(245 179 1 / 0.32), 0 0 170px 40px rgb(122 31 240 / 0.25);
}
.stage.has-result { gap: 16px; }
.stage.has-result .stage-title { display: none; }
.stage.has-result .wheel-wrap { width: min(30vmin, 260px); }
/* Wide screens: wheel beside the result, both large and centred in the screen, so the
   win fills the booth display and the access instructions stay above the fold. */
@media (min-width: 1000px) {
  .stage.has-result {
    grid-template-columns: auto minmax(0, 720px);
    justify-content: center;
    align-content: center;
    align-items: center;
    column-gap: clamp(40px, 5vw, 96px);
  }
  .stage.has-result .wheel-wrap { width: min(62vh, 42vw, 600px); }
  .stage.has-result .result { padding: clamp(28px, 3vw, 44px); }
  .stage.has-result .result h2 { font-size: clamp(1.9rem, 2.8vw, 2.8rem); }
  .stage.has-result .result .lead { font-size: 1.2rem; }
}
#wheel { position: relative; width: 100%; height: 100%; }
#spin { min-width: 240px; font-size: 1.35rem; padding: 16px 28px; text-transform: uppercase; letter-spacing: 0.04em; }

.result { width: min(100%, 640px); text-align: left; border-top: 4px solid var(--brand-500); }
.result h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 8px; }
.result h2::before { content: '🎉 '; }
.result.lost h2::before { content: none; }
.result .lead { margin-bottom: 16px; }
.result > button { margin-top: 20px; width: 100%; }

.steps { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.steps li { display: flex; align-items: center; gap: 12px; color: var(--subtle); }
.steps li::before {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
}
.steps li.done { color: var(--text); }
.steps li.done::before { content: '✓'; display: grid; place-items: center; font-size: 0.8rem; font-weight: 700; color: var(--bg); background: var(--ok); border-color: var(--ok); }
.steps li.current { color: var(--text); font-weight: 700; }
.steps li.current::before { border-color: var(--brand-500); border-top-color: transparent; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .steps li.current::before { animation: none; border-top-color: var(--brand-500); } }

.tenant-url {
  font-size: clamp(1.1rem, 2.4vw, 1.4rem);
  font-weight: 700;
  word-break: break-all;
  color: var(--brand-400);
  background: rgb(255 96 59 / 0.1);
  border: 1px solid rgb(255 96 59 / 0.35);
  border-radius: var(--radius);
  padding: 12px 16px;
}

/* Staff */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.toolbar .stats { color: var(--muted); margin-right: auto; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 10px; border-bottom: 1px solid var(--border); vertical-align: top; white-space: pre-line; }
th { color: var(--muted); font-weight: 600; background: var(--surface-2); }
tbody tr:hover { background: rgb(255 255 255 / 0.02); }
td.error-cell { color: var(--danger); max-width: 320px; word-break: break-word; }
td button { font-size: 0.85rem; padding: 6px 12px; box-shadow: none; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border-strong); font-size: 0.8rem; font-weight: 600; }
.badge.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.badge.bad { background: var(--danger-soft); color: var(--danger); border-color: transparent; }

/* Confetti at the moment of a win (wheel.js). */
.confetti { position: fixed; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -24px;
  left: var(--x);
  width: 10px;
  height: 16px;
  border-radius: 2px;
  background: var(--c);
  animation: confetti-fall var(--dur) var(--delay) cubic-bezier(0.25, 0.6, 0.45, 1) forwards;
}
@keyframes confetti-fall { to { transform: translate(var(--drift), 110vh) rotate(var(--rot)); } }

/* Idle screen (attract.js) */
body.attract-on { overflow: hidden; }
/* Behind the idle screen the home page recedes, so the switch reads as one continuous move. */
body > .topbar, body > main { transition: opacity 0.7s ease, transform 0.7s ease, filter 0.7s ease; }
body.attract-on > .topbar, body.attract-on > main { opacity: 0.25; transform: scale(0.97); filter: blur(6px); }
.attract {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: auto minmax(0, 640px);
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 6vw, 120px);
  padding: clamp(24px, 5vw, 64px);
  cursor: pointer;
  /* Always laid out; faded instead of switched, so it can crossfade with the form. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
  background:
    radial-gradient(900px 600px at 28% 50%, rgb(255 96 59 / 0.18), transparent 60%),
    radial-gradient(900px 700px at 80% 15%, rgb(122 31 240 / 0.3), transparent 60%),
    #0a0b10;
}
.attract:focus { outline: none; }
.attract.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.7s ease; }
.attract-wheel, .attract-copy { opacity: 0; transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); }
.attract-wheel { transform: scale(0.82) rotate(-12deg); }
.attract-copy { transform: translateY(28px); }
.attract.is-on .attract-wheel { opacity: 1; transform: none; transition-delay: 0.1s; }
.attract.is-on .attract-copy { opacity: 1; transform: none; transition-delay: 0.3s; }

/* Back from the idle screen: the home page comes in as a short cascade. */
@keyframes enter { from { opacity: 0; transform: translateY(18px); } }
.page-enter .hero > *, .page-enter > .card { animation: enter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.page-enter .hero > :nth-child(2) { animation-delay: 0.05s; }
.page-enter .hero > :nth-child(3) { animation-delay: 0.1s; }
.page-enter .hero > :nth-child(4) { animation-delay: 0.15s; }
.page-enter .hero > :nth-child(5) { animation-delay: 0.2s; }
.page-enter .hero > :nth-child(6) { animation-delay: 0.25s; }
.page-enter > .card { animation-delay: 0.15s; }
.attract-wheel { position: relative; width: min(78vh, 44vw, 760px); aspect-ratio: 1; }
#attract-wheel { position: relative; width: 100%; height: 100%; }
.attract-title { margin: 0 0 32px; font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 700; line-height: 1; }
.attract-title .accent { color: var(--brand-500); }
.attract-label { margin: 0; color: var(--muted); font-size: 1.2rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.attract-prize { margin: 8px 0; min-height: 2.2em; font-size: clamp(2.2rem, 4.2vw, 4rem); font-weight: 700; line-height: 1.1; }
.attract-prize.swap { animation: prize-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes prize-in { from { opacity: 0; transform: translateY(24px) scale(0.96); } }
.attract-stock { margin: 0 0 40px; min-height: 1.5em; font-size: 1.4rem; font-weight: 700; color: var(--brand-400); }
.attract-cta {
  display: inline-block;
  margin: 0;
  padding: 18px 32px;
  border-radius: var(--radius);
  background: var(--brand-500);
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 12px 40px rgb(255 96 59 / 0.45);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(1.05); box-shadow: 0 16px 56px rgb(255 96 59 / 0.65); } }
@media (max-width: 900px) {
  .attract { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .attract-wheel { width: min(70vw, 46vh); }
}

@media (prefers-reduced-motion: reduce) {
  .jackpot::before, .attract-prize.swap, .attract-cta, .page-enter .hero > *, .page-enter > .card { animation: none; }
  .attract-wheel, .attract-copy, body.attract-on > .topbar, body.attract-on > main { transform: none; filter: none; }
  .jackpot::before { display: none; }
}

/* "Doble o nada": keep the free month or play "Carta más alta" (wheel.js, card-game.js). */
.offer { display: grid; gap: 16px; margin-top: 4px; }
.offer-rules { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }
.offer-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .offer-actions { grid-template-columns: 1fr; } }
#offer-play { background: linear-gradient(135deg, #f5b301, var(--brand-500)); color: #1f1300; box-shadow: 0 10px 30px rgb(245 179 1 / 0.3); }
#offer-play:hover { filter: brightness(1.06); }

/* The card table takes the stage on its own while a round is played. */
.stage.playing .wheel-wrap, .stage.playing #spin { display: none; }
.stage.playing { grid-template-columns: minmax(0, 1fr); align-content: center; }
.game { width: min(100%, 860px); justify-self: center; text-align: center; border-top: 4px solid #f5b301; }
.game h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-bottom: 12px; }
.game .eyebrow { color: #f5b301; text-transform: uppercase; letter-spacing: 0.08em; }
.table {
  /* One card size for the table, shared by the cards and the deck. */
  --card-w: clamp(84px, 12vh, 150px);
  display: grid;
  justify-items: center;
  gap: clamp(12px, 2.5vh, 24px);
  padding: clamp(12px, 2vw, 24px);
  border-radius: var(--radius-lg);
  background: radial-gradient(120% 100% at 50% 0%, rgb(255 96 59 / 0.12), transparent 60%), var(--surface-2);
  border: 1px solid var(--border);
}
.seat { display: grid; justify-items: center; gap: 10px; }
.seat-label { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.hand { display: flex; gap: clamp(12px, 2.5vw, 28px); justify-content: center; }

/* One playing card: our Zentral back, and the vendored face that turns over. */
.playing-card {
  position: relative;
  display: block;
  width: var(--card-w);
  aspect-ratio: 224 / 313;
  perspective: 1000px;
  border-radius: 10px;
}
button.playing-card {
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 10px;
  transition: transform 0.2s ease;
}
button.playing-card:hover { background: none; }
button.playing-card:not(:disabled):hover, button.playing-card:not(:disabled):focus-visible { transform: translateY(-10px); }
button.playing-card:disabled { opacity: 1; cursor: default; }
.card-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); }
.playing-card.flipped .card-inner { transform: rotateY(180deg); }
.card-back, .card-face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  backface-visibility: hidden;
  box-shadow: 0 10px 24px rgb(0 0 0 / 0.45);
}
.card-face { transform: rotateY(180deg); background: #ffffff; }
.card-back {
  border: 5px solid #ffffff;
  background:
    url('/brand/zentral-mark.svg') center / 46% no-repeat,
    radial-gradient(circle at 50% 50%, rgb(255 96 59 / 0.3), transparent 62%),
    repeating-linear-gradient(45deg, #1b1e2a 0 8px, #232838 8px 16px);
}
.playing-card.chosen { transform: translateY(-14px); }
.playing-card.chosen .card-back, .playing-card.chosen .card-face { box-shadow: 0 0 0 4px var(--brand-500), 0 14px 32px rgb(255 96 59 / 0.45); }
.playing-card.passed { opacity: 0.45; transform: scale(0.94); transition: opacity 0.5s ease, transform 0.5s ease; }

.game-outcome { min-height: 1.6em; margin: 14px 0 0; font-size: clamp(1.1rem, 2.2vw, 1.5rem); font-weight: 700; }
.game-outcome.won { color: #f5b301; }
.game-outcome.lost { color: var(--danger); }
#game-continue { margin-top: 10px; min-width: 240px; }

@media (prefers-reduced-motion: reduce) {
  .card-inner, button.playing-card, .playing-card.passed { transition: none; }
}

/* Deal (card-game.js deal()): the deck sits left of Zentral's seat; the cards fly from it. */
.table-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; width: 100%; }
.table-top .seat { grid-column: 2; }
.deck {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  position: relative;
  width: calc(var(--card-w) * 0.8);
  aspect-ratio: 224 / 313;
  margin-left: clamp(0px, 3vw, 40px);
  border-radius: 9px;
  border: 4px solid #ffffff;
  background:
    url('/brand/zentral-mark.svg') center / 46% no-repeat,
    radial-gradient(circle at 50% 50%, rgb(255 96 59 / 0.3), transparent 62%),
    repeating-linear-gradient(45deg, #1b1e2a 0 8px, #232838 8px 16px);
  /* Card edges under the top one, so it reads as a stack. */
  box-shadow: 3px 3px 0 -1px #d9dce3, 6px 6px 0 -1px #b9bdc8, 9px 9px 0 -1px #9aa1b2, 0 14px 28px rgb(0 0 0 / 0.45);
}
/* Dealt cards fly over the deck, not under it. */
.table .playing-card { z-index: 1; }

/* Hints in the form fields (e.g. "9 dígitos"): muted, so they never read as typed text. */
input::placeholder { color: var(--subtle); opacity: 1; }