:root{
  --indigo:#6366f1;
  --indigo-2:#8b5cf6;
  --text:#e8eaed;
  --muted:#9aa0a6;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  color:var(--text);
}

/* ===== shared playback overlays ===== */
.glow{box-shadow:0 0 0 2px #8ab4f8,0 0 22px 5px rgba(138,180,248,.55) !important}
.taunt{position:fixed;left:50%;top:12%;transform:translateX(-50%);font-size:30px;font-weight:700;color:#fff;text-align:center;opacity:0;transition:opacity .35s;pointer-events:none;width:92vw;z-index:55;text-shadow:0 2px 18px rgba(0,0,0,.6)}
.taunt.show{opacity:1}
.step{position:fixed;left:50%;bottom:14%;transform:translateX(-50%);font-size:18px;color:#8ab4f8;background:rgba(20,20,20,.92);padding:10px 20px;border-radius:24px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:55;text-align:center;max-width:90vw}
.step.show{opacity:1}
.cursor{position:fixed;left:0;top:0;width:26px;height:26px;z-index:58;pointer-events:none;opacity:0;transition:opacity .3s}
.cursor.show{opacity:1}
.cursor svg{width:26px;height:26px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6))}
.skip{position:fixed;right:18px;bottom:18px;z-index:60;display:none;align-items:center;gap:6px;background:rgba(40,40,40,.92);color:#cfcfcf;border:1px solid #5f6368;border-radius:20px;padding:8px 16px;font-size:14px;cursor:pointer}
.skip.show{display:flex}
.skip:hover{color:#fff;border-color:#8a8f93}
@media (max-width:600px){
  .taunt{font-size:21px}.step{font-size:15px;bottom:12%}
}