:root {
  --bg: #0c1a18; --bg2: #132826; --ink: #f6fbf8; --muted: #b5cbc4; --accent: #ff014f;
  --felt: #13574b; --felt2: #0b3b33; --wood: #6b3d1c; --wood2: #a4652f; --trim: #ffb648;
  --sx-bg: #0c1a18; --sx-panel: #132826; --sx-line: #24423d; --sx-ink: #f6fbf8; --sx-muted: #b5cbc4; --sx-accent: #ff014f;
  --sx-display: 'Lilita One', 'Unbounded', sans-serif;
  --br-top: #ffc04d; --br-bot: #ff6a2a; --ie-top: #7de3a6; --ie-bot: #12985a; --uk-top: #8fc3ff; --uk-bot: #2f63d8;
}
body[data-country="ie"] { --felt: #17604a; --felt2: #0c3d2f; --trim: #7de3a6; }
body[data-country="uk"] { --felt: #184a63; --felt2: #0c2c3d; --trim: #8fc3ff; }
body[data-country="biz"] { --felt: #4a1f4f; --felt2: #2a0f2e; --trim: #ffc531; }
body { background: var(--bg); color: var(--ink); font-family: 'Bricolage Grotesque', system-ui, sans-serif; }
.sx-h2 { letter-spacing: 0; }

/* --- the table --- */
.tabletop {
  display: grid; grid-template-columns: minmax(0, 700px) minmax(260px, 340px); gap: clamp(18px, 3vw, 40px);
  justify-content: center; align-items: start; padding: clamp(18px, 3vw, 36px) clamp(12px, 3vw, 32px) 56px;
  background: radial-gradient(ellipse at 40% 0%, #1d4a42 0%, transparent 60%), var(--bg);
}
.table {
  position: relative; padding: clamp(12px, 2.4vw, 22px); border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--felt) 88%, #fff) 0%, var(--felt) 45%, var(--felt2) 100%);
  box-shadow: 0 0 0 10px var(--wood), 0 0 0 13px var(--wood2), 0 0 0 16px #2a170a, 0 34px 70px rgb(0 0 0 / .55),
    inset 0 0 60px rgb(0 0 0 / .35);
  transition: background .8s;
}
.table::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .18;
  background: repeating-radial-gradient(circle at 30% 20%, rgb(255 255 255 / .2) 0 1px, transparent 1px 3px);
}
.plaque { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.plaque-title { font: 400 clamp(1.5rem, 4vw, 2.3rem)/1 'Lilita One', sans-serif; color: var(--trim); text-shadow: 0 3px 0 rgb(0 0 0 / .35); transition: color .8s; }
.plaque-sub { padding: 6px 10px; border-radius: 8px; background: rgb(0 0 0 / .3); font: 400 .9rem/1 'Silkscreen', monospace; color: #fff; text-transform: uppercase; letter-spacing: .06em; }

.wanted {
  position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; margin-bottom: 14px;
  padding: 8px 12px; border-radius: 14px; background: rgb(0 0 0 / .28); border: 2px dashed color-mix(in srgb, var(--trim) 70%, transparent);
}
.wanted[hidden] { display: none; }
.wanted-label { font: 400 .8rem/1.1 'Silkscreen', monospace; color: var(--muted); text-transform: uppercase; }
.wanted-card { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; border-radius: 10px; background: var(--chip, #fff); color: #241634; font-weight: 800; }
.wanted-card .y { font: 400 1.25rem/1 'Lilita One', sans-serif; }

/* --- cards --- */
.board { --cols: 6; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: clamp(6px, 1.2vw, 12px); }
.card {
  position: relative; aspect-ratio: .8; padding: 0; border: 0; background: none; cursor: pointer; perspective: 800px;
  border-radius: 12px; color: inherit; font: inherit;
}
.board.is-biz .card { aspect-ratio: auto; min-height: 150px; }
.card-inner {
  position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.card.is-up .card-inner, .card.is-done .card-inner, .card.is-later .card-inner { transform: rotateY(180deg); }
.card-face {
  position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center; overflow: hidden;
}
.card-back {
  background:
    radial-gradient(circle at 50% 50%, transparent 0 34%, rgb(255 1 79 / .12) 35% 37%, transparent 38%),
    repeating-linear-gradient(45deg, rgb(255 1 79 / .14) 0 6px, transparent 6px 14px),
    #fff6e6;
  box-shadow: inset 0 0 0 4px #fff6e6, inset 0 0 0 6px rgb(255 1 79 / .55), 0 5px 0 rgb(0 0 0 / .3);
}
.card-back::after { content: 'J'; font: 400 clamp(1.6rem, 4vw, 2.4rem)/1 'Lilita One', sans-serif; color: var(--accent); text-shadow: 0 2px 0 #fff; }
.card:hover:not(:disabled) .card-back, .card:focus-visible .card-back { box-shadow: inset 0 0 0 4px #fff6e6, inset 0 0 0 6px var(--accent), 0 0 0 3px #fff, 0 8px 0 rgb(0 0 0 / .3); }
.card:focus-visible { outline: none; }
.card-front {
  transform: rotateY(180deg); align-content: center; gap: 4px; padding: 8px 6px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--top) 70%, #fff) 0 30%, #fffaf0 30%);
  box-shadow: inset 0 0 0 3px var(--bot), 0 5px 0 rgb(0 0 0 / .3); color: #241634;
}
.card.k-br { --top: var(--br-top); --bot: var(--br-bot); }
.card.k-ie { --top: var(--ie-top); --bot: var(--ie-bot); }
.card.k-uk { --top: var(--uk-top); --bot: var(--uk-bot); }
.card.k-problem { --top: #ff8fb2; --bot: #ff014f; }
.card.k-fix { --top: #ffe27a; --bot: #e0a100; }
.c-year { font: 400 clamp(1.15rem, 3vw, 1.7rem)/1 'Lilita One', sans-serif; }
.c-co { font-weight: 800; font-size: clamp(.68rem, 1.6vw, .86rem); line-height: 1.1; overflow-wrap: anywhere; }
.c-where { font: 400 clamp(.5rem, 1.2vw, .62rem)/1 'Silkscreen', monospace; text-transform: uppercase; color: #6a5d80; }
.c-tag { font: 400 .62rem/1 'Silkscreen', monospace; text-transform: uppercase; color: var(--bot); }
.c-text { font-weight: 700; font-size: clamp(.78rem, 1.5vw, .92rem); line-height: 1.2; }
.board.is-biz .card-front { padding: 10px; align-content: start; justify-items: start; text-align: left; background: #fffaf0; box-shadow: inset 0 6px 0 var(--bot), inset 0 0 0 3px var(--bot), 0 5px 0 rgb(0 0 0 / .3); padding-top: 14px; }

.card.is-done .card-front { filter: saturate(.75); opacity: .62; }
.card.is-done::after, .card.is-later::after {
  position: absolute; top: -8px; right: -6px; z-index: 2; padding: 3px 7px; border-radius: 999px;
  font: 400 .6rem/1 'Silkscreen', monospace; text-transform: uppercase; box-shadow: 0 2px 0 rgb(0 0 0 / .3);
}
.card.is-done::after { content: '\2713'; background: #1fbf6b; color: #fff; font-size: .8rem; }
.card.is-later::after { content: 'Later'; background: #fff; color: #241634; }
.card.is-later .card-front { opacity: .9; }
.card.is-pick .card-front { opacity: 1; filter: none; cursor: pointer; }
.card.is-pick::after { display: none; }
.card.is-pick:hover .card-front, .card.is-pick:focus-visible .card-front { box-shadow: inset 0 6px 0 var(--bot), inset 0 0 0 3px var(--bot), 0 0 0 4px #fff, 0 0 24px var(--trim); }
.card.is-peek .card-back { box-shadow: inset 0 0 0 4px #fff6e6, inset 0 0 0 6px var(--accent), 0 0 0 4px #fff, 0 0 26px #fff; }
.card:disabled { cursor: default; }

.status { display: flex; justify-content: space-between; margin-top: 14px; font: 400 .95rem/1 'Silkscreen', monospace; color: #fff; }

/* --- prize card --- */
.prize {
  position: absolute; left: 50%; top: 50%; z-index: 6; width: min(88%, 440px); max-height: 92%; overflow-y: auto;
  transform: translate(-50%, -50%); padding: 22px 22px 18px; border-radius: 18px;
  background: #fffaf0; color: #231636; box-shadow: 0 0 0 4px var(--trim), 0 20px 50px rgb(0 0 0 / .5);
}
.prize-kicker { margin: 0 0 6px; color: var(--accent); font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.prize-role { margin: 0; font: 400 1.6rem/1.1 'Lilita One', sans-serif; outline: none; }
.prize-co { margin: 6px 0 0; font-weight: 700; }
.prize-when { margin: 2px 0 10px; color: #6a5d80; font: 500 .85rem/1.3 'JetBrains Mono', monospace; }
.prize-list { margin: 0; padding-left: 18px; line-height: 1.4; }
.prize-list li + li { margin-top: 3px; }
.prize-chips li { background: #e3f5ee; color: #17453b; }
.prize-next { margin-top: 14px; min-height: 48px; padding: 10px 22px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 800; font-size: 1.05rem; cursor: pointer; }

/* --- side panel --- */
.side { display: grid; gap: 16px; align-content: start; }
.jef-box { display: grid; grid-template-columns: 110px 1fr; gap: 12px; align-items: end; }
.jef-host { width: 110px; }
.say { position: relative; margin: 0 0 18px; padding: 14px 16px; border-radius: 16px 16px 16px 4px; background: #fff; color: #10201d; font-weight: 600; line-height: 1.35; min-height: 4.2em; cursor: pointer; }
.timeline, .quest-pick { padding: 16px; border-radius: 16px; background: var(--bg2); border: 1px solid #24423d; }
.timeline-title, .quest-pick-title { margin: 0 0 10px; font: 400 .8rem/1 'Silkscreen', monospace; color: var(--muted); text-transform: uppercase; }
.timeline-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.timeline-list li { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: center; font-size: .92rem; color: var(--muted); }
.timeline-list li::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dot); box-sizing: border-box; }
.timeline-list li.is-found { color: var(--ink); font-weight: 700; }
.timeline-list li.is-found::before { background: var(--dot); }
.timeline-list li.is-now { color: #fff; }
.timeline-list li.is-now::before { box-shadow: 0 0 0 3px rgb(255 255 255 / .25); }
.timeline-list li.is-move { grid-template-columns: 1fr; padding-left: 22px; font: 400 .7rem/1.2 'Silkscreen', monospace; text-transform: uppercase; color: var(--muted); }
.timeline-list li.is-move::before { display: none; }
.timeline-list .when { font: 500 .78rem/1 'JetBrains Mono', monospace; }
.quest-pick-list { display: grid; gap: 6px; }
.quest-pick-list button { min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 1px solid #2f5a52; background: transparent; color: var(--ink); text-align: left; font-weight: 600; cursor: pointer; }
.quest-pick-list button:hover { border-color: var(--trim); }
.skip-game { color: var(--muted); font-weight: 600; }

/* --- the final card --- */
.ticket { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; padding: 16px; background: rgb(4 12 10 / .72); }
.ticket-card {
  position: relative; width: min(560px, 100%); padding: 30px 28px 26px; border-radius: 22px; text-align: center;
  background: #fffaf0; color: #1b1328; box-shadow: inset 0 0 0 6px #fffaf0, inset 0 0 0 9px var(--accent), 0 30px 80px rgb(0 0 0 / .5);
}
.ticket-kicker { margin: 0; font: 400 .9rem/1 'Silkscreen', monospace; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ticket-card h2 { margin: 8px 0 12px; font: 400 clamp(2.2rem, 6vw, 3.2rem)/1 'Lilita One', sans-serif; outline: none; }
.ticket-answer { margin: 0 auto 50px; max-width: 42ch; font-weight: 600; line-height: 1.45; }
.ticket-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ticket .sx-ghost { border-color: rgb(27 19 40 / .35); color: #1b1328; }

@media (max-width: 900px) {
  .tabletop { grid-template-columns: minmax(0, 1fr); padding-top: 96px; }
  .side { order: -1; }
  .jef-box { grid-template-columns: 76px 1fr; }
  .jef-host { width: 76px; }
  .say { min-height: 0; margin-bottom: 8px; font-size: .95rem; }
  .timeline, .skip-game, .quest-pick { display: none; }
}
@media (max-width: 560px) {
  .table { padding: 10px; border-radius: 18px; box-shadow: 0 0 0 6px var(--wood), 0 0 0 8px var(--wood2), 0 20px 40px rgb(0 0 0 / .5), inset 0 0 40px rgb(0 0 0 / .35); }
  .tabletop { padding-left: 14px; padding-right: 14px; }
  .plaque-sub { font-size: .7rem; }
  .wanted { gap: 8px; min-height: 44px; margin-bottom: 10px; }
  .wanted-label { font-size: .68rem; }
  .board.is-biz .card { min-height: 104px; }
  .board { gap: 6px; }
  .card-front { padding: 6px 3px; gap: 2px; }
  .c-co { font-size: .62rem; }
  .card-back::after { font-size: 1.4rem; }
  .prize { position: fixed; z-index: 4500; width: 92vw; max-height: 78vh; padding: 16px; }
  .prize-role { font-size: 1.3rem; }
  .prize-list { font-size: .9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .card-inner { transition: none; }
}