html,body{height:100%;margin:0;overflow:hidden;background:#0e1117;color:#e5e7eb;font-family:system-ui}
.wrap{height:100%;display:flex;align-items:center;justify-content:center;padding:12px}
canvas{background:#0b1522;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.35)}

/* HUD (bottom-left) */
.hud{
  position:fixed;left:12px;bottom:12px;font-size:14px;opacity:.9;
  display:flex;flex-direction:column;gap:6px;z-index:40;
}
.chip{display:inline-block;padding:4px 8px;border-radius:999px;background:#172033;margin-right:6px}
.sliderBox{background:#172033;padding:6px 8px;border-radius:8px;}
.sliderBox label{display:block;font-size:12px;margin-bottom:2px;}

/* Chat panel */
.chatbox{
  position:fixed; right:12px; bottom:12px; width:260px;
  background:#0b1522; border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  z-index:20;
}
#messages{
  flex:1; max-height:220px; overflow-y:auto; padding:8px 8px 4px 8px; font-size:14px;
}
#messages .sys{ opacity:.7; font-style:italic; }
#messages .msg{ margin:4px 0; word-wrap:break-word; }
#messages .name{ font-weight:700; margin-right:4px; }
#chatInput{
  border:none; padding:10px 12px; background:#172033; color:#e5e7eb;
}
#chatInput:focus{ outline:none; }

/* Mobile joystick */
.joystick{
  position: fixed; left: 1%; bottom: 30%;
  width: 128px; height: 128px; touch-action: none; z-index: 30;
}
.joy-base{
  position:absolute; inset:0; border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.08); box-shadow: inset 0 6px 18px rgba(0,0,0,.35);
}
.joy-thumb{
  position:absolute; left:50%; top:50%;
  width: 56px; height: 56px; margin:-28px 0 0 -28px; border-radius: 50%;
  background: #172033; border: 2px solid rgba(255,255,255,.15);
  box-shadow: 0 8px 20px rgba(0,0,0,.45); transform: translate(0,0);
  transition: transform .08s ease-out; touch-action: none;
}

@media (max-width: 640px){ .chatbox{ right: 12px; bottom: 152px; } }

/* Name box (top-left) */
.namebox{
  position:fixed; top:20px; left:20px; z-index:50;
  background:#0b1522; padding:10px 14px; border-radius:8px;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
.namebox-label{font-size:14px;margin-right:6px;}
.namebox-input{
  padding:4px 6px;border:none;border-radius:4px;background:#172033;color:#e5e7eb;
}
.namebox-btn{
  margin-left:6px;padding:4px 10px;background:#1e293b;
  color:#e5e7eb;border:none;border-radius:4px;cursor:pointer;
}