:root{
  --ink:#e6dcc9;
  --amber:#ffb055;
  --mist:#8b93a8;
  --panel:rgba(16,15,22,0.82);
  --edge:rgba(200,180,140,0.18);
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;background:#0c0a12;font-family:'Cormorant Garamond',serif;color:var(--ink);}
#scene-container{position:fixed;inset:0;}
canvas{display:block;}

/* Vignette */
#vignette{
  position:fixed;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(ellipse at center, transparent 40%, rgba(6,5,10,0.55) 88%, rgba(3,2,6,0.9) 100%);
  mix-blend-mode:multiply;
}

/* Loading */
#loading{
  position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:22px;background:#0c0a12;
  transition:opacity .7s ease;
}
.lantern-loader{
  width:34px;height:44px;border-radius:50% 50% 45% 45%;
  background:radial-gradient(circle at 50% 40%, #ffcf87, #ff8a2b 60%, #7a3d10);
  box-shadow:0 0 40px 8px rgba(255,150,60,0.5);
  animation:flick 1.6s ease-in-out infinite;
}
@keyframes flick{0%,100%{opacity:.75;transform:scale(1);}50%{opacity:1;transform:scale(1.06);}}
#load-text{font-size:1.1rem;letter-spacing:.24em;color:var(--mist);text-transform:lowercase;
  font-family:'Zen Old Mincho',serif;}

/* Title card */
#title-card{
  position:fixed;top:14%;left:0;right:0;z-index:20;text-align:center;pointer-events:none;
  opacity:0;transform:translateY(-12px);transition:opacity 1.6s ease, transform 1.6s ease;
  text-shadow:0 2px 24px rgba(0,0,0,0.9);
}
#title-card.show{opacity:1;transform:translateY(0);}
#title-card h1{
  font-family:'Zen Old Mincho',serif;font-weight:400;font-size:clamp(2.4rem,7vw,5rem);
  letter-spacing:.04em;color:var(--ink);
}
.tc-sub{font-size:.85rem;letter-spacing:.5em;color:var(--amber);text-transform:uppercase;margin-bottom:6px;opacity:.8;}
.tc-line{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--amber),transparent);margin:14px auto;}
.tc-note{font-style:italic;font-size:1.1rem;color:var(--mist);letter-spacing:.06em;}

/* Start overlay */
#start-overlay{
  position:fixed;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(ellipse at center, rgba(20,16,26,0.7), rgba(6,5,10,0.94));
  backdrop-filter:blur(3px);transition:opacity .9s ease;
}
#start-overlay.leaving{opacity:0;}
.so-inner{position:relative;text-align:center;max-width:520px;padding:40px 30px;}
.so-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:60px;height:80px;
  border-radius:50% 50% 45% 45%;background:radial-gradient(circle at 50% 40%,#ffcf87,#ff8a2b 60%,transparent 75%);
  filter:blur(4px);opacity:.7;animation:flick 2s ease-in-out infinite;}
.so-inner h2{font-family:'Zen Old Mincho',serif;font-weight:400;font-size:clamp(1.8rem,5vw,2.8rem);margin-bottom:12px;}
.so-inner p{font-style:italic;font-size:1.2rem;color:var(--mist);margin-bottom:30px;letter-spacing:.03em;}
#enter-btn{
  font-family:'Cormorant Garamond',serif;font-size:1.25rem;letter-spacing:.14em;
  padding:14px 40px;background:transparent;color:var(--ink);
  border:1px solid var(--amber);border-radius:2px;cursor:pointer;text-transform:uppercase;
  transition:all .4s ease;position:relative;overflow:hidden;
}
#enter-btn:hover{background:rgba(255,176,85,0.12);box-shadow:0 0 30px rgba(255,150,60,0.3);letter-spacing:.2em;}
.so-hint{margin-top:26px;font-size:.9rem;color:rgba(139,147,168,0.7);letter-spacing:.08em;}

/* HUD hints */
#hints{
  position:fixed;bottom:60px;left:0;right:0;text-align:center;z-index:15;pointer-events:none;
  font-size:1rem;letter-spacing:.24em;color:rgba(230,220,201,0.75);text-transform:lowercase;
  transition:opacity 1.6s ease;text-shadow:0 2px 12px #000;
}
#hints.fade{opacity:0;}

/* Snippet */
#snippet{
  position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(14px);
  z-index:16;max-width:min(600px,86vw);text-align:center;pointer-events:none;
  opacity:0;transition:opacity .9s ease, transform .9s ease;
}
#snippet.show{opacity:1;transform:translateX(-50%) translateY(0);}
.snip-mark{width:8px;height:8px;background:var(--amber);border-radius:50%;margin:0 auto 12px;
  box-shadow:0 0 16px 4px rgba(255,150,60,0.6);}
.snip-text{font-family:'Zen Old Mincho',serif;font-size:clamp(1.15rem,3vw,1.5rem);
  font-style:italic;line-height:1.6;color:var(--ink);text-shadow:0 2px 20px #000;letter-spacing:.02em;}

/* Crosshair */
#crosshair{position:fixed;top:50%;left:50%;width:4px;height:4px;margin:-2px;z-index:12;
  border-radius:50%;background:rgba(255,176,85,0.5);pointer-events:none;}

/* Top controls */
#top-controls{position:fixed;top:16px;right:16px;z-index:18;display:flex;gap:10px;}
#top-controls button{
  width:44px;height:44px;font-size:1.3rem;color:var(--ink);
  background:var(--panel);border:1px solid var(--edge);border-radius:4px;cursor:pointer;
  backdrop-filter:blur(6px);transition:all .3s ease;
}
#top-controls button:hover{border-color:var(--amber);color:var(--amber);box-shadow:0 0 18px rgba(255,150,60,0.25);}

/* Panels */
.panel{
  position:fixed;top:70px;right:16px;z-index:19;width:280px;max-width:calc(100vw - 32px);
  background:var(--panel);border:1px solid var(--edge);border-radius:6px;
  backdrop-filter:blur(10px);padding:18px;box-shadow:0 20px 60px rgba(0,0,0,0.6);
}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;
  font-family:'Zen Old Mincho',serif;font-size:1.15rem;letter-spacing:.14em;color:var(--amber);}
.panel-close{background:none;border:none;color:var(--mist);font-size:1.6rem;cursor:pointer;line-height:1;}
.panel-close:hover{color:var(--ink);}
.ctl{display:block;margin-bottom:18px;}
.ctl>span{display:flex;justify-content:space-between;font-size:.95rem;letter-spacing:.06em;
  margin-bottom:8px;color:var(--ink);text-transform:lowercase;}
.ctl>span em{font-style:italic;color:var(--amber);}
.ctl input[type=range]{width:100%;-webkit-appearance:none;height:2px;background:var(--edge);outline:none;border-radius:2px;}
.ctl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--amber);cursor:pointer;box-shadow:0 0 12px rgba(255,150,60,0.6);}
.ctl input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:none;
  background:var(--amber);cursor:pointer;box-shadow:0 0 12px rgba(255,150,60,0.6);}
.toggle-ctl>span{margin-bottom:0;align-items:center;}
.tog{padding:5px 16px;background:transparent;border:1px solid var(--edge);border-radius:3px;
  color:var(--mist);cursor:pointer;font-family:inherit;letter-spacing:.1em;text-transform:lowercase;transition:all .3s;}
.tog.active{border-color:var(--amber);color:var(--amber);background:rgba(255,176,85,0.1);}
.wide-btn{width:100%;padding:10px;margin-top:6px;background:transparent;border:1px solid var(--edge);
  border-radius:3px;color:var(--ink);cursor:pointer;font-family:inherit;letter-spacing:.12em;
  text-transform:lowercase;font-size:.95rem;transition:all .3s;}
.wide-btn:hover{border-color:var(--amber);color:var(--amber);}
.wide-btn.danger:hover{border-color:#c05a4a;color:#e08070;}

/* Journal */
#journal-list{max-height:50vh;overflow-y:auto;margin-bottom:14px;}
.jl-empty{font-style:italic;color:var(--mist);line-height:1.6;font-size:1rem;}
.jl-item{padding:12px 0;border-bottom:1px solid rgba(200,180,140,0.1);}
.jl-name{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:5px;opacity:.8;}
.jl-text{font-style:italic;line-height:1.5;color:var(--ink);font-size:1.05rem;}

/* Joystick */
#joystick{position:fixed;bottom:40px;left:40px;width:110px;height:110px;z-index:17;
  border:1px solid rgba(255,176,85,0.3);border-radius:50%;background:rgba(16,15,22,0.4);
  backdrop-filter:blur(4px);touch-action:none;}
#joystick-knob{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px;
  border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffcf87,#ff8a2b);
  box-shadow:0 0 20px rgba(255,150,60,0.5);}

/* Footer */
#footer{position:fixed;bottom:12px;right:16px;z-index:14;font-size:.8rem;letter-spacing:.08em;}
#footer a{color:rgba(139,147,168,0.55);text-decoration:none;transition:color .3s;}
#footer a:hover{color:var(--amber);}

.hidden{display:none !important;}

@media (max-width:600px){
  #hints{bottom:120px;font-size:.85rem;}
  #snippet{bottom:150px;}
  #footer{bottom:8px;right:10px;font-size:.72rem;}
}
</parameter>