:root{--club:#2E1447;--club2:#431F66;--gold:#FFC83D;--gold2:#D9951A;--pink:#FF3D8B;--mint:#3DDC97;--cream:#FFF4DC;--ink:#1A0B29;
--ui:'Secular One','Arial Hebrew',Arial,sans-serif;--display:'Karantina','Secular One',Impact,sans-serif}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden;background:var(--club);color:var(--cream);font-family:var(--ui);overscroll-behavior:none;-webkit-user-select:none;user-select:none}
button,input{font-family:inherit;font-size:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.screen{position:fixed;inset:0;display:none}
.screen.on{display:flex}
.btn{background:var(--gold);color:var(--ink);font-size:19px;padding:13px 22px;border-radius:999px;box-shadow:0 4px 0 var(--gold2);transition:transform .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--gold2)}
.btn.ghost{background:transparent;color:var(--cream);box-shadow:inset 0 0 0 2px rgba(255,244,220,.35)}

#title{flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center}
.logo{font-family:var(--display);font-weight:700;font-size:clamp(84px,26vw,170px);line-height:.82;color:var(--gold);text-shadow:4px 5px 0 var(--pink),9px 11px 0 var(--ink);transform:rotate(-5deg);direction:ltr;margin-bottom:6px}
.tag{font-size:17px;opacity:.85;max-width:30ch}
#titleCv{width:min(92vw,440px);height:32dvh;flex:1 1 32dvh;min-height:96px;max-height:48dvh} /* takes the room that's left, and gives way first when the title gets crowded */
.namefield{display:flex;flex-direction:column;gap:6px;width:min(88vw,340px);text-align:right}
.namefield label{font-size:14px;opacity:.75}
.namefield input{background:rgba(0,0,0,.25);border:2px solid rgba(255,244,220,.25);border-radius:14px;padding:11px 14px;font-size:20px;-webkit-user-select:text;user-select:text}
.namefield input:focus{border-color:var(--gold);outline:none}
.name-row{display:flex;align-items:stretch;background:rgba(0,0,0,.25);border:2px solid rgba(255,244,220,.25);border-radius:14px;overflow:hidden}
.name-row:focus-within{border-color:var(--gold)}
.name-fixed{display:flex;align-items:center;padding:0 12px 0 8px;font-size:20px;color:var(--gold);background:rgba(255,200,61,.1);border-inline-end:1px solid rgba(255,244,220,.2)}
.namefield .name-row input{flex:1;min-width:0;background:none;border:0;border-radius:0}
.name-hint{font-size:13px;color:var(--gold);opacity:.9;min-height:1.3em}
/* inside a yeshiva the invite line takes the tagline's place, so the buttons stay on screen */
#title.invited .tag{display:none}
.vs-invite{display:block;cursor:pointer;font-family:inherit;margin:6px auto 0;max-width:340px;background:var(--pink);color:#fff;border:3px solid var(--ink);border-radius:999px;padding:8px 16px;font-size:16px;line-height:1.25;text-align:center;box-shadow:0 4px 0 var(--ink)}
.name-hint.ok{color:var(--mint)}.name-hint.bad{color:#FF8FB8}
#title .btn{width:min(88vw,340px);padding-block:10px;font-size:17px} /* lower buttons, more room for the Nehorai (still 44px to tap) */
/* the champions board and, once there is a finished race, a challenge for friends, side by side */
.title-row{display:flex;gap:8px;width:min(88vw,340px)}.title-row .btn{flex:1 1 0;min-width:0;padding-inline:8px}
.best{font-size:15px;opacity:.9;max-width:min(92vw,440px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.best b{color:var(--gold);font-weight:400;direction:ltr;unicode-bidi:isolate}
#devBtn,#devPts{position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px;z-index:3;background:rgba(26,11,41,.7);border:2px dashed rgba(255,244,220,.4);padding:6px 12px;border-radius:999px;font-size:13px}
.res-rec{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.res-rec span{background:var(--pink);color:#fff;border-radius:999px;padding:4px 12px;font-size:14px}
#devPts{top:calc(50px + env(safe-area-inset-top))}
#devBtn[hidden],#devPts[hidden],#duelBtn[hidden],#challengeBtn[hidden],.vs-invite[hidden],.best[hidden],.res-rec[hidden]{display:none}

#garage{flex-direction:column;height:100dvh}
.steps{display:flex;gap:6px;padding:calc(8px + env(safe-area-inset-top)) 12px 4px}
.step{flex:1;color:rgba(255,244,220,.5);font-size:15px;padding:8px 2px;border-bottom:3px solid rgba(255,244,220,.14)}
.step.on{color:var(--gold);border-color:var(--gold)}
.step.done{color:var(--cream);border-color:var(--pink)}
.stage{position:relative;flex:1 1 auto;min-height:170px}
#stageCv{position:absolute;inset:0;width:100%;height:100%}
.plate{position:absolute;top:8px;right:14px;text-align:right;pointer-events:none}
.plate b{display:block;font-family:var(--display);font-size:44px;line-height:.9;color:var(--gold);text-shadow:3px 3px 0 var(--pink)}
.plate span{font-size:14px;opacity:.8}
.panel{flex:0 0 auto;height:min(47dvh,400px);display:flex;flex-direction:column;background:var(--club2);border-radius:22px 22px 0 0;padding:10px 12px 0}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:10px;flex:0 0 auto}
.tabs::-webkit-scrollbar{display:none}
/* the Nehorai builder has 9 categories: they wrap into rows so none hides off screen on a phone */
#tabs{flex-wrap:wrap;gap:5px}
#tabs .tab{padding:6px 11px}
.tab{flex:0 0 auto;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.22);font-size:15px;white-space:nowrap}
.tab.on{background:var(--gold);color:var(--ink)}
.opts{flex:1;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding-bottom:12px;align-content:start}
.opt{background:rgba(0,0,0,.22);border:2px solid transparent;border-radius:14px;padding:6px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:13px;line-height:1.2}
.opt.on{border-color:var(--gold);background:rgba(255,200,61,.13)}
.opt canvas{width:64px;height:64px}
.opts.cards{grid-template-columns:1fr}
.vcard{display:grid;grid-template-columns:118px 1fr;gap:10px;align-items:center;text-align:right;padding:8px 10px}
.vcard canvas{width:118px;height:72px}
.vcard h3{font-size:18px;font-weight:400}
.vcard p{font-size:13px;opacity:.75;margin-bottom:4px}
.stat{display:flex;align-items:center;gap:6px;font-size:12px}
.stat i{width:50px;font-style:normal;opacity:.8}
.bar{display:flex;gap:2px}.bar u{width:14px;height:6px;border-radius:2px;background:rgba(255,255,255,.15)}.bar u.f{background:var(--mint)}
.opts.swatches{grid-template-columns:repeat(4,1fr)}
.sw{aspect-ratio:1;border-radius:50%;border:3px solid rgba(0,0,0,.3);box-shadow:inset 0 -6px 0 rgba(0,0,0,.2)}
.sw.on{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold),inset 0 -6px 0 rgba(0,0,0,.2)}
.sw.locked{position:relative;filter:grayscale(.8) brightness(.6)}
.sw .lock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-style:normal;font-size:10px;white-space:nowrap;background:rgba(10,4,20,.82);color:var(--cream);border-radius:99px;padding:2px 5px;filter:none}
.opt.stk canvas{width:100px;height:38px}
.opt.stk{position:relative;padding-top:12px}
.opt.stk em{position:absolute;top:4px;left:6px;font-style:normal;background:var(--gold);color:var(--ink);border-radius:50%;width:20px;height:20px;font-size:12px;line-height:20px}
.opt.lk{position:relative}
.opt .rar{position:absolute;top:4px;right:4px;font-style:normal;font-size:10px;line-height:1;padding:3px 6px;border-radius:99px;background:var(--rc);color:var(--ink)}
.opt.locked canvas{filter:grayscale(.85) brightness(.55)}
.opt.locked>span{opacity:.6}
.opt .lock{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);font-style:normal;font-size:12px;white-space:nowrap;background:rgba(10,4,20,.82);color:var(--cream);border-radius:99px;padding:3px 8px;pointer-events:none}
.opt .lock b{font-weight:400;color:var(--gold);direction:ltr;unicode-bidi:isolate}
.vcard.locked .vinfo{opacity:.6}
.vvis .rar{position:absolute;top:5px;left:5px;right:auto;font-style:normal;font-size:11px;line-height:1;padding:3px 7px;border-radius:99px;background:var(--rc);color:var(--ink)}
.note{grid-column:1/-1;font-size:14px;opacity:.8;text-align:right}
.nav{display:flex;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--club2)}
.nav .btn{flex:1}.nav .btn.ghost{flex:0 0 auto}
@media (min-width:860px){
 #garage.on{display:grid}
 #garage{grid-template-columns:1fr 440px;grid-template-rows:auto minmax(0,1fr) auto}
 .panel{min-height:0} /* long option lists scroll inside the panel instead of stretching the screen */
 .steps{grid-column:1/-1}.stage{grid-column:1;grid-row:2/4}
 .panel{grid-column:2;grid-row:2;height:auto;border-radius:0}
 .nav{grid-column:2;grid-row:3}
}

#race{background:#63B548}
#raceCv{position:absolute;inset:0;touch-action:none;display:block}
#exitBtn{position:absolute;top:calc(10px + env(safe-area-inset-top));left:10px;background:rgba(26,11,41,.65);padding:7px 14px;border-radius:999px;font-size:14px}
#turboBtn{position:absolute;left:16px;bottom:calc(20px + env(safe-area-inset-bottom));width:86px;height:86px;border-radius:50%;background:var(--pink);color:#fff;font-size:18px;box-shadow:0 5px 0 #A3134F;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;touch-action:none}
#turboBtn.empty{opacity:.45}
#muteBtn,#gMuteBtn{position:absolute;top:calc(52px + env(safe-area-inset-top));left:10px;background:rgba(26,11,41,.65);padding:7px 12px;border-radius:999px;font-size:14px}
#gMuteBtn{top:10px;z-index:2}
#turboBtn:active{transform:translateY(3px);box-shadow:0 2px 0 #A3134F}
.pips{display:flex;gap:4px}.pip{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.3)}.pip.on{background:var(--gold)}

#results{background:var(--club)}
#results.on{display:block;overflow-y:auto;-webkit-overflow-scrolling:touch}
.res{width:min(100%,560px);margin:0 auto;padding:calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom))}
/* the stage is the background of the whole header, with round corners like the cards */
.res-head{position:relative;display:grid;grid-template-columns:58% 1fr;gap:10px;align-items:center;min-height:230px;padding:16px;border-radius:22px;overflow:hidden}
.res-head>div{position:relative;z-index:1}
#resCv{position:absolute;inset:0;width:100%;height:100%}
.res-rank{white-space:nowrap;font-family:var(--display);font-size:84px;line-height:.8;color:var(--gold);text-shadow:4px 4px 0 var(--pink)}
.res-title{font-size:22px}
.res-time{opacity:.75;font-size:15px}
.res h2{font-size:20px;font-weight:400;margin:18px 0 8px;color:var(--gold)}
.verdict{margin-top:10px;font-size:17px;background:rgba(255,200,61,.12);border-right:4px solid var(--gold);padding:10px 12px;border-radius:14px}
/* standings: over the finished race (dimmed behind it), podium of all six and a flat table that fits without scrolling */
#bust.on{display:flex;justify-content:center;background:rgba(14,6,26,.9);backdrop-filter:blur(2px)}
.bust #bustCv{flex:1 1 auto;width:100%;min-height:180px;border-radius:22px}
.bust-line{flex:0 0 auto;font-size:15px;line-height:1.4;text-align:center;background:rgba(255,61,139,.16);border-radius:14px;padding:10px 12px}
#standings.on{display:flex;justify-content:center;background:rgba(14,6,26,.86);backdrop-filter:blur(2px)}
.std{display:flex;flex-direction:column;gap:8px;width:min(100%,560px);height:100dvh;padding:calc(12px + env(safe-area-inset-top)) 14px calc(12px + env(safe-area-inset-bottom))}
.std-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.std-head h2{font-family:var(--display);font-size:40px;line-height:.9;color:var(--gold);font-weight:700;text-shadow:3px 3px 0 var(--pink)}
.std-kicker{font-size:13px;opacity:.75}
.std-duel{flex:0 0 auto;background:var(--pink);color:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 var(--ink);padding:8px 12px;text-align:center;font-family:var(--display);font-size:30px;line-height:1;font-weight:700}
.std-duel.won{background:var(--mint);color:var(--ink)}
.std-duel b{direction:ltr;unicode-bidi:isolate;color:var(--gold);font-weight:700}.std-duel.won b{color:var(--ink)}
#stdCv{display:block;width:100%;flex:1 1 auto;min-height:140px;max-height:250px}
.std-list{list-style:none;display:flex;flex-direction:column;gap:4px;flex:0 0 auto}
.std-list li{display:grid;grid-template-columns:22px 1fr auto;column-gap:8px;align-items:center;background:rgba(67,31,102,.92);border-radius:12px;padding:6px 10px}
.std-list li.me{box-shadow:inset 0 0 0 2px var(--gold)}
.std-list .n{grid-column:1;grid-row:1/3;font-family:var(--display);font-size:24px;line-height:1;color:var(--gold);text-align:center}
.std-list .who{grid-column:2;grid-row:1;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.std-list .st{grid-column:3;grid-row:1/3;text-align:left;font-size:11px;line-height:1.25;opacity:.85;white-space:nowrap}
.std-list .st b{display:block;font-weight:400;color:var(--gold);direction:ltr;unicode-bidi:isolate;font-size:13px}
.std-list q{grid-column:2;grid-row:2;font-size:12px;line-height:1.3;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.std-list q:before{content:'”'}.std-list q:after{content:'“'}
.std-actions{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr;gap:8px}
.std-actions .btn{padding-inline:14px}
.res-table{width:100%;margin-top:12px}
@media (min-width:860px){.std{height:auto;max-height:100dvh;justify-content:center;padding-top:32px;padding-bottom:32px}#stdCv{flex:0 0 280px;max-height:none}}
.res-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.res-actions .btn{font-size:15px;padding:12px 6px;white-space:nowrap}
.gift{display:flex;gap:14px;align-items:center;width:100%;margin-top:16px;background:var(--gold);color:var(--ink);border-radius:18px;padding:14px 16px;text-align:right;box-shadow:0 5px 0 var(--gold2);position:relative;overflow:hidden}
.gift:before{content:'';position:absolute;top:0;bottom:0;left:58px;width:14px;background:var(--pink)}
.lbacts button.wa{background:#25D366;color:#0B3B22}
.res-score{margin-top:6px;font-size:15px}.res-score b{font-family:var(--display);font-size:30px;color:var(--pink);direction:ltr;unicode-bidi:isolate}
/* the album gift and the garage side by side, under the WhatsApp button */
.gift-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.gift-row .gift{margin:0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;padding:10px 9px 16px;border-radius:16px}
.gift-row .gift:before{left:auto;right:0;top:auto;bottom:0;height:10px;width:100%}
.gift-row .gift-ico{order:0;margin:0;font-size:28px}
.gift-row .gift b{font-size:21px;line-height:.92}
.gift-row .gift small{display:block;font-size:11.5px;line-height:1.25;margin-top:4px}
.garage-link{background:var(--mint);box-shadow:0 5px 0 #23A46E}
.garage-link:before{background:var(--gold)}
.garage-link:active{box-shadow:0 2px 0 #23A46E}
.duel-link{background:var(--pink);color:#fff;box-shadow:0 5px 0 #B3245F}
.duel-link:before{display:none}
.duel-link:active{box-shadow:0 2px 0 #B3245F}
.duel-link b{display:block;font-family:var(--display);font-size:28px;line-height:.95}.duel-link small{display:block;font-size:13px;opacity:.9}
.duel-link .gift-ico{font-size:30px}
.wa-link{background:#25D366;box-shadow:0 5px 0 #128C4A}
.wa-link:before{background:var(--cream)}
.wa-link:active{box-shadow:0 2px 0 #128C4A}
.gift:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold2)}
.gift-ico{font-size:42px;line-height:1;position:relative;z-index:1;margin-inline-start:auto;order:2}
.gift b{display:block;font-family:var(--display);font-size:36px;line-height:.95}
.gift small{font-size:14px;opacity:.8}
.overlay{position:fixed;inset:0;z-index:30;display:none}
#album.on{display:block;background:#F6EEDC;color:var(--ink);overflow-y:auto}
.album{width:min(100%,640px);margin:0 auto;padding:calc(16px + env(safe-area-inset-top)) 16px calc(28px + env(safe-area-inset-bottom))}
.album header{text-align:center;border:4px double #C9A15A;border-radius:16px;padding:22px 10px 16px;margin-bottom:22px;background:#FFF9EC;position:relative}
.album h2{font-family:var(--display);font-size:clamp(44px,13vw,74px);line-height:.9;color:#B3831D;text-shadow:2px 2px 0 #fff}
.album .sub{font-size:15px;color:#6B4B2E;margin-top:8px}
.album .hint{font-size:13px;color:#8B6A4A;margin-top:4px}
.albumX{position:absolute;top:8px;left:8px;background:var(--ink);color:#fff;border-radius:999px;padding:6px 12px;font-size:14px}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 14px}
.pol{background:#fff;padding:7px 7px 10px;box-shadow:0 6px 14px rgba(60,30,10,.25);transform:rotate(var(--r));display:flex;flex-direction:column;gap:7px;color:var(--ink);font-size:13px;line-height:1.25;text-align:center}
.pol canvas{width:100%;aspect-ratio:4/5;display:block}
#lightbox.on{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:16px;background:rgba(12,4,20,.94)}
.lbframe{background:#fff;padding:10px 10px 12px;width:min(92vw,58dvh);box-shadow:0 10px 30px rgba(0,0,0,.5)}
#lbCv{width:100%;aspect-ratio:4/5;display:block;touch-action:pan-y}
#lbCap{color:var(--ink);font-size:17px;text-align:center;margin-top:8px}
.lbnav,.lbacts{display:flex;gap:10px;align-items:center;color:#fff}
.lbnav button,.lbacts button{background:rgba(255,255,255,.14);color:#fff;border-radius:999px;padding:9px 16px;font-size:15px}
.lbacts button.wa{font-size:16px;padding:10px 20px}
.coin{display:inline-block;width:.95em;height:.95em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFF1A8,#F2B81E 60%,#C9870F);box-shadow:inset 0 0 0 2px #B07A10;vertical-align:-.12em;margin-inline-end:5px;flex:0 0 auto}
.coins{margin-top:16px;background:var(--club2);border-radius:18px;padding:14px;border:2px solid rgba(255,200,61,.35)}
.coins-head{display:flex;align-items:center;gap:12px}
.coins-head .coin{width:46px;height:46px;margin:0}
.coins-head b{font-family:var(--display);font-size:54px;line-height:.9;color:var(--gold)}
.coins-head small{display:block;font-size:13px;opacity:.8}
.wallet{margin-inline-start:auto;text-align:left;font-size:13px;opacity:.9;line-height:1.1}
.wallet b{font-family:var(--display);font-size:32px;color:var(--cream)}
.coin-rows{list-style:none;margin:10px 0 12px;display:flex;flex-direction:column;gap:2px;font-size:14px}
.coin-rows li{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(255,244,220,.15);padding:5px 0}
.coin-rows b{color:var(--gold);font-weight:400;direction:ltr;unicode-bidi:isolate}
#coinsWon{direction:ltr;unicode-bidi:isolate;display:inline-block}
.coins .btn{width:100%}
#shop.on{display:block;background:var(--club);overflow-y:auto}
.shop{width:min(100%,640px);margin:0 auto;padding:0 14px calc(28px + env(safe-area-inset-bottom))}
.shop-head{position:sticky;top:0;z-index:2;background:var(--club);padding:calc(12px + env(safe-area-inset-top)) 0 4px;margin-bottom:8px}
.shop-row{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.shop-head h2{font-family:var(--display);font-size:clamp(28px,8.5vw,44px);line-height:.9;color:var(--gold);flex:1;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-wallet{background:var(--club2);border-radius:999px;padding:6px 14px;display:flex;align-items:center}
.shop-wallet b{font-family:var(--display);font-size:30px;line-height:1}
.shopX{background:rgba(255,255,255,.12);border-radius:999px;padding:8px 14px;font-size:14px;min-height:40px} /* every "close" in the windows: big enough for a thumb */
.shop .tabs{margin-bottom:6px}
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (min-width:560px){.shop-grid{grid-template-columns:repeat(3,1fr)}}
.item{background:var(--club2);border-radius:16px;padding:10px;display:flex;flex-direction:column;gap:4px;text-align:right;border:2px solid transparent}
.item.owned{border-color:var(--mint)}
.item canvas{width:100%;height:96px;background:rgba(255,255,255,.06);border-radius:12px}
.iname{font-weight:400;font-size:15px;line-height:1.2}
.iline{font-size:12px;opacity:.75;line-height:1.25}
.iperk{font-size:12px;color:var(--mint)}
.ibot{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:4px}
.price{font-family:var(--display);font-size:26px;color:var(--gold);display:flex;align-items:center}
.own{font-size:12px;background:var(--mint);color:var(--ink);border-radius:999px;padding:2px 8px}
.buy{background:var(--gold);color:var(--ink);border-radius:999px;padding:8px;font-size:15px}
.buy:disabled{background:rgba(255,255,255,.12);color:rgba(255,244,220,.6)}
.item.owned .buy{background:var(--mint);color:var(--ink)}
.mg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:560px){.mg-grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:860px){.mg-grid{grid-template-columns:repeat(6,1fr);gap:12px}}
.mg-head{grid-column:1/-1;font-size:17px;font-weight:400;color:var(--gold);margin:10px 2px 0}
.mg-head:first-child{margin-top:0}
.mg-card{position:relative;background:var(--club2);border:2px solid transparent;border-radius:14px;padding:6px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:13px;line-height:1.2;text-align:center}
.mg-card.on{border-color:var(--gold);background:rgba(255,200,61,.13)}
.mg-card canvas{width:100%;aspect-ratio:1;max-width:96px}
.mg-card .rar{position:absolute;top:4px;right:4px;font-style:normal;font-size:10px;line-height:1;padding:3px 6px;border-radius:99px;background:var(--rc);color:var(--ink)}
.mg-card .cnt{position:absolute;top:4px;left:4px;font-style:normal;font-size:12px;background:var(--gold);color:var(--ink);border-radius:99px;padding:1px 7px;direction:ltr}
#myGarage.on{display:block;background:var(--club);overflow-y:auto}
.shop-empty{grid-column:1/-1;text-align:center;opacity:.8;padding:30px 0}
#gShopBtn{position:absolute;top:52px;left:10px;z-index:2;background:var(--pink);color:#fff;padding:7px 12px;border-radius:999px;font-size:14px}
.vcard{grid-template-columns:138px 1fr;background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(0,0,0,.22));padding:8px 10px}
.vcard.on{box-shadow:0 0 0 2px var(--gold),0 0 22px rgba(255,200,61,.3)}
.vvis{position:relative;border-radius:12px;background:radial-gradient(circle at 50% 75%,rgba(255,255,255,.1),rgba(0,0,0,.3));overflow:hidden}
.vcard canvas{width:138px;height:90px;display:block}
.vtag{position:absolute;top:5px;right:5px;background:var(--pink);color:#fff;font-size:11px;border-radius:99px;padding:1px 8px}
.vinfo h3{font-size:18px;font-weight:400}
.vinfo p{font-size:12.5px;opacity:.78;margin-bottom:4px}
.bar u{width:15px;height:7px}
.bar u.f{background:linear-gradient(90deg,var(--mint),#A6F7D0)}
#shop.on{background:radial-gradient(130% 55% at 50% 0%,#4F2180 0%,var(--club) 65%)}
.shop-head{background:rgba(46,20,71,.94);backdrop-filter:blur(6px);top:calc(8px + env(safe-area-inset-top));margin-top:calc(8px + env(safe-area-inset-top));padding:14px 14px 10px;border-radius:22px}
.shop-head h2{text-shadow:0 0 14px rgba(255,61,139,.55),2px 2px 0 var(--pink)}
.tcount{font-size:11px;opacity:.7;margin-inline-start:2px}
.goal{grid-column:1/-1;display:grid;grid-template-columns:112px 1fr;gap:12px;align-items:center;background:linear-gradient(135deg,rgba(255,200,61,.2),rgba(255,61,139,.18));border:2px solid rgba(255,200,61,.5);border-radius:18px;padding:10px 12px;margin-bottom:4px}
.goal canvas{width:112px;height:86px;border-radius:12px;background:rgba(10,4,20,.35)}
.goal small{font-size:12px;opacity:.85;display:block}
.goal b{font-family:var(--display);font-size:32px;line-height:1;color:var(--gold);display:block;font-weight:700}
.goal span{font-size:12px;opacity:.85}
.gprog,.iprog{height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden;margin:6px 0 3px}
.gprog i,.iprog i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--pink));border-radius:99px}
.item{--tc:#8FA3BF;position:relative;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.2));border:1.5px solid rgba(255,255,255,.08);border-top:3px solid var(--tc);border-radius:16px;padding:8px 8px 10px;gap:3px;box-shadow:0 6px 16px rgba(0,0,0,.28)}
.item.owned{border-color:var(--mint)}
.ivis{position:relative;border-radius:12px;overflow:hidden;background:rgba(10,4,20,.38);margin-bottom:4px}
.item canvas{width:100%;height:108px;display:block;background:none;border-radius:0}
.rar{position:absolute;top:6px;right:6px;font-size:11px;padding:1px 8px;border-radius:99px;background:var(--tc);color:var(--ink)}
.stamp{position:absolute;bottom:8px;left:8px;transform:rotate(-12deg);border:2px solid var(--mint);color:var(--mint);font-size:14px;padding:0 8px;border-radius:6px;background:rgba(0,0,0,.4)}
.cnt{position:absolute;bottom:6px;left:6px;background:var(--mint);color:var(--ink);font-size:11px;border-radius:99px;padding:1px 8px}
.iname{font-size:15px;line-height:1.2}
.ibot{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:6px}
.price{font-family:var(--display);font-size:26px;color:var(--gold);display:flex;align-items:center;margin-inline-end:auto}
.buy{flex:0 0 auto;background:var(--gold);color:var(--ink);border-radius:999px;padding:7px 12px;font-size:14px;box-shadow:0 3px 0 var(--gold2)}
.buy:disabled{background:rgba(255,255,255,.1);color:rgba(255,244,220,.65);box-shadow:none;font-size:12px}
.item.owned .buy{background:rgba(61,220,151,.18);color:var(--mint)}
.item.pop{animation:popb .7s ease}
@keyframes popb{0%{transform:scale(1)}40%{transform:scale(1.06);box-shadow:0 0 0 3px var(--gold),0 0 30px rgba(255,200,61,.6)}100%{transform:scale(1)}}
#board.on,#yeshivas.on,#yeshiva.on,#yeshivaEnd.on{display:block;background:radial-gradient(130% 55% at 50% 0%,#4F2180 0%,var(--club) 65%);overflow-y:auto}
/* ================= LIVE RACE ================= */
#live.on{display:block;background:radial-gradient(130% 55% at 50% 0%,#4F2180 0%,var(--club) 65%);overflow-y:auto;z-index:33}
.live-btn{background:var(--pink);color:#fff;box-shadow:0 5px 0 #B3245F}.live-btn:active{box-shadow:0 2px 0 #B3245F}
#liveBtn[hidden],#liveWait[hidden],#liveBar[hidden]{display:none}
/* the 30 seconds of a live race, over the regular garage: time left, and who's ready */
.live-bar{display:flex;align-items:center;gap:10px;flex:0 0 auto;background:var(--pink);color:#fff;padding:calc(6px + env(safe-area-inset-top)) 14px 6px;font-size:13px;line-height:1.25}
.live-bar b{font-family:var(--display);font-size:30px;line-height:1;direction:ltr;unicode-bidi:isolate;min-width:44px;text-align:center}
.live-bar span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#garage:has(#liveBar:not([hidden])) .steps{padding-top:6px}
/* on short phones the tagline gives its place to the live button */
@media (max-height:740px){#title:has(#liveBtn:not([hidden])) .tag{display:none}}
.live-wait{position:absolute;left:50%;top:42%;transform:translateX(-50%);z-index:5;background:rgba(26,11,41,.88);color:var(--gold);border-radius:999px;padding:10px 18px;font-size:16px;white-space:nowrap}
.lv-big{text-align:center;font-family:var(--display);font-size:44px;line-height:1;color:var(--gold);margin:6px 0 4px}
.lv-text{text-align:center;font-size:15px;opacity:.88;margin:4px auto 12px;max-width:360px}
.lv-players{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:8px 0 14px}
.lv-players li{background:var(--club2);border-radius:14px;padding:6px 4px 8px;text-align:center;font-size:13px;line-height:1.2;position:relative}
.lv-players li.me{box-shadow:inset 0 0 0 2px var(--gold)}
.lv-players li.empty{background:rgba(0,0,0,.18);opacity:.6;display:grid;place-items:center;min-height:118px;font-size:12px}
.lv-players canvas{display:block;width:100%;height:84px}
.lv-players .nm{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 4px}
.lv-players .st{position:absolute;top:4px;right:6px;font-size:14px}
.lv-actions{display:flex;flex-direction:column;gap:10px}
.lv-actions .btn{width:100%}
.lv-code{text-align:center;font-size:13px;opacity:.7;margin-top:10px;direction:ltr;unicode-bidi:isolate;letter-spacing:3px}
.lv-timer{text-align:center;font-family:var(--display);font-size:64px;line-height:1;color:var(--pink);direction:ltr;unicode-bidi:isolate}
.lv-stage{display:block;width:100%;height:30dvh;min-height:180px;border-radius:18px;background:rgba(0,0,0,.18)}
.lv-rides{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin:10px 0}
.lv-rides::-webkit-scrollbar{display:none}
.lv-rides .tab{flex:0 0 auto}
.lv-join .name-row{margin:6px 0 12px}
.lv-join .name-row input{flex:1;min-width:0;background:none;border:0;padding:11px 14px;font-size:20px;outline:none;-webkit-user-select:text;user-select:text}

/* ================= YESHIVAS ================= */
#yeshivaEnd.on{z-index:32}
#challengeBtn{position:relative;white-space:nowrap}
/* the count sits on the button's corner, like a notification */
.y-badge{position:absolute;top:-8px;left:-6px;display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:999px;background:var(--pink);color:#fff;font-size:13px;line-height:1;direction:ltr;unicode-bidi:isolate;box-shadow:0 0 0 2px var(--ink)}
.y-badge[hidden],#yRename[hidden],.y-rename[hidden],.y-passed[hidden],#yeTell[hidden]{display:none}
.y-sub{font-size:14px;opacity:.85;margin-top:6px}
.y-sub b{color:var(--gold);font-weight:400}
.y-cards{display:flex;flex-direction:column;gap:10px}
.y-card{display:block;width:100%;text-align:right;background:var(--club2);border-radius:16px;padding:12px 14px;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.y-card:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.3)}
.y-card .y-name{display:block;font-family:var(--display);font-size:30px;line-height:1;color:var(--gold)}
.y-card .y-meta{display:block;font-size:14px;opacity:.85;margin-top:4px}
.y-card .y-meta b{color:var(--cream);font-weight:400}
.y-card .y-alert{display:inline-block;margin-top:8px;background:var(--pink);color:#fff;border-radius:999px;padding:3px 10px;font-size:13px}
.y-card.hot{box-shadow:inset 0 0 0 3px var(--pink),0 4px 0 rgba(0,0,0,.3)}
.y-bonus{display:flex;align-items:center;gap:10px;width:100%;text-align:right;background:var(--gold);color:var(--ink);border-radius:16px;padding:12px 14px;box-shadow:0 5px 0 var(--gold2);font-size:15px;line-height:1.3}
.y-bonus:active{transform:translateY(3px);box-shadow:0 2px 0 var(--gold2)}
.y-bonus .ico{font-size:30px}
.y-bonus b{margin-inline-start:auto;font-family:var(--display);font-size:30px;direction:ltr;unicode-bidi:isolate}
.y-bonus.done{opacity:.55;pointer-events:none}
.y-empty{text-align:center;padding:18px 4px 8px}
.y-empty h3{font-family:var(--display);font-size:40px;line-height:1;color:var(--gold);font-weight:700}
.y-empty p{font-size:15px;opacity:.85;margin:8px auto 0;max-width:340px}
.y-create{display:flex;flex-direction:column;gap:10px;margin-top:16px;background:rgba(0,0,0,.18);border-radius:18px;padding:14px}
.y-create label{font-size:14px;opacity:.85}
.y-create .name-row input,.y-rename input{flex:1;min-width:0;background:none;border:0;padding:11px 14px;font-size:20px;outline:none;-webkit-user-select:text;user-select:text}
.y-create .row{display:flex}.y-create .row .name-row{flex:1;min-width:0}
.y-dice{flex:0 0 auto;width:52px;font-size:26px;border-radius:14px;background:rgba(255,255,255,.12);margin-inline-start:8px}
.y-create .btn,.y-new{width:100%}
.y-new{margin-top:14px}
.y-rename{display:flex;gap:8px;margin-top:10px}.y-rename .name-row{flex:1;min-width:0}.y-rename .btn{flex:0 0 auto;padding-inline:16px}
.y-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.y-actions .btn{width:100%}
.y-actions .y-tell{margin:0}.y-tell:before{display:none}.y-tell b{font-family:var(--display);font-size:30px;line-height:1}
.y-head{margin:4px 0 0;font-size:32px}
.y-head.won{background:var(--mint);color:var(--ink)}
.y-passed{margin-top:10px;text-align:center;font-size:16px;color:var(--gold)}
.y-gap{margin-top:10px;text-align:center;font-size:15px;opacity:.9}
.board-list .tag{display:inline-block;margin-inline-start:6px;background:var(--gold);color:var(--ink);border-radius:999px;padding:0 8px;font-size:12px;vertical-align:2px}
.board{width:min(100%,560px);margin:0 auto;padding:0 14px calc(28px + env(safe-area-inset-bottom))}
.board-head{position:sticky;top:calc(8px + env(safe-area-inset-top));z-index:2;background:rgba(46,20,71,.94);backdrop-filter:blur(6px);padding:14px 14px 12px;margin:calc(8px + env(safe-area-inset-top)) 0 8px;border-radius:22px}
.board-head .tabs{margin-bottom:0}
.podium{border-radius:22px}
.board-head h2{font-family:var(--display);font-size:clamp(30px,9vw,48px);line-height:.9;color:var(--gold);flex:1;font-weight:700;text-shadow:0 0 14px rgba(255,61,139,.55),2px 2px 0 var(--pink)}
.board-note{font-size:14px;opacity:.8;margin:4px 2px 10px}
.board-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.board-list li{display:grid;grid-template-columns:36px 44px 1fr auto;gap:8px;align-items:center;background:var(--club2);border-radius:12px;padding:10px 12px;font-size:16px}
.board-list li.me{box-shadow:inset 0 0 0 2px var(--gold);background:rgba(255,200,61,.14)}
.board-list li.gap{display:block;text-align:center;background:none;padding:0;opacity:.6}
.board-list .n{font-family:var(--display);font-size:26px;color:var(--gold);text-align:center;direction:ltr;unicode-bidi:isolate}
.board-list .av{width:44px;height:44px;margin:-6px 0}
.board-list .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list b{font-weight:400;color:var(--gold);direction:ltr;unicode-bidi:isolate;white-space:nowrap}
.podium{display:block;width:100%;height:250px;margin:4px 0 8px}
.board-empty{text-align:center;opacity:.85;padding:26px 0}
.board-you{font-size:13px;opacity:.7;margin-top:12px;text-align:center}
#toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--gold);color:var(--ink);padding:10px 16px;border-radius:14px;font-size:15px;box-shadow:0 6px 18px rgba(0,0,0,.35);opacity:0;transition:.25s;z-index:60;max-width:90vw;text-align:center;pointer-events:none}
#toast.on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

#keysHint{display:none;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);gap:14px;align-items:center;background:rgba(26,11,41,.72);color:var(--cream);padding:8px 16px;border-radius:999px;font-size:14px;pointer-events:none;white-space:nowrap}
#keysHint kbd{font-family:inherit;background:var(--cream);color:var(--ink);border-radius:6px;padding:1px 7px;margin-inline-start:4px;box-shadow:0 2px 0 rgba(0,0,0,.35)}
/* ================= DESKTOP (860px and up). Phones never reach this block ================= */
@media (min-width:860px){
 /* title: text and form on the right, big composition on the left */
 #title.on{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);grid-template-rows:1fr auto auto auto auto auto auto auto 1fr;column-gap:4vw;row-gap:16px;padding:32px 5vw}
 #title .logo{grid-column:1;grid-row:2;font-size:clamp(110px,11vw,190px)}
 #title .tag{grid-column:1;grid-row:3;font-size:19px}
 #title .best{grid-column:1;grid-row:4;font-size:17px}
 #title .namefield{grid-column:1;grid-row:5}
 #title .btn{grid-column:1;grid-row:6}
 #title #liveBtn{grid-row:7}
 #title .title-row{grid-column:1;grid-row:8}
 #title .vs-invite{grid-column:1;grid-row:1;align-self:end}
 #titleCv{grid-column:2;grid-row:1/-1;width:100%;height:min(76vh,680px);border-radius:28px}

 /* garage: wider panel, bigger previews */
 #garage{grid-template-columns:1fr min(46vw,600px)}
 .panel{padding:16px 18px 0}
 .tabs{gap:8px;margin-bottom:14px}
 .tab{font-size:16px;padding:9px 16px}
 .opts{grid-template-columns:repeat(4,1fr);gap:10px}
 .opt{font-size:14px;padding:8px 6px 10px;gap:5px}
 .opt canvas{width:88px;height:88px}
 .opts.swatches{grid-template-columns:repeat(6,1fr);gap:14px}
 .opts:has(.stk){grid-template-columns:repeat(3,1fr)}
 .opt.stk canvas{width:150px;height:56px}
 .vcard{grid-template-columns:200px 1fr;padding:10px 14px}
 .vcard canvas{width:200px;height:128px}
 .vinfo h3{font-size:22px}.vinfo p{font-size:14px}
 .stat{font-size:13px}.bar u{width:22px;height:8px}
 .nav{padding:14px 18px}
 .plate{top:16px;right:24px}.plate b{font-size:60px}.plate span{font-size:16px}

 /* shop and album use the width */
 .shop{width:min(100%,1080px);padding:0 24px 40px}
 .shop-grid{grid-template-columns:repeat(4,1fr);gap:14px}
 .album{width:min(100%,1040px)}
 .grid{grid-template-columns:repeat(3,1fr);gap:28px 22px}

 /* results, like the garage: stage with the Nehorai on the right, scrolling panel and action bar on the left */
 #results.on{display:grid;grid-template-columns:1fr min(46vw,600px);grid-template-rows:1fr auto;height:100dvh;overflow:hidden}
 .res{display:contents}
 .res-head{grid-column:1;grid-row:1/3;position:relative;display:block;min-height:0;padding:0;border-radius:0}
 #resCv{position:absolute;inset:0;width:100%;height:100%}
 .res-head>div{position:absolute;top:24px;right:32px;z-index:1;text-align:right;pointer-events:none}
 .res-rank{font-size:110px}.res-title{font-size:30px}.res-time{font-size:18px}
 .res-panel{grid-column:2;grid-row:1/3;overflow-y:auto;background:var(--club2);padding:6px 18px 18px}
 /* race: tell keyboard players how to drive */
 #keysHint{display:flex}
}
@media (min-width:860px) and (hover:none){#keysHint{display:none}}