/* Il tutorial (tutorial.js, guide.js, coach.js): la barra della lezione sotto
   all'HUD, le schede sopra a tutto, la mano che mostra il gesto. */
:root{ --coach-h:78px; }

/* ---------- Barra della lezione ---------- */
/* Sta dentro #hud: la sua altezza entra nel conto della plancia (game.relayout).
   Durante il tutorial prende il posto della riga dell'obiettivo. */
#app.coaching .hud-goal{ display:none; }
#coach-bar{
  height:calc(var(--coach-h) - 8px); margin:0 0 8px; padding:8px 12px 0; overflow:hidden;
  border-radius:16px; background:var(--panel); border:1px solid var(--accent); box-shadow:var(--glow);
  pointer-events:auto; transition:border-color .25s, box-shadow .25s;
}
.coach-head{ display:flex; align-items:center; gap:8px; height:18px; }
#coach-step{ padding:1px 7px; border-radius:999px; color:#05060f; font-family:var(--font-num); font-size:10.5px;
  font-weight:800; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
#coach-title{ flex:1; min-width:0; font-size:10.5px; font-weight:800; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.coach-skip{ padding:6px 2px 6px 12px; margin:-6px -2px -6px 0; border:0; background:none; cursor:pointer;
  color:var(--ink-dim); font:inherit; font-size:12px; font-weight:700; }
.coach-skip:active{ color:var(--ink); }
#coach-text{ margin:4px 0 0; font-size:14px; font-weight:700; line-height:1.3; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#coach-text.swap{ animation:coachSwap .32s cubic-bezier(.22,1,.36,1) both; }
@keyframes coachSwap{ from{ opacity:0; transform:translateY(5px); } }
#coach-bar.ok{ border-color:var(--good); box-shadow:0 0 16px rgba(57,255,136,.35); }
#coach-bar.ok #coach-text::before{ content:'\2713\00a0'; color:var(--good); }
#coach-bar.warn{ border-color:#ff4d6d; box-shadow:0 0 16px rgba(255,77,109,.4); }

/* In battaglia la barra sta sotto alla prima riga dell'HUD: vita e round scendono con lei. */
#app.coaching #battle-hud .life.foe{ top:calc(56px + var(--safe-t) + var(--coach-h)); }
#app.coaching #battle-hud .round-tag{ top:calc(78px + var(--safe-t) + var(--coach-h)); }

/* Gli strumenti si vedono ma restano spenti, tranne quello della lezione. */
#app.coaching .tool{ opacity:.32; }
#app.coaching .tool.coach{ opacity:1; border-color:var(--accent); animation:coachTool 1.3s ease-in-out infinite; }
#app.coaching .tool.coach.armed{ animation:none; }
@keyframes coachTool{ 50%{ box-shadow:var(--glow); transform:translateY(-3px); } }

/* ---------- La mano ---------- */
/* coach.js la sposta a ogni fotogramma: la punta del dito e' in (20, 4). */
#coach-hand{ left:0; top:0; z-index:8; width:64px; height:84px; pointer-events:none;
  transform-origin:20px 4px; will-change:transform, opacity; filter:drop-shadow(0 6px 10px rgba(0,0,0,.55)); }
#coach-hand svg{ width:64px; height:84px; fill:none; }
#coach-hand .cuff{ fill:var(--accent); }
#coach-hand i{ position:absolute; left:20px; top:4px; width:46px; height:46px; margin:-23px 0 0 -23px;
  border-radius:50%; border:3px solid #fff; opacity:0; }
#coach-hand.tap i{ animation:coachTap .55s ease-out; }
@keyframes coachTap{ from{ opacity:.95; transform:scale(.3); } to{ opacity:0; transform:scale(1.35); } }

/* ---------- Suggerimento del primo livello ---------- */
/* Anche lui dentro #hud: se ne va con l'HUD (pausa, uscita). */
#coach-tip{ position:absolute; max-width:236px; padding:9px 12px; border-radius:14px; pointer-events:none;
  background:var(--panel); border:1px solid var(--warn); box-shadow:0 10px 30px rgba(0,0,0,.5);
  color:var(--ink); font-size:12.5px; font-weight:700; line-height:1.35; animation:tipIn .35s cubic-bezier(.34,1.56,.64,1) both; }
#coach-tip::before{ content:''; position:absolute; top:-7px; right:16px; width:12px; height:12px; background:var(--panel);
  border-left:1px solid var(--warn); border-top:1px solid var(--warn); transform:rotate(45deg); }
@keyframes tipIn{ from{ opacity:0; transform:translateY(6px) scale(.96); } }

/* ---------- Schede ---------- */
#coach-card{ inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:calc(var(--safe-t) + 16px) 16px calc(var(--safe-b) + 16px);
  background:rgba(3,5,12,.74); backdrop-filter:blur(9px); }
#coach-panel{ max-height:100%; overflow-y:auto; padding:22px 18px 20px; }
#coach-panel::-webkit-scrollbar{ width:0; }
#coach-panel.coach-in{ animation:pop .3s cubic-bezier(.34,1.56,.64,1) both; }
#coach-panel h2{ margin-bottom:8px; }
#coach-panel .menu-stack{ margin:0 auto; }
.coach-top{ display:flex; justify-content:center; gap:7px; margin-bottom:12px; }
.coach-top .seed{ width:30px; height:30px; }
.coach-badge{ width:52px; height:52px; border-radius:16px; display:grid; place-items:center; font-size:28px;
  color:#05060f; background:linear-gradient(135deg,var(--accent),var(--accent-2)); box-shadow:var(--glow); }
.coach-lead{ margin:0 0 14px; font-size:14px; line-height:1.45; color:var(--ink); }
.coach-note{ margin:-4px 0 16px; font-size:11.5px; line-height:1.4; color:var(--ink-dim); }
.coach-rules{ list-style:none; margin:6px 0 14px; padding:0; display:flex; flex-direction:column; gap:8px; text-align:left; }
.coach-rules li{ display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.38; }
.coach-rules svg{ flex:none; font-size:15px; margin-top:1px; color:var(--good); }
.coach-modes{ display:flex; flex-direction:column; gap:7px; margin:0 0 16px; padding:10px 12px; border-radius:14px;
  text-align:left; background:rgba(255,255,255,.05); border:1px solid var(--line); }
.coach-mode{ display:grid; grid-template-columns:20px auto 1fr; align-items:center; gap:8px; font-size:12px; }
.coach-mode i{ font-size:17px; color:var(--accent); }
.coach-mode b{ font-size:12.5px; white-space:nowrap; }
.coach-mode span{ color:var(--ink-dim); line-height:1.3; }
.coach-row{ width:100%; display:flex; align-items:center; gap:12px; margin:0 0 10px; padding:12px; cursor:pointer;
  border-radius:16px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--ink);
  font:inherit; text-align:left; transition:transform .1s ease; }
.coach-row:active{ transform:scale(.98); }
.coach-row i{ width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center; font-size:22px;
  color:#05060f; background:linear-gradient(135deg,var(--accent),var(--accent-2)); }
.coach-row b{ display:block; font-size:15px; font-weight:800; margin-bottom:1px; color:var(--ink); }
.coach-row span{ font-size:11.5px; line-height:1.35; color:var(--ink-dim); }