/* ── Tutorial: overlay, spotlight, tooltip ── */

#tutorial-overlay{
  position:fixed;inset:0;z-index:1100;pointer-events:auto;
}
#tutorial-spotlight{
  position:fixed;z-index:1101;pointer-events:none;
  border-radius:8px;padding:6px;
  box-shadow:0 0 0 9999px rgba(0,0,0,0.7);
  transition:top 0.3s ease,left 0.3s ease,width 0.3s ease,height 0.3s ease;
}
#tutorial-spotlight.fullscreen{
  inset:0;border-radius:0;background:rgba(0,0,0,0.7);box-shadow:none;
}
.tutorial-target{position:relative !important;z-index:1102 !important}
.tutorial-cell-hint{
  outline:3px solid #4a9;outline-offset:-3px;z-index:3;
  animation:tutCellPulse 1s ease-in-out infinite;
}
@keyframes tutCellPulse{
  0%,100%{outline-color:#4a9;box-shadow:inset 0 0 8px rgba(74,153,105,0.3)}
  50%{outline-color:#8ec6a5;box-shadow:inset 0 0 16px rgba(142,198,165,0.5)}
}
#tutorial-tooltip{
  position:fixed;z-index:1200;pointer-events:auto;
  background:#fff;border-radius:16px;padding:24px;
  max-width:340px;min-width:260px;
  box-shadow:0 12px 40px rgba(0,0,0,0.4);border:3px solid #f4c87a;
  animation:tutFadeIn 0.3s ease;
}
@keyframes tutFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tut-step-counter{
  font-family:'Nunito',sans-serif;font-size:11px;font-weight:700;
  color:#aaa;margin-bottom:8px;letter-spacing:1px;
}
.tut-message{
  font-family:'Nunito',sans-serif;font-size:14px;color:#333;
  line-height:1.7;margin-bottom:20px;
}
.tut-buttons{display:flex;gap:10px;justify-content:flex-end}
.tut-btn-next{
  font-family:'Playfair Display',serif;font-size:14px;font-weight:700;
  padding:10px 24px;border-radius:10px;border:2.5px solid #8ec6a5;
  background:rgba(142,198,165,0.1);color:#4a9;cursor:pointer;transition:all 0.15s;
}
.tut-btn-next:hover{background:#8ec6a5;color:#fff}
.tut-btn-skip{
  font-family:'Nunito',sans-serif;font-size:12px;font-weight:600;
  padding:10px 16px;border-radius:8px;border:1.5px solid rgba(0,0,0,0.15);
  background:transparent;color:#999;cursor:pointer;transition:all 0.15s;
}
.tut-btn-skip:hover{background:rgba(0,0,0,0.05);color:#666}
@media(max-width:860px){
  #tutorial-tooltip{max-width:calc(100vw - 24px);min-width:0}
}
@media(max-width:480px){
  #tutorial-tooltip{padding:16px;border-radius:12px;border-width:2px}
  .tut-step-counter{font-size:10px;margin-bottom:6px}
  .tut-message{font-size:13px;line-height:1.6;margin-bottom:14px}
  .tut-btn-next{font-size:13px;padding:8px 18px}
  .tut-btn-skip{font-size:11px;padding:8px 12px}
  .tut-buttons{gap:8px}
}
@media(max-width:360px){
  #tutorial-tooltip{padding:12px}
  .tut-message{font-size:12px;margin-bottom:10px}
  .tut-btn-next{font-size:12px;padding:7px 14px}
  .tut-btn-skip{font-size:10px;padding:7px 10px}
}