/* MU Drakon · illustrated realm. Presentation only; no game/data rules. */
:root {
  --realm-fortress: url("img/drakon/realm/fortress-1672.webp");
  --realm-heroes: url("img/drakon/realm/heroes-1672.webp");
  --realm-edge: #b78860;
}
.bg-layer {
  background-image: var(--realm-fortress);
  background-position: center top;
  filter: saturate(.92) brightness(.7);
  opacity: .55;
}
.bg-overlay { background: linear-gradient(180deg, #0a0e113d, #0a0e11d9 1050px, #0a0e11 1800px); }
.topbar { box-shadow: 0 8px 34px #060b0f80; }
.topbar::after { background: linear-gradient(90deg, transparent, #d4a061 25%, #efcc9b 50%, #d4a061 75%, transparent); }
.hero { border-color: var(--realm-edge); box-shadow: 0 24px 80px #04080b99, 0 0 45px #b9926312; }
.hero__scene img { object-position: 65% center; }
.hero::after { background: linear-gradient(90deg, #0a0e12f5, #0a0e12c7 32%, #0a0e1247 54%, transparent 80%), linear-gradient(0deg, #0b1116b3, transparent 35%); }
.hero__content { width: 49%; }
.hero__eyebrow { color: #f8d9b5; }
.hero__title-primary, .hero__title-secondary { color: #ffe5bc; text-shadow: 0 3px 0 #68402c, 0 0 34px #e9a86c30, 0 8px 28px #000b; }
.hero__tagline { color: #efeae4; }
.hero__corner { opacity: 1; border-color: #e8ba81; }
.realm-strip { background: linear-gradient(100deg, #392d27, #161c21 45%, #352b26); border-color: var(--realm-edge); }
.realm-strip strong { color: #f9d5a4; }
.realm-strip__group > span { box-shadow: inset 0 1px #f3c38b15; }
.realm-effects-toggle {
  position: absolute; z-index: 4; right: 18px; bottom: 18px;
  min-height: 44px; padding: 8px 14px; border: 1px solid #a7836680;
  border-radius: 4px; background: #0d1318e6; color: #ebd8bc;
  font: 600 12px/1.3 var(--font-ui); cursor: pointer;
}
.realm-effects-toggle:hover { border-color: #f0c98d; background: #322823; }
.realm-effects-toggle:focus-visible { outline: 2px solid #ffddb1; outline-offset: 4px; }
.realm-effects-toggle[disabled] { cursor: default; color: #c7ced4; }
.realm-sparks { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.realm-sparks i { position: absolute; bottom: 8%; left: 63%; width: 3px; height: 3px; border-radius: 50%; background: #ffe1a6; box-shadow: 0 0 11px 3px #ee9d6b80; opacity: 0; }
.realm-sparks i:nth-child(2) { left: 77%; bottom: 18%; animation-delay: -2s !important; }
.realm-sparks i:nth-child(3) { left: 89%; bottom: 4%; animation-delay: -4s !important; }
.realm-sparks i:nth-child(4) { left: 52%; bottom: 20%; animation-delay: -6s !important; }
.realm-light { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: radial-gradient(400px circle at var(--realm-x,75%) var(--realm-y,40%), #ffc68a15, transparent 80%); transition: opacity .3s; }
.hero:hover .realm-light { opacity: 1; }
.hslider, .promo-box, .class-card, .download-card { box-shadow: 0 12px 30px #060b103d; }
.promo-box { min-height: 184px; border-color: #9a695a80; }
.promo-box:last-child::before { background-image: linear-gradient(90deg,#0e171ee8,#0e171e54), var(--realm-fortress); }
.promo-box:nth-child(2)::before { background-position: 87% center; }
.promo-box__icon { box-shadow: inset 0 1px #f5cc9233; }
.section-head h2::before { border-color: #ecc08b; background: #b88e5a; box-shadow: 0 0 14px #d4a06180, 0 0 0 4px #d5b08612; }
.classes-view > .section-head, .events-view > .section-head, .chaos-view > .section-head {
  min-height: 154px; padding: 28px 32px; border: 1px solid #ad805a66; border-radius: 7px;
  background: linear-gradient(90deg,#101920ed,#10192099 48%,#1019202b), var(--realm-fortress) center 43% / cover;
}
.classes-view > .section-head { background-position: center 58%; }
.chaos-view > .section-head { background-image: linear-gradient(90deg,#101920ed,#10192099 48%,#1019202b),url("img/drakon/gamer/drakon-arsenal.webp"); }
.classes-view > .section-head h2, .events-view > .section-head h2, .chaos-view > .section-head h2 { color: #ffdfb7; text-shadow: 0 2px 15px #04070a; }
.classes-view > .section-head .section-head__hint, .events-view > .section-head .section-head__hint, .chaos-view > .section-head .section-head__hint { color: #d4dee6; }
.class-card, .class-card:first-child { background: linear-gradient(0deg,#0e1419 12%,#0e151b85 68%,#0f182066),var(--realm-fortress) 65% center / cover; }
.class-card::before { background: radial-gradient(ellipse at 50% 44%,#92b3ce36,transparent 70%); }
.class-card:focus-within { border-color: #e4b37e; }
.killer-view--podium { background-image: linear-gradient(90deg,#0e1419e8,#0e14196e),var(--realm-fortress); }
.ranking-view { background: linear-gradient(120deg,#161f26f2,#10161bea),var(--realm-fortress) right top / cover; }
.benefit-card--vip { background: linear-gradient(130deg,#392e29f0,#131b21eb),var(--realm-fortress) right top / cover; }
.download-card { border-color: #bd926a; background-image: linear-gradient(90deg,#0c1115f5,#0c1115b8 45%,#0c11152b),var(--realm-fortress); background-position: center; }
.download-card__body { max-width: 610px; }
.footer { background: linear-gradient(180deg,#161c21e8,#0d1217f5),var(--realm-fortress) center 62% / cover; }
.mk-head, .ws-head { border-color: #b18761; box-shadow: 0 12px 42px #04090c66; }
.cs-hero { background-image: linear-gradient(90deg,#0c1116e8,#0c1116a6 55%,#0c11164d),var(--realm-fortress); }
.pf-hero { background-image: linear-gradient(90deg,#141b21f5,#141b21c9),var(--realm-heroes); }
.page-svfast .bg-layer { background-image: var(--realm-heroes); }
.page-minijuegos .arcade-heading { padding: 26px 30px; border: 1px solid #b7886066; border-radius: 8px; background: linear-gradient(90deg,#11131af5,#11131abc 65%,#11131a4d),var(--realm-fortress) center 45% / cover; }
.page-minijuegos .arcade-heading h1 { color: #ffe0b2; }
.page-minijuegos .arcade-heading p { color: #d0d8de; }
@media (hover:hover) and (pointer:fine) {
  .promo-box:hover, .class-card:hover { border-color: #edbe88; box-shadow: 0 10px 35px #bb9a722b, inset 0 1px #edbe8833; }
  .mk-card:hover, .ws-item:hover, .lm-card:hover { border-color: #d2a66b; box-shadow: 0 5px 25px #c0a17c20; }
}
@media (prefers-reduced-motion:no-preference) {
  html:not(.drakon-effects-off) .hero.realm-in-view .realm-sparks i { animation: realm-ember 8s linear infinite; }
  html:not(.drakon-effects-off) .hero.realm-in-view .hero__scene img { animation: realm-arrive 4s ease-out both; }
  html:not(.drakon-effects-off) .realm-enter { animation: realm-reveal .6s ease-out both; }
}
@keyframes realm-ember { 0% { opacity:0; transform:translate(0,0); } 20% {opacity:.8;} 85% {opacity:.4;} 100% {opacity:0;transform:translate(-35px,-210px);} }
@keyframes realm-arrive { from { transform:scale(1.045); } to { transform:scale(1); } }
@keyframes realm-reveal { from { filter:brightness(.7); } to { filter:brightness(1); } }
html.drakon-effects-off .realm-sparks, html.drakon-effects-off .realm-light,
html.drakon-effects-off .embers, html.drakon-effects-off .mouse-trail-layer { display:none; }
html.drakon-effects-off .hero__scene img, html.drakon-effects-off .realm-enter { animation:none !important; }
html.realm-paused .realm-sparks i { animation-play-state:paused !important; }
@media(max-width:700px) {
  :root { --realm-fortress:url("img/drakon/realm/fortress-800.webp"); --realm-heroes:url("img/drakon/realm/heroes-800.webp"); }
  .hero { min-height:650px; padding:30px 22px 70px; }
  .hero__scene { height:390px; }
  .hero__scene img { object-position:76% top; }
  .hero::after { background:linear-gradient(0deg,#0d1216 0%,#0d1216 38%,#0d1216e6 49%,#0d12161a 82%); }
  .hero__content { width:100%; }
  .realm-effects-toggle { right:18px; bottom:14px; min-height:40px; }
  .classes-view > .section-head, .events-view > .section-head, .chaos-view > .section-head { padding:24px 18px; min-height:140px; background-position:70% center; }
  .classes-view > .section-head h2, .events-view > .section-head h2, .chaos-view > .section-head h2 { font-size:27px; }
  .promo-box { min-height:132px; }
  .page-minijuegos .arcade-heading { padding:22px 18px; flex-wrap:wrap; }
  .realm-light, .realm-sparks { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .realm-sparks, .realm-light { display:none; }
  .realm-enter, .hero__scene img { animation:none !important; }
}

.hero__title .drakon-wordmark{display:block;width:min(100%,350px);height:auto;filter:drop-shadow(0 4px 10px #06090d)}
@media(max-width:700px){.hero__title .drakon-wordmark{width:min(72vw,260px)}}