/* Shared Realmly navigation and account controls, isolated from page layouts. */
@font-face { font-family:Cinzel; font-weight:400; font-display:swap; src:url('/assets/fonts/cinzel-400.ttf'); }
@font-face { font-family:Spectral; font-weight:400; font-display:swap; src:url('/assets/fonts/spectral-400.ttf'); }
.realmly-site-header,.character-settings-backdrop { --ink:#f5e5b8; --line:rgba(219,172,82,.24); --font-display:Cinzel,Georgia,serif; --font-story:Spectral,Georgia,serif; font:400 16px/1.3 Spectral,Georgia,serif; color:#f5e5b8; }
.realmly-site-header *,.realmly-site-header *::before,.realmly-site-header *::after,.character-settings-backdrop * { box-sizing:border-box; }

@media (min-width:761px) and (max-width:1050px) { .site-nav.realmly-site-header .nav-actions { flex-wrap:wrap; justify-content:flex-end; max-width:calc(100% - 180px); } }
.site-nav.realmly-site-header { position:relative; display:flex; align-items:center; justify-content:space-between; width:min(1280px,calc(100% - 48px)); min-height:104px; margin:auto; padding:22px 0; border-bottom:1px solid var(--line); }.site-nav.realmly-site-header::after { position:absolute; right:0; bottom:-1px; width:118px; height:1px; background:linear-gradient(90deg,transparent,#e0ad4d 28%,#fff0ad 50%,#e0ad4d 72%,transparent); box-shadow:0 0 13px rgba(236,181,68,.65); content:''; }
.realmly-site-header .brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; font-size:22px; letter-spacing:.03em; }
.realmly-site-header .brand-knot { display:grid; place-items:center; width:32px; height:32px; border:1px solid #e3bd67; border-radius:50%; color:#211407; background:radial-gradient(circle at 35% 28%,#f3cf72,#a96825 76%); box-shadow:inset 0 0 0 3px #44250f,0 0 28px #c27c2855; font-weight:bold; font-size:18px; }
.realmly-site-header .nav-actions { align-items:center; display:flex; gap:12px; }.realmly-site-header .nav-actions #account-controls { align-items:center; display:flex; }.realmly-site-header .nav-explore { display:flex; align-items:center; gap:3px; padding:5px; border:1px solid rgba(207,161,72,.18); background:rgba(10,7,5,.26); }.realmly-site-header .nav-link { display:inline-flex; align-items:center; gap:7px; min-height:33px; padding:0 10px; color:#cdb781; font-family:Arial,sans-serif; font-size:9px; font-weight:bold; letter-spacing:.12em; text-decoration:none; text-transform:uppercase; transition:background .16s,color .16s,box-shadow .16s; }.realmly-site-header .nav-link span { color:#d9a947; font-size:13px; line-height:1; }.realmly-site-header .nav-link:hover,.realmly-site-header .nav-link:focus-visible { color:#fff0bf; background:rgba(205,146,47,.14); box-shadow:inset 0 -1px 0 #e5b756; outline:0; }.realmly-site-header .nav-upload { display:inline-flex; align-items:center; gap:7px; min-height:43px; padding:0 14px; border:1px solid rgba(220,174,75,.72); background:linear-gradient(135deg,rgba(125,71,23,.54),rgba(45,26,12,.72)); color:#ffe3a0; box-shadow:inset 0 0 0 1px rgba(255,223,147,.1),0 0 18px rgba(192,123,34,.13); font-family:Arial,sans-serif; font-size:9px; font-weight:bold; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; transition:background .16s,border-color .16s,box-shadow .16s,transform .16s; }.realmly-site-header .nav-upload span { color:#fff0af; font-size:14px; font-weight:normal; }.realmly-site-header .nav-upload:hover,.realmly-site-header .nav-upload:focus-visible { border-color:#ffe291; background:linear-gradient(135deg,rgba(167,97,29,.73),rgba(67,38,14,.82)); box-shadow:inset 0 0 0 1px rgba(255,233,164,.2),0 0 23px rgba(222,151,42,.29); outline:0; transform:translateY(-1px); }
.realmly-site-header .sign-in { border:1px solid rgba(210,165,75,.55); color:#f3d681; font-family:Arial,sans-serif; font-size:10px; font-weight:bold; letter-spacing:.11em; padding:12px 16px; text-decoration:none; text-transform:uppercase; transition:background .16s,color .16s,border-color .16s; }
.realmly-site-header .sign-in:hover,.realmly-site-header .sign-in:focus-visible { background:rgba(181,126,37,.18); border-color:#e8bd5b; color:#fff0bf; }
.realmly-site-header .account-menu { align-items:center; display:flex; gap:6px; }.realmly-site-header .account-characters { display:flex; align-items:center; gap:8px; min-width:0; padding:4px 8px 4px 4px; border:1px solid transparent; color:#d9bc79; text-decoration:none; transition:background .16s,border-color .16s; }.realmly-site-header .account-characters:hover,.realmly-site-header .account-characters:focus-visible { border-color:rgba(223,178,79,.47); background:rgba(181,126,37,.12); outline:0; }.realmly-site-header .account-crest { display:grid; flex:none; place-items:center; width:27px; height:27px; border:1px solid #dcb35b; border-radius:50%; color:#25160a; background:radial-gradient(circle at 35% 28%,#f6da85,#9f6324 78%); box-shadow:inset 0 0 0 2px #45260e,0 0 12px rgba(196,125,40,.25); font-family:Georgia,serif; font-size:13px; font-weight:bold; }.realmly-site-header .account-copy { display:grid; min-width:0; gap:1px; }.realmly-site-header .account-label { color:#8f805f; font-family:Arial,sans-serif; font-size:7px; font-weight:bold; letter-spacing:.14em; text-transform:uppercase; }.realmly-site-header .account-name { max-width:126px; overflow:hidden; color:#dfc68e; font-family:Arial,sans-serif; font-size:9px; font-weight:bold; letter-spacing:.07em; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.realmly-site-header .sign-out { display:grid; place-items:center; width:32px; height:32px; border:1px solid rgba(154,122,66,.55); background:transparent; color:#cdb781; cursor:pointer; font-family:Arial,sans-serif; font-size:17px; line-height:1; transition:background .16s,color .16s,border-color .16s,transform .16s; }.realmly-site-header .sign-out:hover,.realmly-site-header .sign-out:focus-visible { border-color:#e8bd5b; background:rgba(181,126,37,.18); color:#fff0bf; outline:0; transform:translate(1px,-1px); }
@media (max-width:760px) { .site-nav.realmly-site-header { width:calc(100% - 32px); }.site-nav.realmly-site-header { align-items:flex-start; }.realmly-site-header .nav-actions { flex-wrap:wrap; justify-content:flex-end; max-width:210px; }.realmly-site-header .sign-in { font-size:9px; padding:10px; }.realmly-site-header .account-name,.realmly-site-header .account-characters { display:none; }.realmly-site-header .sign-out { font-size:8px; padding:10px; } }
@media (max-width:760px) { .site-nav.realmly-site-header { flex-direction:column; min-height:0; padding:18px 0; gap:16px; }.site-nav.realmly-site-header::after { left:0; right:auto; width:78px; }.realmly-site-header .nav-actions { width:100%; max-width:none; justify-content:flex-start; gap:7px; }.realmly-site-header .nav-explore { gap:0; }.realmly-site-header .nav-link { padding:0 8px; font-size:8px; }.realmly-site-header .nav-upload { min-height:38px; padding:0 10px; font-size:8px; }.realmly-site-header .account-characters { display:flex; }.realmly-site-header .account-copy { display:none; }.realmly-site-header .sign-out { width:32px; height:32px; padding:0; font-size:16px; } }
.realmly-site-header .brand { font-family:var(--font-display); }
.character-settings-button,.character-settings-cancel,.character-settings-save,.character-settings-delete { appearance:none; border:1px solid #916527; background:transparent; color:#efd18d; cursor:pointer; font-family:Arial,sans-serif; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.character-settings-button { align-self:flex-start; margin-top:23px; padding:10px 12px; }
.character-settings-button:hover,.character-settings-button:focus-visible,.character-settings-save:hover,.character-settings-save:focus-visible { border-color:#e3bd67; background:#4c2d10; color:#fff1c7; }
.character-settings-backdrop { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:28px; background:rgba(3,2,2,.77); backdrop-filter:blur(9px); }
.character-settings-dialog { width:min(100%,650px); max-height:min(88svh,760px); overflow:auto; border:1px solid rgba(220,171,74,.68); background:linear-gradient(145deg,#29190e,#100b08 70%); box-shadow:0 28px 90px rgba(0,0,0,.72),inset 0 0 58px rgba(194,117,35,.08); }
.character-settings-top { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; padding:28px 30px 23px; border-bottom:1px solid rgba(220,171,74,.25); }
.character-settings-top .eyebrow { margin-bottom:8px; }
.character-settings-top h2 { margin:0; color:#f1d595; font-size:clamp(31px,5vw,48px); font-weight:400; }
.character-settings-close { width:38px; height:38px; border:1px solid rgba(220,171,74,.44); background:transparent; color:#efcc81; cursor:pointer; font:300 31px/1 Arial,sans-serif; }
.character-settings-close:hover,.character-settings-close:focus-visible { border-color:#e3bd67; background:#4c2d10; }
.character-settings-form { display:grid; padding:29px 30px 31px; }
.character-settings-form label { margin-bottom:10px; color:#efd293; font-family:Arial,sans-serif; font-size:11px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.character-settings-hint { max-width:535px; margin:0 0 18px; color:#baaa8d; font-size:16px; line-height:1.55; }
.character-settings-presets-label { margin:0 0 9px; color:#a98c5b; font-family:Arial,sans-serif; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.character-settings-presets { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 19px; }
.character-settings-preset { border:1px solid rgba(188,135,49,.5); background:rgba(82,51,18,.24); color:#dec282; cursor:pointer; padding:8px 10px; font-family:Arial,sans-serif; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:background .16s,border-color .16s,color .16s; }
.character-settings-preset:hover,.character-settings-preset:focus-visible { border-color:#e3bd67; background:#4c2d10; color:#fff1c7; outline:0; }
.character-settings-form textarea { width:100%; min-height:180px; resize:vertical; box-sizing:border-box; padding:15px; border:1px solid rgba(220,171,74,.38); outline:0; background:rgba(7,5,4,.72); color:#f0dec0; font:16px/1.55 Georgia,serif; }
.character-settings-form textarea:focus { border-color:#e3bd67; box-shadow:0 0 0 2px rgba(227,189,103,.13); }
.character-settings-count { justify-self:end; margin-top:7px; color:#947c54; font-family:Arial,sans-serif; font-size:10px; letter-spacing:.08em; }
.character-settings-status { min-height:1.4em; margin:18px 0 0; color:#cfb17a; font-size:14px; line-height:1.4; }
.character-settings-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:15px; }
.character-settings-cancel,.character-settings-save,.character-settings-delete { padding:12px 15px; }
.character-settings-cancel:hover,.character-settings-cancel:focus-visible { border-color:#bf6e52; color:#f1c3b0; }
.character-settings-delete { margin-right:auto; border-color:#8b4435; color:#e4a392; }
.character-settings-delete:hover,.character-settings-delete:focus-visible { border-color:#e07a61; background:#512417; color:#ffe0d1; }
.character-settings-save:disabled { cursor:wait; opacity:.7; }
.character-settings-delete:disabled { cursor:wait; opacity:.7; }
@media (max-width:760px) {
  .character-settings-backdrop { align-items:end; padding:12px; }
  .character-settings-dialog { max-height:92svh; }
  .character-settings-top,.character-settings-form { padding-inline:20px; }
  .character-settings-actions { justify-content:stretch; }
  .character-settings-actions button { flex:1; }
}
.realmly-site-header .account-menu {
  position:relative;
}

.realmly-site-header .account-menu-trigger {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:4px 7px 4px 4px;
  border:1px solid transparent;
  background:transparent;
  color:#d9bc79;
  cursor:pointer;
  text-align:left;
}

.realmly-site-header .account-menu-trigger:hover,
.realmly-site-header .account-menu-trigger:focus-visible,
.realmly-site-header .account-menu-trigger[aria-expanded="true"] {
  border-color:rgba(223,178,79,.47);
  background:rgba(181,126,37,.12);
  outline:0;
}

.realmly-site-header .account-menu-chevron {
  color:#cba45d;
  font:12px/1 Arial,sans-serif;
  transition:transform .16s;
}

.realmly-site-header .account-menu-trigger[aria-expanded="true"] .account-menu-chevron {
  transform:rotate(180deg);
}

.realmly-site-header .active-character-profile {
  display:flex;
  align-items:center;
  gap:7px;
  padding:3px 7px 3px 3px;
  border:1px solid rgba(216,168,79,.34);
  color:#dfc68e;
  font-family:Arial,sans-serif;
  font-size:8px;
  font-weight:bold;
  letter-spacing:.08em;
  text-decoration:none;
  text-transform:uppercase;
}

.realmly-site-header .active-character-profile .account-character-avatar {
  width:27px;
  height:27px;
  font-size:11px;
}

.realmly-site-header .active-character-profile:hover,
.realmly-site-header .active-character-profile:focus-visible {
  border-color:#edc66a;
  background:rgba(132,78,23,.25);
  color:#fff0b9;
  outline:0;
}

.realmly-site-header .account-dropdown {
  position:absolute;
  z-index:40;
  top:calc(100% + 10px);
  right:38px;
  width:min(340px,calc(100vw - 32px));
  padding:8px;
  border:1px solid rgba(220,171,74,.56);
  background:linear-gradient(145deg,rgba(45,28,14,.99),rgba(16,11,8,.99));
  box-shadow:0 20px 48px rgba(0,0,0,.5),inset 0 0 35px rgba(198,122,35,.07);
}

.realmly-site-header .account-dropdown[hidden] {
  display:none;
}

.realmly-site-header .account-dropdown-account,
.realmly-site-header .account-dropdown-empty {
  display:block;
  padding:13px 12px;
  border:1px solid rgba(216,168,79,.36);
  color:#f0d18a;
  font-family:Arial,sans-serif;
  font-size:9px;
  font-weight:bold;
  letter-spacing:.13em;
  text-decoration:none;
  text-transform:uppercase;
}

.realmly-site-header .account-dropdown-account:hover,
.realmly-site-header .account-dropdown-account:focus-visible,
.realmly-site-header .account-dropdown-empty:hover,
.realmly-site-header .account-dropdown-empty:focus-visible {
  border-color:#edc66a;
  background:rgba(132,78,23,.35);
  color:#fff0b9;
  outline:0;
}

.realmly-site-header .account-dropdown-label {
  margin:16px 5px 7px;
  color:#9c835a;
  font-family:Arial,sans-serif;
  font-size:8px;
  font-weight:bold;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.realmly-site-header .account-dropdown-character {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  border-top:1px solid rgba(216,168,79,.2);
}

.realmly-site-header .account-dropdown-character-select {
  display:flex;
  align-items:center;
  min-width:0;
  gap:10px;
  width:100%;
  padding:10px 8px;
  border:0;
  background:transparent;
  color:#ead2a0;
  cursor:pointer;
  font-family:Georgia,serif;
  font-size:16px;
  text-align:left;
  text-decoration:none;
}

.realmly-site-header .account-dropdown-character-select small {
  margin-left:auto;
  color:#9c835a;
  font-family:Arial,sans-serif;
  font-size:7px;
  font-weight:bold;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.realmly-site-header .account-dropdown-character.is-active .account-dropdown-character-select small {
  color:#efca75;
}

.realmly-site-header .account-dropdown-character-select:hover,
.realmly-site-header .account-dropdown-character-select:focus-visible,
.realmly-site-header .account-dropdown-character.is-active .account-dropdown-character-select {
  color:#fff0bf;
  background:rgba(178,112,32,.16);
  outline:0;
}

.realmly-site-header .account-character-avatar {
  position:relative;
  display:grid;
  flex:none;
  place-items:center;
  width:34px;
  height:34px;
  overflow:hidden;
  border:1px solid rgba(232,191,96,.7);
  border-radius:50%;
  background:#553216;
  color:#f4d589;
  font-size:15px;
  font-weight:bold;
}

.realmly-site-header .account-character-avatar img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.realmly-site-header .account-dropdown-settings {
  width:36px;
  height:36px;
  margin-right:5px;
  border:1px solid rgba(216,168,79,.34);
  background:transparent;
  color:#dcb76d;
  cursor:pointer;
  font-size:0;
}

.realmly-site-header .account-dropdown-settings::before {
  content:'⚙';
  font-size:17px;
}

.realmly-site-header .account-dropdown-settings:hover,
.realmly-site-header .account-dropdown-settings:focus-visible {
  border-color:#edc66a;
  background:rgba(132,78,23,.35);
  color:#fff0b9;
  outline:0;
}

@media (max-width:760px) {

  .realmly-site-header .account-dropdown {
    right:0;
    width:min(340px,calc(100vw - 32px));
  }
}
.site-nav.realmly-site-header { z-index:60; gap:24px; flex-wrap:nowrap; }
.realmly-site-header .brand { flex:none; margin:0; padding:0; border:0; background:none; font:400 22px/1.3 Cinzel,Georgia,serif; white-space:nowrap; text-transform:none; }
.realmly-site-header .nav-actions { flex:none; max-width:none; }
.realmly-site-header .nav-link,.realmly-site-header .nav-upload { white-space:nowrap; }
.realmly-site-header .nav-link[aria-current="page"] { color:#fff0bf; background:rgba(205,146,47,.14); box-shadow:inset 0 -1px 0 #e5b756; }
.realmly-site-header .account-menu { position:relative; }
.realmly-site-header .account-dropdown { line-height:1.3; }
.realmly-site-header .account-dropdown-character-select { margin:0; }
.realmly-site-header .account-dropdown-character-select small { text-transform:uppercase; }
.character-settings-backdrop h2 { font-family:Cinzel,Georgia,serif; }
@media (max-width:1100px) {
 .site-nav.realmly-site-header { flex-wrap:wrap; gap:16px; }
 .site-nav.realmly-site-header .nav-actions { flex-wrap:wrap; max-width:none; justify-content:flex-end; }
}
@media (max-width:760px) {
 .site-nav.realmly-site-header { width:calc(100% - 32px); align-items:flex-start; }
 .site-nav.realmly-site-header .nav-actions { width:100%; justify-content:space-between; gap:12px; }
 .realmly-site-header .nav-explore { flex:1 1 100%; justify-content:space-between; }
 .realmly-site-header .nav-link { padding:0 8px; letter-spacing:.08em; }
}
@media (prefers-reduced-motion:reduce) { .realmly-site-header * { transition:none; } }
@media print { .realmly-site-header { display:none!important; } }

@media (max-width:760px) { .realmly-site-header #account-controls { margin-left:auto; } }
@media (max-width:480px) { .realmly-site-header .active-character-profile > span:last-child { display:none; } }
