:root {
  --pitch: #0b0a0e;
  --surface: #15131b;
  --panel2: #1d1a26;
  --panel3: #262231;
  --hairline: #322c42;
  --hairline2: #4a4260;
  --chalk: #f3f1f6;
  --mute: #a7a1b6;
  --spring: #0afe87;
  --spring2: #12d675;
  --spring-ink: #04170d;
  --cerise: #e81f74;
  --maxw: 1140px;
  --bevel: 12px;
  --gap: 20px;
  --display: Georgia, "Times New Roman", "Nimbus Roman", serif;
  --body: Verdana, Geneva, "DejaVu Sans", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font: 16px/1.62 var(--body); color: var(--chalk); background: var(--pitch); overflow-x: hidden; max-width: 100%; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
.cue:focus-visible, a:focus-visible, label:focus-visible, input:focus-visible { outline: 2px solid var(--spring); outline-offset: 2px; }
h1, h2, h3 { margin: 0 0 15px; font-family: var(--display); font-weight: 700; line-height: 1.25; color: var(--chalk); overflow-wrap: break-word; }
h1 { font-size: 39px; }
h2 { font-size: 27px; }
h3 { font-size: 19px; }
p { margin: 0 0 15px; overflow-wrap: break-word; }
ul, ol { margin: 0 0 15px; padding-left: 20px; }
li { margin-bottom: 7px; }
strong { color: #fff; }
table { width: 100%; border-collapse: collapse; margin: 0 0 6px; font-size: 15px; }
th, td { padding: 13px 15px; border: 1px solid var(--hairline); text-align: left; vertical-align: middle; }
th { background: var(--panel3); color: #fff; font-weight: 700; }
td { background: var(--surface); }
tr:nth-child(even) td { background: var(--panel2); }
td:first-child { font-weight: 700; }
.boxwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 28px; border-radius: var(--bevel); }

.stage { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; }
.zone, .decks, .sayings, .asks, .wager, .footer-bar, .handheld, .keycard, .freshtag { contain-intrinsic-size: auto 600px; }
.framewrap { max-width: calc(var(--maxw) + var(--gap) * 2); margin: 0 auto; padding: 0 var(--gap) 48px; }
.cue { cursor: pointer; -webkit-user-select: none; user-select: none; }

@keyframes beat {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 24px rgba(10,254,135,.22); }
  50% { transform: scale(1.03); box-shadow: 0 10px 30px rgba(10,254,135,.45); }
}
.hook-btn, .join, .sayings__btn { animation: beat 2.9s ease-in-out infinite; will-change: transform; }
.hook-btn:hover, .join:hover, .sayings__btn:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hook-btn, .join, .sayings__btn { animation: none; } }

.hook-btn { display: flex; align-items: center; justify-content: center; text-align: center; max-width: 360px; width: 100%; min-height: 56px; margin: 12px auto 0; padding: 12px 26px; border-radius: 6px; background: linear-gradient(180deg,#1dff95,#06d274); color: var(--spring-ink); font-family: var(--display); font-size: 19px; font-weight: 700; text-decoration: none; transition: filter .2s, transform .1s; }
.hook-btn:hover { filter: brightness(1.08); }
.hook-btn:active { transform: scale(.98); }

.header-bar { position: sticky; top: 0; z-index: 60; background: var(--surface); border-bottom: 1px solid var(--hairline); }
.header-bar__in { max-width: calc(var(--maxw) + var(--gap) * 2); margin: 0 auto; padding: 0 var(--gap); height: 72px; display: flex; align-items: center; gap: 16px; }
.brandtag { margin-right: auto; display: flex; align-items: center; }
.brandtag img { height: 46px; width: auto; max-width: none; display: block; }
.navbar__list { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
.navbar__list li { margin: 0; }
.navbar__list .cue { position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 6px 2px; font-size: 14.5px; font-weight: 700; white-space: nowrap; text-decoration: none; color: var(--chalk); }
.navbar__list .cue svg { width: 17px; height: 17px; fill: var(--spring); flex: none; }
.navbar__list .cue::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 2px; background: var(--spring); transition: right .22s; }
.navbar__list .cue:hover::after { right: 0; }
.navbar__cta { display: none; }
.header-bar__cta { display: flex; gap: 9px; }
.enter, .join { display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 18px; border-radius: 6px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; cursor: pointer; transition: filter .2s, background .2s; }
.enter { background: transparent; color: var(--spring); border: 1px solid var(--spring); }
.enter:hover { background: rgba(10,254,135,.1); }
.join { background: linear-gradient(180deg,#1dff95,#06d274); color: var(--spring-ink); }
.join:hover { filter: brightness(1.08); }
.menuflag { position: absolute; opacity: 0; pointer-events: none; }
.hambtn { display: none; width: 44px; height: 44px; padding: 10px; flex-direction: column; justify-content: space-between; cursor: pointer; border-radius: 8px; border: 1px solid var(--hairline); background: var(--panel2); }
.hambtn span { display: block; height: 3px; border-radius: 2px; background: var(--chalk); transition: transform .25s, opacity .25s; }

.lede { padding: 34px 0 46px; text-align: center; }
.lede__h1 { margin-bottom: 18px; }
.lede__shot { display: block; margin: 0 auto 22px; border-radius: var(--bevel); overflow: hidden; border: 1px solid var(--hairline); }
.lede__shot img { width: 100%; display: block; }
.lede__text { text-align: left; font-size: 16.5px; margin: 0 auto; }
.lede__text p:last-child { margin-bottom: 0; }

.shotband { margin: 8px 0 46px; }
.shotband .cue { display: block; border-radius: var(--bevel); overflow: hidden; border: 1px solid var(--hairline); }
.shotband img { width: 100%; }

.keycard { margin: 0 0 46px; }
.keycard__cap { display: flex; align-items: center; justify-content: center; min-height: 64px; margin: 0 0 22px; padding: 12px 22px; border-radius: var(--bevel); background: linear-gradient(120deg, var(--cerise), #b01458); text-align: center; font-family: var(--display); font-size: 23px; font-weight: 700; color: #fff; }
.keycard td:first-child { width: 33%; }

.zone { margin: 0 0 46px; min-width: 0; }
.zone--mid h2 { text-align: center; }
.readcol p, .readcol li { font-size: 16.5px; }
.readcol h3 { margin-top: 26px; }
.readcol table { font-size: 15px; }

.wager__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wager__col { padding: 24px; border-radius: var(--bevel); background: var(--surface); border: 1px solid var(--hairline); min-width: 0; }
.wager__col h3 { margin-bottom: 14px; }
.wager__col ul { margin: 0; padding: 0; list-style: none; }
.wager__col li { position: relative; padding-left: 28px; margin-bottom: 11px; }
.wager__col li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.wager__col--up li::before { content: "+"; color: var(--spring); font-size: 20px; line-height: 1.1; }
.wager__col--down li::before { content: "–"; color: var(--cerise); font-size: 20px; line-height: 1.1; }

.decks { margin: 0 0 50px; }
.decks > h2 { text-align: center; margin-bottom: 22px; }
.decks__tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; list-style: none; margin: 0 0 22px; padding: 0; }
.decks__tabs li { margin: 0; }
.decks__tab { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--hairline); color: var(--chalk); font-weight: 700; font-size: 15px; cursor: pointer; transition: border-color .2s, background .2s; }
.decks__tab svg { fill: currentColor; flex: none; }
.decks__tab:hover, .decks__tab.live { background: var(--panel3); border-color: var(--spring); color: #fff; }
.deckpane { display: none; }
.deckpane.live { display: block; }
.decks__grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px 16px; }
.cel { display: block; text-decoration: none; color: var(--chalk); min-width: 0; }
.cel__art { display: block; position: relative; border-radius: var(--bevel); overflow: hidden; background: var(--panel2); border: 1px solid var(--hairline); aspect-ratio: 360/472; }
.cel__art img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.cel:hover .cel__art img { transform: scale(1.05); }
.cel__name { display: block; margin-top: 10px; font-size: 14px; font-weight: 700; font-family: var(--display); line-height: 1.3; }
.cel__name .credit { display: block; font-family: var(--body); font-size: 12px; font-weight: 400; color: var(--mute); }
.cel--brand .cel__art { aspect-ratio: 240/120; display: flex; align-items: center; justify-content: center; padding: 16px; }
.cel--brand .cel__art img { width: 100%; height: 100%; object-fit: contain; }
.cel--brand .cel__name { text-align: center; }

.handheld { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.handheld-btn { display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 20px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--hairline); text-decoration: none; color: var(--chalk); transition: border-color .2s, background .2s; }
.handheld-btn:hover { border-color: var(--spring); background: var(--panel3); }
.handheld-btn svg { width: 26px; height: 26px; flex: none; fill: var(--chalk); }
.handheld-btn b { display: block; font-size: 15px; line-height: 1.1; font-family: var(--display); }
.handheld-btn span { display: block; font-size: 11px; color: var(--mute); }

.sayings { margin: 0 0 50px; }
.sayings__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; margin-bottom: 20px; border-radius: var(--bevel); background: var(--surface); border: 1px solid var(--hairline); }
.sayings__cap { font-size: 14px; color: var(--mute); margin-bottom: 4px; }
.sayings__score { display: flex; align-items: center; gap: 10px; }
.sayings__score > span { font-size: 26px; font-weight: 700; font-family: var(--display); }
.sayings__score small { color: var(--mute); font-size: 13px; }
.starrow { display: inline-flex; gap: 2px; }
.starrow svg { width: 18px; height: 18px; fill: var(--spring); }
.stars { display: inline-flex; gap: 2px; line-height: 0; vertical-align: middle; }
.stars svg { width: 16px; height: 16px; fill: var(--spring); flex: none; }
.sayings__btn { display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px; border-radius: 6px; background: linear-gradient(180deg,#1dff95,#06d274); color: var(--spring-ink); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.sayings__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.saybox { padding: 20px; border-radius: var(--bevel); background: var(--surface); border: 1px solid var(--hairline); min-width: 0; }
.saybox__who { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.saybox__face { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: linear-gradient(120deg,var(--spring),var(--spring2)); font-weight: 700; font-size: 18px; color: var(--spring-ink); flex: none; font-family: var(--display); }
.saybox__id span { display: block; font-weight: 700; }
.saybox__id small { color: var(--mute); font-size: 12px; }
.saybox__stars { margin-bottom: 10px; }
.saybox__text p { margin: 0; font-size: 15px; }

.asks { margin: 0 0 44px; }
.asks__item { padding: 18px 22px; margin-bottom: 12px; border-radius: var(--bevel); background: var(--surface); border: 1px solid var(--hairline); }
.asks__item h3 { font-size: 18px; margin-bottom: 8px; }
.asks__item p { margin: 0; font-size: 16px; }

.freshtag { margin: 0 0 18px; }
.freshtag__box { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-radius: var(--bevel); background: var(--surface); border: 1px solid var(--hairline); font-size: 15px; color: var(--mute); }
.freshtag__box svg { width: 26px; height: 26px; fill: var(--spring); flex: none; }
.freshtag__box strong { color: var(--chalk); }

.footer-bar { background: var(--surface); border-top: 1px solid var(--hairline); }
.footer-bar__top { max-width: calc(var(--maxw) + var(--gap)*2); margin: 0 auto; padding: 40px var(--gap); display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer-bar__brand { max-width: 360px; }
.footer-bar__brand img.logofoot { height: 50px; width: auto; max-width: none; margin-bottom: 16px; }
.footer-bar__desc { font-size: 14px; color: var(--mute); margin-bottom: 18px; }
.footer-bar__social { display: flex; gap: 10px; }
.footer-bar__social a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--hairline); transition: border-color .2s, background .2s; }
.footer-bar__social a:hover { border-color: var(--spring); background: var(--panel3); }
.footer-bar__social svg { width: 19px; height: 19px; fill: var(--chalk); }
.footer-bar__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-bar__cap { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); margin-bottom: 12px; font-family: var(--display); }
.footer-bar__nav ul { list-style: none; margin: 0; padding: 0; }
.footer-bar__nav li { margin-bottom: 9px; }
.footer-bar__nav .cue { font-size: 14px; text-decoration: none; color: var(--chalk); cursor: pointer; }
.footer-bar__nav .cue:hover { color: var(--spring); }
.footer-bar__pay { border-top: 1px solid var(--hairline); }
.footer-bar__payrow { max-width: calc(var(--maxw) + var(--gap)*2); margin: 0 auto; padding: 24px var(--gap); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.footer-bar__payrow img { height: 30px; width: auto; opacity: .92; }
.footer-bar__seals { border-top: 1px solid var(--hairline); }
.footer-bar__sealrow { max-width: calc(var(--maxw) + var(--gap)*2); margin: 0 auto; padding: 24px var(--gap); display: grid; grid-template-columns: repeat(6,1fr); gap: 16px; align-items: center; justify-items: center; }
.footer-bar__sealrow img { height: 48px; width: auto; opacity: .92; transition: opacity .2s; }
.footer-bar__sealrow a:hover img { opacity: 1; }
.age-flag { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 8px; border: 3px solid var(--cerise); color: var(--cerise); font-weight: 700; font-size: 15px; font-family: var(--display); }
.footer-bar__base { border-top: 1px solid var(--hairline); }
.footer-bar__fine { max-width: calc(var(--maxw) + var(--gap)*2); margin: 0 auto; padding: 22px var(--gap); font-size: 12.5px; line-height: 1.7; color: var(--mute); }
.footer-bar__fine p { margin: 0 0 8px; }

@media (max-width: 1160px) {
  .hambtn { display: flex; order: 3; }
  .header-bar__cta { order: 2; margin-left: auto; }
  .brandtag { margin-right: 0; }
  .navbar { display: none; position: absolute; left: 0; right: 0; top: 72px; padding: 12px var(--gap) 20px; background: var(--surface); border-bottom: 1px solid var(--hairline); }
  .menuflag:checked ~ .navbar { display: block; }
  .menuflag:checked ~ .hambtn span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .menuflag:checked ~ .hambtn span:nth-child(2) { opacity: 0; }
  .menuflag:checked ~ .hambtn span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
  .navbar__list { flex-direction: column; gap: 4px; }
  .navbar__list .cue { padding: 12px 10px; font-size: 15px; border-radius: 8px; }
  .navbar__list .cue::after { display: none; }
  .navbar__list .cue:hover { background: var(--panel2); }
  .navbar__cta { display: flex; gap: 10px; margin-top: 14px; }
  .navbar__cta > * { flex: 1; }
  .sayings__grid { grid-template-columns: repeat(2,1fr); }
  .footer-bar__top { flex-direction: column; gap: 30px; }
  .decks__grid { grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 900px) {
  .footer-bar__sealrow { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 767px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  .readcol p, .readcol li, .lede__text { font-size: 16px; }
  th, td { padding: 10px 9px; font-size: 13px; }
  .keycard td:first-child { width: 40%; }
  .keycard__cap { font-size: 18px; min-height: 54px; }
  .decks__tabs { grid-template-columns: repeat(2,1fr); gap: 8px; }
  .decks__tab { height: 44px; font-size: 14px; }
  .decks__grid { grid-template-columns: repeat(2,1fr); gap: 16px 12px; }
  .wager__grid { grid-template-columns: 1fr; }
  .sayings__bar { flex-direction: column; align-items: flex-start; }
  .sayings__btn { width: 100%; }
  .sayings__grid { grid-template-columns: 1fr; }
  .zone, .decks, .sayings { margin-bottom: 36px; }
}
@media (max-width: 480px) {
  .header-bar__in { gap: 6px; padding: 0 12px; }
  .header-bar__cta { gap: 5px; }
  .enter, .join { height: 34px; padding: 0 8px; font-size: 11.5px; }
  .brandtag img { height: 32px; }
  .hambtn { width: 36px; padding: 8px; }
  .decks__grid { grid-template-columns: repeat(2,1fr); }
  .footer-bar__sealrow { grid-template-columns: repeat(2,1fr); }
  .handheld { flex-direction: column; }
  .handheld-btn { width: 100%; }
}
@media (max-width: 360px) {
  .header-bar__cta { display: none; }
  .brandtag img { height: 32px; }
}