/* Guided onboarding: spotlight, demonstrated hand, captions, unlock toasts and sealed HUD parts (js/tutorial.js). */
.coach-layer { position:absolute; inset:0; z-index:47; pointer-events:none; overflow:hidden; }
.coach-layer.catch { pointer-events:auto; cursor:pointer; }

/* Spotlight: everything outside the rect is dimmed by one huge shadow; the rim is forged gold light. */
.coach-spot { position:absolute; border-radius:calc(var(--u)*1.6); box-shadow:0 0 0 200vmax #050403b8, 0 0 0 2px #f3d48a, 0 0 18px 4px #e8b45a99, inset 0 0 16px #ffd98a55;
  transition:left .28s cubic-bezier(.3,.7,.3,1), top .28s cubic-bezier(.3,.7,.3,1), width .28s cubic-bezier(.3,.7,.3,1), height .28s cubic-bezier(.3,.7,.3,1);
  animation:coachSpot 1.6s ease-in-out infinite; }
.coach-spot::before,.coach-spot::after { content:''; position:absolute; width:calc(var(--u)*3); height:calc(var(--u)*3); border:2px solid #ffe7ad; filter:drop-shadow(0 0 4px #f3c060); }
.coach-spot::before { left:-5px; top:-5px; border-right:0; border-bottom:0; }
.coach-spot::after { right:-5px; bottom:-5px; border-left:0; border-top:0; }
.coach-spot.nodim { box-shadow:0 0 0 2px #f3d48acc, 0 0 16px 3px #e8b45a77; }
@keyframes coachSpot { 50% { box-shadow:0 0 0 200vmax #050403b8, 0 0 0 2px #fff0c4, 0 0 28px 8px #f2c46ccc, inset 0 0 22px #ffd98a88; } }
.coach-spot.nodim { animation:coachRim 1.6s ease-in-out infinite; }
@keyframes coachRim { 50% { box-shadow:0 0 0 2px #fff0c4, 0 0 26px 7px #f2c46caa; } }

/* The two runes to swap, and a flowing trail between them. */
.coach-ring { position:absolute; border-radius:24%; border:2px solid #fff1c7; box-shadow:0 0 12px #ffd27a, inset 0 0 10px #ffd27a88; animation:coachRing 1s ease-in-out infinite; }
.coach-ring + .coach-ring { animation-delay:.5s; }
@keyframes coachRing { 50% { transform:scale(1.1); box-shadow:0 0 22px #ffe3a1, inset 0 0 14px #ffe3a1; } }
.coach-trail { position:absolute; height:calc(var(--u)*1.1); margin-top:calc(var(--u)*-.55); transform-origin:0 50%; border-radius:99px;
  background:repeating-linear-gradient(90deg,#fff6d8 0 14%,transparent 14% 26%); background-size:200% 100%;
  filter:drop-shadow(0 0 4px #ffcf6a); opacity:.85; animation:coachTrail .7s linear infinite; }
@keyframes coachTrail { to { background-position:-46% 0; } }

/* Hand: fingertip anchored with --x0/--y0 → --x1/--y1 (set in px by tutorial.js). */
.coach-hand { position:absolute; left:0; top:0; z-index:2; filter:drop-shadow(0 4px 5px #000a) drop-shadow(0 0 8px #ffd98a66); transform-origin:34% 4%; }
.coach-hand.swipe { animation:coachSwipe 1.7s cubic-bezier(.45,0,.3,1) infinite; }
.coach-hand.tap { animation:coachTap 1.1s ease-in-out infinite; }
@keyframes coachSwipe {
  0% { transform:translate(var(--x0),var(--y0)) translate(12%,30%) scale(1); opacity:0; }
  12% { transform:translate(var(--x0),var(--y0)) scale(1); opacity:1; }
  22% { transform:translate(var(--x0),var(--y0)) scale(.86); }
  62% { transform:translate(var(--x1),var(--y1)) scale(.86); opacity:1; }
  74% { transform:translate(var(--x1),var(--y1)) scale(1); opacity:1; }
  100% { transform:translate(var(--x1),var(--y1)) translate(10%,20%) scale(1); opacity:0; }
}
@keyframes coachTap {
  0%,100% { transform:translate(var(--x0),var(--y0)) translate(8%,26%) scale(1); }
  45% { transform:translate(var(--x0),var(--y0)) scale(.84); }
  60% { transform:translate(var(--x0),var(--y0)) scale(.84); }
}
.coach-hand.tap::after { content:''; position:absolute; left:34%; top:4%; width:calc(var(--u)*7); height:calc(var(--u)*7); margin:calc(var(--u)*-3.5) 0 0 calc(var(--u)*-3.5); border-radius:50%;
  border:2px solid #ffe6a8; opacity:0; animation:coachTapRing 1.1s ease-out infinite; }
@keyframes coachTapRing { 0%,40% { opacity:0; transform:scale(.3); } 55% { opacity:1; } 100% { opacity:0; transform:scale(1.4); } }

/* Caption: parchment-on-iron plate with a pointer toward the spotlight. */
.coach-cap { position:absolute; max-width:min(82%, calc(var(--u)*78)); padding:calc(var(--u)*2.1) calc(var(--u)*3.2) calc(var(--u)*2.2); border-radius:calc(var(--u)*1.2);
  background:linear-gradient(#2a2117f7,#16110cf7); border:1px solid #d9b56d; box-shadow:0 0 0 1px #000, 0 8px 22px #000c, inset 0 1px #ffe4a833, inset 0 0 18px #c88a3a22;
  color:#f8ecd2; font:700 calc(var(--u)*3.5)/1.3 var(--font-title); letter-spacing:.01em; text-align:center; text-shadow:0 1px 2px #000; }
.coach-cap::before { content:''; position:absolute; left:var(--arrow-x,50%); width:calc(var(--u)*2.6); height:calc(var(--u)*2.6); margin-left:calc(var(--u)*-1.3); transform:rotate(45deg);
  background:#1c160f; border:1px solid #d9b56d; }
.coach-cap.above::before { bottom:calc(var(--u)*-1.35); border-left:0; border-top:0; }
.coach-cap.below::before { top:calc(var(--u)*-1.35); border-right:0; border-bottom:0; background:#2a2117; }
.coach-cap:not(.above):not(.below)::before { display:none; }
.coach-cap .coach-text { position:relative; display:block; }
.coach-tap { display:none; margin-top:calc(var(--u)*1); font:600 calc(var(--u)*2)/1 var(--font-ui); letter-spacing:.14em; text-transform:uppercase; color:#d8b878; animation:coachBlink 1.4s ease-in-out infinite; }
.coach-cap.tap .coach-tap { display:block; }
@keyframes coachBlink { 50% { opacity:.35; } }
.coach-cap.pop { animation:coachPop .34s cubic-bezier(.2,1.4,.4,1); }
@keyframes coachPop { from { opacity:0; transform:translateY(6px) scale(.92); } }
.coach-cap.nudge,.coach-hand.nudge { animation-name:coachNudge; animation-duration:.42s; animation-iteration-count:1; }
.coach-hand.nudge { animation:coachSwipe 1.7s cubic-bezier(.45,0,.3,1) infinite; }
.coach-cap.nudge { animation:coachNudge .42s ease-in-out; border-color:#ffb36b; }
@keyframes coachNudge { 20%,60% { translate:-6px 0; } 40%,80% { translate:6px 0; } }

.coach-skip { position:absolute; right:calc(var(--u)*2.5); bottom:calc(var(--u)*.9); pointer-events:auto; z-index:3; padding:calc(var(--u)*1) calc(var(--u)*2.2); border-radius:99px; border:1px solid #9c8a6688;
  background:#120e0acc; color:#cbbd9f; font:600 calc(var(--u)*2)/1 var(--font-ui); letter-spacing:.08em; cursor:pointer; }
.coach-skip:hover { color:#fff1d0; border-color:#e0c088; }

/* Unlock toast: a rune seal cracks open with the feature name. */
.coach-toast { position:absolute; left:50%; top:calc(var(--u)*30); display:flex; align-items:center; gap:calc(var(--u)*2); padding:calc(var(--u)*1.8) calc(var(--u)*4) calc(var(--u)*1.8) calc(var(--u)*2);
  transform:translateX(-50%); white-space:nowrap; border-radius:calc(var(--u)*1); border:1px solid #f0cc7f; background:linear-gradient(90deg,#3a2a14f2,#1a130bf2);
  box-shadow:0 0 0 1px #000, 0 0 30px #f1b65577, inset 0 0 20px #ffcf7a22; color:#fff3d6; font:800 calc(var(--u)*3.4)/1 var(--font-title); letter-spacing:.06em; }
.coach-toast b { padding:calc(var(--u)*.9) calc(var(--u)*1.4); border-radius:3px; background:linear-gradient(#ffe7a3,#c88a32); color:#2b1806; font:800 calc(var(--u)*1.9)/1 var(--font-ui); letter-spacing:.16em; }
.coach-toast i { font-style:normal; color:#d4a75a; }
.coach-toast.go { animation:coachToast 2.3s cubic-bezier(.2,.9,.3,1) forwards; }
.coach-toast.go::after { content:''; position:absolute; inset:-1px; border-radius:inherit; background:linear-gradient(100deg,transparent 30%,#fff6d488 50%,transparent 70%); background-size:250% 100%; animation:coachSheen 1s .25s ease-out both; mix-blend-mode:screen; }
@keyframes coachToast { 0% { opacity:0; transform:translateX(-50%) scale(.6); filter:brightness(2.4); } 14% { opacity:1; transform:translateX(-50%) scale(1.06); filter:brightness(1.3); } 22% { transform:translateX(-50%) scale(1); filter:none; } 82% { opacity:1; transform:translateX(-50%); } 100% { opacity:0; transform:translateX(-50%) translateY(-12px); } }
@keyframes coachSheen { from { background-position:120% 0; } to { background-position:-30% 0; } }
.coach-new { animation:coachNew .7s ease-out 3 !important; }
@keyframes coachNew { 0% { filter:brightness(2.2) drop-shadow(0 0 10px #ffe1a0); } 100% { filter:none; } }

/* ---------------------------------------------------------------- progressive HUD */
.tut-lock-intent .enemy .intent { display:none !important; }
.tut-lock-mana .b-player .bar.mana, .tut-lock-rage .b-player .bar.rage { display:none !important; }
.tut-lock-mana.tut-lock-rage .b-player .bars .bar.hp { height:calc(var(--u)*3.4); }
.skill.tut-locked { pointer-events:none; border-color:#4b4436 !important; background:repeating-linear-gradient(135deg,#14110d 0 6px,#18140f 6px 12px) !important; box-shadow:inset 0 0 14px #000c !important; }
.skill.tut-locked > * { visibility:hidden; }
/* Iron padlock stamped into the socket (mask keeps it tintable). */
.skill.tut-locked::after { content:''; position:absolute; left:50%; top:20%; width:calc(var(--u)*5.2); height:calc(var(--u)*6); transform:translateX(-50%);
  background:linear-gradient(#8a7c62,#4e4434); filter:drop-shadow(0 1px 0 #000) drop-shadow(0 -1px 0 #b9a47a33);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M6 13V9a7 7 0 0 1 14 0v4h-3V9a4 4 0 0 0-8 0v4z'/%3E%3Crect x='2' y='13' width='22' height='16' rx='3'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M6 13V9a7 7 0 0 1 14 0v4h-3V9a4 4 0 0 0-8 0v4z'/%3E%3Crect x='2' y='13' width='22' height='16' rx='3'/%3E%3C/svg%3E") center/contain no-repeat; }
.skill.tut-locked::before { content:attr(data-unlock); position:absolute; left:0; right:0; bottom:calc(var(--u)*1.6); text-align:center; font:700 max(7px,calc(var(--u)*1.5))/1 var(--font-ui); letter-spacing:.18em; color:#857658; }

@media (prefers-reduced-motion:reduce) {
  .coach-spot,.coach-ring,.coach-trail,.coach-tap,.coach-toast.go::after,.coach-new { animation:none !important; }
  .coach-hand.swipe,.coach-hand.tap { animation-duration:3s; }
}