/* T-312: 傾ける→動く→できた。札の中に大きい見本を置き、球を覆わない。 */
.tutorial-intro{padding:16px;gap:10px}
.tutorial-intro h2{margin:0;font-size:22px}
.tutorial-intro .tutorial-invitation{margin:0;text-align:center;font-weight:700;font-size:14px;color:#76502e}
.tutorial-trailer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tutorial-trailer article{display:flex;flex-direction:column;align-items:center;gap:4px;color:#70451f;font-size:12px}
.tutorial-trailer canvas{width:min(100%,96px);height:auto;aspect-ratio:144/112;border-radius:10px;box-shadow:0 2px #ac956a}
.tutorial-intro .tutorial-instruction{padding:10px;gap:7px}
.tutorial-intro .tutorial-hold{width:160px;max-height:120px;object-fit:contain;justify-self:center;margin-inline:auto}
.tutorial-intro .tutorial-instruction p{margin:0;font-size:12px;line-height:1.55}
.tutorial-intro .primary{min-height:46px;font-size:16px;padding:10px}
.tutorial-intro .tutorial-promise{margin:0;font-size:12px;line-height:1.6;text-align:center}
.tutorial-intro .tutorial-pointer-note{margin:0;font-size:10px;line-height:1.5}
.tutorial-intro #btn-tutorial-back{min-height:36px}
body[data-game-mode="tutorial"] .tutorial-lesson{position:relative;height:132px;padding:8px;overflow:visible}
.tutorial-lesson .tutorial-message,.tutorial-lesson.is-puzzle-course .tutorial-message{display:grid;height:100%;grid-template-columns:82px minmax(0,1fr);grid-template-rows:1fr;gap:9px;align-content:stretch;align-items:center}
.tutorial-lesson .tutorial-message[hidden]{display:none}
.tutorial-lesson .tutorial-example{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;align-self:center}
.tutorial-lesson .tutorial-example canvas{display:block;width:82px;height:64px;grid-column:auto;grid-row:auto;border-radius:8px}
.tutorial-lesson .tutorial-example button{min-height:32px;width:100%;padding:3px 0;border:0;border-radius:8px;background:#e7d7b8;color:#70451f;font:700 10px var(--sans);box-shadow:inset 0 1px #fff7e3;white-space:nowrap}
.tutorial-lesson .tutorial-text,.tutorial-lesson.is-puzzle-course .tutorial-text{display:flex;flex-direction:column;gap:4px;min-width:0;align-self:center}
.tutorial-lesson h2,.tutorial-lesson.is-puzzle-course h2{margin:0;font-size:15px;line-height:1.3;text-align:left;grid-column:auto;grid-row:auto}
.tutorial-lesson .tutorial-copy,.tutorial-lesson.is-puzzle-course .tutorial-copy{margin:0;font-size:12px;line-height:1.4;grid-column:auto;grid-row:auto}
.tutorial-lesson .tutorial-hint,.tutorial-lesson.is-puzzle-course .tutorial-hint{margin:0;font-size:12px;line-height:1.45;font-weight:800;color:#67437a;grid-column:auto;grid-row:auto}
.tutorial-lesson .tutorial-hint{display:flex;align-items:flex-start;gap:4px}
.tutorial-direction{flex:0 0 16px;text-align:center;background:#e7d9eb;border-radius:5px;font-size:15px;line-height:19px}
.tutorial-direction[hidden]{display:none}
.tutorial-lesson:has(.tutorial-review:not([hidden])) .tutorial-text{padding-bottom:20px}
.tutorial-lesson .tutorial-review{position:absolute;bottom:4px;right:8px;display:flex;align-items:center;gap:5px;font-size:10px;color:#796346}
.tutorial-lesson .tutorial-review[hidden]{display:none}
.tutorial-review button{min-height:28px;min-width:32px;padding:0;border:1px solid #bda27b;border-radius:8px;background:#fff5df;color:#70451f;font-size:19px;font-weight:800}
.tutorial-review button:disabled{opacity:.45;filter:grayscale(1)}
.tutorial-lesson .tutorial-feedback{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);margin:0;padding:2px 10px;border:1px solid #bca167;border-radius:999px;background:#fff0be;color:#496338;font-size:12px;font-weight:800;white-space:nowrap;pointer-events:none;max-width:100%}
.tutorial-lesson button:focus-visible{outline:2px solid #7d598d;outline-offset:2px}
@media(prefers-reduced-motion:no-preference){.tutorial-complete h2{animation:tutorial-done .35s ease-out}@keyframes tutorial-done{from{transform:scale(.95);opacity:.6}to{transform:scale(1);opacity:1}}}
@media(max-height:720px){.tutorial-intro{padding:12px;gap:6px}.tutorial-intro .tutorial-hold{width:136px;max-height:100px}.tutorial-trailer canvas{width:76px}.tutorial-intro .tutorial-instruction{padding:7px;gap:5px}}
@media(max-width:360px){.tutorial-lesson .tutorial-message,.tutorial-lesson.is-puzzle-course .tutorial-message{grid-template-columns:70px minmax(0,1fr);gap:7px}.tutorial-lesson .tutorial-example canvas{width:70px;height:55px}.tutorial-lesson h2,.tutorial-lesson.is-puzzle-course h2{font-size:14px}.tutorial-lesson .tutorial-text{gap:3px}.tutorial-trailer{gap:6px}}