/* Brief recorded introduction; each speech card displays exactly the current recording. */
#modal.intro-dialog.voice-tutorial{width:min(620px,calc(100vw - 28px));max-height:calc(100dvh - 28px);padding:0;overflow:auto;border:1px solid #a7834d;border-radius:20px;background:radial-gradient(ellipse at 50% 0,#59422a55,transparent 65%),linear-gradient(145deg,#28291d,#15190f);box-shadow:0 24px 100px #000b,inset 0 1px #ffedb826}
#modal.intro-dialog.voice-tutorial::backdrop{background:#060803bd;backdrop-filter:blur(12px) brightness(.5)}
#modal.intro-dialog.voice-tutorial #modalContent{display:block;min-height:0}
.tutorial-portrait{height:230px;position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid #a7834d45;background:radial-gradient(ellipse at 50% 45%,#a5844e70,transparent 67%)}
.tutorial-portrait::before{content:"";position:absolute;width:250px;height:250px;border:1px solid #d1af5f38;border-radius:50%;left:50%;top:25px;transform:translateX(-50%);box-shadow:0 0 0 22px #b998513d,0 0 0 46px #b998510c}
.tutorial-portrait img{position:absolute;z-index:1;left:50%;top:-14px;transform:translateX(-50%);height:285px;width:auto;max-width:none;max-height:none;filter:contrast(1.06) drop-shadow(0 12px 20px #0008);pointer-events:none}
.tutorial-portrait::after{content:"";position:absolute;z-index:2;inset:auto 0 0;height:45px;background:linear-gradient(transparent,#202316);pointer-events:none}
.tutorial-voice{position:absolute;z-index:3;bottom:13px;left:50%;transform:translateX(-50%);height:30px;display:flex;align-items:center;justify-content:center;gap:5px;padding:0 15px;border:1px solid #c9ad674d;border-radius:20px;background:#11170dc9;box-shadow:0 3px 15px #0007}
.tutorial-voice i{display:block;width:4px;height:6px;border-radius:3px;background:#e3cb89;transform:scaleY(.55);opacity:.55}
body.speaking .voice-tutorial:not(.tutorial-waiting) .tutorial-voice i{height:17px;opacity:1;animation:tutorial-talk .55s ease-in-out infinite alternate}
body.speaking .voice-tutorial .tutorial-voice i:nth-child(2){animation-delay:-.18s}body.speaking .voice-tutorial .tutorial-voice i:nth-child(3){animation-delay:-.37s}body.speaking .voice-tutorial .tutorial-voice i:nth-child(4){animation-delay:-.1s}body.speaking .voice-tutorial .tutorial-voice i:nth-child(5){animation-delay:-.26s}
@keyframes tutorial-talk{to{transform:scaleY(1.1)}}
.tutorial-controls{padding:22px 26px 16px;text-align:center}
.tutorial-speech{position:relative;margin-bottom:19px;padding:16px 20px;text-align:left;border:1px solid #a78e4e55;border-radius:12px;background:linear-gradient(130deg,#343523a8,#161c11cc);box-shadow:inset 0 1px #ead49c0d,0 6px 18px #0002}
.tutorial-speaker{display:block;margin-bottom:8px;color:#d1b879;font-size:10px;font-weight:800;letter-spacing:2px}
#modal.voice-tutorial #introQuote{min-height:0;margin:0;color:#f0e4c8;font-size:17px;line-height:1.5;overflow-wrap:break-word}
.tutorial-progress{display:flex;justify-content:center;align-items:center;gap:10px;height:10px;margin-bottom:19px}
.tutorial-progress i{display:block;width:7px;height:7px;border-radius:50%;background:#5e6248;box-shadow:inset 0 1px #0006}
.tutorial-progress i.done{background:#ae9d63}
.tutorial-progress i.current{width:24px;border-radius:6px;background:#e4ca86;box-shadow:0 0 14px #dfbb5c4d}
.tutorial-buttons{display:grid;grid-template-columns:48px 48px minmax(0,1fr);gap:10px}
#modal.voice-tutorial .tutorial-buttons button{display:flex;align-items:center;justify-content:center;gap:14px;min-width:0;min-height:50px;padding:10px 15px;border-radius:10px;font-size:16px;font-weight:800;transition:filter .15s,transform .15s;touch-action:manipulation}
#modal.voice-tutorial .tutorial-buttons button.primary{border-color:#debc75;background:linear-gradient(150deg,#eed79e,#cba45c);color:#292010;box-shadow:0 4px 0 #75532d,inset 0 1px #fff9}
#modal.voice-tutorial .tutorial-buttons button.secondary{border-color:#7c7752;background:linear-gradient(145deg,#3a3f2c,#272d20);color:#e4d7ad;box-shadow:0 4px 0 #151b10,inset 0 1px #fff2}
#modal.voice-tutorial .tutorial-buttons .tutorial-icon{padding:10px}
.tutorial-buttons svg{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#modal.voice-tutorial .tutorial-buttons button:hover:not(:disabled){filter:brightness(1.1)}
#modal.voice-tutorial .tutorial-buttons button:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #151b10}
#modal.voice-tutorial .tutorial-buttons button:disabled{opacity:.3;box-shadow:none;cursor:not-allowed}
#modal.voice-tutorial button:focus-visible{outline:2px solid #fff0bc;outline-offset:4px}
#modal .tutorial-skip{display:block;min-height:44px;margin:12px auto 0;padding:8px 14px;color:#b2b79a;font-size:12px;letter-spacing:.3px;border-color:transparent;background:transparent}
.tutorial-status{display:block;max-width:100%;margin-top:6px;color:#e2bd8b;font-size:12px;line-height:1.4;overflow-wrap:break-word}
.tutorial-status:empty{display:none}
@media(max-width:420px){
  .tutorial-portrait{height:180px}.tutorial-portrait img{height:230px;top:-12px}
  .tutorial-controls{padding:18px 14px 12px}.tutorial-speech{padding:13px 14px;margin-bottom:15px}
  #modal.voice-tutorial #introQuote{font-size:15px;line-height:1.45}
  .tutorial-buttons{grid-template-columns:46px 46px minmax(0,1fr);gap:8px}.tutorial-progress{margin-bottom:15px}
}
@media(max-height:620px) and (max-width:420px){
  .tutorial-portrait{height:120px}.tutorial-portrait img{height:180px}
  .tutorial-speaker{display:none}.tutorial-speech{padding:10px 11px;margin-bottom:12px}
  .tutorial-controls{padding:14px 14px 10px}.tutorial-progress{margin-bottom:12px}
  #modal .tutorial-skip{margin-top:8px}
}
@media(max-height:520px){
  .tutorial-portrait{height:68px}.tutorial-portrait img{height:155px;top:-17px}
  .tutorial-portrait::before{width:180px;height:180px;top:12px}.tutorial-voice{bottom:7px;height:24px}
  .tutorial-controls{padding:12px 18px 10px}.tutorial-speaker{display:none}
  .tutorial-speech{padding:10px 12px;margin-bottom:12px}
  #modal.voice-tutorial #introQuote{font-size:15px;line-height:1.4}
  .tutorial-progress{margin-bottom:10px}.tutorial-progress i{height:6px}
  #modal .tutorial-skip{margin-top:6px}.tutorial-status{margin-top:4px}
}
@media(prefers-reduced-motion:reduce){body.speaking .voice-tutorial .tutorial-voice i{animation:none;transform:scaleY(1)}#modal.voice-tutorial .tutorial-buttons button{transition:none}}