/* =========================================================
   THEME: Royal Emerald  (slug: royal-emerald)
   Luxe & regal — deep emerald panels + gold accents,
   fine gold hairline frames, ornamental double-borders,
   serif display, faint damask sheen. Calm, expensive, dark green + gold.
   Loads AFTER style.css and overrides it. Mobile-first.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Playfair+Display:wght@600;700&display=swap');

/* ---------------------------------------------------------
   1) PALETTE — override :root custom properties
   --------------------------------------------------------- */
:root,
body.theme-royal-emerald {
    --bg-0: #03140f;          /* deepest forest */
    --bg-1: #06231c;          /* emerald base   */
    --bg-2: #0a2e24;          /* emerald panel  */

    --panel: rgba(8, 41, 32, 0.78);
    --panel-solid: #0a2e24;

    --line: rgba(236, 197, 107, 0.26);
    --line-strong: rgba(236, 197, 107, 0.62);

    --gold: #ecc56b;
    --gold-2: #cfa04a;
    --gold-soft: #f6e6bd;

    --text: #f1ecdc;          /* warm parchment for crisp Burmese */
    --muted: #b8c8b2;         /* soft sage */

    --good: #7fe3a6;
    --warn: #ff9a9a;
    --mixed: #f0cf86;
    --neutral: #a8c5b4;

    --radius: 16px;
    --shadow: 0 14px 40px rgba(0, 0, 0, 0.55);

    --font-mm: "Noto Sans Myanmar", "Padauk", system-ui, sans-serif;
    --font-display: "Cormorant Garamond", "Playfair Display", "Cinzel", serif;

    /* theme-local helpers */
    --re-emerald-1: #06231c;
    --re-emerald-2: #0a2e24;
    --re-emerald-3: #0f3a2d;
    --re-gold-line: rgba(236, 197, 107, 0.55);
}

/* ---------------------------------------------------------
   2) BODY BACKGROUND — the biggest change
   Deep emerald with gold-tinted glow + faint damask sheen.
   --------------------------------------------------------- */
body.theme-royal-emerald {
    color: var(--text);
    background:
        /* faint damask / diamond lattice sheen */
        repeating-linear-gradient(45deg,  rgba(236,197,107,.022) 0 2px, transparent 2px 26px),
        repeating-linear-gradient(-45deg, rgba(236,197,107,.022) 0 2px, transparent 2px 26px),
        /* soft regal light pooling at the top */
        radial-gradient(1100px 560px at 50% -12%, rgba(236,197,107,.14) 0%, transparent 58%),
        radial-gradient(760px 460px at 88% 8%, rgba(15,58,45,.85) 0%, transparent 55%),
        radial-gradient(680px 520px at 8% 30%, rgba(10,46,36,.7) 0%, transparent 60%),
        linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 70%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

/* ---------------------------------------------------------
   3) STARFIELD -> fine gold dust motes (subtle, regal)
   --------------------------------------------------------- */
body.theme-royal-emerald .stars {
    background-image:
        radial-gradient(1.3px 1.3px at 18% 26%, rgba(246,230,189,.55), transparent),
        radial-gradient(1.1px 1.1px at 72% 18%, rgba(236,197,107,.4), transparent),
        radial-gradient(1.4px 1.4px at 42% 66%, rgba(246,230,189,.4), transparent),
        radial-gradient(1.0px 1.0px at 86% 58%, rgba(236,197,107,.3), transparent),
        radial-gradient(1.2px 1.2px at 12% 80%, rgba(246,230,189,.35), transparent),
        radial-gradient(1.0px 1.0px at 58% 44%, rgba(236,197,107,.28), transparent);
    opacity: .35;
    animation: reMoteDrift 16s ease-in-out infinite alternate;
}
@keyframes reMoteDrift {
    from { transform: translateY(0); opacity: .28; }
    to   { transform: translateY(-6px); opacity: .42; }
}
@media (prefers-reduced-motion: reduce) {
    body.theme-royal-emerald .stars { animation: none; }
}

body.theme-royal-emerald a { color: var(--gold); }

/* ---------------------------------------------------------
   4) TOP BAR
   --------------------------------------------------------- */
body.theme-royal-emerald .topbar {
    background: linear-gradient(180deg, rgba(3,20,15,.97), rgba(6,35,28,.82));
    border-bottom: 1px solid var(--line-strong);
    box-shadow: 0 1px 0 rgba(236,197,107,.12), 0 8px 26px rgba(0,0,0,.4);
    backdrop-filter: blur(12px);
}
body.theme-royal-emerald .brand { color: var(--text); }
body.theme-royal-emerald .brand-mark {
    color: var(--gold);
    text-shadow: 0 0 16px rgba(236,197,107,.55), 0 1px 0 rgba(0,0,0,.4);
}
body.theme-royal-emerald .brand-text strong {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: .4px;
    color: var(--gold-soft);
}
body.theme-royal-emerald .brand-text small { color: var(--muted); }
body.theme-royal-emerald .lang-toggle {
    border: 1px solid var(--line-strong);
    color: var(--gold-soft);
    background: rgba(236,197,107,.07);
}

/* ---------------------------------------------------------
   5) SECTION TITLES — serif, gold, twin hairline flourish
   --------------------------------------------------------- */
body.theme-royal-emerald .section-title,
body.theme-royal-emerald .section-head h2,
body.theme-royal-emerald .card-title,
body.theme-royal-emerald .lookup-title {
    font-family: var(--font-display);
    color: var(--gold-soft);
    letter-spacing: .3px;
}
body.theme-royal-emerald .section-title::before {
    width: 26px; height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
    box-shadow: 0 2px 0 -1px rgba(236,197,107,.4);
}

/* ---------------------------------------------------------
   6) CARDS — ornamental thin double-border + emerald + sheen
   --------------------------------------------------------- */
body.theme-royal-emerald .card {
    background:
        radial-gradient(420px 200px at 100% 0%, rgba(236,197,107,.06), transparent 60%),
        linear-gradient(180deg, var(--re-emerald-2), var(--re-emerald-1));
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    box-shadow:
        inset 0 0 0 1px rgba(3,20,15,.9),       /* dark gutter */
        inset 0 0 0 2px rgba(236,197,107,.16),  /* inner gold hairline -> double frame */
        var(--shadow);
    backdrop-filter: blur(6px);
}
body.theme-royal-emerald .card.glow {
    border-color: var(--re-gold-line);
    box-shadow:
        inset 0 0 0 1px rgba(3,20,15,.9),
        inset 0 0 0 2px rgba(236,197,107,.3),
        0 0 34px rgba(236,197,107,.16),
        var(--shadow);
}
body.theme-royal-emerald .card h2,
body.theme-royal-emerald .card h3 {
    font-family: var(--font-display);
    color: var(--gold-soft);
    letter-spacing: .3px;
}

/* ---------------------------------------------------------
   7) HERO — regal crest panel
   --------------------------------------------------------- */
body.theme-royal-emerald .hero {
    background:
        radial-gradient(460px 220px at 50% -10%, rgba(236,197,107,.2), transparent 70%),
        linear-gradient(180deg, var(--re-emerald-3), var(--re-emerald-1));
    border: 1px solid var(--line-strong);
    box-shadow:
        inset 0 0 0 2px rgba(236,197,107,.18),
        var(--shadow);
}
body.theme-royal-emerald .hero h1 {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 30px;
    color: var(--gold-soft);
    letter-spacing: .6px;
    text-shadow: 0 0 22px rgba(236,197,107,.28);
}
body.theme-royal-emerald .hero p,
body.theme-royal-emerald .hero-sub { color: var(--muted); }

/* ---------------------------------------------------------
   8) FORMS
   --------------------------------------------------------- */
body.theme-royal-emerald .field label,
body.theme-royal-emerald label,
body.theme-royal-emerald .star-form .field > span {
    color: var(--gold-soft);
}
body.theme-royal-emerald .field .hint,
body.theme-royal-emerald .hint { color: var(--muted); }

body.theme-royal-emerald input[type=text],
body.theme-royal-emerald input[type=date],
body.theme-royal-emerald input[type=number],
body.theme-royal-emerald input[type=password],
body.theme-royal-emerald select {
    background: rgba(3,20,15,.66);
    border: 1px solid var(--line);
    color: var(--text);
    border-radius: 12px;
}
body.theme-royal-emerald input:focus,
body.theme-royal-emerald select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(236,197,107,.18);
}
body.theme-royal-emerald .star-form select {
    background: var(--re-emerald-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23ecc56b' d='M6 8 0 0h12z'/%3E%3C/svg%3E") no-repeat right 12px center;
    border: 1px solid var(--line-strong);
    color: var(--text);
}
body.theme-royal-emerald .star-form select:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(236,197,107,.16);
}

/* ---------------------------------------------------------
   9) BUTTONS — polished gold leaf + emerald ghost
   --------------------------------------------------------- */
body.theme-royal-emerald .btn,
body.theme-royal-emerald .btn-gold {
    color: #2c2103;
    background: linear-gradient(180deg, var(--gold-soft) 0%, var(--gold) 45%, var(--gold-2) 100%);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.4),
        0 8px 22px rgba(207,160,74,.3);
    font-weight: 700;
}
body.theme-royal-emerald .btn:hover,
body.theme-royal-emerald .btn-gold:hover { filter: brightness(1.05); }

body.theme-royal-emerald .btn.secondary,
body.theme-royal-emerald .btn-ghost {
    color: var(--gold-soft);
    background: rgba(236,197,107,.06);
    border: 1px solid var(--line-strong);
    box-shadow: none;
}
body.theme-royal-emerald .btn.secondary:hover,
body.theme-royal-emerald .btn-ghost:hover {
    border-color: var(--gold);
    background: rgba(236,197,107,.1);
}

/* ---------------------------------------------------------
   10) NUMBER ORBS — emerald sphere with gold ring
   --------------------------------------------------------- */
body.theme-royal-emerald .orb {
    color: var(--gold-soft);
    font-family: var(--font-display);
    font-weight: 700;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.22), transparent 42%),
        radial-gradient(circle at 50% 54%, #0f4030 0%, #082a20 62%, #04180f 100%);
    border: 1.5px solid var(--gold);
    box-shadow:
        0 0 0 1px rgba(3,20,15,.9),                 /* gap between rings */
        0 0 0 3px rgba(236,197,107,.4),             /* outer gold ring -> framed */
        0 0 26px rgba(236,197,107,.26),
        inset 0 0 20px rgba(0,0,0,.55),
        inset 0 0 10px rgba(236,197,107,.12);
}
body.theme-royal-emerald .orb .num {
    color: var(--gold-soft);
    text-shadow: 0 0 12px rgba(236,197,107,.4);
}

/* ---------------------------------------------------------
   11) TRIO + number tiles
   --------------------------------------------------------- */
body.theme-royal-emerald .trio .label { color: var(--muted); }
body.theme-royal-emerald .trio .pname { color: var(--gold); }

body.theme-royal-emerald .num-tile {
    background: linear-gradient(180deg, var(--re-emerald-2), var(--re-emerald-1));
    border: 1px solid var(--line);
    color: var(--text);
}
body.theme-royal-emerald .num-tile:hover { border-color: var(--gold); }
body.theme-royal-emerald .num-tile .pn { color: var(--gold); }
body.theme-royal-emerald .num-tile small { color: var(--muted); }

/* ---------------------------------------------------------
   12) KEY/VALUE, CHIPS, TAGS, SWATCHES
   --------------------------------------------------------- */
body.theme-royal-emerald .kv dt { color: var(--gold-soft); }
body.theme-royal-emerald .kv dd { color: var(--text); }

body.theme-royal-emerald .chip {
    border: 1px solid var(--line);
    background: rgba(236,197,107,.07);
    color: var(--text);
}
body.theme-royal-emerald .chip.gold,
body.theme-royal-emerald .chip-day {
    border-color: var(--line-strong);
    color: var(--gold-soft);
    background: rgba(236,197,107,.1);
}

body.theme-royal-emerald .tag { border: 1px solid currentColor; }
body.theme-royal-emerald .tag-good { color: var(--good); }
body.theme-royal-emerald .tag-warn { color: var(--warn); }
body.theme-royal-emerald .tag-mixed { color: var(--mixed); }
body.theme-royal-emerald .tag-neutral { color: var(--neutral); }

body.theme-royal-emerald .swatch i { border: 1px solid rgba(246,230,189,.35); }

/* ---------------------------------------------------------
   13) CALLOUT / LEAD / DIVIDER / BREADCRUMB / PROSE
   --------------------------------------------------------- */
body.theme-royal-emerald .callout {
    border: 1px solid var(--line-strong);
    background:
        radial-gradient(300px 120px at 0% 0%, rgba(236,197,107,.13), transparent 70%),
        linear-gradient(180deg, var(--re-emerald-2), var(--re-emerald-1));
    box-shadow: inset 0 0 0 2px rgba(236,197,107,.12);
}
body.theme-royal-emerald .callout .lead,
body.theme-royal-emerald .lead { color: var(--gold-soft); }

body.theme-royal-emerald .divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
body.theme-royal-emerald .divider::after { content: none; }

body.theme-royal-emerald .breadcrumb { color: var(--muted); }
body.theme-royal-emerald .breadcrumb a { color: var(--gold); }

body.theme-royal-emerald .prose { font-size: 15.5px; color: var(--text); }
body.theme-royal-emerald .prose h2,
body.theme-royal-emerald .prose h3,
body.theme-royal-emerald .prose-sub,
body.theme-royal-emerald .star-prose .prose-sub {
    font-family: var(--font-display);
    color: var(--gold-soft);
}
body.theme-royal-emerald .star-prose .prose-sub {
    color: var(--gold);
    border-bottom: 1px solid var(--line);
}
body.theme-royal-emerald .star-prose .prose-sub::before { color: var(--gold-2); }
body.theme-royal-emerald .prose-list li {
    border-left: 2px solid var(--line-strong);
    background: rgba(236,197,107,.05);
}

/* letter -> value strip */
body.theme-royal-emerald .letterstrip .lt {
    background: rgba(3,20,15,.6);
    border: 1px solid var(--line);
}
body.theme-royal-emerald .letterstrip .lt b { color: var(--gold-soft); font-family: var(--font-display); }
body.theme-royal-emerald .letterstrip .lt i { color: var(--muted); }

/* ---------------------------------------------------------
   14) LIST LINKS / COMP CARDS
   --------------------------------------------------------- */
body.theme-royal-emerald .list-link {
    background: linear-gradient(180deg, var(--re-emerald-2), var(--re-emerald-1));
    border: 1px solid var(--line);
    color: var(--text);
}
body.theme-royal-emerald .list-link:hover { border-color: var(--gold); }
body.theme-royal-emerald .list-link .t small { color: var(--muted); }
body.theme-royal-emerald .list-link .arr,
body.theme-royal-emerald .rrow-arr,
body.theme-royal-emerald .intro-banner-arr { color: var(--gold); }

body.theme-royal-emerald .comp-card {
    background: linear-gradient(180deg, var(--re-emerald-2), var(--re-emerald-1));
    border: 1px solid var(--line);
    color: var(--text);
}
body.theme-royal-emerald .comp-card .cn { font-family: var(--font-display); color: var(--gold-soft); }
body.theme-royal-emerald .comp-card .nm { color: var(--muted); }

/* ---------------------------------------------------------
   15) BOTTOM NAV / TO-TOP
   --------------------------------------------------------- */
body.theme-royal-emerald .bottom-nav {
    background: linear-gradient(180deg, rgba(3,20,15,.86), rgba(3,20,15,.98));
    border-top: 1px solid var(--line-strong);
    box-shadow: 0 -1px 0 rgba(236,197,107,.1);
    backdrop-filter: blur(12px);
}
body.theme-royal-emerald .nav-item { color: var(--muted); }
body.theme-royal-emerald .nav-item.is-active { color: var(--gold); }
body.theme-royal-emerald .nav-item.is-active svg {
    filter: drop-shadow(0 0 6px rgba(236,197,107,.6));
}

body.theme-royal-emerald .to-top {
    background: var(--re-emerald-2);
    border: 1px solid var(--line-strong);
    color: var(--gold);
    box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

body.theme-royal-emerald .page-footer {
    color: var(--muted);
    border-top: 1px solid var(--line);
}

/* ---------------------------------------------------------
   16) COMPATIBILITY / METER
   --------------------------------------------------------- */
body.theme-royal-emerald .pair .vs,
body.theme-royal-emerald .pair .pname { color: var(--gold); }
body.theme-royal-emerald .pair .label { color: var(--text); }
body.theme-royal-emerald .score-big {
    font-family: var(--font-display);
    color: var(--gold-soft);
    text-shadow: 0 0 18px rgba(236,197,107,.3);
}
body.theme-royal-emerald .meter {
    background: rgba(3,20,15,.6);
    border: 1px solid var(--line);
}
body.theme-royal-emerald .meter > i {
    background: linear-gradient(90deg, var(--gold-2), var(--gold-soft));
}

/* ---------------------------------------------------------
   17) ALERTS
   --------------------------------------------------------- */
body.theme-royal-emerald .alert-warn {
    background: rgba(255,154,154,.12);
    border: 1px solid rgba(255,154,154,.4);
    color: var(--warn);
}
body.theme-royal-emerald .alert-cusp {
    background: rgba(236,197,107,.1);
    border: 1px solid var(--line-strong);
    color: var(--gold-soft);
}

/* =========================================================
   18) STAR / ZODIAC BLOCKS
   ========================================================= */
body.theme-royal-emerald .star-hero {
    background:
        radial-gradient(120% 120% at 50% -20%, rgba(236,197,107,.22), transparent 60%),
        linear-gradient(180deg, var(--re-emerald-3), var(--re-emerald-1));
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 0 0 2px rgba(236,197,107,.16), var(--shadow);
}
body.theme-royal-emerald .star-emblem {
    color: var(--gold);
    text-shadow: 0 0 20px rgba(236,197,107,.6);
}

body.theme-royal-emerald .lookup-title { font-family: var(--font-display); color: var(--gold-soft); }

/* Quick-facts panel */
body.theme-royal-emerald .quickfacts {
    border: 1px solid var(--line-strong);
    background:
        radial-gradient(280px 110px at 100% 0%, rgba(236,197,107,.08), transparent 65%),
        rgba(8,41,32,.55);
    box-shadow: inset 0 0 0 1px rgba(236,197,107,.1);
}
body.theme-royal-emerald .qf-head { font-family: var(--font-display); color: var(--gold-soft); }
body.theme-royal-emerald .qf-item { border-top: 1px solid var(--line); }
body.theme-royal-emerald .qf-ico { color: var(--gold); }
body.theme-royal-emerald .qf-label { color: var(--gold); }
body.theme-royal-emerald .qf-text { color: var(--text); }

/* zodiac grid cards */
body.theme-royal-emerald .zcard {
    background: linear-gradient(180deg, var(--re-emerald-2), var(--re-emerald-1));
    border: 1px solid var(--line);
}
body.theme-royal-emerald .zcard:hover {
    border-color: var(--gold);
    box-shadow: 0 10px 26px rgba(0,0,0,.4);
}
body.theme-royal-emerald .zcard-sym { color: var(--gold); }
body.theme-royal-emerald .zcard-month { color: var(--gold-soft); }
body.theme-royal-emerald .zcard-sign { color: var(--muted); }

/* intro banner */
body.theme-royal-emerald .intro-banner {
    background: linear-gradient(135deg, rgba(15,58,45,.6), rgba(8,41,32,.55));
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 0 0 1px rgba(236,197,107,.1);
}
body.theme-royal-emerald .intro-banner-ico { color: var(--gold); }
body.theme-royal-emerald .intro-banner-txt strong { color: var(--gold-soft); font-family: var(--font-display); }
body.theme-royal-emerald .intro-banner-txt small { color: var(--muted); }

/* zodiac month header */
body.theme-royal-emerald .zhero-sym {
    color: var(--gold);
    text-shadow: 0 0 20px rgba(236,197,107,.5);
}
body.theme-royal-emerald .zhero-info h1 { font-family: var(--font-display); color: var(--gold-soft); }
body.theme-royal-emerald .zhero-sign { color: var(--muted); }
body.theme-royal-emerald .zmeta {
    background: var(--line);
    border: 1px solid var(--line);
}
body.theme-royal-emerald .zmeta-item { background: var(--re-emerald-2); }
body.theme-royal-emerald .zmeta-l { color: var(--muted); }
body.theme-royal-emerald .zmeta-v { color: var(--gold-soft); }

/* reading rows */
body.theme-royal-emerald .rrow {
    background: linear-gradient(180deg, var(--re-emerald-2), var(--re-emerald-1));
    border: 1px solid var(--line);
}
body.theme-royal-emerald .rrow:hover { border-color: var(--gold); }
body.theme-royal-emerald .rrow-num {
    color: var(--gold);
    font-family: var(--font-display);
    background: radial-gradient(circle at 30% 30%, rgba(236,197,107,.22), transparent);
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 0 8px rgba(236,197,107,.1);
}
body.theme-royal-emerald .rrow-dates { color: var(--gold-soft); }
body.theme-royal-emerald .rrow-planets { color: var(--muted); }

/* reading detail card */
body.theme-royal-emerald .reading-card,
body.theme-royal-emerald .result-card {
    border-color: var(--line-strong);
    box-shadow:
        inset 0 0 0 2px rgba(236,197,107,.16),
        0 0 30px rgba(15,58,45,.5),
        var(--shadow);
}
body.theme-royal-emerald .reading-hero { border-bottom: 1px solid var(--line); }
body.theme-royal-emerald .reading-zsym,
body.theme-royal-emerald .zsym { color: var(--gold); }
body.theme-royal-emerald .reading-zsign,
body.theme-royal-emerald .zname { font-family: var(--font-display); color: var(--gold-soft); }
body.theme-royal-emerald .reading-zmonth,
body.theme-royal-emerald .zdates { color: var(--muted); }
body.theme-royal-emerald .reading-bignum,
body.theme-royal-emerald .rnum-v {
    font-family: var(--font-display);
    color: var(--gold);
    text-shadow: 0 0 18px rgba(236,197,107,.45);
}
body.theme-royal-emerald .rnum-l { color: var(--muted); }
body.theme-royal-emerald .reading-title {
    font-family: var(--font-display);
    color: var(--gold-soft);
}

/* =========================================================
   19) TRIANGLE / AFFINITY / ELEMENT BLOCKS
   ========================================================= */
body.theme-royal-emerald .el-card {
    background: linear-gradient(180deg, var(--re-emerald-2), var(--re-emerald-1));
    border: 1px solid var(--line-strong);
    box-shadow: inset 0 0 0 1px rgba(236,197,107,.1);
    color: var(--text);
}
body.theme-royal-emerald .el-card h3,
body.theme-royal-emerald .el-card .el-title {
    font-family: var(--font-display);
    color: var(--gold-soft);
}

body.theme-royal-emerald .aff-meter {
    background: rgba(3,20,15,.6);
    border: 1px solid var(--line);
}
body.theme-royal-emerald .aff-meter > i,
body.theme-royal-emerald .aff-meter .aff-fill {
    background: linear-gradient(90deg, var(--gold-2), var(--gold-soft));
}

body.theme-royal-emerald .tier-good,
body.theme-royal-emerald .tier-high { color: var(--good); border-color: var(--good); }
body.theme-royal-emerald .tier-mixed,
body.theme-royal-emerald .tier-mid { color: var(--mixed); border-color: var(--mixed); }
body.theme-royal-emerald .tier-warn,
body.theme-royal-emerald .tier-low { color: var(--warn); border-color: var(--warn); }

/* Mahabote cells re-skin to emerald base */
body.theme-royal-emerald .mb-cell { border: 1px solid var(--line); }
body.theme-royal-emerald .mb-cell.is-birth { box-shadow: 0 0 0 2px var(--gold); }
body.theme-royal-emerald .mb-house { font-family: var(--font-display); color: var(--gold-soft); }
body.theme-royal-emerald .mb-pos { color: var(--gold); }
body.theme-royal-emerald .mb-gloss { color: var(--muted); }

/* =========================================================
   20) RESPONSIVE — keep effects light & legible on phones
   ========================================================= */
@media (max-width: 440px) {
    body.theme-royal-emerald .hero h1 { font-size: 26px; }
    /* trim the double-frame inset slightly so cards don't feel boxed-in on small screens */
    body.theme-royal-emerald .card {
        box-shadow:
            inset 0 0 0 1px rgba(3,20,15,.9),
            inset 0 0 0 2px rgba(236,197,107,.13),
            0 10px 28px rgba(0,0,0,.5);
    }
    /* faint sheen lines spaced wider so they stay subtle, never busy under Burmese text */
    body.theme-royal-emerald {
        background:
            repeating-linear-gradient(45deg,  rgba(236,197,107,.018) 0 2px, transparent 2px 30px),
            radial-gradient(900px 460px at 50% -12%, rgba(236,197,107,.13) 0%, transparent 58%),
            radial-gradient(620px 460px at 90% 8%, rgba(15,58,45,.8) 0%, transparent 55%),
            linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 72%);
        background-attachment: fixed;
    }
}

@media (min-width: 640px) {
    body.theme-royal-emerald .hero h1 { font-size: 34px; }
}

/* Respect reduced motion globally for this theme */
@media (prefers-reduced-motion: reduce) {
    body.theme-royal-emerald .star-emblem { animation-duration: 60s; }
}