:root {
  --bg: #0d0d10;
  --fg: #f5f1e6;
  --surface: #15151a;
  --surface-2: #1d1d24;
  --border-muted: #2a2a32;
  --gold: #d4af37;
  --gold-bright: #f3cf5e;
  --ink: #17150f;
  --ink-900: #0d0d10;
  --ink-800: #15151a;
  --ink-700: #1d1d24;
  --ink-600: #26262e;
  --font-serif: Georgia, "Playfair Display", "Times New Roman", Times, serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Prevent horizontal scrollbar/overflow while keeping position:sticky intact */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) {
  html { overflow-x: hidden; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; }
h1, h2, h3, h4 { font-family: var(--font-serif); }
p { margin: 0 0 1em; }

.font-serif { font-family: var(--font-serif) !important; }
.font-mono { font-family: var(--font-mono) !important; }
.font-medium { font-weight: 500; }
.font-sans { font-family: inherit; }

.container { width: 100%; max-width: 1128px; margin: 0 auto; padding: 0 20px; }

/* ---------- Tokens / surfaces ---------- */
.text-gold-grad {
  background: linear-gradient(120deg, #f3d779 0%, #d4af37 40%, #bfa02f 55%, #f5e2a0 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ring-gold-grad { background: linear-gradient(#d4af37, #a8852a); }
.gold-glow { box-shadow: 0 0 0 1px rgba(212,175,55,.35), 0 10px 40px -12px rgba(212,175,55,.55); }
.bg-ink-900 { background: var(--ink-900); }
.bg-ink-800 { background: var(--ink-800); }
.bg-ink-700 { background: var(--ink-700); }
.bg-ink-600 { background: var(--ink-600); }
.bg-surface { background: var(--surface); }
.bg-surface-2 { background: var(--surface-2); }
.border-muted { border-color: var(--border-muted); }
.text-gold { color: var(--gold); }
.text-gold-bright { color: var(--gold-bright); }
.text-muted { color: #a9a497; }
.text-\[\#f7efce\] { color: #f7efce; }
.text-\[11px\] { font-size: 11px; }
.text-center { text-align: center; }
.text-sm { font-size: .875rem; }
.text-xs { font-size: .75rem; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.35rem; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.uppercase { text-transform: uppercase; }
.tracking-wide { letter-spacing: .08em; }
.tracking-widest { letter-spacing: .14em; }
/* ---------- Layout / spacing utilities ---------- */
.mt-1 { margin-top: .25rem } .mt-2 { margin-top: .5rem } .mt-3 { margin-top: .75rem } .mt-4 { margin-top: 1rem }
.mt-5 { margin-top: 1.25rem } .mt-6 { margin-top: 1.5rem } .mt-8 { margin-top: 2rem } .mt-10 { margin-top: 2.5rem } .mt-16 { margin-top: 4rem }
.mt-0\.5 { margin-top: .125rem }
.mb-0 { margin-bottom: 0 } .mb-1 { margin-bottom: .25rem } .mb-2 { margin-bottom: .5rem } .mb-3 { margin-bottom: .75rem }
.mb-4 { margin-bottom: 1rem } .mb-6 { margin-bottom: 1.5rem } .mb-8 { margin-bottom: 2rem } .mb-10 { margin-bottom: 2.5rem } .mb-12 { margin-bottom: 3rem }
.my-6 { margin: 1.5rem 0 } .my-8 { margin: 2rem 0 }
.mx-auto { margin-left: auto; margin-right: auto }
.mx-6 { margin-left: 1.5rem; margin-right: 1.5rem }
.ml-4 { margin-left: 1rem }

.p-4 { padding: 1rem } .p-5 { padding: 1.25rem } .p-6 { padding: 1.5rem }
.py-2 { padding-top: .5rem; padding-bottom: .5rem } .py-3 { padding-top: .75rem; padding-bottom: .75rem } .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem }
.px-0 { padding-left: 0; padding-right: 0 } .px-3 { padding-left: .75rem; padding-right: .75rem }
.px-4 { padding-left: 1rem; padding-right: 1rem } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem } .px-6 { padding-left: 1.5rem; padding-right: 1.5rem }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: .25rem } .gap-2 { gap: .5rem } .gap-3 { gap: .75rem } .gap-4 { gap: 1rem } .gap-5 { gap: 1.25rem } .gap-6 { gap: 1.5rem }
.gap-y-1 { row-gap: .25rem }
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: 1fr }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Spaced stack helper */
.space-y-1 > * + * { margin-top: .25rem }
.space-y-1\.5 > * + * { margin-top: .375rem }
.space-y-2 > * + * { margin-top: .5rem }
.space-y-4 > * + * { margin-top: 1rem }
.space-y-6 > * + * { margin-top: 1.5rem }
.space-y-16 > * + * { margin-top: 4rem }

.w-full { width: 100% } .w-auto { width: auto } .w-6 { width: 1.5rem } .w-7 { width: 1.75rem } .w-16 { width: 4rem }
.h-full { height: 100% } .h-6 { height: 1.5rem } .h-7 { height: 1.75rem } .h-1\.5 { height: .375rem }
.min-h-screen { min-height: 100vh }
.block { display: block } .inline-block { display: inline-block } .hidden { display: none }
.overflow-hidden { overflow: hidden } .overflow-x-auto { overflow-x: auto }
.relative { position: relative } .absolute { position: absolute }
.z-10 { z-index: 10 }
.object-cover { object-fit: cover }
.text-left { text-align: left } .text-center { text-align: center } .text-right { text-align: right }
.text-2xl { font-size: 1.5rem; line-height: 1.2 }
.text-3xl { font-size: 1.875rem; line-height: 1.2 }
.text-4xl { font-size: 2.25rem; line-height: 1.15 }
.text-5xl { font-size: 3rem; line-height: 1.1 }
.underline { text-decoration: underline }
.list-disc { list-style: disc }
.pl-5 { padding-left: 1.25rem }
.cursor-pointer { cursor: pointer }
.float-right { float: right }
.leading-relaxed { line-height: 1.625 }
.self-center { align-self: center }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }

.rounded { border-radius: .5rem }
.rounded-lg { border-radius: .75rem }
.rounded-xl { border-radius: .9rem }
.rounded-2xl { border-radius: 1rem }
.rounded-3xl { border-radius: 1.5rem }
.rounded-full { border-radius: 9999px }

.border { border: 1px solid var(--border-muted) }
.border-b { border-bottom: 1px solid var(--border-muted) }
.border-t { border-top: 1px solid var(--border-muted) }
.bg-center { background-position: center }

/* ---------- Buttons ---------- */
.gold-btn {
  position: relative; overflow: hidden; display: inline-block;
  background: linear-gradient(120deg, #e8c85a 0%, #d4af37 45%, #f3d779 70%, #c9a72f 100%);
  color: #17150f; font-weight: 700; border: none; cursor: pointer;
  padding: .7rem 1.4rem; border-radius: .55rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 24px -8px rgba(212,175,55,.6);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
  text-align: center;
}
.gold-btn::after {
  content: ""; position: absolute; top: 0; left: -75%; height: 100%; width: 50%;
  transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: gold-shine 3.2s ease-in-out infinite;
}
.gold-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 2px 0 rgba(255,255,255,.45) inset, 0 14px 32px -10px rgba(212,175,55,.75); }
.gold-btn:active { transform: translateY(.5px) scale(.99); }
@keyframes gold-shine { 0% { left: -75%; } 55%, 100% { left: 125%; } }

.btn-outline {
  display: inline-block; padding: .6rem 1.2rem; border-radius: .55rem;
  border: 1px solid var(--border-muted); background: var(--ink-700); color: var(--fg);
  font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s;
}
.btn-outline:hover { border-color: var(--gold); background: var(--ink-600); }
.btn-ghost { background: transparent; border: 1px solid var(--border-muted); color: var(--fg); }
.btn-sm { padding: .4rem .8rem; font-size: .8125rem; }
.btn-danger { background: #7a2a2a; color: #fff; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border-muted);
  border-radius: .9rem; padding: 1.5rem;
}
.card-hover { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-3px); border-color: rgba(212,175,55,.5); box-shadow: 0 14px 40px -16px rgba(212,175,55,.35); }

/* ---------- Skeleton / reveal ---------- */
.skeleton { position: relative; overflow: hidden; background: #1e1e25; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(212,175,55,.12), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .08s; } .reveal-d2 { transition-delay: .16s; }
.reveal-d3 { transition-delay: .24s; } .reveal-d4 { transition-delay: .32s; }

/* ---------- Medals ---------- */
.medal { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 9999px; font-weight: 800; }
.medal-gold { background: linear-gradient(140deg, #f7de8b, #d4af37 55%, #a8812a); color: #2a2000; }
.medal-silver { background: linear-gradient(140deg, #f1f3f5, #c6ccd4 55%, #98a0aa); color: #21242a; }
.medal-bronze { background: linear-gradient(140deg, #e7b989, #cd8847 55%, #a9662a); color: #2c1505; }

/* ---------- Nav ---------- */
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: linear-gradient(90deg, #e8c85a, #d4af37); transition: width .25s ease;
}
.nav-link:hover::after, .nav-link.is-active::after { width: 100%; }

/* ---------- Live dot / pop-in ---------- */
@keyframes live-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,175,55,.7); } 50% { box-shadow: 0 0 0 6px rgba(212,175,55,0); } }
.live-dot { animation: live-pulse 2s infinite; }
@keyframes pop-in { 0% { transform: scale(.94) translateY(8px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }
.pop-in { animation: pop-in .35s cubic-bezier(.22,1,.36,1); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(13,13,16,.9); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-muted);
}
body.is-open .site-header { background: var(--ink-900); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.brand img { height: 40px; width: auto; }
.brand-text {
  font-family: var(--font-serif); font-weight: 700; letter-spacing: .01em;
  background: linear-gradient(120deg, #f3d779 0%, #d4af37 40%, #bfa02f 55%, #f5e2a0 80%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nav { display: flex; align-items: center; gap: 1.4rem; }
.nav .nav-link { font-weight: 600; color: #d8d3c4; }
.nav .nav-link:hover { color: var(--fg); }

.menu-btn { display: none; background: transparent; border: 1px solid var(--border-muted); color: var(--fg); border-radius: .5rem; padding: .4rem .7rem; cursor: pointer; font-size: 1.2rem; line-height: 1; }
.drawer-mask {
  display: none; position: fixed; inset: 0; z-index: 48; background: rgba(0,0,0,.6);
  opacity: 0; transition: opacity .3s ease;
}
.drawer {
  display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 49;
  width: 72vw; max-width: 320px; background: #15151a; border-left: 1px solid #26262e;
  box-shadow: -20px 0 60px rgba(0,0,0,.5);
  transform: translateX(100%); transition: transform .3s ease;
  overflow-y: auto; padding-bottom: 1.5rem;
}
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; height: 64px; border-bottom: 1px solid #26262e; }
.drawer-head .font-serif { font-size: 1.1rem; font-weight: 700; }
.drawer-close { background: transparent; border: none; color: var(--gold); font-size: 1.2rem; cursor: pointer; padding: .3rem .5rem; border-radius: .5rem; }
.drawer-close:hover { background: var(--ink-700); }
.drawer nav { padding: .75rem; }
.drawer a { display: block; padding: .65rem 1rem; font-weight: 600; font-size: .95rem; color: #d8d3c4; border-radius: .5rem; margin: .1rem .75rem; }
.drawer a:first-of-type { margin-top: .5rem; }
.drawer a:hover { background: var(--ink-700); color: var(--gold); }
.drawer a.gold-btn { margin-top: 1rem; }
body.is-open .drawer-mask { display: block; opacity: 1; }
body.is-open .drawer { transform: translateX(0); }

/* ---------- Hero ---------- */
.hero { padding: 4.5rem 0 4rem; text-align: center; position: relative; overflow: hidden; }
.hero-badge { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid rgba(212,175,55,.4); background: rgba(212,175,55,.1); color: var(--gold-bright); padding: .35rem 1rem; border-radius: 9999px; font-size: .8rem; letter-spacing: .06em; }
.live-dot { width: .5rem; height: .5rem; border-radius: 9999px; background: var(--gold); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { padding: .65rem .8rem; text-align: left; border-bottom: 1px solid var(--border-muted); font-size: .9rem; vertical-align: middle; }
.tbl th { color: #b9b3a2; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; }
.tbl tr:hover td { background: rgba(212,175,55,.04); }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: .8rem; color: #b9b3a2; letter-spacing: .04em; margin-bottom: .35rem; }
.form-input, .form-select, .form-textarea {
  width: 100%; padding: .6rem .75rem; background: var(--ink-700); color: var(--fg);
  border: 1px solid var(--border-muted); border-radius: .5rem; font-size: .95rem;
}
.form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18); }

/* ---------- Badges / alerts ---------- */
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 9999px; font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
.badge-gold { background: rgba(212,175,55,.16); color: var(--gold-bright); }
.badge-green { background: rgba(34,197,94,.15); color: #7ee2a8; }
.badge-red { background: rgba(239,68,68,.16); color: #fca5a5; }
.badge-gray { background: var(--ink-600); color: #cdc7b6; }
.badge-purple { background: rgba(168,85,247,.16); color: #d8b4fe; }

/* Semantic badge aliases used across views */
.badge-success { background: rgba(34,197,94,.15); color: #7ee2a8; }
.badge-error { background: rgba(239,68,68,.16); color: #fca5a5; }
.badge-warn { background: rgba(212,175,55,.16); color: var(--gold-bright); }
.badge-muted { background: var(--ink-600); color: #cdc7b6; }

.alert { padding: .9rem 1.1rem; border-radius: .6rem; border: 1px solid; margin-bottom: 1rem; font-size: .9rem; }
.alert-error { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.4); color: #fca5a5; }
.alert-success { background: rgba(34,197,94,.1); border-color: rgba(34,197,94,.4); color: #7ee2a8; }
.alert-info { background: rgba(212,175,55,.08); border-color: rgba(212,175,55,.4); color: var(--gold-bright); }

/* ---------- Contestant cards ---------- */
.digicard { display: flex; flex-direction: column; gap: .25rem; padding: 1.25rem; }
.digicard .num { font-size: .8rem; color: var(--gold); font-weight: 700; letter-spacing: .08em; }
.digicard .name { font-size: 1.1rem; font-weight: 700; }
.digicard .loc { font-size: .85rem; color: #a9a497; }
.avatar { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: .6rem; border: 1px solid var(--border-muted); }

/* ---------- Divider / misc ---------- */
.divider { height: 1px; background: var(--border-muted); border: none; margin: 2rem 0; }
.breadcrumb { font-size: .85rem; color: #a9a497; }
.breadcrumb a:hover { color: var(--gold); }

.site-footer { border-top: 1px solid var(--border-muted); padding: 2.5rem 0 2rem; margin-top: 4rem; background: var(--surface); }
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; }
.footer-col h4 { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #c9a845; }
.footer-col a { display: block; padding: .2rem 0; color: #c9c2ae; font-size: .9rem; }
.footer-col a:hover { color: var(--gold); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gold-btn::after, .skeleton::after, .live-dot { animation: none !important; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .menu-btn { display: block; }
  .grid-cols-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr; }
  .text-3xl { font-size: 1.6rem; }
  .hero { padding: 3rem 0; }
}
@media (max-width: 860px) {
  .cd-status { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
  .container { padding: 0 14px; }
  .hero-stats { grid-template-columns: 1fr !important; max-width: 100% !important; }
}

.auth-wrap { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: 2rem 0; }