/* チュートリアルの進行・演出順に対応する表示と導入を定義する。 */
.pico-how { background: #101729f5; border: 1px solid #647981; padding: 18px; border-radius: 5px; }
.title-info .pico-how p { padding: 0; border: 0; background: none; box-shadow: none; line-height: 1.8; }
.pico-how button { margin-top: 14px; min-height: 44px; padding: 9px 14px; border: 1px solid #e9c783; color: #fff0ce; background: #413520; }
/* TRAINING remains directly accessible before and after completion. */
.title-flight-actions { display: grid; gap: 10px; width: min(100%, 340px); }
.title-flight-actions .title-start { width: 100%; }
.title-training-launch { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 12px 17px; border: 1px solid #b49d70; background: #2b2b28; color: #f5dbab; text-align: left; }
.title-training-launch strong { font: bold 12px var(--utility); letter-spacing: .08em; }
.title-training-launch span { font: 11px 'Yu Gothic UI', sans-serif; }
.title-training-launch:hover { background: #3a3429; border-color: #f2d398; }
@media(max-width: 650px) { .title-flight-actions { width: min(100%, 300px); } }
@media(max-height: 520px) and (min-width: 651px) {
  .title-flight-actions { width: 100%; grid-template-columns: 1fr 1fr; gap: 8px; }
  .title-flight-actions .title-start { min-height: 48px; padding: 7px 12px; }
  .title-flight-actions .start-arrow { display: none; }
  .title-training-launch { flex-direction: column; justify-content: center; align-items: flex-start; gap: 3px; padding: 7px 12px; }
}
#map-training.map-training { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; margin-top: 10px; padding: 13px 14px; border: 1px solid #b49d70; border-radius: 3px; background: #2b2b28; color: #f5dbab; text-align: left; }
#map-training strong { font: bold 12px var(--utility); letter-spacing: .08em; }
#map-training span { font: 11px 'Yu Gothic UI', sans-serif; }
#map-training:hover { background: #3a3429; border-color: #f2d398; }
#practice-exit { color: #f1d194; border: 1px solid #766541; padding: 8px 12px; }
#practice-exit[hidden] { display: none; }
/* Parent groups define the movement and lock/strike timing. */
.briefing-demo .demo-pico-sprite { filter: drop-shadow(0 0 4px #f4c56580); }
.briefing-demo .demo-enemy-sprite { filter: hue-rotate(125deg); }
.briefing-demo .demo-player-execute { offset-rotate: 0deg; }
.briefing-demo .demo-route { stroke: #fff0be; }
.briefing-demo .demo-target-ring { stroke: #8debf1; }
.briefing-demo .demo-touch-draw-cursor { fill: #fff4d5; stroke: #f4c565; filter: drop-shadow(0 0 6px #f4c56570); }
.briefing-demo .demo-motion-lane { stroke: #f4c56570; }
.briefing-demo .demo-bullet { fill: #ffc3cf !important; stroke: #ed5478 !important; }
.briefing-demo .demo-execute-bullet-one,.briefing-demo .demo-execute-bullet-two { fill: #ffc3cf !important; stroke: #ed5478 !important; }
.briefing-begin { background: #f2d399; border-color: #ffe7b8; color: #282219; }
.briefing-begin:hover { background: #ffe7b8; }
.briefing-progress i.is-active { background: #f2d399; }
.demo-near-trace { fill: none; stroke: #ed547880; stroke-width: 2; stroke-dasharray: 5 6; }
.demo-near-reward { fill: none; stroke: #fff0be; stroke-width: 2; stroke-dasharray: 3 5; }
.demo-near-gauge { fill: #141e2a; stroke: #fff0be; }
.demo-near-charge { fill: #fff0be; }
.tutorial-prompt { color: #ffebbd; border-color: #eac57c; }
@media(max-width: 540px) {
  #map-training.map-training { min-height: 52px; }
  #practice-exit { font-size: 9px; padding: 6px 8px; }
}