/* Multiplayer page only: lobby list, room lanes, countdown. Loaded after site.css. */
.mp-page .config, .mp-page .lang, .mp-page .restart-row, .mp-page .results, .mp-page .chal { display: none !important; }
body:not(.in-room) .mp-page .test, body.race-done .mp-page .test { display: none !important; }
.mp-page .stage { justify-content: flex-start; padding-top: clamp(10px, 2.5vh, 28px); }
.mp { width: min(1000px, 100%); margin: 0 auto; }
body.in-room .mp { width: 100%; }   /* in a race the lanes are as wide as the words below them */
.mp-lobby[hidden], .mp-room[hidden] { display: none; }
.mp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.mp-sub { margin: 0; color: var(--sub); display: flex; align-items: center; gap: 8px; }
.mp-sub b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.mp-sub .sep { opacity: .5; }
.mp-sub .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--main); animation: mpPulse 2.2s ease-in-out infinite; }
@keyframes mpPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--main) 55%, transparent); } 50% { box-shadow: 0 0 0 7px transparent; } }
.mp-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mp-name input, .mp-panel input[type=text] { background: var(--surface); border: 2px solid transparent; border-radius: 12px; color: var(--text); font: inherit; font-size: var(--ui); padding: 12px 16px; width: 190px; }
.mp-name input:focus, .mp-panel input[type=text]:focus { outline: none; border-color: var(--main); }
.btn.go { background: var(--main); color: var(--main-ink); }
.btn.go:hover, .btn.go:focus-visible { filter: brightness(1.12); }
.btn.mini { padding: 9px 18px; border-radius: 10px; }
.btn:disabled { opacity: .45; cursor: default; }
/* the recent winners: one line, newest first, cut off with a fade if the screen is narrow */
.mp-ticker { display: flex; align-items: center; gap: 8px 22px; margin: 14px 0 0; min-height: 28px; white-space: nowrap; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.mp-wl { color: var(--sub); font-size: calc(var(--ui) * .85); text-transform: uppercase; letter-spacing: .08em; }
.mp-win { display: inline-flex; align-items: center; gap: 8px; color: var(--sub); font-size: calc(var(--ui) * .92); animation: mpWin .6s cubic-bezier(.2, .8, .2, 1) both; }
.mp-win b { color: var(--text); font-weight: 500; }
.mp-win em { font-style: normal; }
.mp-win:nth-child(2) em { color: var(--main); }
.mp-win.no-anim { animation: none; }
@keyframes mpWin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.mp-sec { font-size: calc(var(--ui) * .9); font-weight: 400; color: var(--sub); letter-spacing: .06em; margin: 26px 0 10px; }
.mp-list { list-style: none; margin: 0; padding: 0; }
.mp-list:empty::before { content: attr(data-empty); display: block; color: var(--sub); opacity: .7; padding: 14px 4px; font-size: calc(var(--ui) * .95); }

/* a room row: slides up when it appears, fades and slides sideways, then collapses, when it fills up or starts */
.mp-row { position: relative; display: grid; grid-template-columns: minmax(150px, 1.3fr) minmax(0, 1.5fr) 74px 130px 92px; align-items: center; gap: 16px; background: var(--surface); border-radius: 12px; padding: 0 20px; height: 62px; margin-bottom: 8px; overflow: hidden;
  animation: mpIn .55s cubic-bezier(.2, .8, .2, 1) both;
  transition: opacity .35s ease, transform .5s cubic-bezier(.5, 0, .75, 0), height .4s ease .22s, margin .4s ease .22s, padding .4s ease .22s, background .4s; }
@keyframes mpIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mp-row.leaving { opacity: 0; transform: translateX(22px); margin-bottom: 0; padding-top: 0; padding-bottom: 0; pointer-events: none; animation: none; }
.mp-row.is-full { background: color-mix(in srgb, var(--main) 12%, var(--surface)); }
.mp-main { display: grid; min-width: 0; }
.mp-rt { font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-rm { color: var(--sub); font-size: calc(var(--ui) * .85); }
.mp-who { display: flex; align-items: center; min-width: 0; padding-left: 8px; }
.mp-cnt { color: var(--sub); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 1px; }
.mp-cnt b { color: var(--main); font-weight: 500; font-size: 1.25em; display: inline-block; }
.mp-cnt.bump b { animation: mpBump .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes mpBump { 0% { transform: scale(1); } 40% { transform: scale(1.5); } 100% { transform: scale(1); } }
.mp-time { color: var(--text); font-size: calc(var(--ui) * .92); font-variant-numeric: tabular-nums; }
.mp-live { color: var(--main); font-size: calc(var(--ui) * .85); text-align: center; animation: mpBlink 1.6s ease-in-out infinite; }
@keyframes mpBlink { 50% { opacity: .45; } }
.mp-fill { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--main); transition: width .3s linear; border-radius: 0 3px 0 0; }
.mp-row.is-running { opacity: .85; }
.mp-status { color: var(--sub); min-height: 1.5em; margin: 14px 0 0; text-align: center; }

/* room */
.mp-rhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; }
.mp-rtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.mp-chips { display: inline-flex; flex-wrap: wrap; gap: 6px 8px; }
.mp-chips i { font-style: normal; border: 1px solid color-mix(in srgb, var(--sub) 38%, transparent); border-radius: 99px; padding: 2px 12px; line-height: 1.5; color: var(--sub); font-size: calc(var(--ui) * .82); }
.mp-rtitle b { font-weight: 500; font-size: 1.25em; color: var(--text); }
.mp-rtitle span { color: var(--sub); font-size: calc(var(--ui) * .92); }
.mp-ractions { display: flex; flex-wrap: wrap; gap: 10px; }
.mp-ractions .btn[hidden] { display: none; }
.mp-count { text-align: center; margin: 8px 0 2px; display: grid; justify-items: center; gap: 6px; height: 100px; overflow: hidden; align-content: center; transition: height .4s ease; }
.mp-big { font-size: clamp(40px, 5vw, 64px); line-height: 1; color: var(--main); font-weight: 500; min-height: 1em; font-variant-numeric: tabular-nums; }
.mp-count.counting .mp-big { animation: mpTick 1s ease-out infinite; }
@keyframes mpTick { 0% { transform: scale(1.35); opacity: .2; } 25% { opacity: 1; } 100% { transform: scale(1); } }
.mp-count.go .mp-big { animation: mpGo .9s ease-out both; }
@keyframes mpGo { 0% { transform: scale(.7); opacity: 0; } 30% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } }
.mp-small { color: var(--sub); font-size: var(--ui); }
.mp-bar { width: min(420px, 80%); height: 4px; background: var(--surface); border-radius: 4px; overflow: hidden; }
.mp-bar i { display: block; height: 100%; width: 0; background: var(--main); transition: width .15s linear; }
.mp-count.quiet { height: 30px; }
.mp-count.quiet .mp-big { display: none; }
.mp-count.quiet .mp-bar { display: none; }
.mp-result { margin: 8px auto 0; max-width: 700px; animation: mpIn .5s ease both; }
.mp-result[hidden] { display: none; }
.mp-place { text-align: center; color: var(--main); font-size: calc(var(--ui) * 1.15); margin: 0 0 14px; }
.mp-board { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.mp-board li { display: grid; grid-template-columns: 56px 1fr 120px 70px; gap: 10px; background: var(--surface); border-radius: 10px; padding: 10px 16px; align-items: center; }
.mp-board li.you { outline: 2px solid var(--main); outline-offset: -2px; }
.mp-board li.dnf { opacity: .6; }
.mp-board .bp { color: var(--sub); }
.mp-board .bw { color: var(--main); text-align: right; font-variant-numeric: tabular-nums; }
.mp-board .ba { color: var(--sub); text-align: right; font-variant-numeric: tabular-nums; }
.mp-board small { color: var(--sub); }
.mp-result .r-actions { justify-content: center; }
body.in-room .mp-page .herofoot .keys { visibility: hidden; }
@media (max-width: 760px) {
  .mp-row { grid-template-columns: 1fr 58px 96px; height: 66px; gap: 10px; padding: 0 14px; cursor: pointer; }
  .mp-row .mp-who, .mp-row .mp-live, .mp-row .btn.mini { display: none; }
  .mp-actions { width: 100%; }
  .mp-name { flex: 1 1 100%; } .mp-name input { width: 100%; }
  .mp-board li { grid-template-columns: 44px 1fr 90px; } .mp-board .ba { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mp-row, .lane, .mp-win, .mp-result, .mp-big, .mp-sub .dot, .mp-live { animation: none !important; }
  .mp-row, .lane { transition: opacity .2s; }
  .mp-row.leaving, .lane.leaving { transform: none; }
  .mp-cnt.bump b { animation: none; }
}

/* profile pictures: a round letter badge, colour from the name; bots get a dashed ring */
.av { --av: 30px; display: inline-grid; place-items: center; width: var(--av); height: var(--av); border-radius: 50%; background: hsl(var(--h) 62% 70%); color: hsl(var(--h) 60% 16%); font-size: 13px; font-weight: 500; line-height: 1; flex: none; box-shadow: 0 0 0 2px var(--surface); }
.av.more { background: var(--bg); color: var(--sub); font-size: 11px; }
.av.new { animation: avPop .55s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes avPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.mp-who .av { --av: 28px; margin-left: -8px; }
.mp-who .av:first-child { margin-left: 0; }
.mp-empty { color: var(--sub); font-size: calc(var(--ui) * .9); }

/* the race track: your profile picture runs along a line coloured with your theme */
.flag { position: absolute; right: 0; top: 50%; width: 3px; height: 14px; margin-top: -7px; background: var(--sub); opacity: .5; border-radius: 2px; }
.mp-board .bn { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mp-board .bn .av { --av: 26px; font-size: 12px; }

/* create room popup */
.mp-panel { width: min(560px, 100%); }
.mp-panel .p-row { grid-template-columns: 130px 1fr; }
.mp-panel .p-row input[type=text] { width: 100%; max-width: 280px; }
.mp-panel .seg button { background: var(--surface); }
.mp-panel .seg button[aria-checked="true"] { background: var(--main); color: var(--main-ink); }
.mp-range { display: flex; align-items: center; gap: 14px; }
.mp-range input { flex: 1; accent-color: var(--main); max-width: 260px; }
.mp-range output { color: var(--text); min-width: 84px; font-variant-numeric: tabular-nums; }
.mp-hint { color: var(--sub); font-size: calc(var(--ui) * .9); margin: 4px 0 18px; border-top: 1px solid var(--surface); padding-top: 12px; }
.mp-panel .r-actions { justify-content: flex-end; }
.modal[hidden] { display: none; }

/* an old race opened from its address */
.mp-room.is-archive .mp-count, .mp-room.is-archive .mp-track, .mp-room.is-archive .mp-stats { display: none; }
.mp-room.is-archive .mp-result { margin-top: 20px; }
@media (max-width: 760px) { .mp-panel .p-row { grid-template-columns: 1fr; } .lane { grid-template-columns: 78px 1fr 62px; gap: 8px; } }

.mp-win .av { --av: 22px; font-size: 11px; box-shadow: none; }

.mp-note { color: var(--sub); opacity: .75; font-size: calc(var(--ui) * .85); text-align: center; margin: 22px 0 0; }

/* language of a room: the filter above the list, and a room in a Chinese, Japanese or Korean word list */
.mp-secrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 26px 0 10px; }
.mp-secrow .mp-sec { margin: 0; }
.mp-filter { display: flex; align-items: center; gap: 10px; color: var(--sub); font-size: calc(var(--ui) * .9); }
.mp-filter select { background: var(--surface); color: var(--text); border: 2px solid transparent; border-radius: 10px; font: inherit; padding: 8px 12px; }
.mp-filter select:focus { outline: none; border-color: var(--main); }
.mp-panel #mpLang { flex-wrap: wrap; }
.words:lang(ja) { font-family: var(--mono), "Hiragino Sans", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", sans-serif; }
.words:lang(ko) { font-family: var(--mono), "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", sans-serif; }
.words:lang(zh-Hans) { font-family: var(--mono), "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif; }
.words:lang(zh-Hant) { font-family: var(--mono), "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", sans-serif; }

/* the race: one light track. A soft rounded bar with a dashed line through the middle and a small checkered end.
   Everybody's picture rides on it; yours is bigger and ringed, the leader wears a crown, and a thin line behind your picture shows how far you have come. */
.mp-track { --inset: 28px; position: relative; height: 58px; margin: 12px 0 10px; border-radius: 29px; background: color-mix(in srgb, var(--surface) 70%, var(--bg)); border: 1px solid color-mix(in srgb, var(--sub) 22%, transparent); }
.mp-track::before { content: ""; position: absolute; left: var(--inset); right: var(--inset); top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--sub) 50%, transparent) 0 7px, transparent 7px 14px); }
.mp-track .fill { position: absolute; left: var(--inset); top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--main); width: calc((100% - var(--inset) * 2) * var(--yp, 0)); transition: width .12s linear; pointer-events: none; }
.mp-track .gate.start { display: none; }
.mp-track .gate.end { position: absolute; top: 18px; bottom: 18px; left: calc(100% - var(--inset) + 12px); width: 8px; border-radius: 2px; opacity: .55; background: conic-gradient(var(--text) 25%, transparent 0 50%, var(--text) 0 75%, transparent 0) 0 0 / 8px 8px; pointer-events: none; }
.mp-track .lane { --av: 26px; position: absolute; top: 50%; left: calc(var(--inset) + (100% - var(--inset) * 2) * var(--p, 0) + var(--sh, 0px)); transform: translate(-50%, -50%); z-index: 1; transition: left .6s linear, opacity .35s; animation: mpFade .45s ease both; }
.mp-track .lane .av { --av: inherit; width: var(--av); height: var(--av); font-size: 11px; box-shadow: 0 0 0 2px var(--surface); }
.mp-track .lane.you { --av: 36px; z-index: 5; transition-duration: .12s, .35s; }
.mp-track .lane.you .av { box-shadow: 0 0 0 3px var(--main); font-size: 14px; }
.mp-track .lane.lead { z-index: 3; }
.mp-track .lane.you.lead { z-index: 5; }
.mp-track .lane.done .av { box-shadow: 0 0 0 2px var(--main); }
.mp-track .lane.you.done .av { box-shadow: 0 0 0 3px var(--main); }
.mp-track .lane.leaving { opacity: 0; animation: none; }
.mp-track .lane.lead::before { content: ""; position: absolute; left: 50%; top: -13px; width: 16px; height: 12px; margin-left: -8px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23f2c94c' d='M2 17h20l1.5-12-6 4.5L12 1 6.5 9.5.5 5z'/%3E%3C/svg%3E") center / contain no-repeat; }
.mp-track .lane.you.lead::before { top: -17px; }
.mp-track .lane.done::after { content: attr(data-place); position: absolute; right: -6px; bottom: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--main); color: var(--main-ink); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; }
@keyframes mpFade { from { opacity: 0; } to { opacity: 1; } }
.mp-track .tk-n { display: none; }
/* before the start everybody waits side by side with their names */
.mp-track.waiting { height: auto; margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 8px 10px; background: none; border: 0; border-radius: 0; }
.mp-track.waiting .gate { display: none; }
.mp-track.waiting::before, .mp-track.waiting::after, .mp-track.waiting .fill { display: none; }
.mp-track.waiting .lane, .mp-track.waiting .lane.you { position: static; transform: none; display: inline-flex; align-items: center; gap: 8px; background: var(--surface); padding: 4px 14px 4px 4px; border-radius: 99px; animation: none; --av: 28px; }
.mp-track.waiting .lane .av, .mp-track.waiting .lane.you .av { box-shadow: none; }
.mp-track.waiting .lane.you { box-shadow: 0 0 0 2px var(--main); }
.mp-track.waiting .tk-n { display: inline; font-size: calc(var(--ui) * .9); color: var(--sub); }
.mp-track.waiting .lane.you .tk-n { color: var(--text); }
.mp-stats { display: flex; flex-wrap: wrap; gap: 4px 28px; align-items: baseline; margin: 0 0 4px; color: var(--sub); font-size: calc(var(--ui) * .92); min-height: 1.6em; }
.mp-stats b { color: var(--text); font-weight: 500; font-size: 1.25em; margin-left: .35em; }
.mp-stats em { font-style: normal; color: var(--sub); }
.mp-lead b { color: var(--main); margin-left: 0; font-size: 1em; }
.mp-track.waiting + .mp-stats { display: none; }
@media (max-width: 700px) { .mp-track { --inset: 20px; height: 50px; border-radius: 25px; } .mp-track .lane { --av: 22px; } .mp-track .lane.you { --av: 32px; } .mp-track .lane .av { font-size: 10px; } .mp-track .gate.end { top: 15px; bottom: 15px; left: calc(100% - var(--inset) + 9px); width: 7px; background-size: 7px 7px; } }

/* in a race the counter ("12/50 · 29 wpm") and the words are two different things: give them clear air between them */
body.in-room .live { margin-top: 12px; margin-bottom: calc(var(--fs) * 1.1); }
body.in-room .mp-stats { margin-bottom: 8px; }

/* races played: finished races with real people, per language */
.mp-note { color: var(--sub); opacity: .75; font-size: calc(var(--ui) * .82); }
.mp-played-wrap { margin-top: 12px; }
.mp-played { width: 100%; border-collapse: separate; border-spacing: 0; font-size: calc(var(--ui) * .95); font-variant-numeric: tabular-nums; }
.mp-played th, .mp-played td { padding: 10px 16px; text-align: right; font-weight: 400; color: var(--text); }
.mp-played thead th { color: var(--sub); font-size: calc(var(--ui) * .8); letter-spacing: .06em; text-transform: uppercase; padding-bottom: 8px; }
.mp-played th:first-child { text-align: left; }
.mp-played tbody tr { background: var(--surface); }
.mp-played tbody th { color: var(--text); }
.mp-played tbody td { color: var(--sub); }
.mp-played tbody tr + tr th, .mp-played tbody tr + tr td { border-top: 1px solid color-mix(in srgb, var(--sub) 14%, transparent); }
.mp-played tbody tr:first-child th { border-top-left-radius: 12px; } .mp-played tbody tr:first-child td:last-child { border-top-right-radius: 12px; }
.mp-played tbody tr:last-child th { border-bottom-left-radius: 12px; } .mp-played tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
.mp-played tr.all { background: color-mix(in srgb, var(--main) 12%, var(--surface)); }
.mp-played tr.all th, .mp-played tr.all td { color: var(--main); font-weight: 500; }
@media (max-width: 560px) { .mp-played th, .mp-played td { padding: 10px 10px; } .mp-note { display: none; } }