:root{--purple:#5b2a9e;--yellow:#ffd21f;--teal:#19c3b4;--orange:#ff7a1a;--green:#0f4d34;--ink:#120a1f}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#0a0612;font-family:'Chivo Mono',monospace;color:#fff}
#scene-container{position:fixed;inset:0}
#topbar{position:fixed;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:10px 16px;pointer-events:none;z-index:5}
.title{font-family:'Bungee',cursive;font-size:clamp(14px,2.6vw,28px);background:var(--purple);padding:6px 16px;border-radius:40px;border:4px solid var(--yellow);box-shadow:0 5px 0 #2a0f55,0 0 30px #a45cff88;transform:rotate(-1.5deg)}
.t1{color:var(--yellow)}.t2{color:#fff}.t3{color:var(--teal)}
.tokens{pointer-events:auto;display:flex;align-items:center;gap:8px;font-family:'Bungee';font-size:22px;background:#000a;padding:6px 14px 6px 6px;border-radius:30px;border:3px solid var(--yellow)}
.coin{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff6b0,#e0a800 60%,#9a6b00);color:#7a4a00;display:grid;place-items:center;font-size:18px;box-shadow:inset 0 0 0 3px #b8860b}
.tokens.bump{animation:bump .4s}
@keyframes bump{50%{transform:scale(1.3)}}
#banner{position:fixed;top:70px;left:50%;transform:translateX(-50%);width:min(560px,90vw);height:34px;overflow:hidden;background:#000;border:3px solid #333;border-radius:6px;z-index:4;box-shadow:0 0 18px #ff3a3a55;pointer-events:none}
#bannerText{position:absolute;white-space:nowrap;font-family:'Bungee';color:#ff3b3b;text-shadow:0 0 8px #ff3b3b;font-size:20px;line-height:28px;animation:scroll 12s linear infinite;
background-image:radial-gradient(#0000 55%,#000 56%);background-size:4px 4px}
@keyframes scroll{from{left:100%}to{left:-140%}}
#status{position:fixed;top:112px;left:50%;transform:translateX(-50%);font-size:12px;background:#000b;padding:4px 12px;border-radius:12px;z-index:4;pointer-events:none;color:#ffe9a0;white-space:nowrap}
#pizza{position:fixed;z-index:6;cursor:pointer;filter:drop-shadow(0 4px 6px #0008);animation:spin 3s linear infinite;left:20px;top:50%}
@keyframes spin{50%{transform:rotate(20deg) scale(1.1)}}
#panel{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:min(680px,96vw);background:linear-gradient(#1b0f33ee,#0d0820ee);border:4px solid var(--yellow);border-radius:22px;padding:12px;z-index:5;box-shadow:0 8px 0 #000a;
-webkit-mask:radial-gradient(circle 12px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 12px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;transition:transform .35s}
.row{display:flex;gap:8px;align-items:center;margin:6px 10px;flex-wrap:wrap}
label{font-family:'Bungee';font-size:11px;color:var(--yellow)}
select,input{flex:1;min-width:120px;font-family:'Chivo Mono';font-weight:800;background:#000;color:#fff;border:2px solid var(--teal);border-radius:12px;padding:8px}
.btn{font-family:'Bungee';border:none;border-radius:16px;padding:10px 14px;cursor:pointer;color:#fff;font-size:14px;box-shadow:0 5px 0 #0009;transition:transform .08s;flex:1}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #0009}
.btn small{display:block;font-size:9px;font-family:'Chivo Mono'}
.big{font-size:22px}
.orange{background:linear-gradient(var(--orange),#d9480f)}
.purple{background:linear-gradient(#8a4fe0,var(--purple));flex:.4}
.teal{background:linear-gradient(#3ee0d1,#0f9488)}
.dark{background:repeating-linear-gradient(45deg,#222 0 10px,#c00 10px 20px)}
footer{text-align:center;font-size:11px;opacity:.75;margin-top:6px}
footer a{color:var(--yellow)}
#card{position:fixed;right:16px;top:150px;width:260px;background:#fff8e1;color:var(--ink);border:4px solid var(--purple);border-radius:18px;padding:14px;z-index:6;box-shadow:6px 6px 0 var(--orange);transform:rotate(1deg)}
#card.hidden{display:none}
#card h3{font-family:'Bungee Shade';margin:0;font-size:22px;color:var(--purple)}
#cardRole{font-weight:800;font-size:12px;color:var(--orange)}
#card p{font-size:13px;line-height:1.4}
#cardClose{position:absolute;right:8px;top:4px;border:none;background:none;font-size:22px;cursor:pointer}
#drawerToggle{display:none}
#joy,#walkHint{display:none}
body.walking #walkHint{display:block;position:fixed;left:16px;top:150px;z-index:5;font-size:11px;background:#000b;color:var(--yellow);padding:5px 10px;border-radius:10px;pointer-events:none}
body.walking #scene-container{cursor:grab}
@media (pointer:coarse),(max-width:640px){
  body.walking #joy{display:block;position:fixed;left:24px;bottom:60px;width:110px;height:110px;border-radius:50%;background:#0008;border:3px solid var(--teal);z-index:6;touch-action:none}
  #joyKnob{position:absolute;left:30px;top:30px;width:44px;height:44px;border-radius:50%;background:var(--yellow);pointer-events:none}
}
#flicker{position:fixed;inset:0;pointer-events:none;z-index:7;background:#000;opacity:0}
@media (max-width:640px){
  #drawerToggle{display:block;position:fixed;bottom:0;left:50%;transform:translateX(-50%);z-index:6;font-family:'Bungee';background:var(--yellow);color:var(--ink);border:none;border-radius:14px 14px 0 0;padding:6px 20px}
  #panel{bottom:30px;transform:translateX(-50%) translateY(120%)}
  #panel.open{transform:translateX(-50%) translateY(0)}
  #card{left:50%;right:auto;transform:translateX(-50%);top:140px}
  #pizza{top:auto;bottom:50px}
}