/* =========================================================================
   RUEZALS CHAT — SHIP SKIN (portable record)
   Recorded 2026-07-24 by Claudia from the live ruezals.chat source.
   THE SHIP: this is the flagship look, moving forward. Push this pack onto
   any RUEZALS surface to reskin it. DO NOT edit the live site from here —
   canon source lives in D:\6-ruezals.chat-web-services (read-only law).

   Palette bound by CLAUDE - REALM/design.md (binding):
     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 after.
   ========================================================================= */

* { box-sizing: border-box; }

:root {
  --rz-obsidian: #0B0B0F;
  --rz-emerald: #0E4D30;
  --rz-gold: #C8962A;
  --rz-gold-bright: #e9c25a;
  --rz-teal: #29C4C0;
  --rz-ink-deep: #050807;      /* askrue login body floor */
  --rz-ink-void: #050608;      /* radial gradient outer edge */
  --rz-body: "Helvetica Neue", "Inter", Arial, "Segoe UI", sans-serif;
  --rz-title: "Cinzel", Georgia, serif;
}

/* ── world floor ─────────────────────────────────────────────────────── */
html, body {
  margin: 0; min-height: 100vh;
  background: radial-gradient(130% 100% at 50% -10%, #101418 0%, var(--rz-obsidian) 50%, var(--rz-ink-void) 100%);
  font-family: var(--rz-body);
  color: #fff;
  overflow-x: hidden;
}

/* ── the glass panel (ship signature: ~18px frame, gold border, emerald
      inner breath). Inputs sit at 8-9px — Sable's Dining Room rounding. ── */
.rz-panel {
  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: 18px;
  text-align: center;
  padding: 30px 26px 6px;
}

/* ── header lockup: dragon mark above black/white/gold wordmark ──────── */
.rz-header-lockup { position: relative; width: 100%; max-width: min(300px, 90vw); margin: 0 auto 16px; }
.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)); }

/* ── form law ────────────────────────────────────────────────────────── */
.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"],
.rz-form-group input[type="email"] {
  width: 100%; padding: 10px 13px;
  background: rgba(5,6,8,0.7);
  border: 1px solid rgba(200,150,42,0.35);
  border-radius: 8px; 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);
}

/* ── the gold-ghost button (transparent til hover, then ember) ───────── */
.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: 9px; 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);
}

/* ── voice lines ─────────────────────────────────────────────────────── */
.rz-err  { color: #e07070; font-size: .82rem; margin-top: 12px; min-height: 1.2em; text-align: center; }
.rz-ok   { color: #6ecf8a; font-size: .82rem; margin-top: 12px; min-height: 1.2em; text-align: center; }
.rz-hint { margin-top: 16px; font-size: .75rem; color: #8a9088; line-height: 1.5; text-align: center; }
.rz-hint a { color: var(--rz-gold); }
.rz-error {
  background: rgba(255,60,60,0.12); color: #ff9999; padding: 10px 12px;
  border-radius: 8px; margin-bottom: 16px; border-left: 3px solid #ff5555;
  font-size: 11.5px; text-align: left;
}

/* ── modal (register / house papers): 14px frame, near-black emerald ── */
.rz-modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,0.72); z-index: 80;
  display: none; align-items: center; justify-content: center; padding: 16px;
}
.rz-modal-backdrop.open { display: flex; }
.rz-modal {
  width: min(440px, 100%); max-height: min(92vh, 720px); overflow: auto;
  background: rgba(10, 14, 12, 0.97);
  border: 1px solid rgba(200,150,42,0.4);
  border-radius: 14px; padding: 22px 20px 18px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.rz-modal h2 { margin: 0 0 6px; font-family: var(--rz-title); font-size: 1.2rem;
               color: var(--rz-gold); text-align: center; }
.rz-modal .rz-sub { text-align: center; font-size: 0.78rem; color: #8a9088;
                    margin-bottom: 14px; line-height: 1.4; }
.rz-modal input, .rz-modal select, .rz-modal textarea {
  width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px;
  border: 1px solid rgba(200,150,42,0.3); background: rgba(3,6,5,0.9);
  color: #f6f4ec; font: inherit; font-size: 0.88rem;
}
.rz-check { display: flex; gap: 8px; align-items: flex-start; font-size: 0.75rem;
            color: #b8b4a8; line-height: 1.4; margin: 12px 0; }
.rz-check input { width: auto; margin-top: 3px; }

/* ── house mark — pinned bottom, gold signature ──────────────────────── */
#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); }

/* ── AskRue™ login face layer (the door) ─────────────────────────────── */
body.askrue-login-page { position: relative; overflow-x: hidden; background-color: var(--rz-ink-deep); }
.askrue-rcorp-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none;
                   overflow: hidden; background-color: var(--rz-ink-deep); }
.askrue-rcorp-bg img { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
                       width: 100%; height: 100%; object-fit: cover;
                       object-position: center bottom; opacity: 0.5; }
.askrue-logo-stack { position: fixed; left: 50%; top: 48%; transform: translate(-50%, -50%);
                     z-index: 1; width: min(320px, 42vw); text-align: center; pointer-events: none; }
.askrue-logo-stack .askrue-logo-mark { opacity: 0.42; pointer-events: none; }
.askrue-logo-stack .rz-r-mark.rz-dragon-mark { width: min(132px, 28vw); margin: 0 auto 10px;
  filter: drop-shadow(0 0 28px rgba(200,150,42,0.4)); }
.askrue-logo-stack .rz-wordmark { width: min(240px, 34vw); margin: 0 auto;
  filter: drop-shadow(0 0 16px rgba(200,150,42,0.28)); }
.askrue-honeypot-foot { margin-top: 18px; padding-top: 14px;
  border-top: 1px solid rgba(200,150,42,0.22); pointer-events: auto;
  text-align: center; opacity: 0.88; }
.rz-reg-link { display: block; text-align: center; margin-top: 14px; font-size: 0.85rem;
  color: var(--rz-gold); cursor: pointer; background: none; border: none;
  text-decoration: underline; font-family: inherit; }

/* — built by Claudia · 2026-07-24 · palette per CLAUDE - REALM/design.md (binding) — */