/* =============================================================================
   ZHAIMER — Interactive Tutorial ("Learn to Play")
   Fully isolated from game.js/ROOM state: never touches real hand, deck,
   stats, or leaderboard. Reuses .card/.faceDown/.faceUp from style.css so
   it looks native, but everything here lives in its own sandbox.
   ============================================================================= */

.tut-overlay{
  position:fixed; inset:0; z-index:5000;
  background:rgba(4,8,6,0.86);
  display:flex; align-items:center; justify-content:center;
  padding:14px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.tut-overlay[hidden]{ display:none; }

.tut-panel{
  position:relative;
  width:min(560px, 100%);
  max-height:calc(100dvh - 28px);
  overflow-y:auto;
  background:linear-gradient(165deg,#0e1913,#070d09);
  border:1px solid rgba(215,173,79,0.5);
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(215,173,79,0.08);
  padding:20px 18px 16px;
  color:#f3ead9;
  font-family:-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
html[lang="ar"] .tut-panel{ direction:rtl; text-align:right; font-family:"Tajawal",Arial,sans-serif; }

.tut-progress{
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; letter-spacing:.5px; color:#d7ad4f; margin-bottom:10px;
}
.tut-progress-track{
  flex:1; height:5px; margin:0 10px; border-radius:4px;
  background:rgba(255,255,255,0.08); overflow:hidden;
}
.tut-progress-fill{
  height:100%; border-radius:4px;
  background:linear-gradient(90deg,#e1b85b,#a87321);
  transition:width .3s ease;
}

.tut-stage{
  min-height:150px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:10px 0 6px; position:relative;
}

/* Spotlight ring around whatever the current step points at */
.tut-spot{
  position:relative;
  border-radius:10px;
  box-shadow:0 0 0 4px rgba(215,173,79,0.65), 0 0 22px 4px rgba(215,173,79,0.35);
  transition:box-shadow .25s ease;
}
.tut-spot.tut-wrong-click{
  animation:tutShake .35s ease;
}
@keyframes tutShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}

/* Animated pointer hand, shown over the required target */
.tut-pointer{
  position:absolute; font-size:26px; pointer-events:none;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.6));
  animation:tutPointerBounce 1.1s ease-in-out infinite;
}
@keyframes tutPointerBounce{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-8px); }
}

.tut-speech{
  background:rgba(13,26,18,0.75);
  border:1px solid rgba(215,173,79,0.3);
  border-radius:10px;
  padding:12px 14px;
  font-size:14.5px;
  line-height:1.55;
  color:#eee4d0;
  text-align:center;
}
.tut-speech h3{
  margin:0 0 6px; color:#e9c65c; font-size:15px; font-family:Georgia,serif;
}

.tut-mini-cards{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.tut-mini-cards .card{ width:56px; }
.tut-mini-cards .card.big{ width:64px; }

.tut-countdown{
  font-size:22px; font-weight:800; color:#e9c65c; min-width:28px; text-align:center;
}

.tut-values-panel{
  display:grid; grid-template-columns:repeat(2,1fr); gap:6px 14px;
  width:100%; font-size:13px; color:#cfc8b9;
}
.tut-values-panel div{ display:flex; justify-content:space-between; border-bottom:1px dashed rgba(255,255,255,0.08); padding:3px 0; }
.tut-values-panel b{ color:#e9c65c; }

.tut-controls{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-top:16px; flex-wrap:wrap;
}
.tut-controls-left, .tut-controls-right{ display:flex; gap:8px; flex-wrap:wrap; }
.tut-btn{
  min-height:44px; min-width:44px;
  padding:9px 16px; border-radius:8px; font-size:13.5px; font-weight:700;
  cursor:pointer; border:1px solid rgba(215,173,79,0.4);
  background:rgba(255,255,255,0.04); color:#eee4d0;
  transition:transform .1s ease, background .15s ease;
}
.tut-btn:hover{ background:rgba(255,255,255,0.09); }
.tut-btn:active{ transform:scale(0.97); }
.tut-btn:focus-visible{ outline:2px solid #d7ad4f; outline-offset:2px; }
.tut-btn.tut-primary{
  background:linear-gradient(135deg,#e1b85b,#a87321); color:#0a0a07; border-color:transparent;
}
.tut-btn.tut-ghost{ background:transparent; }
.tut-btn[disabled]{ opacity:.4; cursor:not-allowed; }

.tut-close-x{
  position:absolute; top:10px; inset-inline-end:10px;
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.06); border:1px solid rgba(215,173,79,0.3);
  color:#eee4d0; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center;
}

/* Burn ash/particle animation — no realistic fire */
.tut-burn-fx{
  position:relative; display:flex; gap:8px; justify-content:center;
}
.tut-burn-fx .card.burning{
  animation:tutBurnGlow .9s ease-in-out forwards;
}
@keyframes tutBurnGlow{
  0%{ box-shadow:0 0 0 0 rgba(215,173,79,0.6); opacity:1; }
  60%{ box-shadow:0 0 24px 8px rgba(215,173,79,0.55); opacity:.6; }
  100%{ box-shadow:0 0 0 0 rgba(215,173,79,0); opacity:0; transform:scale(0.85); }
}
.tut-ash-particle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background:#d7ad4f; opacity:0;
  animation:tutAshRise 0.9s ease-out forwards;
}
@keyframes tutAshRise{
  0%{ opacity:.9; transform:translateY(0) scale(1); }
  100%{ opacity:0; transform:translateY(-28px) scale(0.3); }
}

/* Card flip helper reused across steps */
.tut-flip{ animation:tutFlip .5s ease; }
@keyframes tutFlip{
  0%{ transform:rotateY(0); }
  50%{ transform:rotateY(90deg); }
  100%{ transform:rotateY(0); }
}

@media (prefers-reduced-motion: reduce){
  .tut-pointer{ animation:none; }
  .tut-spot.tut-wrong-click{ animation:none; }
  .tut-burn-fx .card.burning{ animation:none; opacity:0; }
  .tut-ash-particle{ animation:none; display:none; }
  .tut-flip{ animation:none; }
}

/* Invitation prompt (first-time players) */
.tut-invite{
  position:fixed; z-index:4900; left:50%; bottom:18px; transform:translateX(-50%);
  width:min(360px, 92vw);
  background:linear-gradient(165deg,#0e1913,#070d09);
  border:1px solid rgba(215,173,79,0.5);
  border-radius:12px; padding:14px 16px;
  box-shadow:0 12px 30px rgba(0,0,0,0.5);
  color:#eee4d0; font-size:13.5px;
  display:flex; flex-direction:column; gap:10px;
}
html[lang="ar"] .tut-invite{ direction:rtl; text-align:right; }
.tut-invite-actions{ display:flex; gap:8px; justify-content:flex-end; }
html[lang="ar"] .tut-invite-actions{ justify-content:flex-start; }

/* Learn to Play entry button on the main menu */
.dest-row.dest-learn{
  background:linear-gradient(135deg,#2f6f4f,#123322);
  border:1px solid rgba(215,173,79,0.45);
}

@media (max-width:480px){
  .tut-panel{ padding:16px 12px 12px; border-radius:10px; }
  .tut-mini-cards .card{ width:48px; }
  .tut-speech{ font-size:13.5px; }
  .tut-btn{ padding:8px 12px; font-size:12.5px; }
}