/* Compact lesson card, below the upper-left game label. */
#tutorial {
  position: fixed; top: max(88px, env(safe-area-inset-top)); left: max(20px, env(safe-area-inset-left));
  z-index: 60; pointer-events: none; box-sizing: border-box;
  width: min(320px, calc(100vw - 40px)); padding: 16px;
  border: 1px solid #ffffff24; border-radius: 8px;
  background: rgba(20, 25, 23, .94); color: #f2f5f2;
  font-family: 'Segoe UI', system-ui, sans-serif; text-align: left;
}
#tutorial[hidden], #tut-keys[hidden], #tut-demo[hidden] { display: none; }
#tutorial.step-in { animation: tut-pop .2s ease; }
@keyframes tut-pop { from { opacity: 0; transform: translateY(4px); } }
#tut-head { display: flex; justify-content: space-between; color: #a9b5ad; font-size: 12px; }
#tut-head b { font-weight: 400; }
#tut-title { margin: 9px 0 6px; font-size: 20px; font-weight: 600; line-height: 1.2; }
#tut-hint { color: #d0d8d2; font-size: 14px; line-height: 1.5; }
#tut-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
#tut-keys kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding: 0 7px; box-sizing: border-box;
  border: 1px solid #647168; border-radius: 4px; background: #303a33;
  color: #f2f5f2; font: 600 12px ui-monospace, monospace;
}
#tut-keys kbd.demo { border-color: #b8ff87; }
#tut-keys kbd.pressed { background: #b8ff87; border-color: #b8ff87; color: #19291b; }
/* The instruction already explains the keys; avoid a second caption. */
#tut-keys span, #tut-bar { display: none; }
#tut-demo { margin-top: 10px; color: #a9b5ad; font-size: 12px; }
#tutorial.frozen #tut-head, #tutorial.frozen #tut-title { color: #f1d199; }
#tutorial.done #tut-title { color: #b8ff87; }
#tut-cinema { position: fixed; inset: 0; border-top: 6vh solid #101411; border-bottom: 6vh solid #101411; z-index: 55; pointer-events: none; }
#tut-cinema[hidden] { display: none; }
#tut-complete { width: min(360px, calc(100vw - 48px)); box-sizing: border-box; padding: 28px; border: 1px solid #ffffff30; border-radius: 12px; background: #141917; color: #f2f5f2; text-align: center; font-family: 'Segoe UI', system-ui, sans-serif; }
#tut-complete::backdrop { background: #07100bc9; }
#tut-complete h2 { margin: 0 0 12px; font-size: 24px; }
#tut-complete p { margin: 0 0 24px; color: #bcc9bf; line-height: 1.5; }
#tut-back-menu { width: 100%; padding: 12px; border: 0; border-radius: 6px; background: #b8ff87; color: #19291b; cursor: pointer; font: 600 15px 'Segoe UI', system-ui, sans-serif; }
#tut-back-menu:focus-visible { outline: 2px solid white; outline-offset: 4px; }
#tut-continue { width: 100%; padding: 12px; margin-bottom: 10px; border: 1px solid #b8ff87; border-radius: 6px; background: #26352a; color: #b8ff87; cursor: pointer; font: 600 15px 'Segoe UI', system-ui, sans-serif; }
#tut-continue:focus-visible { outline: 2px solid white; outline-offset: 4px; }
@media (max-width: 700px) {
  #tutorial { top: 72px; left: 12px; width: min(290px, calc(100vw - 24px)); padding: 12px; }
  #tut-title { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { #tutorial.step-in { animation: none; } }

/* UI animation continues while the game simulation is frozen. */
#tut-dodge-prompts { position: fixed; inset: 0; z-index: 61; pointer-events: none; font-family: 'Segoe UI', system-ui, sans-serif; }
#tut-dodge-prompts[hidden] { display: none; }
.tut-dodge-side { position: absolute; top: 50%; transform: translateY(-50%); padding: 16px 20px; border-radius: 8px; background: #141917eb; color: #f2f5f2; text-align: center; }
.tut-dodge-side.left { left: max(24px, env(safe-area-inset-left)); }
.tut-dodge-side.right { right: max(24px, env(safe-area-inset-right)); }
.tut-double-keys { display: flex; justify-content: center; gap: 10px; margin-bottom: 14px; }
.tut-double-keys kbd { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #829285; border-bottom: 5px solid #647168; border-radius: 7px; background: #303a33; color: #f2f5f2; font: 700 25px ui-monospace, monospace; animation: tut-key-tap 1.4s infinite; }
.tut-dodge-side span { display: block; font-size: 15px; font-weight: 600; }
.tut-dodge-side small { display: block; margin-top: 5px; color: #b8ff87; font-size: 12px; }
.tut-dodge-side.pressed { outline: 2px solid #b8ff87; }
@keyframes tut-key-tap {
  0%, 14%, 28%, 100% { transform: translateY(0) scale(1); background: #303a33; color: #f2f5f2; box-shadow: none; }
  5%, 10%, 19%, 24% { transform: translateY(5px) scale(.94); background: #b8ff87; color: #19291b; box-shadow: 0 0 18px #b8ff8740; }
}
@media (max-width: 700px) {
  .tut-dodge-side { padding: 12px; }
  .tut-dodge-side.left { left: 12px; }
  .tut-dodge-side.right { right: 12px; }
  .tut-double-keys { gap: 6px; }
  .tut-double-keys kbd { width: 36px; height: 40px; font-size: 20px; }
  .tut-dodge-side span { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .tut-double-keys kbd { animation: none; border-color: #b8ff87; }
}