/* ==========================================================================
   BoundRealms — shared design layer
   Loaded AFTER each page's inline <style>, so it re-tokens and upgrades the
   shared components (nav, buttons, section titles, footer, cookie, toast)
   without touching page-specific layout.
   Palette is drawn from the crest: ink-indigo ground, gold crown, ruby jewels.
   ========================================================================== */

/* ── Fonts (self-hosted: Hebrew + Latin subsets) ─────────────────────────── */
@font-face { font-family:'Frank Ruhl Libre'; font-weight:300 900; font-style:normal; font-display:swap;
  src:url(/fonts/frank-he.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Frank Ruhl Libre'; font-weight:300 900; font-style:normal; font-display:swap;
  src:url(/fonts/frank-lat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
/* Older pages say `font-family: Georgia, serif` for display type. Alias that
   name to the display face so every page picks it up without edits. */
@font-face { font-family:'Georgia'; font-weight:300 900; font-style:normal; font-display:swap;
  src:url(/fonts/frank-he.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Georgia'; font-weight:300 900; font-style:normal; font-display:swap;
  src:url(/fonts/frank-lat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Heebo'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url(/fonts/heebo-he.woff2) format('woff2');
  unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Heebo'; font-weight:100 900; font-style:normal; font-display:swap;
  src:url(/fonts/heebo-lat.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* ── Tokens ──────────────────────────────────────────────────────────────── */
:root {
  --bg:#0B0716;  --bg-card:#130D26;  --bg-card2:#1A1235;
  --border:#2C2250;
  --gold:#C9A227;  --gold-dim:#8A6F1C;  --gold-light:#EBC95E;  --gold-ink:#E3C15A;
  --ruby:#C4283C;  --purple:#5932B8;
  --text:#F2EBD8;  --text-muted:#A79DC8;  --text-dim:#8379AB;
  --ok:#27AE60;
  --nav-bg:rgba(11,7,22,.82);
  --shadow:0 18px 50px -18px rgba(0,0,0,.65);
  --radius:12px;
  --font-display:'Frank Ruhl Libre','Georgia',serif;
  --font-body:'Heebo',-apple-system,BlinkMacSystemFont,'Segoe UI','Arial Hebrew',sans-serif;
  color-scheme:dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#F6F1E6;  --bg-card:#FFFCF4;  --bg-card2:#EEE6D3;
    --border:#D8CBAE;
    --gold-dim:#A8841A;  --gold-ink:#7E6006;
    --text:#1C1533;  --text-muted:#51467A;  --text-dim:#6E6490;
    --nav-bg:rgba(246,241,230,.86);
    --shadow:0 18px 40px -20px rgba(60,40,10,.35);
    color-scheme:light;
  }
  #stars { display:none; }
}

/* ── Base ────────────────────────────────────────────────────────────────── */
html { scrollbar-color:var(--border) var(--bg); }
body { font-family:var(--font-body); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
button, input, select, textarea { font-family:inherit; }
h1, h2, .serif { text-wrap:balance; }
::selection { background:var(--gold); color:#150E02; }
:focus-visible { outline:2px solid var(--gold-ink); outline-offset:3px; border-radius:6px; }
#stars { opacity:.5; }
.gold-text { background:linear-gradient(120deg,var(--gold-ink) 10%,var(--gold-light) 50%,var(--gold) 90%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
@media (prefers-color-scheme: light) {
  .gold-text { background:linear-gradient(120deg,#7E6006,#A8841A 55%,#7E6006); -webkit-background-clip:text; background-clip:text; }
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
nav { background:var(--nav-bg); backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25); border-bottom:1px solid var(--border); }
nav::after { content:''; position:absolute; inset-inline:0; bottom:-1px; height:1px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent); opacity:.5; pointer-events:none; }
.nav-inner { height:64px; }
.nav-brand { font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:.01em; color:var(--text) !important; }
.nav-brand:hover { color:var(--gold-ink) !important; }
.nav-brand img { border-radius:8px; box-shadow:0 0 0 1px var(--gold-dim); }
.nav-links { gap:28px; font-size:.92rem; }
.nav-links a { color:var(--text-muted); }
.nav-links a:hover { color:var(--text); }
.nav-links > a:not(.nav-cta):not(.nav-login) { position:relative; padding-block:6px; }
.nav-links > a:not(.nav-cta):not(.nav-login)::after { content:''; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:center; transition:transform .25s ease; }
.nav-links > a:not(.nav-cta):not(.nav-login):hover::after { transform:scaleX(1); }
.nav-login { border-color:var(--border); color:var(--text-muted); border-radius:8px; }
.nav-login:hover { border-color:var(--gold-dim); color:var(--text); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn-primary, .nav-cta, .btn-card-gold {
  background:linear-gradient(180deg,var(--gold-light) 0%,var(--gold) 100%);
  color:#150E02 !important; font-weight:700;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 8px 22px -10px rgba(201,162,39,.7);
}
.btn-primary:hover, .nav-cta:hover, .btn-card-gold:hover {
  background:linear-gradient(180deg,#F4D878 0%,var(--gold-light) 100%) !important;
  color:#150E02 !important;
}
.btn-primary, .btn-ghost, .btn-card, .nav-cta { border-radius:9px; }
.btn-ghost { border-color:var(--border); color:var(--text-muted); }
.btn-ghost:hover { border-color:var(--gold-dim); color:var(--text); background:rgba(201,162,39,.06); }

/* ── Headings & ornament ─────────────────────────────────────────────────── */
.section-title { font-family:var(--font-display); font-weight:700; letter-spacing:-.005em; }
.divider { height:1px; width:140px; background:linear-gradient(90deg,transparent,var(--gold-dim),transparent); border-radius:0; position:relative; overflow:visible; }
.divider::after { content:''; position:absolute; left:50%; top:50%; width:7px; height:7px; background:var(--gold); transform:translate(-50%,-50%) rotate(45deg); box-shadow:0 0 0 4px var(--bg); }
.section-alt .divider::after { box-shadow:0 0 0 4px var(--bg-card2); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
footer { border-top:1px solid var(--border); background:linear-gradient(180deg,transparent,rgba(201,162,39,.05)); }
.footer-logo { font-family:var(--font-display); color:var(--text); }
.footer-links a:hover { color:var(--gold-ink); }

/* ── Cookie banner & toast ───────────────────────────────────────────────── */
#cookie-banner { background:var(--bg-card); border-top:1px solid var(--border); box-shadow:0 -12px 40px -12px rgba(0,0,0,.5); }
.btn-cookie-accept { background:var(--gold); color:#150E02; border-radius:8px; }
.btn-cookie-decline { border-radius:8px; }
.toast { border-radius:12px; font-family:var(--font-body); }

/* ── Scroll reveal (progressive: only hides when JS is present) ──────────── */
.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay:var(--rd,0s); }
.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto !important; }
}


/* ==========================================================================
   Preferences: fonts, theme, text size, language UI  (driven by site.js)
   ========================================================================== */
@font-face { font-family:'Rubik'; font-weight:300 900; font-style:normal; font-display:swap; src:url(/fonts/rubik-he.woff2) format('woff2'); unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F; }
@font-face { font-family:'Rubik'; font-weight:300 900; font-style:normal; font-display:swap; src:url(/fonts/rubik-lat.woff2) format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family:'Rubik'; font-weight:300 900; font-style:normal; font-display:swap; src:url(/fonts/rubik-cyr.woff2) format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Rubik'; font-weight:300 900; font-style:normal; font-display:swap; src:url(/fonts/rubik-ar.woff2) format('woff2'); unicode-range:U+0600-06FF,U+0750-077F,U+FB50-FDFF,U+FE70-FEFC; }

/* Default stack also falls back to Rubik so Cyrillic and Arabic always have a matching face. */
:root { --font-body:'Heebo','Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI','Arial Hebrew',sans-serif; --font-display:'Frank Ruhl Libre','Rubik','Georgia',serif; }
html[data-font="modern"] { --font-body:'Rubik','Heebo',sans-serif; --font-display:'Rubik','Heebo',sans-serif; }
html[data-font="serif"]  { --font-body:'Frank Ruhl Libre','Rubik',serif; --font-display:'Frank Ruhl Libre','Rubik',serif; }
html[data-font="system"] { --font-body:system-ui,-apple-system,'Segoe UI',Roboto,'Arial Hebrew',sans-serif; --font-display:system-ui,-apple-system,'Segoe UI',Roboto,'Arial Hebrew',sans-serif; }
html[data-size="sm"] { font-size:93.75%; }
html[data-size="lg"] { font-size:112.5%; }

/* Manual theme (overrides the OS preference). */
:root[data-theme="dark"] {
  --bg:#0B0716; --bg-card:#130D26; --bg-card2:#1A1235; --border:#2C2250;
  --gold-dim:#8A6F1C; --gold-ink:#E3C15A; --text:#F2EBD8; --text-muted:#A79DC8; --text-dim:#8379AB;
  --nav-bg:rgba(11,7,22,.82); --shadow:0 18px 50px -18px rgba(0,0,0,.65);
  --ok-ink:#6EE7A0; --hero-gold:rgba(201,162,39,.11); --hero-violet:rgba(89,50,184,.30);
  color-scheme:dark;
}
:root[data-theme="dark"] #stars { display:block; }
:root[data-theme="dark"] .gold-text { background:linear-gradient(120deg,var(--gold-ink) 10%,var(--gold-light) 50%,var(--gold) 90%); -webkit-background-clip:text; background-clip:text; }
:root[data-theme="light"] {
  --bg:#F6F1E6; --bg-card:#FFFCF4; --bg-card2:#EEE6D3; --border:#D8CBAE;
  --gold-dim:#A8841A; --gold-ink:#7E6006; --text:#1C1533; --text-muted:#51467A; --text-dim:#6E6490;
  --nav-bg:rgba(246,241,230,.86); --shadow:0 18px 40px -20px rgba(60,40,10,.35);
  --ok-ink:#17703D; --hero-gold:rgba(201,162,39,.20); --hero-violet:rgba(89,50,184,.10);
  color-scheme:light;
}
:root[data-theme="light"] #stars { display:none; }
:root[data-theme="light"] .gold-text { background:linear-gradient(120deg,#7E6006,#A8841A 55%,#7E6006); -webkit-background-clip:text; background-clip:text; }

/* Avoid a flash of Hebrew while the chosen language is applied. */
html[data-pending] { visibility:hidden; }

/* Mirrored layout details when the home page is shown left-to-right. */
html[dir="ltr"] .picker-arrow { transform:scaleX(-1); display:inline-block; }
html[dir="ltr"] .hero::before { background:radial-gradient(640px 460px at 83% 42%,var(--hero-gold),transparent 70%), radial-gradient(760px 560px at 12% 12%,var(--hero-violet),transparent 70%); }
html[dir="ltr"] .d-mark { left:auto; right:-24px; }
html[dir="ltr"] .discord-panel::after { background:radial-gradient(520px 320px at 92% 100%,rgba(88,101,242,.28),transparent 70%); }

/* Preferences button + panel */
.br-fab { position:fixed; inset-inline-end:16px; bottom:calc(16px + var(--br-cookie-h,0px)); z-index:400; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 15px; border-radius:99px; border:1px solid var(--border); background:var(--bg-card); color:var(--text); box-shadow:var(--shadow); cursor:pointer; font:700 .78rem/1 var(--font-body); letter-spacing:.06em; transition:border-color .2s, bottom .3s ease, transform .15s; }
.br-fab:hover { border-color:var(--gold-dim); transform:translateY(-2px); }
.br-fab svg { color:var(--gold-ink); flex-shrink:0; }
.br-panel { position:fixed; inset-inline-end:16px; bottom:calc(72px + var(--br-cookie-h,0px)); z-index:401; width:min(340px,calc(100vw - 32px)); max-height:calc(100vh - 110px); overflow:auto; padding:18px; border-radius:18px; border:1px solid var(--border); background:var(--bg-card); color:var(--text); box-shadow:0 30px 80px -20px rgba(0,0,0,.6); font-family:var(--font-body); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .2s ease, transform .2s ease, visibility 0s linear .2s, bottom .3s ease; }
.br-panel.open { opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.br-head { display:flex; align-items:center; justify-content:space-between; font-size:1rem; }
.br-x { background:none; border:none; color:var(--text-dim); font-size:1.5rem; line-height:1; cursor:pointer; padding:0 4px; }
.br-x:hover { color:var(--text); }
.br-sec { margin-top:16px; }
.br-sec h3 { font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; }
.br-seg { display:grid; gap:6px; }
.br-2 { grid-template-columns:1fr 1fr; }
.br-3 { grid-template-columns:1fr 1fr 1fr; }
.br-opt { display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:8px 10px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text); cursor:pointer; font-size:.88rem; transition:border-color .15s, background .15s; }
.br-opt:hover { border-color:var(--gold-dim); }
.br-opt[aria-pressed="true"] { border-color:var(--gold); background:rgba(201,162,39,.13); color:var(--gold-ink); font-weight:700; }
.br-a { font-weight:700; line-height:1; }
.br-a-sm { font-size:.8rem; } .br-a-md { font-size:1rem; } .br-a-lg { font-size:1.25rem; }
.br-reset { margin-top:16px; width:100%; min-height:40px; border:1px solid var(--border); border-radius:10px; background:transparent; color:var(--text-muted); cursor:pointer; font:inherit; font-size:.85rem; }
.br-reset:hover { color:var(--text); border-color:var(--gold-dim); }
.br-notice { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; padding:8px 20px; background:var(--bg-card2); border-bottom:1px solid var(--border); color:var(--text-muted); font-size:.85rem; font-family:var(--font-body); }
.br-notice button { border:1px solid var(--border); background:transparent; color:var(--text); border-radius:8px; padding:4px 12px; font:inherit; font-size:.8rem; cursor:pointer; }
.br-notice button:hover { border-color:var(--gold-dim); }
@media (max-width:640px) { .br-fab { height:42px; padding:0 13px; inset-inline-end:12px; } .br-panel { inset-inline-end:12px; } }
@media (prefers-reduced-motion: reduce) { .br-fab, .br-panel { transition:none; } }

/* Cyrillic and Arabic display type: lighter weight, and no letter-spacing (it breaks Arabic joining). */
html[lang="ru"] .hero-title, html[lang="ar"] .hero-title { font-weight:800; font-size:clamp(2.2rem,5.2vw,3.9rem); line-height:1.12; letter-spacing:0; }
html[lang="ar"] * { letter-spacing:0 !important; }

/* Nav labels never wrap; with a longer language or larger text, the bar tightens up so it stays on one line. */
.nav-cta, .nav-login, .nav-brand { white-space:nowrap; }
@media (max-width:480px) {
  html:is([data-lang="en"],[data-lang="ru"],[data-lang="ar"],[data-size="lg"]) .nav-inner { gap:8px; padding-inline:14px; }
  html:is([data-lang="en"],[data-lang="ru"],[data-lang="ar"],[data-size="lg"]) .nav-links { gap:8px; }
  html:is([data-lang="en"],[data-lang="ru"],[data-lang="ar"],[data-size="lg"]) .nav-brand { min-width:0; overflow:hidden; font-size:.95rem; gap:8px; }
  html:is([data-lang="en"],[data-lang="ru"],[data-lang="ar"],[data-size="lg"]) .nav-brand img { width:26px; height:26px; }
  html:is([data-lang="en"],[data-lang="ru"],[data-lang="ar"],[data-size="lg"]) .nav-login { padding:5px 9px; font-size:.78rem; }
  html:is([data-lang="en"],[data-lang="ru"],[data-lang="ar"],[data-size="lg"]) .nav-cta { padding:7px 11px; font-size:.78rem; }
}

/* AdSense block (placed above the footer by ads.js). Hidden when Google leaves it unfilled. */
.br-ad { max-width:1060px; margin:40px auto 0; padding:0 24px; text-align:center; }
.br-ad-label { display:block; margin-bottom:6px; font-size:.68rem; letter-spacing:.08em; color:var(--text-dim); }
.br-ad:has(ins[data-ad-status="unfilled"]) { display:none; }