/* ====== KRANIOCLAST — modern restoration ======
   Faithful rebuild of the original Flash "Kabinet of Dr. Mangor".
   Palette + gothic type recovered from the original SWFs. */

/* ---- Original gothic fonts (extracted / re-sourced) ---- */
@font-face{ font-family:"Cromwell";       src:url("../assets/fonts/Cromwell.ttf")     format("truetype"); font-display:swap; }
@font-face{ font-family:"Roman Engraved"; src:url("../assets/fonts/RomanEngraved.ttf") format("truetype"); font-display:swap; }
@font-face{ font-family:"Reduction";      src:url("../assets/fonts/Reduction.ttf")     format("truetype"); font-display:swap; }
@font-face{ font-family:"Zombified";      src:url("../assets/fonts/Zombified.ttf")     format("truetype"); font-display:swap; }
@font-face{ font-family:"Lovesick";       src:url("../assets/fonts/LovesAOE.ttf")      format("truetype"); font-display:swap; }
@font-face{ font-family:"Rechtman";       src:url("../assets/fonts/RECHTMAN.TTF")      format("truetype"); font-display:swap; }
@font-face{ font-family:"Corpse";         src:url("../assets/fonts/Corpse.ttf")        format("truetype"); font-display:swap; }

:root{
  --black:#000000;
  --olive-deep:#1b2008;
  --olive:#5E721F;
  --olive-lit:#668448;
  --green:#99CC33;
  --green-bright:#99FF00;
  --purple:#7a2a78;
  --magenta:#c43bbf;
  --silver:#cdbfd6;
  --paper:#b8c08a;
  --maxw:1180px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--black);
  color:var(--olive-lit);
  font-family:"Times New Roman", Times, serif;
  line-height:1.6;
  overflow-x:hidden;
  /* subtle olive grunge vignette behind everything */
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(94,114,31,.18), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(94,114,31,.12), transparent 55%);
}
a{ color:var(--green); text-decoration:none; transition:color .25s, text-shadow .25s; }
a:hover{ color:var(--green-bright); text-shadow:0 0 8px rgba(153,255,0,.6); }
img{ max-width:100%; display:block; }

/* =================== SPLASH =================== */
#splash{
  position:fixed; inset:0; z-index:1000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--black);
}
#splash .card{
  width:min(360px,82vw);
  filter:drop-shadow(0 10px 40px rgba(0,0,0,.8));
  animation:floaty 6s ease-in-out infinite;
}
#splash .enter{
  margin-top:1.4rem;
  font-family:"Roman Engraved","Cromwell",serif;
  font-size:1.5rem; letter-spacing:.35em; text-indent:.35em;
  color:var(--green);
  background:none; border:1px solid rgba(153,204,51,.45);
  padding:.55rem 2.4rem; cursor:pointer;
  transition:all .3s;
}
#splash .enter:hover{
  color:var(--black); background:var(--green);
  box-shadow:0 0 26px rgba(153,255,0,.55);
}
#splash .hint{ margin-top:1rem; font-size:.8rem; color:var(--olive); opacity:.7; }
@keyframes floaty{ 50%{ transform:translateY(-10px); } }

/* =================== STAGE / LAYOUT =================== */
#stage{ opacity:0; visibility:hidden; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 1.25rem; }

header.masthead{ text-align:center; padding:3rem 1rem 1rem; }
.masthead .glyph{ font-family:"Zombified"; font-size:1rem; color:var(--olive); letter-spacing:.4em; }
.masthead h1{
  margin:.2rem 0;
  font-family:"Cromwell","Roman Engraved",serif;
  font-weight:400; font-size:clamp(2.4rem,7vw,4.6rem);
  letter-spacing:.06em; color:var(--green);
  text-shadow:0 0 18px rgba(94,114,31,.5);
}
.masthead .tagline{
  font-family:"Roman Engraved",serif; font-size:clamp(.9rem,2.5vw,1.15rem);
  letter-spacing:.25em; color:var(--olive-lit); text-transform:uppercase;
}

/* =================== CABINET =================== */
.cabinet-sec{ display:flex; flex-direction:column; align-items:center; gap:1.5rem; padding:2rem 0 3rem; }
.cabinet-intro{ max-width:680px; text-align:center; }
.cabinet-intro h2{
  font-family:"Roman Engraved",serif; color:var(--green);
  font-size:1.8rem; letter-spacing:.04em; margin:.2rem 0 1rem;
}
.cabinet-intro p{ color:var(--paper); }

/* Large centerpiece: hand-built interactive cabinet.
   Source frames are 600x550 (≈1.09:1). Keep aspect, stay responsive. */
.cabinet-stage{ width:min(640px,94vw); margin:0 auto; }
.cabinet-scene{
  position:relative; width:100%; aspect-ratio:560 / 513; background:#000;
  border:1px solid var(--purple); border-radius:8px; overflow:hidden;
  box-shadow:0 0 40px rgba(0,0,0,.9), 0 0 22px rgba(122,42,120,.3);
}
#cabinet-frame{ width:100%; height:100%; object-fit:cover; display:block; user-select:none; }

/* the floating key */
.cab-key{
  position:absolute; left:54%; top:30%; width:26%; height:auto;
  cursor:grab; filter:drop-shadow(0 4px 8px rgba(0,0,0,.7));
  transform-origin:78% 50%;  /* pivot near the skull-bow for the turn */
  animation:keyfloat 2.6s ease-in-out infinite;
  transition:filter .3s;
}
.cab-key:hover, .cab-key:focus{ outline:none; filter:drop-shadow(0 0 10px rgba(196,59,191,.8)); }
.cabinet-scene.opening .cab-key, .cabinet-scene.opened .cab-key{ animation:none; }
.cabinet-scene.opened .cab-key{ display:none; }
@keyframes keyfloat{ 50%{ transform:translateY(-8px) rotate(-3deg); } }

/* prompt */
.cab-prompt{
  position:absolute; left:52%; top:9%; transform:translateX(-50%);
  font-family:"Lovesick","Roman Engraved",serif; color:var(--green);
  font-size:clamp(1.5rem,5.2vw,2.5rem); letter-spacing:.02em; white-space:nowrap;
  text-shadow:0 0 12px rgba(94,114,31,.85); pointer-events:none;
  transition:opacity .5s;
}
.cabinet-scene.opened .cab-prompt{ opacity:0; }

/* ruffle (original) takes over the scene when requested */
#cabinet-ruffle{ position:absolute; inset:0; background:#000; }
#cabinet-ruffle ruffle-player, #cabinet-ruffle > *{ width:100% !important; height:100% !important; }

.cabinet-stage .stage-note{ text-align:center; margin-top:.7rem; font-size:.78rem; letter-spacing:.08em; }
.cabinet-stage .stage-note a{ color:var(--olive-lit); }
.cabinet-stage .stage-note a:hover{ color:var(--green); }

/* =================== CURIOSITIES GRID =================== */
.curios{ padding:2rem 0 3rem; }
.curios h3{
  text-align:center; font-family:"Roman Engraved",serif; color:var(--olive-lit);
  letter-spacing:.3em; text-transform:uppercase; font-size:1rem; margin-bottom:2rem;
}
.grid{
  display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
.curio{
  position:relative; cursor:pointer; text-align:center;
  padding:1.4rem 1rem; border:1px solid rgba(94,114,31,.35);
  background:linear-gradient(180deg, rgba(94,114,31,.05), rgba(0,0,0,.4));
  border-radius:8px; overflow:hidden;
  transition:transform .35s, border-color .35s, box-shadow .35s;
}
.curio::before{ /* the original hand-drawn boiling spiral (from bottomgar.swf) */
  content:""; position:absolute; inset:0;
  background:url("../assets/img/spiral.webp") center/120% no-repeat;
  opacity:.18; pointer-events:none;
  transition:opacity .4s;
}
.curio:hover{ transform:translateY(-6px); border-color:var(--magenta);
  box-shadow:0 12px 30px rgba(0,0,0,.6), 0 0 18px rgba(196,59,191,.35); }
.curio:hover::before{ opacity:.42; animation:spin 9s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.curio .num{ font-family:"Zombified"; font-size:.75rem; color:var(--olive); letter-spacing:.2em; }
.curio .name{ font-family:"Cromwell","Roman Engraved",serif; font-size:1.45rem; color:var(--green); margin:.3rem 0; }
.curio .blurb{ font-size:.82rem; color:var(--paper); opacity:.8; }

/* =================== PANEL (drawer) =================== */
#scrim{ position:fixed; inset:0; background:rgba(0,0,0,.78); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden; z-index:1100; transition:opacity .3s, visibility .3s; }
#scrim.open{ opacity:1; visibility:visible; }
.panel{
  position:fixed; top:0; right:0; height:100%; width:min(520px,92vw); z-index:1200;
  background:linear-gradient(180deg,#0c0f04,#05060a);
  border-left:1px solid var(--purple);
  box-shadow:-20px 0 60px rgba(0,0,0,.8);
  transform:translateX(100%); transition:transform .45s cubic-bezier(.6,.05,.2,1);
  padding:3.2rem 2rem 2rem; overflow-y:auto;
}
.panel.open{ transform:translateX(0); }
.panel .close{ position:absolute; top:1rem; right:1.2rem; font-family:"Zombified"; font-size:1.6rem;
  color:var(--olive-lit); background:none; border:none; cursor:pointer; }
.panel .close:hover{ color:var(--magenta); }
.panel h2{ font-family:"Cromwell",serif; color:var(--green); font-size:2rem; margin:.2rem 0 .2rem; }
.panel .kicker{ font-family:"Roman Engraved",serif; letter-spacing:.25em; text-transform:uppercase;
  color:var(--olive); font-size:.75rem; }
.panel p{ color:var(--paper); }
.panel .quote{ font-family:"Lovesick",serif; color:var(--green); font-size:1.3rem; margin:1.4rem 0;
  border-left:2px solid var(--purple); padding-left:1rem; }
.panel-swf{ width:100%; margin:1.2rem 0 .4rem; background:#000;
  border:1px solid var(--purple); border-radius:6px; overflow:hidden;
  box-shadow:0 0 22px rgba(0,0,0,.8); }
.panel-swf ruffle-player, .panel-swf > *{ width:100% !important; height:100% !important; }
.panel-links{ display:flex; flex-direction:column; gap:.6rem; margin:1.2rem 0 .4rem; }
.panel-link{
  display:inline-block; text-align:center;
  font-family:"Roman Engraved",serif; letter-spacing:.12em; text-transform:uppercase;
  font-size:.82rem; color:var(--green);
  border:1px solid var(--green); border-radius:4px; padding:.7rem 1rem;
  transition:all .3s;
}
.panel-link:hover{ color:var(--black); background:var(--green); box-shadow:0 0 18px rgba(153,255,0,.4); }
.panel .status{ display:inline-block; margin-top:1rem; font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--olive); border:1px solid rgba(94,114,31,.4); padding:.25rem .7rem; border-radius:3px; }

/* =================== CONTACT =================== */
.contact{ max-width:560px; margin:2rem auto 4rem; padding:2rem; text-align:center;
  border:1px solid rgba(94,114,31,.3); border-radius:10px;
  background:linear-gradient(180deg, rgba(94,114,31,.04), rgba(0,0,0,.4)); }
.contact h3{ font-family:"Roman Engraved",serif; color:var(--green); letter-spacing:.2em; }
.contact form{ display:flex; flex-direction:column; gap:.8rem; margin-top:1rem; }
.contact input, .contact textarea{
  background:#06080c; border:1px solid rgba(94,114,31,.4); color:var(--paper);
  padding:.7rem .9rem; font-family:"Times New Roman",serif; border-radius:4px; }
.contact input:focus, .contact textarea:focus{ outline:none; border-color:var(--magenta); }
.contact button{
  font-family:"Roman Engraved",serif; letter-spacing:.25em; text-transform:uppercase;
  color:var(--green); background:none; border:1px solid var(--green); padding:.7rem;
  cursor:pointer; transition:all .3s; }
.contact button:hover{ color:var(--black); background:var(--green); box-shadow:0 0 18px rgba(153,255,0,.4); }

/* guestbook ledger */
.gb-entries{ margin-top:2rem; text-align:left; display:flex; flex-direction:column; gap:1rem; }
.gb-empty{ text-align:center; color:var(--olive); font-size:.85rem; }
.gb-entry{ border:1px solid rgba(94,114,31,.3); border-radius:6px; padding: .9rem 1.1rem;
  background:rgba(0,0,0,.35); }
.gb-who{ font-family:"Roman Engraved",serif; color:var(--green); letter-spacing:.06em; }
.gb-when{ float:right; font-family:"Times New Roman",serif; font-size:.72rem; color:var(--olive); }
.gb-msg{ margin:.5rem 0 0; color:var(--paper); font-size:.92rem; white-space:pre-wrap; word-break:break-word; }

/* =================== FOOTER GARLAND =================== */
footer.garland{ position:relative; border-top:1px solid rgba(94,114,31,.25); padding:1.5rem 1rem 3rem; text-align:center; }
footer .marquee{ overflow:hidden; white-space:nowrap; }
footer .marquee img{ display:inline-block; height:40px; margin:0 auto; }
footer .copy{ margin-top:.8rem; font-size:.75rem; color:var(--olive); letter-spacing:.1em; }

/* audio toggle */
#audio-toggle{ position:fixed; bottom:1rem; left:1rem; z-index:1300;
  font-family:"Roman Engraved",serif; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--olive-lit); background:rgba(0,0,0,.6); border:1px solid rgba(94,114,31,.4);
  padding:.5rem .8rem; border-radius:20px; cursor:pointer; transition:all .3s; }
#audio-toggle:hover{ color:var(--green); border-color:var(--green); }
#audio-toggle.on{ color:var(--green-bright); border-color:var(--green-bright); box-shadow:0 0 12px rgba(153,255,0,.4); }

/* =================== RESPONSIVE =================== */
@media (max-width:640px){
  .cabinet-sec{ gap:1.5rem; }
  header.masthead{ padding-top:2rem; }
  .panel{ padding-top:3.4rem; }
}
@media (prefers-reduced-motion:reduce){
  #splash .card, .curio::before{ animation:none; }
  *{ transition-duration:.001s !important; }
}