/* RuffRush V21.13: Landscape-Spieloberflaeche, auch wenn das Handy hochkant ist. */
html,body{width:100%;height:100%;overflow:hidden;margin:0;overscroll-behavior:none}
#rrViewport{position:fixed;left:0;top:0;width:100vw;height:100dvh;overflow:hidden;isolation:isolate;background:#080a29;transform-origin:top left;touch-action:manipulation}
#rrViewport #lobby{width:100%;height:100%;}
#rrViewport #game,#rrViewport #modal,#rrViewport #toast{position:absolute}
#rrViewport #game{inset:0;width:100%;height:100%}
#rrViewport #modal{inset:0}
#rrViewport #toast{bottom:24px}
/* V21.15: Hochkant und Querformat sind beide spielbar.
   Die Ladeanzeige bleibt in beiden Ausrichtungen erhalten. */
@media (orientation:portrait) and (max-width:1024px){
 html,body,#rrViewport{width:100%;height:100%;height:100dvh;overflow:hidden}
 #rrViewport{left:0;top:0;transform:none;width:100vw;height:100dvh}
 #lobby{overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
 #lobby header{flex:0 0 auto;min-height:55px;height:auto;padding:8px 10px;gap:5px}
 #lobby .brand{font-size:19px}
 #lobby .brand small{font-size:6px;margin-top:2px}
 #lobby .wallet{gap:4px;flex-wrap:wrap;justify-content:flex-end}
 #lobby .wallet>span,#lobby .credits-wallet{padding:4px 6px;font-size:10px}
 #lobby #accountBtn{max-width:100px;font-size:9px;padding:5px 6px}
 #lobby #profileBtn{width:30px;height:30px}
 #lobby main{display:flex!important;flex-direction:column;gap:10px!important;
   padding:10px!important;overflow:visible!important;flex:0 0 auto;min-height:auto!important}
 #lobby main>nav{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));
   align-items:stretch;justify-content:stretch;gap:5px!important;
   height:auto!important;min-height:auto!important;padding:7px!important;order:0}
 #lobby main>nav button,#lobby main>nav a.contact-nav{min-height:42px!important;
   font-size:9px!important;padding:5px 2px!important;line-height:1.1!important;
   border-radius:9px!important;letter-spacing:0!important}
 #lobby main>.hero{order:1;display:block!important;flex:0 0 auto;
   width:100%;height:clamp(200px,38dvh,355px)!important;min-height:0!important;
   border-radius:17px}
 #lobby .hero-art{inset:0!important;width:100%!important;height:100%!important;
   min-height:0!important;opacity:1!important}
 #lobby .hero-label{bottom:5px!important;padding:4px 10px!important}
 #lobby .hero-label strong{font-size:23px!important}
 #lobby .hero-label small{display:none}
 #lobby main>.map-select{order:2;min-height:58px;padding:7px 12px;gap:8px}
 #lobby .map-select label{font-size:9px;margin:0 0 4px}
 #lobby .map-select select{font-size:12px;padding:6px}
 #lobby #mapPreview{width:46px;height:46px}
 #lobby main>.playdeck{order:3;display:flex!important;flex-direction:column;
   gap:10px!important;overflow:visible!important;min-height:auto!important;
   padding:12px!important}
 #lobby .playdeck>.online-options{padding:8px}
 #lobby .online-options label{font-size:11px}
 #lobby .online-options select{font-size:13px;min-height:38px}
 #lobby #agents{gap:6px;margin-top:8px}
 #lobby .agent{width:48px;height:52px}
 #lobby .agent span{font-size:20px}
 #lobby .mode-select{overflow:visible!important}
 #lobby .mode-buttons{display:grid!important;grid-template-columns:1fr 1fr;gap:7px}
 #lobby .mode-buttons button{min-height:43px;font-size:17px}
 #lobby #play{min-height:52px;font-size:17px}
 #lobby footer{order:4}
 #rrViewport #game{inset:0;width:100%;height:100%}
 #rrViewport #modal{inset:0;padding:8px}
 #rrViewport .modal{width:min(96vw,490px);max-height:88dvh;overflow:auto;padding:16px}
 #rrViewport .modal h2{font-size:29px}
 #rrViewport #cosmeticPicker{width:min(290px,calc(100vw - 24px))}
 body.touch .bottom-hud{position:absolute;inset:0;transform:none;
   display:block;pointer-events:none}
 body.touch .bottom-hud .vitals{position:absolute;top:68px;left:10px;
   width:118px;padding:7px;font-size:9px}
 body.touch .bottom-hud .abilities{position:absolute;bottom:120px;right:12px;
   gap:5px;pointer-events:auto}
 body.touch .abilities button{width:51px;min-width:51px;min-height:51px;padding:4px;font-size:17px}
 body.touch .abilities small{font-size:6px}
 body.touch .abilities span{font-size:8px}
 body.touch #joystick{left:max(12px,env(safe-area-inset-left));bottom:max(26px,env(safe-area-inset-bottom));width:104px;height:104px}
 body.touch #fireTouch{right:max(12px,env(safe-area-inset-right));bottom:max(32px,env(safe-area-inset-bottom));width:85px;height:85px}
 body.touch .hud{top:max(8px,env(safe-area-inset-top));left:8px;right:8px;gap:3px}
 body.touch .hud>div,body.touch .hud>button{padding:6px;font-size:10px}
 body.touch .hud strong{font-size:13px}
 body.touch #matchInfo{font-size:9px}
 body.touch #feed{top:130px;right:8px;max-width:140px;font-size:9px}
 #rrSplash .rr-splash-brand{font-size:clamp(40px,12vw,66px);margin-top:9dvh}
 #rrSplash .rr-splash-sub{font-size:9px;letter-spacing:2px}
 #rrSplash .rr-splash-bottom{width:85%;margin-bottom:10dvh}
}
/* Original RuffRush-Ladebild; bewusst keine Brawl-Stars-Grafiken. */
#rrSplash{position:absolute;inset:0;z-index:200;overflow:hidden;background:#0b0928;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;opacity:1;transition:opacity .45s ease;pointer-events:all}
#rrSplash.rr-fade{opacity:0;pointer-events:none}
#rrSplash[hidden]{display:none!important}
.rr-splash-bg{position:absolute;inset:0;background-image:linear-gradient(180deg,#0a082540 0%,transparent 45%,#0b0821cc 100%),url('loading-art.svg');background-position:center;background-size:cover;transform:scale(1.025)}
.rr-splash-brand{position:relative;z-index:1;margin-top:clamp(15px,5vh,38px);font-family:Impact,'Arial Black',sans-serif;font-weight:900;font-style:italic;font-size:clamp(40px,8vh,90px);letter-spacing:2px;line-height:.88;text-align:center;color:white;text-shadow:0 6px 0 #30114d,0 10px 10px #0b092e,3px 3px 0 #b85aeb}
.rr-splash-brand span{color:#dcff47}
.rr-splash-sub{position:relative;z-index:1;margin-top:10px;letter-spacing:4px;font-weight:900;font-size:clamp(8px,1.6vh,15px);text-shadow:0 2px 8px #000}
.rr-splash-bottom{position:relative;z-index:1;margin-top:auto;margin-bottom:clamp(17px,4vh,35px);width:min(72%,690px);display:flex;flex-direction:column;gap:7px;align-items:center}
.rr-splash-status{font-size:clamp(11px,2.2vh,18px);font-weight:900;letter-spacing:2px;text-shadow:0 2px 5px #000}
.rr-splash-track{height:clamp(14px,3vh,23px);width:100%;border:3px solid #f4d7ff;border-radius:9px;background:#2c1453;overflow:hidden;box-shadow:0 4px 0 #090821,0 0 15px #d76cf299}
.rr-splash-progress{display:block;height:100%;width:0%;border-radius:4px;background:linear-gradient(180deg,#fff9a1,#ffd33d 46%,#ef7d35);box-shadow:inset 0 2px 0 #fff7,0 0 15px #ffd73e;transition:width .1s linear}
.rr-splash-percent{font-weight:900;font-size:clamp(14px,2.6vh,21px);text-shadow:0 2px 5px #000}
@media (prefers-reduced-motion:reduce){#rrSplash,.rr-splash-progress{transition:none}}