/* Nitro Pitch 5.13 — shared materials, clearer hierarchy, and earned-reward moments. */
:root{--dim:#a3b3cf;--line:rgba(151,183,236,.24);--glass:rgba(9,18,35,.92);--glass2:rgba(17,32,57,.96)}
button,input,select{ -webkit-tap-highlight-color:transparent }
button:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #ffda75!important;outline-offset:4px!important}
#menu .panel{border-radius:10px;box-shadow:inset 0 1px 0 rgba(210,229,255,.12),inset 0 0 0 1px var(--line),0 16px 38px #0005;backdrop-filter:blur(8px)}
.ph{background:linear-gradient(100deg,#193458b3,#101c30b3);letter-spacing:.12em}
#mBg{background:linear-gradient(90deg,rgba(3,8,18,.58),transparent 43%,rgba(3,8,18,.28)),linear-gradient(0deg,rgba(3,8,18,.88),transparent 35%)}
#mBg::after{background:radial-gradient(ellipse at 55% 24%,rgba(20,40,69,.7),rgba(4,9,20,.95))}
.nb{background:linear-gradient(105deg,#12223beF,#13223bd6)!important;box-shadow:inset 0 1px #b5d5ff22,inset 0 -1px #0006,0 8px 24px #0003}
.nb.big{background:linear-gradient(100deg,#503117eF,#18253cE8)!important}
.nb.big .ic{color:#ffc475}.nb small{letter-spacing:.12em}.nb:hover,.nb:focus-visible{transform:skewX(-14deg) translateX(7px)}
.tile,.plc,.rcard{box-shadow:inset 0 1px #d5e7ff2a,inset 0 0 0 1px var(--line),0 16px 32px #0005!important}
.sbtn.pri{background:linear-gradient(110deg,#318fff,#1761dc)!important;box-shadow:inset 0 1px #fff4,0 4px 14px #0955bf38}
.sbtn,.bigbtn,.ibtn,.ctab,.seg button{transition:background .16s ease,border-color .16s ease,box-shadow .16s ease,filter .16s ease,transform .16s ease}
.sbtn:not(:disabled):active{transform:skewX(var(--sk)) translateY(2px)}
input.t,select.t{background:#07111f;border:1px solid #526b8e;border-radius:5px;min-height:38px}
.t:focus{border-color:#70b2ff}input::placeholder{color:#8e9fb8;opacity:1}
.gi{border-radius:8px;background:linear-gradient(145deg,#18263b,#0b1425)!important;box-shadow:inset 0 1px #dcecff18,inset 0 -3px var(--rar,#33455f)!important;transition:transform .15s,box-shadow .15s}
.gi:not(.locked):hover{transform:translateY(-3px)}.gi.sel{outline:2px solid #ffd451;outline-offset:1px}.gi.locked{opacity:.64;filter:saturate(.65)}
.gi .nm{padding:8px 8px 4px;font-weight:700}.gi.eq::after{content:'EQUIPPED';position:absolute;top:7px;right:7px;font:700 9px var(--ui);letter-spacing:.06em;padding:4px 6px;background:#86edc5;color:#092317;border-radius:3px}
.np-card{border-radius:8px;transition:transform .18s,box-shadow .18s}.np-card.cur{box-shadow:inset 0 0 0 2px #ffd451,0 5px 28px #ffbd3428}.np-card .np-nm{font-weight:700}
.np-player-dialog{font-family:var(--ui)!important;background:linear-gradient(145deg,#14243c,#08101e)!important;border-radius:10px!important;box-shadow:0 32px 100px #0009}
.np-player-dialog h2{font-family:var(--display);font-size:24px;text-transform:uppercase}.np-action{font-family:var(--ui)!important;background:linear-gradient(110deg,#1c3555,#13243c)!important;border-radius:4px!important}.np-action:hover:not(:disabled){border-color:#75b6ff;background:#224471!important}
#score{filter:drop-shadow(0 8px 20px #0008)}#score .clk{background:#091321ed;min-width:68px;justify-content:center}
#boost{filter:drop-shadow(0 6px 12px #0007)}#boostArc{transition:stroke .16s}#boost.ss #boostArc{stroke:#ffd451}#boost .lbl{color:#d1dced;font-weight:700;letter-spacing:.15em}
#msg .big{text-shadow:0 3px 5px #0008,0 0 32px currentColor}#msg .sub{letter-spacing:.05em}
#toast{max-width:min(680px,calc(100vw - 40px));white-space:normal;text-align:center;box-shadow:0 10px 35px #0008;border:1px solid #5f84ae;background:#0b172bf2;line-height:1.45}
#np-connection{z-index:19!important;top:74px!important;right:20px!important;border-radius:4px!important;background:#091525e8!important;font:600 11px var(--ui)!important;letter-spacing:.03em;padding:5px 9px!important}
#np-connection[data-quality=good]{border-color:#284d48!important;color:#a3d6c5}
.np-arena-strip{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;padding:5px 3px 12px;margin:12px 0 4px;scrollbar-width:thin;touch-action:pan-x;grid-column:1/-1}
#menu button.np-arena-card{position:relative;flex:0 0 168px;overflow:hidden;text-align:left;border:1px solid #3a506f;border-radius:8px;background:#0b1728;padding:0;scroll-snap-align:start;transition:transform .16s,border-color .16s}
#menu button.np-arena-card:hover{transform:translateY(-2px);border-color:#a9ceff}#menu button.np-arena-card[aria-pressed=true]{border-color:#ffd451;box-shadow:0 0 0 1px #ffd451}
.np-arena-card canvas{width:100%;height:auto;display:block}.np-arena-card b,.np-arena-card small{display:block;padding:0 10px}.np-arena-card b{font:14px var(--display);padding-top:10px}.np-arena-card small{color:#b6c7df;font:11px/1.4 var(--ui);padding-top:4px;padding-bottom:10px}.np-arena-card em{position:absolute;top:8px;left:8px;background:#e8be61;color:#201a0c;font:700 9px var(--ui);letter-spacing:.12em;padding:3px 5px;border-radius:2px;font-style:normal}
.np-arena-tag{position:fixed;top:100px;left:24px;z-index:6;pointer-events:none;padding:12px 18px;border-left:3px solid #66b9ff;background:linear-gradient(90deg,#091624ed,#09162400);animation:np-banner-in .4s ease both}.np-arena-tag small{display:block;font:600 10px var(--ui);letter-spacing:.2em;color:#b1cbe7}.np-arena-tag b{display:block;font:23px var(--display);margin-top:5px}
.np-up-next{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);width:min(350px,100%);box-sizing:border-box;padding:13px 16px;background:linear-gradient(110deg,#0a182ce8,#0b1326d9);border:1px solid #355071;border-radius:8px;pointer-events:none;display:grid;grid-template-columns:50px 1fr;gap:12px;align-items:center}.np-up-next .np-mini{width:50px;height:40px;display:grid;place-items:center}.np-mini canvas{max-width:100%;height:auto}.np-up-next small{display:block;color:#9db8d8;letter-spacing:.12em;font-size:10px;text-transform:uppercase}.np-up-next b{display:block;font:14px var(--display);margin:4px 0}.np-up-next span{color:#d2dfef;font-size:11px}
#unlockPop{background:radial-gradient(ellipse at center,#162841dd,#030813f2);backdrop-filter:blur(7px);padding:20px}
#unlockPop .up-card{position:relative;width:min(620px,100%);max-height:calc(100dvh - 40px);overflow:auto;box-sizing:border-box;border:1px solid color-mix(in srgb,var(--reward-color,#ffd451) 70%,#fff);border-radius:14px;padding:28px;background:linear-gradient(160deg,#162a42,#080f1d 72%);box-shadow:0 30px 100px #0009,0 0 65px color-mix(in srgb,var(--reward-color,#ffd451) 18%,transparent);animation:np-reward-in .42s cubic-bezier(.2,.8,.2,1)}
#unlockPop .up-t{font-size:clamp(25px,5vw,36px);letter-spacing:.04em;margin:6px 0 4px;color:#fff}#unlockPop .np-reward-label{text-align:center;color:var(--reward-color,#ffd451);font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
#unlockPop .np-reward-copy{text-align:center;font-size:13px;color:#b4c5dd;margin:8px 0 20px}
#unlockList{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:10px!important;max-height:42vh;overflow:auto;padding:3px!important}
#unlockList li{background:linear-gradient(160deg,#1d304a,#0b1526);border:1px solid #314662;border-bottom:3px solid var(--rar,#ffd451);border-radius:7px;padding:10px;text-align:center;animation:np-reward-in .35s ease both}
#unlockList .np-reward-art{height:105px;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse,color-mix(in srgb,var(--rar) 20%,transparent),transparent 70%)}
.np-reward-art canvas{max-width:100%;max-height:110px;width:auto;height:auto}.np-reward-art .bthumb{min-height:70px}
#unlockList b{display:block;font:14px var(--display);margin-top:6px}#unlockList small{display:block;color:var(--rar);font-size:11px;margin-top:5px}#unlockList .sbtn{margin-top:10px;max-width:95%;font-size:10px}
#unlockPop .up-row{margin-top:20px;justify-content:center;flex-wrap:wrap;gap:12px}.np-reward-note{grid-column:1/-1;font-size:13px;line-height:1.5}
#dropPop{background:radial-gradient(ellipse at center,#1b2a45de,#030712f5);backdrop-filter:blur(6px)}#dpCard{border-radius:14px;background:linear-gradient(155deg,#19283e,#080f1d);box-shadow:0 26px 80px #0008,0 0 80px color-mix(in srgb,var(--rar) 20%,transparent)}
#dpCard.rev #dpTh{animation:np-reward-in .5s cubic-bezier(.16,1,.3,1)}#dpName{font-size:clamp(24px,4vw,34px);text-wrap:balance}#dpKind{color:#c0d0e3}#dpRar{letter-spacing:.22em}
.po-head h1{letter-spacing:.08em;text-shadow:0 5px 28px #0006}.xpl div{padding:8px 0}.bar{height:7px;border-radius:6px;overflow:hidden}.bar i{box-shadow:0 0 14px #398fff66}#postXpTotal{font-variant-numeric:tabular-nums;color:#ffdc72}
.np-saved-badge{display:inline-block;color:#8ee5bd;background:#163b2e;border:1px solid #316c52;border-radius:4px;padding:5px 9px;font:700 10px var(--ui);letter-spacing:.1em;margin-top:8px;text-transform:uppercase}
@keyframes np-reward-in{from{opacity:0;transform:translateY(16px) scale(.94)}to{opacity:1;transform:none}}@keyframes np-banner-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@media(min-width:1000px) and (min-height:700px){.nav{gap:10px}.nb{height:58px}.nb.big{height:76px}.nb b{font-size:23px}.nb.big b{font-size:33px}}
@media(max-width:760px){#np-connection{top:61px!important;right:12px!important;font-size:10px!important}.np-up-next{display:none}.np-arena-card{flex-basis:144px!important}#unlockPop .up-card{padding:20px 16px}.np-arena-tag{top:94px;left:12px}.np-arena-tag b{font-size:18px}#unlockList{grid-template-columns:repeat(2,minmax(0,1fr))!important}#unlockList .np-reward-art{height:80px}.np-reward-art canvas{max-height:85px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}#unlockPop,#dropPop{backdrop-filter:none}}

.np-connection{position:fixed;z-index:80;top:80px;left:50%;transform:translateX(-50%);max-width:90vw;padding:10px 18px;background:#111b30ed;border:1px solid #ffd451;color:#ffe191;border-radius:5px;text-align:center;pointer-events:none;font-size:13px}
.np-connection[hidden],.np-match-summary[hidden]{display:none}
.np-match-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.np-match-summary>div{background:linear-gradient(140deg,#203655cc,#0b1525);border:1px solid #344e71;padding:14px 8px;text-align:center;border-radius:5px}
.np-match-summary b{display:block;font-size:28px;color:#ffd451;font-variant-numeric:tabular-nums}.np-match-summary small{display:block;margin-top:4px;color:#b6c9e5;text-transform:uppercase;letter-spacing:.08em}
.np-next-unlock{padding:12px 15px;border-left:3px solid #ffd451;background:#ffd4510b;color:#e9effa;font-size:13px}
@media(max-width:520px){.np-match-summary{gap:5px}.np-match-summary b{font-size:22px}.np-match-summary small{font-size:10px}.np-connection{top:65px}}

#post.trainres .np-match-summary,#post.trainres .np-next-unlock,#post.trainres #np-post-party{display:none}

/* Phone camera controls stay clear of the steering and boost fingers. */
@media(pointer:coarse){
 #tCam,#tRear{right:calc(14px + env(safe-area-inset-right,0px));width:110px;height:48px;bottom:auto;border-radius:10px;background:#0c192de6;border:1px solid #7693be;color:#eff6ff;font:700 11px var(--ui);touch-action:none;-webkit-touch-callout:none;user-select:none;padding:0 6px}
 #tCam{top:calc(68px + env(safe-area-inset-top,0px))}
 #tRear{top:calc(124px + env(safe-area-inset-top,0px))}
 #tCam.on,#tRear.on{background:#163e65ed;border-color:#64b9ff;color:#bce4ff}
 #tCam:focus-visible,#tRear:focus-visible{outline:3px solid #ffd451;outline-offset:2px}
}
@media(pointer:coarse) and (orientation:landscape) and (max-height:450px){
 #boost{width:80px;height:80px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
 #boost .num{font-size:24px}#boost .lbl{bottom:12px;font-size:9px}
}

/* Clan emblems use the clan's existing banner design, separate from player rank. */
.np-clan-logo{display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:44px;box-sizing:border-box;position:relative;isolation:isolate;background:var(--cl-fg,#ffd451);clip-path:polygon(7% 0,93% 0,100% 63%,50% 100%,0 63%);padding:4px;color:var(--cl-fg,#ffd451)}
.np-clan-logo::before{content:"";position:absolute;inset:2px;z-index:-1;clip-path:inherit;background:linear-gradient(145deg,#ffffff18,#0006),var(--cl-bg,#182943)}
.lbl .np-clan-logo img{width:32px;height:32px;object-fit:contain;filter:drop-shadow(0 2px 2px #0006);margin-top:-3px}.np-clan-logo b{font:700 10px var(--ui);max-width:100%;letter-spacing:0;text-align:center;margin-top:-4px}
.lbl .n{flex-shrink:0}.lbl>li>.np-clan-logo{margin-right:2px}.lbl>li>.nm{min-width:0}
/* Update 5.18: pop-ups added around the game use the same look as the game's own (square box, gradient top edge, slanted buttons) */
#notifPop{position:fixed;z-index:61;inset:0;display:grid;place-items:center;padding:16px;background:rgba(2,5,12,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#notifPop[hidden]{display:none}
#notifPop .cf-box{border-color:rgba(255,212,81,.45)}
#nitropitch-terms-modal dialog,#np-cookie-dialog,.np-player-dialog{border-radius:0!important;border:1px solid var(--line,rgba(150,180,255,.2))!important;border-top:3px solid transparent!important;border-image:linear-gradient(90deg,#2e8bff,#ffd451,#ff8a1e) 1!important;background:linear-gradient(180deg,#0f1d36,#070d1a)!important;box-shadow:0 30px 90px rgba(0,0,0,.6)!important;font-family:var(--ui,"Chakra Petch","Segoe UI",sans-serif)!important}
#nitropitch-terms-modal h2,#np-cookie-dialog h2,.np-player-dialog h2{font-family:var(--display,"Russo One",sans-serif)!important;color:#fff!important;text-transform:uppercase;letter-spacing:.04em}
#nitropitch-terms-modal button,#np-cookie-dialog button:not([data-close]),.np-player-dialog .np-action{border-radius:0!important;border:0!important;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);padding:0 26px!important;min-height:44px;font:700 13px/1 var(--ui,"Chakra Petch",sans-serif)!important;letter-spacing:.12em!important;text-transform:uppercase;color:#edf4ff!important;background:rgba(255,255,255,.1)!important;box-shadow:none!important;cursor:pointer}
#nitropitch-terms-modal button:first-of-type,#np-cookie-dialog button[data-allow]{background:linear-gradient(180deg,#2e8bff,#1f62bf)!important;color:#fff!important}
#nitropitch-terms-modal button:hover,#np-cookie-dialog button:not([data-close]):hover,.np-player-dialog .np-action:hover:not(:disabled){filter:brightness(1.18)}
/* Update 5.20: Ranked rewards tab (Career) */
#career .panel.rewards{display:none}
.rr-wrap{display:flex;flex-direction:column;gap:10px;padding-bottom:20px}
.rr-wrap[hidden]{display:none}
.rr-head{display:flex;align-items:center;gap:20px;padding:18px 22px;border-radius:10px;background:linear-gradient(110deg,rgba(124,58,237,.3),rgba(46,139,255,.18) 55%,rgba(12,20,42,.9))!important;box-shadow:inset 0 0 0 1px rgba(183,124,255,.35)}
.rr-hi{display:flex;align-items:center;gap:18px;flex:1;min-width:0}
.rr-hemb{width:92px;height:92px;flex:0 0 auto;filter:drop-shadow(0 6px 18px rgba(0,0,0,.5))}
.rr-hi small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#d9c2ff;font-weight:700}
.rr-hi h2{margin:4px 0 6px;font:26px/1.1 var(--display);text-transform:uppercase;letter-spacing:.04em}
.rr-hi p{margin:0;color:#c3cde6;font-size:14px;max-width:720px}
.rr-bonus{flex:0 0 auto;text-align:center;padding:10px 18px;background:rgba(0,0,0,.35);border-radius:10px}
.rr-bonus b{display:block;font:34px/1 var(--display);color:#ffd451;text-shadow:0 0 18px rgba(255,212,81,.45)}
.rr-bonus small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#cfd7ee}
.rr-row{display:flex;align-items:stretch;gap:14px;padding:10px 14px 10px 10px;border-radius:10px;background:linear-gradient(90deg,color-mix(in srgb,var(--td) 70%,transparent),rgba(10,16,34,.92) 38%);box-shadow:inset 3px 0 0 var(--tc),inset 0 0 0 1px rgba(150,180,255,.14);opacity:.6;transition:opacity .2s}
.rr-row.got,.rr-row.next{opacity:1}
.rr-row.got{box-shadow:inset 3px 0 0 var(--tc),inset 0 0 0 1px color-mix(in srgb,var(--tc) 45%,transparent)}
.rr-row.cur{box-shadow:inset 3px 0 0 var(--tc),inset 0 0 0 2px var(--tc),0 0 26px color-mix(in srgb,var(--tc) 35%,transparent)}
.rr-side{flex:0 0 150px;display:grid;grid-template-columns:56px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;align-content:center}
.rr-side img{grid-row:1/3;width:56px;height:56px}
.rr-name{font:16px/1.1 var(--display);text-transform:uppercase;color:var(--tc);align-self:end}
.rr-st{font-size:12px;font-weight:700;color:#9fb0d4;align-self:start}
.rr-row.got .rr-st{color:#3fe08f}.rr-row.next .rr-st{color:#ffd451}
.rr-items{flex:1;display:flex;gap:10px;overflow-x:auto;scrollbar-width:thin;padding-bottom:2px}
.rr-it{flex:0 0 150px;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:8px;background:rgba(0,0,0,.28)}
.rr-it.click{cursor:pointer}.rr-it.click:hover{background:rgba(255,255,255,.08)}
.rr-th{height:62px;display:grid;place-items:center;border-radius:6px;background:rgba(0,0,0,.3);overflow:hidden;margin-bottom:4px}
.rr-th canvas,.rr-th img{width:100%;height:100%;object-fit:contain}
.rr-it b{font-size:13px;line-height:1.2}.rr-it small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9fb0d4}
.rr-bn{width:100%;height:100%}
.rr-tt{display:grid;place-items:center;width:100%;height:100%;font-size:15px}
.rr-xp{font:28px var(--display);color:#ffd451}
@media (max-width:760px){.rr-head{flex-direction:column;align-items:stretch}.rr-row{flex-direction:column}.rr-side{flex-basis:auto}}
/* Update 5.20: Nitro Pass */
#pass .np-top{position:relative;padding:20px 24px;gap:24px;border-radius:12px;background:radial-gradient(ellipse at 0% 0%,rgba(255,159,28,.35),transparent 55%),linear-gradient(110deg,rgba(124,58,237,.35),rgba(12,20,42,.92) 70%)!important}
#pass .np-tier{min-width:108px;padding:10px 14px;background:linear-gradient(180deg,rgba(255,159,28,.25),rgba(0,0,0,.45));box-shadow:inset 0 0 0 2px rgba(255,179,71,.6),0 10px 30px rgba(0,0,0,.35);clip-path:polygon(12% 0,100% 0,88% 100%,0 100%)}
#pass .np-tier b{font-size:56px}
#pass .np-row b{font:20px var(--display);text-transform:uppercase;letter-spacing:.03em}
#pass .np-prog .bar{height:16px;border-radius:0;transform:skewX(-12deg);background:rgba(0,0,0,.45);box-shadow:inset 0 0 0 1px rgba(255,179,71,.35)}
#pass .np-prog .bar i{box-shadow:0 0 16px rgba(255,159,28,.6)}
.np-nextbox{flex:0 0 260px;display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;background:rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px var(--rar,rgba(255,179,71,.4)),0 0 24px color-mix(in srgb,var(--rar,#ffb347) 25%,transparent)}
.np-nth{flex:0 0 110px;height:76px;display:grid;place-items:center;border-radius:7px;background:rgba(0,0,0,.35);overflow:hidden}
.np-nth canvas,.np-nth img{width:100%;height:100%;object-fit:contain}
.np-ntx{display:flex;flex-direction:column;min-width:0}
.np-ntx small,.np-nextbox > small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#ffcf8a;font-weight:700}
.np-ntx b,.np-nextbox > b{font-size:16px;line-height:1.2}
.np-ntx span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9fb0d4}
.np-trackbar{display:flex;align-items:center;gap:8px;margin:4px 0 8px}
.np-trackbar[hidden]{display:none}
.np-tbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#cfd7ee;font-weight:700}
.np-sp{flex:1}
.np-arrow{width:40px;height:34px;font:22px/1 var(--display);color:#fff;background:rgba(255,255,255,.1)!important;transform:skewX(-12deg);cursor:pointer}
.np-arrow:hover{background:rgba(46,139,255,.5)!important}
#pass .np-track{gap:12px;padding:6px 6px 30px;scroll-snap-type:none}
#pass .np-card{position:relative;flex-basis:168px;padding:12px;opacity:.55;background:linear-gradient(170deg,color-mix(in srgb,var(--rar,#3a4c7a) 22%,rgba(22,34,66,.96)),rgba(9,14,30,.97))}
#pass .np-card .np-th{height:110px}
#pass .np-card.got{opacity:1}
#pass .np-card.nx{opacity:.9;box-shadow:inset 0 0 0 1px rgba(255,212,81,.6)}
#pass .np-card.cur{transform:translateY(-4px)}
#pass .np-card.ms{box-shadow:inset 0 0 0 2px #ffd451,0 0 22px rgba(255,212,81,.25)}
#pass .np-card.ms .np-n{color:#ffd451}
#pass .np-card.ms .np-n::after{content:" ★"}
#pass .np-card::after{content:"";position:absolute;left:-6px;right:-6px;bottom:-18px;height:5px;background:rgba(255,255,255,.12)}
#pass .np-card.got::after{background:linear-gradient(90deg,#ff9f1c,#ffd451);box-shadow:0 0 10px rgba(255,159,28,.6)}
#pass .np-card::before{content:"";position:absolute;left:50%;bottom:-22px;width:13px;height:13px;margin-left:-6px;border-radius:50%;background:#1a2440;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);z-index:1}
#pass .np-card.got::before{background:#ffd451;box-shadow:0 0 10px #ffb347}
#pass .np-card.cur::before{width:17px;height:17px;margin-left:-8px;bottom:-24px;background:#fff;box-shadow:0 0 0 3px #ff9f1c,0 0 16px #ffb347}
#pass .np-qs{padding:14px 16px;background:linear-gradient(170deg,rgba(22,34,66,.95),rgba(9,14,30,.97))!important;box-shadow:inset 0 0 0 1px rgba(150,180,255,.18)}
#pass .np-q{padding:12px 14px;background:rgba(0,0,0,.3);box-shadow:inset 3px 0 0 #ffb347}
#pass .np-q.done{box-shadow:inset 3px 0 0 #3fe08f}
#pass .np-qi b{font-size:15px}
#pass .np-qi .bar{height:8px;transform:skewX(-12deg)}
#pass .np-qi .bar i{background:linear-gradient(90deg,#ff9f1c,#ffd451)}
#pass .np-qp{font:16px var(--display)}
@media (max-width:760px){.np-nextbox{flex-basis:auto}#pass .np-card{flex-basis:140px}}
#pass .np-card{flex-basis:190px}#pass .np-card .np-th{height:136px}
.rr-tt .ptitle{font-size:14px}
/* Update 5.20: replay viewer controls */
.rp-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;max-width:calc(100% - 24px);padding:8px 12px;background:linear-gradient(180deg,rgba(15,29,54,.94),rgba(7,13,26,.94));box-shadow:inset 0 0 0 1px rgba(150,180,255,.22),0 14px 40px rgba(0,0,0,.5);border-top:2px solid #2e8bff;font-family:var(--ui)}
.rp-bar[hidden]{display:none}
.rp-bar button{height:34px;padding:0 14px;border:0;font:700 12px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;color:#edf4ff;background:rgba(255,255,255,.08);clip-path:polygon(7px 0,100% 0,calc(100% - 7px) 100%,0 100%);cursor:pointer}
.rp-bar button:hover{background:rgba(255,255,255,.18)}
.rp-bar button.on{background:rgba(255,212,81,.22);color:#ffd451;box-shadow:inset 0 -2px 0 #ffd451}
.rp-bar button.pri{background:linear-gradient(180deg,#2e8bff,#1f62bf);color:#fff}
.rp-sep{width:1px;height:22px;background:rgba(150,180,255,.25);margin:0 4px}
.rp-hint{flex:1 1 100%;text-align:center;font-size:12px;color:#b9c6e4;min-height:0}
.rp-hint:empty{display:none}
/* admin: chat context on reports, errors */
.rep-chat{margin-top:6px;font-size:13px}.rep-chat summary{cursor:pointer;color:#91c5ff}
.rc-l{padding:2px 6px;border-left:2px solid transparent}.rc-l.bad{border-left-color:#ff4d57;background:rgba(255,77,87,.12)}
.err-row pre{white-space:pre-wrap;word-break:break-word;font-size:11px;max-height:220px;overflow:auto;background:rgba(0,0,0,.35);padding:8px}
.err-row .who b{color:#ff8a8a}
body.np-viewing #boost,body.np-viewing #help{display:none!important}
#gGrid .gi[hidden]{display:none!important}
/* Update 5.22: join pop-ups in their own spots */
#np-cookie-dialog.np-cookie-banner{position:fixed;inset:auto auto 16px 16px;margin:0;max-width:420px;width:calc(100% - 32px);padding:16px 18px 12px;z-index:70}
#np-cookie-dialog.np-cookie-banner h2{font-size:20px!important;margin-bottom:6px}
#np-cookie-dialog.np-cookie-banner p{font-size:13px;margin-bottom:8px}
#np-cookie-dialog.np-cookie-banner .np-eyebrow{display:none}
#np-cookie-dialog.np-cookie-banner .np-cookie-actions{margin:10px 0 2px;justify-content:flex-start}
#np-cookie-dialog.np-cookie-banner button:not([data-close]){min-height:38px;padding:0 18px!important;font-size:12px!important}
.np-corner{position:fixed;z-index:61;right:16px;top:calc(76px + env(safe-area-inset-top,0px));width:min(340px,calc(100% - 32px))}
.np-corner[hidden]{display:none}
.np-corner .cf-box{padding:16px 18px;border-top:3px solid #2e8bff;box-shadow:0 20px 50px rgba(0,0,0,.5)}
.np-corner h2{font-size:18px}.np-corner p{font-size:13px}
body.np-pop-busy .np-quick-start{visibility:hidden}
/* clan card (Players Online › a player's clan): the members list scrolls inside the card */
#clanCardPop .ad-card{max-height:min(88vh,calc(100dvh - 32px));overflow:hidden}
#clanCardPop #ccBody{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding-right:4px}
#clanCardPop .up-row{flex:0 0 auto}
/* Update 5.23: the account is opened from Settings */
#navAccount,#acctBtn{display:none!important}
#setAcct{margin-left:auto}#setAcct .ic{width:16px;height:16px;vertical-align:-3px}
/* Update 5.24: More › Coming soon */
#more .tiles.on{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){#more .tiles.on{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){#more .tiles.on{grid-template-columns:1fr}}
#soonPop{position:fixed;inset:0;z-index:62;display:grid;place-items:center;padding:16px;background:rgba(2,5,12,.7);backdrop-filter:blur(4px)}
#soonPop[hidden]{display:none}
.soon-card{width:min(1180px,100%);height:min(86vh,900px);display:flex;flex-direction:column;background:#0b1426;border:1px solid rgba(150,180,255,.25);border-top:3px solid transparent;border-image:linear-gradient(90deg,#2e8bff,#ffd451,#ff8a1e) 1;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.soon-head{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid rgba(150,180,255,.15)}
.soon-head b{font:20px var(--display);text-transform:uppercase;letter-spacing:.04em}
.soon-card iframe{flex:1;width:100%;border:0;background:#0b1426}
/* Snowdrift Season (Christmas event) */
.snow-tab{color:#bfe8ff}
.np-snow{display:flex;flex-direction:column;gap:12px;padding-bottom:20px}
.np-snow[hidden]{display:none}
.snow-head{display:flex;align-items:center;gap:24px;padding:18px 22px;border-radius:12px;background:radial-gradient(ellipse at 100% 0%,rgba(77,255,176,.18),transparent 55%),linear-gradient(110deg,rgba(46,139,255,.28),rgba(12,20,42,.92) 70%)!important;box-shadow:inset 0 0 0 1px rgba(191,232,255,.3)}
.snow-ht{flex:1;min-width:0}.snow-ht small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#bfe8ff;font-weight:700}
.snow-ht h2{margin:4px 0 6px;font:28px/1.1 var(--display);text-transform:uppercase}.snow-ht p{margin:0;color:#c3cde6;font-size:14px;max-width:720px}
.snow-stats{display:grid;grid-template-columns:repeat(4,minmax(64px,1fr));gap:8px}
.snow-stats div{text-align:center;padding:8px 10px;background:rgba(0,0,0,.35);border-radius:8px}.snow-stats b{display:block;font:24px var(--display);color:#fff}.snow-stats small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#9fb0d4}
.snow-drops{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:16px 18px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,212,81,.35)}
.snow-dl{flex:1 1 220px;display:flex;flex-direction:column;gap:4px}.snow-dl b{font:20px var(--display);text-transform:uppercase;color:#ffd451}.snow-dl span{font-weight:700}.snow-dl small{color:#9fb0d4}
.snow-rare{display:flex;gap:10px;flex-wrap:wrap}
.snow-ri{width:130px;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:8px;background:rgba(0,0,0,.3);box-shadow:inset 0 -3px 0 var(--rar)}
.snow-ri b{font-size:13px}.snow-ri small{font-size:11px;color:#9fb0d4}.snow-ri.got small{color:#3fe08f}
.snow-th{height:72px;display:grid;place-items:center;border-radius:6px;background:rgba(0,0,0,.3);overflow:hidden;margin-bottom:4px}
.snow-th canvas,.snow-th img,.snow-th .bthumb{width:100%;height:100%;object-fit:contain}
.snow-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.snow-c{display:flex;flex-direction:column;gap:3px;padding:10px;border-radius:10px;background:linear-gradient(170deg,color-mix(in srgb,var(--rar) 18%,rgba(22,34,66,.96)),rgba(9,14,30,.97));box-shadow:inset 0 0 0 1px rgba(150,180,255,.16);opacity:.85}
.snow-c.got{opacity:1;box-shadow:inset 0 0 0 1px #3fe08f}.snow-c.click{cursor:pointer}.snow-c.click:hover{transform:translateY(-2px)}
.snow-c b{font-size:14px}.snow-c small{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#9fb0d4}
.snow-need{font-size:12px;color:#cfd7ee}.snow-c .bar{height:6px}.snow-c .bar i{background:linear-gradient(90deg,#9fdcff,#ffffff)}
.snow-st{font:700 12px var(--ui);color:#9fb0d4}.snow-c.got .snow-st{color:#3fe08f}
@media (max-width:760px){.snow-head{flex-direction:column;align-items:stretch}}
/* Snowdrift Season: advent calendar, Christmas Drops, collection */
.snow-dropbox{flex:0 0 auto;display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(0,0,0,.35);border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,77,87,.45),0 0 24px rgba(255,77,87,.15)}
.snow-gift{width:96px;height:66px}.snow-gift canvas{width:100%;height:100%}
.snow-dropbox .snow-dl{flex:0 0 auto}
.snow-note{border-left-color:#bfe8ff!important}
.snow-cal{padding:14px 16px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(191,232,255,.25)}
.snow-doors{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px;margin-top:10px}
.snow-door{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:118px;padding:8px 10px;border:0;border-radius:8px;font:inherit;color:#edf4ff;text-align:left;cursor:default;background:repeating-linear-gradient(135deg,#123a6b 0 10px,#0f3260 10px 20px)}
.snow-door b{font:24px/1 var(--display)}
.snow-door small{font-size:11px;line-height:1.3;color:#cfd7ee}
.snow-door.shut{opacity:.55}
.snow-door.shut b{color:#9fb0d4}
.snow-door.ready{cursor:pointer;background:linear-gradient(160deg,#d6283a,#7a0f1c);box-shadow:0 0 0 2px #ffd451,0 0 22px rgba(255,212,81,.45);animation:snowPulse 1.6s ease-in-out infinite}
.snow-door.ready:hover{filter:brightness(1.12)}
.snow-door.done{background:linear-gradient(160deg,#16324f,#0b1a30);box-shadow:inset 0 0 0 1px #3fe08f}
.snow-door.done small{color:#3fe08f}
.snow-door.big{grid-column:span 2;background-image:repeating-linear-gradient(135deg,#6b4a00 0 10px,#5a3d00 10px 20px)}
.snow-door.big.ready{background:linear-gradient(160deg,#ffd451,#b8790a);color:#1a1200}.snow-door.big.ready small{color:#2a1d00}
.snow-dth{width:100%;height:52px;display:grid;place-items:center;overflow:hidden}.snow-dth canvas,.snow-dth .bthumb{max-width:100%;max-height:100%}
.snow-xp{font:20px var(--display);color:#ffd451}
@keyframes snowPulse{50%{box-shadow:0 0 0 2px #ffd451,0 0 34px rgba(255,212,81,.7)}}
.snow-col{padding:14px 16px;border-radius:12px}
.snow-col .snow-grid{margin-top:10px}
@media (prefers-reduced-motion:reduce){.snow-door.ready{animation:none}}