/* Dark Romanticism landing theme.
   Loaded from index.html AFTER the app bundle's own styles can still win,
   because every rule targets #portal / html body / :root:root — a specificity
   tier above the (0,1,0) selectors in src/portal.css + src/terminal-portal.css,
   which stay untouched. */

:root:root{
  --gold:#b8a06a;            /* antique gold accent */
  --muted:#a89c88;
  --border:rgba(184,160,106,.14);
  --dr-bg:#050508;           /* deepest black */
  --dr-panel:#0d0a14;        /* raised black-plum surface */
  --dr-crimson:#8b1e3f;      /* blood crimson */
  --dr-ink:#e8e2d6;          /* parchment ivory text */
  --dr-serif:'Playfair Display','Noto Serif Thai',Georgia,serif;
  --dr-ease:cubic-bezier(.4,0,.2,1)
}
html body{background:var(--dr-bg) radial-gradient(130% 70% at 50% 0%,var(--dr-panel) 0%,#07060c 52%,var(--dr-bg) 100%) fixed;color:var(--dr-ink)}

/* ── focus & selection ── */
#portal ::selection{background:rgba(139,30,63,.55);color:#f4ead6}
#portal button:focus-visible,#portal a:focus-visible,#portal input:focus-visible{outline-color:#b8a06a!important}

/* ── 0.6s romantic transitions everywhere interactive ── */
#portal a,#portal button{transition:color .6s var(--dr-ease),background-color .6s var(--dr-ease),border-color .6s var(--dr-ease),box-shadow .6s var(--dr-ease),opacity .6s var(--dr-ease)}

/* ── header ── */
#portal .site-header{background:rgba(5,5,8,.92);border-bottom:1px solid rgba(139,30,63,.28)}
#portal .brand{font-family:var(--dr-serif);font-weight:600;letter-spacing:2.5px;color:var(--dr-ink)}
#portal .brand-sigil{background:transparent;border:1px solid rgba(184,160,106,.35);color:var(--gold);box-shadow:0 0 24px rgba(184,160,106,.12);transition:border-color .6s var(--dr-ease),box-shadow .6s var(--dr-ease)}
#portal .brand:hover .brand-sigil{border-color:rgba(184,160,106,.7);box-shadow:0 0 36px rgba(184,160,106,.3)}
#portal .site-header nav{color:#b0a48e}
#portal nav a:hover{color:#d8c496}
#portal .nav-login{background:transparent;border:1px solid rgba(139,30,63,.55);color:#e2d5b8}
#portal .nav-login:hover{background:rgba(139,30,63,.16);border-color:var(--dr-crimson);color:#f0e4c6}

/* ── hero: nocturne with a glowing moon ── */
#portal .hero{background:
  radial-gradient(46px 46px at 71% 15%,rgba(246,241,228,.95) 0%,rgba(246,241,228,.3) 52%,transparent 74%),
  radial-gradient(190px 190px at 71% 15%,rgba(238,230,209,.3) 0%,rgba(238,230,209,.1) 48%,transparent 72%),
  radial-gradient(680px 460px at 71% 12%,rgba(184,160,106,.15) 0%,transparent 66%),
  radial-gradient(720px 560px at 5% 85%,rgba(139,30,63,.17) 0%,transparent 62%),
  linear-gradient(0deg,rgba(5,5,8,.92) 0%,transparent 34%),
  var(--dr-bg);
  border-bottom:1px solid rgba(139,30,63,.22)}
#portal .hero-shade{background:linear-gradient(90deg,rgba(5,5,8,.94) 0%,rgba(5,5,8,.7) 30%,rgba(5,5,8,.25) 58%,transparent 80%),linear-gradient(0deg,var(--dr-bg) 0%,transparent 26%)}
#portal .overline{color:var(--gold)}
#portal .overline>span{background:var(--gold)}
#portal .hero-pretitle{color:#c3b69d;font-family:var(--dr-serif);font-style:italic;letter-spacing:.4px}
#portal h1,#portal h2,#portal h3{font-family:var(--dr-serif)}
#portal .hero h1{font-family:var(--dr-serif);font-weight:600;letter-spacing:-1px;color:var(--dr-ink);text-shadow:0 3px 42px rgba(0,0,0,.92),0 0 80px rgba(139,30,63,.28)}
#portal h1 em{color:#c9a86a;font-style:italic}
#portal .hero-copy{color:#c9bda7}
#portal .hero-note{color:#8f8474}
#portal .secondary{color:#d9cdb4;border-color:rgba(184,160,106,.38)}
#portal .secondary:hover{color:#e9dcb8;border-color:rgba(184,160,106,.75)}
#portal .hero-caption{background:rgba(7,5,11,.62);border-left:2px solid var(--gold);color:var(--dr-ink);box-shadow:0 22px 55px rgba(0,0,0,.55);backdrop-filter:blur(6px)}
#portal .hero-caption span{color:var(--gold)}
#portal .hero-caption strong{font-family:var(--dr-serif)}
#portal .hero-caption small{color:#93876f}
#portal .scroll-hint{color:#93876f}

/* ── buttons: blood-crimson velvet with gold trim ── */
#portal .primary,#portal .small-primary{background:linear-gradient(120deg,#9d2549,#6d1431);border:1px solid rgba(184,160,106,.45);color:#f2e6ca;box-shadow:0 10px 34px rgba(139,30,63,.35),0 2px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(244,232,214,.14);transition:background .6s var(--dr-ease),border-color .6s var(--dr-ease),box-shadow .6s var(--dr-ease),transform .6s var(--dr-ease),filter .6s var(--dr-ease)}
#portal .primary:hover,#portal .small-primary:hover{background:linear-gradient(120deg,#b02a55,#7d1a3e);border-color:rgba(184,160,106,.8);box-shadow:0 14px 44px rgba(139,30,63,.5),0 2px 10px rgba(0,0,0,.6),inset 0 1px 0 rgba(244,232,214,.14);filter:none;transform:translateY(-2px)}
#portal .primary.danger{background:linear-gradient(120deg,#6d1631,#450c20);border-color:rgba(216,143,163,.4)}

/* ── realm status bar ── */
#portal .realm-bar{background:#090611;color:#95896f}
#portal .realm-bar i{background:var(--gold)}
#portal .realm-bar i.online{background:#d8bd85;box-shadow:0 0 12px rgba(216,189,133,.6)}
#portal .realm-bar b{color:#cbbfa8}
#portal .realm-bar .alpha-tag{color:var(--gold)}

/* ── sections ── */
#portal .section h2{font-weight:600;letter-spacing:-.5px}
#portal .section h2 span{color:var(--gold)}
#portal .section-heading>p,#portal .class-intro>p:not(.overline){color:#a3977f}

/* ── feature cards: chiaroscuro panels ── */
#portal .feature{background:linear-gradient(165deg,var(--dr-panel) 0%,#0b0812 55%,#090610 100%)!important;border:1px solid rgba(184,160,106,.13);border-top:1px solid rgba(139,30,63,.55);color:var(--dr-ink);box-shadow:0 26px 60px rgba(0,0,0,.5);transition:border-color .6s var(--dr-ease),box-shadow .6s var(--dr-ease),transform .6s var(--dr-ease)}
#portal .feature:hover{border-top-color:var(--gold);box-shadow:0 34px 70px rgba(0,0,0,.65),0 0 44px rgba(139,30,63,.14);transform:translateY(-3px)}
#portal .feature.companions{background:linear-gradient(165deg,#100c19 0%,#0c0913 55%,#0a0711 100%)!important}
#portal .feature.town{border-top-color:rgba(184,160,106,.5)}
#portal .feature-num{color:var(--gold)}
#portal .feature h3{font-weight:600}
#portal .feature p{color:#a3977f}
#portal .feature-art{color:rgba(184,160,106,.34);text-shadow:0 0 60px rgba(139,30,63,.45)}

/* ── class detail: moonlit alcove ── */
#portal .class-detail{background:radial-gradient(ellipse at 78% 28%,rgba(238,230,209,.07) 0%,transparent 55%),radial-gradient(ellipse at 8% 105%,rgba(139,30,63,.18) 0%,transparent 60%),linear-gradient(135deg,var(--dr-panel) 0%,#0a0711 100%);border:1px solid rgba(184,160,106,.15);color:var(--dr-ink);box-shadow:inset 0 0 90px rgba(0,0,0,.65),0 26px 60px rgba(0,0,0,.45)}
#portal .class-detail:before{border-radius:50%;transform:none;border-color:rgba(184,160,106,.22);outline-color:rgba(184,160,106,.08)}
#portal .class-watermark{color:rgba(184,160,106,.5);text-shadow:0 0 55px rgba(139,30,63,.5)}
#portal .class-detail-content{text-shadow:0 1px 14px var(--dr-bg)}
#portal .class-detail h3{font-weight:600}
#portal .class-detail p{color:#c6baa2}
#portal .class-level{color:var(--gold)}

/* ── guide ── */
#portal .guide-section{background:radial-gradient(ellipse 60% 55% at 50% 118%,rgba(139,30,63,.2) 0%,transparent 62%),radial-gradient(ellipse 40% 30% at 50% 0%,rgba(184,160,106,.05) 0%,transparent 60%),var(--dr-bg)}
#portal .steps span{font-family:'Playfair Display',Georgia,serif;font-style:italic;color:var(--gold)}
#portal .steps h3{font-weight:600}
#portal .steps p{color:#a3977f}
#portal .development-note{color:#877c6b}

/* ── footer ── */
#portal footer{background:var(--dr-bg);color:var(--dr-ink)}
#portal footer p,#portal footer>span{color:#8f8474}

/* ── account dialog ── */
#portal dialog{background:linear-gradient(180deg,var(--dr-panel) 0%,#08060d 100%);color:var(--dr-ink);border:1px solid rgba(184,160,106,.22);border-top:1px solid rgba(139,30,63,.65);box-shadow:0 44px 140px rgba(0,0,0,.85),0 0 90px rgba(139,30,63,.14)}
#portal dialog::backdrop{background:rgba(4,3,7,.88);backdrop-filter:blur(10px)}
#portal dialog h2{font-weight:600}
#portal .dialog-brand{font-family:var(--dr-serif);color:var(--gold)}
#portal .dialog-close{color:#93876f}
#portal .dialog-close:hover{color:var(--gold)}
#portal .dialog-subtitle,#portal dialog>p,#portal .account-email,#portal .privacy-note,#portal .account-footer{color:#a3977f}
#portal dialog label{color:#cfc3a9}
#portal dialog input{background:#0a0710;color:var(--dr-ink);border-color:rgba(184,160,106,.24)}
#portal dialog input::placeholder{color:#7d7263}
#portal .text-button{color:var(--gold)}
#portal .text-button:hover{color:#d8c496}
#portal #account-message{color:#dcc08e}
#portal .character-avatar{background:#120d1a;color:var(--gold)}
#portal .character-row small{color:#93876f}
#portal .delete-character{color:#93876f}
#portal .delete-character:hover{color:#c65a78}
#portal .empty-characters{color:var(--gold)}
#portal .empty-characters p{color:#a3977f}