.top, main { max-width: 42rem; }
main { gap: 24px; padding: 8px 16px 48px; }
.panel { gap: 14px; padding: 22px 26px; border-radius: 20px; }
.hero { align-items: center; text-align: center; gap: 18px; padding: 40px 20px 32px; }
.hero h1 { margin: 0; font-size: clamp(38px, 9vw, 56px); }
.hero p { margin: 0; font-size: 18px; }

/* track: bigger cells, idle hops, plus one red racer looping GO → ★ */
.hero .track { position: relative; width: 100%; max-width: 28rem; margin-top: 12px; }
.hero .track .pawns { min-height: 64px; }
.hero .track .pawns .pawn { width: 26px; height: 26px; animation: idle 1.4s ease-in-out infinite; }
.hero .track > div:nth-child(3) .pawn { animation-delay: .3s; }
.hero .track > div:nth-child(5) .pawn:nth-child(2) { animation-delay: .6s; }
.hero .track .cell { height: 32px; border-radius: 8px; font-size: 13px; }
.racer { position: absolute; bottom: 34px; left: calc(100% / 12); width: 26px; height: 26px; margin-left: -13px; animation: race 7s linear infinite; }
.racer .pawn { width: 26px; height: 26px; }
.crown { position: absolute; right: calc(100% / 12); bottom: 64px; margin-right: -12px; font-size: 22px; opacity: 0; animation: crown 7s linear infinite; }
@keyframes idle { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }
/* 5 hops (12% each), squash on landing, rest at the goal */
@keyframes race {
  0%   { left: calc(100% * 1 / 12); transform: none; }
  6%   { transform: translateY(-26px); }
  12%  { left: calc(100% * 3 / 12); transform: scale(1.2, .8); }
  14%  { transform: none; }
  18%  { transform: translateY(-26px); }
  24%  { left: calc(100% * 5 / 12); transform: scale(1.2, .8); }
  26%  { transform: none; }
  30%  { transform: translateY(-26px); }
  36%  { left: calc(100% * 7 / 12); transform: scale(1.2, .8); }
  38%  { transform: none; }
  42%  { transform: translateY(-26px); }
  48%  { left: calc(100% * 9 / 12); transform: scale(1.2, .8); }
  50%  { transform: none; }
  54%  { transform: translateY(-26px); }
  60%  { left: calc(100% * 11 / 12); transform: scale(1.2, .8); }
  62%, 92% { left: calc(100% * 11 / 12); transform: none; }
  93%, 100% { left: calc(100% * 1 / 12); transform: none; }
}
@keyframes crown { 0%, 60% { opacity: 0; transform: translateY(8px) scale(.4); } 64% { opacity: 1; transform: translateY(-4px) scale(1.2); } 68%, 88% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }

/* sky drifts sideways, one dot period per loop */
body { animation: drift 3s linear infinite; }
@keyframes drift { to { background-position: 22px 0; } }

.steps { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 10px; }

/* hover: things lift like pieces picked off the board */
@media (hover: hover) {
  .btn, .me, .lang, .ticker .set > span { transition: transform .15s ease, box-shadow .15s ease; }
  .btn:hover, .me:hover { transform: translateY(-3px); box-shadow: 0 8px 0 var(--sky-dark); }
  .more:hover { box-shadow: 0 7px 0 var(--sun-dark); }
  .btn:active, .me:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--sky-dark); }
  .more:active { box-shadow: 0 2px 0 var(--sun-dark); }
  .lang:hover { transform: rotate(-6deg) scale(1.08); }
  .ticker:hover > div { animation-play-state: paused; }
  .ticker .set > span:hover { transform: translateY(-6px) rotate(-3deg); }
  .hero .track:hover .pawns .pawn { animation-duration: .5s; }
  .logo { display: inline-block; transition: transform .2s ease; }
  .logo:hover { transform: rotate(-4deg) scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  *, body { animation: none !important; }
  * { transition: none !important; }
  .racer { display: none; }
}

.nav { display: flex; align-items: center; gap: 10px; }
.lang { padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .5); font-weight: 800; font-size: 14px; text-decoration: none; }

/* game names scrolling like board tiles; 4 copies of the set, slide by half for a seamless loop */
.ticker { overflow: hidden; margin: 0 -16px; padding: 4px 0 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.ticker > div { display: flex; width: max-content; animation: ticker 24s linear infinite; }
.ticker .set { display: contents; }
.ticker .set > span { display: flex; flex-direction: column; align-items: center; margin-right: 14px; padding: 10px 22px; border-radius: 14px; font-family: "Lilita One", system-ui, sans-serif; font-size: 22px; font-weight: 400; color: var(--ink); }
.ticker small { font-family: "Nunito", system-ui, sans-serif; font-size: 12px; font-weight: 800; opacity: .7; }
.ticker .coral { background: var(--coral); box-shadow: 0 5px 0 var(--coral-dark); color: #fff; }
.ticker .grass { background: var(--grass); box-shadow: 0 5px 0 var(--grass-dark); }
.ticker .sun { background: var(--sun); box-shadow: 0 5px 0 var(--sun-dark); }
.ticker .sky { background: var(--sky-dark); box-shadow: 0 5px 0 var(--ink); }
@keyframes ticker { to { transform: translateX(-50%); } }
.more { align-self: center; min-height: 38px; margin-top: -8px; padding: 0 16px; background: var(--sun); box-shadow: 0 4px 0 var(--sun-dark); font-size: 17px; }