:root {
  color-scheme: light;
  --comic-ink: #101b2c;
  --comic-yellow: #ffce83;
  --brand-background: var(--brand-paper);
}

body {
  color: var(--brand-ink);
  background: radial-gradient(circle, #17223520 1px, transparent 1.2px) 0 0 / 7px 7px, var(--brand-paper);
}

.court, .court-scene { background: transparent; }
.court-light, .court-glow { opacity: .18; }
.site-header, .site-nav {
  padding: 20px;
  margin-top: 18px;
  background: var(--brand-navy);
  color: var(--brand-paper);
  border: 4px solid var(--comic-ink);
  box-shadow: 6px 6px 0 var(--comic-ink);
}
.site-header .brand, .site-nav .mark { rotate: -3deg; }
.site-header nav a, .site-nav .nav-links a { border-color: var(--brand-paper); }
.site-header nav a:hover, .site-nav .nav-links a:hover { color: var(--comic-yellow); border-color: var(--comic-yellow); }
.site-footer { color: var(--brand-ink); border-top: 3px solid var(--comic-ink); }
.site-footer .brand { color: var(--brand-ink); }
.site-footer .brand span, .site-footer .brand b { color: #a7332d; }
.section-heading > p, .player-note { color: #514739; }
.section-heading h2 span { color: #a7332d; }
.eyebrow { color: #94342d; }
.button, .btn { border: 3px solid var(--comic-ink); box-shadow: 4px 4px 0 var(--comic-ink); }
.button.paper { border: 3px solid var(--comic-ink); }
.text-link, .episode-link { display: inline-block; }
:is(button, .button, .btn, .text-link, .episode-link, .site-header a, .site-nav a, summary):focus-visible {
  outline: 3px solid var(--brand-coral);
  outline-offset: 5px;
}

.hero.comic-panel {
  color: var(--brand-paper);
  background-color: var(--brand-navy);
  border-width: 5px;
  box-shadow: 9px 9px 0 var(--comic-ink);
  margin-bottom: 45px;
}
.hero.comic-panel h1 { font-size: clamp(46px, 5.7vw, 76px); line-height: 1.04; }
.hero.comic-panel h1 span { color: var(--comic-yellow); }
.hero.comic-panel .lead { font-size: 18px; line-height: 1.65; }
.hero.comic-panel .eyebrow { font-size: 13px; rotate: -2deg; }
.hero.comic-panel .text-link { color: var(--brand-paper); }
.hero.comic-panel .actions a[href="#videolar"] {
  animation: episode-callout 1.4s ease-in-out infinite;
  transform-origin: 50% 70%;
}
.hero.comic-panel .actions a[href="#videolar"]:is(:hover, :focus-visible) {
  animation-play-state: paused;
  transform: none;
}
.subscriber-counter { margin-top: 0; }
.journey-strip { font-size: 16px; }
.channel-story, .community-panel { color: var(--brand-paper); }
.video-card, .topic-card, .games .game-card, .subscriber-counter {
  border: 4px solid var(--comic-ink);
  box-shadow: 7px 7px 0 var(--comic-ink);
}
.video-copy p, .topic-card p, .game-card p { font-size: 16px; line-height: 1.6; }
.episode-tag, .episode-link, .card-top { font-size: 12px; }
.games .game-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.games .game-card { padding: 18px; position: relative; transform: none; transform-origin: 50% 80%; animation: game-jiggle 6s ease-in-out infinite; }
.games .game-card:nth-child(2) { animation-delay: 1.5s; }
.games .game-card:nth-child(3) { animation-delay: 3s; }
.games .game-card:nth-child(4) { animation-delay: 4.5s; }
.games .game-card:is(:hover, :focus-visible) { animation-play-state: paused; transform: none; }
.games .game-card h3 { font-size: clamp(25px, 2.5vw, 34px); line-height: 1.07; }
.games .game-card .game-art { height: 174px; }
.games .game-card:nth-child(even) { background-color: var(--comic-yellow); }
.games .card-top > span:first-child { rotate: -2deg; }
.games .card-action { border-top: 3px solid var(--comic-ink); font-size: 19px; }

.puzzle-intro, .draft-hero, .intro {
  background: radial-gradient(circle, #f3ecd912 1px, transparent 1.3px) 0 0 / 7px 7px, var(--brand-navy);
  color: var(--brand-paper);
  border: 5px solid var(--comic-ink);
  padding: 30px;
  box-shadow: 8px 8px 0 var(--comic-ink);
  margin-bottom: 32px;
}
.puzzle-intro h1, .draft-hero h1 { color: var(--brand-paper); text-shadow: 4px 4px 0 #000; }
.puzzle-intro h1 span, .draft-hero h1 span { color: var(--comic-yellow); }
.puzzle-intro .eyebrow, .draft-hero .issue-tag { rotate: -3deg; }
.puzzle-intro .lead, .draft-hero .lead { color: var(--brand-paper); }
.puzzle-how, .draft-how { color: var(--brand-paper); background: var(--brand-navy); border: 4px solid var(--comic-ink); box-shadow: 5px 5px 0 var(--comic-ink); }
.puzzle-channel { border-color: var(--comic-ink); }
.puzzle-channel p, .draft-footer-actions p, .draft-credit { color: #514739; }
.draft-credit { border-color: var(--comic-ink); }
.draft-credit strong { color: #94342d; }
.draft-status, .storage-note { color: #94342d; }
.draft-machine, .season-result, .puzzle-result { color: var(--brand-paper); background-color: var(--brand-navy); }
.squad-panel { background-color: var(--comic-yellow); }
.player-card { position: relative; border-top: 8px solid var(--brand-coral); }
.player-card h3 { padding-top: 5px; }
.player-poster, .record-poster { animation: poster-bob 5s ease-in-out infinite; }
.guess-controls input { color-scheme: light; }
.intro h1 { color: var(--brand-paper); }
.intro h1 span { color: var(--comic-yellow); }
.intro .intro-bottom p { color: var(--brand-paper); }
.finish-strip, .finish-strip p { color: var(--brand-ink); }
.share-dock { border-top: 4px solid var(--comic-ink); }
.share-sheet, dialog { color-scheme: light; }
.app > .hero { background: var(--brand-navy); color: var(--brand-paper); border: 5px solid var(--comic-ink); padding: 30px; box-shadow: 8px 8px 0 var(--comic-ink); }
.app > .hero h1 { font-size: clamp(40px, 8vw, 105px); }
.app > .hero .eyebrow { display: inline-block; color: var(--comic-yellow); border-bottom: 3px solid var(--comic-yellow); padding-bottom: 7px; }
.app .hero-grid > * { min-width: 0; }
.app .youtube-section { color: var(--brand-paper); }
.app .hud { color: var(--brand-paper); }
.app .alpha-title, .app .bottom-link { color: #514739; }
.app .stage, .app .results-card { color: var(--brand-paper); background-color: var(--brand-navy); }

@media (hover: hover) {
  :is(button, .button, .btn, .text-link, .episode-link, .site-header a, .site-nav a, .video-launch, summary):not(:disabled):not([aria-disabled="true"]):hover {
    animation: button-hover .65s ease-in-out;
  }
  .hero.comic-panel .actions a[href="#videolar"]:hover {
    animation-name: episode-callout;
    animation-duration: 1.4s;
    animation-play-state: paused;
  }
}
@keyframes button-hover {
  0%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: 0 -3px; rotate: -1.5deg; }
  70% { translate: 0 -2px; rotate: 1.5deg; }
}
@keyframes episode-callout {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 0 -7px; rotate: 1deg; }
}
@keyframes game-jiggle {
  0%, 9%, 100% { rotate: 0deg; translate: 0 0; }
  2% { rotate: -2deg; translate: 0 -4px; }
  4% { rotate: 2deg; translate: 0 -6px; }
  6% { rotate: -1.5deg; translate: 0 -3px; }
  8% { rotate: 1deg; translate: 0 -1px; }
}
@keyframes poster-bob { 50% { translate: 0 -6px; } }

@media (max-width: 1050px) {
  .games .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .games .game-card .game-art { height: 210px; }
}
@media (max-width: 650px) {
  .site-header, .site-nav { padding: 16px 12px; margin-top: 12px; }
  .hero.comic-panel h1 { font-size: clamp(40px, 10.8vw, 64px); overflow-wrap: normal; }
  .hero.comic-panel .lead { font-size: 17px; }
  .hero.comic-panel .eyebrow { font-size: 11px; }
  .puzzle-intro, .draft-hero, .intro { padding: 22px 16px; }
  .app > .hero { padding: 22px 16px; }
  .app > .hero h1 { font-size: clamp(36px, 11.5vw, 65px); }
  .puzzle-intro { flex-wrap: wrap; }
  .puzzle-intro h1 { font-size: clamp(45px, 11vw, 68px); }
  .puzzle-intro .lead { max-width: none; }
  .player-poster { margin: 16px auto 8px; max-width: 72%; }
  .draft-hero h1 { font-size: clamp(38px, 9vw, 58px); }
  .record-poster > strong { font-size: clamp(65px, 18vw, 100px); }
  .games .game-grid { grid-template-columns: 1fr; }
  .games .game-card { padding: 23px; }
  .games .game-card h3 { font-size: 38px; }
  .games .game-card .game-art { height: 218px; }
  .journey-strip { font-size: 13px; }
}