@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap");
:root {
  color-scheme: dark;
  --bg: #0b0d19;
  --panel: #131626;
  --line: #272a3d;
  --muted: #9da0b6;
  --pink: #e08bfa;
  --purple: #a471f7;
  --green: #66e3ad;
  --red: #ff758d;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: radial-gradient(ellipse at 70% 15%, #28173d55, transparent 48%), var(--bg);
  color: #f7f5ff;
  font:
    16px "DM Sans",
    sans-serif;
}
button,
a,
select {
  -webkit-tap-highlight-color: transparent;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
select {
  font: inherit;
}
button,
a,
select {
  touch-action: manipulation;
}
button {
  cursor: pointer;
}
button:disabled {
  cursor: default;
}
button:focus-visible,
a:focus-visible,
select:focus-visible {
  outline: 3px solid var(--pink);
  outline-offset: 5px;
}
header {
  height: 92px;
  max-width: 1280px;
  margin: auto;
  padding: 0 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 55px;
}
.brand {
  font:
    800 25px "Barlow Condensed",
    sans-serif;
  white-space: nowrap;
}
.brand span {
  color: var(--pink);
}
.brand b {
  display: inline-flex;
  background: var(--pink);
  color: #12121c;
  border-radius: 5px;
  margin-left: 10px;
  width: 26px;
  height: 26px;
  align-items: center;
  justify-content: center;
}
nav {
  display: flex;
  gap: 28px;
  font-size: 14px;
}
nav a {
  color: #b1b1c4;
}
nav a:hover {
  color: white;
}
.navtag {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 1.8px;
  color: #777a93;
}
main {
  max-width: 1150px;
  min-height: calc(100vh - 184px);
  margin: auto;
  padding: 50px 30px 60px;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 2.4px;
  font-weight: 800;
  color: var(--pink);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h1 {
  font:
    900 clamp(58px, 7vw, 94px) / 0.96 "Barlow Condensed",
    sans-serif;
  letter-spacing: -1px;
  margin: 18px 0;
}
h1 em {
  font-style: normal;
  color: var(--pink);
}
p {
  color: var(--muted);
  line-height: 1.7;
}
.primary {
  border: 0;
  border-radius: 9px;
  background: linear-gradient(105deg, #d494f8, #ac80f9);
  color: #191022;
  padding: 17px 24px;
  font-weight: 800;
  display: inline-flex;
  justify-content: space-between;
  gap: 60px;
  align-items: center;
}
.primary:hover {
  filter: brightness(1.1);
  transform: translateY(-1px);
}
.primary span {
  font-size: 24px;
}
.home-top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 65px;
  align-items: center;
  margin-bottom: 48px;
}
.intro {
  padding: 25px 0;
}
.intro p {
  font-size: 18px;
  margin-bottom: 28px;
}
.demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position: relative;
  transform: rotate(-2deg);
}
.demo-card {
  background: linear-gradient(160deg, #28203e, #141725);
  border: 1px solid #564067;
  border-radius: 16px;
  overflow: hidden;
  padding: 22px 14px 15px;
  text-align: center;
  min-height: 260px;
}
.demo-card:nth-child(2) {
  transform: translateY(24px);
  background: linear-gradient(160deg, #1c2846, #141725);
  border-color: #354469;
}
.demo-card .initial {
  height: 116px;
  font: 900 78px "Barlow Condensed";
  color: #b092d8;
  display: grid;
  place-items: center;
}
.demo-card h3 {
  font: 800 28px "Barlow Condensed";
  margin: 0;
}
.demo-card p {
  font-size: 12px;
  margin: 8px 0;
}
.mystery {
  font: 700 38px "Barlow Condensed";
  color: var(--pink);
}
.vs {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #e09afa;
  color: #21132e;
  border: 7px solid var(--bg);
  border-radius: 50%;
  width: 57px;
  height: 57px;
  display: grid;
  place-items: center;
  font: 800 20px "Barlow Condensed";
  z-index: 2;
}
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 16px;
}
.section-title h2 {
  font: 700 22px "Barlow Condensed";
  letter-spacing: 1px;
  margin: 0;
}
.section-title span {
  font-size: 12px;
  color: var(--muted);
}
.daily-banner {
  background: linear-gradient(105deg, #251d38, #18182c);
  border: 1px solid #493353;
  border-radius: 13px;
  padding: 25px;
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 32px;
}
.calendar {
  width: 56px;
  height: 56px;
  background: #b27be61c;
  border: 1px solid #65417e;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--pink);
  font-size: 26px;
}
.daily-copy {
  flex: 1;
}
.daily-copy h3 {
  font-size: 19px;
  margin: 0 0 5px;
}
.daily-copy p {
  font-size: 14px;
  margin: 0;
}
.outline {
  padding: 13px 20px;
  border: 1px solid #6f507e;
  border-radius: 8px;
  background: transparent;
  color: #eedaff;
  font-weight: 700;
}
.metrics {
  display: flex;
  gap: 28px;
  margin-right: 16px;
}
.metrics strong {
  display: block;
  font-size: 22px;
}
.metrics span {
  font-size: 11px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 1px;
}
.sports {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.sport {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--panel);
  padding: 20px;
  text-align: left;
  color: var(--muted);
}
.sport.live {
  border-color: #73518c;
  color: white;
  background: #211a32;
}
.sport-icon {
  font-size: 26px;
  display: block;
  margin-bottom: 20px;
}
.sport strong {
  display: block;
  font-size: 16px;
}
.sport small {
  font-size: 11px;
  display: block;
  margin-top: 7px;
  color: #7d8098;
}
.sport.live small {
  color: var(--pink);
}
footer {
  max-width: 1190px;
  margin: auto;
  border-top: 1px solid var(--line);
  padding: 27px 20px;
  display: flex;
  justify-content: space-between;
  color: #85889f;
  font-size: 12px;
}
footer small {
  margin-left: 20px;
  font-size: 12px;
}
.page-head {
  text-align: center;
  margin: 14px 0 34px;
}
.page-head h1 {
  font-size: 62px;
}
.setup {
  max-width: 770px;
  margin: auto;
}
.label {
  display: block;
  color: #adadc3;
  font-size: 12px;
  letter-spacing: 1.8px;
  font-weight: 700;
  margin: 28px 0 13px;
}
.modes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.mode {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 20px 10px;
  color: white;
  text-align: center;
}
.mode b {
  font: 700 23px "Barlow Condensed";
  display: block;
}
.mode small {
  color: var(--muted);
  font-size: 12px;
  display: block;
  margin-top: 7px;
}
.selected {
  border-color: var(--pink) !important;
  background: #352444 !important;
  color: #f0c6ff !important;
}
.segments {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.segments button {
  flex: 1;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #b5b6cb;
  background: var(--panel);
  font-size: 14px;
}
.setup .primary {
  width: 100%;
  margin-top: 30px;
}
.hint {
  font-size: 13px;
  margin: 12px 0;
  color: var(--muted);
}
.scorebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 860px;
  margin: auto;
  color: var(--muted);
  font-size: 14px;
}
.scorebar strong {
  color: white;
}
.progress {
  height: 4px;
  background: #242338;
  max-width: 860px;
  margin: 18px auto 32px;
  border-radius: 5px;
  overflow: hidden;
}
.progress div {
  height: 100%;
  background: var(--pink);
  transition: width 0.2s;
}
.question {
  text-align: center;
  margin-bottom: 27px;
}
.question h1 {
  font-size: 30px;
  letter-spacing: 1px;
  margin: 12px;
}
.question h2 {
  font: 800 48px "Barlow Condensed";
  margin: 0;
}
.question p {
  font-size: 12px;
  margin: 10px 0;
}
.arena {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  position: relative;
  max-width: 860px;
  margin: auto;
}
.athlete {
  border: 1px solid #3b304b;
  border-radius: 16px;
  min-height: 320px;
  background: radial-gradient(ellipse at 50% 15%, #46305477, transparent 70%), #151725;
  color: white;
  padding: 30px 20px;
  transition:
    transform 0.12s,
    border-color 0.15s;
  position: relative;
  overflow: hidden;
}
.athlete:nth-child(2) {
  background: radial-gradient(ellipse at 50% 15%, #293a6377, transparent 70%), #151725;
  border-color: #323c56;
}
.athlete:hover:not(:disabled) {
  border-color: var(--pink);
  transform: translateY(-3px);
}
.athlete:active {
  transform: scale(0.98);
}
.monogram {
  width: 112px;
  height: 112px;
  border: 1px solid #84629655;
  background: #ffffff04;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  font: 800 52px "Barlow Condensed";
  color: #c6a8e8;
}
.athlete h3 {
  font: 800 34px "Barlow Condensed";
  margin: 0 0 8px;
}
.athlete small {
  color: var(--muted);
  font-size: 13px;
}
.value {
  font: 800 44px "Barlow Condensed";
  margin-top: 18px;
  color: var(--pink);
  animation: appear 0.18s;
}
.winner {
  border: 2px solid var(--green) !important;
  box-shadow: 0 0 30px #66e3ad13;
}
.winner .value {
  color: var(--green);
}
.wrong {
  border: 2px solid var(--red) !important;
  animation: shake 0.25s;
}
.feedback {
  height: 85px;
  text-align: center;
  padding: 20px;
  color: var(--muted);
  font-size: 14px;
}
.feedback b {
  display: block;
  font-size: 19px;
  margin-bottom: 8px;
}
.feedback button {
  background: none;
  border: 0;
  color: #aaa7bd;
  font-size: 12px;
}
.good {
  color: var(--green);
}
.bad {
  color: var(--red);
}
.summary {
  max-width: 580px;
  margin: auto;
  text-align: center;
  background: var(--panel);
  border: 1px solid #47344f;
  border-radius: 18px;
  padding: 35px;
}
.bigscore {
  font: 800 100px "Barlow Condensed";
  color: var(--pink);
  margin: 12px 0;
}
.summary .primary {
  margin: 20px 5px;
}
.results {
  font-size: 25px;
  letter-spacing: 5px;
  line-height: 1.7;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 30px;
}
.stat-card {
  padding: 25px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.stat-card strong {
  display: block;
  font: 800 46px "Barlow Condensed";
  color: var(--pink);
  margin-bottom: 8px;
}
.stat-card span {
  font-size: 13px;
  color: var(--muted);
}
.breakdowns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
.stat-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.article {
  max-width: 720px;
  margin: auto;
}
.article h2 {
  margin-top: 32px;
}
.article a {
  color: var(--pink);
  text-decoration: underline;
}
.back {
  background: none;
  border: 0;
  color: var(--muted);
  padding: 8px;
}
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: #3b2a4b;
  padding: 15px 22px;
  border-radius: 8px;
  z-index: 10;
  max-width: 90vw;
}
.share-text {
  width: 100%;
  min-height: 150px;
  background: var(--bg);
  color: white;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 15px;
}
.streak {
  color: var(--pink) !important;
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}
@media (max-width: 700px) {
  header {
    height: 75px;
    padding: 0 20px;
    gap: 20px;
    justify-content: space-between;
  }
  .brand {
    font-size: 21px;
  }
  .brand b {
    display: none;
  }
  nav {
    gap: 16px;
    font-size: 12px;
  }
  .navtag {
    display: none;
  }
  main {
    padding: 26px 18px 40px;
  }
  .home-top {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 40px;
  }
  .intro {
    text-align: center;
    padding: 12px 0;
  }
  .intro h1 {
    font-size: 70px;
  }
  .intro p {
    font-size: 16px;
    margin-bottom: 22px;
  }
  .demo {
    max-width: 400px;
    width: 100%;
    margin: 0 auto 15px;
  }
  .demo-card {
    min-height: 190px;
    padding: 12px;
  }
  .demo-card .initial {
    height: 78px;
    font-size: 60px;
  }
  .demo-card h3 {
    font-size: 24px;
  }
  .daily-banner {
    flex-wrap: wrap;
    padding: 19px;
    gap: 15px;
  }
  .daily-copy h3 {
    font-size: 17px;
  }
  .metrics {
    order: 3;
    flex: 1;
    gap: 25px;
  }
  .daily-banner .outline {
    order: 4;
  }
  .sports {
    grid-template-columns: repeat(2, 1fr);
  }
  .sport {
    padding: 16px;
  }
  .sport:last-child {
    grid-column: span 2;
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .sport:last-child .sport-icon {
    margin: 0;
  }
  .sport-icon {
    margin-bottom: 10px;
  }
  .modes {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-head h1 {
    font-size: 48px;
  }
  .arena {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .athlete {
    min-height: 155px;
    display: grid;
    grid-template-columns: 80px 1fr;
    align-content: center;
    column-gap: 18px;
    padding: 20px;
    text-align: left;
  }
  .monogram {
    grid-row: span 3;
    width: 76px;
    height: 76px;
    font-size: 35px;
    margin: 0;
  }
  .athlete h3 {
    font-size: 29px;
  }
  .athlete .value {
    margin-top: 7px;
    font-size: 33px;
  }
  .arena .vs {
    top: 50%;
    width: 41px;
    height: 41px;
    border-width: 5px;
    font-size: 15px;
  }
  .question h2 {
    font-size: 39px;
  }
  .question {
    margin-bottom: 20px;
  }
  .progress {
    margin-bottom: 22px;
  }
  .scorebar {
    font-size: 12px;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-card {
    padding: 19px;
  }
  .breakdowns {
    grid-template-columns: 1fr;
  }
  .summary {
    padding: 25px 16px;
  }
  footer {
    font-size: 11px;
    gap: 10px;
  }
  footer small {
    display: none;
  }
  .segments button {
    padding: 12px 10px;
  }
  .feedback {
    padding: 14px;
  }
  .results {
    letter-spacing: 2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}
.hero-headshot {
  width: 100%;
  height: 165px;
  object-fit: contain;
  display: block;
  margin: 5px 0 0;
}
.monogram img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@media (max-width: 700px) {
  .hero-headshot {
    height: 115px;
  }
}
@media (max-width: 700px) {
  .scorebar {
    display: grid;
    grid-template-columns: auto 1fr;
    row-gap: 12px;
  }
  .scorebar > span:nth-child(2) {
    text-align: right;
  }
  .scorebar > span:nth-child(4) {
    text-align: right;
  }
  .scorebar .back {
    text-align: left;
    padding-left: 0;
  }
  .scorebar strong {
    white-space: nowrap;
  }
}