*{box-sizing:border-box}
:root{
  --bg:#050505;
  --text:#e8e3da;
  --accent:#b30f1b;
}
html,body{
  margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);
  font-family:Arial,Helvetica,sans-serif;overflow:hidden
}
body{background:radial-gradient(circle at 50% 45%,#171313 0,#080707 45%,#020202 100%)}
button{font:inherit}
#app,.screen{width:100%;height:100%}
.screen{display:none;position:absolute;inset:0;z-index:2}
.screen.active{display:flex}

.screen-noise{
  position:fixed;inset:-35%;z-index:20;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation:noiseMove .16s steps(2) infinite
}
.vignette{
  position:fixed;inset:0;z-index:19;pointer-events:none;
  box-shadow:inset 0 0 160px 70px rgba(0,0,0,.82)
}

#menu,#endScreen{
  align-items:center;justify-content:center;flex-direction:column;text-align:center;
  background:
    linear-gradient(rgba(0,0,0,.18),rgba(0,0,0,.55)),
    radial-gradient(circle at 50% 35%,rgba(255,255,255,.05),transparent 38%),
    #070606;
}
.brand{font-size:13px;letter-spacing:.28em;text-transform:uppercase;color:#888078;margin-bottom:20px}
.brand.small{margin:0 0 3px;font-size:10px}
.warning{
  font-size:10px;letter-spacing:.2em;color:#9a9a9a;border:1px solid #2f2f2f;
  padding:7px 10px;margin-bottom:18px;background:#101010
}
h1{
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(48px,8vw,116px);line-height:.78;margin:0;letter-spacing:.015em;
  color:#ded7cc;text-shadow:none
}
h2{font-size:clamp(42px,7vw,90px);margin:0 0 8px;letter-spacing:-.05em}
.subtitle{color:#918b82;font-size:15px;margin:24px 0 18px}
.tiny{font-size:10px;color:#5f5a54;margin-top:14px}

button{
  border:1px solid #6d1b20;background:#97101a;color:#f3e8df;padding:14px 34px;cursor:pointer;
  font-weight:900;letter-spacing:.1em;border-radius:2px;
  box-shadow:none
}
button:hover{background:#b21320}

.howto{
  width:min(520px,calc(100vw - 40px));display:grid;gap:7px;margin:0 0 22px;
  padding:12px;border:1px solid #25201d;background:rgba(7,6,6,.78);text-align:left
}
.howto div{display:flex;align-items:center;gap:11px;font-size:12px;color:#a9a29a}
.howto b{
  display:grid;place-items:center;flex:0 0 25px;height:25px;border:1px solid #552026;
  color:#d4c6bb;background:#16090a
}
.howto strong{color:#839c60}

#gameScreen{flex-direction:column;background:#050505}

.topbar{
  min-height:76px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:0 20px;border-bottom:1px solid #21191a;background:#080707;gap:20px
}
.rule{font-size:10px;letter-spacing:.12em;color:#9a575b}
.status{
  justify-self:end;display:flex;gap:18px;font-size:11px;letter-spacing:.12em;color:#aaa29a
}

#progressBox{text-align:center;min-width:170px}
#progressValue{
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:42px;line-height:.9;letter-spacing:.03em;color:#f1e6db;
  text-shadow:0 0 18px rgba(179,15,27,.22)
}
.progressCaption{margin-top:5px;font-size:9px;letter-spacing:.2em;color:#7d7470}

#mazeWrap{
  flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:12px;
  background:
    radial-gradient(circle at 50% 50%,rgba(112,13,19,.06),transparent 45%),
    repeating-linear-gradient(0deg,rgba(255,255,255,.008) 0 1px,transparent 1px 4px),
    #040404
}
#maze{
  width:min(100%,calc((100vh - 130px) * 16 / 9));height:auto;aspect-ratio:16/9;
  background:#0a0909;box-shadow:0 0 0 1px #2a2020,0 25px 90px rgba(0,0,0,.9);
  cursor:none;touch-action:none
}
.footer{
  height:42px;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:10px;color:#6e6861;letter-spacing:.04em;border-top:1px solid #171313;background:#070606
}
.dot-demo{
  width:13px;height:13px;border-radius:0;background:#d3202d;box-shadow:none
}

.message{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:12px 18px;background:rgba(4,3,3,.92);border:1px solid #5b2428;
  color:#ddd0c7;font-size:12px;font-weight:800;letter-spacing:.12em;pointer-events:none;
  opacity:0;transition:opacity .08s;box-shadow:0 8px 40px rgba(0,0,0,.6)
}
.message.show{opacity:1}

.failOverlay{
  display:none;position:absolute;inset:0;align-items:center;justify-content:center;
  background:rgba(0,0,0,.67);backdrop-filter:blur(2px);z-index:5
}
.failOverlay.show{display:flex}
.failCard{
  width:min(460px,calc(100% - 40px));padding:28px;text-align:center;
  border:1px solid #6c1c21;background:rgba(14,5,6,.97);
  box-shadow:0 20px 80px rgba(0,0,0,.75),0 0 55px rgba(132,8,16,.12)
}
.failEyebrow{font-size:10px;letter-spacing:.26em;color:#a84349;margin-bottom:10px}
.failCard h3{
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:38px;line-height:.95;margin:0;color:#e6d8cf;letter-spacing:.03em
}
.failCard p{font-size:12px;line-height:1.5;color:#8f8580;margin:15px 0 22px}

.jumpscare{align-items:center;justify-content:center;overflow:hidden;background:#020202}
.monster{
  position:absolute;width:76vmin;height:86vmin;min-width:340px;min-height:390px;border-radius:44% 44% 38% 38%;
  background:
    radial-gradient(circle at 35% 33%,rgba(255,245,230,.16),transparent 11%),
    radial-gradient(circle at 65% 33%,rgba(255,245,230,.13),transparent 11%),
    radial-gradient(circle at 50% 48%,#b7aaa0 0,#5c4d4b 32%,#241113 59%,#030202 100%);
  filter:contrast(1.6) grayscale(.55) saturate(.7);
  transform:scale(.15);animation:scareIn .095s cubic-bezier(.05,.85,.1,1) forwards,shake .065s .09s infinite;
  box-shadow:0 0 150px rgba(123,8,16,.25),inset 0 0 90px #000
}
.eye{position:absolute;top:27%;width:20%;height:13%;background:#050303;border-radius:50%;box-shadow:0 0 28px #000 inset}
.eye span{position:absolute;width:18%;height:32%;background:#c3141e;border-radius:50%;left:41%;top:34%;box-shadow:0 0 14px #e7202e}
.eye-left{left:21%;transform:rotate(-9deg)}
.eye-right{right:21%;transform:rotate(9deg)}
.nose{
  position:absolute;left:44%;top:43%;width:12%;height:17%;border-left:12px solid rgba(0,0,0,.7);
  border-right:12px solid rgba(0,0,0,.7);border-bottom:30px solid rgba(0,0,0,.94);border-radius:40%
}
.mouth{
  position:absolute;left:22%;bottom:13%;width:56%;height:27%;border-radius:48% 48% 42% 42%;
  background:#000;overflow:hidden;box-shadow:0 0 42px #000 inset,0 0 20px rgba(120,0,0,.5)
}
.teeth{
  position:absolute;left:5%;top:3%;width:90%;height:37%;
  background:repeating-linear-gradient(90deg,#c8b9a7 0 11px,#3f2a2a 11px 14px);
  clip-path:polygon(0 0,100% 0,96% 72%,89% 24%,81% 78%,72% 23%,63% 82%,54% 22%,45% 82%,36% 22%,27% 78%,18% 23%,10% 72%)
}
.noise{
  position:absolute;inset:-50%;opacity:.23;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
  animation:noiseMove .07s steps(2) infinite
}
.jumpscareText{
  position:absolute;bottom:4vh;left:50%;transform:translateX(-50%);
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(30px,6vw,86px);letter-spacing:.05em;color:#c31722;text-shadow:0 2px 9px #000
}
@keyframes scareIn{to{transform:scale(1.25)}}
@keyframes shake{
  0%{margin-left:-11px;margin-top:4px;filter:contrast(1.8) hue-rotate(-8deg)}
  50%{margin-left:12px;margin-top:-7px;filter:contrast(2.0) hue-rotate(7deg)}
  100%{margin-left:-5px;margin-top:8px;filter:contrast(1.75)}
}
@keyframes noiseMove{
  0%{transform:translate(0,0)}
  50%{transform:translate(2%,1%)}
  100%{transform:translate(-1%,-2%)}
}

@media (max-width:850px){
  .topbar{grid-template-columns:1fr auto}
  #progressBox{grid-column:1 / -1;grid-row:2;padding-bottom:8px}
  .status{grid-column:2;grid-row:1}
  .howto{display:none}
  #progressValue{font-size:32px}
}


.graceWarning{
  position:absolute;
  left:50%;
  top:18px;
  transform:translateX(-50%) translateY(-8px);
  padding:9px 14px;
  background:rgba(42,33,5,.96);
  border:1px solid #d8aa2a;
  color:#ffd85a;
  font-size:11px;
  font-weight:900;
  letter-spacing:.08em;
  pointer-events:none;
  opacity:0;
  z-index:7;
  transition:opacity .12s, transform .12s;
  box-shadow:0 8px 28px rgba(0,0,0,.45)
}
.graceWarning.show{
  opacity:1;
  transform:translateX(-50%) translateY(0)
}


.leaderboard{
  width:min(420px,calc(100vw - 40px));
  margin:0 0 16px;
  border:1px solid #292929;
  background:rgba(10,10,10,.82);
  text-align:left;
}
.leaderboardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 12px;
  border-bottom:1px solid #232323;
  font-size:10px;
  font-weight:900;
  letter-spacing:.16em;
  color:#b8b8b8;
}
.leaderboardHead small{
  font-size:8px;
  letter-spacing:.14em;
  color:#666;
}
.rankRow{
  display:grid;
  grid-template-columns:24px 1fr auto;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-bottom:1px solid #171717;
  font-size:11px;
  color:#999;
}
.rankRow:last-child{border-bottom:0}
.rankRow b{color:#666;font-size:10px}
.rankRow span{color:#b9b9b9}
.rankRow strong{color:#dedede;font-size:11px;font-variant-numeric:tabular-nums}


.homeBtn{
  padding:7px 11px;
  border:1px solid #333;
  background:#111;
  color:#aaa;
  font-size:9px;
  letter-spacing:.12em;
  box-shadow:none;
}
.homeBtn:hover{
  background:#181818;
  color:#ddd;
}

.failActions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.secondaryBtn{
  border:1px solid #333;
  background:#111;
  color:#aaa;
  box-shadow:none;
}
.secondaryBtn:hover{
  background:#181818;
  color:#ddd;
}


/* YouTube Playables V18 integration */
.loadingScreen{
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:#050505;
}
.loadingMark{
  font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;
  font-size:clamp(34px,6vw,74px);
  letter-spacing:.03em;
  color:#e8e3da;
}
.loadingText{
  margin-top:16px;
  font-size:10px;
  letter-spacing:.22em;
  color:#777;
}
.bestScoreLine{
  margin:-2px 0 14px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.13em;
  color:#8f8f8f;
}
button:disabled{
  opacity:.45;
  cursor:default;
}
.platformPauseOverlay{
  display:none;
  position:absolute;
  inset:0;
  z-index:12;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.72);
}
.platformPauseOverlay.show{display:flex}
.pauseCard{
  padding:15px 24px;
  border:1px solid #333;
  background:#0c0c0c;
  color:#ddd;
  font-size:14px;
  font-weight:900;
  letter-spacing:.2em;
}
html,body,#app{
  min-width:0;
  min-height:0;
}
#mazeWrap{
  min-width:0;
  min-height:0;
}
#maze{
  display:block;
  max-width:100%;
  max-height:100%;
}
@media (orientation:portrait){
  .topbar{
    min-height:64px;
    padding:6px 10px;
    gap:8px;
  }
  .footer{
    min-height:36px;
    height:auto;
    padding:6px 10px;
    text-align:center;
  }
  #mazeWrap{padding:6px}
}