/* =====================================================================
   matchstick.css — أنماط «أعواد الكبريت» (صفحتا العربية والإنجليزية)
   ---------------------------------------------------------------------
   العود: جسم خشبي ورأس أحمر، والمرفوع يرتفع ويتوهّج. والمواضع الفارغة
   لا تظهر إلا حين يصير لها معنى — أي حين يكون بيد اللاعب عود يضعه.
   ===================================================================== */

.ms-stage {
  background: var(--bg-soft); border: 1px solid var(--panel-border);
  border-radius: var(--radius-lg); padding: 16px 12px 18px; margin: 14px 0;
}

.ms-levels { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.ms-lvl {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  padding: 9px 16px; min-height: 40px; border-radius: 999px;
  background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text-muted);
}
.ms-lvl.on { background: var(--accent-teal-dim); border-color: var(--accent-teal); color: var(--accent-teal); }
.ms-lvl.locked { opacity: .5; cursor: default; }

.ms-ask { text-align: center; font-size: 15px; font-weight: 800; color: var(--text-primary); margin: 4px 0 10px; line-height: 1.7; }

.ms-board { display: flex; justify-content: center; padding: 6px 0 2px; touch-action: manipulation; }
.ms-eq { width: 100%; max-width: 460px; height: auto; }

.mstick .body { fill: #e8c07a; }
.mstick .tip  { fill: #e8554e; }
.mstick { transition: transform .12s ease, filter .12s ease; }
.mstick.sel { transform: translateY(-6px); filter: drop-shadow(0 0 7px rgba(87, 232, 201, .95)); }
.mstick.sel .body { fill: #f6d9a5; }
.mstick.lit { animation: msPulse 1s ease-in-out infinite; }
@keyframes msPulse { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 8px rgba(245, 184, 78, 1)); } }

.mslot { fill: transparent; }
.mslot.ghost { fill: rgba(143, 154, 192, .13); stroke: rgba(143, 154, 192, .35); stroke-width: 1; stroke-dasharray: 3 3; }
.mslot.lit { fill: rgba(245, 184, 78, .3); stroke: var(--accent-amber, #f5b84e); stroke-dasharray: none; }
.mhit { fill: transparent; cursor: pointer; }

.ms-say { text-align: center; font-size: 13px; color: var(--text-muted); min-height: 20px; margin-top: 6px; line-height: 1.7; }
.ms-say.warn { color: var(--accent-amber, #f5b84e); font-weight: 700; }

.ms-meta { display: flex; justify-content: center; gap: 18px; font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.ms-meta b { color: var(--text-primary); font-family: var(--font-mono); }

.ms-tools { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.ms-tools button {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  min-height: 44px; padding: 10px 16px; border-radius: 12px;
  background: var(--tile-bg); border: 1px solid var(--tile-border); color: var(--text-primary);
}
.ms-tools button:hover:not(:disabled) { border-color: var(--accent-teal); }
.ms-tools button:disabled { opacity: .45; cursor: default; }
.ms-tools .primary { background: var(--accent-teal-dim); border-color: var(--accent-teal); color: var(--accent-teal); }

.ms-win {
  margin-top: 14px; text-align: center; padding: 18px 14px;
  background: linear-gradient(180deg, rgba(87, 232, 201, .12), var(--tile-bg));
  border: 1px solid var(--accent-teal); border-radius: var(--radius-lg);
}
.ms-win h3 { margin: 0 0 6px; font-size: 18px; color: var(--text-primary); }
.ms-win .score { font-size: 15px; font-weight: 800; color: var(--accent-teal); }
.ms-win .extra { font-size: 13px; color: var(--accent-violet); margin-top: 6px; min-height: 18px; }
.ms-win button {
  margin-top: 12px; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
  min-height: var(--touch-min); padding: 12px 28px; border-radius: 999px; border: 0;
  background: linear-gradient(90deg, var(--accent-teal), var(--accent-violet)); color: var(--bg);
}

@media (max-width: 420px) {
  .ms-ask { font-size: 14px; }
  .ms-tools button { padding: 10px 13px; }
}