:root{
  --neon-pink:#ff2e88; --neon-cyan:#22d3ee; --gold:#f5c518;
  --wood:#3a2410; --cream:#f5e6c8; --dark:#0a0710;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;background:#05050a;font-family:'Special Elite',monospace;color:var(--cream);}
#scene-container{position:fixed;inset:0;}
.hidden{display:none !important;}

/* ===== Overlays ===== */
.overlay{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 30%, rgba(255,46,136,0.12), rgba(5,5,10,0.96) 70%);
  padding:16px;overflow-y:auto;
}
.panel{
  max-width:520px;width:100%;background:linear-gradient(180deg,#1a1020,#0d0812);
  border:3px solid var(--gold);border-radius:14px;padding:28px 24px;text-align:center;
  box-shadow:0 0 40px rgba(245,197,24,0.25), inset 0 0 30px rgba(255,46,136,0.08);
  position:relative;
  background-image:repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(245,197,24,0.03) 18px, rgba(245,197,24,0.03) 20px);
  animation:pop .5s ease;
}
.panel.dark{border-color:var(--neon-pink);box-shadow:0 0 60px rgba(255,46,46,0.4);}
@keyframes pop{from{transform:scale(.92);opacity:0;}to{transform:scale(1);opacity:1;}}

.logo-oval{
  width:120px;height:120px;margin:0 auto 10px;border-radius:50%;
  border:4px solid var(--cream);overflow:hidden;background:#000;
  box-shadow:0 0 24px rgba(34,211,238,0.5);
}
.logo-oval img{width:100%;height:100%;object-fit:cover;image-rendering:pixelated;}

.rye{font-family:'Rye',serif;font-size:2.4rem;line-height:1;color:var(--gold);
  text-shadow:3px 3px 0 var(--neon-pink),0 0 20px rgba(245,197,24,0.4);margin-bottom:6px;}
.rye .pizza{color:var(--neon-cyan);font-size:2rem;}
.rye.scare{color:#ff2e2e;text-shadow:3px 3px 0 #000;animation:shake .3s infinite;}
@keyframes shake{0%,100%{transform:translateX(0);}25%{transform:translateX(-3px);}75%{transform:translateX(3px);}}

.tagline{letter-spacing:3px;font-size:.75rem;color:var(--neon-cyan);margin-bottom:16px;}
.welcome{font-size:.95rem;line-height:1.5;margin:14px 0;color:var(--cream);}
.welcome em{color:var(--neon-pink);font-style:normal;}
.tip{font-size:.8rem;color:var(--gold);opacity:.85;margin:10px 0;font-style:italic;}

.badge{
  display:inline-flex;flex-direction:column;gap:2px;padding:12px 24px;margin:8px 0;
  background:linear-gradient(180deg,#2a1a0a,#1a0f05);border:2px solid var(--cream);border-radius:8px;
}
.badge-title{font-size:.65rem;letter-spacing:2px;color:var(--gold);}
#badge-name{font-family:'Rye',serif;font-size:1.4rem;color:var(--cream);}
.badge-role{font-size:.7rem;color:var(--neon-cyan);}

.big-btn{
  font-family:'Rye',serif;font-size:1.3rem;padding:14px 34px;margin-top:16px;cursor:pointer;
  background:linear-gradient(180deg,var(--neon-pink),#b01a5a);color:#fff;border:3px solid var(--gold);
  border-radius:10px;letter-spacing:1px;text-shadow:2px 2px 0 rgba(0,0,0,.4);
  box-shadow:0 4px 0 #6a0f38,0 0 20px rgba(255,46,136,.5);transition:transform .1s;
}
.big-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #6a0f38;}
.controls-hint{margin-top:16px;font-size:.72rem;color:#aa99bb;line-height:1.5;}

.payslip{background:#f5e6c8;color:#1a1008;border-radius:6px;padding:14px 18px;margin:16px 0;text-align:left;
  font-family:'Special Elite',monospace;box-shadow:0 4px 14px rgba(0,0,0,.5);}
.ps-head{text-align:center;font-weight:bold;border-bottom:2px dashed #1a1008;padding-bottom:6px;margin-bottom:8px;letter-spacing:1px;}
.ps-row{display:flex;justify-content:space-between;font-size:.85rem;padding:3px 0;}
.ps-row.big{font-size:1.1rem;font-weight:bold;border-top:2px dashed #1a1008;margin-top:6px;padding-top:8px;color:#b01a5a;}
.ps-note{text-align:center;font-size:.7rem;font-style:italic;margin-top:8px;opacity:.7;}

#leaderboard{margin-top:14px;text-align:left;}
.lb-title{text-align:center;color:var(--gold);font-size:.9rem;margin-bottom:6px;}
#lb-list{list-style:none;font-size:.8rem;}
#lb-list li{display:flex;justify-content:space-between;padding:3px 8px;border-bottom:1px solid rgba(245,197,24,.15);}
#lb-list li span:first-child{color:var(--neon-cyan);}

/* ===== HUD ===== */
#hud{position:fixed;inset:0;z-index:20;pointer-events:none;font-family:'Special Elite',monospace;}
#tasklist{position:absolute;top:12px;left:12px;background:rgba(13,8,18,.8);border:2px solid var(--gold);
  border-radius:8px;padding:10px 14px;max-width:260px;}
.hud-title{color:var(--gold);font-size:.8rem;letter-spacing:1px;margin-bottom:6px;border-bottom:1px solid rgba(245,197,24,.3);padding-bottom:4px;}
#task-items{list-style:none;font-size:.75rem;line-height:1.7;}
#task-items li.done{color:#66ff88;text-decoration:line-through;opacity:.7;}
#task-items li.locked{color:#7a6a55;}

#topright{position:absolute;top:12px;right:12px;text-align:right;}
#clock{font-family:'Rye',serif;font-size:1.4rem;color:var(--neon-cyan);text-shadow:0 0 12px rgba(34,211,238,.6);}
#battery-wrap{margin-top:6px;}
.bat-label{font-size:.6rem;color:var(--gold);letter-spacing:1px;}
#battery-bar{width:140px;height:14px;background:#1a1020;border:2px solid var(--cream);border-radius:4px;overflow:hidden;margin-top:2px;}
#battery-fill{height:100%;width:100%;background:var(--neon-cyan);transition:width .1s,background .3s;}

#prompt{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);
  background:rgba(245,197,24,.9);color:#1a1008;font-weight:bold;padding:8px 20px;border-radius:6px;
  font-size:.95rem;letter-spacing:1px;box-shadow:0 0 16px rgba(245,197,24,.5);animation:pulse 1s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.6;}}

#toast{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);
  background:rgba(13,8,18,.9);border:1px solid var(--neon-pink);color:var(--cream);
  padding:8px 18px;border-radius:6px;font-size:.85rem;opacity:0;transition:opacity .4s;max-width:80%;text-align:center;}

#crosshair{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:rgba(255,255,255,.5);font-size:1.4rem;}

#minimap{position:absolute;bottom:12px;right:12px;border:2px solid var(--gold);border-radius:6px;
  box-shadow:0 0 14px rgba(0,0,0,.6);}

/* Mobile controls */
#mobile-controls{pointer-events:auto;}
#joystick{position:absolute;bottom:24px;left:24px;width:110px;height:110px;border-radius:50%;
  background:rgba(245,197,24,.1);border:2px solid rgba(245,197,24,.4);}
#stick{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:rgba(34,211,238,.5);border:2px solid var(--neon-cyan);}
#mobile-buttons{position:absolute;bottom:24px;right:24px;display:flex;flex-direction:column;gap:14px;}
#mobile-buttons button{width:64px;height:64px;border-radius:50%;font-size:1.4rem;font-weight:bold;
  background:rgba(255,46,136,.7);color:#fff;border:2px solid var(--gold);}

#jumpscare{position:fixed;inset:0;z-index:99;background:#000;display:flex;align-items:center;justify-content:center;}
#jumpscare img{width:80vmin;height:80vmin;object-fit:contain;image-rendering:pixelated;
  animation:scarezoom .3s ease-out;filter:drop-shadow(0 0 40px red);}
@keyframes scarezoom{from{transform:scale(.3);}to{transform:scale(1);}}

#footer{position:fixed;bottom:2px;left:50%;transform:translateX(-50%);z-index:30;font-size:.65rem;}
#footer a{color:rgba(245,197,24,.6);text-decoration:none;}
#footer a:hover{color:var(--gold);}
</parameter>
</invoke>