*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#f7f9ff;color:#edf7ff;font:15px Inter,system-ui,Segoe UI,sans-serif}body{background-image:radial-gradient(circle at 50% -10%,#123b61,transparent 35%),linear-gradient(#061522,#04111d)}button,input,select{font:inherit}.white{color:#fff!important}.logo{font-size:23px;font-weight:950;white-space:nowrap}.logo>span{color:#1aa8ff}.logo small{display:block;font-size:8px;letter-spacing:2px;color:#91a9bc;text-align:center}header{height:72px;display:flex;align-items:center;padding:0 25px;background:#06131fee;border-bottom:1px solid #173a55;position:sticky;top:0;z-index:20;backdrop-filter:blur(12px);box-shadow:0 8px 30px #0007}nav{display:flex;height:100%;margin:auto}nav button{height:100%;min-width:92px;border:0;border-bottom:3px solid transparent;background:none;color:#91a8bb;font-size:19px;box-shadow:none}nav i{display:block;font-size:11px;font-style:normal;margin-top:5px}nav .on{color:white;background:#0d2c4c;border-color:#1aa8ff}.who{display:flex;align-items:center;gap:8px}.who small{display:block;color:#91a8bb;font-size:11px}.who a{color:#fff;text-decoration:none}.avatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#0daaff,#7651ff);border:2px solid #4bd7ff;box-shadow:0 0 20px #13aaff66;font-weight:950}.page{display:none!important}.page.active{display:block!important}[hidden]{display:none!important}main{max-width:1500px;margin:auto;padding:16px}.panel{background:linear-gradient(145deg,#0a2033,#071725);border:1px solid #1d4764;border-radius:16px;padding:16px;box-shadow:inset 0 1px #fff08,0 12px 35px #0005}button{border:1px solid #22a5ff;border-radius:9px;padding:11px 16px;background:linear-gradient(#1aa7ff,#0874d8);color:#fff;font-weight:900;cursor:pointer;box-shadow:0 0 16px #0b9cff3d}input,select{width:100%;padding:12px;border:1px solid #416882;border-radius:9px;background:#091a28;color:#fff;margin:7px 0 10px}.auth{max-width:430px;margin:10vh auto;text-align:center}.auth .logo{font-size:38px}.tabs{display:flex;gap:8px}.lobby{max-width:1050px;margin:4vh auto}.lobbyTitle{text-align:center;margin-bottom:20px}.lobbyTitle h1{font-size:38px;margin:0}.lobbyTitle p{color:#9fb3c3}.modecards{display:grid;grid-template-columns:1fr 1fr;gap:20px}.mode{min-height:330px;padding:28px;text-align:center;display:flex;flex-direction:column;justify-content:center}.blueGlow{border-color:#149eff;box-shadow:0 0 30px #008cff25}.pinkGlow{border-color:#ff378f;box-shadow:0 0 30px #ff2c8a18}.modeIcon{width:68px;height:68px;border-radius:18px;display:grid;place-items:center;margin:0 auto 8px;background:#102e48;border:1px solid #2c6a93;font-size:32px}.mode p{color:#a5b8c7}.mode label{text-align:left;color:#9fb3c3;font-size:12px}.match{max-width:760px;margin:5vh auto;text-align:center}.match h2{letter-spacing:4px;color:#75d6ff}.matchvs{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center;margin:28px 0}.matchperson{display:grid;justify-items:center;gap:7px}.matchperson small{color:#9fb3c3}.huge{width:110px;height:110px;font-size:38px}.matchvs>strong{font-size:40px;color:#ffac32;text-shadow:0 0 18px #ff8a00}.spinner{border:4px dashed #ff3d96;animation:spin 1s linear infinite;background:#152436}.spinner span{animation:spin 1s linear infinite reverse}.radar{height:45px;position:relative}.radar i{position:absolute;left:50%;top:50%;width:8px;height:8px;border:2px solid #29baff;border-radius:50%;animation:pulse 1.8s infinite}.radar i:nth-child(2){animation-delay:.6s}.radar i:nth-child(3){animation-delay:1.2s}.ghost{background:#102438;border-color:#35566d;box-shadow:none}.versus{display:grid;grid-template-columns:1fr 130px 1fr;gap:12px;margin-bottom:12px}.playerCard{min-width:0;padding:14px 22px;display:flex;align-items:center;gap:14px;background:#091c2d;position:relative}.blueCard{border:2px solid #0aa7ff;clip-path:polygon(0 0,95% 0,100% 50%,95% 100%,0 100%);background:linear-gradient(110deg,#082944,#081929)}.pinkCard{border:2px solid #ff338e;clip-path:polygon(5% 0,100% 0,100% 100%,5% 100%,0 50%);background:linear-gradient(250deg,#35102e,#0a1b2c)}.avatar.big{width:70px;height:70px;font-size:25px}.pdata{min-width:0;flex:1}.pdata>b,.pdata>small{display:block}.pdata>small{color:#9cb1c1}.pdata strong{display:block;font-size:31px;color:#25b6ff}.pinkCard .pdata strong{color:#ff4d9c}.pdata em{font-size:15px;color:#b4c3cf;font-style:normal}.bar{height:9px;border-radius:8px;background:#173247;overflow:hidden}.bar i{display:block;height:100%;width:0;background:#18afff;transition:.2s}.pinkCard .bar i{background:#ff3493}.turnBadge{margin-top:7px;padding:5px;border:1px solid #178ee5;border-radius:7px;text-align:center;font-size:11px;color:#8edcff;background:#0b2b47}.pinkBadge{border-color:#b42c74;color:#ff9bc9;background:#301127}.vsmid{display:grid;place-items:center;text-align:center}.vsmid b{font-size:38px;color:#ffac32;text-shadow:0 0 18px #ff8a00}.vsmid small,.vsmid span{font-size:11px;color:#9db3c3}.gameDesk{display:grid;grid-template-columns:270px minmax(420px,1fr) 270px;gap:12px;height:calc(100vh - 195px);min-height:570px}.sidePanel,.rightPanel{min-height:0}.instruction{padding:13px;background:#0c2b45;border:1px solid #176ba4;border-radius:9px;color:#a7e3ff;font-weight:800}.sidePanel hr{border:0;border-top:1px solid #1c4059;margin:18px 0}#targetbox{display:grid;gap:5px;text-align:center;padding:12px;border-radius:10px;border:1px solid #ff378f;background:#321128;box-shadow:0 0 20px #ff2d8d22}#targetbox span{font-size:11px;color:#ff9bc6;letter-spacing:1px}#targetbox strong{font-size:45px}.centerGame{min-height:0;display:grid;grid-template-rows:1fr 1.08fr;gap:12px}.handPanel,.gridPanel{min-height:0;display:flex;flex-direction:column}.panelHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}.panelHead h2{font-size:17px;margin:0}.panelHead small{font-size:11px;color:#9fb3c3}.panelHead>span{font-size:10px;padding:5px 9px;border-radius:999px;background:#153957;color:#80d7ff}.hand{position:relative;flex:1;min-height:0;border-radius:12px;background:radial-gradient(ellipse,#fff6e8,#f2ddc4 68%,#dfc09e);color:#111;overflow:hidden;box-shadow:inset 0 0 45px #8d674844}.num{position:absolute;min-width:25px;border:0;background:none;color:#111;box-shadow:none;padding:3px;font-weight:900;line-height:1}.num.used{border:3px solid #ff378f;border-radius:50%;color:#777}.crossgrid{margin:auto;display:grid;grid-template-columns:repeat(10,1fr);gap:4px;width:min(100%,530px);max-height:100%}.cell{aspect-ratio:1;border:1px solid #50768d;background:linear-gradient(#18364a,#10293a);border-radius:5px;padding:0;box-shadow:none}.cell.crossed{background:linear-gradient(#29b7ff,#087bdd);box-shadow:0 0 8px #149eff55}.cell.crossed:after{content:"×";font-size:clamp(14px,1.7vw,25px)}.rightPanel{display:grid;grid-template-rows:auto auto;align-content:start;gap:12px}.miniPlayers>div{display:grid;grid-template-columns:12px 1fr auto;gap:7px;padding:11px 0;border-bottom:1px solid #17394f}.dot{width:9px;height:9px;border-radius:50%;margin-top:5px}.blueDot{background:#17adff}.pinkDot{background:#ff378f}.tip p{color:#a5b8c7}.contentPanel{max-width:1000px;margin:30px auto}.rankroad{padding:20px;background:#0c263b;border-radius:12px}.trophies{display:flex;gap:12px;flex-wrap:wrap}.trophies div{padding:20px;background:#0c263b;border-radius:12px;font-size:30px}.trophies b{display:block;font-size:12px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}100%{transform:translate(-50%,-50%) scale(10);opacity:0}}
@media(max-width:760px){body{padding-bottom:64px}header{height:58px;padding:0 9px}.logo{font-size:18px}.logo small{font-size:6px}.who b,.who small{display:none}.who .avatar{width:36px;height:36px}nav{position:fixed;bottom:0;left:0;right:0;height:62px;background:#061522;border-top:1px solid #21445e;z-index:30;justify-content:space-around}nav button{min-width:0;width:16.66%;font-size:17px;padding:3px 0}nav i{font-size:8px}.modecards{grid-template-columns:1fr}.mode{min-height:0;padding:18px}.lobby{margin:5px auto}.lobbyTitle h1{font-size:28px}.versus{grid-template-columns:1fr 44px 1fr;gap:3px;margin-bottom:6px}.playerCard{padding:6px;gap:5px;clip-path:none!important;border-width:1px;border-radius:12px}.avatar.big{width:34px;height:34px;font-size:12px}.pdata>b{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.pdata>small{font-size:7px}.pdata strong{font-size:15px}.pdata em{font-size:8px}.bar{height:5px}.turnBadge{display:none}.vsmid b{font-size:20px}.vsmid small,.vsmid span{font-size:6px}.gameDesk{display:block;height:calc(100vh - 133px);min-height:0}.sidePanel,.rightPanel{display:none}.centerGame{display:block;height:100%}.handPanel,.gridPanel{height:100%;padding:7px}.panelHead{height:35px;margin:0 0 5px}.panelHead h2{font-size:13px}.hand{height:calc(100% - 40px);flex:none}.gridPanel{justify-content:flex-start}.crossgrid{width:min(94vw,calc(100vh - 205px));gap:3px}.cell{border-radius:4px}.num{font-size:clamp(11px,3.4vw,17px);min-width:18px}.match{margin:8px auto;padding:12px}.matchvs{grid-template-columns:1fr 45px 1fr;margin:16px 0}.huge{width:76px;height:76px}.matchvs>strong{font-size:27px}.match h2{font-size:17px}.contentPanel{margin:8px auto}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.list{margin-top:18px;display:grid;gap:8px}.listRow{display:grid;grid-template-columns:auto auto 1fr auto auto;gap:12px;align-items:center;padding:12px;background:#0a2235;border:1px solid #1c4865;border-radius:11px}.listRow small{display:block;color:#93aabd}.avatar.tiny{width:38px;height:38px;font-size:13px}.rowActions{display:flex;gap:6px}.rowActions button{padding:7px 10px}.stat{text-align:center;font-weight:900}.stat small{font-size:9px}.socialAdd{display:flex;gap:8px}.socialAdd input{margin:0}.messenger{display:grid;grid-template-columns:280px 1fr;gap:12px;min-height:520px}.conversationList{border-right:1px solid #1c4865;padding-right:10px}.conversationList button{width:100%;display:flex;align-items:center;gap:9px;background:#0a2235;border-color:#1c4865;box-shadow:none;margin-bottom:6px;text-align:left}.conversationList small{display:block}.chatPane{display:grid;grid-template-rows:auto 1fr auto;min-width:0}.chatMessages{overflow:auto;padding:10px;display:flex;flex-direction:column;gap:7px}.bubble{max-width:75%;padding:9px 11px;border-radius:12px;background:#172c3d}.bubble.mine{align-self:flex-end;background:#0b5d96}.bubble b,.bubble small{display:block;font-size:10px}.bubble small{opacity:.65}.chatPane form{display:flex;gap:7px}.chatPane form input{margin:0}.trophies .locked{opacity:.35;filter:grayscale(1)}.trophies small{display:block;font-size:10px;color:#9db1c0}@media(max-width:760px){.messenger{grid-template-columns:1fr;min-height:0}.conversationList{border:0}.listRow{grid-template-columns:auto 1fr auto}.stat{display:none}.rowActions{grid-column:2/4}.socialAdd{display:block}}
.soundToggle{background:#0b2337;border:1px solid #24516d;box-shadow:none;padding:8px;margin-right:9px}.wrongTap{animation:wrong .18s;background:#6c1b2b!important;border-color:#ff4b69!important}@keyframes wrong{50%{transform:scale(.9)}}.endOverlay{position:fixed;inset:0;z-index:100;background:#020912dd;display:grid;place-items:center;padding:20px;backdrop-filter:blur(8px)}.endCard{width:min(460px,92vw);padding:35px;text-align:center;border-radius:24px;background:linear-gradient(145deg,#0c2941,#081725);border:1px solid #2d759e;box-shadow:0 0 70px #0a9cff33}.endCard>div:first-child{font-size:70px}.endCard h1{font-size:38px;margin:8px 0;color:#70d6ff}.endCard #endReward{margin:18px 0;padding:12px;border-radius:10px;background:#0c2133;color:#ffce66;font-weight:900}.endCard button{margin:5px}.homeHero{min-height:650px;display:grid;grid-template-columns:1fr 1.05fr;align-items:center;gap:45px;padding:45px max(20px,5vw);position:relative;overflow:hidden}.homeHero:before{content:"";position:absolute;width:500px;height:500px;border-radius:50%;background:#078cff18;filter:blur(30px);right:5%;top:10%}.heroCopy{position:relative;z-index:2}.eyebrow{font-size:12px;letter-spacing:4px;color:#65ceff;font-weight:900}.heroCopy h1{font-size:clamp(48px,6vw,88px);line-height:.95;margin:18px 0}.heroCopy h1 em{font-style:normal;color:#1aafff;text-shadow:0 0 28px #009cff66}.heroCopy p{max-width:610px;font-size:18px;line-height:1.6;color:#a9bdcc}.heroActions{display:flex;gap:10px;margin:25px 0}.heroStats{display:flex;gap:28px;color:#8fa7b9}.heroStats b{display:block;font-size:24px;color:#fff}.heroVisual{position:relative;z-index:2;padding:25px;border-radius:30px;background:linear-gradient(145deg,#0a2135,#071522);border:1px solid #24536f;box-shadow:0 30px 80px #0008,0 0 60px #078cff17;transform:perspective(1100px) rotateY(-5deg)}.duel{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center}.duelPlayer{padding:15px;border-radius:16px;display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:center}.blueD{border:1px solid #13aaff;background:#082a45}.pinkD{border:1px solid #ff3c93;background:#301129}.heroAv{grid-row:1/4;width:58px;height:58px}.duelPlayer small{color:#9fb2c1}.duelPlayer strong{font-size:22px;color:#28b7ff}.pinkD strong{color:#ff4e9c}.heroVS{text-align:center;font-size:27px;font-weight:950;color:#ffad32}.miniHand{height:250px;margin:16px 0;position:relative;border-radius:14px;background:#f6e3ca;color:#111}.miniHand span{position:absolute;font-weight:900}.miniHand span:nth-child(1){left:12%;top:20%}.miniHand span:nth-child(2){left:39%;top:13%}.miniHand span:nth-child(3){left:64%;top:29%}.miniHand span:nth-child(4){left:82%;top:18%}.miniHand span:nth-child(5){left:22%;top:61%}.miniHand span:nth-child(6){left:48%;top:70%}.miniHand span:nth-child(7){left:75%;top:60%}.miniHand span:nth-child(8){left:88%;top:78%}.miniHand .ring{border:3px solid #ff3b91;border-radius:50%;padding:4px}.miniGrid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}.miniGrid i{aspect-ratio:1;border-radius:4px;background:#173348;border:1px solid #477087}.miniGrid i:nth-child(-n+23){background:#149eff;box-shadow:0 0 7px #149eff55}.howGrid{max-width:1100px;margin:0 auto 45px;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.howGrid article{padding:20px;border-radius:15px;background:linear-gradient(145deg,#ffffff,#f7fbff);color:#17315c;border:1px solid #d9e7f2;box-shadow:0 8px 20px rgba(39,77,120,.08)}.howGrid article>b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#1479d8;color:#ffffff;font-size:20px;font-weight:900;text-shadow:none;box-shadow:0 4px 12px rgba(20,121,216,.18)}.howGrid article h3{color:#17315c;text-shadow:none}.howGrid p{color:#596d8b;text-shadow:none}@media(max-width:760px){.soundToggle{display:none}.homeHero{min-height:0;grid-template-columns:1fr;padding:25px 10px;gap:22px}.heroCopy h1{font-size:48px}.heroCopy p{font-size:14px}.heroVisual{transform:none;padding:12px}.miniHand{height:190px}.howGrid{grid-template-columns:1fr 1fr;padding:0 8px}.heroStats{gap:15px}.heroActions{flex-wrap:wrap}.endCard{padding:24px}}
.profileHero{display:grid;grid-template-columns:auto 1fr;gap:25px;align-items:center;max-width:1100px;margin:25px auto 12px;background:linear-gradient(120deg,#092944,#0a1a2a 60%,#281029)}.profileAvatarWrap{text-align:center}.profileAvatar{width:140px;height:140px;border-radius:50%;object-fit:cover;border:4px solid #28baff;box-shadow:0 0 35px #159eff55}.profileAvatarWrap button{display:block;margin:10px auto 0;padding:7px 10px}.profileBadges{display:flex;gap:10px;flex-wrap:wrap}.profileBadges span{padding:8px 12px;background:#0b2a42;border:1px solid #205a7b;border-radius:999px}.profileGrid{max-width:1100px;margin:0 auto 12px;display:grid;grid-template-columns:1.2fr .8fr;gap:12px}.statGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.statGrid>div{padding:13px;background:#0b2437;border:1px solid #1d4965;border-radius:10px}.statGrid b{display:block;font-size:22px;color:#62d2ff}.statGrid small{color:#9db1c0}.profileTrophies{display:flex;gap:9px;flex-wrap:wrap}.profileTrophies span{font-size:34px;padding:10px;background:#0b2437;border-radius:10px}.levelStats{max-width:1100px;margin:auto}.levelRow{display:grid;grid-template-columns:1fr repeat(3,auto);gap:15px;padding:10px;border-bottom:1px solid #183b52}.avatarModal{position:fixed;inset:0;z-index:110;background:#020912df;display:grid;place-items:center;padding:15px}.avatarCard{width:min(620px,95vw);padding:22px;border-radius:20px;background:#091d2e;border:1px solid #2a688d}.presetGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.presetGrid button{background:#0b2437;border-color:#235776;padding:8px}.presetGrid img{width:100%;display:block;border-radius:50%}.uploadBox{margin:18px 0;padding:15px;background:#0b2437;border-radius:12px}.uploadBox small{display:block;color:#9db1c0}.uploadBox input{margin-bottom:4px}@media(max-width:760px){.profileHero{grid-template-columns:1fr;text-align:center;margin:7px auto}.profileAvatar{width:105px;height:105px}.profileBadges{justify-content:center}.profileGrid{grid-template-columns:1fr}.statGrid{grid-template-columns:repeat(2,1fr)}.levelRow{grid-template-columns:1fr 1fr;font-size:11px}.presetGrid{grid-template-columns:repeat(4,1fr)}}
.profileAvatar{background:#081a29;display:block}.gameAvatar{padding:0;overflow:hidden;cursor:pointer}.gameAvatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.navBadgeHost{position:relative}.navBadge{position:absolute;right:18px;top:9px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:#ff315f;color:white;font:800 11px/19px system-ui;border:2px solid #071522;box-shadow:0 0 10px #ff315f88}.publicProfileActions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.publicProfileActions button{padding:8px 11px}.profileAvatarWrap{min-width:150px}@media(max-width:760px){.navBadge{right:3px;top:3px;transform:scale(.85)}.publicProfileActions{justify-content:center}.profileAvatarWrap{min-width:0}}
.avatar img,.heroAv img,.matchOwnAvatar img,.headerAvatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.headerAvatar{padding:0;overflow:hidden;box-shadow:0 0 16px #159eff55}.who{min-width:185px}.who>div b{white-space:nowrap}
@media(max-width:760px){
body{padding-bottom:66px}
header{position:sticky;top:0;height:60px;padding:0 10px;display:grid;grid-template-columns:auto 1fr auto;gap:8px}
header>.logo{display:block}
header>.soundToggle{display:none}
.who{min-width:0;justify-self:end;display:flex!important}
.who>div{display:block!important;text-align:right}
.who>div b{display:block!important;font-size:11px}
.who>div small{display:block!important;font-size:8px;color:#75d3ff}
.who>a{display:none}
.headerAvatar{display:grid!important;width:38px!important;height:38px!important}
nav{position:fixed!important;left:0;right:0;bottom:0;top:auto!important;height:64px!important;background:#061522f5;border-top:1px solid #24465e;z-index:50;display:flex!important;justify-content:space-around;margin:0}
nav button{width:16.66%!important;min-width:0!important;height:64px!important;padding:5px 1px!important;border-bottom:0!important;border-top:3px solid transparent!important;font-size:18px!important}
nav button.on{border-top-color:#18aaff!important;background:#0d2c4c!important}
nav i{font-size:8px!important;margin-top:4px!important}
.navBadge{top:2px!important;right:3px!important}
main{padding-bottom:8px}
}
.shareInvite{margin:7px 0;background:linear-gradient(#26c767,#14984a);border-color:#42e47f;box-shadow:0 0 16px #24c76433}.matchCarousel{overflow:hidden}.matchCarousel img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}.matchCarousel>span{position:absolute}.matchCarousel img.pop{animation:avatarPop .18s ease}@keyframes avatarPop{0%{transform:scale(.72);opacity:.35}100%{transform:scale(1);opacity:1}}.mode,.panel,.playerCard{transition:border-color .2s,box-shadow .2s}.mode:hover{box-shadow:0 0 35px #159eff22}.endCard{animation:endPop .28s ease}@keyframes endPop{0%{transform:scale(.88);opacity:0}100%{transform:scale(1);opacity:1}}
/* V11: mobile/tablet navigation is unconditionally bottom-docked */
@media (max-width: 1024px){
body{padding-bottom:72px!important}
header{height:62px!important;position:sticky!important;top:0!important;z-index:60!important;padding:0 12px!important}
#mainNav.mainNav{position:fixed!important;left:0!important;right:0!important;bottom:0!important;top:auto!important;height:68px!important;z-index:999!important;margin:0!important;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)!important;background:#061522f7!important;border-top:1px solid #28506b!important;box-shadow:0 -10px 30px #0008!important;display:flex!important;align-items:stretch!important;justify-content:space-around!important}
#mainNav.mainNav button{position:relative!important;flex:1 1 0!important;width:auto!important;min-width:0!important;height:68px!important;padding:6px 1px!important;border:0!important;border-top:3px solid transparent!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;font-size:19px!important;color:#91a8bb!important}
#mainNav.mainNav button.on{background:#0d2c4c!important;border-top-color:#1aafff!important;color:#fff!important}
#mainNav.mainNav button i{display:block!important;font-size:9px!important;margin-top:4px!important}
.navBadge{top:3px!important;right:8px!important}
.who{margin-left:auto!important}
}
@media (max-width:760px){
header>.logo{display:block!important}
.who>div{display:block!important}
.who>div b,.who>div small{display:block!important}
}
/* V12: score-card avatars are isolated from live score repaints */
.gameAvatar{contain:layout paint;isolation:isolate}
.gameAvatar>img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;pointer-events:none;backface-visibility:hidden;transform:translateZ(0)}
/* V13 FINAL MOBILE NAV OVERRIDE — MUST BE LAST */
.mobileTopProfile{display:none}
@media (max-width:760px){
html,body{overflow-x:hidden!important}
body{padding-top:58px!important;padding-bottom:76px!important}
/* Hide the entire desktop header on phones; prevents it sitting behind nav */
body>header{display:none!important}
.mobileTopProfile{
display:flex!important;
position:fixed!important;
top:0!important;left:0!important;right:0!important;
height:58px!important;
z-index:1001!important;
align-items:center!important;
justify-content:space-between!important;
padding:7px 12px!important;
background:#061522f8!important;
border-bottom:1px solid #21465f!important;
box-shadow:0 8px 22px #0006!important;
}
.mobileBrand{font-size:18px;font-weight:950}
.mobileBrand span{color:#19aaff}
.mobileMe{display:flex!important;align-items:center!important;gap:7px!important;padding:0!important;background:none!important;border:0!important;box-shadow:none!important;text-align:right!important}
.mobileMe img{width:38px!important;height:38px!important;border-radius:50%!important;object-fit:cover!important;border:2px solid #25baff!important;order:2}
.mobileMe span{display:block!important}.mobileMe b{display:block!important;font-size:11px!important}.mobileMe small{display:block!important;font-size:8px!important;color:#72d1ff!important}
/* Force navigation to bottom, independent of header */
#mainNav.mainNav{
display:flex!important;
position:fixed!important;
top:auto!important;
bottom:0!important;
left:0!important;
right:0!important;
width:100vw!important;
height:68px!important;
min-height:68px!important;
z-index:2000!important;
margin:0!important;
padding:0 0 env(safe-area-inset-bottom) 0!important;
transform:none!important;
background:#061522!important;
border:0!important;
border-top:1px solid #28506b!important;
box-shadow:0 -8px 25px #0009!important;
overflow:visible!important;
}
#mainNav.mainNav button{
display:block!important;
position:relative!important;
flex:1 1 0!important;
width:14.285%!important;
min-width:0!important;
max-width:none!important;
height:68px!important;
margin:0!important;
padding:7px 0 4px!important;
border:0!important;
border-top:3px solid transparent!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
color:#91a8bb!important;
font-size:18px!important;
}
#mainNav.mainNav button.on{
color:#fff!important;
background:#0d2c4c!important;
border-top-color:#18aaff!important;
}
#mainNav.mainNav button i{display:block!important;font-size:8px!important;line-height:1.1!important;margin-top:4px!important}
#mainNav .navBadge{top:2px!important;right:2px!important}
main{padding-top:7px!important;padding-bottom:5px!important}
}
@media (min-width:761px){
.mobileTopProfile{display:none!important}
}
/* V14: nav is physically outside header. Phone bottom bar cannot be hidden with desktop header. */
@media(max-width:760px){
body>header{display:none!important}
body>#mainNav.mainNav{
display:flex!important;
visibility:visible!important;
opacity:1!important;
position:fixed!important;
inset:auto 0 0 0!important;
width:100%!important;
height:70px!important;
z-index:2147483000!important;
background:#061522!important;
border-top:1px solid #2a526e!important;
box-shadow:0 -10px 30px #000b!important;
}
body>#mainNav.mainNav button{
display:flex!important;
flex:1 1 0!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
width:auto!important;
height:70px!important;
padding:4px 0!important;
color:#91a8bb!important;
}
body>#mainNav.mainNav button.on{color:white!important;background:#0d2c4c!important;border-top:3px solid #18aaff!important}
body>#mainNav.mainNav button i{display:block!important}
body{padding-bottom:78px!important}
}
@media(min-width:761px){
body>#mainNav.mainNav{
position:absolute!important;
top:0!important;
left:50%!important;
transform:translateX(-50%)!important;
height:72px!important;
z-index:25!important;
}
}
/* V15 gameplay: one task at a time + fit between mobile header/footer */
.mobileGameStatus{display:none}
.num.used.foundBlue{border-color:#16aaff!important;box-shadow:0 0 0 2px #16aaff22;color:#157bb5}
.num.used.foundPink{border-color:#ff378f!important;box-shadow:0 0 0 2px #ff378f22;color:#bd2b70}
@media(max-width:760px){
/* Game becomes a viewport app between 58px top header and 70px bottom nav */
#game{
position:fixed!important;
top:58px!important;
bottom:70px!important;
left:0!important;right:0!important;
z-index:40!important;
background:#04111d!important;
overflow:hidden!important;
padding:5px!important;
}
#game .versus{
height:66px!important;
margin:0 0 4px!important;
}
.mobileGameStatus{
display:flex!important;
height:42px!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
margin-bottom:4px!important;
border:1px solid #22506d!important;
border-radius:10px!important;
background:#0a2134!important;
font-size:12px!important;
font-weight:900!important;
letter-spacing:.4px!important;
}
.mobileGameStatus strong{font-size:22px!important;color:#ff5aa5!important}
#game .gameDesk{
height:calc(100% - 116px)!important;
min-height:0!important;
overflow:hidden!important;
}
#game .centerGame{height:100%!important;min-height:0!important}
#game .handPanel,#game .gridPanel{height:100%!important;min-height:0!important;margin:0!important}
#game .hand{height:calc(100% - 38px)!important;min-height:0!important}
#game .gridPanel{display:flex!important;flex-direction:column!important}
#game .gridPanel[hidden],#game .handPanel[hidden]{display:none!important}
#game .crossgrid{
flex:1!important;
min-height:0!important;
width:auto!important;
max-width:100%!important;
height:auto!important;
margin:auto!important;
display:grid!important;
grid-template-columns:repeat(10,minmax(0,1fr))!important;
grid-template-rows:repeat(10,minmax(0,1fr))!important;
gap:3px!important;
aspect-ratio:1/1!important;
max-height:calc(100% - 40px)!important;
}
#game .cell{width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;aspect-ratio:auto!important}
/* If phone is too short, use 20x5: still exactly 100 cells, much better fit. */
@media(max-height:700px){
#game .crossgrid{grid-template-columns:repeat(20,minmax(0,1fr))!important;grid-template-rows:repeat(5,minmax(0,1fr))!important;aspect-ratio:4/1!important;width:100%!important;max-height:none!important}
}
.sidePanel,.rightPanel{display:none!important}
}
#roundWait{color:#74d6ff;font-weight:800;animation:waitPulse 1.2s infinite}@keyframes waitPulse{50%{opacity:.45}}.endCard #nextLevel{background:linear-gradient(#22bd78,#11965b);border-color:#35dd91}.endCard #newPlayer{background:linear-gradient(#159fff,#0874d8)}
.audioControls{display:flex;gap:5px;margin-right:7px}.audioControls .soundToggle{font-size:10px;padding:7px 8px;margin:0}
#scoreAvatarLayer{position:fixed;inset:0;z-index:46;pointer-events:none}.fixedScoreAvatar{position:fixed;padding:0!important;margin:0!important;border-radius:50%!important;overflow:hidden!important;background:#081a29!important;border:2px solid #35c8ff!important;box-shadow:0 0 16px #159eff55!important;pointer-events:auto!important;transition:none!important;animation:none!important}.fixedScoreAvatar img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:50%!important;transition:none!important;animation:none!important;transform:none!important}.gameAvatar{visibility:hidden!important}
@media(max-width:760px){.audioControls{position:fixed;right:6px;top:62px;z-index:1002}.audioControls .soundToggle{display:block!important;background:#0a2033cc!important}}
.leaderboardRow{width:100%;grid-template-columns:auto auto 1fr auto auto!important;text-align:left!important;background:#0a2235!important;border:1px solid #1c4865!important;box-shadow:none!important;color:#eef7ff!important}.leaderAvatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #26baff;box-shadow:0 0 12px #159eff55}.leaderboardRow:hover{border-color:#25baff!important;background:#0d2b43!important}.adminMusicGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.adminMusicCard{padding:18px;background:#0a2235;border:1px solid #1d4b69;border-radius:14px}.adminMusicCard audio{width:100%;margin:10px 0}.adminMusicCard button{margin:5px}.adminHint{color:#9db1c0}.adminNavBtn{color:#ffcf66!important}@media(max-width:760px){.adminMusicGrid{grid-template-columns:1fr}.leaderboardRow{grid-template-columns:auto auto 1fr!important}.leaderboardRow .stat{display:none!important}}
.audioControls{align-items:center}.audioControls button{white-space:nowrap}.adminMusicCard audio{background:#071522;border-radius:10px}
.floatingAudio{position:fixed;right:10px;bottom:82px;z-index:5000;display:flex;gap:5px;pointer-events:none}
.floatingAudio button{pointer-events:auto!important;padding:7px 9px!important;border-radius:999px!important;background:#092238ee!important;border:1px solid #315c77!important;box-shadow:0 4px 14px #0007!important;font-size:10px!important;color:#9db4c5!important}
.floatingAudio button.on{color:#fff!important;border-color:#22b9ff!important;background:#0c3859ee!important}
.floatingAudio span{font-size:8px}
.leaderExplain{color:#9fb4c4;margin:12px 0 16px}
.leaderCard{display:grid!important;width:100%!important;grid-template-columns:45px 48px minmax(150px,1fr) repeat(3,85px) minmax(150px,auto)!important;align-items:center!important;gap:10px!important;text-align:left!important;padding:12px 14px!important;background:#0a2235!important;border:1px solid #1c4865!important;box-shadow:none!important;color:#eef7ff!important}
.leaderCard:first-child{border-color:#d7ae4d!important}.leaderAvatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #28baff}.leaderIdentity small,.leaderMetric small,.leaderNeed small{display:block;color:#8da5b7;font-size:9px}.leaderMetric b{font-size:17px;color:#62d2ff}.leaderNeed{justify-self:end;color:#ffd36b;font-size:11px;font-weight:800}
@media(max-width:760px){.floatingAudio{bottom:75px;right:6px}.audioControls{display:none!important}.leaderCard{grid-template-columns:30px 40px 1fr auto!important;gap:7px!important}.leaderMetric:nth-of-type(n+2){display:none}.leaderNeed{grid-column:3/5;justify-self:start}.leaderAvatar{grid-row:1/3}.leaderPos{grid-row:1/3}}
/* V22 — leaderboard metrics visible on all screen sizes */
.leaderCard .leaderMetric,
.leaderCard .leaderNeed{display:block!important}
.leaderCard .leaderMetric b{display:block!important}
.leaderCard .leaderMetric small,
.leaderCard .leaderNeed small{display:block!important}
@media(max-width:760px){
.leaderCard{
display:grid!important;
grid-template-columns:34px 48px 1fr auto!important;
grid-template-areas:
"pos avatar identity identity"
"pos avatar rating wins"
"pos avatar losses losses"
"pos avatar need need"!important;
gap:4px 9px!important;
padding:12px!important;
align-items:center!important;
}
.leaderPos{grid-area:pos!important;align-self:start!important;padding-top:8px}
.leaderAvatar{grid-area:avatar!important;width:46px!important;height:46px!important;align-self:start!important}
.leaderIdentity{grid-area:identity!important}
.leaderIdentity b{font-size:16px!important}
.leaderIdentity small{font-size:10px!important}
.leaderMetric{display:block!important;text-align:left!important}
.leaderMetric:nth-of-type(2){grid-area:rating!important}
.leaderMetric:nth-of-type(3){grid-area:wins!important}
.leaderMetric:nth-of-type(4){grid-area:losses!important}
.leaderMetric b{display:inline!important;font-size:14px!important;color:#65d4ff!important}
.leaderMetric small{display:inline!important;margin-left:4px!important;font-size:9px!important;color:#8fa7b9!important}
.leaderNeed{
grid-area:need!important;
display:block!important;
justify-self:start!important;
margin-top:5px!important;
padding:6px 9px!important;
border-radius:8px!important;
background:#071a2a!important;
color:#ffd36b!important;
font-size:10px!important;
}
.leaderNeed small{margin-top:2px!important}
}
/* =========================================================
V23 RESPONSIVE / SPACING POLISH
Keep leaderboard metrics horizontal on tablets / zoomed UI
========================================================= */
/* General click-target and component breathing room */
button{min-height:38px}
.mode button,.socialAdd button,.heroActions button,.endCard button,.adminMusicCard button{margin-top:6px}
.panel{overflow:visible}
.contentPanel{padding:22px}
.list{gap:10px}
.rowActions{gap:8px;flex-wrap:wrap}
.socialAdd{gap:10px}
.profileBadges{gap:10px}
.heroActions{gap:12px}
.audioControls{gap:7px}
.floatingAudio{gap:7px}
.endCard button{min-width:150px}
input,select{min-height:42px}
.mode input,.mode select{margin-top:8px;margin-bottom:12px}
/* Leaderboard: stable desktop/tablet row.
Minmax prevents metrics from collapsing underneath each other. */
.leaderboardList{width:100%}
.leaderCard{
display:grid!important;
grid-template-columns:
42px
48px
minmax(150px,1fr)
minmax(78px,90px)
minmax(68px,80px)
minmax(68px,80px)
minmax(125px,165px)!important;
gap:12px!important;
align-items:center!important;
min-height:76px!important;
padding:12px 14px!important;
}
.leaderPos,.leaderAvatar,.leaderIdentity,.leaderMetric,.leaderNeed{
min-width:0!important;
}
.leaderIdentity{overflow:hidden}
.leaderIdentity b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leaderMetric{text-align:center!important;white-space:nowrap!important}
.leaderMetric b{display:block!important}
.leaderMetric small{display:block!important;margin:1px 0 0!important}
.leaderNeed{
justify-self:stretch!important;
text-align:center!important;
white-space:normal!important;
line-height:1.25!important;
padding:7px 8px!important;
border-radius:8px!important;
background:#071a2a!important;
}
/* Tablet / Fold unfolded: stay SIDE BY SIDE, just tighter.
This directly fixes the 100%-zoom screenshot. */
@media (min-width:761px) and (max-width:1180px){
.contentPanel{max-width:calc(100vw - 34px)!important;margin:18px auto!important;padding:18px!important}
.leaderCard{
grid-template-columns:
34px
44px
minmax(125px,1fr)
70px
62px
62px
minmax(108px,135px)!important;
gap:8px!important;
padding:10px!important;
min-height:70px!important;
}
.leaderAvatar{width:40px!important;height:40px!important}
.leaderIdentity b{font-size:14px!important}
.leaderIdentity small{font-size:9px!important}
.leaderMetric b{font-size:14px!important}
.leaderMetric small{font-size:8px!important}
.leaderNeed{font-size:9px!important;padding:6px!important}
.rankroad{line-height:1.55}
}
/* Phones: intentionally compact card, but metrics remain grouped and readable. */
@media(max-width:760px){
.contentPanel{padding:12px!important;margin:8px auto!important}
.leaderCard{
grid-template-columns:30px 44px minmax(0,1fr) auto!important;
grid-template-areas:
"pos avatar identity rating"
"pos avatar wins losses"
"pos avatar need need"!important;
gap:5px 8px!important;
min-height:92px!important;
padding:10px!important;
}
.leaderPos{grid-area:pos!important}
.leaderAvatar{grid-area:avatar!important;width:42px!important;height:42px!important}
.leaderIdentity{grid-area:identity!important}
.leaderMetric:nth-of-type(2){grid-area:rating!important}
.leaderMetric:nth-of-type(3){grid-area:wins!important}
.leaderMetric:nth-of-type(4){grid-area:losses!important}
.leaderNeed{grid-area:need!important;text-align:left!important;justify-self:start!important;padding:5px 7px!important}
.leaderMetric{display:block!important;text-align:right!important}
.leaderMetric b{display:inline!important;font-size:12px!important}
.leaderMetric small{display:inline!important;margin-left:3px!important;font-size:8px!important}
.leaderIdentity b{font-size:13px!important}
.leaderIdentity small{font-size:8px!important}
/* Consistent space above fixed bottom navigation */
main{padding-bottom:16px!important}
.page{padding-bottom:10px}
.floatingAudio{bottom:78px!important}
.rowActions button{min-height:34px;padding:7px 9px}
.heroActions button{width:100%}
.endCard{padding:22px!important}
.endCard button{display:block;width:100%;margin:7px 0!important}
.socialAdd input{margin-bottom:8px}
}
/* Very narrow phones */
@media(max-width:390px){
.leaderCard{
grid-template-columns:26px 38px minmax(0,1fr) auto!important;
gap:4px 6px!important;
padding:8px!important;
}
.leaderAvatar{width:36px!important;height:36px!important}
.leaderIdentity b{font-size:12px!important}
.floatingAudio button{padding:6px 7px!important}
}
/* =========================================================
V24 — GLOBAL SCALE POLISH
More desktop-like information density on fold/tablet screens
without shrinking touch targets too far.
========================================================= */
/* Overall content density */
main{max-width:1440px!important;padding:12px!important}
.contentPanel{max-width:1120px!important;padding:18px!important;margin:18px auto!important}
.panel{border-radius:14px!important;padding:14px!important}
h1{font-size:clamp(25px,3vw,38px)!important}
h2{font-size:clamp(18px,2vw,26px)!important}
h3{font-size:17px!important}
p{line-height:1.45}
button{min-height:34px!important;padding:9px 13px!important}
input,select{min-height:38px!important;padding:9px 11px!important}
/* Main play selection cards */
.lobby{max-width:920px!important;margin:2vh auto!important}
.lobbyTitle{margin-bottom:14px!important}
.lobbyTitle h1{font-size:31px!important}
.modecards{gap:14px!important}
.mode{min-height:260px!important;padding:20px!important}
.modeIcon{width:56px!important;height:56px!important;font-size:26px!important}
.mode h2{margin:8px 0!important}
.mode p{margin:8px 0 13px!important}
/* Profile */
.profileHero{max-width:1050px!important;margin:16px auto 10px!important;padding:17px!important}
.profileAvatar{width:112px!important;height:112px!important}
.profileGrid,.levelStats{max-width:1050px!important}
.statGrid>div{padding:10px!important}
.statGrid b{font-size:18px!important}
/* Home */
.homeHero{min-height:520px!important;padding:30px max(18px,4vw)!important;gap:30px!important}
.heroCopy h1{font-size:clamp(42px,5vw,70px)!important}
.heroCopy p{font-size:15px!important}
.heroVisual{padding:18px!important}
.miniHand{height:210px!important}
/* Rank / leaderboard compactness */
.rankroad{padding:14px!important;font-size:14px!important}
.leaderExplain{font-size:13px!important;margin:10px 0 13px!important}
.leaderCard{
min-height:62px!important;
padding:9px 11px!important;
gap:9px!important;
}
.leaderAvatar{width:38px!important;height:38px!important}
.leaderIdentity b{font-size:13px!important}
.leaderMetric b{font-size:13px!important}
.leaderNeed{padding:5px 7px!important}
/* Friends/messages/trophies */
.listRow{padding:9px!important}
.avatar.tiny{width:34px!important;height:34px!important}
.trophies div{padding:14px!important;font-size:25px!important}
.messenger{min-height:430px!important}
/* Header/footer a little slimmer on tablet/fold */
@media(min-width:761px) and (max-width:1180px){
body{font-size:13px!important}
main{padding:10px!important}
.contentPanel{max-width:calc(100vw - 42px)!important;padding:15px!important;margin:14px auto!important}
.lobby{max-width:800px!important}
.mode{min-height:225px!important;padding:17px!important}
.modeIcon{width:50px!important;height:50px!important}
.profileAvatar{width:96px!important;height:96px!important}
.profileHero{gap:18px!important}
.homeHero{min-height:450px!important}
.heroCopy h1{font-size:48px!important}
/* Leaderboard is intentionally the densest area */
.leaderCard{
grid-template-columns:30px 38px minmax(115px,1fr) 62px 54px 54px minmax(96px,120px)!important;
min-height:58px!important;
padding:8px 9px!important;
gap:7px!important;
}
.leaderAvatar{width:36px!important;height:36px!important}
.leaderIdentity b{font-size:12px!important}
.leaderIdentity small,.leaderMetric small{font-size:7px!important}
.leaderMetric b{font-size:12px!important}
.leaderNeed{font-size:8px!important}
.rankroad{font-size:12px!important}
}
/* Phone: smaller visual scale, touch areas stay usable */
@media(max-width:760px){
body{font-size:13px!important}
main{padding:6px!important}
.contentPanel{padding:10px!important;margin:6px auto!important}
h1{font-size:25px!important}
h2{font-size:19px!important}
button{min-height:38px!important}
.lobbyTitle h1{font-size:27px!important}
.mode{padding:15px!important}
.modeIcon{width:50px!important;height:50px!important}
.profileAvatar{width:92px!important;height:92px!important}
.statGrid>div{padding:9px!important}
.homeHero{padding:18px 9px!important}
.heroCopy h1{font-size:41px!important}
.heroCopy p{font-size:13px!important}
/* Keep leaderboard readable but no giant empty card */
.leaderCard{
min-height:76px!important;
padding:8px!important;
}
.leaderAvatar{width:38px!important;height:38px!important}
.leaderNeed{margin-top:2px!important}
}
/* Large desktop can breathe a bit more, without giant UI */
@media(min-width:1400px){
body{font-size:14px!important}
.contentPanel{max-width:1180px!important}
}
/* V25 — compact leaderboard cards only. No global scale/game/audio changes. */
.leaderCard{
min-height:54px!important;
padding:8px 11px!important;
align-items:center!important;
}
.leaderPos{align-self:center!important}
.leaderAvatar{align-self:center!important}
.leaderIdentity{align-self:center!important}
.leaderMetric{align-self:center!important}
.leaderNeed{
align-self:center!important;
margin:0!important;
padding:5px 7px!important;
line-height:1.15!important;
}
/* Leader gets a compact badge instead of consuming card height */
.leaderCard:first-child .leaderNeed{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
justify-self:end!important;
min-width:72px!important;
}
/* Fold / tablet */
@media(min-width:761px) and (max-width:1180px){
.leaderCard{
min-height:50px!important;
padding:7px 9px!important;
}
.leaderCard:first-child .leaderNeed{min-width:66px!important}
}
/* Phone: identity and stats stay compact; badge sits beside/below stats without empty space */
@media(max-width:760px){
.leaderCard{
grid-template-columns:28px 40px minmax(0,1fr) 62px!important;
grid-template-areas:
"pos avatar identity rating"
"pos avatar wins losses"
"pos avatar need need"!important;
min-height:74px!important;
padding:8px 9px!important;
gap:3px 8px!important;
}
.leaderPos{grid-area:pos!important;align-self:center!important}
.leaderAvatar{grid-area:avatar!important;align-self:center!important}
.leaderIdentity{grid-area:identity!important}
.leaderMetric:nth-of-type(2){grid-area:rating!important}
.leaderMetric:nth-of-type(3){grid-area:wins!important}
.leaderMetric:nth-of-type(4){grid-area:losses!important}
.leaderNeed{
grid-area:need!important;
justify-self:start!important;
width:auto!important;
min-width:0!important;
padding:4px 7px!important;
}
.leaderCard:first-child .leaderNeed{
justify-self:start!important;
min-width:0!important;
}
}
/* V26 — purpose-built NumRush authentication */
.authGame{max-width:none!important;min-height:100dvh!important;padding:0!important;display:grid!important;place-items:center!important;background:
radial-gradient(circle at 18% 28%,#0a70ad2b,transparent 30%),
radial-gradient(circle at 85% 72%,#d82b8120,transparent 28%),#03111d!important}
.authStage{width:min(1120px,94vw);display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}
.authBrand{padding:28px;position:relative}
.authLogo{font-size:42px;font-weight:950;line-height:1}.authLogo strong{color:#eef8ff}.authLogo span{color:#20aaff}
.authTag{font-size:10px;letter-spacing:5px;color:#7fcff6;margin:7px 0 30px 58px;font-weight:900}
.authBrand h1{font-size:clamp(45px,6vw,78px)!important;line-height:.92;margin:0 0 18px}.authBrand h1 em{font-style:normal;color:#1aafff;text-shadow:0 0 28px #159eff55}
.authBrand>p{max-width:520px;color:#9eb5c5;font-size:15px;line-height:1.55}
.authMiniGame{margin-top:24px;padding:13px;border:1px solid #23506c;border-radius:16px;background:#071c2caa;display:grid;grid-template-columns:1fr 50px 1fr;gap:8px;align-items:center}
.authPlayer{padding:10px;border-radius:10px;display:flex;justify-content:space-between}.authPlayer.blue{border:1px solid #19aaff;background:#082b45}.authPlayer.pink{border:1px solid #f6388b;background:#311128}.authPlayer strong{color:#5bcfff}.authPlayer.pink strong{color:#ff5ca4}.authVs{text-align:center;color:#ffad35;font-weight:950;font-size:22px}
.authNumbers{grid-column:1/4;height:90px;background:#f4dfc2;border-radius:9px;color:#111;position:relative;overflow:hidden}.authNumbers span{position:absolute;font-weight:900}.authNumbers span:nth-child(1){left:8%;top:20%}.authNumbers span:nth-child(2){left:27%;top:57%}.authNumbers span:nth-child(3){left:45%;top:24%}.authNumbers span:nth-child(4){left:67%;top:55%}.authNumbers span:nth-child(5){left:84%;top:22%}.authNumbers span:nth-child(6){left:16%;top:66%}.authNumbers span:nth-child(7){left:59%;top:13%}.authNumbers span:nth-child(8){left:77%;top:69%}.authNumbers .circled{border:3px solid #ff3c91;border-radius:50%;padding:2px 5px}
.authCard{padding:26px;border:1px solid #24536e;border-radius:22px;background:linear-gradient(145deg,#0a2236ee,#071622f5);box-shadow:0 28px 80px #0008,0 0 45px #159eff12}
.authCardHead>span{font-size:9px;letter-spacing:3px;color:#59c9ff;font-weight:900}.authCardHead h2{font-size:29px!important;margin:6px 0}.authCardHead p{color:#91a9ba;margin:0 0 17px}
.authTabs{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;background:#061725;padding:5px;border-radius:11px;margin-bottom:17px}.authTabs button{margin:0!important;background:transparent!important;box-shadow:none!important;border:1px solid transparent!important}.authTabs button.active{background:#0e3b5f!important;border-color:#1a9deb!important;color:white!important}
.authCard form{display:grid;gap:11px}.authCard label span{display:block;font-size:9px;color:#7f9bae;text-transform:uppercase;letter-spacing:1px;margin:0 0 5px 2px}.authCard input{width:100%;margin:0!important;background:#061a29!important;border:1px solid #2a5069!important}.authCard input:focus{border-color:#21b2ff!important;box-shadow:0 0 0 3px #159eff16!important;outline:none}
.authPrimary{margin-top:5px!important;background:linear-gradient(180deg,#1db4ff,#0878dc)!important;border-color:#32c0ff!important;font-size:14px!important;letter-spacing:.4px}
.authMsg{min-height:18px;color:#ff718f;font-size:11px;text-align:center}.authFoot{display:flex;justify-content:center;gap:18px;padding-top:14px;border-top:1px solid #18394f;color:#7f9bae;font-size:9px}
.mobileLogout{display:inline-flex;align-items:center;justify-content:center;gap:6px;margin:10px auto 0;padding:8px 12px;border:1px solid #6a3342;border-radius:9px;background:#2b1119;color:#ff8da4;text-decoration:none;font-size:10px;font-weight:900}
@media(max-width:760px){
.authGame{padding:18px 12px!important;place-items:center!important}
.authStage{width:100%;display:block}
.authBrand{padding:0 5px 13px;text-align:center}
.authLogo{font-size:35px}.authTag{margin:5px 0 12px;font-size:8px;letter-spacing:4px}
.authBrand h1{font-size:34px!important;line-height:.95;margin:0 0 8px}.authBrand>p{font-size:11px;max-width:390px;margin:0 auto}
.authMiniGame{display:none}
.authCard{padding:15px;border-radius:16px;margin:auto;max-width:480px}
.authCardHead{text-align:center}.authCardHead h2{font-size:21px!important}.authCardHead p{font-size:11px;margin-bottom:11px}
.authTabs{margin-bottom:11px}.authTabs button{min-height:34px!important;padding:6px!important;font-size:10px!important}
.authCard form{gap:8px}.authCard input{min-height:40px!important;font-size:13px}
.authPrimary{min-height:42px!important}
.authFoot{gap:11px;flex-wrap:wrap;padding-top:10px}
.mobileLogout{display:flex;width:fit-content;margin:8px 10px 12px auto}
}
/* V27 — auth must fit one viewport: no pointless login scrolling */
html:has(.authGame),body:has(.authGame){height:100%;overflow:hidden!important}
.authGame{
height:100dvh!important;
min-height:0!important;
overflow:hidden!important;
padding:12px!important;
box-sizing:border-box!important;
}
.authStage{max-height:100%!important}
@media(max-width:760px){
html:has(.authGame),body:has(.authGame){height:100dvh!important;overflow:hidden!important}
.authGame{
height:100dvh!important;
min-height:100dvh!important;
padding:10px 12px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.authStage{
width:100%!important;
max-width:480px!important;
max-height:calc(100dvh - 20px)!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
gap:10px!important;
}
.authBrand{flex:0 0 auto!important;padding:0 4px!important}
.authLogo{font-size:29px!important;line-height:1!important}
.authTag{font-size:7px!important;letter-spacing:3px!important;margin:3px 0 7px!important}
.authBrand h1{font-size:28px!important;line-height:.92!important;margin:0 0 5px!important}
.authBrand>p{font-size:10px!important;line-height:1.35!important;max-width:420px!important}
.authCard{flex:0 0 auto!important;width:100%!important;padding:12px!important;margin:0!important;border-radius:15px!important}
.authCardHead>span{font-size:7px!important;letter-spacing:2.5px!important}
.authCardHead h2{font-size:18px!important;margin:3px 0!important}
.authCardHead p{font-size:9px!important;margin:0 0 8px!important}
.authTabs{padding:4px!important;margin-bottom:8px!important}
.authTabs button{height:32px!important;min-height:32px!important;padding:4px!important;font-size:9px!important}
.authCard form{gap:6px!important}
.authCard label span{font-size:7px!important;margin-bottom:3px!important}
.authCard input{height:38px!important;min-height:38px!important;padding:7px 10px!important;font-size:12px!important}
.authPrimary{height:40px!important;min-height:40px!important;margin-top:2px!important;font-size:12px!important}
.authMsg{min-height:10px!important;margin:3px 0!important;font-size:9px!important}
.authFoot{padding-top:7px!important;gap:10px!important;font-size:7px!important}
}
/* Extra-short phone/browser viewport */
@media(max-width:760px) and (max-height:700px){
.authLogo{font-size:25px!important}
.authTag{display:none!important}
.authBrand h1{font-size:24px!important}
.authBrand>p{font-size:9px!important}
.authStage{gap:6px!important}
.authCard{padding:9px 11px!important}
.authCardHead p{display:none!important}
.authFoot{display:none!important}
}
/* V28 — NumRush Arena authentication */
html:has(.authV28),body:has(.authV28){height:100%;overflow:hidden!important}
.authV28{position:relative!important;height:100dvh!important;min-height:0!important;overflow:hidden!important;padding:10px!important;background:#020d17!important;display:grid!important;place-items:center!important}
.authV28:before{content:"";position:absolute;inset:0;background-image:linear-gradient(#0b35551f 1px,transparent 1px),linear-gradient(90deg,#0b35551f 1px,transparent 1px);background-size:34px 34px;mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 80%,transparent);pointer-events:none}
.arenaGlow{position:absolute;width:420px;height:420px;border-radius:50%;filter:blur(100px);opacity:.16;pointer-events:none}.arenaGlowBlue{background:#009dff;left:-170px;top:12%}.arenaGlowPink{background:#ff2483;right:-190px;bottom:8%}
.authArena{position:relative;width:min(930px,96vw);max-height:calc(100dvh - 20px);border:1px solid #22506c;border-radius:22px;background:#061725eF;box-shadow:0 35px 100px #000b,0 0 55px #0b8ed51b;overflow:hidden}
.arenaHeader{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-bottom:1px solid #1d425b;background:#071b2a}
.arenaLogo{display:flex;align-items:center;gap:7px}.arenaLogo .crown{font-size:30px}.arenaLogo strong{font-size:25px;color:#eef8ff}.arenaLogo strong span{color:#1aaaff}.arenaLogo small{font-size:7px;letter-spacing:3px;color:#73c7ee;margin-left:4px}.arenaLive{font-size:8px;letter-spacing:2px;color:#75d8aa;font-weight:900}.arenaLive i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#32dd89;box-shadow:0 0 10px #32dd89;margin-right:5px;animation:livePulse 1.5s infinite}@keyframes livePulse{50%{opacity:.35}}
.arenaDuel{height:76px;display:grid;grid-template-columns:1fr 60px 1fr;align-items:center;border-bottom:1px solid #1d425b}.arenaPlayer{height:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:0 18px}.arenaPlayer.blue{background:linear-gradient(90deg,#082d48,transparent)}.arenaPlayer.pink{background:linear-gradient(270deg,#351127,transparent)}.arenaAvatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:950;background:linear-gradient(135deg,#17baff,#694dff);border:2px solid #4ad1ff;box-shadow:0 0 18px #159eff55}.arenaPlayer.pink .arenaAvatar{background:#151d2c;border-color:#ff3b91;box-shadow:0 0 18px #ff3b9155}.arenaPlayer small{display:block;font-size:7px;color:#809cad;letter-spacing:1px}.arenaPlayer b{font-size:11px}.arenaPlayer strong{font-size:18px;color:#4bcaff}.arenaPlayer.pink strong{color:#ff55a0}.arenaVs{text-align:center;font-size:22px;font-weight:950;color:#ffae34;text-shadow:0 0 15px #ff9c2844}
.arenaBoard{position:relative;min-height:390px;display:grid;place-items:center;padding:22px;overflow:hidden}.numberField{position:absolute;inset:14px;background:#f0ddc4;border-radius:13px;opacity:.12;transform:perspective(800px) rotateX(2deg)}.numberField span{position:absolute;left:var(--x);top:var(--y);transform:rotate(var(--r));font-weight:950;color:#111;font-size:19px}.numberField .hot{border:3px solid #ff338c;border-radius:50%;padding:2px 6px}
.loginConsole{position:relative;z-index:2;width:min(430px,92%);padding:19px;border:1px solid #2b6487;border-radius:17px;background:#061826f5;box-shadow:0 18px 50px #000a,0 0 35px #0e9fff1a;backdrop-filter:blur(7px)}.consoleTitle{text-align:center}.consoleTitle span{display:block;color:#5ecfff;font-size:7px;letter-spacing:3px;font-weight:900}.consoleTitle b{display:block;font-size:20px;margin:4px 0}.consoleTitle small{color:#849ead;font-size:9px}.authV28 .authTabs{margin:12px 0 10px}.authV28 form{gap:7px}.authV28 label span{font-size:7px}.authV28 input{height:39px!important;min-height:39px!important}.authV28 .authPrimary{height:42px!important;min-height:42px!important}.authV28 .authMsg{margin:3px 0 0;min-height:10px}
.arenaFooter{height:38px;display:flex;align-items:center;justify-content:center;gap:28px;border-top:1px solid #1d425b;color:#6f8fa4;font-size:7px;letter-spacing:1px;background:#051522}
@media(max-width:760px){
.authV28{padding:7px!important}
.authArena{width:100%;max-height:calc(100dvh - 14px);border-radius:17px}
.arenaHeader{height:50px;padding:0 12px}.arenaLogo .crown{font-size:23px}.arenaLogo strong{font-size:20px}.arenaLogo small{display:none}.arenaLive{font-size:6px}
.arenaDuel{height:58px;grid-template-columns:1fr 40px 1fr}.arenaPlayer{gap:5px;padding:0 8px}.arenaAvatar{width:32px;height:32px;font-size:11px}.arenaPlayer strong{font-size:12px}.arenaPlayer b{font-size:8px}.arenaVs{font-size:16px}
.arenaBoard{min-height:0;height:calc(100dvh - 160px);padding:10px;align-items:center}
.numberField{inset:8px}.numberField span{font-size:13px}
.loginConsole{width:min(420px,96%);padding:13px;border-radius:14px}
.consoleTitle b{font-size:17px}.consoleTitle small{font-size:8px}
.authV28 .authTabs{margin:8px 0 7px}.authV28 .authTabs button{height:30px!important;min-height:30px!important;font-size:8px!important}
.authV28 form{gap:5px}.authV28 input{height:37px!important;min-height:37px!important;font-size:11px}.authV28 .authPrimary{height:39px!important;min-height:39px!important;font-size:10px!important}
.arenaFooter{height:38px;gap:12px;font-size:6px}
}
@media(max-width:760px) and (max-height:700px){
.arenaHeader{height:44px}.arenaDuel{height:50px}.arenaAvatar{width:28px;height:28px}.arenaBoard{height:calc(100dvh - 139px)}.arenaFooter{height:31px}.consoleTitle small{display:none}.loginConsole{padding:10px}
}
/* V29 — auth arena fills the ENTIRE website viewport */
html:has(.authV28),
body:has(.authV28){
width:100%!important;
height:100%!important;
min-height:100%!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
background:#020d17!important;
}
body:has(.authV28){position:fixed!important;inset:0!important}
.authV28{
position:fixed!important;
inset:0!important;
width:100vw!important;
height:100dvh!important;
min-height:100dvh!important;
max-width:none!important;
margin:0!important;
padding:0!important;
display:block!important;
overflow:hidden!important;
background:
radial-gradient(circle at 15% 35%,#0a8ee42a,transparent 35%),
radial-gradient(circle at 88% 68%,#ff2e8a20,transparent 32%),
#020d17!important;
}
.authV28 .authArena{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
max-width:none!important;
max-height:none!important;
margin:0!important;
border:0!important;
border-radius:0!important;
display:grid!important;
grid-template-rows:72px 82px minmax(0,1fr) 42px!important;
background:linear-gradient(180deg,#061a2a 0%,#03111d 100%)!important;
box-shadow:none!important;
}
.authV28 .arenaHeader{height:auto!important}
.authV28 .arenaDuel{height:auto!important}
.authV28 .arenaBoard{
height:auto!important;
min-height:0!important;
padding:18px!important;
}
.authV28 .arenaFooter{height:auto!important}
.authV28 .numberField{
inset:18px!important;
opacity:.18!important;
}
.authV28 .loginConsole{
width:min(440px,92vw)!important;
max-height:95%!important;
}
/* phone: full screen between browser chrome, centered arena terminal */
@media(max-width:760px){
.authV28 .authArena{
grid-template-rows:52px 62px minmax(0,1fr) 36px!important;
}
.authV28 .arenaHeader{padding:0 13px!important}
.authV28 .arenaBoard{
height:auto!important;
padding:8px!important;
display:grid!important;
place-items:center!important;
}
.authV28 .numberField{inset:7px!important}
.authV28 .loginConsole{
width:min(430px,94vw)!important;
max-height:calc(100% - 12px)!important;
margin:0!important;
}
.authV28 .arenaFooter{height:auto!important}
}
@media(max-width:760px) and (max-height:700px){
.authV28 .authArena{grid-template-rows:44px 52px minmax(0,1fr) 30px!important}
}
/* V30 community/game polish */
.gameExtras{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:4px 0}.gameExtras button{min-height:28px!important;padding:5px 8px!important;font-size:9px!important}.gameExtras #quickReacts{display:flex;gap:4px}.reactionBubble{position:fixed;z-index:3000;top:22%;left:50%;transform:translateX(-50%);padding:12px 18px;border-radius:999px;background:#081d2deF;border:1px solid #39c6ff;font-size:22px;font-weight:950;box-shadow:0 0 35px #159eff55}.reactionBubble.pop{animation:reactionPop 1.8s ease}@keyframes reactionPop{0%{transform:translateX(-50%) scale(.3);opacity:0}15%{transform:translateX(-50%) scale(1.15);opacity:1}80%{opacity:1}100%{transform:translateX(-50%) translateY(-30px);opacity:0}}
.preMatch{position:fixed;inset:0;z-index:4000;background:#020b14f5;display:grid;place-items:center}.preMatchCard{width:min(650px,92vw);text-align:center}.pmPlayers{display:grid;grid-template-columns:1fr 80px 1fr;align-items:center}.pmPlayers>div{display:grid;justify-items:center;gap:5px}.pmPlayers img{width:110px;height:110px;border-radius:50%;object-fit:cover;border:4px solid #23baff;box-shadow:0 0 35px #159eff66}.pmPlayers>div:last-child img{border-color:#ff3d91;box-shadow:0 0 35px #ff3d9166}.pmPlayers strong{font-size:42px;color:#ffad35}.pmPlayers b{font-size:20px}.pmPlayers small{color:#89a8bb}.preMatch #countdown{font-size:90px;font-weight:950;color:white;text-shadow:0 0 30px #159eff;margin-top:20px}.rushWord{font-size:55px;font-weight:1000;color:#ffb13b;opacity:0;transform:scale(.5)}.rushWord.show{animation:rushIn .5s forwards}@keyframes rushIn{to{opacity:1;transform:scale(1.1)}}
.trophyToast,.challengeToast{position:fixed;z-index:5000;right:16px;top:90px;width:min(340px,90vw);padding:15px;border-radius:15px;background:#071c2df5;border:1px solid #d9ad4c;box-shadow:0 18px 50px #000a}.trophyToast strong,.trophyToast b,.trophyToast small{display:block}.trophyToast strong{color:#ffd36b;font-size:10px}.trophyToast b{font-size:18px;margin:5px 0}.trophyToast small{color:#9bb1c1}.challengeToast{border-color:#ff3b91}.challengeToast b,.challengeToast small{display:block}.challengeToast div{display:flex;gap:6px;margin-top:10px}
.eventsGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.eventRow,.historyRow{display:grid;grid-template-columns:auto 1fr auto auto;gap:10px;align-items:center;padding:9px;border-bottom:1px solid #17384f}.dailyPlay{text-align:center;padding:18px}.dailyPlay strong{display:block;font-size:52px;color:#58ceff;margin:12px}.rivalScore{display:grid;grid-template-columns:1fr auto auto auto 1fr;gap:8px;align-items:center;text-align:center}.rivalScore b{font-size:35px;color:#5ad1ff}.rivalScore b:last-child{color:#ff5ca4}
@media(max-width:760px){.gameExtras{position:absolute;right:5px;top:112px;z-index:80;flex-direction:column;align-items:flex-end}.gameExtras #quickReacts{max-width:190px;flex-wrap:wrap;justify-content:flex-end}.pmPlayers img{width:72px;height:72px}.pmPlayers{grid-template-columns:1fr 55px 1fr}.pmPlayers strong{font-size:28px}.preMatch #countdown{font-size:68px}.rushWord{font-size:40px}.eventsGrid{grid-template-columns:1fr}.historyRow{grid-template-columns:auto 1fr auto}.historyRow small{grid-column:2/4}.trophyToast,.challengeToast{top:68px;right:8px}}
/* V31 Daily challenge */
.dailyGame{margin-top:12px}.dailyHud{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px 12px;border:1px solid #24506c;border-radius:11px;background:#071b2b}.dailyHud span{font-size:9px;color:#75cfff;font-weight:900;letter-spacing:1px}.dailyHud strong{font-size:23px;color:#ffcf58}.dailyHud small{grid-column:1/3;color:#829eaf;margin-top:3px}.dailyNumbers{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-top:8px;padding:10px;border-radius:12px;background:#efdcc2}.dailyNumbers button{min-height:34px!important;padding:4px!important;background:transparent!important;color:#101010!important;border:1px solid transparent!important;box-shadow:none!important;font-weight:900!important}.dailyNumbers button:hover{border-color:#198ed1!important}.dailyNumbers button.wrong{background:#ff4964!important;color:white!important}.dailyNumbers button.right{background:#23bf78!important;color:white!important}.dailyResult{text-align:center;padding:25px;border:1px solid #28bbff;border-radius:13px;background:#08243a}.dailyResult>*{display:block}.dailyResult strong{font-size:38px;color:#5cd2ff;margin:7px}.dailyResult small{color:#92aabd}
/* V31 profile — proper game player card */
.profileHeroV31{display:grid!important;grid-template-columns:120px 1fr auto!important;grid-template-areas:"avatar info actions"!important;align-items:center!important;gap:22px!important;padding:22px!important;background:linear-gradient(110deg,#082d49 0%,#071b2c 48%,#281125 100%)!important;border:1px solid #2a5875!important;min-height:155px!important}
.profileHeroV31 .profileAvatar{grid-area:avatar!important;width:110px!important;height:110px!important;box-shadow:0 0 30px #19aaff44!important}
.profileHeroV31 .profileInfo{grid-area:info!important;text-align:left!important}
.profileHeroV31 .profileInfo h1{margin:4px 0!important;font-size:29px!important}
.profileHeroV31 .profileInfo>p{margin:4px 0!important}
.profileHeroV31 .profileBadges{justify-content:flex-start!important;margin-top:10px!important}
.profileHeroV31 .avatarActions{grid-area:actions!important}
.profileGrid{gap:10px!important}.statGrid{gap:7px!important}.statGrid>div{background:#082237!important;border-color:#1b4763!important;border-radius:10px!important}.statGrid b{color:#5bd1ff!important}
.levelStats{margin-top:10px!important}
.historyRow{background:#071c2c;border-radius:8px;margin:5px 0;border:1px solid #173d56!important}
/* V31 leaderboard: no giant empty card, clear information columns */
.leaderCard{grid-template-columns:34px 42px minmax(120px,1fr) 68px 55px 55px minmax(90px,120px)!important;min-height:54px!important;padding:8px 10px!important;border-radius:10px!important}
.leaderIdentity b{font-size:13px!important}.leaderMetric{text-align:center!important}.leaderMetric b{font-size:13px!important}.leaderNeed{font-size:8px!important;padding:4px 6px!important}
.leaderCard:first-child{background:linear-gradient(90deg,#102b3e,#0a2235)!important}
@media(max-width:760px){
.dailyNumbers{grid-template-columns:repeat(6,1fr);gap:3px;padding:7px}.dailyNumbers button{min-height:31px!important;font-size:10px!important}
.profileHeroV31{grid-template-columns:78px 1fr!important;grid-template-areas:"avatar info" "actions actions"!important;gap:12px!important;padding:14px!important;min-height:0!important}
.profileHeroV31 .profileAvatar{width:76px!important;height:76px!important}.profileHeroV31 .profileInfo h1{font-size:21px!important}.profileHeroV31 .avatarActions{justify-self:start!important}.profileHeroV31 .avatarActions button{min-height:32px!important;padding:6px 9px!important}
.profileGrid{grid-template-columns:1fr!important}.statGrid{grid-template-columns:repeat(3,1fr)!important}.statGrid>div{padding:8px!important}.statGrid b{font-size:15px!important}
.leaderCard{grid-template-columns:26px 36px 1fr 55px!important;grid-template-areas:"pos avatar identity rating" "pos avatar wins losses" "pos avatar need need"!important;min-height:68px!important;padding:7px!important}.leaderAvatar{width:34px!important;height:34px!important}.leaderIdentity b{font-size:11px!important}.leaderNeed{justify-self:start!important}
}
.dailyResult em{display:block;margin-top:8px;color:#ffd36b;font-size:11px;font-style:normal;font-weight:800}
/* V33 — consistent spacing + NumRush-native dialogs */
:root{--space-1:6px;--space-2:10px;--space-3:14px;--space-4:18px}
button+button{margin-left:0!important}
.actions,.rowActions,.heroActions,.profileBadges,.socialAdd,.audioControls,.nrModalActions{gap:var(--space-2)!important}
.mode form,.authCard form{gap:var(--space-2)!important}
.panel>h1+.panel,.panel>h2+.panel{margin-top:var(--space-3)!important}
/* Matchmaking prompt: bot vs continue vs cancel */
#matchModal .searchActions,.searchActions{display:flex!important;gap:10px!important;justify-content:center!important;align-items:center!important;flex-wrap:wrap!important;margin-top:14px!important}
#matchModal .searchActions button,.searchActions button{min-width:150px!important;margin:0!important}
#botBtn,#continueSearch{margin:0!important;min-width:160px!important}
#cancelSearch{margin:8px auto 0!important;display:block!important}
.matchbox button{margin:5px!important}
/* Generic groups in game/end screens */
.endCard{display:flex!important;flex-direction:column!important;gap:9px!important}
.endCard button{margin:0!important}
.challengeToast div{gap:9px!important}
.gameExtras{gap:10px!important}
#quickReacts{gap:5px!important}
/* NumRush modal */
.nrModal{position:fixed;inset:0;z-index:999999;background:#010912d9;backdrop-filter:blur(7px);display:grid;place-items:center;padding:16px}
.nrModal[hidden]{display:none!important}
.nrModalCard{width:min(430px,94vw);padding:22px;border-radius:20px;border:1px solid #2a6386;background:linear-gradient(145deg,#0a263c,#061725 58%,#171125);box-shadow:0 30px 90px #000c,0 0 45px #159eff22;text-align:center;animation:nrModalIn .22s ease}
@keyframes nrModalIn{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:none}}
.nrModalIcon{width:58px;height:58px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;font-size:29px;background:#0c304b;border:1px solid #35bfff;box-shadow:0 0 24px #159eff44}
.nrModalCard h2{margin:4px 0!important;font-size:22px!important}.nrModalCard p{margin:8px auto 17px;color:#a1b6c5;line-height:1.45;max-width:350px}
.nrModalActions{display:flex;justify-content:center;flex-wrap:wrap}.nrModalActions button{min-width:120px!important;margin:0!important}.nrModalActions .primary{background:linear-gradient(#20b6ff,#087add)!important;border-color:#35c3ff!important}.nrModalActions .danger{background:#391521!important;border-color:#853348!important;color:#ff9aad!important}
/* NumRush toast replaces ugly browser alerts */
.nrToast{position:fixed;z-index:1000000;left:50%;bottom:92px;transform:translateX(-50%);min-width:220px;max-width:min(430px,92vw);padding:11px 16px;border-radius:12px;background:#092239f2;border:1px solid #2a6689;color:#eaf7ff;font-weight:800;font-size:11px;text-align:center;box-shadow:0 15px 45px #000a;animation:nrToastIn .22s ease}
.nrToast[hidden]{display:none!important}.nrToast.success{border-color:#27c985;box-shadow:0 15px 45px #000a,0 0 20px #27c98522}.nrToast.error{border-color:#ff5271;color:#ffc1cc}.nrToast.warn{border-color:#ffc14d;color:#ffe1a4}
@keyframes nrToastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
/* Form/control spacing site-wide */
input+button,select+button{margin-top:8px!important}
.socialAdd input{margin:0!important}
.adminMusicCard input{margin:9px 0!important}
.adminMusicCard button{margin:4px!important}
.profileGrid .panel{padding:14px!important}
#titleSelect+#saveTitle{margin-top:10px!important}
/* mobile */
@media(max-width:760px){
.nrModalCard{padding:18px 14px}.nrModalActions{display:grid!important;grid-template-columns:1fr 1fr;width:100%}.nrModalActions button{width:100%!important;min-width:0!important}.nrModalActions button:only-child{grid-column:1/3}
.nrToast{bottom:82px;font-size:10px}
#botBtn,#continueSearch{width:100%!important;min-width:0!important;margin:0!important}
#cancelSearch{width:100%!important;margin:0!important}
.searchActions{display:grid!important;grid-template-columns:1fr!important;width:100%!important;gap:8px!important}
.challengeToast div{display:grid!important;grid-template-columns:1fr 1fr}
}
/* V34 reactions: never over the actual board */
.gameExtras{position:fixed!important;z-index:900!important;right:12px!important;bottom:82px!important;top:auto!important;display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:6px!important;pointer-events:none!important}
.gameExtras>*{pointer-events:auto!important}
#quickReacts{display:flex!important;gap:4px!important;padding:5px!important;border-radius:999px!important;background:#061725e8!important;border:1px solid #24516d!important;box-shadow:0 8px 25px #0008!important}
#quickReacts button{width:auto!important;min-width:31px!important;min-height:29px!important;margin:0!important;padding:4px 7px!important;border-radius:999px!important;font-size:10px!important}
#spectateShare{margin:0!important;min-height:28px!important;font-size:8px!important;border-radius:999px!important}
@media(max-width:760px){.gameExtras{right:6px!important;bottom:76px!important}.gameExtras #quickReacts{max-width:none!important;flex-wrap:nowrap!important}.gameExtras #quickReacts button{min-width:29px!important;padding:4px 6px!important}}
/* Public spectator — no account required */
.publicWatch{min-height:100dvh;background:radial-gradient(circle at 20% 20%,#087dc52a,transparent 30%),radial-gradient(circle at 85% 70%,#e72d7d20,transparent 28%),#020e18;color:#eef8ff;padding:0!important;max-width:none!important}
.watchHeader{height:62px;padding:0 max(14px,3vw);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #20455e;background:#061827}.watchHeader>div{display:flex;align-items:center;gap:7px}.watchHeader b{font-size:22px}.watchHeader b span{color:#1aaaff}.watchHeader small{font-size:7px;letter-spacing:2px;color:#6fcfff}.watchHeader a{padding:7px 10px;border:1px solid #2586bd;border-radius:8px;color:white;text-decoration:none;font-size:9px;font-weight:900}
.watchStage{width:min(1050px,96vw);margin:18px auto}.watchLive{text-align:center;color:#61e3a3;font-size:9px;letter-spacing:2px;font-weight:900}.watchLive i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#31dd89;box-shadow:0 0 10px #31dd89;margin-right:5px}
.watchVersus{display:grid;grid-template-columns:1fr 70px 1fr;margin:12px 0}.watchPlayer{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:13px;border:1px solid #1b94d3;background:#08263b;border-radius:14px}.watchPlayer.pink{border-color:#db347f;background:#291225}.watchPlayer img{width:55px;height:55px;border-radius:50%;object-fit:cover;border:2px solid #3bc7ff}.watchPlayer.pink img{border-color:#ff4d9c}.watchPlayer b,.watchPlayer small{display:block}.watchPlayer small{color:#8da8b9}.watchPlayer strong{font-size:23px;color:#52ceff}.watchPlayer.pink strong{color:#ff58a4}.watchVs{display:grid;place-items:center;font-size:25px;font-weight:950;color:#ffad35}
.watchBoard{padding:14px;border:1px solid #24506b;border-radius:15px;background:#071a29}.watchStatus{display:flex;justify-content:space-between;margin-bottom:10px}.watchStatus b{color:#ffd164}.watchHand{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;padding:13px;border-radius:11px;background:#efddc4}.watchHand span{display:grid;place-items:center;min-height:34px;color:#111;font-weight:900}.watchHand span.used{border:2px solid #ff3e91;border-radius:50%;color:#777}.watchProgress{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:12px}.watchProgress span{display:block;font-size:9px;color:#91a9ba}.watchProgress progress{width:100%;height:12px}
@media(max-width:760px){.watchStage{margin:10px auto}.watchVersus{grid-template-columns:1fr 40px 1fr}.watchPlayer{grid-template-columns:auto 1fr;padding:8px;gap:6px}.watchPlayer img{width:38px;height:38px}.watchPlayer strong{grid-column:1/3;font-size:15px}.watchVs{font-size:17px}.watchHand{grid-template-columns:repeat(6,1fr);padding:8px;gap:3px}.watchHand span{min-height:29px;font-size:10px}.watchProgress{gap:7px}}
/* =========================================================
V35 — clean game controls
========================================================= */
.gameExtras{display:none!important}
.gameTools{position:fixed;z-index:910;right:12px;bottom:82px;pointer-events:none}
.gameTools>*{pointer-events:auto}
.gameToolsToggle{width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;padding:0!important;border-radius:50%!important;font-size:18px!important;letter-spacing:2px;background:#09263cee!important;border:1px solid #2d6a8e!important;box-shadow:0 7px 24px #0009!important}
.gameToolsToggle.open{border-color:#2bbdff!important;background:#0c3a5cee!important}
.gameToolsPanel{position:absolute;right:0;bottom:50px;width:250px;padding:10px;border-radius:14px;background:#061827f5;border:1px solid #2b5d7c;box-shadow:0 20px 55px #000c,0 0 30px #159eff18;backdrop-filter:blur(8px)}
.gameToolsPanel[hidden]{display:none!important}
.gameToolsHead{display:flex;align-items:center;justify-content:space-between;padding:2px 2px 8px;color:#72cefa;font-size:8px;letter-spacing:2px}.gameToolsHead button{width:28px!important;height:28px!important;min-height:28px!important;padding:0!important;border-radius:50%!important}
.quickReacts{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:5px!important;padding:7px!important;background:#04121e!important;border-radius:10px!important;border:1px solid #173c54!important}
.quickReacts button{min-width:0!important;min-height:34px!important;padding:4px!important;margin:0!important;border-radius:8px!important;font-size:12px!important}
.toolWide{width:100%!important;margin:8px 0 0!important}
.toolAudio{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}.toolAudio button{margin:0!important;min-width:0!important;font-size:8px!important}
/* Hide old floating audio buttons while playing: audio is in •••.
Outside the game they remain available. */
body:has(#game:not([hidden])) .floatingAudio{display:none!important}
/* Mobile bottom nav: Home, Spelen, Profiel, Meer. Hide secondary destinations.
Their real buttons remain in DOM so More can trigger them. */
.moreNavBtn{display:none!important}
.moreDrawer{position:fixed;inset:0;z-index:980;background:#010912b8;backdrop-filter:blur(5px);display:flex;align-items:flex-end;justify-content:center;padding:10px}
.moreDrawer[hidden]{display:none!important}.moreDrawerCard{width:min(520px,100%);padding:13px;border-radius:18px 18px 12px 12px;background:#071b2bf7;border:1px solid #285a78;box-shadow:0 -20px 60px #000a}.moreDrawerHead{display:flex;justify-content:space-between;align-items:center;padding:2px 3px 10px}.moreDrawerHead b{font-size:17px}.moreDrawerHead button{width:31px!important;height:31px!important;min-height:31px!important;padding:0!important;border-radius:50%!important}.moreGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.moreGrid button{display:grid;place-items:center;gap:4px;min-height:67px!important;margin:0!important;padding:8px!important;background:#09253a!important;border:1px solid #1f4b67!important;border-radius:11px!important;font-size:18px!important}.moreGrid span{font-size:8px;color:#a5b9c7;font-weight:800}
@media(max-width:760px){
.gameTools{right:8px;bottom:76px}
.gameToolsToggle{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important}
.gameToolsPanel{width:min(260px,88vw);bottom:45px}
nav.bottomNav button[data-page="leader"],nav.bottomNav button[data-page="friends"],nav.bottomNav button[data-page="messages"],nav.bottomNav button[data-page="trophies"],nav.bottomNav button[data-page="events"],nav.bottomNav button[data-page="admin"]{display:none!important}
nav.bottomNav .moreNavBtn{display:flex!important}
nav.bottomNav{grid-template-columns:repeat(4,1fr)!important}
nav.bottomNav button{min-width:0!important}
}
/* V43 definitive responsive layer */
.modecards{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}.publicGlow{border-color:#25b77c!important}.publicLobbyHead{display:flex;justify-content:space-between;align-items:center;margin:14px 0 7px}.publicLobbyHead button{width:34px!important;min-width:34px!important;padding:2px!important;margin:0!important}.publicLobbyList{display:grid;gap:6px;max-height:210px;overflow:auto}.publicLobbyRow{display:grid;grid-template-columns:36px 1fr auto auto;gap:8px;align-items:center;padding:8px;border:1px solid #1b485f;border-radius:10px;background:#061a29;text-align:left}.publicLobbyRow img{width:36px;height:36px;border-radius:50%;object-fit:cover}.publicLobbyRow b,.publicLobbyRow small{display:block}.publicLobbyRow small{font-size:9px;color:#88a4b5}.publicLobbyRow button{min-height:32px!important;padding:5px 9px!important;margin:0!important;font-size:9px!important}.emptyLobby{padding:13px;border:1px dashed #28506a;border-radius:10px;color:#93aaba;text-align:center}.leaveMatchBtn{background:linear-gradient(#4b1724,#301019)!important;border-color:#9b4055!important;color:#ffb8c5!important}
body.nrWaiting #game .versus,body.nrWaiting #game .mobileGameStatus,body.nrWaiting #game .gameDesk,body.nrWaiting #game .gameTools,body.nrWaiting #game .waitingInvite,body.nrWaiting #scoreAvatarLayer{display:none!important}.roomWaiting{position:fixed;inset:72px 0 0;z-index:7000;display:grid;place-items:center;padding:18px;background:radial-gradient(circle at 22% 28%,#0b92e62a,transparent 32%),radial-gradient(circle at 82% 70%,#ff2f861d,transparent 30%),#03111df7}.roomWaiting[hidden]{display:none!important}.roomWaitingCard{width:min(650px,94vw);padding:26px;border:1px solid #285b79;border-radius:20px;background:linear-gradient(145deg,#08263b,#061725 55%,#211126);text-align:center}.waitingVs{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;margin:20px 0}.waitingMe,.waitingOpponent{display:grid;justify-items:center;gap:6px}.waitingMe img,.waitingSpinner{width:88px;height:88px;border-radius:50%}.waitingMe img{object-fit:cover;border:3px solid #35c8ff}.waitingSpinner{display:grid;place-items:center;border:3px dashed #ff3d91;animation:waitSpin 2s linear infinite}.waitingSpinner span{font-size:32px;animation:waitCounter 2s linear infinite}@keyframes waitSpin{to{transform:rotate(360deg)}}@keyframes waitCounter{to{transform:rotate(-360deg)}}.waitingDots{display:flex;justify-content:center;gap:7px;margin:15px}.waitingDots i{width:7px;height:7px;border-radius:50%;background:#28baff;animation:dotPulse 1.2s infinite}.waitingDots i:nth-child(2){animation-delay:.2s}.waitingDots i:nth-child(3){animation-delay:.4s}@keyframes dotPulse{50%{opacity:.25;transform:scale(.7)}}.waitingRoomInfo{display:flex;justify-content:center;gap:20px;color:#9bb2c1;margin:11px}.waitingRoomActions{display:flex;justify-content:center;gap:9px}.waitingRoomActions button{margin:0!important}
.fixedScoreAvatar.turnClock{border:0!important;padding:4px!important;background:conic-gradient(var(--turn-color,#20baff) calc(var(--turn-p,1)*1turn),#183348 0)!important}.fixedScoreAvatar.turnClock img{border:2px solid #061522!important}
@media(min-width:761px){body>header{display:flex!important}.mobileTopProfile{display:none!important}#mainNav.mainNav{position:absolute!important;top:0!important;left:50%!important;bottom:auto!important;transform:translateX(-50%)!important;width:auto!important;height:72px!important;display:flex!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:25!important}#mainNav.mainNav>button{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:78px!important;width:auto!important;height:72px!important;padding:6px 9px!important;border:0!important;border-bottom:3px solid transparent!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}#mainNav.mainNav>button.on,#mainNav.mainNav>button.active{background:#0d2c4c!important;border-bottom-color:#1aa8ff!important;color:#fff!important}#mainNav.mainNav>#moreNavBtn{display:none!important}.lobby{max-width:1200px!important;margin:28px auto!important}.mode{min-height:360px!important;padding:30px!important}.mode h2{font-size:25px!important}.mode p{font-size:14px!important}.contentPanel{max-width:1150px!important}.floatingAudio,.gameTools{bottom:18px!important}}
@media(max-width:760px){html,body{overflow-x:hidden!important}body{padding-top:58px!important;padding-bottom:72px!important}body>header{display:none!important}.mobileTopProfile{display:flex!important;position:fixed!important;top:0!important;left:0!important;right:0!important;height:58px!important;z-index:6000!important;align-items:center!important;justify-content:space-between!important;padding:7px 12px!important;background:#061522f8!important;border-bottom:1px solid #21465f!important}.mobileBrand{font-size:18px!important;font-weight:950!important}.mobileBrand span{color:#19aaff!important}.mobileMe{display:flex!important;align-items:center!important;gap:7px!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}.mobileMe img{width:38px!important;height:38px!important;border-radius:50%!important;object-fit:cover!important;border:2px solid #25baff!important;order:2}.mobileMe b{display:block!important;font-size:11px!important}.mobileMe small{display:block!important;font-size:8px!important;color:#72d1ff!important}
#mainNav.mainNav{position:fixed!important;inset:auto 0 0 0!important;width:100%!important;height:72px!important;z-index:6500!important;display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:0!important;padding:0!important;margin:0!important;overflow:hidden!important;background:#061522!important;border-top:1px solid #28506b!important;box-shadow:0 -8px 25px #0009!important;transform:none!important}body.isAdmin #mainNav.mainNav{grid-template-columns:repeat(9,minmax(0,1fr))!important}#mainNav.mainNav>button[data-page],#mainNav.mainNav>.adminNavBtn{display:flex!important;position:relative!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;width:100%!important;min-width:0!important;height:72px!important;padding:5px 0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:#91a8bb!important;font-size:16px!important;overflow:hidden!important}#mainNav.mainNav>button i{display:block!important;width:100%!important;margin-top:5px!important;font-size:5.8px!important;font-style:normal!important;text-align:center!important;white-space:nowrap!important;overflow:hidden!important}#mainNav.mainNav>button.on,#mainNav.mainNav>button.active{background:#0d2c4c!important;color:#fff!important}#mainNav.mainNav>button.on:before,#mainNav.mainNav>button.active:before{content:""!important;position:absolute!important;top:0!important;left:0!important;right:0!important;height:4px!important;background:#20b8ff!important}#mainNav.mainNav>#moreNavBtn{display:none!important}
main,.page.active{width:100%!important;max-width:100%!important}.homeHero{width:100%!important;max-width:100%!important;grid-template-columns:1fr!important;padding:20px 10px!important;overflow:hidden!important}.heroCopy,.heroVisual{min-width:0!important;width:100%!important}.heroCopy h1{font-size:46px!important}.heroVisual{transform:none!important}.modecards{grid-template-columns:1fr!important}.mode{min-height:0!important;padding:18px!important}.lobby{margin:5px auto!important}.roomWaiting{inset:58px 0 72px!important;padding:10px!important}.roomWaitingCard{width:min(520px,96vw)!important;max-height:100%!important;overflow:auto!important;padding:17px 12px!important}.waitingVs{grid-template-columns:1fr 45px 1fr!important;margin:13px 0!important}.waitingMe img,.waitingSpinner{width:64px!important;height:64px!important}.waitingRoomActions{display:grid!important;grid-template-columns:1fr!important}.waitingRoomActions button{width:100%!important}.gameTools{right:8px!important;bottom:80px!important}.floatingAudio{right:8px!important;bottom:80px!important}.nrToast{bottom:82px!important}}
/* V47 live messenger + emoji */
.chatComposer{display:grid;gap:6px}.emojiBar{display:flex;gap:5px;overflow-x:auto;padding:5px 2px;scrollbar-width:none}.emojiBar::-webkit-scrollbar{display:none}.emojiBar button{flex:0 0 34px!important;width:34px!important;height:32px!important;min-height:32px!important;padding:0!important;margin:0!important;border-radius:9px!important;font-size:16px!important;background:#0b2b43!important;border:1px solid #245574!important}.chatMessages .bubble span{display:block;white-space:pre-wrap;overflow-wrap:anywhere}.chatMessages{scroll-behavior:smooth}
/* V49 — chat viewport + real friend avatars */
.friendAvatarBtn{width:44px!important;height:44px!important;min-width:44px!important;padding:0!important;margin:0!important;border-radius:50%!important;border:2px solid #28bfff!important;background:#08263a!important;overflow:hidden!important}
.friendAvatarImg{width:100%;height:100%;display:block;object-fit:cover;border-radius:50%}
@media(max-width:760px){
#messages.page.active{height:calc(100dvh - 64px - 72px)!important;overflow:hidden!important;padding-bottom:0!important}
#messages .contentPanel{height:100%!important;display:flex!important;flex-direction:column!important;overflow:hidden!important;margin:0 10px!important;padding:14px 12px!important}
#messages .contentPanel>h1{flex:0 0 auto!important;margin:0 0 10px!important}
#messages .messenger{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
#messages .conversationList{flex:0 0 auto!important;max-height:92px!important;overflow-y:auto!important;margin-bottom:8px!important}
#messages .chatPane{flex:1 1 auto!important;min-height:0!important;display:flex!important;flex-direction:column!important;overflow:hidden!important}
#messages #chatTitle{flex:0 0 auto!important;padding:5px 0!important}
#messages .chatMessages{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overscroll-behavior:contain!important;padding:8px 4px 14px!important;scrollbar-width:thin}
#messages .chatComposer{flex:0 0 auto!important;position:relative!important;bottom:auto!important;background:#071a29!important;padding-top:5px!important;z-index:4!important}
#messages .emojiBar{flex:0 0 auto!important}
#messages #chatForm{flex:0 0 auto!important}
}
/* =========================================================
V50 — FINAL PRODUCT POLISH
One deliberate finishing layer over the historical builds.
========================================================= */
:root{
--nr-bg:#f7f9ff;--nr-panel:#081f31;--nr-panel2:#0b2a40;
--nr-line:#214b66;--nr-blue:#20b5ff;--nr-pink:#ff3d91;
--nr-muted:#94aabd;--nr-text:#f3f8fc;
}
html{background:var(--nr-bg)}
body{letter-spacing:0}
.panel,.mode,.contentPanel,.profileHero,.creditsHero,.creditCard{box-shadow:0 16px 42px #0004,inset 0 1px #ffffff08}
button{transition:transform .12s ease,filter .12s ease,border-color .12s ease}
button:active{transform:translateY(1px) scale(.99)}
input,select{outline:none}input:focus,select:focus{border-color:#25baff;box-shadow:0 0 0 3px #25baff18}
h1,h2,h3{letter-spacing:-.025em}
.eyebrow{letter-spacing:.32em;font-weight:900}
/* Home: designed as one game cover rather than two unrelated columns */
#home{max-width:1240px!important;margin:0 auto!important}
#home .homeHero{
min-height:calc(100dvh - 150px)!important;
max-width:1180px!important;margin:0 auto!important;padding:clamp(24px,4vw,58px)!important;
display:grid!important;grid-template-columns:minmax(320px,.86fr) minmax(440px,1.14fr)!important;
gap:clamp(28px,5vw,72px)!important;align-items:center!important;
position:relative!important;overflow:visible!important;
}
#home .homeHero:before{content:"";position:absolute;width:420px;height:420px;left:-120px;top:12%;background:#079dff14;filter:blur(70px);border-radius:50%;pointer-events:none}
#home .heroCopy{position:relative;z-index:2;max-width:510px}
#home .heroCopy h1{font-size:clamp(48px,5.4vw,82px)!important;line-height:.93!important;margin:12px 0 22px!important}
#home .heroCopy h1 em{font-style:normal;color:#1db7ff;text-shadow:0 0 30px #079dff2e}
#home .heroCopy p{max-width:510px;font-size:clamp(14px,1.25vw,18px)!important;line-height:1.65!important;color:#a8bac8!important}
#home .heroActions{display:grid!important;grid-template-columns:1.15fr .85fr!important;gap:10px!important;margin-top:25px!important}
#home .heroActions button{width:100%!important;min-height:50px!important}
#home .heroStats{display:flex!important;gap:28px!important;margin-top:28px!important}
#home .heroStats span{color:#849cad!important}#home .heroStats b{display:block;font-size:30px!important;color:#fff!important}
#home .heroVisual{width:100%!important;max-width:620px!important;justify-self:end!important;padding:20px!important;transform:perspective(1200px) rotateY(-3deg)!important}
#home .miniHand{height:clamp(170px,22vh,245px)!important}
#home .howGrid{max-width:1120px!important;margin:-12px auto 30px!important}
#home .howGrid article{border-top:4px solid #29b2ff!important}
/* Credits: understated game-studio style */
.creditsWrap{max-width:1080px;margin:18px auto 90px;padding:0 10px}
.creditsHero{position:relative;overflow:hidden;padding:44px;border:1px solid #23516e;border-radius:22px;background:linear-gradient(125deg,#082b46,#071827 62%,#271127)}
.creditsHero:after{content:"50";position:absolute;right:-8px;bottom:-50px;font-size:190px;font-weight:950;color:#fff025;line-height:1}
.creditsCrown{font-size:38px;margin-bottom:15px}.creditsHero h1{font-size:clamp(34px,5vw,62px);line-height:1;margin:10px 0 18px;max-width:720px}.creditsHero h1 em{font-style:normal;color:#23baff}.creditsHero p{max-width:680px;color:#a8bdcb;font-size:16px;line-height:1.65}
.creditsGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.creditCard{min-height:180px;padding:24px;border:1px solid #1e4964;border-radius:16px;background:#081e30}.creditCard>span{font-size:9px;letter-spacing:.25em;color:#56caff;font-weight:900}.creditCard h2{margin:9px 0}.creditCard p{color:#9eb2c1;line-height:1.55}.creatorCard{background:linear-gradient(145deg,#092c47,#071c2d)}.creditSignature,.creditVersion{margin-top:20px;color:#f5b846;font-weight:800}.creditsFooter{text-align:center;padding:35px 10px;display:grid;gap:5px}.creditsFooter b{font-size:23px}.creditsFooter span{font-size:8px;letter-spacing:.3em;color:#5acbff}.creditsFooter small{color:#718b9d}
/* Product-wide consistency */
.contentPanel{border-radius:18px!important}.listRow{border-radius:12px}.modeIcon{box-shadow:inset 0 0 0 1px #ffffff0b}
.floatingAudio{gap:7px!important}.floatingAudio button{backdrop-filter:blur(10px)}
/* Mobile home = one screen-cover composition, properly scaled, no horizontal crop */
@media(max-width:760px){
#home{width:100%!important;max-width:none!important;overflow-x:hidden!important}
#home .homeHero{
min-height:auto!important;width:100%!important;max-width:100%!important;
grid-template-columns:1fr!important;gap:18px!important;
padding:22px 16px 92px!important;align-items:start!important;
}
#home .heroCopy{max-width:none!important;text-align:left!important}
#home .heroCopy .eyebrow{font-size:9px!important}
#home .heroCopy h1{font-size:clamp(43px,13vw,64px)!important;line-height:.92!important;margin:10px 0 16px!important}
#home .heroCopy p{font-size:13px!important;line-height:1.5!important;display:block!important;max-width:95%!important}
#home .heroActions{grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:17px!important}
#home .heroActions button{min-height:44px!important;padding:8px!important;font-size:11px!important}
#home .heroStats{justify-content:flex-start!important;gap:24px!important;margin-top:18px!important}
#home .heroStats b{font-size:25px!important}
#home .heroStats span{font-size:10px!important}
#home .heroVisual{
max-width:100%!important;width:100%!important;transform:none!important;
padding:10px!important;border-radius:18px!important;margin:0!important;
}
#home .duel{grid-template-columns:1fr 36px 1fr!important}
#home .duelPlayer{padding:8px!important;gap:1px 5px!important}
#home .heroAv{width:38px!important;height:38px!important}
#home .duelPlayer b{font-size:9px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#home .duelPlayer small{font-size:7px!important}
#home .duelPlayer strong{font-size:15px!important}
#home .heroVS{font-size:18px!important}
#home .miniHand{height:130px!important;margin:8px 0!important}
#home .miniGrid{gap:3px!important}
#home .howGrid{grid-template-columns:1fr 1fr!important;margin:0 10px 88px!important}
#home .howGrid article{padding:13px!important}
#home .howGrid h3{margin:4px 0!important}
#home .howGrid p{font-size:10px!important}
.creditsWrap{margin:8px auto 80px;padding:0 10px}.creditsHero{padding:25px 20px}.creditsHero:after{font-size:110px;bottom:-25px}.creditsHero h1{font-size:37px}.creditsHero p{font-size:12px}.creditsGrid{grid-template-columns:1fr}.creditCard{min-height:0;padding:18px}
}
/* Desktop stays comfortably human-sized, not zoomed-out dashboard tiny */
@media(min-width:761px){
body{font-size:14px!important}
main{max-width:1440px!important;padding:14px 18px 84px!important}
.modecards{max-width:1050px!important;margin:auto}
.mode{font-size:13px!important}
.contentPanel{max-width:1100px!important}
}
/* Credits joins the existing nav without special visual treatment */
/* V51 — messenger avatar + clean composer */
.conversationList button{display:flex!important;align-items:center!important;gap:11px!important;text-align:left!important}
.conversationAvatar{width:42px!important;height:42px!important;min-width:42px!important;object-fit:cover!important;border-radius:50%!important;border:2px solid #28baff!important;background:#0a2b43!important;box-shadow:0 0 13px #159eff35!important}
#messages .chatComposer{position:relative!important;z-index:20!important}
#messages #chatForm{display:grid!important;grid-template-columns:minmax(0,1fr) 52px!important;gap:8px!important;align-items:center!important}
#messages #chatInput{min-width:0!important;width:100%!important;margin:0!important;height:48px!important}
#messages #chatForm>button{position:relative!important;inset:auto!important;width:52px!important;min-width:52px!important;height:48px!important;min-height:48px!important;margin:0!important;padding:0!important;display:grid!important;place-items:center!important;font-size:23px!important;z-index:25!important}
@media(max-width:760px){
#messages .chatComposer{padding:6px 0 4px!important;background:#071a29!important}
#messages .emojiBar{padding:3px 0 7px!important}
#messages #chatForm{grid-template-columns:minmax(0,1fr) 48px!important;gap:7px!important}
#messages #chatForm>button{width:48px!important;min-width:48px!important}
/* Audio controls must never sit over the chat send button. */
#messages.page.active~* .floatingAudio{pointer-events:none}
body:has(#messages.page.active) .floatingAudio{right:8px!important;bottom:78px!important;transform:translateY(-74px)!important}
}
/* V52 — single header audio control + clean credits */
.floatingAudio{display:none!important}
.headerAudio{position:fixed;z-index:1200;top:14px;right:clamp(152px,16vw,205px)}
.audioMenuBtn{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;padding:0!important;border-radius:11px!important;background:#0a2940!important;border:1px solid #285470!important;color:#70d3ff!important;font-size:19px!important;box-shadow:none!important}
.audioMenuBtn[aria-expanded="true"]{border-color:#28baff!important;background:#0d3856!important}
.audioMenu{position:absolute;right:0;top:46px;width:176px;padding:9px;background:#061a2a;border:1px solid #28516a;border-radius:13px;box-shadow:0 18px 45px #0009;display:grid;grid-template-columns:1fr 1fr;gap:7px}
.audioMenu[hidden]{display:none!important}.audioMenuTitle{grid-column:1/-1;font-size:9px;letter-spacing:.24em;color:#6fcfff;font-weight:900;padding:2px 3px 5px}
.audioMenu button{min-height:38px!important;padding:7px!important;border-radius:9px!important;font-size:10px!important}
.creditsHero:after{display:none!important}
.creditsHero{min-height:0!important;padding-right:44px!important}
.creditsGrid{grid-template-columns:1fr 1fr!important}
.creditVersion{display:none!important}
@media(max-width:760px){
.headerAudio{top:13px;right:86px}
.audioMenuBtn{width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;border-radius:10px!important}
.audioMenu{right:-3px;top:41px;width:168px}
.creditsHero{padding:24px 20px!important}
.creditsHero h1{font-size:34px!important;line-height:1.02!important}
.creditsHero p{max-width:100%!important}
.creditsGrid{grid-template-columns:1fr!important}
.creditCard{padding:18px!important}
}
/* V53 — definitive header: one audio button, stable avatar */
.audioControls{display:none!important}
header{display:flex!important;align-items:center!important;gap:10px!important}
header .logo{margin-right:auto!important;flex:0 1 auto!important}
header .headerAudio{position:relative!important;inset:auto!important;right:auto!important;top:auto!important;flex:0 0 auto!important;z-index:1300!important}
header .audioMenuBtn{display:grid!important;place-items:center!important}
header .who{position:relative!important;inset:auto!important;display:flex!important;align-items:center!important;gap:8px!important;flex:0 0 auto!important;min-width:0!important}
header .who .headerAvatar{width:40px!important;height:40px!important;min-width:40px!important;flex:0 0 40px!important;padding:0!important;border-radius:50%!important;overflow:hidden!important;position:relative!important;transform:none!important}
header .who .headerAvatar img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;border-radius:50%!important;display:block!important;transform:none!important}
header .who>div{min-width:0!important}
header .who>div b,header .who>div small{display:block!important;white-space:nowrap!important}
header .who>a{flex:0 0 auto!important}
header .audioMenu{right:0!important;left:auto!important}
@media(max-width:760px){
header{display:none!important}
.mobileTopProfile{display:flex!important}
/* Mobile gets the same single audio control inside the visible top bar. */
.mobileTopProfile .mobileMe{margin-left:auto!important}
.headerAudio{position:fixed!important;top:13px!important;right:86px!important;z-index:1400!important}
.headerAudio .audioMenu{right:-3px!important}
}
@media(min-width:761px){
.headerAudio{position:relative!important;top:auto!important;right:auto!important}
}
.mobileAudio{display:none}
@media(max-width:760px){
.mobileTopProfile{display:flex!important;align-items:center!important;gap:8px!important;padding:0 14px!important}
.mobileBrand{margin-right:auto!important}
.mobileAudio{display:block!important;position:relative!important;flex:0 0 auto!important}
.mobileAudio .audioMenuBtn{position:relative!important;inset:auto!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
.mobileAudio .audioMenu{position:absolute!important;right:0!important;left:auto!important;top:42px!important;width:174px!important;z-index:2000!important}
.mobileMe{margin-left:0!important;min-width:0!important}
header .headerAudio{display:none!important}
}
/* V55 smart matchmaking */
.challengeWho{display:flex;align-items:center;gap:10px}.challengeWho img{width:42px;height:42px;border-radius:50%;object-fit:cover;border:2px solid #28baff}.challengeWho span{display:grid;gap:2px}.matchCarousel img{object-fit:cover!important;width:100%!important;height:100%!important;border-radius:50%!important}
/* V58 — cinematic matchup > stake > countdown */
.pmLabel{font-size:10px;letter-spacing:.32em;font-weight:900;color:#69d2ff;text-align:center;margin-bottom:14px}
.pmStake{margin:16px auto 8px;min-width:210px;max-width:310px;padding:11px 18px;border:1px solid #28516a;border-radius:13px;background:#071b2b;text-align:center;transition:.25s ease}
.pmStake span,.pmStake small{display:block;font-size:8px;letter-spacing:.2em;color:#8ca7b9;font-weight:900}
.pmStake strong{display:block;font-size:25px;color:#f5b846;margin:4px 0;letter-spacing:-.02em}
.pmStake.focus{border-color:#f5b846;transform:scale(1.045);box-shadow:0 0 28px #f5b84628}
.pmReady{text-align:center;font-weight:950;font-size:12px;letter-spacing:.18em;color:#d8e8f2;margin:12px 0 4px}
#countdown{min-height:72px;display:grid;place-items:center;font-size:64px;font-weight:950;color:#fff;line-height:1}
@media(max-width:760px){
.preMatchCard{padding:22px 16px!important}
.pmLabel{margin-bottom:10px}
.pmStake{margin-top:12px;padding:9px 14px}.pmStake strong{font-size:22px}
#countdown{min-height:62px;font-size:56px}
}
/* V60 — live matchmaking invite must always be visible */
#challengeToast{position:fixed!important;z-index:5000!important;left:50%!important;transform:translateX(-50%)!important;top:82px!important;bottom:auto!important;width:min(92vw,440px)!important;box-shadow:0 22px 65px #000c!important}
#challengeToast[hidden]{display:none!important}
@media(max-width:760px){#challengeToast{top:74px!important;width:calc(100vw - 24px)!important}}
/* V61 — unmistakable live Quick Match invite */
#challengeToast{z-index:2147483000!important;top:50%!important;left:50%!important;right:auto!important;transform:translate(-50%,-50%)!important;width:min(92vw,460px)!important;padding:20px!important;background:#061b2cf7!important;border:2px solid #ff3b91!important;box-shadow:0 0 0 100vmax #0009,0 24px 80px #000!important}
#challengeToast .challengeWho{margin:0 0 14px!important}
#challengeToast .challengeWho img{width:58px!important;height:58px!important}
#challengeToast .challengeWho b{font-size:16px!important}
#challengeToast>div:last-child{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important}
#challengeToast button{min-height:48px!important}
#challengeToast[hidden]{display:none!important}
/* V62 cross-browser invitation layer */
#challengeToast{
position:fixed!important;
z-index:2147483646!important;
top:50%!important;left:50%!important;right:auto!important;bottom:auto!important;
transform:translate(-50%,-50%)!important;
width:calc(100% - 28px)!important;max-width:460px!important;
box-sizing:border-box!important;
isolation:isolate!important;
visibility:visible!important;opacity:1!important;
}
#challengeToast[hidden]{display:none!important;visibility:hidden!important}
#challengeToast:not([hidden]){display:block!important}
/* FINAL reaction visibility fix */
.reactionBubble{
position:fixed!important;z-index:2147482000!important;left:50%!important;top:38%!important;
right:auto!important;bottom:auto!important;transform:translate(-50%,-50%) scale(.7)!important;
min-width:120px!important;max-width:min(86vw,420px)!important;padding:14px 22px!important;
border:2px solid #39c6ff!important;border-radius:18px!important;background:#061a2af2!important;
text-align:center!important;pointer-events:none!important;box-shadow:0 18px 60px #000b,0 0 35px #159eff55!important;
opacity:0!important;
}
.reactionBubble small{display:block!important;font-size:9px!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#8fcce9!important;margin-bottom:4px!important}
.reactionBubble strong{display:block!important;font-size:48px!important;line-height:1.05!important;color:#fff!important}
.reactionBubble.reactionText strong{font-size:30px!important;color:#ffd06b!important}
.reactionBubble.pop{animation:nrReactionFinal 2.6s ease both!important}
@keyframes nrReactionFinal{
0%{opacity:0;transform:translate(-50%,-50%) scale(.45)}
12%{opacity:1;transform:translate(-50%,-50%) scale(1.16)}
22%,78%{opacity:1;transform:translate(-50%,-50%) scale(1)}
100%{opacity:0;transform:translate(-50%,-64%) scale(.9)}
}
.quickReacts button.sent{transform:scale(1.16)!important;border-color:#39c6ff!important}
@media(max-width:760px){.reactionBubble{top:42%!important}.reactionBubble strong{font-size:44px!important}.reactionBubble.reactionText strong{font-size:27px!important}}
/* =========================================================
1.0.2 FINAL — MOBILE AUTH REBUILD
Do not rely on :has(), dvh, fixed body, or a tiny grid row.
========================================================= */
html:has(.authV28),body:has(.authV28){position:static!important;height:auto!important;min-height:0!important;overflow:visible!important}
body.authPage{
margin:0!important;padding:0!important;width:100%!important;min-height:100vh!important;
overflow-x:hidden!important;overflow-y:auto!important;background:#020d17!important;
}
body.authPage .authV28{
position:relative!important;inset:auto!important;width:100%!important;height:auto!important;
min-height:100vh!important;max-width:none!important;margin:0!important;padding:0!important;
overflow:visible!important;display:block!important;background:#020d17!important;
}
body.authPage .authArena{
position:relative!important;inset:auto!important;width:100%!important;height:auto!important;
min-height:100vh!important;max-height:none!important;margin:0!important;border:0!important;
border-radius:0!important;display:flex!important;flex-direction:column!important;overflow:visible!important;
}
body.authPage .arenaHeader{flex:0 0 64px!important;height:64px!important}
body.authPage .arenaDuel{flex:0 0 76px!important;height:76px!important}
body.authPage .arenaBoard{
flex:1 0 auto!important;height:auto!important;min-height:430px!important;
display:flex!important;align-items:center!important;justify-content:center!important;
padding:22px 14px!important;overflow:visible!important;
}
body.authPage .loginConsole{
display:block!important;position:relative!important;z-index:20!important;
width:min(440px,94vw)!important;height:auto!important;max-height:none!important;
margin:0 auto!important;padding:18px!important;opacity:1!important;visibility:visible!important;
transform:none!important;overflow:visible!important;
}
body.authPage .authTabs{display:grid!important;grid-template-columns:1fr 1fr!important}
body.authPage #login:not([hidden]),body.authPage #register:not([hidden]){
display:grid!important;visibility:visible!important;opacity:1!important;
}
body.authPage .arenaFooter{flex:0 0 auto!important;min-height:40px!important;height:auto!important;padding:10px!important}
@media(max-width:760px){
body.authPage .authArena{min-height:100vh!important}
body.authPage .arenaHeader{flex-basis:54px!important;height:54px!important;padding:0 13px!important}
body.authPage .arenaDuel{flex-basis:64px!important;height:64px!important}
body.authPage .arenaBoard{
min-height:390px!important;padding:14px 10px 22px!important;align-items:flex-start!important;
}
body.authPage .loginConsole{
width:calc(100% - 20px)!important;max-width:430px!important;margin:12px auto 0!important;
padding:15px!important;box-sizing:border-box!important;
}
body.authPage .consoleTitle b{font-size:19px!important}
body.authPage .consoleTitle small{display:block!important;font-size:9px!important}
body.authPage .authTabs{margin:10px 0!important}
body.authPage .authTabs button{height:38px!important;min-height:38px!important;font-size:9px!important}
body.authPage form{gap:8px!important}
body.authPage input{
width:100%!important;box-sizing:border-box!important;height:44px!important;min-height:44px!important;
font-size:16px!important;
}
body.authPage .authPrimary{height:46px!important;min-height:46px!important;font-size:11px!important}
body.authPage .arenaFooter{min-height:38px!important;display:flex!important;flex-wrap:wrap!important;justify-content:center!important}
}
@media(max-width:380px){
body.authPage .arenaPlayer{padding:0 5px!important}
body.authPage .arenaPlayer strong{display:none!important}
body.authPage .loginConsole{width:calc(100% - 14px)!important}
}
/* 1.0.4 — XP POT */
.xpPot{text-align:center;position:relative}.potBowl{font-size:36px;filter:drop-shadow(0 0 13px #ffc44a55)}.xpPot b{display:block;color:#ffd266;font-size:20px}.xpPot small{font-size:8px;letter-spacing:.25em;color:#9bb2c1}.pmXpPot{margin:8px auto 4px;min-width:130px}.pmXpPot.filled{animation:potPulse .55s ease}
@keyframes potPulse{50%{transform:scale(1.13);filter:drop-shadow(0 0 18px #ffc44a88)}}
.xpFlyingChip{position:fixed;z-index:2147482500;transform:translate(-50%,-50%) scale(.75);padding:6px 9px;border-radius:999px;background:#ffcc55;color:#15100a;font-size:10px;font-weight:950;box-shadow:0 0 18px #ffc44a99;pointer-events:none;transition:left .72s cubic-bezier(.2,.8,.2,1),top .72s cubic-bezier(.2,.8,.2,1),transform .72s ease,opacity .72s ease}
.xpFlyingChip.fly{transform:translate(-50%,-50%) scale(1.08);opacity:.15}
.liveXpPot{margin-top:5px;padding:4px 7px;border:1px solid #7e6329;border-radius:999px;background:#1b160b;color:#ffd266;font-size:9px;white-space:nowrap}.liveXpPot strong{font-size:9px!important}
.endPotWin{margin:5px auto 12px;padding:10px 14px;border:1px solid #d6a83e;border-radius:13px;background:#1b160c;color:#ffd36b;text-align:center}.endPotWin span{font-size:27px;display:block}.endPotWin b{display:block;font-size:15px}.endPotWin.winBurst{animation:endPotBurst 1.2s ease}
@keyframes endPotBurst{0%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:scale(1.15)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.xpFlyingChip{transition:none!important}.pmXpPot.filled,.endPotWin.winBurst{animation:none!important}}
/* === NUMRUSH ALL-LIGHT FINAL — audited actual DOM classes === */
:root{--L:#f7f9ff;--W:#fff;--I:#14234b;--M:#75839d;--B:#159cff;--P:#ff3d9e;--V:#7d43f5;--Y:#f4bb31;--G:#39cf98;--BD:#d9e5f2}
html body{background:radial-gradient(circle at 0 15%,#dff6ff 0 12%,transparent 12.2%),radial-gradient(circle at 100% 32%,#fff2b8 0 14%,transparent 14.2%),radial-gradient(circle at 0 75%,#ffe4f1 0 13%,transparent 13.2%),linear-gradient(#fff,#f5f8ff)!important;color:var(--I)!important}
/* actual fixed header */
html body .arenaHeader{background:linear-gradient(90deg,#fff,#f4faff 58%,#fff5fa)!important;border-bottom:1px solid var(--BD)!important;box-shadow:0 5px 18px #274d7814!important}
html body .arenaLogo,html body .mobileBrand{color:#1673ed!important;text-shadow:none!important}
html body .arenaLogo .rushWord,html body .mobileBrand .rushWord{color:#24afe9!important}
html body .headerAudio,html body .audioMenuBtn{background:#f2efff!important;color:#7040df!important;border:1px solid #ded4ff!important;box-shadow:none!important}
html body .mobileMe,html body .mobileTopProfile{color:var(--I)!important}
html body .headerAvatar,html body .avatar{box-shadow:0 0 0 3px #fff,0 0 0 5px #29b8eb!important}
/* actual nav */
html body .mainNav{background:#fff!important;border-top:1px solid var(--BD)!important;box-shadow:0 -7px 22px #274d7812!important}
html body .mainNav a,html body .mainNav button{color:#687994!important;background:transparent!important}
html body .mainNav .active{background:linear-gradient(180deg,#eaf4ff,#f6f1ff)!important;color:#6436de!important;border-top-color:#7b47ec!important}
/* page surfaces */
html body .contentPanel,html body .panel,html body .sidePanel,html body .rightPanel,html body .gridPanel{
background:#fff!important;color:var(--I)!important;border-color:var(--BD)!important;box-shadow:0 8px 24px #274d7810!important
}
html body .panelHead,html body .panelHead *{color:var(--I)!important}
/* forms - actual dark select/input purge */
html body input,html body select,html body textarea,html body .socialAdd input,html body .uploadBox{
background:#fbfdff!important;color:var(--I)!important;border:1px solid #cddbea!important;box-shadow:none!important
}
html body select option{background:#fff!important;color:var(--I)!important}
html body input::placeholder,html body textarea::placeholder{color:#96a3b6!important}
/* home */
html body .homeHero{background:transparent!important}
html body .heroVisual,html body .miniPlayers,html body .miniGrid,html body .miniHand{
background:#fff!important;color:var(--I)!important;border-color:var(--BD)!important;box-shadow:0 8px 22px #274d7812!important
}
html body .heroVisual .blueCard{background:#eef9ff!important;color:var(--I)!important;border-color:#26a9ee!important}
html body .heroVisual .pinkCard{background:#fff0f7!important;color:var(--I)!important;border-color:#f04499!important}
html body .miniHand{background:linear-gradient(145deg,#fffaf0,#fff4df)!important}
html body .miniGrid>*,html body .crossgrid>*{background:#eef7ff!important;color:#17315c!important;border-color:#d2e5f5!important}
html body .heroStats,html body .heroStats *{color:#536a8c!important}
/* play mode */
html body .modecards .mode{background:#fff!important;color:var(--I)!important;border-color:var(--BD)!important;box-shadow:0 8px 22px #274d7810!important}
html body .modecards .mode:nth-child(1){border-top:4px solid var(--B)!important}
html body .modecards .mode:nth-child(2){border-top:4px solid var(--G)!important}
html body .modecards .mode:nth-child(3){border-top:4px solid var(--P)!important}
html body .modeIcon{background:linear-gradient(145deg,#eef8ff,#f8f2ff)!important;color:var(--I)!important;border:1px solid #d7e5f2!important}
/* leaderboard actual classes */
html body .rankroad,html body .leaderExplain{background:linear-gradient(100deg,#eef9ff,#f7f1ff)!important;color:#425a7d!important;border:1px solid #d7e4f2!important}
html body .leaderboardList .matchperson,html body .leaderboardList>div{background:#fff!important;color:var(--I)!important;border-color:#dce5f0!important;box-shadow:0 5px 15px #274d780c!important}
/* friends */
html body .list>div{background:linear-gradient(100deg,#fff,#f2f9ff)!important;color:var(--I)!important;border-color:#d8e5f1!important}
html body .list>div *,html body .socialAdd *{text-shadow:none!important}
/* messages actual */
html body .messenger,html body .conversationList,html body .chatPane{background:#fff!important;color:var(--I)!important;border-color:var(--BD)!important}
html body .conversationList>div{background:linear-gradient(100deg,#f1f9ff,#fff)!important;color:var(--I)!important;border:1px solid #d8e5f1!important}
html body .chatMessages{background:#fbfcff!important;border:0!important}
html body .chatMessages>div{color:var(--I)!important}
html body .chatMessages .blue,html body .chatMessages .mine{background:linear-gradient(135deg,#29aeef,#1978e9)!important;color:#fff!important}
html body .chatMessages .white,html body .chatMessages .other{background:#eef2f7!important;color:var(--I)!important}
html body .emojiBar,html body .quickReacts,html body .chatComposer{background:#f8faff!important;border-color:#d8e4f1!important}
html body .emojiBar button,html body .quickReacts button{background:#fff!important;border:1px solid #d7e3ef!important;box-shadow:0 3px 9px #274d780c!important}
/* trophies */
html body .trophies>div{background:linear-gradient(145deg,#fff,#f8fbff)!important;color:var(--I)!important;border:1px solid #dce5f0!important;box-shadow:0 5px 15px #274d780c!important}
html body .trophies>div:nth-child(4n+1){border-top:4px solid var(--Y)!important}
html body .trophies>div:nth-child(4n+2){border-top:4px solid #2aafe9!important}
html body .trophies>div:nth-child(4n+3){border-top:4px solid var(--P)!important}
html body .trophies>div:nth-child(4n){border-top:4px solid var(--G)!important}
html body .trophies>div.off,html body .trophies>div.locked{background:#f3f4f6!important;color:#a5acb8!important;opacity:.72!important}
/* profile actual */
html body .profileHero,html body .avatarCard{background:radial-gradient(circle at 5% 12%,#dff7ff 0 20%,transparent 20.5%),radial-gradient(circle at 95% 90%,#ffe5f2 0 23%,transparent 23.5%),#fff!important;color:var(--I)!important;border-color:var(--BD)!important}
html body .profileBadges>*{background:#fff!important;color:var(--I)!important;border:1px solid #d8e4ef!important}
html body .statGrid>div{background:linear-gradient(145deg,#fff,#f6faff)!important;color:var(--I)!important;border:1px solid #d8e4ef!important;box-shadow:none!important}
html body .statGrid>div:nth-child(3n+1){border-top:4px solid #25a9e7!important}
html body .statGrid>div:nth-child(3n+2){border-top:4px solid #ed4598!important}
html body .statGrid>div:nth-child(3n){border-top:4px solid #efbb35!important}
html body .levelStats,html body .profileTrophies{background:#fff!important;color:var(--I)!important;border-color:var(--BD)!important}
html body .levelStats>div{background:#fff!important;color:#536986!important;border-bottom:1px solid #e2e8f0!important}
/* match history is generated inside .matchCarousel */
html body .matchCarousel{background:#fff!important}
html body .matchCarousel .match,html body .matchCarousel>div{background:linear-gradient(100deg,#f0fff8,#fff)!important;color:var(--I)!important;border:1px solid #d9e8df!important;box-shadow:none!important}
html body .matchCarousel .match *,html body .matchCarousel>div *{color:inherit!important}
/* title select */
html body .profileGrid select{background:#fbfdff!important;color:var(--I)!important;border-color:#cddbea!important}
/* credits actual */
html body .creditsHero,html body .creditCard,html body .creatorCard{background:#fff!important;color:var(--I)!important;border-color:var(--BD)!important;box-shadow:0 7px 20px #274d780e!important}
html body .creatorCard{background:linear-gradient(145deg,#effaff,#fff)!important;border-left:5px solid #25afe8!important}
html body .creditsGrid .creditCard:nth-child(odd){background:linear-gradient(145deg,#fff9e4,#fff)!important;border-left:5px solid #efbd3d!important}
html body .creditsGrid .creditCard:nth-child(even){background:linear-gradient(145deg,#f3efff,#fff)!important;border-left:5px solid #8a57ea!important}
/* admin actual */
html body .adminMusicCard,html body .adminMusicGrid,html body .uploadBox{background:#fff!important;color:var(--I)!important;border-color:var(--BD)!important;box-shadow:0 6px 18px #274d780d!important}
html body .adminMusicCard:nth-child(odd){border-top:4px solid #25afe8!important}
html body .adminMusicCard:nth-child(even){border-top:4px solid #ed4598!important}
html body .adminMusicCard audio{background:#f1f4f8!important;border-radius:999px!important}
html body .adminHint{color:var(--M)!important}
/* game */
html body .gameDesk,html body .handPanel,html body .numberField{background:#fff!important;color:var(--I)!important;border-color:var(--BD)!important}
html body .playerCard.blueCard{background:#eef9ff!important;color:var(--I)!important}
html body .playerCard.pinkCard{background:#fff0f7!important;color:var(--I)!important}
html body .instruction{background:linear-gradient(90deg,#eef8ff,#fff,#fff1f8)!important;color:var(--I)!important;border-color:#d8e5f1!important}
html body .hand{background:radial-gradient(circle at 12% 10%,#fff3c644,transparent 20%),radial-gradient(circle at 90% 85%,#ffdcec55,transparent 24%),linear-gradient(#fff,#fafcff)!important;color:var(--I)!important;border-color:#d8e4ef!important}
/* drawers/modals/audio */
html body .moreDrawerCard,html body .gameToolsPanel,html body .audioMenu,html body .nrModalCard,html body .preMatchCard,html body .roomWaitingCard{background:#fff!important;color:var(--I)!important;border-color:var(--BD)!important;box-shadow:0 20px 55px #274d7822!important}
html body .moreGrid button,html body .presetGrid button{background:#f7f9ff!important;color:var(--I)!important;border:1px solid #d8e4ef!important}
/* Buttons that were intentionally navy become pastel/outlined */
html body button.ghost,html body .ghost{background:#fff!important;color:#17315c!important;border:1px solid #cbd9e7!important}
html body .mobileLogout{background:#fff0f3!important;color:#b72f4f!important;border:1px solid #f2c6d1!important}
/* hard purge of legacy navy on actual utility classes */
html body .blueD,html body .pinkD,html body .blueGlow,html body .pinkGlow{background:transparent!important}
/* =========================================================
HARD FIX — LIGHT HEADER + LIGHT FOOTER/NAV
Must stay LAST in stylesheet.
========================================================= */
html body .arenaHeader,
html body header.arenaHeader,
html body .arenaHeader::before,
html body .arenaHeader::after{
background:#ffffff !important;
background-image:linear-gradient(90deg,#ffffff 0%,#f4faff 52%,#fff4fa 100%) !important;
color:#14234b !important;
border-color:#d9e5f2 !important;
box-shadow:0 5px 18px rgba(39,77,120,.12) !important;
}
html body .arenaHeader .arenaLogo,
html body .arenaHeader .arenaLogo *,
html body .arenaHeader .mobileBrand,
html body .arenaHeader .mobileBrand *,
html body .arenaHeader .mobileMe,
html body .arenaHeader .mobileMe *,
html body .arenaHeader .mobileTopProfile,
html body .arenaHeader .mobileTopProfile *{
color:#14234b !important;
text-shadow:none !important;
}
html body .arenaHeader .rushWord{color:#18a9e8 !important}
html body .arenaHeader .headerAudio,
html body .arenaHeader .audioMenuBtn{
background:#f0f6ff !important;
color:#6540dc !important;
border:1px solid #d5e2f2 !important;
box-shadow:none !important;
}
/* actual fixed bottom navigation */
html body .mainNav,
html body nav.mainNav,
html body .mainNav::before,
html body .mainNav::after{
background:#ffffff !important;
background-image:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
color:#60738f !important;
border-color:#d9e5f2 !important;
box-shadow:0 -6px 20px rgba(39,77,120,.12) !important;
}
html body .mainNav a,
html body .mainNav button,
html body .mainNav .moreNavBtn,
html body .mainNav .adminNavBtn{
background:transparent !important;
background-image:none !important;
color:#687b96 !important;
border-color:transparent !important;
box-shadow:none !important;
text-shadow:none !important;
}
html body .mainNav a *,
html body .mainNav button *,
html body .mainNav .moreNavBtn *,
html body .mainNav .adminNavBtn *{
color:inherit !important;
text-shadow:none !important;
}
html body .mainNav .active,
html body .mainNav a.active,
html body .mainNav button.active{
background:linear-gradient(180deg,#eaf6ff 0%,#f2edff 100%) !important;
color:#5530cf !important;
border-top:4px solid #24aef0 !important;
box-shadow:none !important;
}
html body .mainNav .active::before,
html body .mainNav .active::after{
background:transparent !important;
}
/* mobile-specific elements cannot repaint the bars dark */
@media(max-width:760px){
html body .arenaHeader{background:linear-gradient(90deg,#fff,#f3faff,#fff5fa)!important}
html body .mainNav{background:linear-gradient(180deg,#fff,#f7faff)!important}
}
/* === REAL MOBILE BARS FIX ===
On phones the visible header is .mobileTopProfile, NOT .arenaHeader.
Active nav class is .on, NOT .active.
*/
@media (max-width:760px){
html body .mobileTopProfile,
html body>div.mobileTopProfile,
html body #mobileTopProfile{
background:#ffffff !important;
background-image:linear-gradient(90deg,#ffffff 0%,#f1f9ff 52%,#fff4fa 100%) !important;
border-bottom:1px solid #d6e4f1 !important;
box-shadow:0 5px 18px rgba(38,74,112,.14) !important;
color:#14234b !important;
}
html body .mobileTopProfile .mobileBrand,
html body .mobileTopProfile .mobileBrand b{color:#17315c !important;text-shadow:none!important}
html body .mobileTopProfile .mobileBrand span{color:#1aaceb !important}
html body .mobileTopProfile .mobileMe,
html body .mobileTopProfile .mobileMe b{color:#17315c !important}
html body .mobileTopProfile .mobileMe small{color:#6d7f9a !important}
html body .mobileTopProfile .audioMenuBtn{
background:#eef6ff !important;color:#6841d9 !important;
border:1px solid #d2e2f0 !important;box-shadow:none !important
}
html body>#mainNav.mainNav,
html body nav#mainNav.mainNav{
background:#ffffff !important;
background-image:linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%) !important;
border-top:1px solid #d6e3ef !important;
box-shadow:0 -7px 22px rgba(38,74,112,.13) !important;
}
html body>#mainNav.mainNav>button{
background:transparent !important;
background-image:none !important;
color:#667994 !important;
border:0 !important;
border-top:4px solid transparent !important;
box-shadow:none !important;
}
html body>#mainNav.mainNav>button i{color:#667994 !important;text-shadow:none!important}
html body>#mainNav.mainNav>button.on{
background:#edf5ff !important;
background-image:linear-gradient(180deg,#e7f5ff,#f3efff) !important;
color:#5132c7 !important;
border-top:4px solid #20aceb !important;
}
html body>#mainNav.mainNav>button.on i{color:#5132c7 !important}
}
@media (min-width:761px){
html body>header{
background:#ffffff !important;
background-image:linear-gradient(90deg,#fff,#f1f9ff,#fff4fa) !important;
border-bottom:1px solid #d6e4f1 !important;
box-shadow:0 5px 18px rgba(38,74,112,.14) !important;
color:#14234b !important;
}
html body>header .logo,html body>header .who,html body>header .who b{color:#17315c!important}
html body>header .logo span{color:#1aaceb!important}
}
/* === LIGHT POLISH: remaining dark content only === */
/* Leaderboard generated cards */
html body #leaderboard .leaderCard,
html body #leaderboardList .leaderCard,
html body .leaderCard{
background:linear-gradient(105deg,#ffffff,#f2f9ff)!important;
color:#14234b!important;border:1px solid #d6e3ef!important;
box-shadow:0 5px 16px rgba(39,77,120,.10)!important
}
html body .leaderCard:first-child{
background:linear-gradient(105deg,#fff9df,#fff,#eef9ff)!important;
border-color:#edc64e!important
}
html body .leaderCard *,html body .leaderIdentity *,html body .leaderMetric *{color:#14234b!important;text-shadow:none!important}
html body .leaderMetric b{color:#1596d2!important}
html body .leaderNeed{background:#fff6d5!important;color:#755500!important;border:1px solid #efd46e!important}
/* Conversation selector */
html body #conversationList button,
html body .conversationList button{
background:linear-gradient(100deg,#eef9ff,#ffffff)!important;
color:#14234b!important;border:1px solid #d5e3ef!important;box-shadow:none!important
}
html body #conversationList button *,
html body .conversationList button *{color:#14234b!important;text-shadow:none!important}
/* Chat bubbles and all dark separator strips */
html body #chatMessages .bubble{
background:#eef2f7!important;color:#14234b!important;
border:1px solid #e0e6ee!important;box-shadow:none!important
}
html body #chatMessages .bubble.mine{
background:linear-gradient(135deg,#31b6f2,#1a7fe8)!important;color:#fff!important;border:0!important
}
html body #chatMessages .bubble.mine *{color:#fff!important}
html body #chatMessages .bubble:not(.mine) *{color:#14234b!important}
html body #messages .chatComposer{
background:#f8fbff!important;border:0!important;border-top:1px solid #d8e4ef!important;
padding:8px!important
}
html body #messages .emojiBar{background:#f8fbff!important;border:0!important}
html body #messages #chatForm{background:#f8fbff!important;border:0!important}
html body #messages #chatInput{background:#fff!important;color:#14234b!important;border:1px solid #cfdeeb!important}
html body #messages .chatPane{background:#fff!important}
html body #messages .chatMessages{background:#fff!important;border:0!important}
/* Profile history - actual generated .historyRow */
html body #historyBox .historyRow{
background:linear-gradient(100deg,#effcf6,#ffffff)!important;
color:#14234b!important;border:1px solid #d7e9df!important;
border-radius:14px!important;margin:7px 0!important;padding:11px 12px!important;
box-shadow:0 4px 12px rgba(39,77,120,.07)!important
}
html body #historyBox .historyRow *{color:#536a87!important;text-shadow:none!important}
html body #historyBox .historyRow b{color:#17315c!important}
/* ensure no dark field remains in the visible light pages */
html body #friends input,
html body #profile select,
html body #play select{
background:#fff!important;color:#14234b!important;border:1px solid #cfdeeb!important
}
/* === FINAL DARK PURGE: screenshots 04:15 === */
/* profile trophy icon tiles */
html body .profileTrophies span{
background:linear-gradient(145deg,#fff9df,#ffffff)!important;
color:#14234b!important;border:1px solid #ead98b!important;
box-shadow:0 4px 12px rgba(39,77,120,.08)!important
}
/* matching/search page: remove the large navy lower area */
html body #matching,
html body .match{
background:#ffffff!important;color:#14234b!important;
border-color:#d6e3ef!important
}
html body #matching::before,html body #matching::after{background:transparent!important}
html body #matching .matchCard,html body #matching .match{
background:#fff!important;color:#14234b!important
}
/* prematch overlay / VS popup: pastel page and light stake card */
html body .preMatch{
background:rgba(245,249,255,.94)!important;
background-image:radial-gradient(circle at 10% 20%,#dff7ff 0 18%,transparent 18.5%),radial-gradient(circle at 92% 78%,#ffe2f1 0 18%,transparent 18.5%)!important;
backdrop-filter:blur(10px)!important
}
html body .preMatchCard{
background:linear-gradient(145deg,#ffffff,#fbfdff)!important;
color:#14234b!important;border:1px solid #d4e2ef!important
}
html body .preMatchCard *{text-shadow:none!important}
html body .preMatchCard .pmStake{
background:linear-gradient(100deg,#fff8dc,#fffdf6)!important;
color:#14234b!important;border:1px solid #ecd06a!important
}
html body .preMatchCard .pmStake *{color:#9a6810!important}
html body .preMatch #countdown{color:#25afe8!important;text-shadow:0 0 24px #43c6ff55!important}
/* waiting room / invitation overlays */
html body .roomWaiting{
background:rgba(245,249,255,.96)!important;
background-image:radial-gradient(circle at 15% 25%,#def6ff 0 20%,transparent 20.5%),radial-gradient(circle at 88% 75%,#ffe4f1 0 18%,transparent 18.5%)!important
}
html body .roomWaitingCard{
background:#fff!important;color:#14234b!important;border:1px solid #d5e3ef!important;
box-shadow:0 18px 50px rgba(39,77,120,.16)!important
}
/* generic modal overlay/cards */
html body .nrModal,html body .avatarModal{
background:rgba(245,249,255,.92)!important;backdrop-filter:blur(8px)!important
}
html body .nrModalCard,html body .avatarCard{
background:#fff!important;color:#14234b!important;border:1px solid #d4e2ef!important
}
/* game: remaining navy outer canvas, instruction and pot */
html body #game,
html body #game.page,
html body .gameDesk,
html body .centerGame{
background:#f7f9ff!important;
background-image:radial-gradient(circle at 0 25%,#ddf6ff 0 15%,transparent 15.5%),radial-gradient(circle at 100% 70%,#fff0ba 0 16%,transparent 16.5%)!important
}
html body #game .instruction{
background:linear-gradient(90deg,#eef9ff,#fff,#fff0f7)!important;
color:#14234b!important;border:1px solid #d5e3ef!important
}
html body #game .potBadge,html body #game .stakeBadge{
background:#fff8dc!important;color:#8c6410!important;border:1px solid #ecd06a!important
}
/* end/winner popup */
html body .endOverlay{
background:rgba(245,249,255,.94)!important;
background-image:radial-gradient(circle at 10% 20%,#ddf6ff 0 18%,transparent 18.5%),radial-gradient(circle at 90% 80%,#ffe2f1 0 18%,transparent 18.5%)!important;
backdrop-filter:blur(10px)!important
}
html body .endCard{
background:linear-gradient(145deg,#fff,#fbfdff)!important;color:#14234b!important;
border:1px solid #d4e2ef!important;box-shadow:0 20px 60px rgba(39,77,120,.18)!important
}
html body .endCard h1{color:#169fdb!important}
html body .endCard #endReward{
background:#fff7d9!important;color:#9a6810!important;border:1px solid #ecd06a!important
}
/* live invite/challenge popup */
html body #challengeToast,html body .challengeToast,html body .trophyToast{
background:#fff!important;color:#14234b!important;border:1px solid #e6c65e!important;
box-shadow:0 16px 45px rgba(39,77,120,.18)!important
}
html body #challengeToast *,html body .challengeToast *,html body .trophyToast *{text-shadow:none!important}
/* game extras/menu button may stay blue, but no navy slab */
html body .gameToolsPanel,html body .moreDrawerCard,html body .audioMenu{
background:#fff!important;color:#14234b!important;border-color:#d4e2ef!important
}
/* === TRUE FINAL: exact mobile game canvas + status strip === */
@media(max-width:760px){
html body #game{
background:#f7f9ff!important;
background-image:
radial-gradient(circle at 0 28%,#def6ff 0 15%,transparent 15.5%),
radial-gradient(circle at 100% 72%,#fff1bd 0 16%,transparent 16.5%)!important;
}
html body #game .mobileGameStatus{
background:linear-gradient(90deg,#eef9ff 0%,#ffffff 50%,#fff0f7 100%)!important;
color:#14234b!important;
border:1px solid #d4e2ef!important;
box-shadow:none!important
}
html body #game .mobileGameStatus span,
html body #game .mobileGameStatus strong{color:#14234b!important;text-shadow:none!important}
html body #game .versus{background:transparent!important}
html body #game .vsmid{background:transparent!important;color:#14234b!important}
html body #game .liveXpPot{
background:#fff7d9!important;color:#8d6410!important;border:1px solid #e8c85e!important
}
}
/* searching page: the dark empty lower canvas came from the page wrapper, not the card */
html body #play,
html body #play.page,
html body #matchmaking,
html body .matchmaking{
background:#f7f9ff!important;
background-image:
radial-gradient(circle at 0 30%,#def6ff 0 15%,transparent 15.5%),
radial-gradient(circle at 100% 65%,#fff1bd 0 16%,transparent 16.5%)!important;
}
/* =====================================================================
LIGHT-CANVAS-VERIFIED-7
Root canvas fix. Do not change .page, game dimensions, or navigation.
The previous html background (#03111d) showed through below short pages.
A viewport-height body + a light root also covers resize and overscroll.
===================================================================== */
html:root {
color-scheme: light;
background: #f7f9ff !important;
}
html:root > body {
box-sizing: border-box;
background-color: #f7f9ff !important;
min-height: 100vh !important;
min-height: 100dvh !important;
}
/* The previous patch also intended to lighten this role label, but its
literal backslash-n sequences made the declarations invalid. */
html body #game .panelHead > #rolePill,
html body #rolePill {
background: linear-gradient(135deg, #eef9ff, #f4efff) !important;
color: #17315c !important;
border: 1px solid #cfe0ee !important;
box-shadow: none !important;
}
html body #game .gameDesk,
html body #game .centerGame {
background: transparent !important;
background-image: none !important;
}
/* =============================================================
GAME TOOLS LIGHT 1 — scoped visual corrections only.
Keep consent/matchmaking, game actions and menu visibility intact.
============================================================= */
/* #quickReacts previously won against the light .quickReacts rule. */
html body #game #gameToolsPanel #quickReacts {
background:linear-gradient(110deg,#edf7ff,#f6f1ff) !important;
color:#17315c !important;
border:1px solid #d8e4f2 !important;
box-shadow:none !important;
}
html body #game #gameToolsPanel #quickReacts > button {
background:#ffffff !important;
color:#17315c !important;
-webkit-text-fill-color:currentColor !important;
border:1px solid #d5e1f0 !important;
box-shadow:0 2px 7px rgba(43,76,119,.06) !important;
text-shadow:none !important;
}
html body #game #gameToolsPanel #quickReacts > button.sent {
background:#eaf7ff !important;
color:#145b88 !important;
border-color:#29afea !important;
}
/* Leave is still a warning action, but on a pale pink surface. */
html body #game #gameToolsPanel #leaveMatchBtn {
background:linear-gradient(110deg,#fff2f5,#fff7fa) !important;
color:#a82b4d !important;
border:1px solid #edbccd !important;
box-shadow:0 3px 10px rgba(151,49,87,.06) !important;
text-shadow:none !important;
}
/* Match the existing light header audio control. */
html body #game #gameToolsToggle,
html body #game #gameToolsToggle.open {
background:linear-gradient(135deg,#edf8ff,#f5efff) !important;
color:#6540ce !important;
border:1px solid #cbdcf0 !important;
box-shadow:0 5px 16px rgba(57,78,123,.13) !important;
text-shadow:none !important;
}
html body #game #gameToolsToggle.open {
border-color:#987cdd !important;
}
html body #game #gameToolsPanel .gameToolsHead > b {
color:#496486 !important;
}
/* Confirmation opened from this menu, including its icon and warning button. */
html body #nrModal #nrModalIcon {
background:linear-gradient(135deg,#eef8ff,#f7f0ff) !important;
color:#6540ce !important;
border:1px solid #d7e2f1 !important;
box-shadow:0 4px 13px rgba(57,78,123,.08) !important;
}
html body #nrModal #nrModalText { color:#536984 !important; }
html body #nrModal #nrModalActions > button.danger {
background:linear-gradient(110deg,#fff0f4,#fff6f9) !important;
color:#a82b4d !important;
border:1px solid #edbccd !important;
box-shadow:none !important;
text-shadow:none !important;
}
/* Received emoji/text reactions belong to the same light menu theme. */
html body #game #reactionBubble {
background:linear-gradient(135deg,#ffffff,#f5f1ff) !important;
color:#17315c !important;
border:2px solid #cfc0f3 !important;
box-shadow:0 12px 32px rgba(71,60,129,.16) !important;
}
html body #game #reactionBubble small { color:#566987 !important; }
html body #game #reactionBubble strong,
html body #game #reactionBubble.reactionText strong {
color:#6540ce !important;
text-shadow:none !important;
}
/* The empty score tracks were the remaining navy surfaces in the HUD.
The dynamic blue/pink fill, widths and timer rings are untouched. */
html body #game .versus .blueCard .bar { background:#dcebf6 !important; }
html body #game .versus .pinkCard .bar { background:#f4dfec !important; }
@media (hover:hover) {
html body #game #gameToolsPanel #quickReacts > button:hover {
background:#f4f8ff !important;
border-color:#a0bfe4 !important;
}
html body #game #gameToolsPanel #leaveMatchBtn:hover,
html body #nrModal #nrModalActions > button.danger:hover {
background:#ffe6ef !important;
color:#90213f !important;
}
}
html body #game #gameToolsPanel button:focus-visible,
html body #game #gameToolsToggle:focus-visible,
html body #nrModal #nrModalActions > button:focus-visible {
outline:3px solid #a294e4 !important;
outline-offset:3px !important;
}
/* ================================================================
NumRush • lichte login en registratie
Alleen actief op de uitgelogde accountpagina (#nrAuth).
Geen spel-, navigatie-, API- of matchmakingregels gewijzigd.
================================================================ */
html body.nrAuthLight {
position:relative!important;
inset:auto!important;
width:100%!important;
height:auto!important;
min-height:100vh!important;
min-height:100dvh!important;
margin:0!important;
padding:0!important;
overflow-x:hidden!important;
overflow-y:auto!important;
color:#14234b!important;
background:#f7f9ff!important;
color-scheme:light;
}
/* Geen vaste/hoge rasterrijen: alle formuliervelden blijven bereikbaar,
ook bij registratie, landscape, tekstvergroting en het toetsenbord. */
html body.nrAuthLight #nrAuth {
position:relative!important;
inset:auto!important;
display:block!important;
width:100%!important;
max-width:none!important;
height:auto!important;
min-height:100vh!important;
min-height:100dvh!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
background:
radial-gradient(circle at 0 20%,#dff6ff 0 14%,transparent 14.2%),
radial-gradient(circle at 100% 32%,#fff2c9 0 15%,transparent 15.2%),
radial-gradient(circle at 0 86%,#ffe5f1 0 13%,transparent 13.2%),
linear-gradient(#ffffff,#f5f8ff)!important;
color:#14234b!important;
}
html body.nrAuthLight #nrAuth::before,
html body.nrAuthLight #nrAuth::after {
content:none!important;
display:none!important;
}
/* Oude negatief geplaatste gloei-cirkels veroorzaakten horizontale overflow. */
html body.nrAuthLight #nrAuth .arenaGlow {display:none!important}
html body.nrAuthLight #nrAuth .authArena {
position:relative!important;
inset:auto!important;
display:flex!important;
flex-direction:column!important;
width:100%!important;
max-width:none!important;
height:auto!important;
min-height:100vh!important;
min-height:100dvh!important;
max-height:none!important;
margin:0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
overflow:visible!important;
background:transparent!important;
color:#14234b!important;
box-shadow:none!important;
}
html body.nrAuthLight #nrAuth .arenaHeader {
position:relative!important;
inset:auto!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
flex:0 0 auto!important;
gap:12px!important;
width:100%!important;
height:auto!important;
min-height:64px!important;
margin:0!important;
padding:12px clamp(14px,4vw,44px)!important;
background:linear-gradient(90deg,#fff,#f3faff 55%,#fff5fa)!important;
color:#17315c!important;
border:0!important;
border-bottom:1px solid #d9e5f2!important;
border-radius:0!important;
box-shadow:0 4px 16px #274d780c!important;
backdrop-filter:none!important;
}
html body.nrAuthLight #nrAuth .arenaHeader::before,
html body.nrAuthLight #nrAuth .arenaHeader::after {content:none!important}
html body.nrAuthLight #nrAuth .arenaLogo {min-width:0!important;gap:7px!important}
html body.nrAuthLight #nrAuth .arenaLogo strong {
color:#17315c!important;
font-size:25px!important;
font-weight:950!important;
line-height:1.15!important;
text-shadow:none!important;
}
html body.nrAuthLight #nrAuth .arenaLogo strong span {color:#1aa8df!important}
html body.nrAuthLight #nrAuth .arenaLogo .crown {font-size:28px!important}
html body.nrAuthLight #nrAuth .arenaLogo small {
color:#607394!important;
font-size:9px!important;
letter-spacing:.18em!important;
text-shadow:none!important;
}
html body.nrAuthLight #nrAuth .arenaLive {
color:#297454!important;
font-size:9px!important;
letter-spacing:.08em!important;
white-space:nowrap!important;
}
html body.nrAuthLight #nrAuth .arenaLive i {background:#39cc8f!important;box-shadow:0 0 0 3px #dcf8e9!important}
html body.nrAuthLight #nrAuth .arenaDuel {
display:grid!important;
grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr)!important;
align-items:stretch!important;
flex:0 0 auto!important;
height:76px!important;
min-height:0!important;
width:100%!important;
margin:0!important;
padding:0!important;
background:#fff!important;
color:#17315c!important;
border:0!important;
border-bottom:1px solid #dbe6f3!important;
box-shadow:none!important;
}
html body.nrAuthLight #nrAuth .arenaPlayer {
min-width:0!important;
padding:0 clamp(10px,4vw,44px)!important;
color:#17315c!important;
gap:10px!important;
}
html body.nrAuthLight #nrAuth .arenaPlayer.blue {background:linear-gradient(90deg,#e8f7ff,#f7fbff)!important}
html body.nrAuthLight #nrAuth .arenaPlayer.pink {background:linear-gradient(270deg,#ffeaf5,#fffbfd)!important}
html body.nrAuthLight #nrAuth .arenaPlayer b {color:#17315c!important;font-size:12px!important;text-shadow:none!important}
html body.nrAuthLight #nrAuth .arenaPlayer small {color:#657a96!important;font-size:9px!important;line-height:1.7!important}
html body.nrAuthLight #nrAuth .arenaPlayer strong {color:#1275be!important;font-size:18px!important;text-shadow:none!important}
html body.nrAuthLight #nrAuth .arenaPlayer.pink strong {color:#bf2b77!important}
html body.nrAuthLight #nrAuth .arenaAvatar {
width:42px!important;
height:42px!important;
background:linear-gradient(135deg,#ecf9ff,#e7eeff)!important;
color:#176ca9!important;
border:2px solid #25afe7!important;
box-shadow:0 4px 10px #219ed91c!important;
font-size:18px!important;
}
html body.nrAuthLight #nrAuth .arenaPlayer.pink .arenaAvatar {
background:linear-gradient(135deg,#fff3fa,#f4eaff)!important;
color:#b72877!important;
border-color:#ed459a!important;
box-shadow:0 4px 10px #ed459a1c!important;
}
html body.nrAuthLight #nrAuth .arenaVs {
display:grid!important;
place-items:center!important;
font-size:26px!important;
color:#b56c14!important;
text-shadow:none!important;
background:linear-gradient(#fff,#fff9e8)!important;
}
html body.nrAuthLight #nrAuth .arenaBoard {
position:relative!important;
display:grid!important;
place-items:center!important;
align-items:center!important;
flex:1 0 auto!important;
width:100%!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:24px 16px!important;
overflow:visible!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
html body.nrAuthLight #nrAuth .numberField {
position:absolute!important;
inset:16px!important;
width:auto!important;
height:auto!important;
min-height:0!important;
opacity:1!important;
transform:none!important;
pointer-events:none!important;
overflow:hidden!important;
background:linear-gradient(135deg,#ffffffa8,#fffdf2a8,#f5f3ffa8)!important;
border:1px solid #e2eaf7!important;
border-radius:24px!important;
box-shadow:none!important;
}
html body.nrAuthLight #nrAuth .numberField::before,
html body.nrAuthLight #nrAuth .numberField::after {content:none!important}
html body.nrAuthLight #nrAuth .numberField span {
color:#6b7e9c!important;
opacity:.45!important;
font-size:clamp(17px,2.5vw,26px)!important;
text-shadow:none!important;
}
html body.nrAuthLight #nrAuth .numberField .hot {border-color:#f180b8!important;color:#b53078!important}
html body.nrAuthLight #nrAuth .loginConsole {
position:relative!important;
inset:auto!important;
display:block!important;
width:min(440px,calc(100vw - 32px))!important;
max-width:100%!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:0 auto!important;
padding:24px!important;
border:1px solid #d5e3f1!important;
border-radius:24px!important;
background:#fff!important;
color:#14234b!important;
box-shadow:0 12px 36px #31577f18!important;
backdrop-filter:none!important;
opacity:1!important;
visibility:visible!important;
transform:none!important;
overflow:visible!important;
z-index:2!important;
}
html body.nrAuthLight #nrAuth .consoleTitle {color:#14234b!important;text-align:center!important}
html body.nrAuthLight #nrAuth .consoleTitle>span {
display:block!important;
color:#356bad!important;
font-size:10px!important;
font-weight:850!important;
line-height:1.4!important;
letter-spacing:.22em!important;
text-shadow:none!important;
}
html body.nrAuthLight #nrAuth #authHeading {
display:block!important;
margin:7px 0!important;
color:#14234b!important;
font-size:28px!important;
line-height:1.15!important;
text-shadow:none!important;
}
html body.nrAuthLight #nrAuth #authSub {
display:block!important;
color:#596d8b!important;
font-size:12px!important;
line-height:1.5!important;
text-shadow:none!important;
}
html body.nrAuthLight #nrAuth .authTabs {
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
width:100%!important;
gap:5px!important;
margin:18px 0!important;
padding:5px!important;
background:#f0f4fc!important;
border:1px solid #e3eaf6!important;
border-radius:15px!important;
box-shadow:none!important;
}
html body.nrAuthLight #nrAuth .authTabs button {
width:100%!important;
min-width:0!important;
height:auto!important;
min-height:42px!important;
margin:0!important;
padding:9px 6px!important;
font-size:12px!important;
line-height:1.2!important;
background:transparent!important;
color:#465e82!important;
border:1px solid transparent!important;
border-radius:11px!important;
box-shadow:none!important;
text-shadow:none!important;
}
html body.nrAuthLight #nrAuth .authTabs button.active {
color:#5536b7!important;
background:linear-gradient(120deg,#eaf4ff,#eee8ff)!important;
border-color:#d1d6f4!important;
box-shadow:0 2px 7px #59409a10!important;
}
html body.nrAuthLight #nrAuth form {
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
background:transparent!important;
color:#14234b!important;
border:0!important;
gap:14px!important;
}
html body.nrAuthLight #nrAuth #login:not([hidden]),
html body.nrAuthLight #nrAuth #register:not([hidden]) {display:grid!important}
html body.nrAuthLight #nrAuth [hidden] {display:none!important}
html body.nrAuthLight #nrAuth label {
display:block!important;
min-width:0!important;
margin:0!important;
padding:0!important;
text-align:left!important;
color:#3a5278!important;
}
html body.nrAuthLight #nrAuth label>span {
display:block!important;
margin:0 0 6px!important;
font-size:11px!important;
line-height:1.4!important;
font-weight:750!important;
letter-spacing:.07em!important;
color:#455d7f!important;
text-shadow:none!important;
}
html body.nrAuthLight #nrAuth input {
display:block!important;
box-sizing:border-box!important;
width:100%!important;
min-width:0!important;
height:48px!important;
min-height:48px!important;
margin:0!important;
padding:12px 13px!important;
background:#fbfdff!important;
color:#17294e!important;
border:1px solid #c7d7e9!important;
border-radius:13px!important;
font-size:16px!important;
line-height:1.3!important;
box-shadow:inset 0 1px 3px #31577f05!important;
caret-color:#126dcb!important;
}
html body.nrAuthLight #nrAuth input::placeholder {color:#71819a!important;opacity:1!important}
html body.nrAuthLight #nrAuth input:focus {
outline:2px solid #29a4ee!important;
outline-offset:2px!important;
border-color:#389ce1!important;
background:#fff!important;
}
html body.nrAuthLight #nrAuth input:-webkit-autofill {
-webkit-text-fill-color:#17294e!important;
-webkit-box-shadow:0 0 0 1000px #f1f8ff inset!important;
caret-color:#126dcb!important;
}
html body.nrAuthLight #nrAuth button:focus-visible {outline:3px solid #9d7de7!important;outline-offset:3px!important}
html body.nrAuthLight #nrAuth .authPrimary {
display:block!important;
width:100%!important;
height:auto!important;
min-height:48px!important;
margin:3px 0 0!important;
padding:12px 14px!important;
color:#fff!important;
background:linear-gradient(135deg,#168ff3,#0872da)!important;
border:1px solid #1a9ae9!important;
border-radius:14px!important;
box-shadow:0 5px 15px #168ce72d!important;
font-size:14px!important;
line-height:1.3!important;
font-weight:850!important;
letter-spacing:.02em!important;
text-shadow:none!important;
}
html body.nrAuthLight #nrAuth .authPrimary:hover {background:linear-gradient(135deg,#147fe0,#0864c0)!important}
html body.nrAuthLight #nrAuth .authPrimary:active {transform:translateY(1px)!important}
html body.nrAuthLight #nrAuth #msg:empty {display:none!important}
html body.nrAuthLight #nrAuth #msg:not(:empty) {
display:block!important;
margin:14px 0 0!important;
padding:10px 12px!important;
min-height:0!important;
color:#a32e50!important;
background:#fff1f5!important;
border:1px solid #efd1dc!important;
border-radius:12px!important;
font-size:12px!important;
line-height:1.5!important;
overflow-wrap:anywhere!important;
text-shadow:none!important;
}
html body.nrAuthLight #nrAuth .arenaFooter {
position:relative!important;
inset:auto!important;
display:flex!important;
flex:0 0 auto!important;
flex-wrap:wrap!important;
align-items:center!important;
justify-content:center!important;
gap:8px 22px!important;
width:100%!important;
height:auto!important;
min-height:40px!important;
margin:0!important;
padding:10px 14px max(10px,env(safe-area-inset-bottom))!important;
background:linear-gradient(90deg,#fff,#f5faff,#fff8fb)!important;
color:#526a8d!important;
border:0!important;
border-top:1px solid #dce6f3!important;
box-shadow:none!important;
font-size:10px!important;
line-height:1.4!important;
letter-spacing:.06em!important;
}
html body.nrAuthLight #nrAuth .arenaFooter span {color:#526a8d!important;white-space:nowrap!important}
@media(max-width:760px) {
html body.nrAuthLight #nrAuth .arenaHeader {min-height:60px!important;padding:12px 14px!important}
html body.nrAuthLight #nrAuth .arenaLogo strong {font-size:22px!important}
html body.nrAuthLight #nrAuth .arenaLogo small {display:none!important}
html body.nrAuthLight #nrAuth .arenaLive {font-size:8px!important}
html body.nrAuthLight #nrAuth .arenaDuel {height:68px!important;grid-template-columns:minmax(0,1fr) 42px minmax(0,1fr)!important}
html body.nrAuthLight #nrAuth .arenaPlayer {padding:0 10px!important;gap:7px!important;grid-template-columns:auto minmax(0,1fr) auto!important}
html body.nrAuthLight #nrAuth .arenaAvatar {width:34px!important;height:34px!important;font-size:15px!important}
html body.nrAuthLight #nrAuth .arenaPlayer small {font-size:8px!important}
html body.nrAuthLight #nrAuth .arenaPlayer b {font-size:10px!important}
html body.nrAuthLight #nrAuth .arenaPlayer strong {font-size:13px!important}
html body.nrAuthLight #nrAuth .arenaVs {font-size:22px!important}
html body.nrAuthLight #nrAuth .arenaBoard {padding:18px 14px!important}
html body.nrAuthLight #nrAuth .numberField {inset:10px!important}
html body.nrAuthLight #nrAuth .loginConsole {width:min(440px,calc(100vw - 32px))!important;padding:20px!important;border-radius:22px!important}
html body.nrAuthLight #nrAuth #authHeading {font-size:25px!important}
html body.nrAuthLight #nrAuth .consoleTitle>span {font-size:9px!important}
html body.nrAuthLight #nrAuth .authTabs {margin:15px 0!important}
html body.nrAuthLight #nrAuth .authTabs button {min-height:40px!important;font-size:11px!important}
html body.nrAuthLight #nrAuth form {gap:12px!important}
html body.nrAuthLight #nrAuth .arenaFooter {gap:6px 12px!important;font-size:8px!important;min-height:36px!important}
}
@media(max-width:760px) and (max-height:720px) {
html body.nrAuthLight #nrAuth .arenaHeader {min-height:54px!important;padding:9px 12px!important}
html body.nrAuthLight #nrAuth .arenaDuel {height:58px!important}
html body.nrAuthLight #nrAuth .arenaBoard {padding:12px!important}
html body.nrAuthLight #nrAuth .loginConsole {padding:16px!important}
html body.nrAuthLight #nrAuth #authHeading {font-size:23px!important;margin:5px 0!important}
html body.nrAuthLight #nrAuth #authSub {font-size:11px!important}
html body.nrAuthLight #nrAuth .authTabs {margin:12px 0!important;padding:4px!important}
html body.nrAuthLight #nrAuth .authTabs button {min-height:36px!important}
html body.nrAuthLight #nrAuth form {gap:10px!important}
html body.nrAuthLight #nrAuth label>span {font-size:10px!important;margin-bottom:4px!important}
html body.nrAuthLight #nrAuth input {height:44px!important;min-height:44px!important}
html body.nrAuthLight #nrAuth .authPrimary {min-height:44px!important}
}
@media(max-width:360px) {
html body.nrAuthLight #nrAuth .arenaPlayer strong {display:none!important}
html body.nrAuthLight #nrAuth .arenaPlayer {grid-template-columns:auto minmax(0,1fr)!important}
html body.nrAuthLight #nrAuth .arenaLive {font-size:7px!important}
html body.nrAuthLight #nrAuth .arenaFooter {gap:6px 8px!important;font-size:7px!important}
}
@media(max-height:580px) {
html body.nrAuthLight #nrAuth .arenaDuel {display:none!important}
html body.nrAuthLight #nrAuth .arenaHeader {min-height:48px!important;padding:8px 12px!important}
html body.nrAuthLight #nrAuth .arenaBoard {padding:12px!important}
html body.nrAuthLight #nrAuth .loginConsole {padding:16px!important}
html body.nrAuthLight #nrAuth .arenaFooter {min-height:32px!important;padding:7px 10px!important}
}