:root{
  --ink:#151429;
  --cream:#fff1c9;
  --paper:#fff9e8;
  --pink:#f5a4cd;
  --yellow:#ffd958;
  --orange:#ff7957;
  --purple:#7667db;
  --blue:#83cef2;
  --green:#8fd5a8;
  --red:#e84747;
  --night:#16142a;
  --line:#17162d;
  --soft-line:rgba(23,22,45,.18);
  --shadow:8px 8px 0 var(--line);
  --mono:"Courier New",Courier,monospace;
  --display:Georgia,"Times New Roman",serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  background:var(--cream);
  font-family:var(--mono);
  line-height:1.45;
  overflow-x:hidden;
}
button,input,textarea{font:inherit}
button{color:inherit}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin-top:0}
.hidden{display:none!important}

.retro-header{
  position:sticky;
  top:0;
  z-index:100;
  min-height:64px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:10px 24px;
  background:var(--night);
  color:#fffaf0;
  border-bottom:4px solid var(--line);
}
.wordmark{
  font-family:var(--display);
  font-size:1.65rem;
  font-weight:900;
  letter-spacing:-.04em;
}
.top-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.window-tab{
  border:2px solid #fffaf0;
  background:transparent;
  color:#fffaf0;
  padding:8px 10px;
  cursor:pointer;
  font-size:.72rem;
  font-weight:900;
  box-shadow:3px 3px 0 #f0608e;
}
.window-tab:hover{background:#fffaf0;color:var(--night)}

.splash{
  min-height:72vh;
  display:grid;
  place-items:center;
  position:relative;
  border-bottom:4px solid var(--line);
  overflow:hidden;
}
.color-cream{background:var(--cream)}
.color-pink{background:var(--pink)}
.color-yellow{background:var(--yellow)}
.color-orange{background:var(--orange)}
.color-purple{background:var(--purple)}
.color-blue{background:var(--blue)}
.color-night{background:var(--night);color:#fffaf0}
.splash:after{
  content:"";
  position:absolute;
  inset:auto -5% -35px -5%;
  height:70px;
  background:radial-gradient(circle at 35px 0,var(--cream) 34px,transparent 35px) 0 0/70px 70px repeat-x;
}
.splash-inner{
  width:min(1000px,calc(100% - 36px));
  text-align:center;
  position:relative;
  z-index:2;
}
.tiny-stamp{
  display:inline-block;
  border:2px solid var(--line);
  padding:7px 10px;
  background:#fff;
  font-size:.72rem;
  font-weight:900;
  transform:rotate(-1deg);
}
.splash h1{
  margin:24px 0 4px;
  font-family:var(--display);
  font-size:clamp(5rem,18vw,13rem);
  line-height:.72;
  letter-spacing:-.09em;
  text-shadow:7px 7px 0 #f28cc3;
}
.splash-note{
  font-size:clamp(1rem,2vw,1.35rem);
  font-weight:900;
  margin-bottom:34px;
}
.start-arrow{
  display:inline-block;
  padding:14px 18px;
  background:var(--yellow);
  border:3px solid var(--line);
  box-shadow:6px 6px 0 var(--line);
  font-weight:900;
}
.start-arrow:hover{transform:translate(2px,2px);box-shadow:4px 4px 0 var(--line)}
.pixel-cloud{
  position:absolute;
  font-size:7rem;
  color:#fff;
  text-shadow:3px 3px 0 var(--line);
  opacity:.85;
}
.cloud-one{left:3%;top:18%;transform:rotate(-7deg)}
.cloud-two{right:5%;bottom:20%;transform:rotate(6deg)}

.path-section{
  position:relative;
  border-bottom:4px solid var(--line);
  padding:90px 0 110px;
}
.path-shell,.game-shell{
  width:min(1060px,calc(100% - 36px));
  margin:0 auto;
}
.path-marker{
  display:inline-block;
  margin-bottom:28px;
  padding:8px 12px;
  border:3px solid var(--line);
  background:#fff8e5;
  box-shadow:4px 4px 0 var(--line);
  font-size:.76rem;
  font-weight:900;
  transform:rotate(-1deg);
}
.section-intro{
  max-width:820px;
  margin-bottom:42px;
}
.section-intro h2,.game-marquee h2,.gateway-inner h2{
  font-family:var(--display);
  font-size:clamp(2.6rem,7vw,5.6rem);
  line-height:.9;
  letter-spacing:-.06em;
  margin-bottom:14px;
}
.eyebrow{
  margin:0 0 8px;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.section-copy{max-width:650px;font-weight:700}
.light-text{color:#fffaf0}
.status-chip{
  display:inline-block;
  margin-top:10px;
  padding:5px 9px;
  border:2px solid var(--line);
  background:var(--green);
  font-size:.72rem;
  font-weight:900;
}

.checkin-road{display:grid;gap:22px}
.road-card{
  position:relative;
  width:min(760px,92%);
  padding:28px 30px 28px 86px;
  border:4px solid var(--line);
  background:var(--paper);
  box-shadow:var(--shadow);
}
.road-card:nth-of-type(even){margin-left:auto}
.road-number{
  position:absolute;
  left:20px;
  top:22px;
  width:46px;height:46px;
  display:grid;place-items:center;
  border:3px solid var(--line);
  border-radius:50%;
  background:var(--yellow);
  font-weight:900;
}
.card-kicker{
  margin-bottom:12px;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.12em;
}
.giant-number{
  display:block;
  font-family:var(--display);
  font-size:clamp(5rem,12vw,8rem);
  line-height:.75;
}
.date-display{
  display:block;
  font-family:var(--display);
  font-size:clamp(2rem,5vw,4rem);
  line-height:1;
}
.card-caption{margin:12px 0 0;font-size:.83rem;font-weight:700}
.doodle{
  position:absolute;
  right:18px;
  top:12px;
  font-size:3rem;
  transform:rotate(12deg);
}
.weather-line{
  display:flex;
  gap:20px;
  align-items:center;
  font-weight:900;
}
.weather-temp{
  font-family:var(--display);
  font-size:clamp(4rem,10vw,7rem);
  line-height:.8;
}
blockquote{
  margin:0 0 12px;
  font-family:var(--display);
  font-size:clamp(1.5rem,3vw,2.2rem);
  line-height:1.15;
  font-weight:800;
}
.verse-ref{font-weight:900;margin:0}
.goal-copy{
  margin:0;
  font-family:var(--display);
  font-size:clamp(1.8rem,4vw,3.2rem);
  line-height:1;
  font-weight:900;
}
.road-connector{
  width:64%;
  margin:0 auto;
  overflow:hidden;
  white-space:nowrap;
  font-size:1.2rem;
  letter-spacing:.3em;
  transform:rotate(-2deg);
}
.tilt-left{transform:rotate(-.8deg)}
.tilt-right{transform:rotate(.8deg)}

.news-board{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.news-window{
  border:4px solid var(--line);
  background:var(--paper);
  box-shadow:var(--shadow);
  min-height:340px;
}
.world-window{transform:rotate(-1.1deg)}
.sports-window{transform:translateY(24px) rotate(.8deg)}
.science-window{transform:rotate(-.6deg)}
.window-bar{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 10px;
  border-bottom:4px solid var(--line);
  background:#f15d36;
  font-size:.72rem;
  font-weight:900;
}
.dark-bar{background:var(--night);color:#fffaf0}
.news-body{padding:24px}
.news-icon{font-size:3rem}
.news-label{margin:22px 0 10px;font-weight:900;letter-spacing:.13em;font-size:.72rem}
.news-body h3{
  font-family:var(--display);
  font-size:1.8rem;
  line-height:1;
  margin-bottom:14px;
}
.news-body p:last-child{font-size:.88rem;font-weight:700}

.vote-machine{
  border:5px solid var(--line);
  background:#fff1dc;
  box-shadow:10px 10px 0 var(--line);
}
.vote-machine-top{
  padding:10px 14px;
  border-bottom:5px solid var(--line);
  background:var(--night);
  color:#fff;
  font-weight:900;
  font-size:.76rem;
}
.hot-take-copy{
  padding:44px 34px 26px;
  margin:0;
  text-align:center;
  font-family:var(--display);
  font-size:clamp(2.3rem,6vw,5rem);
  line-height:.92;
  font-weight:900;
}
.big-vote-actions{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:18px;
  padding:28px 34px 38px;
}
.arcade-button{
  min-height:100px;
  border:4px solid var(--line);
  cursor:pointer;
  font-size:clamp(1.1rem,3vw,2rem);
  font-weight:900;
  box-shadow:7px 7px 0 var(--line);
}
.arcade-button:hover{transform:translate(2px,2px);box-shadow:5px 5px 0 var(--line)}
.arcade-button.agree{background:var(--green)}
.arcade-button.disagree{background:#ff9b9b}
.versus-badge{
  width:54px;height:54px;
  display:grid;place-items:center;
  border:3px solid var(--line);
  border-radius:50%;
  background:var(--yellow);
  font-weight:900;
}
.poll-results,.choice-results{
  padding:0 34px 38px;
}
.poll-row+.poll-row,.choice-result-row+.choice-result-row{margin-top:18px}
.poll-label{
  display:flex;
  justify-content:space-between;
  gap:18px;
  margin-bottom:7px;
  font-weight:900;
}
.bar{
  height:18px;
  border:3px solid var(--line);
  background:#fff;
  overflow:hidden;
}
.bar span{
  display:block;
  height:100%;
  background:var(--green);
  transition:width .35s ease;
}
.small-note{font-size:.78rem;font-weight:700;margin-bottom:0}

.choice-cabinet{
  border:5px solid var(--line);
  background:#f9e6ff;
  box-shadow:10px 10px 0 #302c68;
  padding:30px;
}
.choice-actions{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
  align-items:stretch;
}
.choice-button{
  min-height:260px;
  border:4px solid var(--line);
  padding:22px;
  cursor:pointer;
  box-shadow:7px 7px 0 var(--line);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.choice-button:hover{transform:translate(2px,2px);box-shadow:5px 5px 0 var(--line)}
.choice-a{background:#ffe56f}
.choice-b{background:#ff9fcf}
.choice-kicker{
  margin-bottom:14px;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.14em;
}
.choice-button strong{
  font-family:var(--display);
  font-size:clamp(2.4rem,6vw,5rem);
  line-height:.9;
}
.choice-or{
  display:grid;
  place-items:center;
  font-weight:900;
  color:#fff;
}

.discussion-terminal{
  border:5px solid var(--line);
  background:#fff4d7;
  box-shadow:10px 10px 0 var(--line);
}
.discussion-question-wrap{padding:30px 30px 16px}
.discussion-question-label{font-size:.72rem;font-weight:900;letter-spacing:.12em}
.discussion-question{
  margin-bottom:0;
  font-family:var(--display);
  font-size:clamp(2rem,5vw,4rem);
  line-height:.95;
  font-weight:900;
}
.discussion-form{padding:22px 30px 28px}
.discussion-fields{
  display:grid;
  grid-template-columns:minmax(160px,.32fr) minmax(0,1fr);
  gap:16px;
}
label{font-size:.72rem;font-weight:900;letter-spacing:.07em}
input,textarea{
  width:100%;
  margin-top:7px;
  padding:13px 14px;
  border:3px solid var(--line);
  border-radius:0;
  background:#fff;
  color:var(--ink);
  outline:none;
}
textarea{min-height:120px;resize:vertical}
input:focus,textarea:focus{box-shadow:4px 4px 0 var(--purple)}
.discussion-submit-row{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:16px;
}
.retro-submit,.enter-discussion,.next-category,.answer-enter{
  border:3px solid var(--line);
  background:var(--green);
  padding:12px 15px;
  font-weight:900;
  cursor:pointer;
  box-shadow:4px 4px 0 var(--line);
}
.retro-submit:hover,.enter-discussion:hover,.next-category:hover,.answer-enter:hover{
  transform:translate(2px,2px);
  box-shadow:2px 2px 0 var(--line);
}
.enter-discussion{
  margin:0 30px 28px;
  background:var(--yellow);
  font-size:1rem;
}
.discussion-panel{padding:0 30px 30px}
.discussion-divider{height:4px;background:var(--line);margin:0 0 22px}
.discussion-feed{display:grid;gap:14px}
.discussion-post{
  border:3px solid var(--line);
  background:#fff;
  padding:16px;
}
.discussion-post.reply-post{
  margin-left:36px;
  background:#e8f6ff;
}
.discussion-post-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin-bottom:8px;
}
.discussion-name{font-weight:900}
.discussion-time{font-size:.7rem}
.discussion-text{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
.discussion-actions{display:flex;gap:14px;align-items:center;margin-top:12px;flex-wrap:wrap}
.text-button{
  border:0;
  background:transparent;
  padding:0;
  text-decoration:underline;
  font-weight:900;
  cursor:pointer;
}
.vote-mini{
  border:2px solid var(--line);
  background:#fff4d7;
  padding:5px 8px;
  font-size:.7rem;
  font-weight:900;
  opacity:.65;
  cursor:not-allowed;
}
.replies{display:grid;gap:8px;margin-top:10px}
.reply-form{
  margin:10px 0 0 36px;
  padding:14px;
  border:3px solid var(--line);
  background:#fff;
}
.reply-grid{
  display:grid;
  grid-template-columns:minmax(130px,.3fr) minmax(0,1fr);
  gap:10px;
}
.reply-form textarea{min-height:76px}
.reply-form-actions{display:flex;gap:12px;align-items:center;margin-top:10px}
.empty-discussion{text-align:center;padding:24px;font-weight:800}

.game-gateway{
  padding:100px 20px;
  text-align:center;
  border-bottom:4px solid var(--line);
}
.gateway-inner{width:min(900px,100%);margin:auto}
.gateway-inner>p{font-weight:900;letter-spacing:.14em}
.gateway-arrow{font-size:2rem;font-weight:900;letter-spacing:.25em}

.game-section{padding-top:70px}
.game-marquee{
  text-align:center;
  padding:28px 20px 38px;
}
.game-marquee>span{
  display:inline-block;
  margin-bottom:18px;
  padding:7px 10px;
  border:2px solid #fffaf0;
  color:var(--yellow);
  font-weight:900;
  font-size:.72rem;
  letter-spacing:.14em;
}
.game-marquee h2{
  color:#fff;
  text-shadow:6px 6px 0 #f04e82;
  margin-bottom:20px;
}
.game-marquee p{font-weight:800;color:#d9d4ff}
.game-scoreboard{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:4px solid #fffaf0;
  background:#0d0c1b;
  margin-bottom:20px;
}
.game-scoreboard>div{
  padding:14px;
  text-align:center;
  border-right:3px solid #fffaf0;
}
.game-scoreboard>div:last-child{border-right:0}
.game-scoreboard span{display:block;font-size:.7rem;color:#aaa3dc;font-weight:900}
.game-scoreboard strong{display:block;font-size:1.2rem;color:#fff}
.game-cabinet{
  border:5px solid #fffaf0;
  background:#222044;
  box-shadow:10px 10px 0 #f04e82;
  padding:34px;
}
.game-status{text-align:center;margin-bottom:26px}
.category{
  display:inline-block;
  padding:6px 9px;
  border:2px solid #fff;
  background:#f04e82;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.13em;
}
#topicLabel{
  margin:16px 0 8px;
  font-family:var(--display);
  font-size:clamp(3rem,8vw,6.5rem);
  line-height:.82;
  color:#fff;
}
.answer-progress{margin:0;color:#ffd958;font-weight:900}
.submitted-stack{
  min-height:92px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center;
  margin-bottom:20px;
}
.submitted-chip{
  border:2px solid #fffaf0;
  background:#343064;
  color:#fff;
  padding:7px 10px;
  font-size:.8rem;
  animation:popIn .18s ease-out;
}
@keyframes popIn{from{transform:scale(.82);opacity:0}to{transform:scale(1);opacity:1}}
.single-answer-form{max-width:760px;margin:0 auto}
.single-answer-label{display:block;color:#aaa3dc;margin-bottom:8px}
.single-answer-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.single-answer-row input{
  margin:0;
  min-height:64px;
  border-color:#fffaf0;
  background:#fff8e7;
  font-size:1.15rem;
}
.answer-enter{
  background:var(--yellow);
  min-width:120px;
}
.round-results{
  margin-top:30px;
  padding-top:28px;
  border-top:4px dashed #68628c;
}
.round-summary-title{
  text-align:center;
  font-family:var(--display);
  font-size:2.2rem;
  margin-bottom:20px;
}
.result-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.result-panel{
  border:3px solid #fffaf0;
  padding:16px;
  background:#14132a;
}
.result-panel h4{margin:0 0 12px;color:var(--yellow)}
.result-list{display:grid;gap:7px}
.result-item{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:7px 0;
  border-bottom:1px dashed #5e5880;
}
.result-item:last-child{border-bottom:0}
.result-score{font-weight:900;color:#8fd5a8}
.top-answer-list{margin:0;padding-left:24px}
.top-answer-list li{padding:5px 0}
.round-score-line{
  margin:18px 0 0;
  text-align:center;
  font-weight:900;
  color:#fff;
}
.next-category{
  display:block;
  margin:24px auto 0;
  background:var(--pink);
  font-size:1rem;
}
.final-score-panel{
  margin-top:40px;
  border:5px solid #fffaf0;
  background:#fff1c9;
  color:var(--ink);
  padding:34px;
  box-shadow:10px 10px 0 #f04e82;
  text-align:center;
}
.final-score-panel h3{
  font-family:var(--display);
  font-size:clamp(3.5rem,9vw,7rem);
  line-height:.85;
  margin:12px 0 28px;
}
.average-board{
  display:grid;
  grid-template-columns:1fr 1fr;
  border:3px solid var(--line);
}
.average-board>div{padding:18px}
.average-board>div+div{border-left:3px solid var(--line)}
.average-board span{display:block;font-size:.7rem;font-weight:900}
.average-board strong{font-size:1.2rem}

.retro-footer{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:24px;
  background:var(--night);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
}

.modal-backdrop{
  position:fixed;
  inset:0;
  z-index:200;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(8,7,19,.72);
}
.retro-modal{
  width:min(680px,100%);
  border:5px solid var(--line);
  background:#fff4d7;
  box-shadow:12px 12px 0 #f04e82;
}
.window-close{
  border:2px solid #fff;
  background:transparent;
  color:#fff;
  font-weight:900;
  cursor:pointer;
  line-height:1;
}
.modal-copy,.feedback-form{padding:26px}
.modal-copy p:last-child{margin-bottom:0}
.feedback-form textarea{min-height:180px;margin-bottom:14px}

@media(max-width:800px){
  .retro-header{position:relative;align-items:flex-start;flex-direction:column}
  .top-tabs{width:100%;justify-content:flex-start}
  .splash{min-height:64vh}
  .pixel-cloud{font-size:4rem}
  .news-board{grid-template-columns:1fr}
  .sports-window{transform:rotate(.6deg)}
  .road-card{width:96%;padding-left:72px}
  .big-vote-actions,.choice-actions{grid-template-columns:1fr}
  .versus-badge,.choice-or{margin:auto}
  .discussion-fields,.reply-grid,.result-columns{grid-template-columns:1fr}
  .discussion-post.reply-post,.reply-form{margin-left:16px}
  .game-scoreboard{grid-template-columns:1fr}
  .game-scoreboard>div{border-right:0;border-bottom:3px solid #fffaf0}
  .game-scoreboard>div:last-child{border-bottom:0}
  .average-board{grid-template-columns:1fr}
  .average-board>div+div{border-left:0;border-top:3px solid var(--line)}
}
@media(max-width:520px){
  .retro-header{padding:10px 12px}
  .window-tab{font-size:.62rem;padding:7px}
  .path-section{padding:70px 0 85px}
  .road-card{width:100%;padding:24px 18px 24px 66px}
  .doodle{font-size:2rem}
  .hot-take-copy{padding-inline:18px}
  .big-vote-actions,.poll-results,.choice-cabinet,.discussion-form,.discussion-question-wrap,.discussion-panel{padding-left:18px;padding-right:18px}
  .enter-discussion{margin-left:18px;margin-right:18px}
  .choice-button{min-height:180px}
  .game-cabinet{padding:20px 14px}
  .single-answer-row{grid-template-columns:1fr}
  .answer-enter{width:100%}
  .retro-footer{flex-direction:column}
}