/* Zeus Conquer — Storm Realm */
html {
    --z-body: 'Inter', 'Tajawal', system-ui, sans-serif;
    --realm-accent: var(--z-custom-accent, var(--z-accent));
    --realm-highlight: var(--z-custom-highlight, var(--z-detail));
    --realm-gradient: linear-gradient(112deg, var(--realm-highlight), var(--realm-accent));
    --realm-pad: clamp(1.1rem, 2.4vw, 2rem);
}
html[data-zues-type="arena"] { --z-body: 'Chakra Petch', 'Tajawal', system-ui, sans-serif; }
html[data-zues-type="tajawal"], html[lang="ar"] { --z-body: 'Tajawal', 'Inter', system-ui, sans-serif; }
html[data-zues-density="compact"] { --realm-pad: 1rem; }
html[data-zues-palette] {
    --font-body: var(--z-body);
    --neon-purple: var(--realm-accent);
    --neon-cyan: var(--realm-highlight);
    --neon-pink: var(--realm-highlight);
    --p-gradient: var(--realm-gradient);
}
html body, html[data-theme="light"] body {
    background: radial-gradient(ellipse at 50% 20%, rgba(var(--z-rgb), .08), transparent 55%), var(--z-page);
}
html .cyber-nav, html .cyber-nav.scrolled, html[data-theme="light"] .cyber-nav {
    background: var(--z-card);
    border-bottom: 1px solid var(--z-line);
    box-shadow: 0 10px 35px #0003;
}
.realm-wordmark {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    font-weight: 800;
    color: var(--z-ink);
    letter-spacing: -.04em;
}
html .cyber-nav .nav-link {
    position: relative;
    transition: color .2s, background-color .2s;
}
html .cyber-nav .nav-link:is(:hover, .active) {
    color: var(--realm-highlight) !important;
    background: rgba(var(--z-rgb), .08);
    border-radius: 8px;
}
.realm-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: #080e1a;
    border-bottom: 1px solid var(--z-line);
    color: #fff;
}
.realm-art, .realm-light { position: absolute; inset: 0; pointer-events: none; }
.realm-art {
    z-index: -2;
    background: #080e1a url('../img/zues-storm-warrior.jpg') center 36% / cover no-repeat;
    animation: realm-pan 16s ease-in-out infinite alternate;
}
.realm-light {
    z-index: -1;
    background:
        linear-gradient(90deg, #070c18f5 0%, #070c18bf 32%, #070c1833 70%),
        linear-gradient(0deg, #080e1a 0%, transparent 45%);
}
.realm-stage {
    min-height: clamp(530px, 76vh, 820px);
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 2rem;
    padding-block: clamp(4rem, 11vw, 9rem) 1.6rem;
}
.realm-intro { max-width: 610px; align-self: center; animation: realm-enter .65s ease-out both; }
.realm-intro .storm-kicker { color: #ffda96; }
.realm-intro h1 {
    font-size: clamp(3.35rem, 8.5vw, 8rem);
    max-width: 9ch;
    line-height: .94;
    letter-spacing: -.055em;
    color: #fff !important;
    text-shadow: 0 8px 38px #000a;
    margin: .18em 0 .22em;
}
.realm-intro .storm-lead { color: #e0e8fc; font-size: clamp(1rem, 2.3vw, 1.28rem); }
.realm-intro .storm-button:not(.storm-primary) { background: #0b1429e8; color: #fff; border-color: #a7bafa60; }
.realm-intro .storm-primary, html .storm-primary, html .btn-cyber:not(.btn-cyber-purple):not(.btn-cyber-danger) {
    background: var(--realm-gradient);
    color: #0a1020 !important;
    border-color: transparent;
}
.realm-stats {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    margin: 0;
    overflow: hidden;
    background: #0a1426ed;
    border: 1px solid #a7bafa55;
    border-radius: var(--z-radius);
    animation: realm-enter .65s .13s ease-out both;
}
.realm-stats > div { padding: clamp(.65rem, 2vw, 1.2rem) clamp(.65rem, 3vw, 2rem); }
.realm-stats > div + div { border-inline-start: 1px solid #a7bafa32; }
.realm-stats dt { color: #cfdbf2; font-size: .77rem; overflow-wrap: anywhere; }
.realm-stats dd {
    color: #fff;
    font: 800 clamp(1.25rem, 3vw, 2.4rem)/1.25 var(--font-heading);
    font-variant-numeric: tabular-nums;
    margin: 0;
}
html .cyber-panel, html[data-theme="light"] .cyber-panel {
    padding: var(--realm-pad);
    background: linear-gradient(145deg, rgba(var(--z-rgb), .075), transparent 55%), var(--z-card) !important;
    border-radius: var(--z-radius);
}
html .cyber-panel:hover { border-color: var(--realm-accent) !important; }
html .cyber-footer {
    background: linear-gradient(170deg, rgba(var(--z-rgb), .09), transparent 60%), var(--z-page);
    border-top: 1px solid var(--z-line);
}
html .storm-button, html .btn-cyber, html .btn-cyber-v2, html .btn-neon {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border-radius: var(--z-radius);
    transition: transform .18s ease, filter .2s, box-shadow .2s, border-color .2s;
}
html .storm-button::before, html .btn-cyber::before {
    position: absolute;
    content: '';
    inset: -40% auto -40% -50%;
    width: 28%;
    background: linear-gradient(90deg, transparent, #fff7, transparent);
    transform: skewX(-22deg);
    pointer-events: none;
    transition: left .6s ease;
}
html .storm-button:hover::before, html .btn-cyber:hover::before { left: 130%; }
html .storm-button:active, html .btn-cyber:active, html .btn-cyber-v2:active { transform: translateY(1px) scale(.97); }
html :is(a,button,input,select,textarea):focus-visible { outline: 2px solid var(--realm-highlight); outline-offset: 3px; }
.realm-ripple {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ffffff70;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: realm-ripple .52s ease-out both;
}
.realm-studio { padding-block: clamp(2rem, 6vw, 5rem); }
.realm-studio-header { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 1.75rem; }
.realm-studio-grid { display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); gap: 1.5rem; }
.realm-studio .form-label { font-weight: 700; }
.realm-studio .form-select, .realm-studio .form-control {
    min-height: 46px;
    background-color: var(--z-page);
    color: var(--z-ink);
    border-color: var(--z-line);
}
.realm-studio .form-control-color { width: 3.5rem; padding: .3rem; }
.realm-preview {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    min-height: 370px;
    padding: clamp(1rem, 4vw, 2rem);
    background: linear-gradient(0deg,#080e1af9,#080e1a30), url('../img/zues-storm-warrior.jpg') 65% center / cover;
    color: #fff;
    border: 1px solid var(--realm-accent);
    border-radius: var(--z-radius);
}
.realm-preview h2 { color: #fff !important; font-size: clamp(1.65rem, 4vw, 3rem); }
.realm-preview p { color: #e0e8fc; }
.realm-lock { max-width: 34rem; margin-inline: auto; }
.realm-studio .form-text { color: var(--z-muted); }
.realm-enter { animation: realm-enter .42s ease-out both; }
@keyframes realm-enter { from { opacity: 0; transform: translateY(13px); } to { opacity: 1; transform: translateY(0); } }
@keyframes realm-pan { from { transform: scale(1); } to { transform: scale(1.055) translateX(-.5%); } }
@keyframes realm-ripple { from { transform: translate(-50%,-50%) scale(1); opacity: .85; } to { transform: translate(-50%,-50%) scale(30); opacity: 0; } }
@media (max-width: 767px) {
    .realm-stage { min-height: 590px; padding-block-start: 9rem; gap: 1.25rem; }
    .realm-art { background-position: 65% 20%; }
    .realm-light { background: linear-gradient(0deg,#080e1a 2%,#080e1ac9 48%,#080e1a30 100%); }
    .realm-intro { align-self: end; }
    .realm-studio-grid { grid-template-columns: 1fr; }
    .realm-preview { min-height: 270px; }
}
@media (max-width: 420px) { .realm-intro .storm-button { width: 100%; } }
html[data-zues-motion="calm"] .realm-ripple { display: none; }
@media (prefers-reduced-motion: reduce) {
    .realm-art, .realm-intro, .realm-stats, .realm-enter, .realm-ripple { animation: none !important; }
    html .storm-button, html .btn-cyber, html .btn-cyber::before, html .storm-button::before { transition: none !important; }
    .realm-ripple { display: none; }
}

@media (max-width: 767px) {
    .storm-page .container > .row.g-5, .cyber-footer .container > .row.g-5 { --bs-gutter-x: 1.5rem; }
}
@media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation: realm-page-out .14s ease-in both; }
    ::view-transition-new(root) { animation: realm-page-in .26s ease-out both; }
    html[data-zues-motion="calm"]::view-transition-old(root),
    html[data-zues-motion="calm"]::view-transition-new(root) { animation-duration: 0s; }
}
@keyframes realm-page-out { to { opacity: 0; } }
@keyframes realm-page-in { from { opacity: .7; } to { opacity: 1; } }

/* Royal Court */
html .navbar-brand .realm-brand-logo { display:block; width:clamp(143px, 17vw, 205px); height:auto; object-fit:contain; filter:drop-shadow(0 0 9px #e1ac4b32); }
html .cyber-nav { padding-block:.36rem; }
.realm-hero { --realm-pointer-x: 78%; --realm-pointer-y: 32%; }
.realm-light::after {
    content:'';
    position:absolute;
    inset:0;
    background:radial-gradient(ellipse 320px 215px at var(--realm-pointer-x) var(--realm-pointer-y), #a8c8ff35, transparent);
    mix-blend-mode:screen;
}
.realm-title-rule {
    height:2px;
    width:min(230px,70%);
    background:linear-gradient(90deg,#ffda96,transparent);
    box-shadow:-10px 0 18px #ffba5a7a;
}
.realm-sparks { position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
.realm-sparks i {
    position:absolute; left:var(--spark-x); bottom:0; width:3px; height:3px;
    background:#ffd384; border-radius:50%; box-shadow:0 0 9px #ffc971;
    animation:realm-spark var(--spark-duration) var(--spark-delay) linear infinite;
    animation-play-state:paused;
}
.realm-in-view .realm-sparks i { animation-play-state:running; }
@keyframes realm-spark {
    0% { opacity:0; transform:translate(0,5vh); }
    25% { opacity:.75; }
    80% { opacity:.35; }
    100% { opacity:0; transform:translate(35px,-58vh); }
}
.realm-discover {
    display:grid;
    grid-template-columns:minmax(0,1.38fr) minmax(0,1fr);
    gap:clamp(1rem,3vw,2rem);
    align-items:stretch;
    padding-block:clamp(2rem,5vw,4.2rem) 0;
}
.realm-world-card {
    min-height:310px;
    position:relative;
    display:flex;
    align-items:flex-end;
    isolation:isolate;
    border-radius:var(--z-radius);
    border:1px solid var(--z-line);
    overflow:hidden;
    background:#0a1221;
    box-shadow:0 14px 40px #0003;
}
.realm-world-card img {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 37%; z-index:-2;
    transition:transform .75s cubic-bezier(.22,.7,.22,1);
}
.realm-world-card::after {
    content:''; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(0deg,#07101ff2 5%,#07101f99 35%,transparent 75%);
}
.realm-world-card:hover img, .realm-world-card:focus-within img { transform:scale(1.06); }
.realm-world-copy { padding:var(--realm-pad); }
.realm-world-copy h2 { color:#fff!important; font-size:clamp(1.7rem,3.8vw,3.3rem); }
.realm-world-copy .storm-button { color:#fff; background:#101b30; border-color:#91b7ff70; }
.realm-community h2 { font-size:clamp(1.6rem,3vw,2.5rem); }
.realm-social { display:grid; gap:.65rem; }
.realm-social-compact { display:flex; flex-wrap:wrap; }
.realm-channel {
    display:flex; align-items:center; gap:.65rem;
    min-height:48px; padding:.65rem .9rem;
    color:var(--z-ink); border:1px solid var(--z-line);
    border-radius:var(--z-radius); background:var(--z-page);
    text-decoration:none; font-weight:750;
    transition:transform .2s,border-color .2s,box-shadow .2s;
}
.realm-social-compact .realm-channel { min-width:48px; justify-content:center; }
.realm-channel i { font-size:1.2rem; }
.realm-channel-facebook i { color:#79aaff; }
.realm-channel-discord i { color:#a9afff; }
.realm-channel-whatsapp i { color:#58e79d; }
.realm-channel-arrow { margin-inline-start:auto; }
.realm-channel:hover { color:var(--z-ink); border-color:var(--realm-accent); box-shadow:0 6px 18px rgba(var(--z-rgb),.16); transform:translateY(-2px); }
.realm-channel:active { transform:scale(.98); }
.realm-facebook, .realm-social-settings {
    margin-top:1rem; padding:.8rem 1rem;
    border:1px solid var(--z-line); background:var(--z-page); border-radius:var(--z-radius);
}
.realm-facebook summary, .realm-social-settings summary { font-weight:750; color:var(--realm-accent); cursor:pointer; }
.realm-facebook[open] summary, .realm-social-settings[open] summary { margin-bottom:.85rem; }
.realm-facebook iframe { display:block; width:100%; height:320px; border:0; border-radius:8px; background:#fff; }
.realm-facebook a { display:inline-block; margin-top:.65rem; color:var(--realm-accent); }
.realm-studio-header {
    padding:var(--realm-pad);
    border:1px solid var(--z-line); border-radius:var(--z-radius);
    background:linear-gradient(110deg,var(--z-card),var(--z-soft));
    box-shadow:0 12px 35px #0002;
}
.realm-studio-preview { position:sticky; top:104px; align-self:start; }
.realm-preview { background-image:linear-gradient(0deg,#080e1af8,#080e1a33),url('../img/zues-imperial-gate.jpg'); }
.realm-preview-logo { width:min(100%,330px); height:auto; margin-bottom:.75rem; filter:drop-shadow(0 4px 12px #0008); }
.realm-presets { display:flex; flex-wrap:wrap; gap:.5rem; }
.realm-presets button {
    padding:.48rem .75rem; color:var(--z-ink); border:1px solid var(--z-line); background:var(--z-page);
    border-radius:var(--z-radius); font-weight:700;
}
.realm-presets button span { display:inline-block; width:11px; height:11px; margin-inline-end:.25rem; border-radius:50%; background:#91b7ff; }
.realm-presets [data-realm-preset="ember"] span { background:#ff9aab; }
.realm-presets [data-realm-preset="aurora"] span { background:#c6afff; }
.realm-presets button:hover, .realm-presets [aria-pressed="true"] { border-color:var(--realm-highlight); box-shadow:inset 0 0 12px rgba(var(--z-rgb),.13); }
@media(max-width:767px) {
    .realm-discover { grid-template-columns:minmax(0,1fr); }
    .realm-studio-preview { position:static; }
    .realm-world-card { min-height:260px; }
}
html[data-zues-motion="calm"] .realm-sparks, html[data-zues-motion="calm"] .realm-light::after { display:none; }
@media(prefers-reduced-motion:reduce) {
    .realm-sparks, .realm-light::after { display:none; }
    .realm-world-card img, .realm-channel { transition:none; transform:none!important; }
}

/* Homepage templates */
html[data-zues-template="arena"] .realm-hero { border-bottom:2px solid #6b9cf5; }
html[data-zues-template="arena"] .realm-intro h1 {
    text-shadow:0 5px 42px #020815, 0 0 48px #3264b13d;
}
html[data-zues-template="dynasty"] .realm-art {
    background-image:url('../img/zues-imperial-gate.jpg');
    background-position:center 29%;
}
html[data-zues-template="dynasty"] .realm-light {
    background:linear-gradient(0deg,#171008 3%,#120c0855 65%,#170f0c26),
        radial-gradient(ellipse at 50% 56%,#160e06c9,transparent 68%);
}
html[data-zues-template="dynasty"] .realm-stage {
    min-height:clamp(540px,76vh,800px);
    padding-block:clamp(5rem,12vw,10rem) 1.5rem;
    justify-items:center;
}
html[data-zues-template="dynasty"] .realm-intro { text-align:center; max-width:860px; }
html[data-zues-template="dynasty"] .realm-intro h1 {
    max-width:none;
    font-family:Georgia,'Tajawal',serif!important;
    font-weight:700;
    font-size:clamp(2.9rem,7.6vw,7rem);
    color:#ffe0a2!important;
    letter-spacing:-.045em;
}
html[data-zues-template="dynasty"] .realm-title-rule { margin-inline:auto; background:linear-gradient(90deg,transparent,#ffd684,transparent); }
html[data-zues-template="dynasty"] .storm-actions { justify-content:center; }
html[data-zues-template="dynasty"] .realm-stats {
    width:min(100%,760px);
    background:#1d130de8;
    border-color:#d8a35080;
    text-align:center;
}
html[data-zues-template="dynasty"] .realm-stats dd { color:#ffe0a2; }
html[data-zues-template="dynasty"] .realm-discover .realm-world-card { min-height:350px; }
html[data-zues-template="chronicle"] .realm-hero { background:#070b14; }
html[data-zues-template="chronicle"] .realm-art { opacity:.15; filter:saturate(.25); }
html[data-zues-template="chronicle"] .realm-light { background:linear-gradient(120deg,#060b15ed,#101e3450); }
html[data-zues-template="chronicle"] .realm-stage {
    min-height:0;
    padding-block:clamp(2rem,5vw,5rem) 1.6rem;
    grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    grid-template-rows:auto auto;
    align-items:center;
}
html[data-zues-template="chronicle"] .realm-intro h1 { font-size:clamp(2.85rem,6vw,6rem); }
html[data-zues-template="chronicle"] .realm-stats { grid-column:1/-1; }
.chronicle-art {
    isolation:isolate;
    position:relative;
    overflow:hidden;
    background:#0b1426;
    border-radius:var(--z-radius);
    border:1px solid #819aca7d;
    box-shadow:0 16px 50px #0205099e;
    animation:realm-enter .7s .12s both;
}
.chronicle-art img { display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }
.chronicle-art div { padding:.65rem 1rem; color:#d5e2ff; font-size:.78rem; font-weight:800; letter-spacing:.12em; }
.realm-template-options { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
.realm-template-option {
    padding:.45rem;
    min-width:0;
    font-size:.85rem;
    font-weight:700;
    color:var(--z-ink);
    background:var(--z-page);
    border:1px solid var(--z-line);
    border-radius:10px;
}
.realm-template-option:hover, .realm-template-option[aria-pressed="true"] { border-color:var(--realm-highlight); }
.realm-template-option > span { display:grid; height:46px; padding:6px; gap:3px; margin-bottom:.45rem; border-radius:5px; background:#152345; }
.realm-template-option i { display:block; width:44%; height:4px; background:#8cb6fa; border-radius:2px; }
.realm-template-option i:last-child { width:30%; background:#f4ce87; }
.realm-template-dynasty > span { justify-items:center; background:#3a2513; }
.realm-template-dynasty i { background:#f4ce87; }
.realm-template-chronicle > span { grid-template-columns:1fr 1fr; background:#101928; }
.realm-template-chronicle i:first-child { grid-row:span 2; height:100%; width:100%; }
html[data-zues-template="arena"] .realm-preview { background-image:linear-gradient(0deg,#080e1af8,#080e1a33),url('../img/zues-storm-warrior.jpg'); }
html[data-zues-template="dynasty"] .realm-preview { align-items:center; text-align:center; border-color:#e5b35d; }
html[data-zues-template="chronicle"] .realm-preview { align-items:start; justify-content:center; background-position:left center; box-shadow:inset 10px 0 #91b7ff; }

/* Gameplay screenshots */
.realm-gallery { padding-block:clamp(2rem,5vw,4rem) 0; }
.realm-gallery-heading { display:flex; align-items:end; justify-content:space-between; flex-wrap:wrap; gap:1rem; margin-bottom:1.2rem; }
.realm-gallery-controls { display:flex; align-items:center; gap:.55rem; }
.realm-gallery-controls .storm-button { min-height:44px; min-width:44px; padding:.45rem; }
.realm-gallery-stage {
    overflow:hidden;
    background:radial-gradient(ellipse at 50% 40%,#233453,#080d18 70%);
    border:1px solid var(--z-line);
    border-radius:var(--z-radius);
    box-shadow:0 20px 60px #0003;
}
.realm-gallery-slide { position:relative; margin:0; animation:gallery-arrive .45s ease-out both; }
.realm-gallery-slide a { display:block; }
.realm-gallery-slide img { display:block; width:100%; aspect-ratio:16/9; max-height:72vh; object-fit:contain; }
.realm-gallery-slide figcaption { padding:.65rem 1rem; color:#dbe7ff; border-top:1px solid #829dc640; background:#0b1326; overflow-wrap:anywhere; }
.realm-gallery-thumbs { display:flex; gap:.55rem; overflow-x:auto; padding:4px; margin-top:.75rem; }
.realm-gallery-thumbs button { flex:0 0 clamp(67px,10vw,120px); padding:2px; border:1px solid var(--z-line); background:var(--z-page); border-radius:7px; }
.realm-gallery-thumbs button[aria-pressed="true"] { border:2px solid var(--realm-highlight); }
.realm-gallery-thumbs img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:4px; }
.realm-gallery [hidden] { display:none!important; }
.realm-upload-form { display:grid; align-items:end; gap:.8rem; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr) auto; }
.realm-gallery-admin-grid { display:grid; gap:.85rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); }
.realm-gallery-admin-card { padding:.7rem; background:var(--z-page); border:1px solid var(--z-line); border-radius:9px; }
.realm-gallery-admin-card img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; margin-bottom:.5rem; border-radius:6px; }
.realm-gallery-admin-card summary { color:var(--realm-accent); cursor:pointer; }
@keyframes gallery-arrive {
    from { opacity:0; transform:translateX(1.5%) scale(.99); }
    to { opacity:1; transform:translateX(0) scale(1); }
}
@media (max-width: 767px) {
    html[data-zues-template="chronicle"] .realm-stage { grid-template-columns:minmax(0,1fr); }
    html[data-zues-template="dynasty"] .realm-stage { padding-block-start:5rem; }
    .realm-upload-form { grid-template-columns:minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .realm-gallery-slide, .chronicle-art { animation:none!important; }
}

html[data-theme="dark"][data-zues-template="dynasty"] {
    --z-page:#120e0b; --z-card:#221911; --z-soft:#302216; --z-line:#65482b;
    --z-ink:#fff0d4; --z-muted:#d9c4a5;
}
html[data-theme="dark"][data-zues-template="dynasty"][data-zues-palette="storm"] {
    --z-accent:#f0b66c; --z-detail:#ffe0a2; --z-rgb:240,182,108; --z-detail-rgb:255,224,162;
}
html[data-theme="dark"][data-zues-template="chronicle"] {
    --z-page:#090b15; --z-card:#151827; --z-soft:#202337; --z-line:#3d4260;
    --z-ink:#f4f1ff; --z-muted:#c0c2d9;
}
html[data-theme="dark"][data-zues-template="chronicle"][data-zues-palette="storm"] {
    --z-accent:#b8a4ff; --z-detail:#8bf3dd; --z-rgb:184,164,255; --z-detail-rgb:139,243,221;
}
html[data-zues-template="chronicle"] .realm-community,
html[data-zues-template="chronicle"] .realm-gallery-stage { border-inline-start:3px solid var(--realm-accent)!important; }

/* Royal showcase: compact gallery and cinematic motion */
.realm-gallery{max-width:1000px;padding-top:3rem}
.realm-gallery-heading h2{font-size:clamp(1.65rem,3vw,2.6rem);letter-spacing:-.035em}
.realm-gallery-subtitle{color:var(--z-muted);font-size:.87rem;margin:.4rem 0 0}
.realm-gallery-deck{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:12px;padding:12px;border:1px solid var(--z-line);border-radius:18px;background:linear-gradient(145deg,var(--z-soft),var(--z-page));box-shadow:0 15px 45px #0003}
.realm-gallery-stage{align-self:start;border-radius:10px;box-shadow:none;background:#080c15}
.realm-gallery-slide a{position:relative;overflow:hidden}
.realm-gallery-slide a::after{content:'↗  CINEMA MODE';position:absolute;bottom:14px;right:14px;padding:8px 12px;border:1px solid #ffffff45;border-radius:30px;background:#091321c9;color:#fff;font-size:10px;font-weight:800;letter-spacing:.12em;opacity:0;transform:translateY(5px);transition:.25s;pointer-events:none}
.realm-gallery-slide a:is(:hover,:focus-visible)::after{opacity:1;transform:none}
.realm-gallery-slide img{height:clamp(200px,29vw,350px);max-height:350px;aspect-ratio:auto;object-fit:contain;transition:filter .4s}
.realm-gallery-slide figcaption{font-size:.8rem;min-height:38px;background:#0d1627}
.realm-gallery-thumbs{display:flex;flex-direction:column;max-height:390px;overflow-y:auto;overflow-x:hidden;gap:9px;margin:0;padding:2px;scrollbar-width:thin}
.realm-gallery-thumbs button{flex:0 0 auto;width:100%;border:2px solid transparent;border-radius:9px;overflow:hidden;padding:0;opacity:.48;transition:opacity .25s,transform .25s,border-color .25s}
.realm-gallery-thumbs button:hover{opacity:1;transform:translateY(-2px)}
.realm-gallery-thumbs button[aria-pressed=true]{opacity:1;border:2px solid var(--realm-highlight);box-shadow:0 0 18px rgba(var(--z-rgb),.25)}
.realm-gallery-footer{display:flex;justify-content:space-between;gap:1rem;margin-top:12px;font-size:10px;color:var(--z-muted);letter-spacing:.08em}
.realm-gallery-deck:not(:has(.realm-gallery-thumbs)){grid-template-columns:minmax(0,1fr)}
.realm-cinema{width:min(1280px,96vw);max-width:96vw;max-height:94dvh;padding:0;border:1px solid #839bc16b;border-radius:16px;color:#eaf0ff;background:#080c15;box-shadow:0 30px 120px #000c}
.realm-cinema::backdrop{background:#030710e8;backdrop-filter:blur(14px)}
.realm-cinema[open]{animation:realm-cinema-enter .3s ease-out both}
.realm-cinema-bar,.realm-cinema-tools{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 18px;background:#101a2b}
.realm-cinema-bar strong{font-size:13px;letter-spacing:.14em}.realm-cinema-bar small{color:#9caccc;font-size:9px}
.realm-cinema button,.realm-cinema-tools a{border:1px solid #7998bc55;color:#e9f1ff;background:#1c2b42;border-radius:7px;padding:7px 12px;min-height:36px;text-decoration:none;font-size:12px}
.realm-cinema button:hover,.realm-cinema-tools a:hover{background:#2c4364}
.realm-cinema-screen{height:min(70dvh,760px);display:grid;place-items:center;overflow:auto;background:radial-gradient(ellipse,#1b293e,#080c15)}
.realm-cinema-screen img{max-width:100%;max-height:100%;object-fit:contain}
.realm-cinema-screen.is-zoomed{display:block}.realm-cinema-screen.is-zoomed img{max-width:none;max-height:none;width:150%;height:auto}
.realm-cinema-tools p{flex:1;font-size:12px;margin:0;overflow-wrap:anywhere}
@keyframes realm-cinema-enter{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.realm-energy{position:absolute;inset:0;pointer-events:none;z-index:-1;overflow:hidden;opacity:.6}
.realm-energy span{position:absolute;width:75%;height:1px;background:linear-gradient(90deg,transparent,var(--realm-accent),#fff,transparent);box-shadow:0 0 20px var(--realm-accent);top:24%;left:45%;transform:rotate(-38deg);animation:realm-comet 8s ease-in-out infinite}
.realm-energy span:nth-child(2){top:60%;left:55%;animation-delay:-3s;animation-duration:11s}.realm-energy span:nth-child(3){top:80%;left:70%;animation-delay:-5s;animation-duration:13s}
@keyframes realm-comet{0%,35%,100%{opacity:0;translate:15% -80px}45%{opacity:.65}65%{opacity:0;translate:-50% 160px}}
html[data-zues-template=arena] .realm-title-rule{height:3px;box-shadow:0 0 20px var(--realm-accent);animation:realm-rule 4s ease-in-out infinite}
html[data-zues-template=dynasty] .realm-energy{inset:8% 0 0;display:grid;place-items:center;opacity:.28}
html[data-zues-template=dynasty] .realm-energy span{width:500px;height:500px;border:1px solid #edc57c;left:auto;top:auto;border-radius:50%;background:repeating-conic-gradient(from 0deg,transparent 0deg 29deg,#eec583 29deg 30deg);box-shadow:inset 0 0 60px #ddb46724,0 0 80px #ddb46714;animation:realm-orbit 100s linear infinite}
html[data-zues-template=dynasty] .realm-energy span:nth-child(2){width:450px;height:450px;animation-direction:reverse;background:none;border-style:dashed}
html[data-zues-template=dynasty] .realm-energy span:nth-child(3){width:530px;height:530px;background:none;border-color:#edc57c55}
@keyframes realm-orbit{to{transform:rotate(360deg)}}
html[data-zues-template=chronicle] .realm-energy{background-image:linear-gradient(#b8a4ff0a 1px,transparent 1px),linear-gradient(90deg,#b8a4ff0a 1px,transparent 1px);background-size:60px 60px;mask-image:linear-gradient(transparent,#000);animation:realm-grid 16s linear infinite}
html[data-zues-template=chronicle] .realm-energy span{display:none}
@keyframes realm-grid{to{background-position:60px 60px}}
@keyframes realm-rule{50%{box-shadow:0 0 30px var(--realm-highlight);filter:brightness(1.3)}}
html .storm-primary{position:relative;overflow:hidden;box-shadow:0 5px 25px rgba(var(--z-rgb),.22)}
html .storm-primary::after{content:'';position:absolute;inset:-80% auto -80% -45%;width:25%;background:linear-gradient(90deg,transparent,#ffffff8a,transparent);transform:rotate(25deg);animation:realm-button-shine 6s ease-in-out infinite;pointer-events:none}
@keyframes realm-button-shine{0%,65%{left:-45%}90%,100%{left:135%}}
.realm-world-card,.chronicle-art{transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s;transform:perspective(1000px) rotateX(var(--tilt-y,0deg)) rotateY(var(--tilt-x,0deg))}
.realm-world-card:hover,.chronicle-art:hover{box-shadow:0 20px 60px rgba(var(--z-rgb),.22)}
.realm-stats{position:relative;overflow:hidden;backdrop-filter:blur(12px)}
.realm-stats div{transition:background .25s;position:relative}.realm-stats div:hover{background:rgba(var(--z-rgb),.1)}
.realm-stats dd{font-variant-numeric:tabular-nums}
.realm-channel{position:relative;overflow:hidden;border-radius:12px;min-height:54px;background:linear-gradient(120deg,var(--z-page),var(--z-soft))}
.realm-channel i{width:30px;text-align:center;transition:transform .3s}.realm-channel:hover i{transform:scale(1.2) rotate(-8deg)}
.realm-channel-unset{opacity:.55}.realm-channel-unset small{margin-inline-start:auto;font-size:10px}.realm-channel-unset:hover{transform:none;box-shadow:none}
.realm-facebook{background:var(--z-soft);border-radius:12px}.realm-facebook summary{font-size:.88rem}
.realm-reveal{transition:opacity .65s,translate .65s;opacity:0;translate:0 24px}.realm-reveal.is-revealed{opacity:1;translate:0 0}
@media(max-width:767px){.realm-gallery{padding-top:2rem}.realm-gallery-deck{grid-template-columns:minmax(0,1fr);padding:8px}.realm-gallery-thumbs{flex-direction:row;max-height:none;overflow-x:auto;overflow-y:hidden}.realm-gallery-thumbs button{width:76px}.realm-gallery-slide img{height:clamp(180px,50vw,290px)}.realm-gallery-footer span:last-child{display:none}.realm-cinema-tools{flex-wrap:wrap;padding:10px}.realm-cinema-tools p{order:5;flex-basis:100%}.realm-cinema-bar small{display:none}.realm-cinema-screen{height:65dvh}.realm-energy{opacity:.3}}
html[data-zues-motion=calm] .realm-energy,html[data-zues-motion=calm] .storm-primary::after{display:none}
html[data-zues-motion=calm] .realm-title-rule{animation:none!important}
@media(prefers-reduced-motion:reduce){.realm-energy,.storm-primary::after{display:none!important}.realm-title-rule{animation:none!important}.realm-reveal{opacity:1;translate:none;transition:none}.realm-world-card,.chronicle-art{transform:none!important}.realm-cinema[open]{animation:none}.realm-channel i{transition:none}}