/* V22: One coordinate system. Original composite image is NOT used as background. */
html,body{margin:0!important;padding:0!important;overflow-x:hidden!important}
body:has(.dr-page){background:#0b0307!important}
body:has(.dr-page) .dr-page{width:100%!important;overflow-x:auto!important;background:#0b0307!important}
body:has(.dr-page) .dr-canvas{position:relative!important;box-sizing:border-box!important;width:100%!important;max-width:1672px!important;min-width:1100px!important;height:auto!important;aspect-ratio:1672/941!important;margin:0 auto!important;transform:none!important;left:auto!important;top:auto!important;overflow:hidden!important;background:#0b0307 url('../assets/devil_scene_single_v24.jpg') center center/100% 100% no-repeat!important}
body:has(.dr-page) .dr-canvas:before,body:has(.dr-page) .dr-canvas:after,body:has(.dr-page) .dr-page:before,body:has(.dr-page) .dr-page:after{content:none!important;display:none!important}
body:has(.dr-page) .dr-top{position:absolute!important;top:0!important;left:0!important;width:100%!important;height:8.29%!important;display:flex!important;z-index:10!important}
body:has(.dr-page) .dr-logo{width:18%!important;flex:0 0 18%!important;height:100%!important;background:url('../assets/devil_logo_reference_v6.png') center/contain no-repeat!important;font-size:0!important;letter-spacing:0!important}
body:has(.dr-page) .dr-logo small{display:none!important}
body:has(.dr-page) .dr-menu{flex:1 1 auto!important;min-width:0!important;display:flex!important;justify-content:space-around!important;align-items:center!important}
body:has(.dr-page) .dr-menu a{flex:1!important;min-width:0!important;text-align:center!important;padding:6px 2px!important;font-size:clamp(12px,1.1vw,18px)!important}
body:has(.dr-page) .dr-auth{width:16%!important;flex:0 0 16%!important;font-size:clamp(11px,1vw,16px)!important;gap:6px!important}
body:has(.dr-page) .dr-hero-link{position:absolute!important;left:17.94%!important;top:8.29%!important;width:68.48%!important;height:42.08%!important;background:url('../assets/devil_hero_reference_v6.jpg') center/100% 100% no-repeat!important;margin:0!important;z-index:1!important}
body:has(.dr-page) .dr-rank,body:has(.dr-page) .dr-gens,body:has(.dr-page) .dr-online,body:has(.dr-page) .dr-quick{position:absolute!important;box-sizing:border-box!important;transform:none!important;margin:0!important;z-index:4!important}
body:has(.dr-page) .dr-rank{left:.72%!important;top:11.16%!important;width:15.85%!important;height:35%!important;right:auto!important}
body:has(.dr-page) .dr-gens{left:.72%!important;top:47.3%!important;width:15.85%!important;height:44.1%!important;right:auto!important;background:linear-gradient(#080c11,#03070b)!important;border-color:#e6ad27!important}
body:has(.dr-page) .dr-gens h3{background:linear-gradient(#ffe57a,#b98206)!important;color:#1b0b00!important}
body:has(.dr-page) .dr-gens-status{height:65%!important;display:flex!important;align-items:center!important;justify-content:center!important;color:#f4d15d!important}
body:has(.dr-page) .dr-gens p{text-align:center!important;color:#f4d15d!important}
body:has(.dr-page) .dr-online{display:none!important}
body:has(.dr-page) .dr-quick{left:88.9%!important;right:auto!important;top:11.16%!important;width:10.35%!important;height:76.2%!important;display:flex!important;flex-direction:column!important;gap:1%!important}
body:has(.dr-page) .dr-quick a,body:has(.dr-page) .dr-quick a:first-child{box-sizing:border-box!important;flex:1 1 0!important;height:auto!important;min-height:0!important;margin:0!important;border-color:#ffb52e!important}
body:has(.dr-page) .dr-quick span{font-size:clamp(22px,2.8vw,42px)!important}
body:has(.dr-page) .dr-quick b{font-size:clamp(11px,1.1vw,17px)!important;text-align:center!important}
body:has(.dr-page) .dr-quick small{font-size:clamp(9px,.7vw,12px)!important}
body:has(.dr-page) .dr-features{position:absolute!important;left:18.2%!important;top:50.37%!important;width:68.1%!important;height:19.1%!important;display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:.8%!important;margin:0!important;z-index:3!important}
body:has(.dr-page) .dr-features a{min-width:0!important;padding:4px!important}
body:has(.dr-page) .dr-features span{font-size:clamp(22px,2.7vw,42px)!important}
body:has(.dr-page) .dr-features b{font-size:clamp(12px,1.4vw,22px)!important}
body:has(.dr-page) .dr-features small{font-size:clamp(9px,.85vw,14px)!important}
body:has(.dr-page) .dr-boards{position:absolute!important;left:18.2%!important;top:70.7%!important;width:68.1%!important;height:22.5%!important;display:grid!important;grid-template-columns:1fr 1fr 1.13fr!important;gap:.8%!important;margin:0!important;z-index:3!important}
body:has(.dr-page) .dr-rank h3,body:has(.dr-page) .dr-gens h3{height:44px!important;line-height:42px!important;font-size:clamp(13px,1.2vw,19px)!important}
body:has(.dr-page) .dr-rank-tabs{padding:7px!important}
body:has(.dr-page) .dr-rank li{height:clamp(19px,1.8vw,29px)!important;font-size:clamp(10px,.9vw,14px)!important}
body:has(.dr-page) .dr-rank .dr-empty{height:70px!important}
body:has(.dr-page) .dr-board h3{height:42px!important;line-height:40px!important}
@media(max-width:1100px){body:has(.dr-page) .dr-page{overflow-x:auto!important}body:has(.dr-page) .dr-canvas{width:1100px!important;min-width:1100px!important}}

/* V23 visual alignment: background fills all zones; image appears only once in hero. */
body:has(.dr-page) .dr-canvas{background-position:center top!important;background-size:100% 100%!important}
body:has(.dr-page) .dr-top{background:linear-gradient(180deg,rgba(9,3,5,.98),rgba(9,3,5,.96))!important}
body:has(.dr-page) .dr-logo{background-color:transparent!important}
body:has(.dr-page) .dr-hero-link{background-size:100% 100%!important}
body:has(.dr-page) .dr-rank,body:has(.dr-page) .dr-gens,body:has(.dr-page) .dr-quick{background-clip:padding-box!important}

/* V24: only one flattened background; clickable hero is transparent. */
body:has(.dr-page) .dr-canvas{background-image:url('../assets/devil_scene_single_v24.jpg')!important;background-size:100% 100%!important;background-repeat:no-repeat!important;background-position:center top!important;}
body:has(.dr-page) .dr-hero-link{background:none!important;box-shadow:none!important;border:0!important;}
body:has(.dr-page) .dr-hero-link a{display:block!important;width:100%!important;height:100%!important;}
body:has(.dr-page) .dr-logo{background-image:url('../assets/devil_logo_reference_v6.png')!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;}
body:has(.dr-page) .dr-top{background:rgba(8,2,5,.97)!important;}

/* V25: Prevent image duplication. The composite artwork is painted ONCE on canvas.
   Header/logo and interactive panels are independent, opaque foreground elements. */
body:has(.dr-page) .dr-canvas { isolation:isolate!important; background-image:url('../assets/devil_scene_single_v24.jpg')!important; background-repeat:no-repeat!important; background-size:100% 100%!important; }
body:has(.dr-page) .dr-top { z-index:20!important; background:#090407!important; }
body:has(.dr-page) .dr-logo { background-image:url('../assets/devil_logo_reference_v6.png')!important; background-color:#090407!important; background-size:contain!important; background-repeat:no-repeat!important; background-position:center center!important; }
body:has(.dr-page) .dr-hero-link { background:none!important; border:0!important; box-shadow:none!important; }
body:has(.dr-page) .dr-rank,body:has(.dr-page) .dr-gens { background-color:#080407!important; overflow:hidden!important; }
body:has(.dr-page) .dr-quick a { background:linear-gradient(180deg,#240b0c,#090306 80%)!important; overflow:hidden!important; }
body:has(.dr-page) .dr-features a { box-sizing:border-box!important; background:linear-gradient(180deg,#1d0b0d,#080305)!important; overflow:hidden!important; }
body:has(.dr-page) .dr-board { box-sizing:border-box!important; background:#0b0507!important; overflow:hidden!important; }
body:has(.dr-page) .dr-menu a { display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; height:100%!important; }
body:has(.dr-page) .dr-auth { display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; }


/* V26 - Admin-managed main navigation: single row and hover submenus. */
body:has(.dr-page) .dr-top{overflow:visible!important}
body:has(.dr-page) .dr-menu{
 display:flex!important;flex-wrap:nowrap!important;align-items:stretch!important;
 justify-content:space-between!important;height:100%!important;overflow:visible!important;
}
body:has(.dr-page) .dr-menu>.dr-menu-item{
 position:relative!important;display:flex!important;align-items:stretch!important;
 justify-content:center!important;flex:1 1 0!important;min-width:0!important;
 height:100%!important;white-space:nowrap!important;
}
body:has(.dr-page) .dr-menu>.dr-menu-item>a{
 display:flex!important;align-items:center!important;justify-content:center!important;
 flex:1 1 auto!important;min-width:0!important;width:100%!important;
 height:100%!important;padding:0 3px!important;margin:0!important;
 line-height:1.2!important;white-space:nowrap!important;
 font-size:clamp(10px,1.05vw,17px)!important;text-align:center!important;
 border-right:1px solid #5a1917!important;
}
body:has(.dr-page) .dr-menu>.dr-menu-item:hover>a,
body:has(.dr-page) .dr-menu>.dr-menu-item:focus-within>a{color:#ffd57d!important;background:#28080a!important}
body:has(.dr-page) .dr-menu .dr-menu-sub{
 display:none!important;position:absolute!important;top:100%!important;left:0!important;
 width:max-content!important;min-width:100%!important;max-width:260px!important;
 height:auto!important;z-index:100!important;padding:5px 0!important;
 background:#13070a!important;border:1px solid #a92d20!important;
 box-shadow:0 8px 20px rgba(0,0,0,.85)!important;
}
body:has(.dr-page) .dr-menu>.dr-menu-item:hover>.dr-menu-sub,
body:has(.dr-page) .dr-menu>.dr-menu-item:focus-within>.dr-menu-sub{display:block!important}
body:has(.dr-page) .dr-menu .dr-menu-sub>a{
 display:block!important;box-sizing:border-box!important;width:100%!important;
 height:auto!important;min-height:37px!important;padding:10px 13px!important;
 margin:0!important;border:0!important;border-bottom:1px solid #352022!important;
 font-size:13px!important;font-weight:normal!important;line-height:1.4!important;
 text-align:left!important;white-space:nowrap!important;color:#eee!important;
}
body:has(.dr-page) .dr-menu .dr-menu-sub>a:last-child{border-bottom:0!important}
body:has(.dr-page) .dr-menu .dr-menu-sub>a:hover,
body:has(.dr-page) .dr-menu .dr-menu-sub>a:focus{background:#64130f!important;color:#ffe4ad!important}
/* Narrow viewport retains the existing 1100px canvas horizontal scroll. */
@media(max-width:1200px){
 body:has(.dr-page) .dr-menu>.dr-menu-item>a{font-size:12px!important;padding:0 2px!important}
}