/* Theme: Poker */
/*
 * Casino poker table (SPEC section 9, D-01, D-02). The form card is the table:
 * green felt, wide wooden rim, thin gold edge. Choices use poker chips as markers.
 * Only system fonts (N-01). Contrast values are checked in tests (N-10).
 *
 * Colors used for contrast checks (keep in sync with tests/test_poker_theme.py):
 *   felt light #136339, felt dark #0b3f26, text #f7f1de, muted #d7e6da, gold #f3d78a
 */

.theme-poker {
  color-scheme: dark;
  --font-heading: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --page-bg:
    radial-gradient(circle at 50% 0%, #1d2a22 0%, transparent 60%),
    repeating-linear-gradient(45deg, #0d1511 0 6px, #0f1813 6px 12px);
  --color-surface: #0f5434;
  --color-text: #f7f1de;
  --color-heading: #f3d78a;
  --color-muted: #d7e6da;
  --color-border: rgb(243 215 138 / 0.45);
  --color-primary: #f3d78a;
  --color-on-primary: #1b1405;
  --color-error: #ffcfc5;
  --color-on-error: #2a0a08;
  --color-success: #b6efc9;
  --color-info: #f3d78a;
  --color-focus: #ffe066;
  --input-bg: #fbf6e7;
  --input-text: #1d1a12;
  --choice-bg: rgb(0 0 0 / 0.22);
  --choice-border: rgb(243 215 138 / 0.35);
  --choice-checked-bg: rgb(0 0 0 / 0.38);
  --choice-checked-border: #f3d78a;
  --radius: 0.9rem;
  --shadow: 0 18px 40px rgb(0 0 0 / 0.55);
  --chip-grey: #7d848c;
  --chip-grey-edge: #dfe3e7;
  --chip-red: #c62828;
  --chip-blue: #1f5fc4;
  --wood: linear-gradient(135deg, #7b4a24 0%, #4b2a12 35%, #8c5a2f 55%, #3f230e 80%, #6e4120 100%);
  --felt: radial-gradient(ellipse at 50% 35%, #136339 0%, #11593a 45%, #0b3f26 100%);
}

.theme-poker a:not(.btn) {
  color: var(--color-primary);
}

/* Header: four playing cards, gold serif title with a fine gold line */

.theme-poker .event-hero {
  padding-top: 1.5rem;
}

.theme-poker .hero-deco {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin: 0 0 1rem;
}

.theme-poker .hero-deco span {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.4rem, 11vw, 3rem);
  aspect-ratio: 5 / 7;
  border-radius: 0.35rem;
  background: linear-gradient(160deg, #ffffff 0%, #f1ece0 100%);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.5), inset 0 0 0 1px rgb(0 0 0 / 0.15);
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 6vw, 1.7rem);
  line-height: 1;
  color: #161616;
}

.theme-poker .hero-deco span::after {
  content: "A";
  position: absolute;
  top: 0.15rem;
  left: 0.25rem;
  font-size: 0.55em;
  font-weight: 700;
}

.theme-poker .hero-deco span:nth-child(1) {
  transform: rotate(-12deg) translateY(4px);
}

.theme-poker .hero-deco span:nth-child(2) {
  transform: rotate(-4deg);
  color: #c62828;
}

.theme-poker .hero-deco span:nth-child(3) {
  transform: rotate(4deg);
}

.theme-poker .hero-deco span:nth-child(4) {
  transform: rotate(12deg) translateY(4px);
  color: #c62828;
}

.theme-poker .hero-deco span:nth-child(1)::before {
  content: "♠";
}

.theme-poker .hero-deco span:nth-child(2)::before {
  content: "♥";
}

.theme-poker .hero-deco span:nth-child(3)::before {
  content: "♣";
}

.theme-poker .hero-deco span:nth-child(4)::before {
  content: "♦";
}

.theme-poker .event-title {
  letter-spacing: 0.02em;
  text-shadow: 0 2px 0 rgb(0 0 0 / 0.6);
}

.theme-poker .event-title::after {
  content: "";
  display: block;
  width: min(12rem, 60%);
  height: 2px;
  margin: 0.7rem auto 0;
  background: linear-gradient(90deg, transparent, #f3d78a, transparent);
}

.theme-poker .event-subtitle {
  font-family: var(--font-heading);
  font-style: italic;
}

/* The table: felt inside a wooden rim with a thin gold edge */

.theme-poker .event-card {
  border: clamp(8px, 2.6vw, 14px) solid transparent;
  border-radius: clamp(1.2rem, 6vw, 2.5rem);
  background: var(--felt) padding-box, var(--wood) border-box;
  box-shadow:
    inset 0 0 0 2px #d4af37,
    inset 0 0 40px rgb(0 0 0 / 0.35),
    var(--shadow);
}

.theme-poker .section-title {
  color: var(--color-heading);
}

.theme-poker .input {
  border-color: #5a3a1c;
}

.theme-poker .input:focus-visible {
  border-color: #d4af37;
}

/* Poker chips as choice markers (D-02) */

.theme-poker .choice {
  font-weight: 600;
}

.theme-poker .choice__marker {
  --chip: var(--chip-grey);
  --edge: var(--chip-grey-edge);
  width: 2rem;
  height: 2rem;
  border: 2px solid rgb(0 0 0 / 0.45);
  border-radius: 50%;
  /* Inner ring plus white edge segments; resolved per element so --chip can change. */
  --chip-image:
    radial-gradient(circle, var(--chip) 0 40%, var(--edge) 40% 45%, var(--chip) 45% 62%, transparent 62%),
    repeating-conic-gradient(var(--edge) 0deg 18deg, var(--chip) 18deg 45deg);
  background: var(--chip-image);
  box-shadow: 0 2px 3px rgb(0 0 0 / 0.5);
  transition: transform 0.2s ease;
}

.theme-poker .choice--checkbox .choice__marker {
  border-radius: 50%;
}

.theme-poker .choice__input:checked + .choice__marker {
  --edge: #ffffff;
  background: var(--chip-image);
  border-color: rgb(0 0 0 / 0.55);
  box-shadow: 0 0 0 2px #f3d78a, 0 3px 6px rgb(0 0 0 / 0.6);
  transform: rotate(25deg) scale(1.08);
}

.theme-poker .choice--checkbox .choice__input:checked + .choice__marker {
  --chip: var(--chip-red);
}

.theme-poker .choice--radio .choice__input:checked + .choice__marker {
  --chip: var(--chip-blue);
}

.theme-poker .choice:has(.choice__input:checked) {
  border-width: 2px;
}

.theme-poker .choice__price {
  color: var(--color-primary);
}

/* Submit button styled as a big red chip */

.theme-poker .btn-submit {
  min-height: 3.75rem;
  font-family: var(--font-heading);
  font-size: 1.25rem; /* large bold text */
  letter-spacing: 0.04em;
  color: #ffffff;
  background: radial-gradient(circle at 50% 35%, #c62828 0%, #a11d1d 70%, #8a1717 100%);
  border: 4px dashed rgb(255 255 255 / 0.9);
  box-shadow:
    0 0 0 4px #a11d1d,
    0 0 0 6px rgb(0 0 0 / 0.35),
    0 6px 0 6px #5e0f0f,
    0 14px 24px rgb(0 0 0 / 0.45);
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.4);
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}

.theme-poker .btn-submit:active {
  transform: translateY(3px);
}

.theme-poker .btn-submit:disabled {
  opacity: 0.6;
}

/* Notices and summaries on felt */

.theme-poker .notice,
.theme-poker .error-summary {
  background: rgb(0 0 0 / 0.3);
}

.theme-poker .notice--success {
  border-color: #f3d78a;
}

.theme-poker .notice__title {
  font-family: var(--font-heading);
  color: var(--color-heading);
}

.theme-poker .public-list__name {
  background: rgb(0 0 0 / 0.25);
}

.theme-poker .price-table tfoot th,
.theme-poker .price-table tfoot td {
  color: var(--color-heading);
}

@media (prefers-reduced-motion: reduce) {
  .theme-poker .choice__input:checked + .choice__marker {
    transform: none;
  }
}