/* =====================================================================
 * EMBER — LIVING GLASS (2026-10-29)
 * A gothic erotic-horror glasshouse over the whole manor: candlelit
 * velvet seen through stained glass. Oxblood, black, ember-gold and
 * candlelight; thorn-and-rose tracery; cathedral arches; a shiver
 * under the beauty. Tasteful art direction only — light, glass, depth.
 *
 * Layered LAST (after style/app/fair) so it restyles the existing
 * components in place. Every effect degrades gracefully:
 *  - no backdrop-filter  → richer translucent gradients + deeper shadow
 *  - prefers-reduced-motion → sheen, tilt, parallax and drift all still
 * ===================================================================== */

:root{
  /* stained-glass tints — light remembered in colour */
  --glass-ruby:rgba(163,22,33,.16);
  --glass-amber:rgba(232,179,75,.13);
  --glass-violet:rgba(91,42,134,.18);
  --glass-rose:rgba(229,56,59,.10);
  --glass-pane:linear-gradient(155deg,rgba(58,26,40,.55),rgba(16,8,18,.62) 55%,rgba(30,12,26,.58));
  --glass-pane-deep:linear-gradient(160deg,rgba(40,18,32,.72),rgba(10,5,14,.78) 60%,rgba(22,9,20,.74));
  --glass-edge:rgba(255,236,200,.16);
  --glass-edge-gold:rgba(201,162,39,.42);
  --glass-spec:linear-gradient(180deg,rgba(255,244,214,.20),rgba(255,244,214,.03) 42%,transparent 60%);
  --glass-shadow:0 18px 50px rgba(0,0,0,.55),0 4px 18px rgba(0,0,0,.45);
  --glass-inner:inset 0 1px 0 rgba(255,240,205,.14),inset 0 -18px 34px rgba(0,0,0,.28),inset 0 0 0 1px rgba(0,0,0,.22);
  --arch-radius:120px 120px var(--r) var(--r);
}

/* ---------- the glass itself ---------- */
.glass{
  background:var(--glass-pane);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-shadow),var(--glass-inner);
  position:relative;
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{
    -webkit-backdrop-filter:blur(16px) saturate(1.5);
    backdrop-filter:blur(16px) saturate(1.5);
  }
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .glass{background:var(--glass-pane-deep)}
}

/* stained-glass refraction: a wash of jewel light across the pane */
.stained{position:relative;overflow:hidden;isolation:isolate}
.stained::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(115deg,transparent 30%,var(--glass-ruby) 46%,transparent 62%),
    linear-gradient(245deg,transparent 55%,var(--glass-violet) 78%,transparent 95%),
    linear-gradient(20deg,var(--glass-amber),transparent 42%);
  mix-blend-mode:screen;opacity:.55;
}
.stained>*{position:relative;z-index:1}

/* drifting sheen — candlelight travelling slowly across the glass.
   Transform/opacity only; stills itself for reduced motion. */
.sheen{position:relative;overflow:hidden}
.sheen::after{
  content:"";position:absolute;inset:-12% -30%;z-index:2;pointer-events:none;
  background:linear-gradient(102deg,transparent 42%,rgba(255,238,196,.075) 50%,rgba(255,214,150,.028) 56%,transparent 64%);
  transform:translateX(-46%);
  animation:glassSheen 11s ease-in-out infinite alternate;
}
@keyframes glassSheen{from{transform:translateX(-46%)}to{transform:translateX(46%)}}

/* specular rim — the bright line where candlelight catches the edge */
.rim{box-shadow:var(--glass-shadow),var(--glass-inner),inset 0 1px 0 rgba(255,246,220,.22)}

/* ---------- glass laid over the manor's furniture ---------- */
.card,.post,.notice,.letter,.oracle,.spark-card,.toggle-row,.stat,
.match-row,.raven-row,.added-panel,.review-cell,.wall-card,.tale-card,
.tonight-chapter,.seance-box,.lottery-box,.letter-box,.harvest-banner,
.harvest-card,.house-rail,.resume-card,.rail-candle,.omen-card,
.folder-head,.k-intro,.k-prose,.k-stage{
  background:var(--glass-pane);
  border-color:var(--glass-edge);
  box-shadow:var(--glass-shadow),var(--glass-inner);
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .card,.post,.notice,.letter,.oracle,.spark-card,.toggle-row,.stat,
  .match-row,.raven-row,.added-panel,.review-cell,.wall-card,.tale-card,
  .tonight-chapter,.seance-box,.lottery-box,.letter-box,.harvest-banner,
  .harvest-card,.house-rail,.resume-card,.rail-candle,.omen-card,
  .folder-head,.k-intro,.k-prose,.k-stage{
    -webkit-backdrop-filter:blur(14px) saturate(1.45);
    backdrop-filter:blur(14px) saturate(1.45);
  }
}

/* deep panes — chat, modals, the age gate: read often, rest the eye */
.chat-wrap,.prize-card,.confirm-card,.agegate-card,.doors-stage,
.lighting-stage .doors-stage{
  background:var(--glass-pane-deep);
  box-shadow:var(--glass-shadow),var(--glass-inner);
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .chat-wrap,.prize-card,.confirm-card,.agegate-card,.doors-stage{
    -webkit-backdrop-filter:blur(18px) saturate(1.5);
    backdrop-filter:blur(18px) saturate(1.5);
  }
}

/* the top bar becomes a glass lintel */
#topbar{
  background:linear-gradient(180deg,rgba(52,24,38,.55),rgba(12,6,14,.66));
  box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,240,205,.16),inset 0 -1px 0 rgba(0,0,0,.4);
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  #topbar{-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
}

/* the gold button, finally given its gold (used house-wide, never defined) */
.btn-gold{
  background:linear-gradient(160deg,rgba(232,179,75,.30),rgba(163,22,33,.32) 58%,rgba(91,42,134,.26));
  color:#ffe9b0;border:1px solid rgba(201,162,39,.55);
  box-shadow:inset 0 1px 0 rgba(255,240,205,.28),inset 0 -10px 18px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.42);
}
.btn-gold:hover{color:#fff3cf;border-color:var(--candle)}

/* buttons & pills — small panes of lit glass */
.btn-ghost{
  background:linear-gradient(180deg,rgba(255,240,210,.05),rgba(0,0,0,.18));
  box-shadow:inset 0 1px 0 rgba(255,240,205,.12);
}
.chip,.nc17-pill,.status-pill,.fn-candle{
  -webkit-backdrop-filter:blur(8px) saturate(1.4);
  backdrop-filter:blur(8px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,240,205,.12);
}

/* inputs — smoked glass wells */
.input,textarea.input,select.input{
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(10,4,10,.42));
  box-shadow:inset 0 2px 10px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,240,205,.05);
}

/* ---------- the Sanctum: same glass, worn soberly ---------- */
.chamber-card,.door-card,.stat,.grant-result,.grant-standing,.grant-level-box,.grant-review{
  background:var(--glass-pane-deep);
  border-color:rgba(255,236,200,.12);
  box-shadow:0 12px 34px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,240,205,.09);
}

/* ---------- 3D depth: tilt, parallax, stacked entrances ---------- */
[data-tilt]{
  transform:perspective(950px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px));
  transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.22,.9,.3,1);
  will-change:transform;
}
[data-tilt].tilting{transition:transform .08s linear}
[data-tilt]:hover{--ty:-4px}
[data-parallax]{will-change:transform}

/* pages arrive like a pane lifted into light — depth, not a jump */
#app.enter{animation:glassPageIn .5s cubic-bezier(.22,.9,.3,1)}
@keyframes glassPageIn{
  from{opacity:0;transform:translateY(18px) scale(.988);filter:blur(3px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

/* book covers rest on glass shelves — a true reflection beneath */
.track-hero img,.np-cover{
  -webkit-box-reflect:below 3px linear-gradient(transparent 68%,rgba(255,240,210,.13));
}
.track-card,.track-hero,.folder-card{
  background:var(--glass-pane);
  border-color:var(--glass-edge);
  box-shadow:var(--glass-shadow),var(--glass-inner);
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .track-card,.track-hero,.folder-card{
    -webkit-backdrop-filter:blur(13px) saturate(1.45);
    backdrop-filter:blur(13px) saturate(1.45);
  }
}
.player-glass{
  background:linear-gradient(160deg,rgba(56,26,40,.6),rgba(14,7,16,.7));
  box-shadow:0 18px 50px rgba(0,0,0,.62),inset 0 1px 0 rgba(255,240,205,.18),inset 0 -14px 28px rgba(0,0,0,.3);
}

/* the discovery portrait — a pane of dark glass, gilded corners kept */
.profile-card{
  background:var(--glass-pane-deep);
  box-shadow:0 30px 80px rgba(0,0,0,.66),var(--glass-inner),0 0 44px rgba(125,20,32,.16);
}

/* velvet heroes — stained light over deep velvet */
.velvet-hero,.night-hero{
  background:
    linear-gradient(150deg,rgba(163,22,33,.20),transparent 46%),
    linear-gradient(230deg,rgba(91,42,134,.22),transparent 52%),
    linear-gradient(165deg,rgba(46,17,32,.78),rgba(14,6,16,.85) 70%);
  box-shadow:var(--glass-shadow),var(--glass-inner),inset 0 0 70px rgba(91,42,134,.14);
}
@supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .velvet-hero,.night-hero{-webkit-backdrop-filter:blur(15px) saturate(1.5);backdrop-filter:blur(15px) saturate(1.5)}
}

/* ---------- cathedral arches & thorn-and-rose tracery ---------- */
/* a pointed-arch tracery, drawn once in gold line, reused as ornament */
.arch-frame{position:relative}
.arch-frame::before{
  content:"";position:absolute;inset:6px;pointer-events:none;opacity:.5;
  border:1px solid rgba(201,162,39,.35);border-radius:var(--arch-radius);
  -webkit-mask:linear-gradient(180deg,#000 0 46%,transparent 78%);
  mask:linear-gradient(180deg,#000 0 46%,transparent 78%);
}
/* thorn-and-rose divider — a vine line, a rose, a vine line */
.thorn-div{
  display:flex;align-items:center;gap:14px;margin:26px auto;max-width:520px;color:#a33340;
}
.thorn-div::before,.thorn-div::after{
  content:"";flex:1;height:14px;opacity:.75;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='14' viewBox='0 0 72 14'%3E%3Cpath d='M1 8 Q 18 2 36 8 T 71 8' fill='none' stroke='%23a33340' stroke-width='1.4'/%3E%3Cpath d='M14 7 l3 -5 M30 8 l3 5 M48 7 l3 -5 M62 8 l3 5' stroke='%23a33340' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:center;
}
.thorn-div .td-rose{font-size:1.15rem;filter:drop-shadow(0 0 8px rgba(163,22,33,.55))}

/* the 3D House door wears the same glass as the manor around it */
a[href="/house3d.html"]{
  box-shadow:inset 0 1px 0 rgba(255,240,205,.14),0 8px 22px rgba(0,0,0,.4);
}

/* =====================================================================
 * LIVING LIGHT — the house breathes (2026-10-29)
 * One fixed candlelight layer over the whole manor: a warm glow high
 * in the room and an ember blush low, breathing on a slow candle
 * rhythm (opacity only). Ember motes occasionally flare as they rise.
 * In the small hours the dark deepens and the light lowers with it.
 * ===================================================================== */
.living-light{
  position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(58% 34% at 50% -4%,rgba(255,196,110,.20),transparent 70%),
    radial-gradient(44% 26% at 82% 108%,rgba(229,56,59,.10),transparent 70%),
    radial-gradient(36% 22% at 12% 104%,rgba(232,179,75,.08),transparent 70%);
  opacity:.62;animation:candleBreathe 7.5s ease-in-out infinite alternate;
}
@keyframes candleBreathe{from{opacity:.48}to{opacity:.74}}

/* a mote now and then remembers it is fire */
.embers span:nth-child(3),.embers span:nth-child(7){animation-name:riseFlare}
@keyframes riseFlare{
  0%{transform:translateY(0) translateX(0) scale(1);opacity:0}
  8%{opacity:.9}
  55%{opacity:.55}
  74%{transform:translateY(-80vh) translateX(34px) scale(1.9);opacity:1}
  100%{transform:translateY(-108vh) translateX(46px) scale(1);opacity:0}
}

/* warm to the touch — presses bloom like a palm near a flame */
.btn:active{box-shadow:inset 0 0 24px rgba(232,179,75,.22),0 0 16px rgba(232,179,75,.14)}
.chip:active,.status-pill:active{box-shadow:inset 0 0 14px rgba(232,179,75,.25)}

/* the small hours: deeper dark, lower candlelight (set by glass.js) */
body[data-night="small"]{
  --glass-pane:linear-gradient(155deg,rgba(32,13,22,.68),rgba(5,2,8,.82) 55%,rgba(14,5,12,.78));
  --glass-pane-deep:linear-gradient(160deg,rgba(22,9,18,.85),rgba(3,1,6,.92) 60%,rgba(10,4,10,.88));
  --glass-amber:rgba(232,179,75,.08);
}
body[data-night="small"] .living-light{animation-name:candleBreatheSmall}
@keyframes candleBreatheSmall{from{opacity:.26}to{opacity:.44}}
body[data-night="dawn"] .living-light{
  background:
    radial-gradient(58% 34% at 50% -4%,rgba(196,160,255,.13),transparent 70%),
    radial-gradient(44% 26% at 82% 108%,rgba(229,56,59,.08),transparent 70%),
    radial-gradient(36% 22% at 12% 104%,rgba(232,179,75,.06),transparent 70%);
}

/* ---------- stillness, for those who ask the house to be still ---------- */
@media (prefers-reduced-motion: reduce){
  .sheen::after{animation:none;transform:translateX(0)}
  [data-tilt]{transform:none!important;transition:none}
  #app.enter{animation:none}
  .stained::before{opacity:.4}
  .living-light{animation:none;opacity:.45}
  .embers span:nth-child(3),.embers span:nth-child(7){animation-name:rise}
}