/* Tutorial walkthrough popup — same dialog conventions as the other v2 popups.
   Colours come from the theme; only the pointer (which must read on any screenshot) and
   the translucent scrims are literal, as in the other popups. */

/* Below the dialog/toast layer (9999 in lib/dialog.css) and above every page element. */
#tuto-overlay{
  display:none;position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.78);align-items:flex-start;justify-content:center;
  backdrop-filter:blur(1px);padding:20px 12px;overflow-y:auto
}
#tuto-overlay.visible{display:flex}

.tuto-box{
  position:relative;background:var(--card);
  border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  width:100%;max-width:420px;margin:auto;padding:42px 16px 16px
}

.tuto-close{
  position:absolute;top:8px;right:12px;width:32px;height:32px;
  background:none;border:none;cursor:pointer;font-family:inherit;
  font-size: 1.625rem;line-height:1;color:var(--t2);opacity:.55
}
.tuto-close:hover{opacity:1}

.tuto-title{
  margin:0 0 12px;font-size: 1.125rem;font-weight:700;color:var(--t1);text-align:center
}

/* The stage keeps the exact aspect ratio of the recorded frames (set from JS as a CSS
   variable), so the overlay coordinates — which are fractions of the frame — always land
   on the right pixel. Its width is derived from the height left over once the rest of the
   popup is accounted for, rather than capped with max-height, which would leave the stage
   wider than the frame inside it. */
.tuto-stage{
  position:relative;margin:0 auto 10px;
  width:min(340px, calc((100vh - 250px) * var(--tuto-ar, 0.54)));
  width:min(340px, calc((100dvh - 250px) * var(--tuto-ar, 0.54)));
  aspect-ratio:var(--tuto-ar, .54);
  border-radius:var(--r);overflow:hidden;background:var(--bg);
  border:1px solid var(--border)
}
.tuto-frame{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
/* Outgoing frame during a cross-fade (see tutoSetFrame): sits just above the incoming
   frame and fades to reveal it. */
.tuto-fade-prev{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:1;transition:opacity .7s ease}
.tuto-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}

/* ---- caption ---- */
.tuto-tip{
  position:absolute;background:var(--primary);color:var(--on-primary);
  padding:7px 9px;border-radius:9px;font-size: 0.75rem;line-height:1.35;font-weight:600;
  box-shadow:0 6px 18px rgba(0,0,0,.5);opacity:0;transition:opacity .28s ease
}
.tuto-tip.on{opacity:1}
.tuto-tip:after{content:"";position:absolute;width:0;height:0;border:7px solid transparent}
.tuto-tip.below:after{top:-14px;left:var(--tx,18px);border-bottom-color:var(--primary)}
.tuto-tip.above:after{bottom:-14px;left:var(--tx,18px);border-top-color:var(--primary)}

/* ---- highlight ring ---- */
.tuto-halo{
  position:absolute;border:2px solid var(--primary);border-radius:8px;
  box-shadow:0 0 0 3px rgba(var(--primary-rgb),.22);
  opacity:0;transition:opacity .3s ease
}
.tuto-halo.on{opacity:1}

/* ---- pointer ---- */
.tuto-cursor{
  position:absolute;left:0;top:0;width:20px;height:28px;
  opacity:0;transition:opacity .25s ease, transform .55s cubic-bezier(.32,.72,.31,1);
  will-change:transform
}
.tuto-cursor.on{opacity:1}
.tuto-cursor.grab{transform-origin:0 0}
.tuto-ripple{
  position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  border:2px solid var(--primary);opacity:0
}
.tuto-ripple.go{animation:tuto-ripple .55s ease-out}
@keyframes tuto-ripple{
  from{opacity:.9;transform:scale(.4)}
  to{opacity:0;transform:scale(4.2)}
}

/* ---- dragged tile ---- */
/* The sprite is the frame itself, shifted so only one rack tile shows through — no extra
   image to ship, and it always matches the screenshot exactly. */
/* background-position has to ease alongside background-size: the crop origin is the
   position, scaled by the same factor as the size (see tutoPlayDrag), so leaving it out
   makes it jump to its end value on the first frame while the size is still full — the
   sprite then shows a square of board instead of the letter for the whole flight. */
.tuto-tile{
  position:absolute;background-repeat:no-repeat;border-radius:3px;
  box-shadow:0 6px 14px rgba(0,0,0,.55);
  transition:left .42s cubic-bezier(.32,.72,.31,1), top .42s cubic-bezier(.32,.72,.31,1),
             width .42s ease, height .42s ease,
             background-size .42s ease, background-position .42s ease, opacity .2s ease
}
/* Fills the slot the tile just left, so the rack reads as emptied. */
.tuto-gap{position:absolute;background:rgba(0,0,0,.34);border-radius:3px}

/* ---- closing card ---- */
.tuto-card{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:22px 18px;
  background:var(--bg);opacity:0;transition:opacity .5s ease
}
.tuto-card.on{opacity:1}
.tuto-card .tuto-card-ic{font-size: 2rem;line-height:1;margin-bottom:12px}
.tuto-card h3{margin:0 0 8px;font-size: 1.0625rem;font-weight:800;color:var(--primary)}
.tuto-card p{margin:0;font-size: 0.8125rem;line-height:1.5;color:var(--t2);max-width:250px}

/* ---- progress + actions ---- */
.tuto-progress{display:flex;align-items:center;gap:6px;max-width:340px;margin:0 auto 12px}
.tuto-play,.tuto-nav{flex:none;width:26px;height:26px;padding:0;border-radius:50%;
  border:1px solid var(--border);background:var(--raised);color:var(--t1);cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;
  transition:background .15s ease}
.tuto-play:hover:not(:disabled),.tuto-nav:hover:not(:disabled){background:var(--card)}
.tuto-nav:disabled{opacity:.35;cursor:default}
.tuto-bar{margin-left:4px}
.tuto-bar{flex:1;display:block;height:3px;border-radius:2px;background:var(--raised);
  overflow:hidden}
.tuto-bar-fill{display:block;height:100%;width:0;background:var(--primary);
  transition:width .3s linear}

.tuto-actions{display:flex;gap:8px;justify-content:center}
.tuto-actions .btn{flex:1;max-width:165px}

@media (prefers-reduced-motion: reduce){
  .tuto-cursor,.tuto-tile{transition:none}
  .tuto-ripple.go{animation:none}
}