.tutorial-page{max-width:560px;margin:auto;padding:12px 8px 24px}.tutorial-heading{display:flex;justify-content:space-between;color:#bea06a;font-size:12px;letter-spacing:.06em;border-bottom:1px solid #54402c;padding:0 6px 10px}.tutorial-dialogue{display:grid;grid-template-columns:88px minmax(0,1fr);gap:10px;padding:16px 4px;align-items:center;background:radial-gradient(ellipse at 5% 65%,#80644326,transparent 65%)}.tutorial-mentor{width:88px;height:160px;object-fit:cover;object-position:50% 20%;mask-image:linear-gradient(#000 75%,transparent)}.tutorial-voice small{color:#b18e53;font-size:11px;letter-spacing:.1em}.tutorial-voice h2{font-size:21px;line-height:1.1;margin:5px 0 10px;color:#e4c78f}.tutorial-voice p{font:14px/1.45 var(--font-body,sans-serif);color:#d1c3b3;margin:0}.tutorial-task{display:grid;gap:12px;position:relative;border-top:1px solid #6d513d;padding-top:15px}.tutorial-task>.action{width:100%}.tutorial-item{display:flex;align-items:center;gap:12px;background:linear-gradient(110deg,#3c251e,#20151a);color:#e5d4b7;border:1px solid #755a34;padding:10px;text-align:left;min-height:70px;cursor:pointer;font:inherit}.tutorial-item:hover{border-color:#d4ae63}.tutorial-item span{flex:1}.tutorial-item small{font:12px var(--font-body,sans-serif);color:#d9b16f}.tutorial-item-icon{width:56px;height:56px;object-fit:contain}.tutorial-page>.action{display:block;margin:20px auto 0}.tutorial-mission-tabs{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:#a49788}.tutorial-mission-tabs .done{color:#d0ac65}.tutorial-fighters{display:grid;grid-template-columns:1fr 1fr;gap:20px}.tutorial-fighter{min-width:0;text-align:center}.tutorial-fighter h3{font-size:19px;margin:0 0 8px}.tutorial-fighter-art{display:block;width:100%;height:160px;object-fit:cover;object-position:center 18%;border:1px solid #84683c;background:#160e12}.tutorial-fighter-stat{margin-top:9px}.tutorial-fighter-stat small{font:12px var(--font-body,sans-serif)}.tutorial-mana .meter-fill{background:linear-gradient(#4e7b93,#254c65)}.tutorial-hit{display:flex;align-items:center;justify-content:center;gap:12px;min-height:45px;margin:12px 0;color:#e6bf79}.tutorial-hit .action-caption,.tutorial-hit .critical-caption{position:static;transform:none;inset:auto}.tutorial-battle-explanation{padding:12px;background:#33201880;border:1px solid #765735}.tutorial-battle-explanation h3{font-size:19px;margin:0 0 6px}.tutorial-battle-explanation p{font:14px/1.45 var(--font-body,sans-serif);margin:0;color:#d1c3b3}.tutorial-checks{color:#d2ae70;text-align:center}.is-tutorial #promotions{display:none!important}.is-tutorial .tutorial-task .mission-detail{margin:0}.tutorial-page button:focus-visible{outline:2px solid #e2bd73;outline-offset:3px}
@media(max-width:350px){.tutorial-dialogue{grid-template-columns:66px minmax(0,1fr)}.tutorial-mentor{width:66px;height:145px}.tutorial-voice p{font-size:13px}.tutorial-fighters{gap:12px}.tutorial-fighter-art{height:125px}}
#scarlet-bag-v30 .tutorial-mana .meter-fill{background:linear-gradient(#4e7b93,#254c65)}
#scarlet-bag-v30 .tutorial-hit :is(.action-caption,.critical-caption){position:static;inset:auto;translate:none;transform:none;animation:none}
.tutorial-in-battle .tutorial-dialogue{grid-template-columns:1fr;padding:12px 4px}
.tutorial-in-battle .tutorial-dialogue .tutorial-mentor,.tutorial-in-battle .tutorial-voice p{display:none}
.tutorial-in-battle .tutorial-voice h2{margin-bottom:0}
.tutorial-in-battle .tutorial-task>.action{position:sticky;bottom:8px;z-index:4}
#scarlet-bag-v30 .tutorial-in-battle .tutorial-dialogue .tutorial-mentor{display:none}
#scarlet-bag-v30 .tutorial-arena .boss-turn-card{position:relative;inset:auto;transform:none;margin:12px 0;width:100%;min-height:135px;height:135px;opacity:1;pointer-events:none}
#scarlet-bag-v30 .tutorial-arena .boss-turn-card .action-caption{top:calc(100% + 1px)}
#scarlet-bag-v30 .tutorial-in-battle .tutorial-fighter-art{height:112px}
/* Reserve the portrait's overhang inside the measured guide, so the highlighted
   native control stays exposed even when the dialogue needs to scroll. */
#scarlet-bag-v30.is-tutorial .overlay.fullscreen{background:#170e14;opacity:1}
#scarlet-bag-v30 .tutorial-guide{position:absolute;z-index:40;left:10px;right:10px;top:25%;margin:0;padding:0;overflow:auto;overscroll-behavior:contain;border:0;background:none;isolation:isolate}
#scarlet-bag-v30 .tutorial-guide.is-city-intro{left:4px;right:4px}
#scarlet-bag-v30 .tutorial-guide.is-city-intro .tutorial-guide-card{min-height:var(--tutorial-card-min-height,290px)}
#scarlet-bag-v30 .tutorial-guide-scene{position:relative;padding-top:44px;overflow:hidden}
#scarlet-bag-v30 .tutorial-guide-card{min-height:290px;padding:12px 10px 16px calc(42% - 8px);box-shadow:0 12px 28px #0005}
#scarlet-bag-v30 .tutorial-portrait{position:absolute;z-index:1;inset:0 auto 9px 0;width:41%;overflow:hidden;pointer-events:none}
#scarlet-bag-v30 .tutorial-guide .tutorial-mentor{display:block;width:100%;height:140%;max-width:none;object-fit:cover;object-position:50% 0;mask-image:none}
#scarlet-bag-v30 .tutorial-guide .tutorial-voice{position:relative;z-index:2;min-width:0}
#scarlet-bag-v30 .tutorial-guide-heading{margin:0 0 12px;padding:0;border:0;text-align:left}
#scarlet-bag-v30 .tutorial-guide-eyebrow{display:flex;gap:8px;align-items:baseline;margin-bottom:9px;color:#b89660}
#scarlet-bag-v30 .tutorial-guide-chapter{flex:1;font:10px/1.4 var(--sc-font-ui);text-transform:uppercase;letter-spacing:.12em}
#scarlet-bag-v30 .tutorial-guide-title{margin:0;font:23px/1.2 var(--sc-font-display);color:#ead2a9}
#scarlet-bag-v30 .tutorial-guide .tutorial-quote{margin:0 0 12px;padding:0;border:0;font:17px/1.4 var(--sc-font-display);color:#e2c7a6}
#scarlet-bag-v30 .tutorial-guide .tutorial-instruction{margin:0;font:13px/1.45 var(--sc-font-ui);color:#d0c1b1}
#scarlet-bag-v30 .tutorial-dialogue-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:18px}
#scarlet-bag-v30 .tutorial-dialogue-controls:empty{display:none}
#scarlet-bag-v30 .tutorial-dialogue-controls .action{flex:1 1 100%;width:100%;min-width:0;min-height:46px;padding:11px 18px;font:15px/1.3 var(--sc-font-display)}
/* Emphasize the existing artwork, without drawing another box around it. */
#scarlet-bag-v30 .tutorial-target{outline:none!important;box-shadow:none;filter:none;animation:none}
#scarlet-bag-v30 .action.tutorial-target{filter:none;animation:none;color:#ffe1a1}
#scarlet-bag-v30 .action.tutorial-target::before{filter:brightness(1.25);animation:tutorial-beacon 2.8s ease-in-out infinite}
#scarlet-bag-v30 .tutorial-target:focus-visible{outline:1px solid #eacb8c!important;outline-offset:2px}
@keyframes tutorial-beacon{50%{filter:brightness(1.04)}}
@media(prefers-reduced-motion:reduce){#scarlet-bag-v30 .tutorial-target,#scarlet-bag-v30 .action.tutorial-target::before{animation:none}}
@media(max-width:350px){
 #scarlet-bag-v30 .tutorial-guide{left:6px;right:6px}
 #scarlet-bag-v30 .tutorial-guide-card{padding:9px 4px 12px calc(39% - 8px);min-height:270px}
 #scarlet-bag-v30 .tutorial-portrait{width:38%}
 #scarlet-bag-v30 .tutorial-guide-title{font-size:21px}
 #scarlet-bag-v30 .tutorial-guide .tutorial-quote{font-size:16px}
}

/* A brass diamond points at the native control without changing its bounds. */
#scarlet-bag-v30 .tutorial-pointer{position:absolute;z-index:80;width:22px;height:22px;transform:translate(-50%,-50%) rotate(var(--pointer-turn,0deg));pointer-events:none;filter:drop-shadow(0 2px 3px #000);animation:tutorial-pointer-glow 2s ease-in-out infinite}
#scarlet-bag-v30 .tutorial-pointer::before{content:'';position:absolute;inset:3px;transform:rotate(45deg);border:1px solid #e2bd79;background:linear-gradient(135deg,#705435,#23151b);box-shadow:0 0 0 2px #201218,0 0 9px #e0b15b66}
#scarlet-bag-v30 .tutorial-pointer::after{content:'';position:absolute;inset:7px 6px 7px 8px;background:#f6d898;clip-path:polygon(0 0,100% 50%,0 100%,25% 50%)}
#scarlet-bag-v30 .tutorial-pointer[data-direction=down]{--pointer-turn:90deg}
#scarlet-bag-v30 .tutorial-pointer[data-direction=left]{--pointer-turn:180deg}
#scarlet-bag-v30 .tutorial-pointer[data-direction=up]{--pointer-turn:-90deg}
@keyframes tutorial-pointer-glow{50%{filter:drop-shadow(0 0 5px #d7a453)}}
@media(prefers-reduced-motion:reduce){#scarlet-bag-v30 .tutorial-pointer{animation:none}}
#scarlet-bag-v30 .mission-casket-dialogue{display:grid;grid-template-columns:80px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-top:1px solid #a47c3d40}
#scarlet-bag-v30 .mission-casket-mentor{width:80px;height:175px;object-fit:cover;object-position:center top;mask-image:linear-gradient(#000 75%,transparent)}
#scarlet-bag-v30 .mission-casket-dialogue h4{margin:0 0 8px;font:20px/1.2 var(--sc-font-display);color:#e4c78f}
#scarlet-bag-v30 .mission-casket-quote{margin:0 0 9px;font:15px/1.4 var(--sc-font-display);color:#e2c7a6}
#scarlet-bag-v30 .mission-casket-instruction{margin:0;font:12px/1.5 var(--sc-font-ui);color:#bfae9b}