:root{
  --bg:#0d0f1c;
  --bg2:#141830;
  --card:rgba(255,255,255,.055);
  --card-b:rgba(255,255,255,.1);
  --txt:#f2f4ff;
  --dim:#9aa2c4;
  --x:#ff5d73;
  --o:#37d6c0;
  --acc:#7c6cff;
  --acc2:#ff7ac0;
  --shadow:0 18px 50px rgba(0,0,0,.45);
  --r:20px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#f4f5fb;
    --bg2:#e8eaf6;
    --card:rgba(255,255,255,.75);
    --card-b:rgba(20,24,60,.09);
    --txt:#1a1d35;
    --dim:#666e94;
    --x:#e6394f;
    --o:#0aa48c;
    --shadow:0 14px 40px rgba(40,45,90,.14);
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  min-height:100svh;
  background:radial-gradient(1200px 700px at 80% -10%, var(--bg2), var(--bg)) fixed;
  color:var(--txt);
  font-family:"SF Arabic","Geeza Pro","Noto Naskh Arabic","Segoe UI",Tahoma,system-ui,sans-serif;
  display:flex;flex-direction:column;align-items:center;
  padding:max(18px, env(safe-area-inset-top)) 16px 24px;
  overflow-x:hidden;
}

.glow{position:fixed;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;z-index:0}
.glow-a{width:340px;height:340px;background:var(--acc);top:-120px;inset-inline-start:-100px}
.glow-b{width:300px;height:300px;background:var(--acc2);bottom:-130px;inset-inline-end:-90px;opacity:.25}

.wrap{position:relative;z-index:1;width:100%;max-width:460px;display:flex;flex-direction:column;gap:18px}

.head{text-align:center;margin-top:6px}
.head h1{
  margin:0;font-size:clamp(38px,11vw,54px);line-height:1.05;letter-spacing:-1px;
  background:linear-gradient(120deg,var(--x),var(--acc) 55%,var(--o));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{margin:6px 0 0;color:var(--dim);font-size:15px}

.hidden{display:none !important}

.card{
  background:var(--card);border:1px solid var(--card-b);
  border-radius:var(--r);padding:18px;backdrop-filter:blur(14px);
  box-shadow:var(--shadow);
}
.card-t{margin:2px 0 10px;font-size:15px;font-weight:700;color:var(--dim)}
.card-t + .opts{margin-bottom:16px}
#diffBlock{transition:opacity .2s}

.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opts-3{grid-template-columns:repeat(3,1fr)}
.opt{
  appearance:none;cursor:pointer;font-family:inherit;color:var(--txt);
  background:transparent;border:1.5px solid var(--card-b);border-radius:14px;
  padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;
  transition:.18s;
}
.opt:active{transform:scale(.96)}
.opt.is-on{border-color:var(--acc);background:color-mix(in srgb,var(--acc) 16%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--acc) 14%,transparent)}
.opt-ic{font-size:22px;line-height:1.2}
.mark-x{color:var(--x);font-weight:800}
.mark-o{color:var(--o);font-weight:800}
.opt-l{font-size:15px;font-weight:700}
.opt-s{font-size:11.5px;color:var(--dim)}

.btn{
  appearance:none;cursor:pointer;font-family:inherit;font-weight:800;
  border:none;border-radius:14px;transition:.18s;color:#fff;
}
.btn:active{transform:scale(.97)}
.btn-go{
  width:100%;margin-top:14px;padding:15px;font-size:17px;
  background:linear-gradient(120deg,var(--acc),var(--acc2));
  box-shadow:0 10px 26px color-mix(in srgb,var(--acc) 40%,transparent);
}
.btn-sm{padding:11px 14px;font-size:14px;background:color-mix(in srgb,var(--acc) 85%,#000)}
.btn-ghost{background:var(--card);border:1px solid var(--card-b);color:var(--txt)}

/* النقاط */
.score{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.sc{
  background:var(--card);border:1px solid var(--card-b);border-radius:16px;
  padding:10px 6px;text-align:center;display:flex;flex-direction:column;gap:2px;
  transition:.2s;
}
.sc-n{font-size:12.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc-v{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums}
.sc-x .sc-v{color:var(--x)}
.sc-o .sc-v{color:var(--o)}
.sc.live{border-color:currentColor}
.sc-x.live{box-shadow:0 0 0 2px color-mix(in srgb,var(--x) 45%,transparent)}
.sc-o.live{box-shadow:0 0 0 2px color-mix(in srgb,var(--o) 45%,transparent)}

.turn{margin:0;text-align:center;font-size:17px;font-weight:700;min-height:24px}

/* اللوحة */
.board{
  position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  aspect-ratio:1;width:100%;
  background:var(--card);border:1px solid var(--card-b);
  border-radius:24px;padding:10px;box-shadow:var(--shadow);
}
.cell{
  appearance:none;cursor:pointer;font-family:inherit;
  background:color-mix(in srgb,var(--txt) 6%,transparent);
  border:none;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(38px,13vw,58px);font-weight:800;line-height:1;
  color:transparent;transition:background .18s,transform .12s;
}
.cell:active:not(.taken){transform:scale(.94)}
@media (hover:hover){.cell:hover:not(.taken){background:color-mix(in srgb,var(--acc) 18%,transparent)}}
.cell.taken{cursor:default}
.cell.x{color:var(--x)}
.cell.o{color:var(--o)}
.cell.placed{animation:placed .28s cubic-bezier(.2,1.5,.4,1)}
@keyframes placed{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.cell.dimmed{opacity:.3}
.board.over .cell{cursor:default}
.board.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(6px)}50%{transform:translateX(-6px)}75%{transform:translateX(3px)}}

.line{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);pointer-events:none}
.line line{stroke:var(--txt);stroke-width:3.2;stroke-linecap:round;
  stroke-dasharray:150;stroke-dashoffset:150;filter:drop-shadow(0 0 6px currentColor)}
.line.on line{animation:draw .38s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.line.x line{stroke:var(--x)}
.line.o line{stroke:var(--o)}

.actions{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px}

.sound{
  position:fixed;bottom:16px;inset-inline-start:16px;z-index:5;
  width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:18px;
  background:var(--card);border:1px solid var(--card-b);color:var(--txt);
  backdrop-filter:blur(10px);
}

/* نافذة النتيجة */
#pop{
  position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(5,7,18,.62);backdrop-filter:blur(6px);
  animation:fade .2s ease;
}
@keyframes fade{from{opacity:0}to{opacity:1}}
.pop-in{
  width:100%;max-width:340px;text-align:center;
  background:linear-gradient(160deg,var(--bg2),var(--bg));
  border:1px solid var(--card-b);border-radius:26px;padding:26px 20px 20px;
  box-shadow:var(--shadow);animation:rise .3s cubic-bezier(.2,1.3,.4,1);
}
@keyframes rise{from{transform:translateY(24px) scale(.94);opacity:0}}
.pop-ic{font-size:52px;line-height:1}
.pop-t{margin:8px 0 4px;font-size:27px}
.pop-s{margin:0 0 18px;color:var(--dim);font-size:15px}
.pop-btns{display:flex;flex-direction:column;gap:8px}
.pop-btns .btn-go{margin-top:0}

.foot{margin-top:auto;padding-top:22px;color:var(--dim);font-size:12px;text-align:center;position:relative;z-index:1}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}