/* Preserve the reference's arcade layout; replace only this edition's presentation. */
.pv-arena-events{position:absolute;top:calc(max(10px,env(safe-area-inset-top,0px)) + 108px);right:clamp(12px,2vw,28px);display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);z-index:4;pointer-events:none}
.pv-arena-events[hidden]{display:none!important}.pv-arena-event{box-sizing:border-box;max-width:100%;padding:7px 14px;background:#f6efda;color:#211c24;border-left:5px solid #ba2335;box-shadow:4px 4px 0 #211c24;font:700 clamp(28px,2.8vw,36px)/1.02 Bangers,Impact,sans-serif;letter-spacing:.035em;white-space:nowrap;animation:pv-arena-event-enter .16s ease-out}
@keyframes pv-arena-event-enter{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@media(max-height:500px){.pv-arena-event{font-size:28px;padding:6px 12px}}
@media(max-width:1100px){html:not(.phone) .pv-arena-events{top:176px;left:50%;right:auto;transform:translateX(-50%)}html:not(.phone) .pv-arena-event{font-size:28px;padding:6px 12px}}
@media(max-width:760px){html:not(.phone) .pv-arena-event{font-size:22px;padding:4px 10px}html:not(.phone) .pv-arena-events{top:190px;gap:8px}}
@media(max-width:600px){html:not(.phone) .pv-arena-events{top:252px;flex-wrap:wrap;justify-content:center}}
html.phone .pv-arena-events{top:114px;left:50%;right:auto;transform:translateX(-50%);gap:10px}html.phone .pv-arena-event{font-size:24px;padding:5px 12px}
@media(max-width:759px){html.phone .pv-arena-events{top:156px;left:12px;right:250px;transform:none;justify-content:center;gap:8px;max-width:none}html.phone .pv-arena-event{font-size:22px;padding:4px 10px}}
@media(max-width:600px){html.phone .pv-arena-events{top:76px;left:auto;right:8px;max-width:calc(100% - 16px)}html.phone .pv-arena-event{font-size:20px}}
@media(prefers-reduced-motion:reduce){.pv-arena-event{animation:none}}
#bOnline,#bRanked,#bParl,#bPol,#tlMis,#tlOn,#ckBar,#appTip,#ver+small,#selTabs button:not([data-t="pol"]),#bMis{display:none!important}
#seo{display:none!important}#legal{gap:14px}#legal span{color:#e2d3f1;font-size:11px}#ver{font-size:12px!important;letter-spacing:.08em}
.pv-button-name{display:block;font:900 italic 24px/1.1 Kanit,Arial,sans-serif}.pv-context-links{position:absolute;right:3vw;bottom:20px;display:flex;gap:12px;align-items:center;z-index:10}.pv-context-links button,.pv-pause-links button{font:800 italic 13px Kanit,Arial,sans-serif;background:#29104d;color:#fff3c0;border:2px solid #f6d66f;transform:skewX(-8deg);padding:8px 14px;cursor:pointer}.pv-pause-links{display:flex;gap:14px;justify-content:center;margin-top:20px}.pv-context-frame{position:fixed;inset:0;width:100%;height:100%;z-index:1000;border:0;background:#eee7d7}.pv-dialogue-note{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);font:500 10px Kanit,sans-serif;opacity:.65;color:#fff;white-space:nowrap;pointer-events:none}
#scrbg{background-image:linear-gradient(90deg,rgba(20,4,43,.6),rgba(20,4,43,.4)),url('assets/stages/serbia_pano.png')!important;background-size:cover!important;background-position:center!important}#scrbg::after{background:linear-gradient(0deg,#180728 0%,transparent 80%)!important}
#title .logo img{content:url('../assets/studenti-logo-v9.svg')}#selPg0 img,#selPg1 img{filter:drop-shadow(6px 5px 0 #170a29)}
.stagecard{background-image:linear-gradient(0deg,rgba(15,5,40,.85),rgba(35,12,64,.15)),url('assets/stages/serbia_pano.png')!important;background-size:cover!important;background-position:center!important}.stagecard b{color:#fff5c8!important}.stagecard span{color:#e3d5ed!important}
@media(max-width:760px){.pv-context-links{bottom:8px;right:10px;gap:7px}.pv-context-links button{font-size:10px;padding:6px 8px}.pv-button-name{font-size:18px}.pv-dialogue-note{font-size:8px;bottom:4px}.pv-pause-links button{font-size:11px;padding:7px 9px}}
button:focus-visible{outline:3px solid #20e2ff;outline-offset:4px}
#grid .card[hidden]{display:none!important}#grid{grid-template-columns:repeat(auto-fit,minmax(80px,1fr));max-width:860px}#selTitle{font-size:clamp(22px,3.2vw,42px)}
.btn.mb:has(.pv-button-name){display:flex!important;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}.pv-button-name+small{display:block;font:500 11px/1.2 Kanit,sans-serif;white-space:normal}.pv-button-name{font-size:22px}#selPg0,#selPg1{object-fit:contain!important;object-position:center bottom!important}html:not(.phone) #selPg0,html:not(.phone) #selPg1{width:min(44vw,70vh)!important;height:min(44vw,70vh)!important}html:not(.phone) #selPg0{left:-3vw!important}html:not(.phone) #selPg1{right:-3vw!important}@media(max-width:760px){.pv-button-name{font-size:17px}.pv-button-name+small{font-size:9px}}
#pres .pv-citation{display:block;font:700 clamp(9px,1vw,13px)/1.2 Kanit,Arial,sans-serif;letter-spacing:.03em;margin-top:6px;color:#463554}
#cbBanner span{max-width:min(70vw,580px);white-space:normal;text-wrap:balance}#hud .hitc span{font-size:clamp(10px,1.1vw,17px)}
#app:has(#title:not([hidden])) #scrbg{background-image:linear-gradient(90deg,rgba(20,4,43,.34),rgba(20,4,43,.13)),url('../assets/cover-art-mali-v7.png')!important}
/* Reserve the same space in both steps; descriptions never resize the screen. */
html:not(.phone) #select{box-sizing:border-box;inset:0!important;width:100%!important;height:100%!important;transform:none!important;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:112px minmax(0,1fr) 126px 42px;gap:12px;padding:24px 24px 28px;align-items:stretch;justify-items:center;isolation:isolate}
html:not(.phone) #select[hidden]{display:none!important}
.sg-cls,#spRandom{display:none!important}
html:not(.phone) #select .sel-top{height:112px;align-content:start;gap:7px;z-index:2}
html:not(.phone) #select #selTitle{font-size:clamp(24px,3vw,40px);line-height:1.1}
html:not(.phone) #select .sel-mid{box-sizing:border-box;min-height:0;width:min(1120px,100%);padding:0!important;align-items:end;gap:24px;z-index:2;pointer-events:none}
html:not(.phone) #select .sel-mid>div{box-sizing:border-box;flex:0 1 360px;width:40%;max-width:360px;max-height:100%;padding:14px 16px;overflow:auto!important;pointer-events:auto;scrollbar-width:thin}
html:not(.phone) #select .nameplate{font-size:clamp(24px,2.5vw,38px)}
html:not(.phone) #select .nameplate small{font-size:12px;line-height:1.3;min-height:16px}
html:not(.phone) #select .moves{font-size:clamp(11px,1vw,14px)!important;line-height:1.28;max-width:none}
html:not(.phone) #select #grid{box-sizing:border-box;display:flex;justify-content:center;align-content:center;align-items:center;flex-wrap:wrap;gap:8px;width:min(880px,100%);height:126px;max-width:880px;z-index:3}
html:not(.phone) #select #grid .card{flex:0 0 calc((100% - 56px)/8);width:calc((100% - 56px)/8);max-width:94px;height:122px;aspect-ratio:auto}
html:not(.phone) #select #grid .card .nm{font-size:clamp(10px,1.05vw,14px);letter-spacing:0}
html:not(.phone) #select #grid .card img.pg{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;transform:none!important;object-fit:cover!important;object-position:center 18%!important}
html:not(.phone) #select>.row:has(#selBack){box-sizing:border-box;display:grid;grid-template-columns:112px minmax(0,230px) 132px;justify-content:center;gap:14px;width:min(530px,100%);height:42px;z-index:3}
html:not(.phone) #select #teamSize{display:flex!important;justify-content:center;min-width:0}
html:not(.phone) #select #teamSize[hidden]{visibility:hidden;pointer-events:none}
html:not(.phone) #select #selBack,html:not(.phone) #select #selRandom{width:100%;justify-content:center;margin:0}
/* Spectator mode has no team-size picker: keep its action in the reserved middle column. */
html:not(.phone) #select>.row:has(#selWatchR:not([hidden])) #teamSize{display:none!important}
html:not(.phone) #select>.row:has(#selWatchR:not([hidden])) #selRandom{grid-column:3;grid-row:1}
html:not(.phone) #select #selWatchR{box-sizing:border-box;grid-column:2;grid-row:1;width:100%;height:100%;min-width:0;margin:0;justify-content:center;white-space:nowrap}
html:not(.phone) #select #selPg0,html:not(.phone) #select #selPg1{width:min(40vw,36vh)!important;height:min(40vw,36vh)!important;max-width:none!important;top:148px!important;bottom:auto!important;z-index:0;pointer-events:none;opacity:.94}
html:not(.phone) #select #selPg0{left:1vw!important}html:not(.phone) #select #selPg1{right:1vw!important}
@media(max-width:900px){
 html:not(.phone) #select{padding:18px 16px 27px;grid-template-rows:112px minmax(0,1fr) 164px 38px;gap:10px}
 html:not(.phone) #select #grid{width:min(470px,100%);height:164px;gap:8px}
 html:not(.phone) #select #grid .card{flex-basis:calc((100% - 24px)/4);width:calc((100% - 24px)/4);height:78px;max-width:108px}
 html:not(.phone) #select #grid .card img{object-position:center 27%}
 html:not(.phone) #select .sel-mid{gap:14px}html:not(.phone) #select .sel-mid>div{width:49%;flex-basis:49%;padding:10px 12px;max-width:360px}
 html:not(.phone) #select #selPg0,html:not(.phone) #select #selPg1{width:min(44vw,36vh)!important;height:min(44vw,36vh)!important}
}
@media(max-height:620px){
 html:not(.phone) #select{padding:10px 16px 22px;grid-template-rows:86px minmax(0,1fr) 92px 32px;gap:7px}
 html:not(.phone) #select .sel-top{height:86px;gap:4px}html:not(.phone) #select #selTitle{font-size:26px}
 html:not(.phone) #select #grid{width:min(880px,100%);height:92px;flex-wrap:nowrap;gap:6px}
 html:not(.phone) #select #grid .card{flex-basis:calc((100% - 42px)/8);width:calc((100% - 42px)/8);height:88px;max-width:82px}
 html:not(.phone) #select .sel-mid>div{padding:7px 10px;max-height:100%;max-width:320px}
 html:not(.phone) #select .nameplate{font-size:23px}html:not(.phone) #select .moves{font-size:10px!important}
 html:not(.phone) #select .moves .stats{display:none}html:not(.phone) #select .cbseq{white-space:normal}
 html:not(.phone) #select #selPg0,html:not(.phone) #select #selPg1{top:102px!important;width:34vh!important;height:34vh!important}
 html:not(.phone) #select>.row:has(#selBack){height:32px;grid-template-columns:90px minmax(0,216px) 112px}
}

/* Phone portrait coordinates belong to the native layout: it places both images between the cards and the details panel. */
/* Keep the source phone layout, with two reserved card rows in both steps. */
html.phone #grid{grid-template-rows:repeat(2,calc(var(--cw)*4/3));align-content:center;min-height:calc(var(--cw)*8/3 + 5px)}
html.phone #teamSize{display:flex!important}html.phone #teamSize[hidden]{visibility:hidden;pointer-events:none}

/* One centered dynamic panel: no empty column for hidden classic arenas. */
#stagepick:not([hidden]){box-sizing:border-box;display:grid!important;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto auto minmax(0,1fr);align-items:center;justify-items:center;gap:clamp(12px,2.2vh,24px);padding:clamp(16px,3vh,32px) clamp(16px,3vw,40px);width:100%!important;height:100%!important;transform:none!important}
#stagepick>.sel-top{grid-row:1;text-align:center;justify-self:center;align-self:start;max-width:100%;margin:0}
#stagepick>div[style="flex:1"]{display:none!important}
#stagegrid,html.phone #stagegrid{box-sizing:border-box;grid-row:3;grid-template-columns:minmax(0,1fr)!important;width:min(880px,100%)!important;gap:0!important;margin:0!important;justify-self:center;align-self:center}
#stagegrid .sg-dyn{box-sizing:border-box;width:100%;padding:clamp(12px,1.8vw,22px)}
#stagegrid .sg-h{justify-content:center;text-align:center;margin:0 0 8px}
#stagegrid .sg-h i{display:none!important}
#stagegrid .sg-dyn .sg-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.5vw,16px)}
#stagegrid .sg-dyn .stagecard{min-height:clamp(98px,17vh,160px)!important;padding:16px 20px}
#stagegrid .sg-dyn .stagecard b{font-size:clamp(19px,2.1vw,28px);line-height:1.08;text-wrap:balance}
#stagegrid .sg-dyn .stagecard[data-s="mercato"]{background-image:linear-gradient(0deg,rgba(9,24,19,.90),rgba(20,45,30,.08)),url('assets/stages/place-cacilend-pano-v1.png')!important;background-position:center 63%!important}
#stagegrid .sg-dyn .stagecard[data-s="cantiere"]{background-image:linear-gradient(0deg,rgba(30,12,21,.90),rgba(60,25,18,.06)),url('assets/stages/place-skupstina-pano-v1.png')!important;background-position:center 55%!important}
#stagegrid .sg-dyn .stagecard[data-s="navigli"]{background-image:linear-gradient(0deg,rgba(5,27,36,.90),rgba(10,40,48,.06)),url('assets/stages/place-gazivode-pano-v1.png')!important;background-position:center 60%!important}
#stagegrid .sg-dyn .stagecard[data-s="papeete"]{background-image:linear-gradient(0deg,rgba(21,20,35,.90),rgba(50,30,22,.06)),url('assets/stages/place-jugoslavija-pano-v1.png')!important;background-position:center 42%!important}
#stagepick>.row{grid-row:4;justify-content:center;justify-self:center;gap:14px;margin:0;flex-wrap:wrap}
@media(max-height:500px){
 #stagepick:not([hidden]){padding:10px 16px;gap:8px}
 #stagepick .sel-top{gap:2px}#stagepick .sel-top h2{font-size:28px!important;line-height:1}
 #stagepick .sel-top .label{font-size:10px}
 #stagegrid{width:min(760px,100%)!important}
 #stagegrid .sg-dyn{padding:10px}#stagegrid .sg-h{margin-bottom:3px;gap:3px}#stagegrid .sg-h b{font-size:20px}
 #stagegrid .sg-h small{display:none}
 #stagegrid .sg-dyn .sg-cards{gap:8px}#stagegrid .sg-dyn .stagecard{min-height:62px!important;padding:9px 14px}
 #stagegrid .sg-dyn .stagecard b{font-size:18px}#stagegrid .sg-dyn .stagecard span{font-size:11px}
 #stagepick>.row .btn{font-size:15px;padding:8px 15px}
}
html.phone #stagegrid .sg-dyn .sg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
html.phone #stagegrid .sg-dyn .stagecard{min-height:clamp(58px,18vh,92px)!important;padding:9px 12px}
/* The reviewed watch label fits its half-width menu tile on narrow screens. */
#title #bWatch .pv-button-name{max-width:100%;white-space:normal;overflow-wrap:anywhere;font-size:clamp(15px,2.4vw,22px);line-height:1.05}
.pv-music-credit{margin:12px 0 0;font:500 12px/1.4 Kanit,Arial,sans-serif;color:#ded4f1}.pv-music-credit a{color:#ffe291;text-underline-offset:3px}