/* Game illustration set: final layer, after the existing jade/gold theme. */
:root { --realm-veil: linear-gradient(180deg, #061e2730, #041d256b 58%, #03181dac); }
:root[data-realm-period='night'] { --realm-veil: linear-gradient(180deg, #060e2320, #06162732 58%, #040e2085); }
html body .scene { background-image: none !important; background-color: #062321 !important; }
.realm-scene-art, .realm-scene-art img { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.realm-scene-art img { object-fit: cover; object-position: center 30%; }
html body .scene::before { z-index: 1; background: var(--realm-veil) !important; }
html body .scene::after { z-index: 2; background: linear-gradient(90deg, #03211d30, transparent 30%, transparent 80%, #03211d25) !important; }
.realm-banner-art, .realm-banner-art img { display: block; width: 100%; }
.realm-banner-art img { height: auto; aspect-ratio: 3 / 1; object-fit: contain; }
/* Wide screens: keep the entire illustration and darken only the text area. */
.hero.realm-hero { position: relative; isolation: isolate; overflow: hidden; border: 1px solid #e3b35a99; border-radius: 24px; padding: 0; margin-top: 28px; margin-bottom: 40px; background: #062321; text-align: left; }
.realm-hero > .realm-banner-art { position: absolute; inset: 0; z-index: -2; }
.realm-hero > .realm-banner-art img { height: 100%; object-fit: contain; object-position: right center; }
.realm-hero::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, #032520f2 0%, #032520d9 36%, #03252050 64%, transparent 80%); }
.realm-hero-copy { position: relative; width: 63%; padding: clamp(24px, 3vw, 46px); }
.hero.realm-hero h1 { font-size: clamp(2rem, 3.4vw, 3.4rem); overflow-wrap: anywhere; }
.hero.realm-hero .lead { font-size: 1rem; margin-inline: 0; max-width: 50ch; }
.hero.realm-hero .hero-line2 { font-size: clamp(1rem, 1.5vw, 1.3rem); }
.realm-hero .cta-row { justify-content: flex-start; flex-wrap: wrap; }
/* Portal banner: show full 3:1 image, then labels; no portrait crop of the dragon. */
html body .dashboard .hero-event { display: grid; }
html body .dashboard .float-card { display: flex; padding: 0; aspect-ratio: auto; transform: none; gap: 0; background: #062b27 !important; }
.dashboard .hello > div:first-child { padding: 20px; border-radius: 18px; background: linear-gradient(105deg, #062b25bf, #062b2533); }
.dashboard .float-card .realm-banner-art { flex: none; }
.realm-event-copy { display: grid; gap: 6px; position: relative; padding: 18px 70px 18px 18px; }
.realm-event-copy b { overflow-wrap: anywhere; }
.dashboard .float-card .play { bottom: 20px; }
@media (max-width: 980px) {
  html body .dashboard .hero-event { display: grid; max-width: 560px; width: 100%; justify-self: start; gap: 10px; }
  html body .dashboard .quote { text-align: left; }
}
@media (max-width: 980px) {
  .hero.realm-hero { border-radius: 18px; margin-top: 18px; margin-bottom: 28px; }
  .realm-hero > .realm-banner-art { position: relative; inset: auto; z-index: auto; }
  .realm-hero > .realm-banner-art img { height: auto; object-fit: contain; }
  .realm-hero::before { display: none; }
  .realm-hero-copy { width: 100%; padding: 24px 20px; background: linear-gradient(180deg, #0c3b33, #062520); }
  .hero.realm-hero h1 { font-size: clamp(1.8rem, 6.5vw, 2.6rem); }
  .hero.realm-hero .lead { font-size: .95rem; }
}
@media (orientation: portrait) { .realm-scene-art img { object-position: center top; } }
/* Keep solid readable surfaces when the user requests more contrast. */
@media (prefers-contrast: more), (prefers-reduced-transparency: reduce) {
  html body .scene::before { background: #041b24bb !important; }
}