/* Original two-continent scene; existing portal forms and data stay intact. */
body.magic-of-dragons { --home-bg:#0b0b0e; --home-panel:rgba(13,14,17,.94); --home-line:rgba(186,160,109,.25); --home-cyan:#b8d4dc; }
.magic-of-dragons::before,.magic-of-dragons::after,.magic-of-dragons .main-container::before,.magic-of-dragons .main-container::after { display:none!important; }
.mod-world { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:0; background:#0b0b0e; }
.mod-world-art { position:absolute; inset:0; background:linear-gradient(180deg,transparent 5%,rgba(9,10,12,.12) 35%,rgba(9,10,12,.78) 100%),url('/images/magic-of-dragons/two-continents-v1.png') center top / max(1280px,100vw) auto no-repeat; }
.mod-world-effects { position:absolute; inset:0; width:100%; height:100%; }
.magic-of-dragons .main-container { width:min(1180px,calc(100% - 80px))!important; padding-top:0!important; }
.magic-of-dragons .game-header { display:flex!important; flex-direction:column; justify-content:flex-end; min-height:400px; padding:270px 0 22px!important; gap:8px; text-align:center; }
.magic-of-dragons .game-header::before { display:none; }
.magic-of-dragons .hero-copy { order:1; max-width:600px; }
.magic-of-dragons .hero-copy h1 { font:700 22px/1.25 Georgia,serif; margin:5px 0; color:#ffe3a5; }
.magic-of-dragons .hero-kicker { padding:0; min-height:20px; border:0; background:none; color:#ead19d; font-size:10px; }
.magic-of-dragons .hero-copy p { max-width:none; margin:0; font-size:13px; color:#e1e3e3; }
.magic-of-dragons .hero-status { order:2; max-width:none; width:auto!important; flex-direction:row!important; justify-content:center; gap:0; }
.magic-of-dragons .hero-status a { width:auto!important; background:none; border:0; border-radius:0; min-height:34px; font-size:11px; padding:0 14px; }
.magic-of-dragons .hero-status a+a { border-left:1px solid #b79a5c55; }
.magic-of-dragons .game-layout { grid-template-columns:minmax(0,1fr) 300px!important; gap:20px!important; }
.magic-of-dragons .main-content { background:none!important; border:0!important; box-shadow:none!important; padding:0!important; }
.magic-of-dragons .first-battle-showcase { padding:20px 0 24px!important; background:none!important; border:0!important; border-bottom:1px solid #a580454d!important; border-radius:0!important; box-shadow:none!important; }
.magic-of-dragons .first-battle-showcase::before { display:none; }
.magic-of-dragons .first-battle-showcase h2 { font-size:28px; }
.magic-of-dragons .first-battle-showcase p { color:#d0d2d2; }
.magic-of-dragons .first-battle-showcase__actions { flex-wrap:wrap; }
.magic-of-dragons .first-battle-link:not(.first-battle-link--hot) { color:#c6e1e7; }
.magic-of-dragons .content-section { background:none!important; border:0!important; box-shadow:none!important; padding:0!important; }
.magic-of-dragons .news-item { background:rgba(12,13,16,.95)!important; }
.magic-of-dragons .dwar-intro { background:rgba(12,13,16,.94)!important; border-radius:0!important; }
.magic-of-dragons .status-pulse { color:#e8c886; }
.magic-of-dragons .status-pulse::before { background:#d5b16a; box-shadow:none; animation:none; }
.magic-of-dragons .site-footer { position:relative; z-index:1; background:#0b0b0ef2; }
.mod-banner { position:absolute; top:205px; width:38px; height:108px; border-top:4px solid #a89160; transform-origin:50% 0; animation:mod-banner-wave 4.5s ease-in-out infinite alternate; clip-path:polygon(0 0,100% 0,100% 100%,50% 85%,0 100%); box-shadow:inset 5px 0 10px #0007; }
.mod-banner::after { content:''; position:absolute; width:12px; height:22px; top:25px; left:13px; background:#d9bf83; clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.mod-banner-human { left:5%; background:linear-gradient(90deg,#122c42,#38637b 45%,#112b42); }
.mod-banner-magmar { right:5%; background:linear-gradient(90deg,#4a1219,#8a2b28 45%,#3b0c13); animation-delay:-2s; }
.mod-motion-toggle { position:fixed; z-index:5; right:14px; bottom:14px; width:36px; height:36px; display:grid; place-items:center; border:1px solid #a88e5e; border-radius:4px; background:#141417ed; color:#e5c88a; font:18px/1 sans-serif; cursor:pointer; }
.mod-motion-toggle[hidden] { display:none; }
body.mod-world-paused .mod-banner { animation-play-state:paused; }
@keyframes mod-banner-wave { from { transform:perspective(180px) rotateY(-12deg) skewX(-3deg); } to { transform:perspective(180px) rotateY(15deg) skewX(4deg); } }
@media(min-width:1700px) { .magic-of-dragons .game-header { min-height:460px; padding-top:330px!important; } .mod-banner { top:260px; } }
@media(max-width:1000px) { .magic-of-dragons .main-container { width:calc(100% - 40px)!important; } .magic-of-dragons .game-layout { grid-template-columns:minmax(0,1fr) 280px!important; gap:14px!important; } .mod-banner { width:25px; height:75px; top:180px; } .mod-banner::after { left:8px; width:9px; height:16px; } }
@media(max-width:768px) {
    .mod-world-art { background-size:auto,100% auto; background-position:center top; }
    .magic-of-dragons .main-container { width:calc(100% - 24px)!important; padding-top:0!important; }
    .magic-of-dragons .game-header { min-height:255px; padding:145px 0 18px!important; gap:6px; }
    .magic-of-dragons .hero-copy h1 { font-size:20px; }
    .magic-of-dragons .hero-copy p { font-size:12px; max-width:32ch; }
    .magic-of-dragons .hero-status { display:flex!important; }
    .magic-of-dragons .hero-status a { font-size:10px; padding:0 10px; }
    .magic-of-dragons .mobile-menu-toggle { position:absolute; display:block; top:15px; right:0; }
    .magic-of-dragons .game-layout { display:flex!important; flex-direction:column; }
    .magic-of-dragons .main-content { width:100%; }
    .magic-of-dragons .left-sidebar { width:100%; order:2; position:static!important; }
    .magic-of-dragons .mobile-primary-actions { margin:0 0 12px!important; }
    .magic-of-dragons .first-battle-showcase h2 { font-size:25px; }
    .mod-banner { top:85px; width:18px; height:47px; }
    .mod-banner::after { left:6px; top:10px; width:6px; height:12px; }
    .mod-banner-human { left:5%; } .mod-banner-magmar { right:5%; }
}
@media(prefers-reduced-motion:reduce) { .mod-banner { animation:none; } }
