/* ---------- НАВЧАННЯ ПЕРШОЇ ПАРТІЇ (js/tutor.js) ----------
   Картка-підказка внизу зліва і підсвітка цілі класом .tutor. Без накладок поверх дошки:
   клікати можна куди завгодно, картка лише розповідає. Колір підсвітки — блакитний, щоб не
   плутати з рамкою вибору (акцент) і цілями (зелений/червоний). */
.tutor-card{
  position:fixed; left:14px; top:60px; z-index:41;             /* під вікном Правил (.modal 50), над дошкою; вгорі — бо база новачка внизу зліва */
  width:min(440px, calc(100vw - 28px));
  background:rgba(15,18,24,.94); border:1px solid rgba(127,198,255,.55); border-radius:10px;
  padding:12px 14px 12px; color:var(--text); font-size:13px; line-height:1.45;
  box-shadow:0 14px 44px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  animation:tutorIn .25s ease-out;
}
@keyframes tutorIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.tutor-card .tu-top{ display:flex; justify-content:space-between; align-items:center; gap:8px;
                     font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:#7fc6ff; }
.tutor-card .tu-skip{ background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; font-size:11px;
                      letter-spacing:0; text-transform:none; padding:2px 4px; border-radius:4px; }
.tutor-card .tu-skip:hover{ color:var(--text); background:rgba(255,255,255,.06); }
.tutor-card .tu-title{ font-weight:700; font-size:15px; margin:6px 0 4px; color:var(--gold-hi); }
.tutor-card .tu-text{ color:var(--text); }
.tutor-card .tu-btns{ display:flex; gap:8px; margin-top:10px; }

/* підсвітка цілі: клітинка (2D), фігура (2D), кнопка «Готово», вкладка суперника. У 3D клас
   .tutor на клітинці читає board3d.js і малює рамку на плиті. */
.cell.tutor{ box-shadow:inset 0 0 0 3px #7fc6ff, 0 0 16px rgba(127,198,255,.55); animation:tutorPulse 1.2s ease-in-out infinite; }
#pieces .piece.tutor{ filter:drop-shadow(0 0 5px #7fc6ff) drop-shadow(0 0 12px rgba(127,198,255,.85)); animation:tutorPulse 1.2s ease-in-out infinite; }
#doneBtn.tutor, .tabs .tutor{ box-shadow:0 0 0 3px #7fc6ff, 0 0 18px rgba(127,198,255,.6); animation:tutorPulse 1.2s ease-in-out infinite; }
@keyframes tutorPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.62; } }
@media (prefers-reduced-motion: reduce){ .cell.tutor, #pieces .piece.tutor, #doneBtn.tutor, .tabs .tutor, .tutor-card{ animation:none; } }
@media (max-width:700px){ .tutor-card{ left:8px; right:8px; top:auto; bottom:8px; width:auto; font-size:12px; } }