:root{
  --bg:#0b0d10;
  --line:rgba(255,255,255,.08);
  --text:#e9eef5;
  --muted:rgba(233,238,245,.72);
  --accent:#57d4ff;
  --good:#34d399;
  --bad:#fb7185;
  --wa:#25D366;
  --shadow:0 12px 32px rgba(0,0,0,.55);
  --r:20px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Kufi Arabic","Noto Sans Arabic",sans-serif;
  background-color:#030914;
  background-image: 
    radial-gradient(circle at 50% -10%, rgba(0, 229, 255, 0.12) 0%, transparent 60%),
    radial-gradient(circle at 0% 100%, rgba(229, 194, 118, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 100% 50%, rgba(0, 229, 255, 0.06) 0%, transparent 50%);
  background-attachment: fixed;
  overflow-x:hidden;
}

.dust {
  position: fixed; inset: 0; pointer-events: none; opacity: 0.25;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
  mix-blend-mode: overlay;
  z-index: 0;
}

.wrap{max-width:980px;margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left))}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
  margin:6px 0 14px;
}
.brand{display:flex; align-items:center; gap:10px; min-width:0}
.logo{
  width:52px;height:52px;border-radius:12px; overflow:hidden;
  background:transparent;
  border:none;
  box-shadow:none;
}
.logo img{width:100%;height:100%;object-fit:contain;display:block; filter: drop-shadow(0 4px 10px rgba(0, 229, 255, 0.4));}
.title-ar{margin:0;font-size:20px;font-weight:900;color:var(--accent);text-shadow: 0 0 20px rgba(0, 229, 255, 0.3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
small{display:block;color:var(--muted);font-weight:700;font-size:13px;text-shadow:none;margin-top:2px}

.actions{display:flex; gap:10px; flex-wrap:wrap; align-items:stretch}
.link{ text-decoration:none; }

.btn{
  appearance:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  padding:10px 12px;
  border-radius:16px;
  font-weight:1000;
  cursor:pointer;
  transition:.15s transform,.15s background,.15s border-color;
  touch-action:manipulation;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.btn:active{transform:scale(.98)}
.btn:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15)}
.btn-accent{border-color:rgba(87,212,255,.5); background:linear-gradient(135deg, rgba(87,212,255,.2), rgba(0,229,255,.05)); box-shadow: 0 5px 15px rgba(0,229,255,.15);}
.btn-danger{border-color:rgba(251,113,133,.35); background:rgba(251,113,133,.10);}

.btn-lg{padding:14px 14px;border-radius:18px;font-size:14px}

.btn-success-flash{
  border-color: rgba(52,211,153,.75) !important;
  background: rgba(52,211,153,.18) !important;
  box-shadow: 0 0 0 3px rgba(52,211,153,.10) inset, var(--shadow);
}

.grid{display:grid; gap:12px}
@media(min-width:860px){ .grid{grid-template-columns:1fr 1fr; align-items:start;} }

.card{
  background: rgba(255,255,255,.02);
  border:1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
.hd{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  background: rgba(0,0,0,.18);
}
.hd h2{margin:0;font-size:14px;letter-spacing:.2px}
.bd{padding:14px}

.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  font-weight:900;
  font-size:12px;
}

label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:10px 2px 6px;
  font-weight:900;
}

.input{
  width:100%;
  border:1px solid var(--line);
  background:rgba(0,0,0,.20);
  color:var(--text);
  border-radius:16px;
  padding:12px 12px;
  outline:none;
  font-weight:900;
  font-size:16px; /* يمنع زوم iOS */
}
.input::placeholder{color:rgba(233,238,245,.45)}

.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row > *{flex:1}

.hr{height:1px;background:var(--line);margin:12px 0}
.hint,.mini{font-size:12px;color:var(--muted);line-height:1.55}

.seg{
  display:flex; gap:8px;
}
.segBtn{
  flex:1;
  padding:12px;
  border-radius:16px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--muted);
  font-weight:1000;
  cursor:pointer;
  min-height:44px;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.segBtn.active{
  color:var(--text);
  border-color: rgba(87,212,255,.35);
  background: rgba(87,212,255,.10);
}

.namesArea{
  display:grid;
  gap:10px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media(min-width:560px){ .namesArea{grid-template-columns:repeat(3,minmax(0,1fr));} }

.tableWrap{overflow:auto; border-radius:16px; border:1px solid var(--line); background: rgba(0,0,0,.18);}
.table{width:100%; border-collapse:separate; border-spacing:0;}
.table th,.table td{
  padding:10px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  text-align:right;
  white-space:nowrap;
}
.table th{
  color:var(--muted);
  font-size:12px;
  background: rgba(255,255,255,.03);
  position:sticky; top:0; z-index:1;
}
.table tr:last-child td{border-bottom:0}
.num{font-variant-numeric: tabular-nums;}
.leader{color:var(--good); font-weight:1100;}
.loser{color:var(--bad); font-weight:1100;}

.btnRow{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
}
.btnRow .btn{flex:1; min-width: 140px;}

.winnerBanner{
  margin-top:12px;
  display:none;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(52,211,153,.45);
  background: rgba(52,211,153,.14);
  font-weight:1100;
  text-align:center;
}
.winnerBanner.show{display:block;}


/* Quick score buttons (minuses/plus) */
.quickRow{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.btnTiny{padding:6px 10px; border-radius:12px; font-size:12px; font-weight:1000; -webkit-tap-highlight-color:transparent; user-select:none;}
.btnTiny.flash{transform:scale(.98); background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18)}