@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,500&family=EB+Garamond:ital@0;1&display=swap');

:root{
  --ink:#0a0710;
  --ink-2:#120c1c;
  --purple-deep:#241534;
  --purple:#4a2c6d;
  --purple-light:#8c5ab8;
  --orange:#ff8a3d;
  --orange-hot:#ffb15e;
  --orange-dim:#c0562a;
  --moon:#f4ecd8;
  --parchment:#ece0c4;
  --parchment-dark:#d8c79f;
  --blood:#8a1f2b;
  --mist:rgba(180,160,220,0.12);
  --glow-candle: 0 0 18px 6px rgba(255,150,60,0.55);
  --glow-moon: 0 0 40px 10px rgba(240,230,200,0.35);
  --ui-panel: rgba(15,9,22,0.82);
  --ui-border: rgba(255,150,80,0.35);
  font-size: 16px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  background:var(--ink);
  color:var(--parchment);
  font-family:'Cormorant Garamond', serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
#app{ position:relative; width:100vw; height:100vh; }
.hidden{ display:none !important; }

/* ---------- Title / Win overlay ---------- */
.overlay-screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(140,90,184,0.25), transparent 60%),
    linear-gradient(180deg, #1a0e2b 0%, #100819 45%, #05030a 100%);
  overflow:hidden;
  text-align:center;
  z-index: 50;
}
.title-fog{
  position:absolute; left:-10%; right:-10%; bottom:-5%; height:45%;
  background:
    radial-gradient(ellipse at 20% 100%, rgba(220,210,240,0.14), transparent 60%),
    radial-gradient(ellipse at 60% 100%, rgba(220,210,240,0.10), transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(220,210,240,0.13), transparent 60%);
  filter: blur(6px);
  animation: driftFog 22s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes driftFog{ from{ transform:translateX(-3%);} to{ transform:translateX(3%);} }
.title-moon{
  position:absolute; top:8%; left:50%; transform:translateX(-50%);
  width:140px; height:140px; border-radius:50%;
  background: radial-gradient(circle at 38% 35%, #fffcee, var(--moon) 55%, #cbbf9c 100%);
  box-shadow: var(--glow-moon);
  opacity:.9;
}
.title-moon::before, .title-moon::after{
  content:""; position:absolute; border-radius:50%; background:rgba(190,175,140,0.5);
}
.title-moon::before{ width:22px; height:22px; top:30px; left:24px; }
.title-moon::after{ width:14px; height:14px; top:70px; left:80px; }
.title-bats{ position:absolute; inset:0; pointer-events:none; }
.bat{
  position:absolute; font-size:22px; color:#0b0710; opacity:.85;
  animation: batFly linear infinite;
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.6));
}
@keyframes batFly{
  0%{ transform: translate(-10vw, 0) scale(1); }
  100%{ transform: translate(110vw, -6vh) scale(0.8); }
}
.title-main{
  font-family:'Cinzel Decorative', serif;
  font-size: 3.4rem;
  margin: 6% 0 0.2em;
  color: var(--orange-hot);
  text-shadow: 0 0 18px rgba(255,140,60,0.55), 0 0 60px rgba(255,140,60,0.25);
  letter-spacing: 2px;
  z-index:2;
}
.title-main.small{ font-size:2.4rem; }
.title-sub{
  font-style: italic; color: var(--parchment-dark); font-size:1.3rem; margin-top:0; z-index:2;
  max-width: 640px; padding: 0 1em;
}
.title-hint{ color:rgba(236,224,196,0.65); font-size:0.95rem; max-width:480px; margin-top:2em; z-index:2;}

.ornate-btn{
  font-family:'Cinzel Decorative', serif;
  background: linear-gradient(180deg, #3a2450, #201032);
  border: 1px solid var(--ui-border);
  color: var(--orange-hot);
  padding: 0.9em 2.2em;
  font-size: 1.05rem;
  border-radius: 4px;
  cursor:pointer;
  margin-top: 1.4em;
  letter-spacing:1px;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4) inset, 0 4px 18px rgba(0,0,0,0.5);
  transition: all .25s ease;
  z-index:2;
  position:relative;
}
@media (hover: hover){
.ornate-btn:hover{
  color: #fff2df;
  box-shadow: 0 0 22px rgba(255,150,60,0.5), 0 4px 18px rgba(0,0,0,0.5);
  transform: translateY(-1px);
  border-color: var(--orange);
}
}
.ornate-btn.ghost{ background:transparent; opacity:.8; }

/* ---------- Game stage ---------- */
.stage-frame{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background: #000;
}
#scene-viewport{
  position:relative;
  /* `aspect-ratio` only computes a missing dimension — it has no effect when
     both width and height are already definite (as plain 100%/100% were).
     Setting only width here (clamped to the viewport) and leaving height
     `auto` lets aspect-ratio correctly derive a true 16:9 box on every
     screen shape, including tall/narrow portrait phones — previously the
     box silently stretched to fill the full portrait viewport instead,
     which detached the title/toast/nav overlays (positioned relative to
     this box) from the actual letterboxed scene art rendered inside it. */
  width: min(100%, 177.78vh); /* 177.78vh = 16/9 * 100vh */
  aspect-ratio: 16/9;
  max-height: 100vh;
  overflow:hidden;
  background:#05030a;
  box-shadow: 0 0 120px rgba(0,0,0,0.9) inset;
}
#scene-root{ position:absolute; inset:0; }
#scene-root svg{ width:100%; height:100%; display:block; }

.vignette{
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,0.75) 100%);
  z-index:5;
}
.grain{
  position:absolute; inset:0; pointer-events:none; z-index:6; opacity:.05; mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
#floating-particles{ position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; }
.mote{
  position:absolute; bottom:-5%; width:4px; height:4px; border-radius:50%;
  background: radial-gradient(circle, rgba(255,190,120,0.9), rgba(255,150,60,0));
  animation: floatUp linear infinite;
  opacity:0.7;
}
@keyframes floatUp{
  0%{ transform: translateY(0) translateX(0); opacity:0; }
  10%{ opacity:.8; }
  100%{ transform: translateY(-110vh) translateX(20px); opacity:0; }
}

#scene-fade{
  position:absolute; inset:0; background:#000; opacity:0; pointer-events:none; z-index:20;
  transition: opacity .38s ease;
}
#scene-fade.active{ opacity:1; }

#scene-title{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  font-family:'Cinzel Decorative', serif; color: var(--orange-hot);
  font-size: 1.1rem; letter-spacing: 2px; text-shadow: 0 0 12px rgba(0,0,0,0.9), 0 0 8px rgba(255,140,60,0.4);
  z-index: 10; pointer-events:none;
  text-transform:uppercase;
}

.toast{
  position:absolute; bottom:14%; left:50%; transform:translateX(-50%) translateY(20px);
  background: var(--ui-panel); border:1px solid var(--ui-border);
  padding: 0.7em 1.4em; border-radius:6px; max-width:70%;
  font-size:1.15rem; font-style:italic; color:var(--parchment);
  opacity:0; pointer-events:none; transition: all .35s ease;
  z-index: 15; text-align:center;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* Nav arrows */
.nav-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  background: rgba(10,6,15,0.35); border:1px solid rgba(255,150,80,0.25);
  color: var(--orange-hot); width:52px; height:64px; border-radius: 8px;
  cursor:pointer; font-size:1.4rem; z-index:12; backdrop-filter: blur(2px);
  transition: all .2s ease; opacity:0.55;
}
@media (hover: hover){ .nav-arrow:hover{ opacity:1; background:rgba(74,44,109,0.45); box-shadow:0 0 16px rgba(255,150,60,0.35); } }
.nav-arrow.left{ left:14px; }
.nav-arrow.right{ right:14px; }
.nav-arrow.back{
  top:auto; bottom:16px; left:50%; transform:translateX(-50%);
  width:auto; height:auto; padding:0.5em 1.1em; font-family:'Cormorant Garamond',serif; font-size:1rem;
}
.nav-arrow.hidden-arrow{ display:none; }

/* ---------- HUD ---------- */
.hud{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px;
  z-index: 30;
  background: var(--ui-panel);
  border:1px solid var(--ui-border);
  border-radius: 14px;
  padding: 8px 14px;
  box-shadow: 0 6px 30px rgba(0,0,0,0.6);
  max-width: 92vw;
}
.hud-btn{
  background: rgba(74,44,109,0.35); border:1px solid var(--ui-border);
  color: var(--orange-hot); width:40px; height:40px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition: all .2s ease; flex:0 0 auto;
}
@media (hover: hover){ .hud-btn:hover{ background:rgba(255,150,60,0.25); box-shadow:0 0 12px rgba(255,150,60,0.4); } }

.inventory-bar{
  display:flex; gap:8px; overflow-x:auto; max-width: 62vw; padding: 2px;
  scrollbar-width: thin;
}
.inv-slot{
  flex:0 0 auto; width:48px; height:48px; border-radius:8px;
  background: linear-gradient(180deg, #2a1a3c, #170e22);
  border:1px solid var(--ui-border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; cursor:pointer; position:relative;
  transition: all .2s ease;
}
@media (hover: hover){ .inv-slot:hover{ box-shadow: 0 0 14px rgba(255,150,60,0.55); transform:translateY(-2px); border-color:var(--orange); } }
.inv-slot.selected{ box-shadow: 0 0 0 2px var(--orange-hot), var(--glow-candle); }
.inv-slot:focus{ outline:none; }
.inv-slot:focus-visible{ box-shadow: 0 0 0 2px var(--orange-hot); border-color:var(--orange); }
.inv-slot:focus-visible .inv-label{ opacity:1; }
.inv-slot .inv-label{
  position:absolute; bottom:-22px; left:50%; transform:translateX(-50%);
  font-size:0.7rem; color:var(--parchment-dark); white-space:nowrap; opacity:0; transition:opacity .2s;
  pointer-events:none; background:rgba(0,0,0,0.7); padding:2px 6px; border-radius:4px;
}
@media (hover: hover){ .inv-slot:hover .inv-label{ opacity:1; } }

/* ---------- Modals ---------- */
.modal{
  position:absolute; inset:0; z-index:40;
  background: rgba(4,2,8,0.72);
  display:flex; align-items:center; justify-content:center;
  animation: fadeIn .25s ease;
}
@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
.modal-card{
  background: linear-gradient(180deg,#1c1226,#120b1b);
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  padding: 2em 2.2em;
  max-width: 640px; width:88%;
  max-height: 80vh; overflow-y:auto;
  position:relative;
  box-shadow: 0 20px 80px rgba(0,0,0,0.7), 0 0 40px rgba(140,90,184,0.15);
}
.modal-close{
  position:absolute; top:10px; right:14px; background:none; border:none;
  color: var(--parchment-dark); font-size:1.6rem; cursor:pointer;
}
@media (hover: hover){ .modal-close:hover{ color:var(--orange-hot); } }
.modal-card h2{ font-family:'Cinzel Decorative',serif; color:var(--orange-hot); margin-top:0; }
.modal-card h3{ color:var(--purple-light); font-family:'Cormorant Garamond',serif; font-weight:600; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:.3em;}

.journal-digits{ display:flex; gap:14px; margin: 0.6em 0 1.4em; flex-wrap:wrap; }
.jd-item{
  width:70px; text-align:center; padding:10px 6px; border-radius:8px;
  background: rgba(0,0,0,0.3); border:1px dashed rgba(255,150,80,0.3);
}
.jd-item .jd-icon{ font-size:1.6rem; }
.jd-item .jd-val{ font-size:1.5rem; font-family:'Cinzel Decorative',serif; color: var(--orange-hot); margin-top:4px; }
.jd-item.unknown .jd-val{ color: rgba(236,224,196,0.6); }

.journal-notes{ display:flex; flex-direction:column; gap:10px; }
.jn-item{
  background: rgba(255,255,255,0.03); border-left:3px solid var(--orange-dim);
  padding: .5em .8em; border-radius:4px; cursor:pointer; font-size:1.05rem;
}
@media (hover: hover){ .jn-item:hover{ background:rgba(255,150,60,0.08); border-left-color: var(--orange-hot); } }
.jn-item:focus{ outline:none; }
.jn-item:focus-visible{ background:rgba(255,150,60,0.08); border-left-color: var(--orange-hot); box-shadow: 0 0 0 1px var(--orange-hot); }
.journal-empty{ color:rgba(236,224,196,0.6); font-style:italic; }

.read-card{ font-family:'EB Garamond', serif; }
.read-content{ font-size:1.25rem; line-height:1.6; color:var(--parchment); white-space:pre-wrap; }
.read-content .letter-title{ font-family:'Cinzel Decorative',serif; color:var(--orange-hot); font-size:1.2rem; display:block; margin-bottom:.5em;}

/* ---------- SVG scene helpers ---------- */
.hotspot{ cursor:pointer; }
.hs-outline{ opacity:0; transition: opacity .18s ease; pointer-events:none; }
.hotspot .hs-label-group{ opacity:0; transition:opacity .18s ease; pointer-events:none; }
/* Scoped to real pointers only — on touch devices :hover sticks after a tap
   (there's no pointer to "leave" with), which would leave the dashed hint
   and label stuck on screen after every tap. Touch users still get the
   label via the toast shown on tap; :focus-visible below is unaffected. */
@media (hover: hover){
  .hotspot:hover .hs-outline{ opacity:1; }
  .hotspot:hover .hs-label-group{ opacity:1; }
}
.hotspot:focus{ outline:none; }
.hotspot:focus-visible .hs-outline{ opacity:1; stroke:var(--orange-hot); stroke-width:4; }
.hotspot:focus-visible .hs-label-group{ opacity:1; }
.flicker{ animation: flicker 3.2s ease-in-out infinite; }
@keyframes flicker{
  0%,100%{ opacity:1; }
  8%{ opacity:.85; }
  10%{ opacity:1; }
  20%{ opacity:.92; }
  45%{ opacity:1; }
  60%{ opacity:.88; }
  62%{ opacity:1; }
}
.sway{ animation: sway 6s ease-in-out infinite; transform-origin: top center; }
@keyframes sway{ 0%,100%{ transform: rotate(-2deg);} 50%{ transform: rotate(2deg);} }
.bob{ animation: bob 4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }
.pulse-glow{ animation: pulseGlow 2.4s ease-in-out infinite; }
@keyframes pulseGlow{ 0%,100%{ opacity:.7; } 50%{ opacity:1; } }
.spin-slow{ animation: spinSlow 40s linear infinite; transform-origin: center; }
@keyframes spinSlow{ from{ transform:rotate(0);} to{ transform:rotate(360deg);} }
.shake{ animation: shakeAnim .4s ease; }
@keyframes shakeAnim{
  0%,100%{ transform: translateX(0); }
  20%{ transform: translateX(-8px); }
  40%{ transform: translateX(8px); }
  60%{ transform: translateX(-6px); }
  80%{ transform: translateX(6px); }
}

/* Respect the OS-level motion-sensitivity preference: disable the game's
   many continuous decorative loops (candle/eye flicker, coat/chair sway,
   drifting fog, floating motes, flying bats, pulsing glows). The failure
   "shake" (a classic vestibular trigger) still needs to read as negative
   feedback, so it's replaced with a brightness pulse instead of dropped
   entirely — modal fade-in and other short, purposeful transitions are
   left alone, since those aren't the kind of motion this preference targets. */
@media (prefers-reduced-motion: reduce){
  .flicker, .sway, .bob, .pulse-glow, .spin-slow,
  .title-fog, .bat, .mote{
    animation: none !important;
  }
  .shake{ animation: shakeReduced .4s ease !important; }
}
@keyframes shakeReduced{
  0%,100%{ filter: brightness(1); }
  50%{ filter: brightness(1.5); }
}

/* Puzzle panels rendered inside SVG foreignObject use HTML controls */
.puzzle-panel{
  font-family:'Cormorant Garamond', serif; color: var(--parchment);
  background: rgba(10,6,16,0.88); border:1px solid var(--ui-border); border-radius:12px;
  padding: 1.2em; width:100%; height:100%; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center;
}
.puzzle-panel h3{ font-family:'Cinzel Decorative',serif; color:var(--orange-hot); margin:0 0 4px; font-size:1.3rem;}
.pp-row{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.pp-btn{
  background: linear-gradient(180deg,#3a2450,#201032); border:1px solid var(--ui-border); color:var(--orange-hot);
  border-radius:6px; padding:.4em .9em; cursor:pointer; font-size:1.1rem; font-family:'Cormorant Garamond',serif;
}
@media (hover: hover){ .pp-btn:hover{ box-shadow:0 0 10px rgba(255,150,60,0.4); } }
.pp-btn.primary{ background: linear-gradient(180deg,#c0562a,#7a2f14); color:#fff2df; }
.pp-dial{
  width:64px; height:64px; border-radius:50%; background:#160f20; border:2px solid var(--ui-border);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--orange-hot);
  font-family:'Cinzel Decorative',serif;
}
.pp-close{ position:absolute; top:8px; right:10px; background:none; border:none; color:var(--parchment-dark); font-size:1.4rem; cursor:pointer; }
.pp-note{ font-size:0.95rem; color: var(--parchment-dark); font-style:italic; max-width:340px; }

.keypad-slots{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.keypad-slot{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.keypad-slot .ks-icon{ font-size:1.3rem; }
.keypad-slot .ks-val{
  width:48px; height:56px; background:#0e0815; border:1px solid var(--ui-border); border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; font-family:'Cinzel Decorative',serif; color:var(--orange-hot);
}
.keypad-slot .ks-arrows{ display:flex; gap:6px; }
.keypad-slot .ks-arrows button{
  width:38px; height:38px; font-size:1.1rem; padding:0; line-height:1;
  display:flex; align-items:center; justify-content:center;
}

@media (max-width: 720px){
  .title-main{ font-size:2.2rem; }
  .hud{ gap:8px; padding:6px 8px; }
  .inventory-bar{ max-width:50vw; }
  .nav-arrow{ width:40px; height:52px; }
  /* Room names like "Attic — The Twin Portraits" wrapped to 2-3 cramped
     lines at the desktop size once the scene box correctly narrows to
     16:9 on portrait phones — scale it down to match the smaller box. */
  #scene-title{ font-size:0.8rem; letter-spacing:1px; max-width:88%; text-align:center; }
}