/* LOGOS — shared layout + scene styling. See docs/AESTHETIC-BIBLE.md */
:root{
  --marble:#f4efe6; --ink:#2b2620; --gold:#b08d4f; --gold-bright:#d4af6a;
  --crimson:#7c2d2d; --stone:#6b6256; --amber:#e9b878;
}
html,body{margin:0;height:100%;background:#0a0908;overflow:hidden;font-family:Georgia,'Times New Roman',serif;color:#f3e7cf}
/* responsive type: rem tracks the 16:9 stage size, so all UI scales as one piece
   (≈16px at a 1280-wide stage), clamped, then scaled by the player's text-size pref */
html{font-size:calc(clamp(8px, calc(min(100vw, 177.78vh) / 80), 20px) * var(--ui-scale, 1))}

/* reduced motion: neutralize CSS animation/transition (JS parallax + camera-punch are
   gated separately via LOGOS.reducedMotion() in the scenes that drive them) */
body.reduced-motion *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}

/* high-contrast: strengthen dialogue legibility for low-vision players */
body.high-contrast #db-dlg,body.high-contrast #sch-dlg{background:rgba(6,4,2,.99)!important;border-color:#ffd27a!important}
body.high-contrast #bt-intro,body.high-contrast #tr-mono{background:rgba(4,3,2,.96)!important}
body.high-contrast #db-dlg .tx,body.high-contrast #sch-dlg .tx{color:#fff7e6!important}
#stage{position:absolute; inset:0; margin:auto; width:min(100vw,177.78vh); height:min(56.25vw,100vh); overflow:hidden; background:#0a0908}
.layer{position:absolute; inset:0; width:100%; height:100%}

/* far plate */
#bgfallback{background:linear-gradient(180deg,#243a55 0%,#3e5570 28%,#8a7a6e 52%,#c79a63 72%,#e9b878 100%)}
#bg{background-size:cover; background-position:center; filter:saturate(1.04) brightness(1.02) contrast(1.03); opacity:0; transition:opacity 1.1s ease}
#bg.ready{opacity:1}

/* pixi canvas */
#stage canvas{position:absolute!important; inset:0; width:100%!important; height:100%!important; pointer-events:none; z-index:3}

/* sprites (scene-injected) — feet = element bottom edge */
.sprite{position:absolute; transform-origin:bottom center; will-change:transform; z-index:2}
.sprite img{display:block; width:100%; height:auto; filter:drop-shadow(0 4px 7px rgba(0,0,0,.3)) saturate(1.04) brightness(1.03)}
.sprite .sh{position:absolute; left:50%; bottom:-1%; transform:translateX(-50%); width:70%; height:9%; background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%); filter:blur(4px)}
.glow{position:absolute; aspect-ratio:1; border-radius:50%; mix-blend-mode:screen; pointer-events:none; transform:translate(-50%,-50%)}
.glow-fire{background:radial-gradient(circle, rgba(255,170,70,.95), rgba(255,120,40,.35) 40%, rgba(255,90,30,0) 72%)}
.glow-votive{background:radial-gradient(circle, rgba(255,214,150,.95), rgba(255,180,110,.25) 45%, rgba(255,170,90,0) 72%)}
@keyframes flick{0%{opacity:.72;transform:translate(-50%,-50%) scale(.97)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.04)}100%{opacity:.66;transform:translate(-50%,-50%) scale(.99)}}
.flick{animation:flick 2.2s ease-in-out infinite}.flick.b{animation-duration:1.7s}

/* scene-transition wipe — moves THROUGH warm light (never a hard white flash) */
#wipe{pointer-events:none; z-index:25; opacity:0; transition:opacity .45s ease;
  background:radial-gradient(62% 62% at 50% 45%, rgba(255,232,178,.96), rgba(247,205,140,.86) 44%, rgba(40,24,10,.9) 100%)}
#wipe.on{opacity:1}

/* global grade */
#grade{pointer-events:none; background:
  radial-gradient(120% 80% at 64% 34%, rgba(255,222,164,.10), rgba(0,0,0,0) 46%),
  radial-gradient(150% 130% at 50% 52%, rgba(0,0,0,0) 54%, rgba(18,11,5,.55) 100%),
  linear-gradient(180deg, rgba(16,20,32,.28) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 84%, rgba(10,7,3,.42) 100%)}

#caption{position:absolute; left:0; right:0; bottom:5%; text-align:center; pointer-events:none; color:#f3e7cf; letter-spacing:.3em; text-transform:uppercase; font-size:1rem; text-shadow:0 2px 16px #000; opacity:0; transition:opacity 2.4s ease 1s}
#caption.show{opacity:.85}
#caption small{display:block; letter-spacing:.16em; font-size:.6rem; text-transform:none; font-style:italic; color:#d9c39c; margin-top:6px}

/* title-card loader */
#loader{position:absolute; inset:0; z-index:30; background:radial-gradient(120% 120% at 50% 45%, #14110d, #050403); display:flex; flex-direction:column; align-items:center; justify-content:center; transition:opacity .8s ease}
#loader.hide{opacity:0; pointer-events:none}
#loader .lg{font-size:2.2rem; letter-spacing:.6em; color:#e9d3a3; text-indent:.6em}
#loader .sb{margin-top:10px; font-size:.64rem; letter-spacing:.34em; text-transform:uppercase; color:#9a865c}
#loader .ln{margin-top:18px; width:170px; height:2px; background:#3a2f22; overflow:hidden; position:relative}
#loader .ln:after{content:'';position:absolute;left:-40%;top:0;height:100%;width:40%;background:#caa55f;animation:load 1.1s infinite}
@keyframes load{0%{left:-40%}100%{left:140%}}