/* Party screens: the next-game card, the standings race, the podium, the menu's game picker. */

.card-screen { background: rgba(25, 20, 39, .92); }
.card-screen .menu-inner { align-items: center; text-align: center; }
.card-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(36px, 12vw, 58px);
  line-height: .95;
  color: var(--sand);
  text-shadow: 0 5px 0 #5b2a20;
  text-wrap: balance;
  animation: landed .45s ease-out;
}
.card-rules { margin: 0; max-width: 32ch; font-size: 17px; line-height: 1.4; text-wrap: pretty; }
.card-keys {
  margin: 0;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.card-view { margin: 0; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--hazard); }
.card-timer { width: min(320px, 100%); display: grid; gap: 8px; }
.card-bar { height: 8px; border-radius: 4px; background: var(--hazard); transform-origin: left center; }
.card-left { font-family: var(--display); font-size: 15px; color: var(--sand); }

.score-screen { background: rgba(25, 20, 39, .9); }
.race { position: relative; list-style: none; margin: 4px 0 0; padding: 0; }
.race li {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--row, 34px) - 6px);
  display: grid;
  grid-template-columns: 30px minmax(60px, 7.5em) 1fr 44px 40px;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  transition: transform .7s cubic-bezier(.3, 1.3, .5, 1);
}
.race li.me .who { color: var(--hazard); font-weight: 700; }
.race .rank { font-family: var(--display); font-size: 13px; color: var(--muted); text-align: right; }
.race li.top .rank { color: var(--sand); }
.race .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.race .track { height: 100%; border-radius: 6px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.race .fill { display: block; height: 100%; border-radius: 6px; transition: width 1.9s cubic-bezier(.2, .8, .3, 1); }
.race li.me .track { box-shadow: 0 0 0 2px var(--hazard) inset; }
.race .pts { font-family: var(--display); font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.race .gain { font-size: 12px; font-weight: 700; color: #7ee36b; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.race .gain.on { opacity: 1; transform: none; }
.race li.flat { position: static; height: 26px; grid-template-columns: 30px 1fr 44px; transition: none; }
.final .race { display: grid; gap: 2px; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; margin-top: 8px; }
.podium .step { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.podium strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.podium small { font-size: 12px; color: var(--muted); }
.podium .bean { width: 34px; height: 44px; border-radius: 17px; box-shadow: inset -6px -6px 0 rgba(0, 0, 0, .18); animation: hop .9s ease-in-out infinite alternate; }
.podium .s1 .bean { animation-duration: .55s; }
.podium .block {
  width: 100%;
  display: grid;
  place-items: center;
  border-radius: 10px 10px 0 0;
  font-family: var(--display);
  font-size: 26px;
  color: var(--ink);
  background: var(--sand);
  box-shadow: inset 0 -6px 0 var(--sand-deep);
}
.podium .s1 .block { height: 120px; background: var(--hazard); box-shadow: inset 0 -6px 0 var(--hazard-deep); }
.podium .s2 .block { height: 84px; }
.podium .s3 .block { height: 60px; background: #d79a6a; box-shadow: inset 0 -6px 0 #9a6640; }
@keyframes hop { from { transform: translateY(0); } to { transform: translateY(-10px); } }

.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation: fall linear forwards;
}
@keyframes fall { to { transform: translate(var(--drift, 0), 110vh) rotate(720deg); } }

/* Menu: the minigame picker and the first-person preference. */
.pick { display: grid; gap: 8px; }
.pick > span, .pref > span { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pick-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pick-list .chip-btn {
  padding: 8px 12px;
  border: 2px solid var(--stone-hi);
  border-radius: 999px;
  background: var(--panel);
  color: var(--text);
  font: 500 13px var(--body);
  cursor: pointer;
}
.pick-list .chip-btn:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }
@media (hover: hover) { .pick-list .chip-btn:hover { border-color: var(--hazard); } }
.pref { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pref small { display: block; margin-top: 2px; font-size: 12px; letter-spacing: normal; text-transform: none; color: var(--muted); font-weight: 400; }
.switch {
  flex: none;
  position: relative;
  width: 54px;
  height: 32px;
  border: 0;
  border-radius: 16px;
  background: var(--stone-hi);
  cursor: pointer;
  transition: background .2s;
}
.switch::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--text);
  transition: transform .2s;
}
.switch[aria-checked="true"] { background: var(--hazard); }
.switch[aria-checked="true"]::after { transform: translateX(22px); background: var(--ink); }
.switch:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .card-title, .podium .bean { animation: none; }
  .race li, .race .fill { transition: none; }
}