/* ============================================================
   MOON CRANE HOUSE — grindhouse UI
   Palette: vermilion #C8271E / jade #2E5E4E / bone #E8DCC8 / ink #0A0507
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; }
html,body { height:100%; overflow:hidden; background:#0A0507; font-family:Georgia,'Times New Roman',serif; }

#frame { position:fixed; inset:0; }
#stage { position:absolute; inset:0; overflow:hidden; cursor:none; }

#scene-img, #scene-video {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; transition: filter 1.2s ease;
}
#scene-video { opacity:0; pointer-events:none; }
#stage.playing #scene-video { opacity:1; pointer-events:auto; }

/* Blood Reel: at max blood the whole frame curdles arterial */
body[data-blood="1"] #scene-img { filter: saturate(0.95) contrast(1.03); }
body[data-blood="2"] #scene-img { filter: sepia(0.12) saturate(1.15) hue-rotate(-8deg) contrast(1.06); }
body[data-blood="3"] #scene-img { filter: sepia(0.25) saturate(1.5) hue-rotate(-18deg) contrast(1.12); }
body[data-blood="4"] #scene-img { filter: saturate(1.9) hue-rotate(-25deg) contrast(1.18) brightness(0.94); }

#hotspot-layer { position:absolute; inset:0; }
#stage.loading #hotspot-layer, #stage.playing #hotspot-layer { pointer-events:none; }
#stage.loading #hotspot-layer .hotspot, #stage.playing #hotspot-layer .hotspot { opacity:0; }
.hotspot {
  position:absolute; opacity:.6; transition:opacity .35s ease;
  cursor:none;
}
.hotspot::before {
  content:''; position:absolute; left:50%; top:50%; width:16px; height:16px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, #FFE8C8 0%, #FF6A3A 55%, rgba(200,39,30,0) 100%);
  box-shadow:0 0 18px 6px rgba(200,39,30,.85);
  animation:beacon 1.6s ease-in-out infinite;
}
@keyframes beacon { 0%,100%{opacity:.55; transform:translate(-50%,-50%) scale(1);} 50%{opacity:1; transform:translate(-50%,-50%) scale(1.25);} }
.hotspot .halo {
  position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(circle, rgba(200,39,30,.55) 0%, rgba(200,39,30,0) 70%);
  animation:halo-pulse 2.2s ease-in-out infinite;
  pointer-events:none;
}
.hotspot.seen { opacity:.85; }
.hotspot:hover .halo { animation-duration:.8s; opacity:1.4; }
@keyframes halo-pulse { 0%,100%{opacity:.5; transform:scale(1);} 50%{opacity:1; transform:scale(1.12);} }

#bloom { position:absolute; inset:0; pointer-events:none;
  box-shadow: inset 0 0 220px rgba(10,5,7,.85); }

/* Blood splatters — SVG drops flung over the screen */
#blood-reel { position:absolute; inset:0; pointer-events:none; z-index:40; }
.splat { position:absolute; transform-origin:center; animation:splat-in .5s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes splat-in { 0%{ transform:scale(3); opacity:0;} 60%{opacity:.95;} 100%{ transform:scale(1); opacity:.92;} }

/* Dialogue */
#dialogue {
  pointer-events:none; /* subtitles never block the world */
  position:absolute; left:50%; bottom:7%; transform:translateX(-50%);
  width:min(860px, 84vw); z-index:60; cursor:none;
  background:linear-gradient(180deg, rgba(10,5,7,.35), rgba(10,5,7,.88));
  border:1px solid rgba(200,39,30,.6); border-radius:4px;
  padding:18px 26px 20px; backdrop-filter:blur(3px);
  box-shadow:0 0 40px rgba(200,39,30,.25);
}
#dlg-name {
  font-variant:small-caps; letter-spacing:.28em; color:#E8DCC8;
  font-size:13px; margin-bottom:8px; opacity:.85;
}
#dlg-name .hanja { color:#C8271E; margin-left:.6em; letter-spacing:.1em; }
#dlg-text { color:#F2E9D8; font-size:clamp(17px,2.1vw,23px); line-height:1.5; font-style:italic; }
#dlg-text .cue { color:#C8271E; font-style:normal; }

/* Karaoke: the voice lights each word as it lands — color/glow only, the letterform never changes */
.dlg-word { font-style: inherit; transition: color .18s ease, text-shadow .18s ease; }
.dlg-word.active {
  color:#FF6A3A;
  text-shadow:0 0 14px rgba(255,106,58,.85), 0 0 4px rgba(255,180,120,.6);
}
.dlg-word.spoken { color:rgba(232,220,200,.55); }

.hidden { display:none !important; }

/* HUD */
#hud {
  position:absolute; top:0; left:0; right:0; z-index:50;
  display:flex; gap:26px; align-items:center;
  padding:14px 22px; cursor:none;
  background:linear-gradient(180deg, rgba(10,5,7,.8), transparent);
  transition:opacity .5s;
}
.stat { display:flex; align-items:center; gap:10px; }
.stat-label { font-size:11px; letter-spacing:.22em; color:rgba(232,220,200,.75); font-variant:small-caps; white-space:nowrap; }
.stat-bar { width:110px; height:7px; background:rgba(232,220,200,.13); border-radius:4px; overflow:hidden; }
.stat-fill { height:100%; width:0%; border-radius:4px; transition:width .7s cubic-bezier(.2,.8,.3,1); }
.stat-fill.fortune { background:linear-gradient(90deg,#2E5E4E,#7FC0A6); }
.stat-fill.desire  { background:linear-gradient(90deg,#8A2A52,#E06A9A); }
.stat-fill.blood   { background:linear-gradient(90deg,#5A0E0E,#C8271E); }
#body-count { margin-left:auto; color:#C8271E; font-size:18px; letter-spacing:.15em; text-shadow:0 0 12px rgba(200,39,30,.6); }

#scene-title {
  position:absolute; top:16%; left:0; right:0; text-align:center; z-index:45;
  font-size:clamp(22px,3.4vw,40px); letter-spacing:.34em; color:#E8DCC8;
  text-shadow:0 0 30px rgba(200,39,30,.8); font-variant:small-caps;
  pointer-events:none; transition:opacity 1s;
}

/* Lantern cursor */
#lantern {
  position:fixed; width:34px; height:34px; border-radius:50%; z-index:100;
  pointer-events:none; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(255,120,60,.9) 0%, rgba(200,39,30,.45) 40%, rgba(200,39,30,0) 70%);
  box-shadow:0 0 34px 14px rgba(200,39,30,.35);
  transition:transform .06s linear;
}
#lantern::after {
  content:'🏮'; position:absolute; inset:0; display:flex;
  align-items:center; justify-content:center; font-size:22px;
  filter:drop-shadow(0 0 6px rgba(255,80,30,.9));
}

/* Overlay (menus, kuji, endings, deaths) */
#overlay {
  position:fixed; inset:0; z-index:200; display:flex;
  align-items:center; justify-content:center;
  background:rgba(6,3,4,.82); backdrop-filter:blur(6px);
}
#overlay-card {
  width:min(760px, 90vw); max-height:86vh; overflow:auto;
  background:linear-gradient(160deg, #17090B, #0A0507);
  border:1px solid rgba(200,39,30,.7); border-radius:6px;
  padding:38px 44px; color:#E8DCC8; text-align:center;
  box-shadow:0 0 80px rgba(200,39,30,.35);
}
#overlay-card h2 { font-variant:small-caps; letter-spacing:.3em; font-weight:normal; margin-bottom:6px; color:#E8DCC8; }
#overlay-card .hanja-big { font-size:44px; color:#C8271E; margin-bottom:10px; }
#overlay-card p { line-height:1.65; margin:14px 0; font-size:17px; color:rgba(232,220,200,.88); font-style:italic; }
#overlay-card .choices { display:flex; flex-direction:column; gap:12px; margin-top:24px; }
button.choice {
  font-family:inherit; font-size:17px; letter-spacing:.14em;
  padding:14px 22px; cursor:pointer; color:#E8DCC8;
  background:linear-gradient(180deg, rgba(200,39,30,.22), rgba(200,39,30,.08));
  border:1px solid rgba(200,39,30,.65); border-radius:3px;
  transition:all .25s ease; font-variant:small-caps;
}
button.choice:hover { background:rgba(200,39,30,.4); box-shadow:0 0 24px rgba(200,39,30,.5); letter-spacing:.2em; }
button.choice.danger { border-color:#7A0C0C; background:linear-gradient(180deg, rgba(122,12,12,.3), rgba(122,12,12,.1)); }
button.choice.danger:hover { background:rgba(160,10,10,.5); }
button.choice.silk { border-color:rgba(224,106,154,.6); background:linear-gradient(180deg, rgba(138,42,82,.3), rgba(138,42,82,.1)); }
button.choice.silk:hover { background:rgba(180,60,110,.45); }

/* Kuji sticks */
.sticks { display:flex; gap:18px; justify-content:center; margin:26px 0 8px; }
.stick {
  width:26px; height:150px; cursor:pointer; border-radius:13px 13px 4px 4px;
  background:linear-gradient(180deg,#D8C9A8,#A8916A); border:1px solid #6B5537;
  transition:transform .3s ease, box-shadow .3s ease; position:relative;
}
.stick:hover { transform:translateY(-16px); box-shadow:0 0 26px rgba(200,39,30,.6); }
.stick .num { position:absolute; bottom:12px; width:100%; text-align:center; color:#3A2A18; font-weight:bold; font-size:18px; }
.stick.shaken { animation:shake .5s ease; }
@keyframes shake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg)} 75%{transform:rotate(8deg)} }

/* Death reel */
#death-tag {
  position:absolute; bottom:24px; right:26px; z-index:80; cursor:none;
  background:rgba(10,5,7,.75); border:1px solid rgba(200,39,30,.7);
  color:#C8271E; font-variant:small-caps; letter-spacing:.2em;
  padding:10px 18px; border-radius:3px; font-size:14px;
}
#death-tag:hover { background:rgba(122,12,12,.6); }

/* Title screen */
#title-screen {
  position:fixed; inset:0; z-index:500; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(ellipse at center, #1A0A0C 0%, #0A0507 70%);
}
.ts-inner { text-align:center; }
.ts-hanja { font-size:clamp(60px,10vw,110px); color:#C8271E; text-shadow:0 0 50px rgba(200,39,30,.8); letter-spacing:.18em; }
#title-screen h1 { font-size:clamp(26px,4vw,44px); letter-spacing:.4em; color:#E8DCC8; font-weight:normal; margin-top:8px; }
.ts-sub { font-style:italic; color:rgba(232,220,200,.7); letter-spacing:.2em; margin-top:10px; font-size:17px; }
.ts-rating {
  margin:34px auto 0; display:inline-block; padding:8px 20px;
  border:1px solid rgba(200,39,30,.8); border-radius:3px;
  color:#C8271E; letter-spacing:.18em; font-size:13px;
}
#btn-begin {
  display:block; margin:36px auto 0; font-family:inherit; font-size:20px;
  letter-spacing:.3em; padding:16px 44px; cursor:pointer; color:#0A0507;
  background:#C8271E; border:none; border-radius:3px; font-variant:small-caps;
  transition:all .3s; box-shadow:0 0 30px rgba(200,39,30,.5);
}
#btn-begin:hover { background:#E8DCC8; box-shadow:0 0 50px rgba(232,220,200,.5); }
.ts-warn { margin-top:26px; font-size:11px; color:rgba(232,220,200,.4); letter-spacing:.1em; }

/* model-viewer for collectibles */
model-viewer { width:100%; height:320px; background:radial-gradient(circle at 50% 40%, #2A1012, #0A0507); border-radius:4px; }

/* Grain overlay */
#grain { position:fixed; inset:-50%; z-index:90; pointer-events:none; opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation:grain-jump .4s steps(4) infinite; }
@keyframes grain-jump { 0%{transform:translate(0,0)} 25%{transform:translate(-2%,1%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(-1%,2%)} 100%{transform:translate(2%,1%)} }

/* ---- Click juice: ink ripple + droplets (no gameplay effect, pure feel) ---- */
.click-ripple {
  position:fixed; width:14px; height:14px; border-radius:50%;
  border:1.5px solid rgba(200,39,30,.75); pointer-events:none; z-index:150;
  transform:translate(-50%,-50%); animation:ripple .6s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes ripple { 0%{ opacity:.8; transform:translate(-50%,-50%) scale(.4);} 100%{ opacity:0; transform:translate(-50%,-50%) scale(2.2);} }
.click-droplet {
  position:fixed; width:6px; height:6px; border-radius:50% 50% 50% 0;
  background:rgba(160,12,14,.9); pointer-events:none; z-index:150;
  animation:droplet .45s ease-out forwards;
}
@keyframes droplet { 0%{ opacity:1; transform:translate(-50%,-50%) rotate(var(--a)) translateX(0);} 100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--a)) translateX(34px);} }
.hotspot .halo { transition:opacity .35s ease; }
.hotspot .halo.flare { animation:flare .5s ease-out; }
@keyframes flare { 0%{ filter:brightness(2.4); transform:scale(1);} 100%{ filter:brightness(1); transform:scale(1);} }
button.choice:active { transform:scale(.96); filter:brightness(1.35); }
#btn-begin:active { transform:scale(.97); }