*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#242424;color:#fff;font-family:Arial,sans-serif}
body{cursor:none}
#world{
  position:fixed;inset:0;
  background:
    radial-gradient(circle at 30% 40%,rgba(255,255,255,.03),transparent 30%),
    repeating-linear-gradient(17deg,rgba(255,255,255,.018) 0 1px,transparent 1px 7px),
    linear-gradient(#383838,#202020);
}
.grain{
  pointer-events:none;position:fixed;inset:0;z-index:1000;opacity:.15;
  background-image:radial-gradient(#fff 1px,transparent 1px);
  background-size:5px 5px;
  mix-blend-mode:overlay;
}
#flashlight{
  position:fixed;width:360px;height:360px;border-radius:50%;pointer-events:none;z-index:900;
  background:radial-gradient(circle,rgba(255,255,210,.23) 0,rgba(255,255,210,.13) 35%,rgba(255,255,210,0) 70%);
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;
}
.chalk{
  position:absolute;
  font-family:"Comic Sans MS",cursive;
  color:#f4f1e7;
  text-shadow:1px 1px 0 #000;
  user-select:none;
}
.title{left:4vw;top:4vh;font-size:clamp(42px,8vw,120px);font-weight:900;transform:rotate(-3deg)}
.ticker{left:6vw;top:17vh;font-size:clamp(30px,5vw,70px);transform:rotate(2deg);color:#ff9bb6}
.scribble{font-size:24px;opacity:.8}
.s1{left:6%;bottom:18%;transform:rotate(-7deg)}
.s2{right:7%;top:12%;transform:rotate(6deg);color:#ffc947}
.s3{right:12%;bottom:18%;transform:rotate(-4deg)}

.creature-wrap{
  position:absolute;left:50%;top:53%;width:min(560px,42vw);transform:translate(-50%,-50%) rotate(-3deg);
  cursor:grab;z-index:50;filter:drop-shadow(18px 24px 18px rgba(0,0,0,.7));
}
.creature-wrap.dragging{cursor:grabbing}
.creature-wrap img{display:block;width:100%;border-radius:8px}
.shadow{position:absolute;left:12%;right:12%;bottom:-10px;height:22px;background:rgba(0,0,0,.55);filter:blur(12px);z-index:-1}

.trash,.cardboard{
  position:absolute;bottom:7vh;font-size:70px;text-align:center;z-index:20;user-select:none;
  filter:drop-shadow(8px 10px 5px rgba(0,0,0,.5));
}
.trash{left:5vw}
.cardboard{right:5vw}
.trash span,.cardboard span{display:block;font-size:16px;font-weight:900;background:#000b;padding:5px 8px;margin-top:4px}

.street-note{
  position:absolute;background:#efe2a2;color:#111;padding:8px 12px;font:900 14px monospace;
  box-shadow:4px 4px 0 #0007;transform:rotate(-2deg)
}
.note1{left:4%;top:31%}
.note2{left:4%;top:37%;transform:rotate(2deg)}
.note3{right:5%;top:34%;transform:rotate(-4deg)}

#hud{
  position:absolute;left:50%;bottom:2vh;transform:translateX(-50%);
  display:flex;gap:6px;z-index:300;background:#000a;padding:7px;border:1px solid #777;
}
#hud button{
  background:#d3d3d3;color:#000;border:2px outset #fff;padding:10px 13px;font-weight:900;cursor:pointer
}
#hud button:first-child{background:#ff5fa2}
#hud button:last-child{background:#ffe35b}

.ca-panel{
  position:absolute;right:3vw;bottom:28vh;width:300px;background:#111;color:#7dff76;
  border:1px solid #777;padding:12px;font:700 13px monospace;word-break:break-all;transform:rotate(2deg)
}
.status{
  position:absolute;left:50%;top:2vh;transform:translateX(-50%);
  background:#000c;color:#caffbd;padding:7px 12px;font:700 14px monospace;z-index:200
}

.phone{
  position:absolute;right:4vw;top:20vh;width:260px;background:#111;border:8px solid #050505;border-radius:22px;
  box-shadow:10px 14px 0 #0007;z-index:500;padding:10px;
}
.phone-top{text-align:center;font-weight:900;margin-bottom:8px}
.phone img{width:100%;display:block}
.phone-caption{padding:10px 4px;font-family:"Comic Sans MS",cursive}
.phone-actions{display:flex;gap:6px}
.phone-actions button{flex:1;padding:8px;border:0;font-weight:900}
.phone-actions button:first-child{background:#8dff86}
.phone-actions button:last-child{background:#83c8ff}

.popup{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(420px,86vw);
  background:#c0c0c0;color:#000;border:4px outset #fff;z-index:700;font-family:Tahoma,Arial,sans-serif
}
.popup-title{background:#000080;color:#fff;padding:6px 8px;font-weight:700}
.popup-body{padding:25px;font-size:20px}
.popup button{margin:0 15px 15px;padding:7px 20px;border:3px outset #fff;background:#ddd}
.hidden{display:none!important}

@media(max-width:800px){
  .creature-wrap{width:70vw;top:48%}
  .street-note{display:none}
  .ca-panel{right:2vw;bottom:18vh;width:220px}
  .trash,.cardboard{font-size:50px}
  #hud{width:96vw;overflow:auto;justify-content:flex-start}
}