/* =====================================================================
   TRACKRECORD SCOREBOARD — standalone build used by the public site and /demo.
   Same look as the production TV scoreboard (/scoreboard), but it shares NO code
   or data with the app. Every rule is prefixed sbm-/sb- so it can sit anywhere.
   Three layouts: TV (fixed 1920x1080 stage, scaled), CROP (a scaled window onto
   the TV stage, for feature previews) and VERT (phones: re-flowed vertically).
   ===================================================================== */
.sb-root{
  position:relative; width:100%; overflow:hidden; color:#eef3ff; text-align:left;
  font-family:'Montserrat','Inter','Segoe UI',system-ui,sans-serif;
  background:
    radial-gradient(1300px 720px at 80% -12%, rgba(44,78,150,.34), transparent 62%),
    radial-gradient(1000px 640px at 4% 108%, rgba(24,58,132,.26), transparent 62%),
    linear-gradient(180deg,#060b18 0%,#03060d 100%);
}
.sb-root *{box-sizing:border-box;}
.sb-root.sb-tvmode{aspect-ratio:16/9;}
.sb-root button{font-family:inherit;}
.sbm-stage{position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0;}
.sbm-card{
  position:absolute; border-radius:22px;
  background:linear-gradient(180deg, rgba(21,33,62,.94), rgba(9,15,30,.96));
  border:1.5px solid rgba(112,142,208,.24);
  box-shadow:0 14px 44px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
}

/* ---------- Header ---------- */
.sbm-header{position:absolute; left:60px; right:60px; top:18px; height:172px; display:flex; align-items:center;}
.sbm-brand{width:850px; position:relative; padding-left:26px;}
.sbm-brand::before{content:''; position:absolute; left:0; top:6px; bottom:6px; width:4px; background:linear-gradient(180deg,#f5c24a,rgba(245,194,74,.15)); border-radius:2px;}
.sbm-brand-the{font-size:22px; font-weight:700; letter-spacing:.6em; color:#dfe7fb; line-height:1; margin-bottom:2px; padding-left:6px;}
.sbm-brand-name{font-weight:900; line-height:.92; color:#fff; white-space:nowrap; text-shadow:0 4px 24px rgba(255,255,255,.12);}
.sbm-brand-name .d{font-size:100px; letter-spacing:1px;}
.sbm-brand-name .a{font-size:56px; letter-spacing:2px; margin-left:12px; color:#f1f5ff;}
.sbm-brand-tag{font-size:20px; font-weight:600; letter-spacing:.44em; color:#8d9bbd; margin-top:6px; padding-left:6px; white-space:nowrap;}
.sbm-divider-v{width:2px; height:120px; background:linear-gradient(180deg,transparent,rgba(245,194,74,.7),transparent); margin:0 38px 0 0;}
.sbm-center{flex:1; text-align:left; position:relative; top:0;}
.sbm-script{
  font-family:'Mrs Saint Delafield','Allura','Brush Script MT',cursive; font-size:124px; line-height:.95; font-weight:400;
  background:linear-gradient(180deg,#fff4cf 0%,#f7cf6a 50%,#d9992c 100%); -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 22px rgba(245,194,74,.35));
}
.sbm-center-sub{font-size:18px; font-weight:600; letter-spacing:.34em; color:#aeb9d6; margin-top:2px; padding-left:16px; white-space:nowrap;}
.sbm-center-sub i{font-style:normal; color:#56627f; margin:0 .35em;}
.sbm-clock{width:236px; text-align:right; align-self:flex-start; margin-top:8px;}
.sbm-clock-top{display:flex; justify-content:flex-end; align-items:center; gap:14px;}
.sbm-clock-date{font-size:22px; font-weight:600; letter-spacing:.26em; color:#9fb0d6;}
.sbm-clock-time{font-size:54px; font-weight:800; color:#fff; line-height:1.05; margin-top:2px; white-space:nowrap;}
.sbm-live{display:inline-flex; align-items:center; gap:9px; margin-top:0; font-size:14px; font-weight:700; letter-spacing:.2em; color:#7e8fb4;}
.sbm-live-dot{width:11px; height:11px; border-radius:50%; background:#3ee08c; box-shadow:0 0 12px #3ee08c; animation:sbm-pulse 2s ease-in-out infinite;}
.sbm-live.warn .sbm-live-dot{background:#ffb13d; box-shadow:0 0 12px #ffb13d;}
.sbm-live.warn{color:#ffb13d;}
@keyframes sbm-pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.45; transform:scale(.82);}}

/* ---------- Weekly goal ---------- */
.sbm-goal{left:60px; top:204px; width:772px; height:212px; padding:24px 28px 0 28px;}
.sbm-goal-top{display:flex; align-items:center; height:130px;}
.sbm-goal-label{width:200px; flex:none;}
.sbm-goal-label .s{font-size:44px; color:#f5c24a; line-height:1; filter:drop-shadow(0 0 10px rgba(245,194,74,.5));}
.sbm-goal-label .t1{font-size:18px; white-space:nowrap; font-weight:800; letter-spacing:.12em; color:#dbe4fb; margin-top:4px;}
.sbm-goal-label .t2{font-size:37px; white-space:nowrap; font-weight:900; color:#fff; line-height:1.05;}
.sbm-goal-nums{flex:1; display:flex; align-items:baseline; justify-content:center; white-space:nowrap;}
.sbm-goal-cur{font-size:122px; font-weight:900; color:#3ee08c; line-height:1; text-shadow:0 0 34px rgba(62,224,140,.45);}
.sbm-goal-slash{font-size:90px; font-weight:300; color:#b9c6e6; margin:0 10px; line-height:1;}
.sbm-goal-max{font-size:122px; font-weight:900; color:#fff; line-height:1;}
.sbm-goal-togo{width:120px; text-align:right; line-height:1.05;}
.sbm-goal-togo .n{font-size:54px; font-weight:900; color:#fff;}
.sbm-goal-togo .l{font-size:25px; font-weight:800; letter-spacing:.08em; color:#cfd9f2;}
.sbm-goal-togo.hit .n{color:#f5c24a; font-size:40px;}
.sbm-bar{position:relative; height:36px; border-radius:18px; background:rgba(8,13,28,.95); border:1.5px solid rgba(62,224,140,.55); overflow:hidden;}
.sbm-bar-fill{
  position:absolute; left:0; top:0; bottom:0; width:0%; border-radius:18px;
  background:linear-gradient(90deg,#1fbf6a,#4cf0a0); box-shadow:0 0 20px rgba(62,224,140,.6);
  transition:width 1.3s cubic-bezier(.22,1,.36,1);
}
.sbm-bar::after{content:''; position:absolute; inset:0; background:repeating-linear-gradient(90deg, transparent 0, transparent calc(5% - 3px), rgba(7,12,26,.92) calc(5% - 3px), rgba(7,12,26,.92) 5%); pointer-events:none;}

/* ---------- Production tiles ---------- */
.sbm-tiles{position:absolute; left:844px; top:204px; width:576px; height:212px; display:flex; gap:10px;}
.sbm-tile{flex:1; text-align:center; padding:16px 4px 0; position:relative; --c:#4d9bff; --cr:77,155,255; border-radius:18px; border:1.5px solid var(--c);
  background:linear-gradient(180deg, rgba(var(--cr),.17), rgba(7,12,26,.94) 72%); box-shadow:0 0 24px -8px rgba(var(--cr),.75), 0 10px 30px rgba(0,0,0,.4);}
.sbm-tile .ic{font-size:40px; line-height:1; filter:drop-shadow(0 0 12px var(--c));}
.sbm-tile .lb{font-size:22px; font-weight:800; letter-spacing:.06em; color:var(--c); margin-top:6px; line-height:1.15;}
.sbm-tile .nm{font-size:76px; font-weight:900; line-height:1; color:var(--c); margin-top:4px; text-shadow:0 0 26px var(--c);}
.sbm-tile .sub{font-size:15px; font-weight:700; letter-spacing:.03em; color:#9fb0d6; margin-top:10px; white-space:nowrap;}

/* ---------- Leaderboard ---------- */
.sbm-board{left:60px; top:430px; width:1360px; height:478px; padding:0 20px;}
.sbm-board-head{height:68px; display:flex; align-items:center; justify-content:space-between; padding:0 8px;}
.sbm-board-title{font-size:32px; font-weight:800; letter-spacing:.2em; color:#f5c24a; display:flex; align-items:center; gap:16px;}
.sbm-board-title .tr{font-size:38px; filter:drop-shadow(0 0 12px rgba(245,194,74,.55));}
.sbm-tabs{display:flex; align-items:center; gap:6px; padding:5px; border-radius:30px; background:rgba(5,9,20,.8); border:1.5px solid rgba(112,142,208,.2);}
.sbm-tab{
  font-family:inherit; font-size:19px; font-weight:700; letter-spacing:.08em; color:#8d9bbd; background:none; border:1.5px solid transparent;
  padding:9px 26px; border-radius:26px; cursor:pointer; white-space:nowrap; transition:all .25s;
}
.sbm-tab.on{color:#fff; border-color:#f5c24a; background:rgba(245,194,74,.1); box-shadow:0 0 16px rgba(245,194,74,.3);}
.sbm-note{position:absolute; left:28px; bottom:10px; font-size:14px; font-weight:600; letter-spacing:.06em; color:#6f7ea3; opacity:0; transition:opacity .3s;}
.sbm-note.on{opacity:1;}

.sbm-players{position:absolute; left:20px; right:20px; top:70px; height:394px; display:flex; gap:16px;}
.sbm-pc{
  flex:1; position:relative; border-radius:18px; padding:14px 10px 0; text-align:center; overflow:hidden;
  background:linear-gradient(180deg, rgba(23,36,68,.92), rgba(10,17,34,.94)); border:1.5px solid rgba(112,142,208,.22);
  transition:border-color .5s, box-shadow .5s;
}
.sbm-pc.gold{
  flex:1.1; border-color:#f5c24a; background:linear-gradient(180deg, rgba(74,56,14,.62), rgba(14,19,36,.96) 70%);
  box-shadow:0 0 0 1px rgba(245,194,74,.35), 0 0 52px -6px rgba(245,194,74,.6);
}
.sbm-rib{
  position:absolute; left:14px; top:0; width:44px; height:58px; display:flex; align-items:flex-start; justify-content:center; padding-top:7px;
  font-size:30px; font-weight:900; color:#0b1020; background:#56627f;
  clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%);
}
.sbm-pc.gold .sbm-rib{background:linear-gradient(180deg,#ffe08a,#d9992c);}
.sbm-pc.silver .sbm-rib{background:linear-gradient(180deg,#e7edf9,#9aa7c2);}
.sbm-pc.bronze .sbm-rib{background:linear-gradient(180deg,#f0b27a,#b8692f);}
.sbm-av{position:relative; width:82px; height:82px; margin:0 auto; border-radius:50%; overflow:hidden; border:3px solid rgba(160,180,225,.55); background:#0e1630;}
.sbm-pc.gold .sbm-av{border-color:#f5c24a; box-shadow:0 0 22px rgba(245,194,74,.55);}
.sbm-av img{width:100%; height:100%; object-fit:cover; display:block;}
.sbm-av-fb{display:none; position:absolute; inset:0; align-items:center; justify-content:center; font-size:36px; font-weight:900; color:#0b1020;}
.sbm-name{font-size:32px; font-weight:800; color:#fff; line-height:1.15; margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sbm-pts{display:flex; align-items:baseline; justify-content:center; gap:8px; line-height:1; margin-top:2px;}
.sbm-pts .v{font-size:68px; font-weight:900; color:#fff;}
.sbm-pts .u{font-size:25px; font-weight:800; color:#cfd9f2;}
.sbm-pc.gold .sbm-pts .v{color:#ffd569; text-shadow:0 0 30px rgba(245,194,74,.5);}
.sbm-pbar{height:9px; border-radius:5px; background:rgba(255,255,255,.1); margin:6px 18px 0; overflow:hidden;}
.sbm-pbar i{display:block; height:100%; width:0%; border-radius:5px; background:linear-gradient(90deg,#6fa8ff,#a9c8ff); transition:width 1.2s cubic-bezier(.22,1,.36,1);}
.sbm-pc.gold .sbm-pbar i{background:linear-gradient(90deg,#3ee08c,#f5c24a);}
.sbm-ln{display:flex; justify-content:center; gap:16px; margin-top:7px; font-size:21px; font-weight:800; color:#fff;}
.sbm-ln span{display:inline-flex; align-items:center; gap:5px;}
.sbm-ln b{font-weight:800;}
.sbm-next{position:absolute; left:0; right:0; bottom:0; height:72px; padding:10px 12px; text-align:left; display:flex; align-items:center; gap:12px; background:rgba(8,13,28,.9); border-top:1.5px solid rgba(112,142,208,.22);}
.sbm-next .ar{font-size:30px; color:#7fb0ff; flex:none;}
.sbm-next .h{font-size:18px; font-weight:800; letter-spacing:.04em; color:#fff; line-height:1.15;}
.sbm-next .s{font-size:16px; font-weight:600; color:#aab8d8; line-height:1.2; margin-top:2px;}
.sbm-next.lead{background:linear-gradient(180deg,#f9d57a,#e7a93a); border-top-color:#ffe39a;}
.sbm-next.lead .ar{color:#3a2506; font-size:34px;}
.sbm-next.lead .h{color:#2b1b03;}
.sbm-next.lead .s{color:#4a3208; font-weight:700;}
.sbm-next.tie{background:linear-gradient(180deg,rgba(245,194,74,.28),rgba(8,13,28,.92)); border-top-color:#f5c24a;}
.sbm-players.n5 .sbm-name{font-size:28px;} .sbm-players.n5 .sbm-pts .v{font-size:60px;} .sbm-players.n5 .sbm-ln{font-size:19px; gap:10px;} .sbm-players.n5 .sbm-apps b{font-size:26px;}
.sbm-players.n6 .sbm-name{font-size:25px;} .sbm-players.n6 .sbm-pts .v{font-size:56px;} .sbm-players.n6 .sbm-ln{font-size:18px; gap:8px;}
.sbm-players.n5 .sbm-next .h, .sbm-players.n6 .sbm-next .h{font-size:16px;} .sbm-players.n5 .sbm-next .s, .sbm-players.n6 .sbm-next .s{font-size:14px;}
.sbm-players.n6 .sbm-av{width:70px; height:70px;} .sbm-players.n6 .sbm-apps{padding:2px 10px; gap:5px;} .sbm-players.n6 .sbm-apps b{font-size:22px;} .sbm-players.n6 .sbm-apps .u{font-size:12px;}
.sbm-empty{margin:auto; font-size:26px; font-weight:700; color:#6f7ea3; letter-spacing:.1em;}

/* ---------- Today strip ---------- */
.sbm-strip{position:absolute; left:60px; top:922px; width:1020px; height:126px; display:flex; gap:14px;}
.sbm-st{position:relative; flex:1; border-radius:18px; padding:14px 14px 0 14px; --c:#3ee08c;
  background:linear-gradient(180deg, rgba(21,33,62,.94), rgba(9,15,30,.96)); border:1.5px solid rgba(112,142,208,.24); box-shadow:0 10px 30px rgba(0,0,0,.45);}
.sbm-st-row{display:flex; align-items:center; gap:11px;}
.sbm-st-ic{width:48px; height:48px; border-radius:15px; display:flex; align-items:center; justify-content:center; font-size:25px; flex:none; background:rgba(255,255,255,.06); border:1.5px solid var(--c); box-shadow:0 0 16px -2px var(--c);}
.sbm-st-lb{font-size:13.5px; font-weight:800; letter-spacing:.08em; color:#cfd9f2; white-space:nowrap;}
.sbm-st-val{font-size:40px; font-weight:900; color:#fff; line-height:1.05; white-space:nowrap;}
.sbm-st-val .of{font-size:30px; font-weight:400; color:#aab8d8; margin-left:6px;}
.sbm-st-bar{height:10px; border-radius:6px; background:rgba(255,255,255,.1); margin-top:6px; overflow:hidden;}
.sbm-st-bar i{display:block; height:100%; width:0%; border-radius:6px; background:var(--c); box-shadow:0 0 12px var(--c); transition:width 1.2s cubic-bezier(.22,1,.36,1);}
.sbm-st-sub{margin-top:4px; font-size:14px; font-weight:700; letter-spacing:.05em; color:#8d9bbd; white-space:nowrap;}

/* ---------- Live activity ---------- */
.sbm-feed{left:1440px; top:526px; width:440px; height:382px; padding:16px 20px 0;}
.sbm-feed-head{display:flex; align-items:center; justify-content:space-between; height:44px;}
.sbm-feed-title{display:flex; align-items:center; gap:12px; font-size:22px; font-weight:800; letter-spacing:.16em; color:#fff;}
.sbm-feed-list{position:absolute; left:20px; right:20px; top:60px; bottom:10px; overflow:hidden;}
.sbm-fr{display:flex; align-items:center; gap:9px; padding:6px 0; border-bottom:1.5px solid rgba(112,142,208,.16);}
.sbm-fr:last-child{border-bottom:none;}
.sbm-fr.fresh{animation:sbm-fresh 2.6s ease-out;}
@keyframes sbm-fresh{0%{background:rgba(245,194,74,.32); transform:translateX(-12px); opacity:0;} 12%{transform:translateX(0); opacity:1;} 100%{background:transparent;}}
.sbm-ft{width:68px; flex:none; font-size:14px; font-weight:600; color:#8d9bbd; line-height:1.2;}
.sbm-fi{width:30px; flex:none; font-size:20px; text-align:center;}
.sbm-fx{flex:1; font-size:17px; font-weight:600; color:#f1f5ff; line-height:1.2;}
.sbm-fx small{display:block; font-size:13px; font-weight:600; color:#3ee08c; margin-top:1px;}
.sbm-fe{margin:34px 0 0; text-align:center; font-size:22px; font-weight:700; letter-spacing:.06em; color:#6f7ea3; line-height:1.5;}

/* ---------- Premium card ---------- */
.sbm-prem{left:1448px; top:868px; width:412px; height:166px; padding:20px 22px; --c:#3ee08c;}
.sbm-prem-row{display:flex; align-items:center; gap:18px;}
.sbm-prem-ic{width:78px; height:78px; border-radius:18px; display:flex; align-items:center; justify-content:center; font-size:42px; flex:none; background:rgba(62,224,140,.1); border:1.5px solid var(--c); box-shadow:0 0 20px -2px var(--c);}
.sbm-prem-lb{font-size:15px; font-weight:800; letter-spacing:.13em; color:#cfd9f2; line-height:1.25;}
.sbm-prem-lb b{color:#3ee08c;}
.sbm-prem-val{font-size:52px; font-weight:900; color:#fff; line-height:1.05; white-space:nowrap;}
.sbm-prem-val .of{font-size:28px; font-weight:400; color:#aab8d8; margin-left:6px;}
.sbm-prem-sub{font-size:14px; font-weight:700; color:#8d9bbd; letter-spacing:.04em; margin-top:2px;}
.sbm-prem .sbm-st-bar{margin-top:12px; height:13px;}

/* ---------- Celebrations ---------- */
.sbm-celeb{
  position:absolute; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; pointer-events:none; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(ellipse at center, rgba(3,6,14,.82) 0%, rgba(3,6,14,.62) 55%, rgba(3,6,14,.22) 100%);
  --c:#f5c24a;
}
.sbm-celeb.show{opacity:1;}
.sbm-celeb-card{text-align:center; transform:scale(.9); opacity:0; filter:blur(6px);}
.sbm-celeb.show .sbm-celeb-card{animation:sbm-celeb-in .7s cubic-bezier(.16,1,.3,1) forwards;}
@keyframes sbm-celeb-in{to{transform:scale(1); opacity:1; filter:blur(0);}}
.sbm-celeb-ic{font-size:120px; line-height:1; filter:drop-shadow(0 0 40px var(--c));}
.sbm-celeb-title{font-size:132px; font-weight:900; line-height:1.02; letter-spacing:.01em; color:#fff; margin-top:8px; text-shadow:0 0 60px var(--c), 0 0 18px var(--c); white-space:nowrap;}
.sbm-celeb-sub{font-size:38px; font-weight:700; letter-spacing:.34em; color:var(--c); margin-top:14px; text-shadow:0 0 24px var(--c);}
.sbm-celeb-line{width:560px; height:3px; margin:26px auto 0; background:linear-gradient(90deg,transparent,var(--c),transparent); box-shadow:0 0 22px var(--c); opacity:.9;}

/* ---------- Offline / sign-in notice ---------- */
.sbm-banner{position:absolute; left:50%; bottom:6px; transform:translateX(-50%); z-index:60; padding:6px 22px; border-radius:20px; font-size:15px; font-weight:700; letter-spacing:.1em; color:#ffb13d; background:rgba(40,28,6,.92); border:1.5px solid rgba(255,177,61,.5); display:none;}
.sbm-banner.on{display:block;}

/* ---------- the 📋 APPS pill on each leaderboard card ---------- */
.sbm-apps{display:inline-flex; align-items:baseline; justify-content:center; gap:7px; margin-top:7px; padding:2px 16px 3px; border-radius:22px;
  background:rgba(139,123,255,.16); border:1.5px solid rgba(139,123,255,.6);}
.sbm-apps .ic{font-size:19px; align-self:center;}
.sbm-apps b{font-size:30px; font-weight:900; color:#fff; line-height:1.1;}
.sbm-apps .u{font-size:14px; font-weight:800; letter-spacing:.12em; color:#c9c2ff;}
.sbm-pc.gold .sbm-apps{background:rgba(245,194,74,.16); border-color:rgba(245,194,74,.65);}
.sbm-pc.gold .sbm-apps .u{color:#ffe39a;}

/* ---------- APP RACE (above Live Activity) ---------- */
.sbm-race{left:1440px; top:158px; width:440px; height:354px; padding:14px 18px 0; border-color:rgba(77,155,255,.5); box-shadow:0 14px 44px rgba(0,0,0,.5), 0 0 30px -12px rgba(77,155,255,.65), inset 0 1px 0 rgba(255,255,255,.05);}
.sbm-race-head{display:flex; align-items:center; justify-content:space-between; height:40px;}
.sbm-race-title{font-size:20px; font-weight:800; letter-spacing:.05em; color:#e6f0ff; white-space:nowrap;}
.sbm-race .sbm-tabs{padding:3px; gap:2px;}
.sbm-rtab{font-family:inherit; font-size:12.5px; font-weight:700; letter-spacing:.03em; color:#8d9bbd; background:none; border:1.5px solid transparent;
  padding:7px 10px; border-radius:20px; cursor:pointer; white-space:nowrap; transition:all .25s;}
.sbm-rtab.on{color:#fff; border-color:#f5c24a; background:rgba(245,194,74,.1); box-shadow:0 0 12px rgba(245,194,74,.3);}
.sbm-race-rows{--rh:42px; margin-top:8px; height:212px; display:flex; flex-direction:column;}
.sbm-race-rows.r6{--rh:35px;}
.sbm-rr{flex:none; height:var(--rh); display:flex; align-items:center; gap:10px; padding:0 8px; border-radius:12px; border:1.5px solid transparent;
  box-shadow:inset 0 -1.5px 0 rgba(112,142,208,.14);}
.sbm-rb{flex:none; width:31px; height:31px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:17px; font-weight:900; color:#dfe7fb; background:#38425e;}
.sbm-rav{position:relative; flex:none; width:34px; height:34px; border-radius:50%; overflow:hidden; border:2px solid rgba(160,180,225,.5); background:#0e1630;}
.sbm-rav img{width:100%; height:100%; object-fit:cover; display:block;}
.sbm-rav .sbm-av-fb{font-size:14px;}
.sbm-rn{flex:1; min-width:0; font-size:24px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sbm-ra{flex:none; display:flex; align-items:baseline; gap:6px;}
.sbm-ra b{font-size:34px; font-weight:900; color:#fff; line-height:1;}
.sbm-ra span{font-size:13px; font-weight:800; letter-spacing:.1em; color:#aab8d8;}
.sbm-rr.gold{border-color:#f5c24a; background:linear-gradient(90deg,rgba(245,194,74,.24),rgba(245,194,74,.04)); box-shadow:0 0 22px -6px rgba(245,194,74,.6);}
.sbm-rr.gold .sbm-rb{background:linear-gradient(180deg,#ffe08a,#d9992c); color:#241703;}
.sbm-rr.gold .sbm-rav{border-color:#f5c24a;}
.sbm-rr.gold .sbm-ra b{color:#ffd569; text-shadow:0 0 18px rgba(245,194,74,.5);}
.sbm-rr.silver{border-color:rgba(205,215,236,.75); background:linear-gradient(90deg,rgba(205,215,236,.17),rgba(205,215,236,.03));}
.sbm-rr.silver .sbm-rb{background:linear-gradient(180deg,#eef2fb,#9aa7c2); color:#161d2e;}
.sbm-rr.bronze{border-color:rgba(208,138,82,.75); background:linear-gradient(90deg,rgba(208,138,82,.2),rgba(208,138,82,.03));}
.sbm-rr.bronze .sbm-rb{background:linear-gradient(180deg,#f3b983,#b8692f); color:#231106;}
.sbm-race-goal{position:absolute; left:16px; right:16px; bottom:13px;}
.sbm-race-goal-row{display:flex; align-items:baseline; justify-content:space-between;}
.sbm-race-goal-row .lb{font-size:15px; font-weight:800; letter-spacing:.14em; color:#cfd9f2;}
.sbm-race-goal-row .v{font-size:36px; font-weight:900; color:#fff; line-height:1;}
.sbm-race-goal-row .of{font-size:21px; font-weight:400; color:#aab8d8;}
.sbm-race-bar{height:15px; border-radius:8px; margin-top:7px; border-color:rgba(77,155,255,.65);}
.sbm-race-bar .sbm-bar-fill{border-radius:8px; background:linear-gradient(90deg,#1f8fff,#5cc9ff); box-shadow:0 0 16px rgba(77,155,255,.6);}
.sbm-celeb-tag{font-size:24px; font-weight:700; letter-spacing:.4em; color:#9fb0d6; margin-top:16px; min-height:1em;}

/* =====================================================================
   LAYOUT v6 — matches the reference: Premium Race along the bottom right,
   status dot in the clock, compact one-line activity rows.
   ===================================================================== */
.sbm-live .sbm-live-txt{display:none;}
.sbm-live.warn .sbm-live-txt{display:inline;}
.sbm-feed-head{justify-content:space-between;}
.sbm-feed-pill{font-size:13px; font-weight:700; letter-spacing:.08em; color:#aab8d8; padding:5px 12px; border-radius:16px; border:1.5px solid rgba(112,142,208,.3); background:rgba(5,9,20,.7);}
.sbm-ftag{flex:none; font-size:13px; font-weight:700; color:#3ee08c; white-space:nowrap; margin-left:4px;}
.sbm-fr{gap:8px;}
.sbm-ft{width:64px;}

/* ---------- PREMIUM RACE (Life + Health) ---------- */
.sbm-premrace{position:absolute; left:1094px; top:922px; width:572px; height:126px; padding:10px 14px 0; border-radius:20px;
  background:linear-gradient(180deg, rgba(48,12,44,.6), rgba(8,10,24,.96) 70%); border:1.5px solid #ff4fa3;
  box-shadow:0 0 30px -8px rgba(255,79,163,.8), inset 0 0 26px -16px rgba(255,79,163,.8);}
.sbm-pr-head{display:flex; align-items:center; justify-content:space-between; height:30px;}
.sbm-pr-title{font-size:19px; font-weight:800; letter-spacing:.07em; color:#fff; white-space:nowrap; display:flex; align-items:center; gap:9px;}
.sbm-pr-title .ic{font-size:21px;}
.sbm-pr-title .sub{font-size:13px; font-weight:700; letter-spacing:.06em; color:#7fb0ff;}
.sbm-pr-toggle{display:flex; gap:2px; padding:3px; border-radius:18px; background:rgba(5,9,20,.8); border:1.5px solid rgba(255,79,163,.35);}
.sbm-prtab{font-family:inherit; font-size:12px; font-weight:700; letter-spacing:.06em; color:#a38aa0; background:none; border:1.5px solid transparent; padding:4px 11px; border-radius:14px; cursor:pointer; transition:all .25s;}
.sbm-prtab.on{color:#fff; border-color:#ff4fa3; background:rgba(255,79,163,.14); box-shadow:0 0 12px rgba(255,79,163,.45);}
.sbm-pr-body{position:relative; height:76px; margin-top:6px;}
.sbm-pr-goals, .sbm-pr-top3{position:absolute; inset:0; display:flex; gap:10px; transition:opacity .5s ease, transform .5s ease;}
.sbm-premrace[data-view="goals"] .sbm-pr-top3, .sbm-premrace[data-view="top3"] .sbm-pr-goals{opacity:0; pointer-events:none; transform:translateY(6px);}
.sbm-pg{flex:1; min-width:0; padding:8px 11px 0; border-radius:12px; background:rgba(255,255,255,.04); border:1.5px solid rgba(112,142,208,.2); --c:#3ee08c;}
.sbm-pg .lb{font-size:12px; font-weight:800; letter-spacing:.14em; color:#9fb0d6;}
.sbm-pg .v{white-space:nowrap; margin-top:3px; line-height:1.1;}
.sbm-pg .v b{font-size:25px; font-weight:900; color:#fff;}
.sbm-pg .v span{font-size:14px; font-weight:600; color:#aab8d8;}
.sbm-pg .bar{height:6px; border-radius:3px; background:rgba(255,255,255,.1); margin-top:7px; overflow:hidden;}
.sbm-pg .bar i{display:block; height:100%; width:0%; border-radius:3px; background:var(--c); box-shadow:0 0 10px var(--c); transition:width 1.2s cubic-bezier(.22,1,.36,1);}
.sbm-pt{flex:1; min-width:0; display:flex; align-items:center; gap:8px; padding:0 10px; border-radius:12px; background:rgba(255,255,255,.04); border:1.5px solid rgba(112,142,208,.2);}
.sbm-pt.gold{border-color:#f5c24a; background:linear-gradient(90deg,rgba(245,194,74,.2),rgba(245,194,74,.03)); box-shadow:0 0 16px -6px rgba(245,194,74,.6);}
.sbm-pt.silver{border-color:rgba(205,215,236,.75); background:linear-gradient(90deg,rgba(205,215,236,.15),rgba(205,215,236,.03));}
.sbm-pt.bronze{border-color:rgba(208,138,82,.75); background:linear-gradient(90deg,rgba(208,138,82,.18),rgba(208,138,82,.03));}
.sbm-pt-b{flex:none; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; font-weight:900; color:#dfe7fb; background:#38425e;}
.sbm-pt.gold .sbm-pt-b{background:linear-gradient(180deg,#ffe08a,#d9992c); color:#241703;}
.sbm-pt.silver .sbm-pt-b{background:linear-gradient(180deg,#eef2fb,#9aa7c2); color:#161d2e;}
.sbm-pt.bronze .sbm-pt-b{background:linear-gradient(180deg,#f3b983,#b8692f); color:#231106;}
.sbm-pt .sbm-rav{width:36px; height:36px;}
.sbm-pt-t{min-width:0; line-height:1.1;}
.sbm-pt-n{font-size:17px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sbm-pt-v{font-size:21px; font-weight:900; color:#fff; white-space:nowrap;}
.sbm-pt-v small, .sbm-pl-v small{font-size:12px; font-weight:700; color:#aab8d8; margin-left:2px;}
.sbm-pt.empty{justify-content:center; color:#6f7ea3; font-size:20px; font-weight:800;}
.sbm-prleader{position:absolute; left:1678px; top:922px; width:202px; height:126px; padding:12px 14px 0; border-radius:20px; border:1.5px solid #f5c24a;
  background:linear-gradient(180deg, rgba(74,56,14,.55), rgba(10,14,28,.96) 75%); box-shadow:0 0 30px -8px rgba(245,194,74,.7), inset 0 0 24px -16px rgba(245,194,74,.8);}
.sbm-pl-top{font-size:13px; font-weight:800; letter-spacing:.1em; color:#ffd569; white-space:nowrap; display:flex; align-items:center; gap:7px;}
.sbm-pl-body{display:flex; align-items:center; gap:11px; margin-top:12px;}
.sbm-prleader .sbm-rav{width:56px; height:56px; border-color:#f5c24a;}
.sbm-pl-t{min-width:0; line-height:1.1;}
.sbm-pl-n{font-size:21px; font-weight:800; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sbm-pl-v{font-size:27px; font-weight:900; color:#ffd569; text-shadow:0 0 18px rgba(245,194,74,.5); white-space:nowrap;}
.sbm-pl-empty{margin-top:16px; text-align:center; font-size:14px; font-weight:700; letter-spacing:.1em; color:#8d9bbd; line-height:1.5;}


/* ---------- avatars: gradient initials (the demo never uses real photos) ---------- */
.sb-root .sbm-av-fb{display:flex; background-image:linear-gradient(135deg, rgba(255,255,255,.28), rgba(0,0,0,.18)); }
.sb-root .sbm-rav .sbm-av-fb{display:flex;}

/* ---------- a sale lands: the person's card and race row flash ---------- */
.sbm-pc.hit{animation:sbm-hit 1.4s ease-out;}
.sbm-rr.hit{animation:sbm-hit 1.4s ease-out;}
@keyframes sbm-hit{0%{box-shadow:0 0 0 2px rgba(77,155,255,.0);} 18%{box-shadow:0 0 0 2px rgba(120,185,255,.95), 0 0 46px 6px rgba(77,155,255,.65); filter:brightness(1.25);} 100%{filter:none;}}
.sb-root.live-glow .sbm-card{transition:box-shadow .6s;}

/* ---------- phones: toast instead of the full-screen celebration ---------- */
.sb-toast-wrap{position:fixed; left:12px; right:12px; top:76px; z-index:70; pointer-events:none; display:flex; justify-content:center;}
.sb-toast{display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:16px; max-width:420px; width:100%;
  background:linear-gradient(180deg, rgba(23,36,68,.97), rgba(8,13,28,.98)); border:1.5px solid var(--c,#f5c24a);
  box-shadow:0 12px 40px rgba(0,0,0,.6), 0 0 36px -6px var(--c,#f5c24a); transform:translateY(-16px) scale(.96); opacity:0; transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .35s;}
.sb-toast.show{transform:none; opacity:1;}
.sb-toast .ic{font-size:34px; filter:drop-shadow(0 0 14px var(--c,#f5c24a));}
.sb-toast .t{font-size:16px; font-weight:900; color:#fff; letter-spacing:.02em; line-height:1.15;}
.sb-toast .s{font-size:12px; font-weight:700; letter-spacing:.14em; color:var(--c,#f5c24a); margin-top:3px;}

/* =====================================================================
   VERTICAL LAYOUT (phones / narrow screens). Designed at 720px wide and then
   scaled to the screen, so everything stays proportionate and readable.
   ===================================================================== */
.sbm-stage.vert{position:relative; width:720px; height:auto; padding:20px 16px 26px; display:flex; flex-direction:column; gap:14px;}
.sbm-stage.vert > *{position:relative !important; left:auto !important; top:auto !important; right:auto !important; bottom:auto !important; width:auto !important; flex:none;}
.sbm-stage.vert .sbm-celeb{display:none !important;}
.sbm-stage.vert .sbm-card{border-radius:18px;}
.sbm-stage.vert .sbm-header{order:0; height:auto !important; display:grid; grid-template-columns:1fr auto; gap:0 12px; align-items:start; padding:2px 4px 0;}
.sbm-stage.vert .sbm-brand{width:auto; padding-left:0;}
.sbm-stage.vert .sbm-brand-the{font-size:15px; letter-spacing:.5em; padding-left:3px;}
.sbm-stage.vert .sbm-brand-name .d{font-size:60px;} .sbm-stage.vert .sbm-brand-name .a{font-size:34px; margin-left:8px;}
.sbm-stage.vert .sbm-brand-tag{font-size:11px; letter-spacing:.24em; padding-left:3px;}
.sbm-stage.vert .sbm-divider-v{display:none;}
.sbm-stage.vert .sbm-center{grid-column:1 / -1; text-align:left; margin-top:0;}
.sbm-stage.vert .sbm-script{font-size:78px;}
.sbm-stage.vert .sbm-center-sub{font-size:13px; letter-spacing:.3em; padding-left:4px;}
.sbm-stage.vert .sbm-clock{width:auto; margin:0; align-self:start;}
.sbm-stage.vert .sbm-clock-date{font-size:14px; letter-spacing:.2em;} .sbm-stage.vert .sbm-clock-time{font-size:34px;}
.sbm-stage.vert .sbm-goal{order:1; height:auto !important; padding:16px 18px 18px;}
.sbm-stage.vert .sbm-goal-top{height:94px;}
.sbm-stage.vert .sbm-goal-label{width:122px;} .sbm-stage.vert .sbm-goal-label .s{font-size:24px;} .sbm-stage.vert .sbm-goal-label .t1{font-size:11px;} .sbm-stage.vert .sbm-goal-label .t2{font-size:23px;}
.sbm-stage.vert .sbm-goal-cur, .sbm-stage.vert .sbm-goal-max{font-size:78px;} .sbm-stage.vert .sbm-goal-slash{font-size:56px; margin:0 6px;}
.sbm-stage.vert .sbm-goal-togo{width:92px;} .sbm-stage.vert .sbm-goal-togo .n{font-size:36px;} .sbm-stage.vert .sbm-goal-togo .l{font-size:15px;} .sbm-stage.vert .sbm-goal-togo.hit .n{font-size:26px;}
.sbm-stage.vert .sbm-bar{height:24px;}
.sbm-stage.vert .sbm-tiles{order:2; display:grid !important; grid-template-columns:repeat(4,1fr); gap:8px; height:auto !important;}
.sbm-stage.vert .sbm-tile{padding:12px 2px 12px;} .sbm-stage.vert .sbm-tile .ic{font-size:30px;} .sbm-stage.vert .sbm-tile .lb{font-size:15px;} .sbm-stage.vert .sbm-tile .nm{font-size:54px;} .sbm-stage.vert .sbm-tile .sub{font-size:11px; letter-spacing:0; margin-top:6px;}
.sbm-stage.vert .sbm-strip{order:3; display:grid !important; grid-template-columns:1fr 1fr; gap:10px; height:auto !important;}
.sbm-stage.vert .sbm-st{padding:12px 12px 12px;} .sbm-stage.vert .sbm-st-ic{width:42px; height:42px; font-size:22px;} .sbm-stage.vert .sbm-st-lb{font-size:12px;} .sbm-stage.vert .sbm-st-val{font-size:34px;} .sbm-stage.vert .sbm-st-sub{font-size:12px;}
.sbm-stage.vert .sbm-board{order:4; height:auto !important; padding:0 12px 12px;}
.sbm-stage.vert .sbm-board-head{height:58px; padding:0 4px;} .sbm-stage.vert .sbm-board-title{font-size:19px; letter-spacing:.12em; gap:10px;} .sbm-stage.vert .sbm-board-title .tr{font-size:24px;}
.sbm-stage.vert .sbm-tabs{padding:3px; gap:2px;} .sbm-stage.vert .sbm-tab{font-size:12px; padding:6px 10px; letter-spacing:.04em;}
.sbm-stage.vert .sbm-note{display:none;}
.sbm-stage.vert .sbm-players{position:relative !important; left:auto !important; right:auto !important; top:auto !important; height:auto !important; flex-direction:column; gap:8px;}
.sbm-stage.vert .sbm-pc, .sbm-stage.vert .sbm-pc.gold{flex:none !important; display:grid; grid-template-columns:30px 56px 1fr auto; grid-template-rows:auto auto; column-gap:12px; row-gap:3px; align-items:center; text-align:left; padding:10px 14px 10px 10px;}
.sbm-stage.vert .sbm-rib{position:static; width:30px; height:30px; clip-path:none; border-radius:50%; font-size:16px; padding:0; align-items:center; grid-column:1; grid-row:1 / 3;}
.sbm-stage.vert .sbm-av{grid-column:2; grid-row:1 / 3; width:56px; height:56px; margin:0; border-width:2px;}
.sbm-stage.vert .sbm-av-fb{font-size:24px;}
.sbm-stage.vert .sbm-name{grid-column:3; grid-row:1; font-size:22px; margin:0;}
.sbm-stage.vert .sbm-ln{grid-column:3; grid-row:2; justify-content:flex-start; font-size:14px; gap:10px; margin:0;}
.sbm-stage.vert .sbm-pts{grid-column:4; grid-row:1; justify-content:flex-end; margin:0;} .sbm-stage.vert .sbm-pts .v{font-size:34px;} .sbm-stage.vert .sbm-pts .u{font-size:13px;}
.sbm-stage.vert .sbm-apps{grid-column:4; grid-row:2; margin:0; justify-self:end; padding:1px 10px; gap:5px;} .sbm-stage.vert .sbm-apps b{font-size:16px;} .sbm-stage.vert .sbm-apps .u{font-size:10px;} .sbm-stage.vert .sbm-apps .ic{font-size:12px;}
.sbm-stage.vert .sbm-pbar, .sbm-stage.vert .sbm-next{display:none;}
.sbm-stage.vert .sbm-race{order:5; height:auto !important; padding:14px 16px 16px;}
.sbm-stage.vert .sbm-race-title{font-size:18px;} .sbm-stage.vert .sbm-rtab{font-size:11.5px; padding:6px 9px;}
.sbm-stage.vert .sbm-race-rows{height:auto !important; --rh:46px; gap:4px;}
.sbm-stage.vert .sbm-race-goal{position:relative !important; left:auto !important; right:auto !important; bottom:auto !important; margin-top:12px;}
.sbm-stage.vert .sbm-premrace{order:6; height:auto !important; padding:12px 14px 14px;}
.sbm-stage.vert .sbm-pr-title{font-size:16px;} .sbm-stage.vert .sbm-pr-title .sub{font-size:11px;}
.sbm-stage.vert .sbm-pr-body{height:90px;}
.sbm-stage.vert .sbm-pg .v b{font-size:24px;} .sbm-stage.vert .sbm-pg .v span{font-size:12.5px;}
.sbm-stage.vert .sbm-prleader{order:7; height:auto !important; padding:12px 16px 14px;}
.sbm-stage.vert .sbm-pl-body{margin-top:8px;}
.sbm-stage.vert .sbm-feed{order:8; height:372px !important; padding:14px 16px 0;}
.sbm-stage.vert .sbm-fx{font-size:15px;} .sbm-stage.vert .sbm-ft{font-size:12px; width:58px;}