/* Ranks polish + beat-a-friend challenge */
.lr .s { margin-left: auto; } .lr .lbch { flex: none; margin-left: 10px; height: 32px; padding: 0 13px; border: 0; border-radius: 10px; font: 800 11.5px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #06130b; cursor: pointer; background: linear-gradient(180deg, #b6ff6a, #5bd617); box-shadow: 0 2px 0 #2f7d0b; }
.lr .lbch:active { transform: translateY(2px); box-shadow: none; }
.lr .m small { color: var(--hmu); }
.lbme { position: relative; }
.lbpass { display: block; width: calc(100% - 28px); margin: 0 14px 14px; height: 44px; border: 0; border-radius: 13px; font: 800 13px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; cursor: pointer; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1.5px rgba(184,255,106,.5); }
.lbpass:active { transform: translateY(2px); }
/* VS sheet */
.chs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 91; max-width: 460px; margin: 0 auto; padding: 28px 20px max(22px, env(safe-area-inset-bottom)); text-align: center; color: #fff; background: linear-gradient(180deg, #141d19, #090e0b); border-radius: 28px 28px 0 0; box-shadow: 0 -1px 0 rgba(255,255,255,.1), 0 -24px 60px rgba(0,0,0,.6); transform: translateY(105%); transition: transform .35s cubic-bezier(.2,.9,.25,1); }
.chs.show { transform: none; } .chs .nsfx { position: absolute; right: 12px; top: 14px; }
.cheye { font: 800 10.5px var(--ui); letter-spacing: .32em; text-transform: uppercase; color: #b6ff6a; margin-bottom: 16px; }
.chvsr { display: flex; align-items: center; justify-content: center; gap: 8px; }
.chpl { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .chpl .av { zoom: 1.7; margin-bottom: 8px; } .chpl b { font: 800 14px var(--ui); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chpl small { font: 600 11.5px var(--ui); color: #7d8c84; }
.chv { font: 400 30px var(--display); font-style: normal; color: #ffd166; text-shadow: 0 3px 0 #8a5a0c, 0 0 24px rgba(255,209,102,.5); }
.chtg { margin: 18px 0 14px; padding: 14px; border-radius: 18px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.chtg small { display: block; font: 800 10px var(--ui); letter-spacing: .22em; text-transform: uppercase; color: #7d8c84; } .chtg b { display: block; font: 400 44px/1.1 var(--display); color: #fff; margin: 4px 0; } .chtg span { font: 600 13px var(--ui); color: #a9b8b0; }
.chrw { margin-bottom: 18px; } .chrw small { display: block; font: 800 10px var(--ui); letter-spacing: .22em; text-transform: uppercase; color: #7d8c84; margin-bottom: 8px; } .chrw div { display: flex; gap: 10px; justify-content: center; }
.chgo { width: 100%; --nc: #5bd617; }
/* live target chip in the run HUD */
#chHud { position: absolute; left: 50%; top: calc(max(8px, env(safe-area-inset-top)) + 58px); transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 5px 11px; border-radius: 99px; background: rgba(8,12,10,.62); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); font: 800 11px var(--ui); color: #fff; white-space: nowrap; pointer-events: none; }
#chHud.hidden { display: none; } #chHud .chb { width: 64px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.16); overflow: hidden; } #chHud .chb i { display: block; height: 100%; border-radius: 6px; background: #ffd166; transition: width .25s; }
#chHud.won { box-shadow: inset 0 0 0 1.5px #14f195; } #chHud.won .chb i { background: #14f195; }
/* result VS art + rematch */
.chvs { display: flex; align-items: center; gap: 10px; } .chvs > div { display: flex; flex-direction: column; align-items: center; gap: 8px; } .chvs .av { zoom: 1.6; } .chvs b { font: 400 26px var(--display); } .chvs i { font: 400 24px var(--display); font-style: normal; color: #ffd166; } .chvs .lose { opacity: .55; filter: grayscale(.5); }
.rematch { display: block; width: 100%; margin: 10px 0 0; height: 50px; border: 0; border-radius: 16px; font: 800 14px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #fff; cursor: pointer; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1.5px rgba(255,209,102,.7); }