:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f9f4ff;
  background: #130c24;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --muted: #beb1ce;
  --yellow: #ffe17a;
  --pink: #f77abf;
  --mint: #78ebba;
  --border: #4a315e;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 68% 4%, #3b1850 0, transparent 34%), #130c24; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 5px; }
p, h1, h2, h3 { margin: 0; }
p { line-height: 1.7; }
.container { width: min(1200px, calc(100% - 64px)); margin-inline: auto; }
.site-header { border-bottom: 1px solid #ffffff12; }
.header-inner { height: 84px; display: flex; align-items: center; gap: 48px; }
.brand-lockup { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.brand-tagline { color: var(--yellow); font-size: .59rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.4rem; font-weight: 850; letter-spacing: -.06em; white-space: nowrap; }
.brand-mark { display: grid; place-items: center; width: 35px; height: 35px; border: 2px solid var(--yellow); border-radius: 10px 10px 10px 2px; color: var(--yellow); font-size: 1.15rem; letter-spacing: 0; }
.brand-lockup .brand { align-items: baseline; }
.brand-lockup .brand-mark { align-self: center; }
.brand-dot { color: var(--yellow); }
.wordmark-accent, .tv-top span .wordmark-accent { color: var(--yellow); }
nav { display: flex; gap: 34px; margin-left: auto; color: #d7cce3; font-size: .79rem; font-weight: 650; }
nav a:hover, .text-link:hover { color: var(--yellow); }
.header-link { padding: 11px 15px; border: 1px solid #74568a; border-radius: 8px; font-size: .77rem; font-weight: 750; white-space: nowrap; }
.header-link span { color: var(--yellow); margin-left: 8px; }
.header-link:hover { border-color: var(--yellow); }
.hero { min-height: 650px; display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 42px; padding-block: 80px 105px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { color: var(--yellow); font-size: .67rem; font-weight: 850; letter-spacing: .16em; }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px #78ebba88; vertical-align: 1px; }
h1, h2, h3 { letter-spacing: -.055em; }
h1 { margin-top: 21px; font-size: clamp(3.9rem, 6.4vw, 6.5rem); line-height: .99; font-weight: 850; }
h1 span, h2 span { color: var(--yellow); }
.hero-description { max-width: 440px; margin-top: 27px; color: #d2c3dd; font-size: 1.05rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 32px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 52px; padding: 14px 20px; border-radius: 9px; font-size: .82rem; font-weight: 800; }
.button-primary { background: var(--yellow); color: #24132e; }
.button-primary:hover { background: #fff0ad; }
.text-link { font-size: .8rem; font-weight: 750; }
.text-link span { margin-left: 6px; color: var(--yellow); }
.hero-note { display: flex; align-items: center; gap: 10px; margin-top: 53px; color: #ad9bbd; font-size: .74rem; }
.note-icon { color: var(--pink); font-size: 1rem; }
.hero-art { position: relative; min-width: 0; padding: 30px 35px 48px 0; }
.art-glow { position: absolute; inset: 3% 6%; border-radius: 50%; background: #923fa43b; filter: blur(60px); }
.tv-frame { position: relative; padding: 12px; border: 1px solid #8a659e; border-radius: 15px; background: #110b1b; box-shadow: 0 24px 70px #08030fb3; transform: rotate(-2deg); }
.tv-top, .tv-bottom { display: flex; justify-content: space-between; align-items: center; color: #b6a3c8; font-size: .47rem; font-weight: 800; letter-spacing: .08em; }
.tv-top { padding: 1px 3px 10px; }
.tv-top span:first-child { color: #fff; font-size: .68rem; letter-spacing: -.03em; }
.tv-top b { color: var(--yellow); margin-right: 4px; }
.tv-top i { display: inline-block; width: 5px; height: 5px; margin-left: 4px; border-radius: 50%; background: var(--mint); }
.tv-content { display: grid; grid-template-columns: 2fr 1fr; gap: 7px; min-height: 265px; }
.tv-clue { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: 20px; border: 1px solid #6d4689; border-radius: 6px; background: radial-gradient(circle at 50% 40%, #5b2b76, #2b1644 75%); text-align: center; }
.mini-eyebrow, .sidebar-title { color: #d0b9dc; font-size: .45rem; font-weight: 800; letter-spacing: .12em; }
.clue-symbol { margin: 16px 0 5px; color: var(--yellow); font-size: 3rem; line-height: 1; }
.tv-clue strong { font-size: clamp(.85rem, 1.8vw, 1.35rem); letter-spacing: -.04em; }
.clue-subtitle { margin-top: 5px; color: #d3c3de; font-size: .57rem; }
.timer-line { width: 100%; height: 5px; margin-top: auto; border-radius: 6px; background: #ffffff25; overflow: hidden; }
.timer-line span { display: block; width: 65%; height: 100%; background: var(--yellow); }
.timer-caption { display: flex; justify-content: space-between; width: 100%; margin-top: 6px; color: #dacbe6; font-size: .43rem; font-weight: 700; }
.tv-sidebar { padding: 10px; border: 1px solid #4d335f; border-radius: 6px; background: #20132e; }
.screen-points { padding: 12px 9px; margin-bottom: 17px; border: 1px solid #947349; border-radius: 5px; background: #493328; }
.screen-points span { display: block; color: #f4d78f; font-size: .45rem; font-weight: 800; }
.screen-points strong { color: var(--yellow); font-size: 1.45rem; }
.screen-points small { font-size: .55rem; }
.score-row { display: flex; align-items: center; gap: 5px; margin-top: 9px; font-size: .52rem; }
.score-row b { color: #bba8c7; }
.score-row strong { margin-left: auto; color: var(--yellow); font-size: .5rem; }
.avatar { display: grid; flex-shrink: 0; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #2a1433; font-size: .57rem; font-weight: 850; }
.avatar-pink { background: #f594c7; }.avatar-gold { background: #f7d17c; }.avatar-green { background: #86ddb6; }
.tv-bottom { padding: 10px 3px 1px; }
.phone-frame { position: absolute; right: 0; bottom: 0; width: 135px; height: 253px; padding: 15px 10px; border: 3px solid #9178a1; border-radius: 20px; background: #1b102c; box-shadow: 0 16px 40px #09020fc9; transform: rotate(5deg); }
.phone-notch { width: 42px; height: 5px; margin: -7px auto 13px; border-radius: 5px; background: #695978; }
.phone-heading { color: #fff; font-size: .6rem; font-weight: 850; }
.phone-heading > span { color: var(--yellow); }
.phone-user { display: flex; gap: 6px; align-items: center; padding: 11px 0; border-bottom: 1px solid #513560; color: #c2b0d1; font-size: .42rem; font-weight: 800; }
.phone-user strong { display: block; margin-top: 2px; color: #fff; font-size: .7rem; }
.phone-user small { color: var(--yellow); font-size: .45rem; }
.phone-prompt { margin-top: 22px; color: #c9b8d5; text-align: center; font-size: .45rem; font-weight: 800; letter-spacing: .1em; }
.buzz-button { display: grid; place-items: center; width: 76px; height: 76px; margin: 9px auto; border: 5px solid #378d70; border-radius: 50%; background: #79e7b5; box-shadow: 0 4px 0 #236b55, 0 0 25px #76e3b944; color: #12392b; font-size: .8rem; font-weight: 900; }
.phone-footer { margin-top: 15px; color: #b3a0c1; text-align: center; font-size: .4rem; font-weight: 800; letter-spacing: .07em; }
.floating-label { position: absolute; z-index: 2; padding: 9px 11px; border: 1px solid #74548c; border-radius: 7px; background: #271638; box-shadow: 0 8px 20px #0005; font-size: .55rem; font-weight: 850; letter-spacing: .08em; }
.label-top { top: 0; right: 50px; }.label-bottom { bottom: 10px; left: 15px; }.label-bottom span { color: var(--pink); }
.intro-strip { border-block: 1px solid #59416a; background: #241432; }
.strip-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 42px; min-height: 70px; color: #ded0e6; font-size: .75rem; font-weight: 700; }
.strip-inner b { margin-right: 8px; color: var(--yellow); font-size: .63rem; }
.strip-end { margin-left: auto; color: #baa3c8; font-size: .6rem; letter-spacing: .08em; }.strip-end span { margin-left: 5px; color: var(--pink); }
.section { padding-block: 110px; }
.section-heading { margin-bottom: 42px; }
.split-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
h2 { margin-top: 15px; font-size: clamp(2.6rem, 4.5vw, 4.3rem); line-height: 1.06; }
.section-heading > p { max-width: 390px; padding-bottom: 5px; color: var(--muted); font-size: .95rem; }
.role-grid, .mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.role-card { display: flex; flex-direction: column; min-height: 258px; padding: 25px; border: 1px solid var(--border); border-radius: 12px; background: linear-gradient(145deg, #28183c, #1d122f); }
.card-top { display: flex; justify-content: space-between; align-items: start; }
.icon-box { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; font-size: 1.3rem; }
.icon-gold { background: #56442b; color: var(--yellow); }.icon-pink { background: #582c4f; color: var(--pink); }.icon-mint { background: #21483e; color: var(--mint); }
.card-number { color: #a994bb; font-size: .61rem; font-weight: 800; letter-spacing: .08em; }
h3 { font-size: 1.35rem; }
.role-card h3 { margin-top: 23px; }
.role-card p, .mode-card p { margin-top: 10px; color: var(--muted); font-size: .84rem; }
.card-tag { display: block; margin-top: auto; padding-top: 22px; color: var(--yellow); font-size: .59rem; font-weight: 850; letter-spacing: .1em; }
.card-tag span { margin-left: 4px; }
.setup-note { margin-top: 20px; color: #bdaeca; font-size: .78rem; }.setup-note span { margin-right: 7px; color: var(--mint); }
.modes-section { border-block: 1px solid #ffffff0c; background: #1c102c; }
.mode-card { padding: 27px; border: 1px solid #4b315e; border-radius: 12px; background: #241535; }
.featured-mode { border-color: #9c7658; background: linear-gradient(145deg, #3e2444, #26172f); }
.mode-number { display: flex; justify-content: space-between; color: #d6c1df; font-size: .7rem; font-weight: 850; }
.mode-number span { color: #af9bbf; font-size: .57rem; letter-spacing: .1em; }
.mode-icon { display: grid; place-items: center; width: 62px; height: 62px; margin-block: 37px 24px; border-radius: 18px; font-size: 2rem; font-weight: 850; }
.mode-buzz { border: 4px solid #65d7a1; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #24764b, #124b32 75%); box-shadow: 0 0 0 4px #65d7a122, 0 4px 0 #103c29; color: white; font-size: .75rem; font-weight: 900; letter-spacing: .02em; }
.mode-type { background: #56314e; color: var(--pink); font-size: 1.5rem; }.mode-both { background: #254c40; color: var(--mint); }
.combined-mode-icons { display: flex; align-items: center; gap: 12px; margin-block: 37px 24px; }
.combined-mode-icons .mode-icon { flex-shrink: 0; margin: 0; }
.mode-plus { color: #d6c1df; font-size: 1.2rem; font-weight: 850; }
.mode-card p { min-height: 115px; }
.mode-pill { display: inline-block; margin-top: 20px; padding: 7px 9px; border: 1px solid #775883; border-radius: 5px; color: #e6d9eb; font-size: .55rem; font-weight: 850; letter-spacing: .09em; }
.media-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-top: 24px; color: #b4a1c2; font-size: .61rem; font-weight: 850; letter-spacing: .1em; }
.media-line div { display: flex; flex-wrap: wrap; gap: 7px; }.media-line div span { padding: 8px 12px; border: 1px solid #59406a; border-radius: 5px; color: #dfcfe7; }
.scoring-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; }
.scoring-copy > p:not(.eyebrow) { max-width: 470px; margin-top: 23px; color: var(--muted); font-size: .95rem; }
.scoring-features { display: grid; gap: 22px; margin-top: 33px; }
.scoring-features > div { display: flex; gap: 15px; }.scoring-features > div > span { display: grid; flex-shrink: 0; place-items: center; width: 35px; height: 35px; border-radius: 8px; background: #49332f; color: var(--yellow); font-size: 1.1rem; }
.scoring-features p { color: var(--muted); font-size: .8rem; }.scoring-features strong { display: block; margin-bottom: 2px; color: #fff; font-size: .87rem; }
.points-panel { padding: 28px; border: 1px solid #795582; border-radius: 14px; background: linear-gradient(155deg, #382044, #21152f); box-shadow: 0 25px 60px #08030d55; }
.panel-top { display: flex; justify-content: space-between; gap: 10px; color: #c9b4d2; font-size: .58rem; font-weight: 850; letter-spacing: .1em; }
.panel-top > span:first-child { color: #e5d7e8; }
.points-label { margin-top: 44px; color: #c8b3cf; font-size: .6rem; font-weight: 800; letter-spacing: .1em; }
.points-value { margin-top: 2px; color: var(--yellow); font-size: 4.5rem; font-weight: 850; letter-spacing: -.07em; line-height: 1.1; }.points-value span { font-size: 1.2rem; letter-spacing: 0; }
.points-description { max-width: 320px; margin-top: 10px; color: #cab8d3; font-size: .78rem; }
.steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; height: 150px; margin-top: 32px; }
.steps > div { display: flex; flex-direction: column; justify-content: end; align-items: stretch; gap: 7px; min-height: 0; text-align: center; }
.steps span { color: #d6c3dc; font-size: .65rem; font-weight: 800; }
.steps i { display: block; height: calc(var(--height) * .8); border-radius: 5px 5px 0 0; background: linear-gradient(#ffe17a, #c8885a); }
.steps > div:not(:first-child) i { opacity: .7; }
.panel-bottom { display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid #71577b; color: #bca6c8; font-size: .55rem; font-weight: 800; letter-spacing: .08em; }
.time-axis { display: grid; gap: 8px; margin-top: 18px; color: var(--yellow); font-size: .75rem; font-weight: 800; text-align: center; }
.time-arrow { position: relative; height: 3px; margin-right: 3px; border-radius: 2px; background: var(--yellow); }
.time-arrow::after { content: ''; position: absolute; right: 0; top: 50%; width: 10px; height: 10px; border-top: 3px solid var(--yellow); border-right: 3px solid var(--yellow); transform: translateY(-50%) rotate(45deg); }
.closing { position: relative; display: flex; justify-content: space-between; align-items: end; gap: 30px; overflow: hidden; padding: 54px; border: 1px solid #735589; border-radius: 15px; background: radial-gradient(circle at 88% 40%, #5b3065, transparent 38%), #2b193d; }
.closing > div:first-child, .closing .button { position: relative; z-index: 1; }.closing h2 { font-size: clamp(2.5rem, 4vw, 3.8rem); }.closing p:not(.eyebrow) { max-width: 470px; margin-top: 18px; color: #ccbad6; font-size: .9rem; }
.closing .button { flex-shrink: 0; }.closing-star { position: absolute; top: -70px; right: 95px; color: #ffffff0b; font-size: 18rem; line-height: 1; }
.footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 40px; color: #a996b8; font-size: .59rem; font-weight: 800; letter-spacing: .1em; }.footer .brand { color: #fff; letter-spacing: -.06em; }.footer > span:last-child span { color: var(--pink); }
@media (max-width: 900px) {
  .header-inner nav { display: none; }.header-link { margin-left: auto; }
  .hero { grid-template-columns: 1fr 1fr; gap: 20px; min-height: 0; }
  h1 { font-size: clamp(3.4rem, 7vw, 5rem); }
  .tv-content { min-height: 220px; }
  .scoring-section { gap: 45px; }
  .strip-end { display: none; }
}
@media (max-width: 700px) {
  .container { width: min(100% - 36px, 560px); }
  .header-inner { height: 70px; gap: 12px; }.header-inner nav { display: none; }.header-link { margin-left: auto; }
  .hero { grid-template-columns: 1fr; gap: 45px; padding-block: 68px 65px; }
  h1 { font-size: clamp(3.6rem, 12vw, 5.2rem); }.hero-note { margin-top: 30px; }
  .hero-art { max-width: 560px; }.tv-content { min-height: 240px; }.tv-clue strong { font-size: 1.15rem; }
  .strip-inner { min-height: 64px; gap: 12px 22px; padding-block: 14px; font-size: .7rem; }
  .section { padding-block: 75px; }.split-heading { display: block; }.section-heading > p { margin-top: 20px; }
  .role-grid, .mode-grid, .scoring-section { grid-template-columns: 1fr; }
  .role-card { min-height: 220px; }.mode-card p { min-height: 0; }.mode-icon, .combined-mode-icons { margin-block: 24px 20px; }
  .scoring-section { gap: 35px; }.closing { display: block; padding: 34px 26px; }.closing .button { margin-top: 26px; }
  .footer { flex-wrap: wrap; }.footer > span:last-child { display: none; }
}
@media (max-width: 390px) {
  .tv-content { min-height: 210px; }.tv-clue { padding: 10px; }.tv-sidebar { padding: 7px; }.phone-frame { right: 18px; transform: scale(.85) rotate(5deg); transform-origin: bottom right; }
  .strip-inner { gap: 8px 14px; font-size: .63rem; }
}
@media (max-width: 520px) { .header-link { display: none; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }