@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,600;0,700;1,700&family=Russo+One&display=swap');

/* Adapted from the game's character editor and HUD. The hero keeps its typography. */
:root {
  --game-ink: #0e0f12;
  --game-panel: #16181d;
  --game-steel: #2b2f38;
  --game-line: #3c414d;
  --game-text: #f4f2ec;
  --game-muted: #9aa0ab;
  --yellow: #ffd23f;
  --game-cyan: #2fd3ff;
  --game-display: 'Russo One', 'Arial Black', Impact, sans-serif;
  --game-ui: 'Chakra Petch', 'Arial Narrow', 'Segoe UI', sans-serif;
}

.button.primary, .nav-join {
  border: 3px solid var(--game-ink);
  border-radius: 0;
  background: var(--yellow);
  color: var(--game-ink);
  font: 400 17px/1.2 var(--game-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  box-shadow: 4px 4px 0 var(--game-ink);
  clip-path: none;
  transition: transform .06s ease, filter .08s ease;
  justify-content: center;
}
.hero-actions .primary { min-width: 255px; padding: 19px 25px 18px; }
.nav-join { padding: 12px 18px 11px; font-size: 12px; }
.button.primary:hover, .nav-join:hover {
  background: var(--yellow);
  color: var(--game-ink);
  filter: brightness(1.1);
  transform: none;
}
.button.primary:active, .nav-join:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--game-ink);
}
.hero-rides { gap: 6px; }
.hero-rides button {
  padding: 12px 16px 11px;
  border: 3px solid var(--game-ink);
  border-radius: 0;
  background: var(--game-steel);
  color: var(--game-muted);
  font: 400 13px/1.2 var(--game-display);
  text-transform: uppercase;
  white-space: nowrap;
  letter-spacing: .02em;
  box-shadow: 3px 3px 0 var(--game-ink);
  transition: background .08s ease, color .08s ease, transform .06s ease;
}
.hero-rides button:hover { border-color: var(--game-ink); color: var(--game-text); }
.hero-rides button[aria-selected=true] {
  background: var(--yellow);
  border-color: var(--game-ink);
  color: var(--game-ink);
}
.hero-rides button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--game-ink); }
.build-label {
  display: inline-block;
  background: var(--yellow);
  border: none;
  color: var(--game-ink);
  font: 400 10px/1.2 var(--game-display);
  letter-spacing: .12em;
  padding: 6px 10px 5px;
  transform: skewX(-14deg);
}
.build-label span { display: none; }
.little-label { font-family: var(--game-ui); font-weight: 700; font-style: italic; letter-spacing: .16em; }
.browser-note, .backdrop-control, .header-note, .quick-info, footer { font-family: var(--game-ui); }
.backdrop-control { font-weight: 700; font-style: italic; color: var(--game-muted); }
.backdrop-control button, .dialog-close {
  width: 40px;
  height: 40px;
  background: var(--game-steel);
  color: var(--game-text);
  border: 3px solid var(--game-ink);
  box-shadow: 3px 3px 0 var(--game-ink);
  border-radius: 0;
  font: 400 20px/1 var(--game-display);
  transition: transform .06s ease, background .08s ease;
}
.backdrop-control button:hover, .dialog-close:hover { background: var(--game-line); }
.backdrop-control button:active, .dialog-close:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--game-ink); }
dialog {
  background: linear-gradient(180deg, #23262e 0, rgba(18,20,24,.97) 140px);
  border: none;
  border-top: 6px solid var(--yellow);
  color: var(--game-text);
  font-family: var(--game-ui);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%);
}
dialog .eyebrow {
  display: block;
  width: fit-content;
  font: 400 9px/1.2 var(--game-display);
  letter-spacing: .12em;
  color: var(--game-ink);
  background: var(--yellow);
  padding: 5px 8px;
  transform: skewX(-14deg);
}
dialog > img { display: block; }
.footer-links { display: flex; align-items: center; gap: 28px; }
.hero-top { justify-content: flex-end; }
.header-actions { display: flex; align-items: center; gap: 24px; }
.header-actions .youtube-link { color: var(--game-text); font: 700 12px var(--game-ui); letter-spacing: .06em; }
.header-actions .youtube-link svg { width: 24px; height: 24px; color: var(--yellow); }
.header-actions .youtube-link:hover { color: var(--yellow); }
@media(max-width:600px) {
  .header-actions { gap: 13px; }
  .header-actions .youtube-link { font-size: 9px; gap: 5px; letter-spacing: .02em; }
  .header-actions .youtube-link svg { width: 20px; height: 20px; }
  .header .brand { width: 110px; }
  .header-actions .nav-join { padding-left: 9px; padding-right: 9px; font-size: 9px; }
}
.youtube-link { display: inline-flex; align-items: center; gap: 8px; }
.youtube-link:hover { color: var(--yellow); }
@media(max-width:600px) { .footer-links { gap: 18px; } }
dialog h2 {
  font: 400 32px/1.1 var(--game-display);
  letter-spacing: .02em;
  transform: skewX(-8deg);
  transform-origin: left;
  text-shadow: 2px 2px 0 var(--game-ink),-2px -2px 0 var(--game-ink),4px 4px 0 #0008;
}
dialog .primary { font-size: 15px; }
.dialog-close { right: 16px; top: 16px; width: 32px; height: 32px; font-size: 18px; }
button:focus-visible { outline: 3px solid var(--yellow); outline-offset: 4px; }
@media(max-width:600px) {
  .nav-join { font-size: 10px; padding: 11px 12px 10px; }
  .hero-actions .primary { min-width: 228px; font-size: 15px; padding: 17px 20px 16px; }
  .hero-rides { gap: 5px; }
  .hero-rides button { font-size: 10px; padding: 11px 9px 10px; }
  .backdrop-control button { width: 35px; height: 35px; font-size: 17px; }
  .build-label { font-size: 7px; padding: 6px 7px 5px; letter-spacing: .06em; }
  .little-label { font-size: 8px; }
  .hero-bottom { gap: 10px; align-items: center; }
}
@media(prefers-reduced-motion:reduce) { button { transition: none!important; } }

.hero-actions { gap: 12px; }
.button.guest {
  background: var(--game-cyan);
  color: var(--game-ink);
  border: 3px solid var(--game-ink);
  border-radius: 0;
  box-shadow: 4px 4px 0 var(--game-ink);
  font: 400 17px/1.2 var(--game-display);
  text-transform: uppercase;
  letter-spacing: .03em;
  transition: transform .06s ease, filter .08s ease;
  justify-content: center;
}
.hero-actions .guest { padding: 19px 25px 18px; }
.button.guest:hover { filter: brightness(1.1); }
.button.guest:active { transform: translate(3px,3px); box-shadow: 1px 1px 0 var(--game-ink); }
@media(max-width:600px) {
  .header { display: grid; grid-template-columns: 1fr auto; gap: 13px; height: auto; padding-top: 15px; padding-bottom: 15px; }
  .header-actions { display: contents; }
  .hero-actions { gap: 9px; }
  .hero-actions .primary, .hero-actions .guest { min-width: 0; font-size: 12px; padding: 16px 11px 15px; flex: 1; }
}