* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%; overflow: hidden;
  background: #bfe9d8;
  font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  color: #1d2140;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
.hidden { display: none !important; }

/* ===== HUD ===== */
#hud { position: fixed; inset: 0; pointer-events: none; }
.lb, .mm, .btn-icon, .stats, .feed div, .room {
  background: rgba(20, 24, 44, .74);
  backdrop-filter: blur(6px);
  color: #fff;
}
.lb { position: absolute; top: 12px; right: 12px; min-width: 200px; border-radius: 14px; padding: 10px 12px; font-size: 14px; }
.lb h4 { font-size: 12px; opacity: .65; margin-bottom: 4px; }
.lb ol { list-style: none; }
.lb li { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.lb li .r { width: 20px; opacity: .6; font-weight: 700; font-variant-numeric: tabular-nums; }
.lb li .dot { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.lb li .n { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.lb li .v { font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; }
.lb li.me { color: #ffd54a; font-weight: 700; }
.lb li.sep { border-top: 1px dashed rgba(255, 255, 255, .25); margin: 4px 0; padding: 0; }

.mm { position: absolute; top: 12px; left: 12px; width: 124px; height: 124px; border-radius: 50%; padding: 4px; }
.mm canvas { width: 100%; height: 100%; display: block; border-radius: 50%; }

.hud-btns { position: absolute; top: 146px; left: 12px; display: flex; gap: 8px; pointer-events: auto; }
.btn-icon { width: 40px; height: 40px; border-radius: 12px; border: 0; cursor: pointer; display: grid; place-items: center; }
.btn-icon:hover { background: rgba(40, 46, 80, .9); }
.room { position: absolute; top: 196px; left: 12px; font-size: 13px; font-weight: 700; padding: 4px 12px; border-radius: 999px; }

.stats {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 16px;
  border-radius: 999px; padding: 6px 24px;
}
.score { display: flex; align-items: baseline; gap: 10px; direction: ltr; }
.score b { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; }
.score small { font-size: 14px; font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; }

.fx { position: absolute; bottom: 78px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.fx div {
  background: rgba(20, 24, 44, .78); color: #fff; font-weight: 800; font-size: 14px;
  padding: 4px 14px; border-radius: 999px; border: 2px solid; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; font-size: 13px; font-weight: 700; color: #4a5078; }
.legend span { background: #f0fbf6; border-radius: 999px; padding: 2px 10px; }
.kills { font-size: 18px; font-weight: 700; }

.feed { position: absolute; bottom: 120px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.feed div { padding: 5px 16px; border-radius: 999px; font-weight: 700; font-size: 15px; white-space: nowrap; animation: feed 2.8s forwards; }
@keyframes feed {
  0% { opacity: 0; transform: translateY(8px); }
  10% { opacity: 1; transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; }
}

/* ===== النوافذ ===== */
.overlay {
  position: fixed; inset: 0;
  display: grid; place-items: center;
  background: rgba(14, 16, 32, .42);
  backdrop-filter: blur(2px);
  padding: 16px; overflow-y: auto;
}
.panel {
  background: #fff; border-radius: 26px;
  padding: 26px 24px 22px;
  width: min(420px, 100%);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  display: flex; flex-direction: column; gap: 12px;
}
.panel.small { width: min(320px, 100%); }
.back { align-self: flex-start; font-size: 13px; font-weight: 700; color: #7a80a6; text-decoration: none; }
.back:hover { color: #ff3d6e; }
.logo { font-size: 40px; font-weight: 900; line-height: 1.2; color: #1d2140; }
.logo span { color: #ff3d6e; }
.tag { color: #6b7194; font-size: 15px; margin-top: -6px; }
.panel h2 { font-size: 28px; font-weight: 900; }

#nameInput {
  font: inherit; font-size: 18px; font-weight: 700; text-align: center;
  padding: 12px 16px; border-radius: 14px;
  border: 2px solid #e2e6f3; background: #f5f7fc; color: #1d2140; outline: none;
}
#nameInput:focus { border-color: #ff3d6e; background: #fff; }

.swatches { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.swatches button {
  width: 34px; height: 34px; border-radius: 10px; border: 0; cursor: pointer;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22);
  transition: transform .12s;
}
.swatches button:hover { transform: translateY(-2px); }
.swatches button.on { outline: 3px solid #1d2140; outline-offset: 2px; }

.btn-play, .btn-ghost {
  font: inherit; font-weight: 900; cursor: pointer; border: 0;
  border-radius: 16px; padding: 12px 20px; text-decoration: none; display: block;
}
.btn-play {
  font-size: 22px; color: #fff;
  background: linear-gradient(90deg, #ff3d6e, #ff8a3d);
  box-shadow: 0 6px 0 #b8264d, 0 14px 30px rgba(255, 61, 110, .35);
  transition: transform .1s, box-shadow .1s;
}
.btn-play:active { transform: translateY(4px); box-shadow: 0 2px 0 #b8264d; }
.btn-play:disabled { filter: grayscale(.8); opacity: .6; cursor: wait; }
.net { font-size: 14px; font-weight: 700; color: #6b7194; display: flex; align-items: center; justify-content: center; gap: 8px; }
.net::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: #f0b400; }
.net[data-s="online"]::before { background: #22c55e; box-shadow: 0 0 0 4px rgba(34, 197, 94, .2); }
.net[data-s="offline"]::before { background: #ef4444; }
.btn-ghost { font-size: 16px; background: #eef1f8; color: #4a5078; }
.btn-ghost:hover { background: #e2e6f3; }

.best { font-size: 14px; color: #6b7194; }
.best b { color: #1d2140; direction: ltr; display: inline-block; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 13px; color: #7a80a6; border-top: 1px solid #eef1f8; padding-top: 12px; }
kbd { display: inline-block; min-width: 20px; padding: 0 4px; border-radius: 5px; background: #eef1f8; border-bottom: 2px solid #d3d9ea; font-family: inherit; font-size: 11px; color: #4a5078; }

.reason { color: #6b7194; font-weight: 700; margin-top: -6px; }
.results { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.results div { background: #f5f7fc; border-radius: 14px; padding: 10px; display: flex; flex-direction: column; }
.results span { font-size: 13px; color: #7a80a6; }
.results b { font-size: 24px; font-weight: 900; direction: ltr; }
.record { font-weight: 700; color: #6b7194; min-height: 1.5em; }
.record.new { color: #e0a000; }

@media (max-width: 600px) {
  .lb { min-width: 0; font-size: 12px; padding: 8px 10px; }
  .lb li .n { max-width: 72px; }
  .mm { width: 86px; height: 86px; }
  .hud-btns { top: 106px; }
  .btn-icon { width: 36px; height: 36px; }
  .room { top: 150px; }
  .score b { font-size: 22px; }
  .lb li { padding: 1px 0; }
  .logo { font-size: 34px; }
}