/* DEVIL SEASON 22 — additive desktop layout; does not alter DB or board PHP. */
body:has(.dr-page) .dr-page{background:#080203!important;overflow-x:auto!important}
body:has(.dr-page) .dr-canvas{width:100%!important;max-width:1536px!important;min-width:1100px!important;aspect-ratio:1536/1024!important;height:auto!important;background-image:linear-gradient(180deg,rgba(9,1,4,.04),rgba(11,0,0,.18)),url('../assets/devil_scene_single_v24.jpg')!important;background-size:100% 100%!important;overflow:hidden!important}
body:has(.dr-page) .dr-top{height:5.4%!important;background:linear-gradient(180deg,#090204,#180406)!important;border-bottom:2px solid #f45016!important;box-shadow:0 0 15px #fb3d17!important;z-index:30!important}
body:has(.dr-page) .dr-logo{width:20%!important;flex:0 0 20%!important}
body:has(.dr-page) .dr-auth{width:15%!important;flex:0 0 15%!important}
body:has(.dr-page) .dr-menu{gap:0!important;justify-content:center!important;overflow:visible!important}
body:has(.dr-page) .dr-menu-item{height:100%!important;min-width:0!important;flex:1 1 0!important;position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important}
body:has(.dr-page) .dr-menu-item>a,body:has(.dr-page) .dr-menu>a{height:100%!important;display:flex!important;align-items:center!important;justify-content:center!important;white-space:nowrap!important;font-size:clamp(11px,1vw,16px)!important;padding:0 3px!important;text-shadow:0 1px 3px #000!important}
body:has(.dr-page) .dr-menu-sub{position:absolute!important;left:0!important;top:100%!important;min-width:145px!important;background:#170608!important;border:1px solid #f66b27!important;z-index:60!important;display:none!important;box-shadow:0 8px 20px #000!important}
body:has(.dr-page) .dr-menu-item:hover .dr-menu-sub,body:has(.dr-page) .dr-menu-item:focus-within .dr-menu-sub{display:block!important}
body:has(.dr-page) .dr-menu-sub a{display:block!important;height:auto!important;padding:11px!important;text-align:left!important;white-space:nowrap!important;font-size:13px!important}
body:has(.dr-page) .dr-hero-link{left:19.7%!important;top:5.5%!important;width:57.9%!important;height:29.2%!important;z-index:1!important}
body:has(.dr-page) .dr-rank{left:1.5%!important;top:9.8%!important;width:17.1%!important;height:43.2%!important;z-index:5!important}
body:has(.dr-page) .dr-gens{display:none!important}
body:has(.dr-page) .dr-online{display:block!important;left:1.5%!important;top:54%!important;width:17.1%!important;height:13.5%!important;background:#110609!important;border:1px solid #ff741f!important;box-shadow:0 0 9px #f04c14!important;text-align:center!important}
body:has(.dr-page) .dr-online h3{padding:10px 3px!important;font-size:clamp(13px,1.3vw,19px)!important;background:linear-gradient(#500d0c,#1c0305)!important}
body:has(.dr-page) .dr-online-number{font-size:clamp(22px,2.6vw,40px)!important;color:#ffe124!important;font-weight:900!important}
body:has(.dr-page) .dr-online p{font-size:12px!important}
body:has(.dr-page) .dr-features{left:20.1%!important;top:35.3%!important;width:57.1%!important;height:13.3%!important;gap:.5%!important}
body:has(.dr-page) .dr-features a{border:2px solid #ff8a19!important;border-radius:10px!important;box-shadow:0 0 8px #f95d0d,inset 0 0 9px #9b270e!important;background:linear-gradient(#2d080a,#090304)!important}
body:has(.dr-page) .dr-features b{font-size:clamp(12px,1.25vw,19px)!important;color:#ffe51b!important}
body:has(.dr-page) .dr-features small{font-size:clamp(9px,.75vw,12px)!important}
body:has(.dr-page) .dr-boards{left:20.1%!important;top:71.2%!important;width:57.1%!important;height:17.2%!important;gap:.6%!important;grid-template-columns:1fr 1fr 1.04fr!important}
body:has(.dr-page) .dr-panel{border-color:#f67b1d!important;box-shadow:0 0 8px rgba(251,80,10,.75)!important}
body:has(.dr-page) .dr-board h3{background:linear-gradient(180deg,#6a0d09,#1b0506)!important;color:#ffe22a!important}
body:has(.dr-page) .dr-quick{display:none!important}
body:has(.dr-page) .s22-gallery{position:absolute!important;left:20.1%!important;top:49.5%!important;width:57.1%!important;height:20.8%!important;z-index:4!important;background:rgba(13,3,6,.96)!important;padding:0!important;overflow:hidden!important}
.s22-section-head{height:19%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;padding:0 13px;background:linear-gradient(#650c0a,#260306);border-bottom:1px solid #fa6917;color:#ffe12c;font-size:clamp(12px,1.3vw,19px)}
.s22-section-head a{font-size:clamp(9px,.8vw,13px);color:#f5e3d4}
.s22-gallery-items{display:flex;gap:1.5%;padding:1.2% 2%;height:81%;box-sizing:border-box}
.s22-gallery-items>a{display:block;flex:1 1 0;min-width:0;border:1px solid #f8a328;border-radius:5px;overflow:hidden;background:#150609}
.s22-gallery-items img{display:block;width:100%;height:100%;object-fit:cover}
.s22-shot-placeholder,.s22-gallery-empty{height:100%;display:flex;align-items:center;justify-content:center;color:#e9bd67;width:100%}
body:has(.dr-page) .s22-launch,body:has(.dr-page) .s22-promo,body:has(.dr-page) .s22-event,body:has(.dr-page) .s22-status{position:absolute!important;box-sizing:border-box!important;background:linear-gradient(160deg,rgba(64,8,9,.98),rgba(9,3,6,.98))!important;border:2px solid #ff851a!important;border-radius:10px!important;color:#ffe5a3!important;z-index:5!important;text-align:center!important;padding:1.2%!important}
body:has(.dr-page) .s22-launch{left:78.2%!important;top:9.8%!important;width:20.2%!important;height:18%!important}
body:has(.dr-page) .s22-promo{left:78.2%!important;top:28.9%!important;width:20.2%!important;height:33.5%!important}
body:has(.dr-page) .s22-event{left:78.2%!important;top:63.7%!important;width:20.2%!important;height:24.7%!important}
body:has(.dr-page) .s22-status{left:1.5%!important;top:68.6%!important;width:17.1%!important;height:19.8%!important}
.s22-launch h3,.s22-promo h3,.s22-event h3,.s22-status h3{font-size:clamp(13px,1.4vw,22px);color:#ffe62a;margin:0 0 12px}
.s22-launch strong,.s22-event strong{font-size:clamp(15px,1.65vw,26px);color:#ffef42}
.s22-launch p,.s22-event p,.s22-status p{font-size:clamp(11px,.85vw,14px);line-height:1.5;margin:12px 0}
.s22-launch>a,.s22-event>a,.s22-status>a{display:inline-block;border:1px solid #ff9a1d;border-radius:18px;padding:7px 14px;color:#fff4c2;background:linear-gradient(#961907,#390806);font-size:clamp(10px,.9vw,14px)}
.s22-promo>a{display:flex;justify-content:space-between;align-items:center;text-align:left;padding:12px 8px;margin:8px 0;border:1px solid #ed6828;border-radius:8px;background:linear-gradient(100deg,#360b14,#120409);color:white;font-size:clamp(12px,1.1vw,17px);font-weight:bold}
.s22-promo>a span{color:#ffe234;font-size:clamp(9px,.75vw,12px)}
body:has(.dr-page) .s22-footer-links{position:absolute!important;left:7%!important;top:90.2%!important;width:86%!important;height:6.7%!important;display:grid!important;grid-template-columns:repeat(4,1fr)!important;z-index:5!important;background:linear-gradient(#290707,#0a0305)!important;border:2px solid #ff8d1e!important;border-radius:12px!important;box-shadow:0 0 13px #ef4514!important}
.s22-footer-links>a{min-width:0;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;border-right:1px solid #a84616;color:#ffe9c4;font-size:clamp(13px,1.4vw,21px)}
.s22-footer-links>a:last-child{border:0}.s22-footer-links small{display:block;width:100%;text-align:center;color:#cbbdb6;font-size:clamp(9px,.8vw,12px)}
@media(max-width:1100px){body:has(.dr-page) .dr-canvas{width:1100px!important;min-width:1100px!important}}


/* V2 visual refinement — matches reference proportions without fabricating server data. */
body:has(.dr-page) .dr-canvas{max-width:1536px!important;aspect-ratio:1536/1024!important;min-height:1024px!important;background-position:center top!important}
body:has(.dr-page) .dr-top{height:5.2%!important;box-shadow:0 2px 16px rgba(255,66,0,.9)!important}
/* Previous logo asset contains SEASON 21. Replace only its display with live SEASON 22 text. */
body:has(.dr-page) .dr-logo{background-image:none!important;background-color:transparent!important;font-family:Georgia,serif!important;font-size:clamp(19px,2.3vw,34px)!important;font-weight:900!important;color:#fff5d7!important;text-shadow:0 2px 1px #3c0000,0 0 6px #ff690b,0 0 15px #e32900!important;letter-spacing:-1.5px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;line-height:1!important}
body:has(.dr-page) .dr-logo small{display:block!important;font-family:Georgia,serif!important;color:#ffe239!important;font-size:clamp(11px,1.2vw,18px)!important;letter-spacing:2px!important;margin-top:3px!important;text-shadow:0 0 7px #fa3b00!important}
body:has(.dr-page) .dr-menu-item>a{border-right:1px solid rgba(253,125,43,.4)!important;font-weight:bold!important}
body:has(.dr-page) .dr-menu-item:hover>a{background:linear-gradient(transparent,rgba(166,28,4,.45))!important;color:#ffe359!important}
body:has(.dr-page) .dr-rank{top:9.4%!important;height:42.8%!important}
body:has(.dr-page) .dr-online{top:53.3%!important;height:13.4%!important}
body:has(.dr-page) .s22-status{top:67.7%!important;height:19.7%!important}
/* The source hero art contains lettering; panels start below its central slogan. */
body:has(.dr-page) .dr-features{top:37.0%!important;height:12.8%!important}
body:has(.dr-page) .dr-features a{border-radius:12px!important;box-shadow:0 0 10px rgba(255,90,0,.8),inset 0 0 14px rgba(210,48,0,.38)!important}
body:has(.dr-page) .dr-features span{font-size:clamp(20px,2.5vw,38px)!important}
body:has(.dr-page) .s22-gallery{top:50.8%!important;height:19.7%!important}
body:has(.dr-page) .dr-boards{top:71.5%!important;height:16.8%!important}
body:has(.dr-page) .s22-launch{top:9.4%!important;height:18.3%!important}
body:has(.dr-page) .s22-promo{top:28.7%!important;height:33.3%!important}
body:has(.dr-page) .s22-event{top:63%!important;height:24.4%!important}
body:has(.dr-page) .s22-footer-links{top:89.4%!important;height:7.7%!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
body:has(.dr-page) .s22-footer-links>a{flex-direction:column!important;flex-wrap:nowrap!important;gap:2px!important;line-height:1.1!important;text-align:center!important;font-size:clamp(12px,1.3vw,19px)!important}
body:has(.dr-page) .s22-footer-links small{font-size:clamp(9px,.8vw,12px)!important}
body:has(.dr-page) .s22-launch,body:has(.dr-page) .s22-promo,body:has(.dr-page) .s22-event,body:has(.dr-page) .s22-status{box-shadow:0 0 14px rgba(255,71,7,.65),inset 0 0 12px rgba(115,18,5,.35)!important}
body:has(.dr-page) .s22-promo>a{margin:6px 0!important;padding:9px 8px!important}
@media(max-width:1100px){body:has(.dr-page) .dr-canvas{min-height:733px!important}}

/* SEASON 22 reference art correction: only hero and logo artwork; all dynamic panels remain live. */
body:has(.dr-page) .dr-canvas {
 background-image:url('../assets/devil_background_v22.jpg')!important;
 background-position:center top!important; background-size:100% 100%!important;
 position:relative!important; isolation:isolate!important;
}
body:has(.dr-page) .dr-canvas::before {
 content:''; position:absolute; left:18.88%; top:5.08%; width:58.6%; height:30.1%;
 background:url('../assets/devil_season22_hero_reference.png') center top / 100% 100% no-repeat;
 z-index:0; pointer-events:none;
}
body:has(.dr-page) .dr-top{position:absolute!important;top:0!important;left:0!important;width:100%!important;z-index:40!important;}
body:has(.dr-page) .dr-logo {
 background: url('../assets/devil_season22_logo_reference.png') center center / contain no-repeat!important;
 color:transparent!important;font-size:0!important;text-shadow:none!important;letter-spacing:0!important;
}
body:has(.dr-page) .dr-logo small{display:none!important}
body:has(.dr-page) .dr-hero-link{z-index:2!important}
body:has(.dr-page) .dr-features{top:35.3%!important;height:13.3%!important}
body:has(.dr-page) .s22-gallery{top:49.5%!important;height:20.8%!important}
body:has(.dr-page) .dr-boards{top:71.2%!important;height:17.2%!important}