:root{
  --bg:#ecfff4;
  --surface:#ffffff;
  --surface-2:#f5fff9;
  --text:#13231a;
  --muted:#6d7e74;
  --primary:#3ad67f;
  --primary-dark:#20b965;
  --x:#151515;
  --o:#ffbd18;
  --border:#d9efe2;
  --shadow:0 18px 45px rgba(26,104,63,.15);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Tahoma,Arial,sans-serif;background:
radial-gradient(circle at top right,rgba(58,214,127,.18),transparent 34%),
linear-gradient(180deg,var(--bg),#f8fffb);color:var(--text)}
body.dark{
  --bg:#0d1711;--surface:#16231b;--surface-2:#1b2c21;--text:#f4fff7;
  --muted:#a8b8ad;--border:#294534;--shadow:0 18px 45px rgba(0,0,0,.35);
}
button,select{font:inherit}
button{cursor:pointer}
.app-shell{width:min(100%,720px);margin:auto;padding:18px 16px 30px}
.topbar{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:12px;margin-bottom:20px}
.brand{display:flex;align-items:center;justify-content:center;gap:12px;text-align:right}
.brand img{width:58px;height:58px;border-radius:18px;box-shadow:var(--shadow)}
.brand h1{margin:0;font-size:1.45rem}
.brand p{margin:4px 0 0;color:var(--muted);font-size:.9rem}
.icon-btn{width:48px;height:48px;border:1px solid var(--border);background:var(--surface);border-radius:16px;color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:26px;box-shadow:var(--shadow)}
.setup-card{padding:24px}
.setup-card h2{margin:0 0 18px;text-align:center}
.segmented{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);padding:5px;border-radius:18px;margin-bottom:18px}
.mode-btn,.symbol-btn{border:0;background:transparent;border-radius:14px;padding:13px;color:var(--text);font-weight:bold}
.mode-btn.active,.symbol-btn.active{background:var(--primary);color:#07170d;box-shadow:0 8px 20px rgba(58,214,127,.28)}
label,.symbol-choice>span{display:block;margin-bottom:8px;font-weight:bold}
select{width:100%;padding:14px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:14px;margin-bottom:18px}
.symbol-choice{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.symbol-buttons{display:flex;gap:8px}
.symbol-btn{width:58px;font-size:1.2rem;border:1px solid var(--border)}
.primary-btn,.secondary-btn{border:0;border-radius:16px;padding:14px 18px;font-weight:bold}
.primary-btn{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#07170d;box-shadow:0 10px 24px rgba(58,214,127,.28)}
.secondary-btn{background:var(--surface);color:var(--text);border:1px solid var(--border)}
#startBtn{width:100%;font-size:1.08rem}
.hidden{display:none!important}
.game-area{display:grid;gap:16px}
.scoreboard{display:grid;grid-template-columns:1fr 1fr 1fr;padding:12px}
.score-item{text-align:center;padding:8px}
.score-item span{display:block;color:var(--muted);font-size:.82rem}
.score-item strong{display:block;font-size:1.5rem;margin-top:5px}
.score-item.draw{border-right:1px solid var(--border);border-left:1px solid var(--border)}
.status{display:flex;justify-content:center;align-items:center;gap:10px;padding:14px}
.turn-dot{width:12px;height:12px;border-radius:50%;background:var(--x);box-shadow:0 0 0 5px rgba(0,0,0,.08)}
.board-wrap{padding:10px}
.board{width:min(86vw,470px);aspect-ratio:1;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;background:var(--primary);padding:12px;border-radius:32px;box-shadow:var(--shadow)}
.cell{border:0;background:var(--surface);border-radius:22px;font-size:clamp(2.7rem,13vw,5.7rem);font-weight:900;color:var(--x);display:flex;align-items:center;justify-content:center;transition:transform .15s ease,background .2s}
.cell:hover{transform:translateY(-2px)}
.cell:active{transform:scale(.95)}
.cell.o{color:var(--o);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.cell.pop{animation:pop .25s ease}
.cell.win{background:#fff1a8;animation:pulse .8s ease infinite alternate}
body.dark .cell.win{background:#6b5b14}
.game-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.game-actions .primary-btn{grid-column:1/-1}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,120px);background:#15241b;color:white;padding:12px 20px;border-radius:14px;opacity:0;transition:.3s;z-index:20}
.toast.show{transform:translate(-50%,0);opacity:1}
#confettiCanvas{position:fixed;inset:0;pointer-events:none;z-index:15}
footer{text-align:center;color:var(--muted);font-size:.82rem;margin-top:18px}
@keyframes pop{0%{transform:scale(.4);opacity:0}80%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes pulse{from{transform:scale(1)}to{transform:scale(.96)}}
@media(max-width:480px){
  .app-shell{padding:12px 10px 22px}
  .topbar{grid-template-columns:44px 1fr 44px}
  .icon-btn{width:42px;height:42px;border-radius:14px}
  .brand img{width:48px;height:48px;border-radius:14px}
  .brand h1{font-size:1.15rem}
  .setup-card{padding:18px}
  .board{gap:8px;padding:9px;border-radius:25px}
  .cell{border-radius:17px}
}


.dhikr-ticker{
  overflow:hidden;
  white-space:nowrap;
  background:linear-gradient(135deg,var(--primary),var(--primary-dark));
  color:#07170d;
  border-radius:16px;
  margin:-5px 0 18px;
  box-shadow:0 10px 24px rgba(58,214,127,.22);
  direction:ltr;
}
.dhikr-track{
  display:inline-flex;
  align-items:center;
  gap:18px;
  min-width:max-content;
  padding:11px 0;
  font-weight:800;
  direction:rtl;
  animation:dhikrScroll 24s linear infinite;
}
.dhikr-track span{display:inline-block}
.dhikr-track b{opacity:.5}
.dhikr-ticker:hover .dhikr-track{animation-play-state:paused}
.copyright{
  margin-top:7px;
  font-weight:bold;
  color:var(--text);
}
@keyframes dhikrScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion:reduce){
  .dhikr-track{animation-duration:55s}
}

/* الإصدار 3: تخطيط مدمج للهواتف ليظهر كاملًا داخل الشاشة */
@media (max-width: 600px){
  html,body{min-height:100%;}
  body{overflow-x:hidden;}
  .app-shell{
    width:100%;
    min-height:100svh;
    padding:8px 10px 10px;
    display:flex;
    flex-direction:column;
  }
  .topbar{
    grid-template-columns:40px 1fr 40px;
    gap:7px;
    margin-bottom:7px;
    min-height:50px;
  }
  .icon-btn{
    width:38px;
    height:38px;
    border-radius:12px;
    padding:0;
    font-size:1rem;
  }
  .brand{gap:7px;}
  .brand img{
    width:42px;
    height:42px;
    border-radius:12px;
  }
  .brand h1{font-size:1.02rem;line-height:1.15;}
  .brand p{font-size:.72rem;margin-top:2px;}

  .dhikr-ticker{
    margin:0 0 7px;
    border-radius:11px;
  }
  .dhikr-track{
    gap:12px;
    padding:6px 0;
    font-size:.82rem;
    animation-duration:22s;
  }

  main{flex:1;display:flex;flex-direction:column;min-height:0;}
  .game-area{
    flex:1;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr) auto;
    gap:7px;
    min-height:0;
  }
  .card{border-radius:18px;}
  .scoreboard{padding:5px;}
  .score-item{padding:4px 3px;}
  .score-item span{font-size:.72rem;line-height:1.15;}
  .score-item strong{font-size:1.25rem;margin-top:2px;}
  .status{padding:8px;min-height:42px;font-size:.9rem;}
  .turn-dot{width:10px;height:10px;box-shadow:0 0 0 4px rgba(0,0,0,.07);}

  .board-wrap{
    padding:0;
    min-height:0;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .board{
    width:min(78vw, 35svh, 300px);
    height:min(78vw, 35svh, 300px);
    aspect-ratio:1;
    gap:6px;
    padding:7px;
    border-radius:22px;
  }
  .cell{
    min-width:0;
    min-height:0;
    border-radius:14px;
    font-size:clamp(2.25rem,11vw,4rem);
  }

  .game-actions{grid-template-columns:1fr 1fr;gap:6px;}
  .game-actions .primary-btn{grid-column:1/-1;}
  .primary-btn,.secondary-btn{
    padding:9px 8px;
    border-radius:12px;
    font-size:.82rem;
    min-height:38px;
  }
  footer{font-size:.68rem;margin-top:6px;line-height:1.3;}
  footer>div:first-child{display:none;}
  .copyright{margin-top:0;}

  .setup-card{padding:15px;}
  .setup-card h2{margin-bottom:12px;font-size:1.05rem;}
  .segmented{margin-bottom:12px;}
  .mode-btn,.symbol-btn{padding:10px;}
  select{padding:11px;margin-bottom:12px;}
  .symbol-choice{margin-bottom:14px;}
}

/* ===== اللعب الأونلاين ===== */
.segmented.three{grid-template-columns:repeat(3,1fr)}
.segmented.three .mode-btn{padding:12px 4px;font-size:.92rem}
.online-box{margin-bottom:8px}
.name-input{width:100%;padding:13px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:14px;text-align:center;font-size:1.05rem;margin:0 0 12px}
#createRoomBtn{width:100%;font-size:1.05rem}
.online-or{text-align:center;color:var(--muted);font-weight:bold;margin:14px 0;position:relative}
.join-row{display:flex;gap:8px}
.join-row input{flex:1;padding:14px;border:1px solid var(--border);background:var(--surface-2);color:var(--text);border-radius:14px;text-align:center;font-size:1.25rem;letter-spacing:6px;margin:0}
.join-row input::placeholder{letter-spacing:normal;font-size:.95rem}
.join-row .secondary-btn{white-space:nowrap}
.online-hint{margin-top:4px;text-align:center;color:var(--muted);line-height:1.9;font-size:.95rem}
#onlineWaiting{text-align:center;padding:6px 0}
#cancelRoomBtn{width:100%;margin-top:16px}
.room-code{display:inline-block;margin-top:4px;font-size:1.9rem;color:var(--primary-dark);letter-spacing:6px}
body.dark .room-code{color:var(--primary)}

/* شاشات قصيرة جدًا */
@media (max-width:600px) and (max-height:700px){
  .app-shell{padding-top:5px;}
  .topbar{min-height:44px;margin-bottom:4px;}
  .brand img{width:36px;height:36px;}
  .brand p{display:none;}
  .dhikr-ticker{margin-bottom:5px;}
  .dhikr-track{padding:4px 0;font-size:.76rem;}
  .game-area{gap:5px;}
  .score-item{padding:2px;}
  .score-item strong{font-size:1.08rem;}
  .status{padding:5px;min-height:35px;}
  .board{
    width:min(72vw, 32svh, 260px);
    height:min(72vw, 32svh, 260px);
    gap:5px;
    padding:6px;
  }
  .primary-btn,.secondary-btn{padding:7px 6px;min-height:34px;}
  footer{font-size:.62rem;margin-top:4px;}
}