/* Original dragon-vault art direction and live ambient layers. */
.scene{background-image:url('/assets/realm-home-20260909-v1/dragon-vault.webp');background-size:cover;background-position:center top;max-height:1120px;transform:translate(var(--realm-x,0px),var(--realm-y,0px)) scale(1.018);transform-origin:center 30%;will-change:auto}
.scene::after{background:linear-gradient(90deg,#0c0912cc 0%,#0c09126b 33%,#0c091205 63%),linear-gradient(180deg,transparent 55%,#090b10 99%)}
.mq-head{min-height:760px;max-width:560px;gap:25px;padding:40px 0 70px;position:relative;z-index:3}
.mq-copy{width:100%;max-width:560px}.mq-copy .wordmark{display:none}
.realm-brand{display:block;width:min(100%,530px);height:210px;object-fit:contain;object-position:left center;margin:0 0 16px;mix-blend-mode:screen}
.hero-eyebrow{color:#d7bfe9;letter-spacing:.19em;font-size:10px;margin-bottom:18px}
.mq-copy h1{font-size:43px;line-height:1.16;max-width:18ch;letter-spacing:-.025em}.mq-copy h1 em{color:#dec18a}
.mq-copy .hero-lead{font-size:17px;line-height:1.8;max-width:42ch;color:#d8d0d9;margin-top:18px}
.realm-atmosphere{position:absolute;inset:0 0 auto;height:1050px;max-height:100%;pointer-events:none;overflow:hidden;z-index:1;mask-image:linear-gradient(#000 70%,transparent)}
#realm-fx{position:absolute;inset:0;width:100%;pointer-events:none;z-index:2}
.realm-fire{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 16%,#ff751729,transparent 24%),radial-gradient(ellipse at 82% 52%,#ffa03d1a,transparent 30%);mix-blend-mode:screen;opacity:.3}
.realm-magic{position:absolute;inset:0;background:radial-gradient(ellipse at 43% 73%,#7540ef30,transparent 25%);mix-blend-mode:screen;opacity:.35}
.realm-haze{position:absolute;left:-15%;bottom:7%;width:130%;height:33%;background:radial-gradient(ellipse at 35% 65%,#a898ba15,transparent 50%),radial-gradient(ellipse at 65% 35%,#b4c8b413,transparent 48%);filter:blur(12px);opacity:.6}
.ambient-running .realm-fire{animation:realm-firelight 5.7s ease-in-out infinite}.ambient-running .realm-magic{animation:realm-magiclight 8s ease-in-out infinite}.ambient-running .realm-haze{animation:realm-mist 24s ease-in-out infinite alternate}
@keyframes realm-firelight{0%,100%{opacity:.3}24%{opacity:.8}47%{opacity:.45}70%{opacity:.7}}
@keyframes realm-magiclight{0%,100%{opacity:.25}50%{opacity:.8}}
@keyframes realm-mist{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
.realm-motion{position:absolute;right:24px;top:20px;z-index:5;font:11px/1.2 Arial,sans-serif;letter-spacing:.05em;color:#d8cbb4;background:#100c16b3;border:1px solid #bca17055;border-radius:4px;padding:9px 12px;cursor:pointer}.realm-motion:hover{border-color:#dec18a}.realm-motion:focus-visible{outline:2px solid #dec18a;outline-offset:4px}
.theatres-head,.theatres,.banner{position:relative;z-index:3}
@media(min-width:1600px){.mq-head{min-height:790px}.scene{background-position:center 35%}}
@media(max-width:800px){.scene{background-size:auto 930px;background-position:63% top;max-height:1000px}.scene::after{background:linear-gradient(90deg,#0c09128c,#0c091240),linear-gradient(180deg,#090b101a 40%,#090b10 96%)}.mq-head{padding:60px 0 65px;min-height:750px;max-width:540px}.realm-brand{height:190px;margin-bottom:12px}.mq-copy h1{font-size:42px}.mq-copy .hero-lead{font-size:16px}.realm-motion{right:20px;top:14px}.realm-atmosphere{height:930px}}
@media(max-width:480px){.realm-brand{height:154px;width:100%;margin-bottom:12px}.mq-head{padding-top:62px;min-height:790px}.mq-copy h1{font-size:37px}.mq-copy .hero-lead{font-size:16px}.hero-eyebrow{font-size:9px;letter-spacing:.14em}.realm-motion{font-size:10px}.mq-trust{line-height:1.7}}
@media(prefers-reduced-motion:reduce){.scene{transform:none}.realm-fire,.realm-magic,.realm-haze{animation:none!important}#realm-fx{display:none}}

.mq-head{z-index:auto}.realm-brand,.hero-eyebrow,.mq-copy h1,.mq-copy .hero-lead,.mq-act{position:relative;z-index:3}


.mq-copy{position:relative}.mq-copy::before{content:'';position:absolute;top:0;left:-8%;width:116%;height:230px;background:radial-gradient(ellipse closest-side,#100916cc 10%,#10091665 67%,transparent);pointer-events:none}@media(max-width:480px){.mq-copy::before{height:170px}}
/* 2026-09-09 SEO: the eyebrow moved inside the H1 (index.html hero) so the
   heading carries "Play Tibia 8.6 on mobile". Appearance is unchanged --
   these pin the three inherited properties the H1 would otherwise impose:
   font-weight 900 (css/base.css), line-height 1.16 and the display
   text-shadow (v2.css .mq-copy h1). display:block restores the margin the
   old <div> had. */
.mq-copy h1 .hero-eyebrow{display:block;font-weight:400;line-height:1.65;text-shadow:none}
.mq-copy h1 .hero-display{display:block}