/* reppo.games canonical header module - scoped, self-contained styles.
   Everything is namespaced under .reppo-header / .rh-* and the module ships its
   OWN light/dark palette keyed on the root [data-rh-theme] attribute (with a
   prefers-color-scheme fallback when no choice is stored). It does NOT read the
   host page's --bg / --text / etc., so it drops into any game unchanged.

   Theme source of truth is the cross-subdomain `reppo-theme` cookie; a pre-paint
   inline snippet (see README) sets [data-rh-theme] before first paint so there
   is no flash. header.js keeps it in sync on toggle. */

/* ---- own palette (light defaults) ---- */
.reppo-header {
  --rh-bar-bg: rgba(248,247,245,0.62);
  --rh-hairline: rgba(0,0,0,0.07);
  --rh-text: #1c1c1e;
  --rh-text-3: rgba(0,0,0,0.34);
  --rh-btn-bg: rgba(255,255,255,0.5);
  --rh-btn-border: rgba(255,255,255,0.7);
  --rh-btn-bg-hover: rgba(255,255,255,0.78);
  --rh-btn-border-hover: rgba(255,255,255,0.95);
  --rh-focus: #3b6fe0;
  /* width of the centred inner bar; override per host if needed */
  --rh-max: 1060px;
}

/* explicit dark choice */
:root[data-rh-theme="dark"] .reppo-header {
  --rh-bar-bg: rgba(22,22,26,0.6);
  --rh-hairline: rgba(255,255,255,0.09);
  --rh-text: #f3f3f6;
  --rh-text-3: rgba(255,255,255,0.42);
  --rh-btn-bg: rgba(255,255,255,0.08);
  --rh-btn-border: rgba(255,255,255,0.14);
  --rh-btn-bg-hover: rgba(255,255,255,0.16);
  --rh-btn-border-hover: rgba(255,255,255,0.22);
  --rh-focus: #8ab4ff;
}

/* no stored choice -> follow the OS (keeps parity with the no-JS fallback) */
@media (prefers-color-scheme: dark) {
  :root:not([data-rh-theme="light"]):not([data-rh-theme="dark"]) .reppo-header {
    --rh-bar-bg: rgba(22,22,26,0.6);
    --rh-hairline: rgba(255,255,255,0.09);
    --rh-text: #f3f3f6;
    --rh-text-3: rgba(255,255,255,0.42);
    --rh-btn-bg: rgba(255,255,255,0.08);
    --rh-btn-border: rgba(255,255,255,0.14);
    --rh-btn-bg-hover: rgba(255,255,255,0.16);
    --rh-btn-border-hover: rgba(255,255,255,0.22);
    --rh-focus: #8ab4ff;
  }
}

/* ---- self-contained resets ---- */
.reppo-header, .reppo-header *, .reppo-header *::before, .reppo-header *::after { box-sizing: border-box; }

/* ---- bar ---- */
.reppo-header {
  position: sticky; top: 0; z-index: 20; width: 100%;
  background: var(--rh-bar-bg);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 0.5px solid var(--rh-hairline);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
  color: var(--rh-text);
}
.rh-bar {
  display: flex; align-items: center; justify-content: space-between; min-height: 52px;
  width: 100%; max-width: var(--rh-max); margin: 0 auto; padding: 0 20px;
}
@media (min-width: 760px) { .rh-bar { padding: 0 32px; } }

/* ---- brand ---- */
.rh-brand { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; letter-spacing: -0.02em; color: var(--rh-text); text-decoration: none; }
.rh-brand-mark { width: 22px; height: 22px; border-radius: 7px; background: linear-gradient(150deg,#7aa7ff,#b98cff); box-shadow: 0 1px 3px rgba(90,80,200,0.35), inset 0 1px 1px rgba(255,255,255,0.6); display: inline-block; }
.rh-brand-tld { color: var(--rh-text-3); font-weight: 500; }

/* ---- toggle ---- */
.rh-toggle {
  appearance: none; -webkit-appearance: none; cursor: pointer; width: 44px; height: 44px; margin-right: -10px;
  display: flex; align-items: center; justify-content: center; border-radius: 14px;
  border: 0.5px solid var(--rh-btn-border); background: var(--rh-btn-bg);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3);
  color: var(--rh-text);
  transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.rh-toggle:active { transform: scale(.93); }
@media (hover:hover) {
  .rh-toggle:hover { background: var(--rh-btn-bg-hover); border-color: var(--rh-btn-border-hover); }
}

.rh-ic-moon { width: 17px; height: 17px; border-radius: 50%; box-shadow: inset -5px -3px 0 0 var(--rh-text); }
.rh-ic-sun {
  width: 8px; height: 8px; border-radius: 50%; background: var(--rh-text);
  box-shadow: 0 -10px 0 -2px var(--rh-text), 0 10px 0 -2px var(--rh-text), 10px 0 0 -2px var(--rh-text), -10px 0 0 -2px var(--rh-text),
    7px 7px 0 -3px var(--rh-text), -7px 7px 0 -3px var(--rh-text), 7px -7px 0 -3px var(--rh-text), -7px -7px 0 -3px var(--rh-text);
}
/* icon follows effective theme: moon in light, sun in dark */
.rh-ic-sun { display: none; }
:root[data-rh-theme="dark"] .reppo-header .rh-ic-sun { display: block; }
:root[data-rh-theme="dark"] .reppo-header .rh-ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-rh-theme="light"]):not([data-rh-theme="dark"]) .reppo-header .rh-ic-sun { display: block; }
  :root:not([data-rh-theme="light"]):not([data-rh-theme="dark"]) .reppo-header .rh-ic-moon { display: none; }
}

/* ---- focus ring (scoped, not global) ---- */
.rh-toggle:focus-visible, .rh-brand:focus-visible { outline: 2px solid var(--rh-focus); outline-offset: 2px; border-radius: 6px; }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .rh-toggle { transition: background .2s ease, border-color .2s ease; }
  .rh-toggle:active { transform: none; }
}