body { margin: 0; background:#0f0f12; color:#eaeaf0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
#wrap { display:flex; gap:16px; padding:16px; max-width:1200px; margin:0 auto; position:relative; }
canvas { background:#15151a; border:1px solid #2a2a33; border-radius:10px; }

#ui { width: 340px; }
.panel { background:#15151a; border:1px solid #2a2a33; border-radius:10px; padding:12px; margin-bottom:12px; }
.btns { display:flex; flex-wrap:wrap; gap:8px; }
button {
  background:#232333; color:#eaeaf0; border:1px solid #35354a;
  padding:10px 10px; border-radius:10px; cursor:pointer; font-weight:600;
}
button:hover { filter:brightness(1.08); }
button:disabled { opacity:.45; cursor:not-allowed; }

.small { font-size:12px; opacity:.85; line-height:1.35; }
.log { max-height: 240px; overflow:auto; padding-right:6px; }
.log p { margin: 0 0 8px 0; }
.tag { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid #35354a; font-size:12px; opacity:.9; }
.row { display:flex; justify-content:space-between; gap:10px; }
.bar { height:10px; background:#0e0e12; border:1px solid #2a2a33; border-radius:999px; overflow:hidden; }
.fill { height:100%; background:#eaeaf0; width:50%; }

/* MENU OVERLAY */
#menuOverlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.65); z-index:999; padding:20px;
}
#menuCard{
  width:min(980px, 96vw);
  background:#121218; border:1px solid #2a2a33; border-radius:16px;
  display:flex; gap:16px; padding:16px;
  box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
#menuLeft{
  width: 280px; background:#15151a; border:1px solid #2a2a33; border-radius:14px;
  padding:14px; display:flex; flex-direction:column; gap:10px;
}
#menuRight{
  flex:1; background:#15151a; border:1px solid #2a2a33; border-radius:14px;
  padding:14px; min-height: 360px; display:flex; flex-direction:column; gap:10px;
}
.menuTitle{ font-size:18px; font-weight:800; letter-spacing:.3px; }
.menuSubtitle{ font-size:12px; opacity:.8; line-height:1.35; margin-top:-6px; }
.menuBtn{ width:100%; text-align:left; padding:12px 12px; border-radius:12px; }
.menuBtn.active{ border-color:#6a6aa0; background:#26263a; }
.menuSectionTitle{ font-size:16px; font-weight:800; }
.menuDivider{ height:1px; background:#2a2a33; margin:6px 0; opacity:.8; }
.pill{
  display:inline-block; padding:4px 10px; border:1px solid #35354a;
  border-radius:999px; font-size:12px; opacity:.9; margin-right:6px; margin-bottom:6px;
}
.fieldRow{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px dashed rgba(255,255,255,0.08);
}
select{ width:180px; }

/* D-PAD */
.dpadWrap{ display:flex; gap:10px; align-items:center; justify-content:space-between; margin-top:10px; }
.dpad{
  display:grid;
  grid-template-columns: 48px 48px 48px;
  grid-template-rows: 48px 48px 48px;
  gap:8px; align-items:center; justify-items:center;
}
.dpad button{
  width:48px; height:48px; padding:0;
  border-radius:14px; font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.ghost{ visibility:hidden; }

/* Toasts */
#toastWrap{
  position:fixed;
  right:16px;
  top:16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2000;
  pointer-events:none;
}
.toast{
  pointer-events:none;
  background: rgba(21,21,26,0.92);
  border:1px solid #2a2a33;
  border-left: 4px solid #eaeaf0;
  border-radius:14px;
  padding:10px 12px;
  min-width: 260px;
  max-width: 360px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  animation: popIn .12s ease-out;
}
.toast b{ font-size:12px; display:block; margin-bottom:4px; opacity:.9; }
.toast p{ margin:0; font-size:12px; opacity:.9; line-height:1.35; }
.toast.info{ border-left-color:#7aa7ff; }
.toast.good{ border-left-color:#76ff9a; }
.toast.bad{ border-left-color:#ff6f6f; }
.toast.warn{ border-left-color:#ffcc66; }

@keyframes popIn{
  from{ transform:translateY(-6px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}