/* RivalClash UI styles. Taken from the approved design board (tasarim-v2.html, 2026-11-15);
   from now on this file is the source for the game. Layout is a fixed 344 px wide stage, scaled to the screen. */

:root {
  --bg0: #06070B; --bg1: #0D1018; --bg2: #151926;
  --card: rgba(255,255,255,.06); --card2: rgba(255,255,255,.1); --line: rgba(255,255,255,.1);
  --txt: #F3F5FA; --mut: #8C95A8;
  --cyan: #35E0FF; --gold: #F5C451; --energy: #A8FF4A; --red: #FF4D5E; --violet: #8B6CFF;
  --cond: "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Avenir Next", -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; margin: 0; }

/* ---------- phone ---------- */
.scr { position: relative; width: 100%; height: 100%; border-radius: 40px; overflow: hidden; background: radial-gradient(ellipse at 50% 18%, #1D2233 0%, #0A0C13 62%); color: var(--txt); font-family: var(--body); }
.num { font-family: var(--cond); font-weight: 800; font-variant-numeric: tabular-nums; }
svg { display: block; flex: none; }

/* top currency bar */
.hud { position: absolute; top: 44px; left: 12px; right: 12px; display: flex; gap: 6px; align-items: flex-start; z-index: 5; }
.ava { position: relative; width: 38px; height: 38px; flex: none; }
.ava .lv { position: absolute; right: -5px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--violet); border: 2px solid #0A0C13; font: 900 10px var(--cond); display: grid; place-items: center; }
.pill { display: flex; align-items: center; gap: 5px; height: 30px; padding: 0 4px 0 7px; border-radius: 15px; background: rgba(10,12,19,.72); border: 1px solid var(--line); font: 800 14px var(--cond); font-variant-numeric: tabular-nums; }
.pill .add { width: 20px; height: 20px; border-radius: 50%; background: var(--card2); display: grid; place-items: center; margin-left: 1px; }
.pillcol { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pillcol small { font: 700 9px var(--cond); letter-spacing: .8px; color: var(--energy); opacity: .9; }
.sp { flex: 1; }

/* tab bar */
.tabs { position: absolute; left: 10px; right: 10px; bottom: 12px; height: 62px; border-radius: 24px; background: rgba(18,21,31,.94); border: 1px solid var(--line); display: flex; z-index: 6; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 800 10px var(--cond); letter-spacing: .9px; color: var(--mut); position: relative; }
.tab.on { color: var(--cyan); }
.tab.on::after { content: ""; position: absolute; top: 0; width: 22px; height: 3px; border-radius: 0 0 3px 3px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.dot { position: absolute; top: 9px; right: 20px; width: 8px; height: 8px; border-radius: 50%; background: var(--red); border: 2px solid #12151F; box-sizing: content-box; }

/* generic */
.cta { height: 60px; border-radius: 20px; background: linear-gradient(180deg, #FFE390, #F5B83A); color: #2A1800; font: 900 25px var(--cond); letter-spacing: 2px; display: flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 5px 0 #A56A12, 0 14px 30px rgba(245,184,58,.3); }
.cta .cost { display: flex; align-items: center; gap: 3px; height: 28px; padding: 0 9px 0 6px; border-radius: 14px; background: rgba(42,24,0,.85); color: #fff; font-size: 15px; letter-spacing: 0; }
.btn2 { height: 48px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); font: 800 16px var(--cond); letter-spacing: 1.5px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.cardx { background: var(--card); border: 1px solid var(--line); border-radius: 18px; }
.title { position: absolute; top: 92px; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; }
.title h4 { font: 900 24px var(--cond); letter-spacing: 1px; }
.title .back { width: 34px; height: 34px; border-radius: 12px; background: var(--card); display: grid; place-items: center; }
.body { position: absolute; top: 138px; left: 14px; right: 14px; bottom: 86px; display: flex; flex-direction: column; gap: 10px; }
.lbl { font: 800 11px var(--cond); letter-spacing: 1.6px; color: var(--mut); }
.cv { display: inline-flex; align-items: center; gap: 4px; font: 800 14px var(--cond); font-variant-numeric: tabular-nums; }
.bar { height: 8px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 4px; background: var(--cyan); }
.mb { display: inline-block; border-radius: 50%; flex: none; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.mb svg { width: 100%; height: 100%; }
.you { box-shadow: 0 0 0 3px var(--cyan), 0 0 16px rgba(53,224,255,.7); }

/* home */
.event { position: absolute; top: 96px; left: 14px; right: 14px; height: 46px; border-radius: 16px; padding: 0 12px; display: flex; align-items: center; gap: 10px; background: linear-gradient(90deg, rgba(139,108,255,.35), rgba(53,224,255,.12)); border: 1px solid rgba(139,108,255,.5); }
.event b { font: 900 15px var(--cond); letter-spacing: 1px; }
.event span { font-size: 11px; color: #C9CFDD; display: block; }
.event .time { margin-left: auto; font: 800 12px var(--cond); background: rgba(0,0,0,.35); padding: 4px 8px; border-radius: 9px; display: flex; gap: 4px; align-items: center; }
.side { position: absolute; top: 160px; display: flex; flex-direction: column; gap: 10px; z-index: 4; }
.side.l { left: 12px; } .side.r { right: 12px; }
.sbtn { position: relative; width: 52px; height: 56px; border-radius: 16px; background: rgba(10,12,19,.7); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: 800 9px var(--cond); letter-spacing: .8px; color: #C9CFDD; }
.sbtn .dot { top: -3px; right: -3px; border-color: #0A0C13; }
.hero { position: absolute; top: 172px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.hero .glow { position: absolute; top: 108px; width: 230px; height: 70px; border-radius: 50%; background: radial-gradient(ellipse, rgba(53,224,255,.45), transparent 70%); filter: blur(4px); }
.hero .ped { position: absolute; top: 132px; width: 190px; height: 40px; border-radius: 50%; background: radial-gradient(ellipse at 50% 30%, #2B3247, #10131C 70%); border: 1px solid rgba(53,224,255,.35); }
.hero .mb { position: relative; width: 148px; height: 148px; box-shadow: 0 0 0 4px rgba(53,224,255,.9), 0 0 44px rgba(53,224,255,.5), 0 18px 30px rgba(0,0,0,.6); }
.hero .nm { margin-top: 30px; font: 900 26px var(--cond); letter-spacing: 1.5px; }
.hero .tr { display: flex; gap: 6px; margin-top: 6px; }
.chip { height: 24px; padding: 0 9px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font: 800 11px var(--cond); letter-spacing: 1px; display: inline-flex; align-items: center; gap: 5px; color: #C9CFDD; }
.setup { position: absolute; left: 14px; right: 14px; bottom: 162px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.setup > div { height: 64px; border-radius: 18px; padding: 9px 12px; position: relative; overflow: hidden; border: 1px solid var(--line); }
.setup b { font: 900 16px var(--cond); letter-spacing: .8px; display: block; margin-top: 2px; }
.setup .chev { position: absolute; right: 8px; top: 22px; opacity: .7; }
.homecta { position: absolute; left: 14px; right: 14px; bottom: 88px; }

/* league cards */
.lg { border-radius: 20px; padding: 12px 14px; border: 1.5px solid var(--line); background: var(--card); position: relative; }
.lg.sel { border-color: var(--gold); background: linear-gradient(135deg, rgba(245,196,81,.16), rgba(245,196,81,.03)); box-shadow: 0 0 24px rgba(245,196,81,.15); }
.lg.lock { opacity: .55; }
.lg h5 { font: 900 20px var(--cond); letter-spacing: 1px; display: flex; align-items: center; gap: 8px; }
.lg .entry { position: absolute; right: 12px; top: 12px; text-align: right; }
.lg .prz { display: flex; gap: 6px; margin-top: 10px; }
.lg .prz div { flex: 1; border-radius: 12px; background: rgba(0,0,0,.3); padding: 6px 4px; text-align: center; }
.lg .prz small { display: block; font: 800 10px var(--cond); letter-spacing: 1px; color: var(--mut); }
.badge { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; }
.lineup { display: flex; justify-content: space-between; padding: 10px 12px; }
.lineup .mb { width: 30px; height: 30px; }

/* race */
.race { position: absolute; inset: 0; }
.race.neon { background: radial-gradient(ellipse at 50% 30%, #1A1040 0%, #07051A 75%); }
.race.neon .grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(160,90,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(160,90,255,.16) 1px, transparent 1px); background-size: 40px 40px; }
.race.lava { background: radial-gradient(ellipse at 50% 90%, #5A1206 0%, #1C0603 55%, #0A0201 85%); }
.wall { position: absolute; top: 0; bottom: 0; width: 5px; }
.neon .wall, .neon .ramp { background: #7DF9FF; box-shadow: 0 0 12px rgba(0,229,255,.8); }
.lava .wall, .lava .ramp { background: #3B2A26; box-shadow: 0 0 12px rgba(255,98,0,.9); }
.ramp { position: absolute; height: 5px; border-radius: 3px; }
.peg { position: absolute; width: 8px; height: 8px; border-radius: 50%; }
.neon .peg { background: #FF3FD8; box-shadow: 0 0 8px #FF3FD8; }
.lava .peg { background: #FF8A1E; box-shadow: 0 0 8px #FF5A00; }
.bump { position: absolute; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(circle, #FFE08A 0 25%, #B3200B 26% 72%, #FFB000 73%); }
.ember { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FF7A1A; box-shadow: 0 0 6px #FF7A1A; }
.rlabel { position: absolute; left: 0; right: 0; text-align: center; font: 800 17px var(--cond); letter-spacing: 2px; }
.neon .rlabel { color: rgba(125,249,255,.4); } .lava .rlabel { color: rgba(255,150,60,.45); }
.race .mb { position: absolute; width: 26px; height: 26px; }
.youtag { position: absolute; font: 900 10px var(--cond); color: var(--cyan); letter-spacing: 1px; text-shadow: 0 1px 0 #000; }
.rtop { position: absolute; top: 44px; left: 12px; right: 12px; display: flex; align-items: flex-start; gap: 8px; z-index: 5; }
.posbox { border-radius: 16px; background: rgba(6,7,11,.7); border: 1px solid var(--line); padding: 4px 12px 5px; }
.posbox b { font: 900 34px var(--cond); font-style: italic; line-height: 1; }
.posbox b small { font-size: 15px; color: var(--mut); font-style: normal; }
.posbox span { display: block; font: 800 10px var(--cond); letter-spacing: 1px; color: var(--red); }
.mid { flex: 1; text-align: center; padding-top: 2px; }
.mid b { font: 900 13px var(--cond); letter-spacing: 2px; display: block; opacity: .85; }
.pot { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; height: 24px; padding: 0 9px 0 6px; border-radius: 12px; background: rgba(6,7,11,.7); border: 1px solid rgba(245,196,81,.45); font: 800 13px var(--cond); color: var(--gold); }
.ibtn { width: 38px; height: 38px; border-radius: 13px; background: rgba(6,7,11,.7); border: 1px solid var(--line); display: grid; place-items: center; }
.rail { position: absolute; left: 30px; top: 190px; bottom: 190px; width: 6px; border-radius: 3px; background: rgba(255,255,255,.16); z-index: 5; }
.rail i { position: absolute; left: 0; top: 0; width: 100%; border-radius: 3px; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.rail .mb { position: absolute; left: -8px; width: 22px; height: 22px; }
.rail .fin { position: absolute; left: -7px; bottom: -8px; width: 20px; height: 6px; background: repeating-linear-gradient(90deg, #fff 0 5px, #111 5px 10px); }
.lb { position: absolute; right: 12px; top: 112px; width: 112px; border-radius: 14px; background: rgba(6,7,11,.66); border: 1px solid var(--line); padding: 6px; z-index: 5; }
.lb div { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 4px; border-radius: 8px; font: 800 12px var(--cond); letter-spacing: .5px; }
.lb div.me { background: rgba(53,224,255,.16); color: var(--cyan); }
.lb .mb { position: static; width: 18px; height: 18px; box-shadow: none; }
.lb em { font-style: normal; color: var(--mut); width: 9px; }
.lb u { text-decoration: none; margin-left: auto; color: var(--mut); font-size: 11px; }
.boost { position: absolute; right: 16px; bottom: 34px; width: 108px; height: 108px; z-index: 6; display: grid; place-items: center; }
.boost .ring { position: absolute; inset: 0; }
.boost .core { width: 84px; height: 84px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #9BF3FF, #0AA6D6); box-shadow: 0 5px 0 #056A8A, 0 0 34px rgba(53,224,255,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; color: #002633; font: 900 17px var(--cond); letter-spacing: 1px; }
.count { position: absolute; top: 300px; left: 0; right: 0; text-align: center; font: 900 150px var(--cond); font-style: italic; line-height: 1; text-shadow: 0 8px 0 #000, 0 0 60px rgba(53,224,255,.6); z-index: 6; }
.tip { position: absolute; left: 30px; right: 30px; top: 470px; text-align: center; font: 800 13px var(--cond); letter-spacing: 1.5px; color: #C9CFDD; z-index: 6; }
.gate { position: absolute; height: 5px; border-radius: 3px; background: var(--red); box-shadow: 0 0 10px var(--red); }
.speed { position: absolute; left: 16px; bottom: 44px; z-index: 6; font: 800 11px var(--cond); letter-spacing: 1px; color: var(--mut); }
.speed b { display: block; font: 900 22px var(--cond); color: var(--txt); font-style: italic; }

/* result */
.res { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; padding: 66px 16px 22px; }
.res.win { background: radial-gradient(ellipse at 50% 22%, rgba(245,196,81,.32) 0%, transparent 55%), #0A0C13; }
.res.lose { background: radial-gradient(ellipse at 50% 22%, rgba(140,149,168,.18) 0%, transparent 55%), #0A0C13; }
.res .place { font: 900 54px var(--cond); font-style: italic; line-height: 1; margin-top: 4px; text-shadow: 0 5px 0 #000; }
.res.win .place { color: var(--gold); }
.res .sub { font: 800 12px var(--cond); letter-spacing: 2.5px; color: var(--mut); }
.res .big { position: relative; margin-top: 14px; }
.res .big .mb { width: 104px; height: 104px; }
.res.win .big .mb { box-shadow: 0 0 0 4px var(--gold), 0 0 40px rgba(245,196,81,.6); }
.crown { position: absolute; top: -30px; left: 50%; margin-left: -24px; }
.conf { position: absolute; width: 8px; height: 4px; }
.pods { display: flex; gap: 8px; margin-top: 14px; width: 100%; }
.pods div { flex: 1; border-radius: 14px; background: var(--card); border: 1px solid var(--line); padding: 7px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 800 11px var(--cond); letter-spacing: .5px; }
.pods div.me { border-color: var(--cyan); background: rgba(53,224,255,.1); }
.pods .mb { width: 30px; height: 30px; }
.pods b { color: var(--gold); font-size: 13px; }
.rew { width: 100%; margin-top: 10px; padding: 4px 14px; }
.rew .row { display: flex; align-items: center; justify-content: space-between; height: 34px; border-bottom: 1px solid var(--line); font-size: 13px; color: #C9CFDD; }
.rew .row:last-child { border: 0; }
.rew .tot { height: 42px; color: var(--txt); font: 900 16px var(--cond); letter-spacing: 1px; }
.rew .tot .cv { font-size: 20px; }
.xp { width: 100%; margin-top: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 10px; }
.xp .lvb { width: 34px; height: 34px; border-radius: 12px; background: var(--violet); display: grid; place-items: center; font: 900 16px var(--cond); }
.xp .bar i { background: var(--violet); }
.resbtn { width: 100%; margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.neg { color: var(--red); } .pos { color: var(--energy); }

/* maps */
.mapc { height: 92px; border-radius: 20px; padding: 12px 14px; position: relative; overflow: hidden; border: 1.5px solid transparent; display: flex; flex-direction: column; justify-content: space-between; }
.mapc h5 { font: 900 21px var(--cond); letter-spacing: 1px; text-shadow: 0 2px 0 rgba(0,0,0,.6); }
.mapc .meta { font: 700 11px var(--cond); letter-spacing: 1px; color: rgba(255,255,255,.75); display: flex; gap: 10px; }
.mapc .st { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); height: 32px; padding: 0 12px; border-radius: 16px; background: rgba(0,0,0,.55); font: 800 13px var(--cond); letter-spacing: 1px; display: flex; align-items: center; gap: 5px; }
.mapc.locked > h5, .mapc.locked > .meta { opacity: .55; }
.mapc .art { position: absolute; right: 96px; top: -8px; width: 90px; height: 110px; opacity: .55; }

/* marbles */
.seg { display: flex; padding: 3px; border-radius: 14px; background: var(--card); }
.seg span { flex: 1; height: 30px; border-radius: 11px; display: grid; place-items: center; font: 800 12px var(--cond); letter-spacing: 1.2px; color: var(--mut); }
.seg span.on { background: var(--card2); color: var(--txt); }
.gridm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cell { aspect-ratio: 1 / 1.12; border-radius: 16px; background: var(--card); border: 1.5px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font: 800 10px var(--cond); letter-spacing: .6px; position: relative; }
.cell .mb { width: 42px; height: 42px; }
.cell.sel { border-color: var(--cyan); background: rgba(53,224,255,.1); }
.cell.lock .mb { filter: grayscale(.9) brightness(.55); }
.cell .cv { font-size: 11px; }
.detail { margin-top: auto; padding: 10px 12px; display: flex; align-items: center; gap: 12px; }
.detail .mb { width: 54px; height: 54px; }
.detail b { font: 900 18px var(--cond); letter-spacing: 1px; display: block; }
.detail span { font-size: 11px; color: var(--mut); }
.eq { margin-left: auto; height: 38px; padding: 0 16px; border-radius: 13px; background: var(--cyan); color: #002633; font: 900 14px var(--cond); letter-spacing: 1.2px; display: grid; place-items: center; }

/* shop / daily / profile */
.chest { height: 78px; border-radius: 20px; padding: 14px; display: flex; align-items: center; gap: 12px; background: linear-gradient(120deg, rgba(245,196,81,.22), rgba(245,196,81,.04)); border: 1px solid rgba(245,196,81,.45); }
.chest .box { width: 52px; height: 52px; border-radius: 18px; background: linear-gradient(180deg, #FFE390, #C98A1B); display: grid; place-items: center; box-shadow: 0 0 26px rgba(245,196,81,.4); }
.chest b { font: 900 19px var(--cond); letter-spacing: 1px; display: block; }
.chest span { font-size: 12px; color: #C9CFDD; }
.claim { margin-left: auto; height: 36px; padding: 0 14px; border-radius: 12px; background: var(--gold); color: #2A1800; font: 900 13px var(--cond); letter-spacing: 1.2px; display: grid; place-items: center; }
.claim.off { background: var(--card2); color: var(--mut); }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.item { border-radius: 16px; background: var(--card); border: 1px solid var(--line); padding: 8px 6px 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.item .ico { width: 36px; height: 36px; border-radius: 12px; margin-bottom: 2px; display: grid; place-items: center; background: rgba(255,255,255,.06); }
.item b { font: 900 15px var(--cond); letter-spacing: .5px; }
.item .buy { width: 100%; height: 24px; margin-top: 3px; border-radius: 9px; background: rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; gap: 4px; font: 800 13px var(--cond); }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.day { border-radius: 12px; background: var(--card); border: 1px solid var(--line); padding: 6px 0 5px; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 800 9px var(--cond); letter-spacing: .6px; color: var(--mut); }
.day.done { background: rgba(168,255,74,.1); border-color: rgba(168,255,74,.35); color: var(--energy); }
.day.now { background: rgba(245,196,81,.16); border-color: var(--gold); color: var(--gold); box-shadow: 0 0 16px rgba(245,196,81,.25); }
.day b { font: 800 11px var(--cond); color: var(--txt); }
.mis { padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.mis .ico { width: 38px; height: 38px; border-radius: 13px; background: rgba(255,255,255,.06); display: grid; place-items: center; flex: none; }
.mis .tx { flex: 1; min-width: 0; }
.mis .tx b { font: 800 14px var(--cond); letter-spacing: .4px; display: block; margin-bottom: 5px; }
.mis .tx .bar { height: 6px; }
.mis .rw { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.dim { position: absolute; inset: 0; background: rgba(3,4,7,.78); z-index: 20; }
.modal { position: absolute; left: 20px; right: 20px; top: 190px; z-index: 21; border-radius: 28px; background: linear-gradient(180deg, #1B2030, #10131C); border: 1px solid var(--line); padding: 22px 18px 18px; text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.modal .bolt { width: 78px; height: 78px; margin: -58px auto 10px; border-radius: 26px; background: linear-gradient(180deg, #C9FF8A, #5CB80F); display: grid; place-items: center; box-shadow: 0 0 40px rgba(168,255,74,.45); }
.modal h4 { font: 900 26px var(--cond); letter-spacing: 1px; }
.modal p { font-size: 13px; color: #C9CFDD; margin: 6px 0 14px; line-height: 1.45; }
.cells { display: flex; gap: 6px; justify-content: center; margin-bottom: 14px; }
.cells i { width: 34px; height: 12px; border-radius: 6px; background: rgba(255,255,255,.1); }
.opt { height: 52px; border-radius: 16px; display: flex; align-items: center; padding: 0 14px; gap: 10px; font: 900 15px var(--cond); letter-spacing: 1px; margin-top: 8px; background: var(--card); border: 1px solid var(--line); }
.opt.pri { background: linear-gradient(180deg, #C9FF8A, #7FD42A); color: #142A00; border: 0; box-shadow: 0 4px 0 #3F7A0A; }
.opt .r { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.prof { display: flex; align-items: center; gap: 14px; padding: 14px; }
.prof .mb { width: 68px; height: 68px; }
.prof b { font: 900 22px var(--cond); letter-spacing: 1px; display: block; }
.stat { padding: 10px 6px; text-align: center; }
.stat b { font: 900 22px var(--cond); font-style: italic; display: block; }
.stat span { font: 800 9px var(--cond); letter-spacing: 1.2px; color: var(--mut); }
.rk { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--line); font: 800 14px var(--cond); letter-spacing: .5px; }
.rk:last-child { border: 0; }
.rk.me { background: rgba(53,224,255,.1); color: var(--cyan); }
.rk em { font-style: normal; width: 22px; color: var(--mut); }
.rk .mb { width: 26px; height: 26px; }
.rk .cv { margin-left: auto; }

/* ================= v2: modern look ================= */
.scr { background: radial-gradient(60% 40% at 12% 0%, rgba(139,108,255,.38), transparent 70%), radial-gradient(55% 35% at 100% 28%, rgba(53,224,255,.17), transparent 70%), radial-gradient(70% 40% at 50% 112%, rgba(245,196,81,.10), transparent 70%), #080A12; }
.cardx { background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); box-shadow: inset 0 1px 0 rgba(255,255,255,.1); border-radius: 20px; }
.cta { background: linear-gradient(180deg, #FFF08A, #FFC62E); border-radius: 22px; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), 0 5px 0 #B67A0E, 0 16px 34px rgba(255,198,46,.26); }
.tabs { height: 60px; border-radius: 30px; padding: 6px; gap: 2px; background: rgba(16,19,30,.86); box-shadow: 0 10px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.tab { flex-direction: row; gap: 6px; border-radius: 24px; font-size: 11px; }
.tab .t { display: none; }
.tab.on { flex: 2.1; background: linear-gradient(180deg, rgba(53,224,255,.24), rgba(53,224,255,.1)); box-shadow: inset 0 0 0 1px rgba(53,224,255,.38); }
.tab.on .t { display: inline; }
.tab.on::after { display: none; }
.tab .dot { top: 10px; right: 14px; }

/* avatars */
.avw { position: relative; display: inline-block; line-height: 0; flex: none; }
.avw > .st { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: #3DDC84; border: 2px solid #0B0D15; }
.avw > .st.off { background: #5B6475; } .avw > .st.busy { background: var(--gold); }
.avw > .fl { position: absolute; right: -4px; bottom: -3px; width: 42%; height: 42%; }
.avw > .fl .mb { width: 100%; height: 100%; box-shadow: 0 0 0 2px #0B0D15; }
.ringx { position: relative; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(from 210deg, #35E0FF, #8B6CFF, #FF4DD8, #35E0FF); box-shadow: 0 0 46px rgba(139,108,255,.45); }
.rb { width: 32px; height: 32px; border-radius: 11px; background: rgba(255,255,255,.1); display: grid; place-items: center; flex: none; }
.rb.ok { background: var(--energy); } .rb.pri { background: var(--cyan); }
.pb { height: 30px; padding: 0 12px; border-radius: 11px; background: rgba(255,255,255,.1); font: 900 12px var(--cond); letter-spacing: 1px; display: grid; place-items: center; flex: none; }
.pb.pri { background: var(--cyan); color: #002633; } .pb.off { background: none; color: var(--mut); border: 1px solid var(--line); }
.fx { flex: 1; min-width: 0; } .fx > b { display: block; font: 800 15px var(--cond); letter-spacing: .5px; } .fx > span { font-size: 11px; color: var(--mut); }
.chip.up { color: var(--energy); border-color: rgba(168,255,74,.35); }
.cats .chip.on, .periods .chip.on { background: var(--txt); color: #0B0D15; border-color: transparent; }

/* sign in */
.deco { position: absolute; inset: 0; }
.deco .mb { position: absolute; }
.logo { position: absolute; top: 372px; left: 0; right: 0; text-align: center; font: 900 66px var(--cond); font-style: italic; line-height: .86; letter-spacing: 1px; text-shadow: 0 5px 0 rgba(0,0,0,.6); }
.logo span { color: var(--gold); }
.logo small { display: block; font: 800 11px var(--cond); letter-spacing: 3px; color: #C9CFDD; font-style: normal; margin-top: 14px; text-shadow: none; }
.auth { position: absolute; left: 18px; right: 18px; bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.abtn { height: 52px; border-radius: 18px; display: flex; align-items: center; justify-content: center; gap: 9px; font: 900 15px var(--cond); letter-spacing: 1.2px; background: rgba(255,255,255,.08); border: 1px solid var(--line); }
.abtn.w { background: #fff; color: #0B0D15; border: 0; } .abtn.ghost { background: none; border: 0; color: var(--mut); height: 36px; }
.auth p { font-size: 10px; color: var(--mut); text-align: center; line-height: 1.5; }

/* studio */
.stage { height: 172px; border-radius: 24px; position: relative; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 120%, rgba(53,224,255,.25), transparent 60%), rgba(255,255,255,.04); border: 1px solid var(--line); overflow: hidden; flex: none; }
.stage .ringx { width: 132px; height: 132px; } .stage .ringx .mb { width: 120px; height: 120px; box-shadow: 0 0 0 4px #0B0D15; }
.trailfx { position: absolute; left: 50%; top: -34px; width: 70px; height: 120px; margin-left: -35px; background: linear-gradient(180deg, transparent, rgba(53,224,255,.6)); filter: blur(8px); border-radius: 40px; }
.sws { display: flex; gap: 10px; }
.sw { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 3px solid transparent; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
.sw.sel { border-color: #fff; }

/* home v2 */
.hero2 { position: absolute; top: 98px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; }
.hero2 .ringx { width: 152px; height: 152px; } .hero2 .ringx > .mb { width: 140px; height: 140px; box-shadow: 0 0 0 4px #0B0D15; }
.hero2 .cf { position: absolute; right: 0; bottom: 0; line-height: 0; } .hero2 .cf .mb { width: 42px; height: 42px; box-shadow: 0 0 0 3px #0B0D15; }
.hero2 .nm { margin-top: 10px; font: 900 26px var(--cond); letter-spacing: 1px; } .hero2 .nm small { font-size: 14px; color: var(--mut); margin-left: 6px; }
.hero2 .tr { display: flex; gap: 6px; margin-top: 6px; }
.fstrip { position: absolute; top: 326px; left: 14px; right: 14px; height: 62px; padding: 0 12px; display: flex; align-items: center; gap: 10px; }
.fstrip .l { margin-right: auto; } .fstrip .l b { display: block; font: 900 16px var(--cond); letter-spacing: .8px; margin-top: 1px; }
.fstrip .avs { display: flex; } .fstrip .avs .avw { margin-left: -7px; } .fstrip .avs .mb { box-shadow: 0 0 0 2px #171B28; }
.modes { position: absolute; top: 398px; left: 14px; right: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mode { position: relative; height: 112px; border-radius: 22px; padding: 12px; overflow: hidden; border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: flex-end; }
.mode.big { grid-column: 1 / 3; height: 124px; background: linear-gradient(120deg, #FFF08A, #FFB52E); color: #2A1800; border: 0; box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 5px 0 #B67A0E, 0 16px 34px rgba(255,198,46,.25); overflow: visible; }
.mode h5 { font: 900 18px var(--cond); letter-spacing: .6px; line-height: 1; white-space: nowrap; } .mode.big h5 { font-size: 32px; font-style: italic; }
.mode p { font-size: 11px; opacity: .85; margin-top: 4px; }
.mode .art { position: absolute; right: 12px; top: 12px; display: flex; gap: 5px; align-items: center; }
.mode .cost { display: flex; align-items: center; gap: 3px; height: 26px; padding: 0 9px 0 6px; border-radius: 13px; background: rgba(42,24,0,.88); color: #fff; font: 800 14px var(--cond); }
.mode .go { position: absolute; right: 14px; bottom: 14px; width: 52px; height: 52px; border-radius: 50%; background: #2A1800; display: grid; place-items: center; }

/* matchmaking */
.radar { position: absolute; top: 64px; left: 0; right: 0; height: 250px; display: grid; place-items: center; }
.radar > i { position: absolute; border-radius: 50%; border: 1.5px solid rgba(53,224,255,.4); }
.radar > i:nth-child(1) { width: 150px; height: 150px; } .radar > i:nth-child(2) { width: 212px; height: 212px; opacity: .6; } .radar > i:nth-child(3) { width: 274px; height: 274px; opacity: .3; }
.radar .ringx { width: 106px; height: 106px; } .radar .ringx .mb { width: 96px; height: 96px; box-shadow: 0 0 0 4px #0B0D15; }
.mmt { position: absolute; top: 318px; left: 0; right: 0; text-align: center; }
.mmt b { display: block; font: 900 24px var(--cond); letter-spacing: 2px; }
.mmt .num { font-size: 40px; font-style: italic; color: var(--cyan); line-height: 1; } .mmt small { font-size: 18px; color: var(--mut); }
.mmchips { position: absolute; top: 402px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.slot { height: 80px; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font: 800 11px var(--cond); letter-spacing: .6px; position: relative; }
.slot.empty { border-style: dashed; color: var(--mut); }
.slot .hole { width: 44px; height: 44px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.25); display: grid; place-items: center; }
.slot .rdy { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; border-radius: 50%; background: var(--energy); display: grid; place-items: center; }
.slot .host { position: absolute; top: 3px; left: 5px; }
.mmslots { position: absolute; top: 440px; left: 14px; right: 14px; }
.mmfoot { position: absolute; left: 14px; right: 14px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; }

/* race online */
.emo { position: absolute; min-width: 30px; height: 30px; padding: 0 6px; border-radius: 15px 15px 15px 4px; background: #fff; display: grid; place-items: center; font-size: 16px; box-shadow: 0 4px 10px rgba(0,0,0,.4); z-index: 4; }
.ntag { position: absolute; font: 800 9px var(--cond); letter-spacing: .6px; color: #fff; text-shadow: 0 1px 0 #000; opacity: .9; }
.emobtn { position: absolute; left: 44px; bottom: 38px; width: 52px; height: 52px; border-radius: 50%; background: rgba(6,7,11,.72); border: 1px solid var(--line); display: grid; place-items: center; z-index: 6; }
.quick { position: absolute; left: 44px; bottom: 98px; display: flex; flex-direction: column; gap: 6px; z-index: 6; }
.quick > span { height: 30px; min-width: 52px; padding: 0 10px; border-radius: 15px; background: rgba(6,7,11,.72); border: 1px solid var(--line); display: grid; place-items: center; font: 800 13px var(--cond); }

/* friends */
.search { height: 42px; border-radius: 16px; background: rgba(255,255,255,.07); border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 6px 0 12px; font-size: 13px; color: var(--mut); flex: none; }
.search .code { margin-left: auto; height: 30px; padding: 0 10px; border-radius: 11px; background: rgba(53,224,255,.14); color: var(--cyan); font: 800 12px var(--cond); letter-spacing: .6px; display: flex; align-items: center; gap: 6px; }
.fr { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 10px; border-bottom: 1px solid var(--line); }
.fr:last-child { border: 0; }

/* room */
.codec { display: flex; align-items: center; gap: 8px; padding: 10px 12px; }
.codec > div { flex: 1; } .codec b { display: block; font: 900 26px var(--cond); letter-spacing: 3px; font-style: italic; line-height: 1.1; }
.setrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.setrow > div { padding: 8px 10px; border-radius: 16px; } .setrow b { display: flex; align-items: center; gap: 4px; font: 900 14px var(--cond); letter-spacing: .5px; margin-top: 2px; }
.chatp { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: #C9CFDD; }
.chatp .msg b { font: 800 12px var(--cond); letter-spacing: .5px; margin-right: 4px; }
.inp { height: 36px; border-radius: 13px; background: rgba(0,0,0,.3); display: flex; align-items: center; gap: 8px; padding: 0 10px; margin-top: 4px; color: var(--mut); }
.inp > span { flex: 1; }

/* chat */
.chead { position: absolute; top: 44px; left: 12px; right: 12px; display: flex; align-items: center; gap: 10px; }
.chead .back { width: 34px; height: 34px; border-radius: 12px; background: var(--card); display: grid; place-items: center; }
.msgs { position: absolute; top: 100px; left: 14px; right: 14px; bottom: 128px; display: flex; flex-direction: column; gap: 7px; justify-content: flex-end; }
.day0, .seen { align-self: center; font: 800 10px var(--cond); letter-spacing: 1.5px; color: var(--mut); } .seen { align-self: flex-end; }
.bub { max-width: 78%; padding: 9px 12px; font-size: 13px; line-height: 1.35; border-radius: 18px; }
.bub.l { align-self: flex-start; background: rgba(255,255,255,.09); border-bottom-left-radius: 6px; }
.bub.r { align-self: flex-end; background: linear-gradient(135deg, #35E0FF, #6C8CFF); color: #04121A; border-bottom-right-radius: 6px; font-weight: 600; }
.inv { align-self: flex-start; width: 88%; border-radius: 18px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; background: linear-gradient(120deg, rgba(139,108,255,.4), rgba(53,224,255,.15)); border: 1px solid rgba(139,108,255,.55); }
.inv > div { flex: 1; } .inv b { display: block; font: 900 15px var(--cond); letter-spacing: .6px; margin: 1px 0; } .inv em { font-style: normal; font-size: 11px; color: #C9CFDD; display: flex; gap: 3px; align-items: center; }
.qrow { position: absolute; left: 14px; right: 0; bottom: 82px; display: flex; gap: 6px; overflow: hidden; }
.qrow > span { height: 34px; padding: 0 13px; border-radius: 17px; background: rgba(255,255,255,.08); border: 1px solid var(--line); display: grid; place-items: center; font: 800 13px var(--cond); flex: none; }
.cinp { position: absolute; left: 14px; right: 14px; bottom: 22px; height: 50px; border-radius: 25px; background: rgba(255,255,255,.08); border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 6px 0 16px; font-size: 13px; color: var(--mut); }
.cinp > span:first-child { flex: 1; } .sendb { width: 38px; height: 38px; border-radius: 50%; background: var(--cyan); display: grid; place-items: center; }

/* player sheet */
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 21; border-radius: 32px 32px 0 0; background: linear-gradient(180deg, #1C2133, #0F121B); border-top: 1px solid var(--line); padding: 10px 16px 22px; display: flex; flex-direction: column; gap: 10px; }
.grab { width: 40px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); align-self: center; }
.pho { display: flex; gap: 14px; align-items: center; } .pho b { font: 900 24px var(--cond); letter-spacing: .8px; display: block; } .pho b small { font-size: 13px; color: var(--mut); }
.pho em { font-style: normal; font-size: 12px; color: var(--mut); } .pho .tr { display: flex; gap: 6px; margin-top: 6px; }
.rep { text-align: center; font-size: 11px; color: var(--mut); display: flex; gap: 5px; justify-content: center; align-items: center; }

/* leaderboards */
.periods { display: flex; gap: 6px; align-items: center; }
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 8px; height: 176px; flex: none; padding-top: 20px; }
.pd { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; font: 800 12px var(--cond); letter-spacing: .5px; }
.pd .base { width: 100%; border-radius: 14px 14px 0 0; display: grid; place-items: center; font: 900 26px var(--cond); font-style: italic; margin-top: 3px; }
.pcr { position: absolute; top: -20px; left: 50%; margin-left: -11px; }
.dl.pos { color: var(--energy); } .dl.neg { color: var(--red); }
.lrow { display: flex; align-items: center; gap: 9px; height: 42px; padding: 0 12px; border-bottom: 1px solid var(--line); font: 800 14px var(--cond); letter-spacing: .4px; }
.lrow:last-child { border: 0; } .lrow.me { background: rgba(53,224,255,.1); color: var(--cyan); }
.lrow > em { font-style: normal; width: 24px; color: var(--mut); font-size: 13px; }
.sc { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.dl { width: 32px; text-align: right; font-size: 11px; color: var(--mut); }
.yourow { position: absolute; left: 14px; right: 14px; bottom: 80px; height: 48px; border-radius: 18px; background: linear-gradient(90deg, rgba(53,224,255,.3), rgba(139,108,255,.26)); border: 1px solid rgba(53,224,255,.5); display: flex; align-items: center; gap: 9px; padding: 0 12px; font: 900 15px var(--cond); letter-spacing: .5px; z-index: 5; }
.yourow > em { font-style: normal; color: var(--cyan); }

/* country clash */
.clashh { height: 116px; border-radius: 24px; padding: 14px; display: flex; align-items: center; gap: 14px; background: linear-gradient(120deg, #E30A17, #7A0710); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); flex: none; }
.clashh .mb { width: 84px; height: 84px; box-shadow: 0 0 0 4px rgba(255,255,255,.92), 0 10px 24px rgba(0,0,0,.4); }
.clashh b { display: block; font: 900 34px var(--cond); font-style: italic; line-height: 1; margin-top: 2px; }
.rk4 { font: 900 20px var(--cond); } .rk4 small { font-size: 11px; letter-spacing: 1px; opacity: .8; }

/* market */
.bundle { position: relative; height: 150px; border-radius: 24px; padding: 14px; overflow: hidden; background: linear-gradient(120deg, #6B3BFF, #D83BD2 60%, #FF7A59); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); display: flex; flex-direction: column; flex: none; }
.bundle.st { background: linear-gradient(120deg, #B97A12, #F5C451 70%, #FFE9A6); color: #2A1800; }
.bundle > b { font: 900 30px var(--cond); font-style: italic; letter-spacing: .5px; line-height: 1; margin-top: 4px; }
.bundle .sub { font-size: 12px; opacity: .9; margin-top: 3px; }
.bundle .off { position: absolute; right: 12px; top: 12px; height: 24px; padding: 0 9px; border-radius: 12px; background: #0B0D15; color: #fff; font: 900 12px var(--cond); letter-spacing: .8px; display: grid; place-items: center; }
.bp { margin-top: auto; display: flex; align-items: center; gap: 8px; }
.bp s { display: flex; align-items: center; gap: 3px; font: 800 13px var(--cond); opacity: .75; }
.bp .cv { height: 32px; padding: 0 12px 0 8px; border-radius: 16px; background: #0B0D15; color: #fff; font-size: 17px; }
.prb { height: 34px; padding: 0 16px; border-radius: 17px; background: #0B0D15; color: #fff; font: 900 17px var(--cond); display: grid; place-items: center; }
.bart { position: absolute; right: 16px; bottom: 14px; line-height: 0; }
.bart .mb { width: 84px; height: 84px; box-shadow: 0 0 0 4px #7DF9FF, 0 0 30px #7DF9FF; }
.cats { display: flex; gap: 6px; overflow: hidden; flex: none; } .cats .chip { flex: none; }
.item { position: relative; } .item b { font-size: 13px; white-space: nowrap; }
.tag { position: absolute; top: -7px; left: 50%; transform: translateX(-50%); height: 16px; padding: 0 7px; border-radius: 8px; background: var(--violet); font: 900 9px var(--cond); letter-spacing: .8px; display: grid; place-items: center; white-space: nowrap; z-index: 2; }

/* item preview */
.pv { height: 226px; border-radius: 24px; position: relative; overflow: hidden; background: radial-gradient(ellipse at 50% 100%, #5A1206, #12060A 70%); border: 1px solid var(--line); flex: none; }
.pv .mb { position: absolute; left: 190px; top: 150px; width: 72px; height: 72px; }
.fire { position: absolute; left: 20px; top: 152px; width: 212px; height: 40px; border-radius: 30px; transform: rotate(8deg); background: linear-gradient(90deg, transparent, #FF3B00 40%, #FF9A00 75%, #FFE08A); filter: blur(4px); }
.pvramp { position: absolute; left: -10px; top: 196px; width: 380px; height: 5px; border-radius: 3px; background: #3B2A26; box-shadow: 0 0 12px rgba(255,98,0,.9); transform: rotate(8deg); transform-origin: left; }
.chip.ep { position: absolute; left: 12px; top: 12px; background: var(--violet); border: 0; color: #fff; }

/* gold store */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 8px; }
.pack { position: relative; border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); border: 1px solid var(--line); padding: 14px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pack.hot { border-color: rgba(245,196,81,.6); background: linear-gradient(180deg, rgba(245,196,81,.18), rgba(245,196,81,.04)); }
.pack .pile { display: flex; height: 34px; } .pack .pile svg { margin: 0 -7px; }
.pack b { font: 900 24px var(--cond); font-style: italic; } .pack .bn { font: 800 10px var(--cond); letter-spacing: 1px; color: var(--energy); height: 12px; }
.pack .pr { width: 100%; height: 32px; border-radius: 12px; background: #fff; color: #0B0D15; font: 900 15px var(--cond); display: grid; place-items: center; margin-top: 4px; }
.pack .tag { background: var(--gold); color: #2A1800; }

/* pass */
.passh { border-radius: 24px; padding: 14px; background: linear-gradient(120deg, #0AA6D6, #6B3BFF 70%, #D83BD2); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); flex: none; }
.passh b { display: block; font: 900 30px var(--cond); font-style: italic; margin-top: 2px; line-height: 1; } .passh b small { font-size: 15px; opacity: .8; }
.prow { display: grid; grid-template-columns: 1fr 34px 1fr; gap: 8px; align-items: center; }
.pn { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid var(--line); display: grid; place-items: center; font: 900 14px var(--cond); }
.prow.done .pn { background: var(--energy); color: #142A00; border: 0; } .prow.now .pn { background: #fff; color: #0B0D15; border: 0; box-shadow: 0 0 16px rgba(255,255,255,.5); }
.pt { position: relative; height: 52px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid var(--line); display: flex; align-items: center; gap: 8px; padding: 0 12px; }
.pt b { font: 900 13px var(--cond); letter-spacing: .5px; white-space: nowrap; }
.pt.clm { border-color: var(--gold); background: rgba(245,196,81,.14); box-shadow: 0 0 14px rgba(245,196,81,.25); } .pt.got { opacity: .55; } .pt.lock { border-color: rgba(245,196,81,.28); }
.pt > i { position: absolute; right: 8px; top: 50%; margin-top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--energy); display: grid; place-items: center; }
.pt > i.lk { background: rgba(255,255,255,.12); }

/* profile v2 */
.badges { display: flex; gap: 8px; margin-top: 8px; }
.bdg { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; }

/* ---------- season tiers, daily cup, achievements ---------- */
.tb { display: inline-grid; place-items: center; border-radius: 30%; flex: none; vertical-align: middle; }
.fstrip.season { gap: 11px; }
.fstrip.season small { font: 800 11px var(--cond); letter-spacing: .6px; color: #C9CFDD; display: flex; align-items: center; gap: 4px; }
.fstrip.season .nx { display: flex; flex-direction: column; align-items: center; gap: 3px; font: 800 11px var(--cond); }
.mode.cupm { background: linear-gradient(150deg, #3A1D4F, #1A1530 70%); border-color: rgba(255,155,234,.35); }
.mode.goalm { background: linear-gradient(150deg, #3B2E12, #18160F 70%); border-color: rgba(255,227,144,.3); }
.mode .mi { position: absolute; left: 12px; top: 12px; }
.mode .dot { top: 8px; right: 8px; }
.mode p span[data-cd] { font: 800 12px var(--cond); font-variant-numeric: tabular-nums; }
.gl .tx small { display: block; font-size: 11px; color: var(--mut); margin: -3px 0 5px; }
.gl .stars { display: inline-flex; gap: 1px; margin-left: 6px; vertical-align: 1px; }
.gl.ready { border-color: rgba(168,255,74,.45); background: rgba(168,255,74,.07); }
.gl.done { opacity: .55; }
.cuph { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; flex: none; }
.cd { text-align: center; }
.cd small { display: block; font: 800 11px var(--cond); letter-spacing: 1.5px; color: rgba(255,255,255,.75); }
.cd b { display: block; font: 900 46px var(--cond); font-style: italic; line-height: 1.05; font-variant-numeric: tabular-nums; text-shadow: 0 4px 0 rgba(0,0,0,.5); }
.cupp { flex: none; }
.cupp .cardx { padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cupp small { font: 800 9px var(--cond); letter-spacing: .9px; color: var(--mut); white-space: nowrap; }
.cupp .gold { border-color: rgba(245,196,81,.5); background: rgba(245,196,81,.08); }
.champ { display: flex; align-items: center; gap: 10px; padding: 10px 12px; flex: none; }
.champ b { font: 900 19px var(--cond); letter-spacing: .8px; display: block; }

/* Turnstile check (shown only when Cloudflare asks for a click) and Google account card */
.captcha { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(4,5,10,.82); opacity: 0; pointer-events: none; transition: opacity .2s; }
.captcha.show { opacity: 1; pointer-events: auto; }
.captcha > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px; border-radius: 24px; background: #121521; border: 1px solid var(--line); text-align: center; }
.captcha b { font: 900 20px var(--cond); letter-spacing: 1px; color: #fff; }
.captcha span { font-size: 12px; color: #C9CFDD; margin-bottom: 6px; }
.gacc { padding: 11px 12px; display: flex; flex-direction: column; gap: 8px; font-size: 11px; line-height: 1.45; color: #C9CFDD; }
.gacc .row { display: flex; gap: 10px; align-items: center; }
.gbtn { height: 42px; border-radius: 14px; background: #fff; color: #1F1F1F; display: flex; align-items: center; justify-content: center; gap: 10px; font: 800 14px var(--cond); letter-spacing: 1px; cursor: pointer; }
.gacc a { color: var(--mut); text-align: center; text-decoration: underline; cursor: pointer; }