* { margin:0; padding:0; box-sizing:border-box; }
body {
  background:
    radial-gradient(ellipse 80% 60% at 50% 48%, #1f1a30 0%, #0e0b1a 55%, #060409 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100vh; font-family:'Segoe UI',sans-serif; color:#eee; user-select:none;
  box-shadow: inset 0 0 120px rgba(0,0,0,.7);
}
h1 { font-size:1.4rem; letter-spacing:5px; color:#c8a96e; text-transform:uppercase; margin-bottom:10px; }
#hud {
  display:flex; align-items:center; justify-content:space-between;
  width:900px; margin-bottom:6px; padding:0 4px;
}
.side { display:flex; align-items:center; gap:10px; }
.pname {
  font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase;
  color:#555; min-width:36px; transition:color .2s;
}
.pname.active { color:#c8a96e; font-weight:bold; }
.rack { display:flex; gap:3px; min-width:154px; align-items:center; }
#side1 .rack { justify-content:flex-end; }
.bdot { flex-shrink:0; display:block; }
#center8 {
  width:34px; height:34px; border-radius:50%; background:#111; border:2px solid #333;
  display:flex; align-items:center; justify-content:center;
  font-size:.85rem; font-weight:bold; color:#fff; flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.6);
}
#table-wrap { display:flex; align-items:center; gap:14px; }
canvas { display:block; border-radius:14px; box-shadow:0 0 60px rgba(0,0,0,.9); cursor:crosshair; }
.pmeter { display:flex; align-items:center; }
.mcv { opacity:0; transition:opacity .2s; }
.mcv.active { opacity:1; }
#modal-overlay {
  display:none; position:fixed; inset:0;
  background:rgba(0,0,0,.75); backdrop-filter:blur(4px);
  align-items:center; justify-content:center; z-index:100;
}
#modal-overlay.show { display:flex; }
#modal {
  background:#1e1e2e; border:2px solid #c8a96e; border-radius:16px;
  padding:40px 56px; text-align:center; box-shadow:0 0 60px rgba(0,0,0,.8);
}
#modal h2 { font-size:2rem; color:#c8a96e; margin-bottom:8px; letter-spacing:3px; }
#modal p  { font-size:1rem; color:#888; margin-bottom:28px; }
#modal button {
  padding:12px 40px; font-size:1rem; font-weight:bold; letter-spacing:2px;
  background:#c8a96e; color:#12121f; border:none; border-radius:8px;
  cursor:pointer; text-transform:uppercase; transition:background .2s;
}
#modal button:hover { background:#e0c080; }