/* A playable token journey: route first, checkpoint second, bonks always nearby. */
body { background: #171e30; }
.site-shell { width: min(1280px, calc(100% - 48px)); }
header { min-height: 72px; }
.brand-name { font-size: 18px; letter-spacing: -.04em; }
.status { color: var(--muted); font-size: 11px; }
.status::before { display: none; }
.token-banner { display: flex; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted); }
.token-banner code { color: var(--cream); overflow-wrap: anywhere; min-width: 0; }
.text-button { background: transparent; border: 0; padding: 6px 0; font: inherit; font-size: 11px; color: var(--blue); text-decoration: underline; text-underline-offset: 4px; }
.token-banner button { margin-left: auto; flex-shrink: 0; }
main { padding: 26px 0 36px; }
.intro { display: block; max-width: none; margin-bottom: 24px; }
.eyebrow { display: none; }
h1 { max-width: none; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.1; letter-spacing: -.07em; text-transform: none; text-shadow: 4px 4px 0 #303b55; }
.lead { font-size: 12px; line-height: 1.55; margin: 12px 0 0; max-width: none; color: var(--cream); }
.lead span { color: var(--muted); font-size: 11px; }
.game-layout { grid-template-columns: minmax(0, 1fr) 320px; gap: 0; border: 1px solid var(--line); background: #202a40; }
.stage, .controls, .orbit-card { border: 0; box-shadow: none; }
.stage { grid-column: 1; grid-row: 1; min-height: 390px; background-color: #1d273d; background-size: 40px 40px; }
.stage::before { display: none; }
.arena-copy { font-size: 13px; color: var(--cream); }
.arena-copy span { display: block; color: var(--muted); font-size: 10px; margin-top: 4px; }
.mars { top: 24px; right: 24px; color: var(--yellow); }
.trajectory-plot { inset: 165px 104px 98px 144px; --moon-x: 100%; --moon-y: 0%; }
.moon-label { transform: translate(-50%, 48px); }
.origin-label { transform: translate(-50%, 46px); }
.chart-route { stroke: #62738f; }
.chart-line { stroke: var(--yellow); }
.moon { background: #efe4bc; box-shadow: 0 0 70px #f5c14a33; }
.moon::before, .moon::after { background: #beb68e; }
.moon::before { box-shadow: 25px 27px 0 #beb68e, 12px 43px 0 #beb68e; }
.moon::after { box-shadow: -25px 35px 0 #beb68e; }
.stage[data-target="mars"] .moon { background: #e98164; }
.stage[data-target="jupiter"] .moon, .stage[data-target="saturn"] .moon { background: repeating-linear-gradient(#daab73 0 12px, #b67861 12px 20px); }
.stage[data-target="uranus"] .moon, .stage[data-target="neptune"] .moon { background: #75bcdf; }
.stage[data-target="pluto"] .moon, .stage[data-target="titan"] .moon { background: #c4aaba; }
.stage[data-target="black-hole"] .moon { background: #060914; border-color: var(--yellow); }
.stage[data-target="black-hole"] .moon::before, .stage[data-target="black-hole"] .moon::after { display: none; }
.counter-number { font-size: 24px; }
.flight-status { bottom: 20px; }
.checkpoint-card { grid-column: 2; grid-row: 1 / 3; margin: 0; padding: 26px 24px; border-left: 1px solid var(--line); background: #252f44; }
.checkpoint-card .panel-title { font-size: 11px; text-transform: none; letter-spacing: 0; margin: 0 0 12px; }
.checkpoint-card .checkpoint-name { font-size: 36px; letter-spacing: -.06em; margin: 0; }
.checkpoint-rule { margin: 6px 0 30px; color: var(--yellow); font-size: 12px; }
.price-top { display: block; }
.price-top h2 { font-size: 11px; text-transform: none; letter-spacing: 0; color: var(--muted); margin-bottom: 8px; }
.price-change { color: var(--muted); font-size: 10px; display: block; line-height: 1.5; }
.price { font-size: 38px; margin-top: 10px; color: var(--cream); }
.progress-track { margin-top: 20px; height: 10px; }
.progress-fill { background: var(--yellow); }
.small-note, .wallet-address, .tip { color: #b3bdcf; }
.contract-line { align-items: start; flex-wrap: wrap; margin-top: 26px; }
.contract-line code { max-width: 100%; white-space: normal; overflow-wrap: anywhere; font-size: 10px; line-height: 1.5; }
.controls { grid-column: 1; grid-row: 2; min-height: 0; padding: 18px 24px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(150px, 1fr) minmax(140px, .8fr); gap: 12px 18px; background: #26324a; }
.controls .panel-title { grid-column: 1 / -1; margin: 0; text-transform: none; letter-spacing: 0; color: var(--cream); font-size: 13px; }
.controls .select-wrap, .controls .kick-btn { margin: 0; }
.controls .item-note { display: none; }
.controls .kick-btn { grid-column: 2; grid-row: 2; font-size: 12px; }
.controls .kick-btn { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 12px; }
.item-preview { width: 64px; height: 64px; flex-shrink: 0; object-fit: contain; image-rendering: pixelated; background: #202a40; }
.controls .select-wrap { align-self: center; }
.controls .tip { grid-column: 1; margin: 0; font-size: 10px; }
.controls .text-button { grid-column: 2; justify-self: end; align-self: start; }
kbd { color: var(--cream); font: inherit; border: 1px solid #758197; padding: 1px 4px; }
.orbit-grid { display: block; margin-top: 24px; }
.orbit-grid > .orbit-card { display: grid; grid-template-columns: 1fr 1.4fr; column-gap: 48px; padding: 24px 0; background: none; }
.orbit-grid h2 { text-transform: none; letter-spacing: -.02em; font-size: 14px; }
.wallet-btn { width: fit-content; padding: 12px 24px; }
.wallet-address { grid-column: 1; max-width: 340px; }
.feed { grid-column: 2; grid-row: 1 / 4; margin: 0; }
.feed-item { background: #202a40; font-size: 11px; }
.feed-live { color: var(--muted); font-size: 9px; }
.trajectory-preview { margin-top: 18px; }
.trajectory-preview .price-form { flex-wrap: wrap; }
.trajectory-preview input { flex-basis: 100%; }
.preview-check { line-height: 1.5; }
.preview-check input { accent-color: var(--yellow); vertical-align: middle; }
.social-row { margin-top: 8px; }
@media (max-width: 960px) {
  .game-layout { grid-template-columns: minmax(0, 1fr) 280px; }
  .checkpoint-card { padding: 24px 18px; }
  .trajectory-plot { left: 120px; right: 66px; }
  .character-wrap { width: 88px; }
  .lead { max-width: none; }
  .arena-copy span { max-width: 160px; }
}
@media (max-width: 720px) {
  .site-shell { width: calc(100% - 28px); }
  header { gap: 14px; min-height: 64px; }
  header .status { display: none; }
  nav { gap: 12px; }
  nav a { font-size: 10px; }
  .brand-name { font-size: 14px; }
  .brand-mark { width: 26px; height: 26px; }
  .token-banner { gap: 8px; flex-wrap: wrap; font-size: 10px; }
  .token-banner code { max-width: 100%; }
  .token-banner button { margin-left: 0; }
  main { padding-top: 24px; }
  .intro { display: block; margin-bottom: 24px; }
  .eyebrow { font-size: 10px; line-height: 1.5; }
  h1 { font-size: 46px; }
  .lead { margin-top: 18px; max-width: none; font-size: 12px; }
  .lead br { display: none; }
  .lead span { margin-top: 6px; }
  .game-layout { display: flex; flex-direction: column; }
  .stage { min-height: 440px; order: 0; }
  .trajectory-plot { inset: 185px 60px 136px 108px; }
  .weapon { width: 80px; height: 80px; }
  .arena-copy { left: 16px; font-size: 11px; }
  .mars { right: 16px; font-size: 9px; }
  .character-wrap { width: 80px; }
  .moon { width: 62px; height: 62px; }
  .flight-status { bottom: 52px; left: 16px; right: 16px; font-size: 9px; }
  .counter { left: 16px; bottom: 18px; }
  .controls { order: 1; padding: 18px 16px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .controls .select-wrap { min-width: 0; }
  .controls .kick-btn { flex-direction: column; gap: 6px; font-size: 10px; }
  .controls select { font-size: 11px; padding-left: 8px; }
  .checkpoint-card { order: 2; border-left: 0; border-top: 1px solid var(--line); }
  .checkpoint-rule { margin-bottom: 20px; }
  .orbit-grid > .orbit-card { display: block; }
  .feed { margin-top: 24px; }
  .origin-label { font-size: 9px; }
  .moon-label { font-size: 10px; }
}