/* Snail Race: extra styles on top of the shared game stylesheet (/game/style.css) */

/* target chips for the rules and the TV legend */
.hole {
  display: inline-grid; place-items: center; border-radius: 50%; margin-right: .45em;
  font: 400 .9em/1 var(--display); color: #fff; border: 2px solid var(--text);
  box-shadow: inset 0 0 0 .32em rgba(10, 10, 31, .85);
}
.hole.h10 { width: 1.8em; height: 1.8em; background: var(--pink); color: #ffd0e6; }
.hole.h5 { width: 2.3em; height: 2.3em; background: var(--yellow); color: #fff2b8; }
.hole.h2 { width: 2.8em; height: 2.8em; background: var(--blue); color: #c9ecff; }
.rules { align-items: center; }

/* ---------------------------------------------------- phones */
.lobby-snail { width: 150px; animation: crawl 2.2s ease-in-out infinite; }
.lobby-snail svg { width: 100%; height: auto; display: block; }
@keyframes crawl { 50% { transform: translateX(10px) scaleX(1.04); } }
body.winner .lobby-snail { animation: hop .6s ease-in-out infinite alternate; }
@keyframes hop { to { transform: translateY(-14px) rotate(-6deg); } }

.mini-track {
  position: relative; width: 100%; max-width: 160px; height: 22px; margin-top: 4px;
  border-radius: 99px; background: rgba(251, 246, 238, .14);
}
.mini-track::after { content: ""; position: absolute; right: 3px; top: 3px; bottom: 3px; width: 6px; border-radius: 2px;
  background: repeating-linear-gradient(0deg, #fff 0 4px, #0a0a1f 4px 8px); }
.mini-track i {
  --pct: 0; position: absolute; top: -3px; width: 34px; height: 26px;
  left: calc((100% - 34px) * var(--pct)); transition: left .5s ease;
}
.mini-track i svg { width: 100%; height: 100%; display: block; }
.hud-team { gap: 2px; }

/* ---------------------------------------------------- TV */
.snail-tv .tv-head { grid-template-columns: 1fr auto 1fr; }
.snail-tv .tv-status { display: flex; flex-direction: column; align-items: center; gap: .3vh; }
.snail-tv .tv-status small { font-size: .45em; letter-spacing: .08em; text-transform: none; color: var(--yellow); font-weight: 800; }
.tv-timer-box { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.tv-timer-box small { color: var(--muted); font-weight: 800; font-size: 1.1vw; letter-spacing: .08em; text-transform: uppercase; margin-top: .6vh; }
.snail-tv .tv-timer { font-size: 4.6vw; }
.snail-tv .legend { gap: .8vw; align-items: center; }
.snail-tv .legend .hole { font-size: .8em; }

/* during the race the track gets the whole width (the join address stays at the top) */
.snail-tv.phase-countdown .tv-join, .snail-tv.phase-running .tv-join, .snail-tv.phase-finished .tv-join { display: none; }
.snail-tv.phase-countdown .tv-main, .snail-tv.phase-running .tv-main, .snail-tv.phase-finished .tv-main { grid-column: 1 / -1; }
.snail-tv.phase-lobby .tv-status small { display: none; }

.race-main { position: relative; }
.race { position: absolute; inset: 0; overflow: hidden; }
.more-below {
  position: absolute; left: 50%; bottom: .4vh; transform: translateX(-50%); margin: 0; z-index: 3;
  background: var(--card); border: 2px solid var(--line); border-radius: 99px; padding: .3vh 1.2vw;
  color: var(--muted); font-weight: 800; font-size: 1.2vw;
}

.lane {
  --pct: 0; --lane-h: 100px; --shell: var(--pink);
  position: absolute; left: 0; right: 0; top: 0;
  display: grid; grid-template-columns: 2.2em minmax(7em, 24%) 1fr 2.6em; align-items: center; gap: 1vw;
  padding: 0 .8vw; box-sizing: border-box;
  font-size: clamp(16px, calc(var(--lane-h) * .36), 60px);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1), height .4s ease, opacity .3s ease;
}
.lane .pos { font-family: var(--display); color: var(--muted); text-align: center; }
.lane .lname { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane .lname.long { font-size: .8em; }
.lane .lname.longer { font-size: .66em; }
.lane .lscore { font-family: var(--display); text-align: right; color: var(--yellow); font-variant-numeric: tabular-nums; }

.lane .track {
  position: relative; height: 82%; align-self: center;
  border-radius: .5em; overflow: visible;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), rgba(251, 246, 238, .12) calc(10% - 2px) 10%),
    linear-gradient(180deg, #1f7a43, #145c31);
  border: 2px solid rgba(251, 246, 238, .35);
  --sw: calc(var(--lane-h) * 1.15);
}
.lane .finish {
  position: absolute; right: 0; top: 0; bottom: 0; width: .55em; border-radius: 0 .4em .4em 0;
  background: conic-gradient(#fff 25%, #0a0a1f 0 50%, #fff 0 75%, #0a0a1f 0) 0 0 / .55em .55em;
}
.lane .slime {
  position: absolute; left: 0; top: 50%; height: 26%; transform: translateY(10%);
  width: calc((100% - var(--sw)) * var(--pct) + var(--sw) * .4);
  border-radius: 99px; background: linear-gradient(90deg, rgba(200, 240, 255, .05), rgba(200, 240, 255, .45));
  transition: width .9s cubic-bezier(.3, .7, .3, 1);
}
.lane .snail {
  position: absolute; bottom: 4%; height: 96%; width: var(--sw);
  left: calc((100% - var(--sw)) * var(--pct));
  transition: left .9s cubic-bezier(.3, .7, .3, 1);
}
.lane .snail svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lane .pop {
  position: absolute; left: calc((100% - var(--sw)) * var(--pct) + var(--sw) * .5); top: -10%;
  font-family: var(--display); color: var(--yellow); text-shadow: 0 2px 0 var(--navy), 0 0 10px rgba(0, 0, 0, .6);
  animation: popUp 1.2s ease-out forwards; pointer-events: none; z-index: 2;
}
@keyframes popUp { from { transform: translateY(20%); opacity: 1; } to { transform: translateY(-70%); opacity: 0; } }
.lane.up .snail { animation: wiggle .5s ease; }
@keyframes wiggle { 30% { transform: scale(1.12) rotate(-4deg); } 60% { transform: scale(.98) rotate(2deg); } }
.lane.enter { animation: laneIn .45s ease; }
@keyframes laneIn { from { opacity: 0; } }
.lane.is-offline { opacity: .5; }
.lane[data-rank="1"] .pos { color: var(--yellow); }
.lane.won .track { border-color: var(--yellow); box-shadow: 0 0 2vh rgba(255, 201, 21, .55); }
.lane.won .lname { color: var(--yellow); }
.snail-tv.phase-lobby .lane .pos { visibility: hidden; }

/* winner card */
.win-banner { position: fixed; inset: 0; z-index: 15; display: grid; place-items: center; background: rgba(10, 10, 31, .72); }
.win-card {
  position: relative; z-index: 1; text-align: center; padding: 4vh 5vw; border-radius: 3vw;
  background: var(--card); border: .6vh solid var(--yellow); box-shadow: 0 0 8vh rgba(255, 201, 21, .45);
  animation: winIn .7s cubic-bezier(.2, 1.4, .4, 1);
}
@keyframes winIn { from { transform: scale(.4) rotate(-6deg); opacity: 0; } }
.win-snail { width: 26vh; margin: 0 auto; animation: hop .5s ease-in-out infinite alternate; }
.win-snail svg { width: 100%; height: auto; display: block; }
.win-kicker { margin: 1vh 0 0; font: 400 3.4vh var(--display); color: var(--yellow); letter-spacing: .06em; }
.win-name { font: 400 clamp(40px, 9vh, 140px)/1 var(--display); color: var(--text); text-shadow: .5vh .5vh 0 var(--pink); margin: 1vh 0; max-width: 80vw; word-break: break-word; }
.win-sub { margin: 0; font-size: 3vh; color: var(--muted); font-weight: 800; }
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute; top: -4vh; width: 1.2vh; height: 2vh; border-radius: 2px;
  animation: fall linear infinite;
}
@keyframes fall { to { transform: translateY(110vh) rotate(var(--spin, 360deg)); } }