:root{
  --ink:#eaf2ff; --bg:#0a0e1f; --hud:#10182c; --muted:#93a0be;
  --ok:#00e09f; --warn:#ffce3a; --bad:#ff5b5b;
}

html,body{
  margin:0; padding:0; height:100%; width:100%; overflow:hidden;
  background:#87ceeb;
  font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,Arial,sans-serif;
  touch-action:none;
}

#gameCanvas{ display:block; width:100%; height:100%; }

#hud{
  position:fixed; top:10px; left:10px; z-index:20;
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  color:var(--ink); padding:10px 12px; border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
}
#title{ font-weight:600; font-size:14px; }
#status{ font-size:12px; color:var(--muted); }

#profiles{
  position:fixed; top:10px; right:10px; z-index:35;
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  color:#fff; padding:8px 10px; border-radius:10px;
  display:flex; gap:8px; align-items:center;
  border:1px solid rgba(255,255,255,.15);
}
#profiles label{ font-size:12px; opacity:.8; }
#profiles select{
  background:rgba(255,255,255,.1); color:#fff;
  border-radius:8px; border:1px solid rgba(255,255,255,.25);
  padding:6px 8px;
}
#profiles .small{ padding:8px 10px; font-size:12px; min-width:auto; }

#joystick{
  position:fixed; left:24px; bottom:24px; z-index:30;
  width:160px; height:160px; border-radius:999px;
  background:rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(6px);
  touch-action:none;
}
#stick{
  position:absolute; left:50%; top:50%; width:80px; height:80px;
  margin-left:-40px; margin-top:-40px; border-radius:999px;
  background:rgba(255,255,255,.25); border:1px solid rgba(255,255,255,.35);
  box-shadow:inset 0 6px 18px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.25);
}

#buttons{
  position:fixed; right:24px; bottom:24px; z-index:30;
  display:flex; flex-direction:column; gap:12px; align-items:flex-end;
}
#buttons .row{ display:flex; gap:12px; }
#buttons .row.small .btn{ padding:10px 12px; font-size:12px; }

.btn{
  min-width:84px; padding:16px 18px; font-size:15px; font-weight:600;
  color:#fff; background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.15);
  border-radius:14px; backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  touch-action:manipulation; cursor:pointer;
}
.btn:active{ transform:translateY(1px) scale(.98); }
.btn.success{ background:linear-gradient(180deg,#25c08a,#109b6d); }
.btn.danger{ background:linear-gradient(180deg,#f37979,#e05252); }
.btn.ghost{ background:rgba(255,255,255,.15); color:#fff; }

#lookArea{
  position:fixed; right:0; top:0; bottom:0; width:55%; z-index:25;
}

#hotbar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:12px; z-index:40; display:flex; gap:10px;
  background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.2);
  border-radius:12px; padding:8px; backdrop-filter:blur(6px);
}
#hotbar .slot{
  padding:8px 10px; border-radius:8px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(255,255,255,.1); color:#fff; font-weight:600; cursor:pointer;
  min-width:110px; background-repeat:no-repeat; background-position:8px center; background-size:24px 24px;
}
#hotbar .slot.active{ background:rgba(0,0,0,.5); border-color:#fff; }

#crosshair{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#fff; font-weight:700; font-size:24px; text-shadow:0 1px 3px rgba(0,0,0,.8);
  pointer-events:none; z-index:50; opacity:.9;
}

@media (max-width: 900px){
  #joystick{ width:140px; height:140px; }
  #stick{ width:70px; height:70px; margin-left:-35px; margin-top:-35px; }
  .btn{ padding:14px 16px; min-width:76px; font-size:14px; }
}