:root {
  color-scheme:light;
  --ink:#183b35;
  --muted:#52655e;
  --paper:#f7f4e9;
  --line:#d5dbca;
  --green:#174c3c;
  --lime:#dbed8a;
  --white:#fffef8}

* {
  box-sizing:border-box}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.5;
  background-image:radial-gradient(#183b350c 1px,transparent 1px);
  background-size:18px 18px}
.shell {
  max-width:1050px;
  margin:auto;
  padding:28px 28px 0}
.masthead {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding-bottom:22px}
.masthead a {
  color:var(--ink);
  font-size:14px;
  font-weight:650;
  text-decoration:none}
.masthead a:hover {
  text-decoration:underline}
.ticket,.eyebrow {
  font-size:11px;
  font-weight:800;
  letter-spacing:1.8px}
.ticket {
  border:1px solid var(--ink);
  padding:7px 12px;
  transform:rotate(2deg)}
.intro {
  padding:44px 0 28px}
.eyebrow {
  margin:0 0 12px}
h1 {
  font-size:clamp(52px,9vw,88px);
  line-height:1.05;
  letter-spacing:-5px;
  margin:0 0 18px;
  font-weight:850}
h1 em {
  font-family:Georgia,serif;
  font-weight:400;
  color:#64774a}
h2 {
  font-size:clamp(25px,4vw,34px);
  line-height:1.2;
  letter-spacing:-1px;
  margin:0 0 12px}
h3 {
  line-height:1.25}
.lede {
  font-size:18px;
  margin:0;
  color:var(--muted)}
p {
  margin:0 0 18px}
.panel,.progress-panel {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px}
.badge {
  font-size:11px;
  font-weight:750;
  white-space:nowrap;
  background:var(--lime);
  border-radius:30px;
  padding:7px 12px}
fieldset {
  border:0;
  padding:0;
  margin:22px 0 12px}
.parks {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px}
.park-option {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:16px;
  cursor:pointer;
  transition:background .15s}
.park-option:has(input:checked) {
  background:#f0f5dd;
  border-color:#7e9753}
.park-option input {
  width:20px;
  height:20px;
  accent-color:var(--green);
  flex-shrink:0}
.park-copy {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-weight:650;
  font-size:14px}
.park-copy small {
  font-weight:400;
  color:var(--muted)}
button {
  font:inherit;
  cursor:pointer;
  touch-action:manipulation}
button:disabled {
  opacity:.45;
  cursor:default}
button,a,input {
  outline-offset:5px}
button:focus-visible,a:focus-visible,input:focus-visible {
  outline:3px solid #b07719}
.primary {
  background:var(--green);
  color:white;
  border:1px solid var(--green);
  border-radius:10px;
  padding:13px 23px;
  font-weight:700}
.primary:hover:not(:disabled) {
  background:#29624d}
.text-button {
  border:0;
  background:none;
  color:var(--ink);
  padding:9px 0;
  text-decoration:underline;
  text-underline-offset:4px;
  font-size:14px}
.selection-tools {
  display:flex;
  gap:22px}
.start-row {
  border-top:1px solid var(--line);
  margin-top:18px;
  padding-top:22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px}
.start-row p {
  margin:0;
  font-weight:700}
.fine-print {
  font-size:12px;
  color:var(--muted);
  margin:16px 0 0}
.notice {
  padding:12px 16px;
  background:#fff0cd;
  border:1px solid #e1c782;
  border-radius:10px;
  font-size:14px}
.notice:empty {
  display:none}
.progress-panel {
  padding:20px 24px}
.progress-label {
  display:flex;
  justify-content:space-between;
  gap:15px;
  font-size:14px}
progress {
  display:block;
  width:100%;
  height:10px;
  margin-top:12px;
  border:0;
  border-radius:20px;
  overflow:hidden;
  background:#e5eadb;
  accent-color:var(--green)}
progress::-webkit-progress-bar {
  background:#e5eadb}
progress::-webkit-progress-value {
  background:var(--green);
  border-radius:20px}
progress::-moz-progress-bar {
  background:var(--green)}
.progress-panel .fine-print {
  margin-top:10px}
.round-heading {
  text-align:center;
  margin:32px 0 24px}
.round-heading p:last-child {
  color:var(--muted);
  font-size:14px}
.matchup {
  display:grid;
  grid-template-columns:1fr 1fr;
  position:relative;
  gap:24px}
.ride-card {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:20px;
  padding:30px;
  min-height:320px}
.ride-card:nth-of-type(2) {
  background:#edf2df}
.ride-card .eyebrow {
  font-size:10px;
  color:var(--muted)}
.park-name {
  font-size:13px;
  margin:18px 0 8px;
  color:var(--muted)}
.ride-card h3 {
  font-size:clamp(25px,3vw,34px);
  letter-spacing:-1px;
  margin:0 0 30px;
  overflow-wrap:anywhere}
.ride-card .primary {
  margin-top:auto;
  width:100%}
.skip {
  align-self:center;
  padding:12px 8px 0;
  background:none;
  border:0;
  text-decoration:underline;
  font-size:13px;
  color:var(--muted)}
.versus {
  position:absolute;
  left:50%;
  top:45%;
  transform:translate(-50%,-50%) rotate(-8deg);
  background:var(--lime);
  border:1px solid var(--ink);
  border-radius:50%;
  width:45px;
  height:45px;
  display:grid;
  place-items:center;
  font-weight:850;
  font-size:12px}
.game-toolbar {
  display:flex;
  align-items:center;
  gap:16px;
  margin:22px 0}
.game-toolbar .text-button {
  margin-left:auto}
.game-toolbar span {
  color:var(--muted);
  font-size:12px}
.secondary,.move {
  background:var(--white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:9px 14px;
  color:var(--ink)}
#results {
  margin-top:22px}
#results .primary {
  margin:22px 0 8px}
.ranking-list {
  list-style:none;
  margin:18px 0 0;
  padding:0}
.ranking-list li {
  display:flex;
  align-items:center;
  gap:14px;
  border-top:1px solid var(--line);
  padding:16px 0}
.rank-number {
  font-size:21px;
  font-weight:800;
  min-width:30px;
  color:#6a784e}
.rank-copy {
  flex:1;
  min-width:0}
.rank-copy strong {
  display:block;
  overflow-wrap:anywhere}
.rank-copy small {
  color:var(--muted);
  font-size:12px}
.rank-actions {
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end}
.rank-actions .text-button {
  font-size:12px;
  padding:8px}
.move {
  padding:7px 10px}
.unridden-heading {
  margin:30px 0 8px}
footer {
  font-size:12px;
  text-align:center;
  color:var(--muted);
  padding:30px 0}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0}
[hidden] {
  display:none!important}

@media(max-width:620px) {
  .shell {
  padding:20px 16px 0}
.ticket {
  display:none}
.intro {
  padding:30px 0 24px}
h1 {
  letter-spacing:-3px}
.panel {
  padding:22px 18px}
.parks {
  grid-template-columns:1fr}
.section-heading {
  align-items:flex-start}
.section-heading .badge {
  font-size:9px}
.matchup {
  gap:12px}
.ride-card {
  padding:18px 14px;
  min-height:325px}
.ride-card h3 {
  font-size:24px}
.ride-card .eyebrow {
  font-size:9px;
  letter-spacing:1px}
.ride-card .primary {
  padding:12px 8px;
  font-size:14px}
.park-name {
  font-size:12px}
.versus {
  width:32px;
  height:32px;
  font-size:10px}
.game-toolbar {
  flex-wrap:wrap;
  gap:10px}
.game-toolbar .text-button {
  font-size:12px}
.ranking-list li {
  flex-wrap:wrap}
.rank-actions {
  width:100%;
  justify-content:flex-end}
.start-row {
  align-items:flex-start;
  flex-direction:column}
.start-row .primary {
  width:100%}
.lede {
  font-size:16px}
}


/* Keep the ride choices close to the top once a game starts. */
.playing .intro { padding: 24px 0 18px; }
.playing .intro h1 { font-size: 48px; letter-spacing: -2px; margin: 0; }
.playing .intro .eyebrow, .playing .intro .lede { display: none; }
@media (max-width: 620px) {
  .playing .intro { padding: 16px 0; }
  .playing .intro h1 { font-size: 40px; }
  .playing .notice { font-size: 12px; padding: 8px 12px; }
  .playing .round-heading { margin: 20px 0 16px; }
  .playing .progress-panel { padding: 16px; }
}

.tie-choice { text-align: center; margin: 20px 0; }
.tie-choice .secondary { padding: 13px 20px; border-color: var(--green); font-weight: 700; }
.tie-choice .fine-print { margin-top: 8px; }
.tie-label { display: block; color: var(--muted); font-size: 11px; font-weight: 600; }