/* Self-contained cinematic welcome. Gameplay canvas/HUD untouched. */
.dh-onboarding{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;overflow-y:auto;background:#030506;color:#ede9e6;font-family:Georgia,'Times New Roman',serif;isolation:isolate}
.dh-onboarding[hidden],.dh-onboarding [hidden]{display:none!important}
.dh-scene,.dh-scene>div{position:absolute;pointer-events:none}
.dh-scene{inset:0;z-index:-2;overflow:hidden;background:radial-gradient(ellipse at 50% 49%,#16404a 0%,#0a191b 24%,#05090b 52%,#010202 90%)}
.dh-ceiling{inset:0 0 50%;background:repeating-linear-gradient(90deg,transparent 0 13%,#182020 13.2% 13.6%,transparent 14% 26%),repeating-linear-gradient(0deg,transparent 0 17%,#192326 18% 18.5%,transparent 19% 36%);clip-path:polygon(0 0,100% 0,65% 45%,35% 45%);opacity:.7}
.dh-floor{inset:49% 0 0;background:repeating-linear-gradient(91deg,#01030599 0 8%,#1c282a44 8.2% 8.5%,transparent 9% 17%),linear-gradient(#0e2326ad,#090909 50%,#180404 100%);clip-path:polygon(35% 0,65% 0,100% 100%,0 100%)}
.dh-wall{top:0;bottom:0;width:47%;background:repeating-linear-gradient(0deg,transparent 0 24%,#152021 25%,transparent 25.4% 48%),linear-gradient(90deg,#010101,#142021);opacity:.9}
.dh-wall-left{left:0;clip-path:polygon(0 0,100% 35%,75% 60%,0 100%)}
.dh-wall-right{right:0;transform:scaleX(-1);clip-path:polygon(0 0,100% 35%,75% 60%,0 100%)}
.dh-hall{top:32%;bottom:41%;left:40%;right:40%;border:5px solid #3b525353;box-shadow:0 0 45px #2d777527,0 0 140px #528e7444}
.dh-hall-two{inset:39% 44% 44%;border:3px solid #447f7f55}
.dh-door{top:29%;width:18%;height:43%;background:linear-gradient(100deg,#030808 65%,#31484a);border:8px solid #141718;box-shadow:0 0 35px #000}
.dh-door:after{content:'';position:absolute;top:48%;right:12%;width:7px;height:7px;border-radius:50%;background:#909b88}
.dh-door-left{left:6%;transform:skewY(13deg)}
.dh-door-right{right:6%;transform:skewY(-13deg)}
.dh-red-light{top:7%;right:13%;width:4%;height:4%;background:#ff2926;box-shadow:0 0 20px 12px #e60000,0 0 160px 100px #bd08084f;animation:dh-flicker 6.7s infinite}
.dh-white-light{top:36%;left:47%;width:6%;height:1%;background:#ace7e0;box-shadow:0 0 22px 8px #8de8e48c,0 0 130px 30px #51c4c755;animation:dh-flicker 9s infinite}
.dh-ghost{left:calc(50% - 16px);top:45%;width:32px;height:90px;opacity:.48;filter:blur(3px);background:linear-gradient(#010101,#050909 60%,transparent);clip-path:polygon(34% 0,65% 0,81% 17%,66% 35%,100% 100%,0 100%,30% 35%,18% 17%);animation:dh-appear 14s infinite}
.dh-ghost:before{content:'';position:absolute;top:0;left:8px;width:16px;height:21px;border-radius:50%;background:#040909}
.dh-fog{inset:45% -20% -20%;background:radial-gradient(ellipse at 40% 80%,#b7d0c236,transparent 56%),radial-gradient(ellipse at 70% 70%,#879d9d4a,transparent 40%);filter:blur(22px);animation:dh-fog 14s ease-in-out infinite alternate}
.dh-vignette{inset:0;background:radial-gradient(ellipse at center,transparent 8%,#020203b0 73%,#000 100%),linear-gradient(180deg,#0009,transparent 35%,#000a)}
.dh-onboarding-panel{position:relative;text-align:center;width:min(940px,100%);padding:clamp(20px,5vw,50px) 18px;max-height:calc(100dvh - 20px);overflow-y:auto;text-shadow:0 3px 8px #000}
.dh-onboarding-eyebrow{font:600 clamp(10px,1vw,13px)/1.5 Georgia,serif;letter-spacing:.38em;color:#d3ccc4;margin:0 0 20px}
.dh-onboarding h1{font-size:clamp(49px,10vw,125px);line-height:.95;letter-spacing:-.065em;margin:0 0 19px;font-weight:900;color:#e9e9e8;text-shadow:0 4px 2px #000,0 0 30px #a31717}
.dh-onboarding h1 span{color:#d6191d;text-shadow:0 3px 2px #130000,0 0 35px #d40909}
.dh-tagline{margin:0 auto 48px;font-size:clamp(10px,1.4vw,15px);line-height:1.6;letter-spacing:.12em;color:#ded8d5}
.dh-tagline em{font-style:normal;font-weight:700;color:#ff3339}
.dh-onboarding h2{font-size:clamp(30px,5vw,55px);line-height:1.1;margin:0 0 18px;color:#f5eee9}
.dh-onboarding-desc{max-width:700px;margin:0 auto 25px;color:#d3dcda;font:15px/1.75 Arial,sans-serif}
.dh-onboarding-actions{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:20px auto}
.dh-menu{display:flex;flex-direction:column;gap:8px;align-items:center}
.dh-onboarding-btn{min-width:240px;min-height:50px;padding:13px 26px;border:1px solid #9d1b25;background:#6c0a12d9;color:white;letter-spacing:.19em;font:700 16px Georgia,serif;cursor:pointer;transition:background .2s,transform .2s,box-shadow .2s;box-shadow:0 0 25px #b8000045}
.dh-onboarding-btn:hover,.dh-onboarding-btn:focus-visible{background:#d01122;transform:scale(1.035);box-shadow:0 0 35px #f000008c;outline:2px solid #ffffffb3;outline-offset:2px}
.dh-onboarding-btn-secondary{background:#08090b91;border-color:#b7a2a24d;box-shadow:none;font-size:14px}
.dh-onboarding-info{margin:35px auto 0;font:10px/2 Arial,sans-serif;color:#bbb;letter-spacing:.25em}
.dh-onboarding-info span{color:#d61a22;margin:0 8px}
.dh-instruction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:22px auto;max-width:780px;text-align:left}
.dh-instruction-grid section{padding:15px;background:#071214e8;border:1px solid #a52d3866}
.dh-instruction-grid h3{color:#ea8181;margin:0 0 8px;font:700 13px Arial,sans-serif;letter-spacing:.15em}
.dh-instruction-grid p{color:#d9dcdc;font:13px/1.7 Arial,sans-serif;margin:0}
.dh-onboarding kbd{border:1px solid #fff6;padding:2px 5px;color:white}
.dh-setting{display:flex;justify-content:space-between;gap:15px;margin:25px auto;max-width:550px;padding:16px;background:#0a1415e6;border:1px solid #853236;color:#ddd;font:700 12px Arial,sans-serif;letter-spacing:.12em}
.dh-setting input{width:20px;height:20px;accent-color:#bf1722}
.dh-calm .dh-scene>div{animation:none!important}
@keyframes dh-flicker{0%,16%,19%,45%,48%,90%,100%{opacity:1}17%,46%,91%{opacity:.15}18%,47%{opacity:.65}}
@keyframes dh-fog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes dh-appear{0%,29%,44%,79%,100%{opacity:0}32%,41%,82%,92%{opacity:.65}}
@media(max-width:650px){.dh-onboarding{padding:8px}.dh-onboarding-panel{padding:25px 10px}.dh-onboarding h1{font-size:clamp(45px,12vw,75px)}.dh-tagline{margin-bottom:25px}.dh-instruction-grid{grid-template-columns:1fr;gap:8px}.dh-onboarding-btn{min-width:min(250px,90vw)}.dh-onboarding-info{letter-spacing:.1em}}
@media(prefers-reduced-motion:reduce){.dh-onboarding *{animation:none!important;transition:none!important}}


/* ===================================================
   HORROR GAME END / RETRY SCREEN — additive visual layer
   Existing game state, gameplay logic and buttons unchanged.
   =================================================== */
#screen {
  isolation: isolate;
  overflow: auto;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(166, 10, 24, .23), transparent 43%),
    radial-gradient(ellipse at 51% 76%, rgba(22, 76, 81, .20), transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, .94), rgba(6, 1, 3, .96));
  backdrop-filter: blur(7px);
}
#screen::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.018) 5px 6px),
    radial-gradient(ellipse at 50% 80%, rgba(150, 7, 18, .16), transparent 60%);
  animation: dhDeathAmbient 5s ease-in-out infinite alternate;
}
#screen::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 16%, rgba(0,0,0,.76) 100%);
}
#screen #panel {
  position: relative;
  width: min(760px, 100%);
  max-width: 760px;
  box-sizing: border-box;
  padding: clamp(25px, 4vw, 54px);
  overflow: hidden;
  border: 1px solid rgba(179, 36, 48, .54);
  background:
    radial-gradient(ellipse at 50% 0, rgba(125,10,20,.16), transparent 57%),
    linear-gradient(160deg, rgba(8, 11, 13, .97), rgba(3, 5, 7, .98));
  box-shadow: 0 0 50px rgba(167,0,13,.21), 0 30px 90px rgba(0,0,0,.89), inset 0 0 1px #fff4;
  animation: dhDeathPulse 4.2s ease-in-out infinite;
}
#screen #panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, transparent 45%, rgba(157,0,0,.08) 49%, transparent 53%),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.01) 8px 9px);
}
#screen #panel > * { position: relative; z-index: 1; }
#screen #panel .eyebrow {
  color: #d3adad;
  font-size: 11px;
  letter-spacing: .31em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
#screen #panel h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-size: clamp(51px, 9vw, 108px);
  letter-spacing: -.06em;
  line-height: .93;
  color: #eee9e7;
  text-shadow: 0 5px 1px #000, 0 0 28px rgba(170,0,9,.42);
  margin: 0 0 24px;
}
#screen #panel h1 span {
  color: #d3202c;
  text-shadow: 0 4px 1px #200207, 0 0 35px rgba(235,0,20,.42);
}
#screen #panel p, #screen #description {
  color: #d1c8c7;
  font-size: 15px;
  line-height: 1.8;
  max-width: 630px;
}
#screen #panel button, #screen #start {
  border: 1px solid rgba(215,38,54,.8);
  min-height: 54px;
  min-width: 205px;
  padding: 15px 27px;
  color: #fff6f4;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #af1725, #60040e);
  box-shadow: 0 0 25px #a500003d, inset 0 1px 0 #ffffff1e;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
#screen #panel button:hover, #screen #panel button:focus-visible {
  transform: translateY(-2px) scale(1.02);
  filter: brightness(1.18);
  box-shadow: 0 0 34px #ff07164a;
  outline: 2px solid #ffffffa6;
  outline-offset: 3px;
}
#screen #panel .controls {
  margin-top: 16px;
  color: #a9b5b4;
  font-size: 12px;
  line-height: 1.8;
}
@keyframes dhDeathPulse {
  0%, 100% {box-shadow: 0 0 30px #a000003d, 0 30px 90px #000d;}
  50% {box-shadow: 0 0 62px #cb080854, 0 30px 90px #000e;}
}
@keyframes dhDeathAmbient {from{opacity:.35}to{opacity:.86}}
@media (max-width: 700px) {
  #screen {padding: 14px;}
  #screen #panel {padding: 25px 18px;}
  #screen #panel h1 {font-size: clamp(43px, 12vw, 76px);}
  #screen #panel button {width: 100%;min-width: 0;}
}
@media (prefers-reduced-motion: reduce) {
  #screen::before, #screen #panel {animation: none!important;}
}

/* Opt-in sound control styled as a quiet fourth welcome option. */
#dhAudioToggle { min-height: 42px; color: #c2c8c4; border-color: #485154; font-size: 12px; letter-spacing: .16em; }
#dhAudioToggle[aria-pressed="true"] { color: #fbabad; border-color: #943f47; }