/* ============================================================
   THE RED DOOR SKIN — the NC-17 flip (build 2026.11.01.12)

   When a member turns the Red Door key (nc17_enabled), the whole
   signed-in house puts on its after-dark skin: deeper blacks,
   ember-and-velvet reds, candlelight that pools at the edges of
   the room. It is ONE theme state — the class `nc17` on the root
   element, switching the design tokens every surface already
   reads — never a page-by-page restyle, so every current and
   future surface inherits the dark.

   It is a SKIN ONLY. No gate, price, permission or consent moves
   with it: the Red Door's own consent rules live in the content
   code as they always have; this sheet could be deleted whole
   and the house would behave identically — merely less dressed.

   The class is set by applyNc17Skin() in app.js from the member's
   stored setting (the server's word), mirrored to localStorage
   so the inline boot script in index.html can dress the page
   before first paint — no flash of the day skin for a member
   who sleeps in the dark. Unchecking the key removes the class
   and the mirror, and the standard theme returns untouched:
   nothing in this file reaches a page whose root lacks .nc17.
   ============================================================ */

/* The flip itself should feel like a door closing on lamplight:
   a slow breath of color, never a jump cut. The transition lives
   on the body alone and changes nothing at rest. */
body { transition: background-color .8s ease, color .8s ease; }

html.nc17 {
  --bg: #030204;
  --bg2: #0a0308;
  --card: rgba(27, 5, 12, .88);
  --card2: rgba(40, 8, 19, .72);
  --line: rgba(229, 56, 59, .42);
  --line-gold: rgba(232, 179, 75, .42);
  --txt: #f4e9db;
  --muted: #cf9aa1;
  --dim: #96666f;
  --blood: #c1121f;
  --blood2: #ff3b47;
  --purple: #7d1f3f;
  --purple-deep: #1e0716;
  --gold: #dda92f;
  --candle: #ffb85c;
  --grad: linear-gradient(135deg, #931120, #611233 55%, #130610);
  --grad-btn: linear-gradient(135deg, #ab1622, #711238);
}

/* Candlelight pools at the top corners and a slow ember-glow
   rises from the floor — layered over the base black, under
   everything the member touches. */
html.nc17 body {
  background:
    radial-gradient(56rem 30rem at 10% -8%, rgba(255, 122, 60, .11), transparent 60%),
    radial-gradient(48rem 26rem at 90% -6%, rgba(229, 56, 59, .11), transparent 60%),
    radial-gradient(72rem 42rem at 50% 118%, rgba(125, 31, 63, .13), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* The vignette deepens — the room leans closer. */
html.nc17 body::after {
  background: radial-gradient(ellipse at center, transparent 44%, rgba(0, 0, 0, .8) 100%);
}

/* The brand burns a little hotter behind the Red Door. */
html.nc17 .brand {
  color: #ffd9a8;
  text-shadow: 0 0 14px rgba(255, 150, 80, .45), 0 0 34px rgba(229, 56, 59, .25);
}
html.nc17 .brand-dot { color: var(--blood2); text-shadow: 0 0 10px rgba(255, 59, 71, .8); }
html.nc17 #topbar {
  background: linear-gradient(180deg, rgba(20, 3, 9, .92), rgba(10, 2, 6, .86));
  border-bottom-color: rgba(229, 56, 59, .35);
  box-shadow: 0 10px 34px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 150, 80, .07);
}

/* Cards become chambers: heavier shadow, a whisper of blood in
   the glass, candlelight caught on the upper edge. */
html.nc17 .card {
  box-shadow: 0 16px 44px rgba(0, 0, 0, .6), inset 0 0 34px rgba(163, 22, 33, .055), inset 0 1px 0 rgba(255, 184, 92, .07);
}

/* Gold burns like a real flame after dark. */
html.nc17 .btn-gold {
  box-shadow: 0 0 20px rgba(255, 150, 80, .32), 0 6px 20px rgba(0, 0, 0, .45);
}
html.nc17 .btn-gold:hover { box-shadow: 0 0 28px rgba(255, 150, 80, .5), 0 6px 22px rgba(0, 0, 0, .5); }

/* Headings take the candle's color in the dark. */
html.nc17 .page h1, html.nc17 .page h2 {
  text-shadow: 0 0 22px rgba(255, 150, 80, .14);
}

/* What the member touches answers in ember. */
html.nc17 ::selection { background: #a31621; color: #ffe9d6; }
html.nc17 ::-webkit-scrollbar { width: 10px; }
html.nc17 ::-webkit-scrollbar-track { background: #07030a; }
html.nc17 ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #6d1120, #3d0a1c); border-radius: 6px; }

/* Inputs sit lower in the dark, with the flame at their focus. */
html.nc17 .input, html.nc17 input[type="text"], html.nc17 input[type="email"],
html.nc17 input[type="password"], html.nc17 textarea, html.nc17 select {
  background-color: rgba(10, 2, 7, .72);
}
html.nc17 .input:focus, html.nc17 textarea:focus, html.nc17 select:focus {
  outline: none;
  border-color: rgba(255, 150, 80, .55);
  box-shadow: 0 0 0 3px rgba(229, 56, 59, .18), 0 0 18px rgba(255, 150, 80, .14);
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}