/* =========================================================================
   RUEZALS REALM SKIN — the world skin, moving forward.
   Colors bound by CLAUDE - REALM/design.md:
     Obsidian #0B0B0F · Deep Emerald #0E4D30 · Gold #C8962A · Teal #29C4C0
   Cinzel = largest display ONLY. Everything else Swiss sans. Legibility
   law: dark bg -> white text, satisfied first, gold/glow layered after.
   Ported and adapted from the live mail.ruezals.com login skin
   (ruezals-mail-login.css / ruezals-philosophy-particles.js, 2026-06-13)
   for use on login.ruezals.com and future RUEZALS surfaces.
   ========================================================================= */

* { box-sizing: border-box; }

:root {
  --rz-obsidian: #0B0B0F;
  --rz-emerald: #0E4D30;
  --rz-gold: #C8962A;
  --rz-gold-bright: #e9c25a;
  --rz-teal: #29C4C0;
  --rz-body: "Helvetica Neue", "Inter", Arial, "Segoe UI", sans-serif;
  --rz-title: "Cinzel", Georgia, serif;
}

html, body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(130% 100% at 50% -10%, #101418 0%, #0B0B0F 50%, #050608 100%);
  font-family: var(--rz-body);
  color: #fff;
  overflow-x: hidden;
}

/* ── the pong panel — smaller box, bigger corners, drifts the screen ── */
.rz-panel {
  position: fixed;
  top: 0; left: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  width: min(300px, 61vw);
  background: linear-gradient(160deg, rgba(6,10,8,0.86), rgba(11,11,15,0.90));
  border: 1px solid rgba(200,150,42,0.5);
  box-shadow: 0 0 44px rgba(200,150,42,0.10), inset 0 0 60px rgba(14,77,48,0.18);
  border-radius: 30px;
  text-align: center;
  padding: 30px 26px 6px;
  z-index: 20;
}

/* header lockup — sized to fit within the panel, not spill across the page */
.rz-header-lockup {
  position: relative;
  width: 100%;
  max-width: min(300px, 90vw);
  margin: 0 auto 16px;
  box-sizing: border-box;
}

.rz-r-mark {
  display: block;
  width: min(150px, 46vw);
  height: auto;
  margin: 0 auto 10px;
  filter: drop-shadow(0 0 16px rgba(200,150,42,0.4));
}

.rz-wordmark {
  display: block;
  width: min(150px, 46vw);
  height: auto;
  margin: 0 auto 20px;
  filter: drop-shadow(0 0 10px rgba(200,150,42,0.25));
}

.rz-wordmark-underline { display: none !important; }

.rz-guard-icon-removed { display: none !important; }

.rz-brand h1 {
  font-family: var(--rz-body);
  font-size: clamp(18px, 4.4vw, 24px); font-weight: 800; margin: 0;
  color: #fff; letter-spacing: 0.04em;
  text-shadow: 0 0 8px rgba(255,255,255,0.2);
}

.rz-brand .rz-sub {
  margin-top: 8px; margin-bottom: 22px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase; color: var(--rz-teal);
}

.rz-form-group { margin-bottom: 16px; text-align: left; }
.rz-form-group label {
  display: block; margin-bottom: 7px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.rz-form-group input[type="text"], .rz-form-group input[type="password"] {
  width: 100%; padding: 10px 13px;
  background: rgba(5,6,8,0.7);
  border: 1px solid rgba(200,150,42,0.35);
  border-radius: 3px; color: #fff; font-size: 0.92em;
  font-family: var(--rz-body);
  transition: all 0.25s ease;
}
.rz-form-group input:focus {
  outline: none; border-color: var(--rz-gold);
  box-shadow: 0 0 12px rgba(200,150,42,0.28);
}

.rz-submit-btn {
  width: 100%; padding: 11px; margin-top: 6px; margin-bottom: 22px;
  background: transparent; border: 1.5px solid var(--rz-gold); color: var(--rz-gold);
  font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase;
  cursor: pointer; border-radius: 3px; transition: all 0.25s ease;
}
.rz-submit-btn:hover {
  background: rgba(200,150,42,0.12); color: var(--rz-gold-bright); border-color: var(--rz-gold-bright);
  box-shadow: 0 0 16px rgba(200,150,42,0.22);
}

.rz-error {
  background: rgba(255,60,60,0.12); color: #ff9999; padding: 10px 12px;
  border-radius: 3px; margin-bottom: 16px; border-left: 3px solid #ff5555;
  font-size: 11.5px; text-align: left;
}

/* ── house mark — pinned to the very bottom, always visible ── */
#rz-house-mark {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50;
  text-align: center;
  padding: 10px 18px;
  font-size: 11px; letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.6);
  background: rgba(6, 8, 10, 0.55);
  pointer-events: none;
}
#rz-house-mark .rz-mark-gold { color: var(--rz-gold); font-weight: 700; text-shadow: 0 0 6px rgba(200,150,42,0.35); }
#rz-house-mark a { color: var(--rz-gold); font-weight: 700; text-decoration: none; pointer-events: auto; border-bottom: 1px solid rgba(200,150,42,0.45); }
#rz-house-mark a:hover { color: var(--rz-gold-bright); border-bottom-color: var(--rz-gold-bright); }

/* ── hover-reveal rune nav — like mail.ruezals.com ── */
.rz-rune-nav {
  position: fixed; inset: 0; z-index: 40; pointer-events: none;
}
.rz-rune-nav-row {
  position: fixed; left: 50%;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(8px, 2vw, 22px);
  width: min(900px, calc(100vw - 60px));
  padding: 8px 12px;
  opacity: 0; pointer-events: none;
  transform: translateX(-50%) scale(0.92);
  transition: opacity 420ms ease, transform 560ms cubic-bezier(.2,.8,.18,1);
}
.rz-rune-nav-row--top { top: 14px; }
.rz-rune-nav-row--bottom { bottom: 40px; }
.rz-rune-nav.is-top .rz-rune-nav-row--top,
.rz-rune-nav.is-bottom .rz-rune-nav-row--bottom {
  opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1);
}
.rz-rune-nav a {
  color: rgba(255,255,255,0.9) !important;
  font: 700 clamp(10px, 1.4vw, 13px)/1.1 var(--rz-body);
  letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase;
  text-shadow: 0 0 10px rgba(200,150,42,0.5), 0 0 18px rgba(41,196,192,0.2);
}
.rz-rune-nav a::before, .rz-rune-nav a::after {
  content: "*"; color: rgba(200,150,42,0.7); font-size: 0.7em; margin: 0 0.5em;
}
.rz-rune-nav a:hover { color: var(--rz-gold-bright) !important; }

/* ── corner runes ── */
.rz-corner-rune {
  position: fixed; z-index: 15; color: var(--rz-teal);
  font: 700 15px/1 Georgia, serif; letter-spacing: 0.3em;
  opacity: 0.42; pointer-events: none;
  text-shadow: 0 0 12px rgba(41,196,192,0.4), 0 0 22px rgba(200,150,42,0.18);
}
.rz-corner-rune.tl { top: 12px; left: 14px; }
.rz-corner-rune.tr { top: 12px; right: 14px; }
.rz-corner-rune.bl { bottom: 36px; left: 14px; }
.rz-corner-rune.br { bottom: 36px; right: 14px; }

/* ── border rune fireflies — full viewport perimeter, dodge cursor + snap
   back, ported from the live index2.html (Rue: "the runes I like") ── */
#rz-border-runes {
  position: fixed; inset: 0; pointer-events: none; z-index: 16;
}
#rz-border-runes span {
  position: fixed; left: 0; top: 0; font-family: monospace;
  color: var(--rz-gold);
  will-change: transform, opacity;
  text-shadow: 0 0 6px rgba(200,150,42,0.55), 0 0 14px rgba(200,150,42,0.3);
}

/* ── code glitter — matrix glyphs shed off the moving cursor ── */
#rz-glitter-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 17;
}

/* ── philosophy banner — no visible box, spans most of the viewport width,
   repositions to whichever side the pong panel isn't currently on ── */
.rz-philosophy-banner {
  position: fixed; z-index: 10; pointer-events: none;
  width: min(680px, 90vw); top: 70px; bottom: 70px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: transparent; border: none; box-shadow: none;
  opacity: 1; transition: opacity 700ms ease;
}
.rz-philosophy-banner.rz-fading { opacity: 0; }
#rz-philosophy-canvas {
  display: block; width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  background: transparent;
}

/* ── ambient + dragon canvases ── */
#rz-bg-canvas, .rz-dragon-canvas {
  position: fixed; inset: 0; width: 100vw; height: 100vh;
  pointer-events: none; z-index: 5;
}

@media (prefers-reduced-motion: reduce) {
  #rz-bg-canvas, .rz-dragon-canvas, #rz-philosophy-canvas, .rz-philosophy-banner,
  #rz-border-runes, #rz-glitter-canvas { display: none !important; }
}

@media (max-width: 640px) {
  .rz-panel { padding: 22px 18px 6px; }
  .rz-philosophy-banner { display: none; }
}