.tutorial-scene{position:absolute;inset:0;z-index:15;display:flex;flex-direction:column;padding:calc(var(--safe-top) + 14px) 23px calc(var(--safe-bottom) + 18px);background:radial-gradient(ellipse at 50% 30%,#c8b99516,transparent 55%),linear-gradient(#1413106b,#11110fc9)}
.tutorial-header{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:30px;flex-shrink:0}
.tutorial-chapter{font-size:11px;letter-spacing:.1em;color:#c9b58d}
.tutorial-skip{font-size:10px;color:#bcb6a9;padding:8px 0 8px 8px}
.tutorial-main{display:flex;flex:1;min-height:0;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:8px 0;gap:9px}
.tutorial-title{font-size:clamp(18px,5.7cqw,29px);font-weight:650;line-height:1.35;letter-spacing:.02em;text-wrap:balance;text-shadow:0 3px 10px #000}
.tutorial-feature-card{width:min(72cqw,calc((100dvh - var(--safe-top) - var(--safe-bottom) - 294px)/1.5),310px)!important;flex-shrink:1;min-height:0;filter:drop-shadow(0 13px 17px #0009)!important;animation:tutorial-card-in .45s ease both}
.tutorial-feature-card .cost-number,.tutorial-feature-card [data-stat=cost]{opacity:.85}
.tutorial-mini-deck{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:min(34vh,240px);margin:9px 0 2px}
.tutorial-mini-deck .game-card{width:min(35cqw,150px);margin:0 -9px;transform:rotate(calc((var(--fan-index) - (var(--fan-total) - 1)/2)*10deg)) translateY(calc((var(--fan-index) - (var(--fan-total) - 1)/2)*3px));filter:drop-shadow(0 14px 16px #0008)}
.tutorial-deck-size{color:#ccc5b6;font-size:12px}

/* One dialogue system: a matte framed profile, its nameplate, and flowing text. */
.tutorial-dialogue,.tutorial-coach{display:flow-root;position:relative;padding:13px 14px;border:1px solid #c2a568a6;border-radius:15px;background:linear-gradient(135deg,#292724f5,#121211fa 66%);box-shadow:0 8px 24px #0005,inset 0 0 0 3px #08080866,inset 0 1px #fff4d526}
.game-shell :is(.tutorial-dialogue,.tutorial-coach){border-image:none;background-color:#171614;color:#f5f2eb;box-shadow:0 8px 24px #0005,inset 0 0 0 3px #08080866,inset 0 1px #fff4d526}
.tutorial-dialogue{flex-shrink:0}
.tutorial-words,.tutorial-coach-words{display:block;min-width:0}
.tutorial-words:after,.tutorial-coach-words:after{content:'';display:block;clear:both}
.tutorial-profile{position:relative;float:left;width:64px;height:83px;margin:1px 13px 7px 0;isolation:isolate;user-select:none;-webkit-user-select:none}
.tutorial-portrait{--face-x:39.2%;--face-y:25.4%;position:absolute;inset:0 1px 8px;overflow:hidden;border:2px solid #b59a65;border-radius:15px 15px 10px 10px;background:#171614;box-shadow:0 3px 8px #0009,0 0 0 1px #161513,inset 0 0 0 1px #e8d4a15c}
.tutorial-portrait:after{content:'';position:absolute;inset:0;pointer-events:none;border:1px solid #d5ba8266;border-radius:12px 12px 7px 7px;background:linear-gradient(transparent 66%,#11100e66);box-shadow:inset 0 1px 3px #fff4d526}
.tutorial-portrait[data-speaker=b1-002]{--face-x:49.3%;--face-y:24.5%}
.tutorial-portrait[data-speaker=tutorial-soli-guide]{--face-x:55.5%;--face-y:20.6%}
.tutorial-portrait .tutorial-avatar{position:absolute;left:50%;top:50%;width:270%;height:auto;max-width:none;object-fit:cover;object-position:var(--face-x) var(--face-y);transform:translate(calc(-1 * var(--face-x)),calc(-1 * var(--face-y)));border:0;border-radius:0;pointer-events:none;-webkit-user-drag:none}
.tutorial-speaker{position:absolute;z-index:1;left:-3px;right:-3px;bottom:0;display:block;margin:0;padding:4px 2px 5px;border:1px solid #c3a46f9c;border-radius:5px 5px 9px 9px;background:linear-gradient(#39342a,#1d1b17);box-shadow:0 2px 4px #0008,inset 0 1px #fff3cf24;font-size:12px;font-weight:650;line-height:1.1;letter-spacing:.04em;text-align:center;color:#f0dcac;text-shadow:0 1px #100f0d;white-space:nowrap}
.tutorial-words p,.tutorial-coach-copy{margin:0;font-size:16px;line-height:1.6;color:#f5f2eb;word-break:keep-all;overflow-wrap:break-word;text-align:left}
.tutorial-spoken-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.tutorial-type-layout{display:inline;visibility:hidden}
.tutorial-type-ink{display:inline}

.tutorial-footer{flex-shrink:0;margin-top:15px;display:grid;gap:10px}
.tutorial-footer .primary-action,.tutorial-footer .secondary-action{min-height:49px;width:100%;font-size:14px}

.tutorial-coach-layer{position:absolute;inset:0;z-index:36;pointer-events:none}
.tutorial-coach{position:absolute;left:16px;right:16px;top:calc(var(--safe-top) + 53px);padding:11px 12px;display:flex;flex-direction:column;overflow:hidden;transition:opacity .18s,transform .18s}
.tutorial-coach-words{min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;pointer-events:auto;scrollbar-width:thin}
.tutorial-profile.is-compact{width:56px;height:74px;margin-right:11px;margin-bottom:6px}
.tutorial-coach-fold{position:relative;float:right;pointer-events:auto;margin:-2px -3px 5px 7px;padding:5px 4px;color:#d6cfbf;font-size:11px;line-height:1.2;border-radius:5px}

.tutorial-coach.is-collapsed{left:auto;width:63px;min-height:38px;padding:0}
.tutorial-coach.is-collapsed .tutorial-profile,.tutorial-coach.is-collapsed .tutorial-coach-copy,.tutorial-coach.is-collapsed .tutorial-guide-next{display:none}
.tutorial-coach.is-collapsed .tutorial-coach-fold{float:none;display:block;width:100%;min-height:38px;margin:0;text-align:center;padding:8px}
.tutorial-coach-layer.is-quiet .tutorial-coach{opacity:0;transform:translateY(-8px)}
.tutorial-coach-layer.is-quiet .tutorial-hand{opacity:0}
.tutorial-action-guide{position:absolute;inset:0;z-index:59;pointer-events:none}
body:has(dialog[open]) .tutorial-action-guide{visibility:hidden}
.tutorial-hand{pointer-events:none;position:absolute;width:35px;height:42px;filter:drop-shadow(0 2px 3px #0009);transform-origin:42.3913% 6.9816%;animation:tutorial-tap 1.25s ease-in-out infinite}
.tutorial-hand svg{width:100%;height:100%}
.tutorial-hand[hidden]{display:none}
.tutorial-coach-layer.is-opening-guide{pointer-events:auto;background:#11100e12}
.is-opening-guide .tutorial-coach-fold{display:none}
.tutorial-coach-layer.is-quiet{visibility:hidden;pointer-events:none}
.tutorial-guide-next{pointer-events:auto;display:block;clear:both;flex-shrink:0;align-self:flex-end;margin:9px 0 0 auto;min-height:36px;padding:6px 15px;border-radius:7px;border:1px solid #cbb68080;background:#9c87502e;color:#efdfb7;font-size:12px;font-weight:600}
.game-shell .tutorial-guide-next{border-image:none;border-color:#bda16a9c;background:linear-gradient(#3b362b,#201e19);color:#f6e7bf;box-shadow:inset 0 1px #fff1c324,0 2px 3px #0005;text-shadow:none}


.tutorial-cost-scene .tutorial-title{max-width:100%;text-wrap:balance}
.tutorial-scene:is(.tutorial-cost-scene,.tutorial-cost-exercise){background:radial-gradient(ellipse at 50% 30%,#c7aa7114,transparent 55%),linear-gradient(#171614c9,#080807ed);color:#f5f2eb}
.tutorial-scene:is(.tutorial-cost-scene,.tutorial-cost-exercise) .tutorial-skip{color:#d6cfbf}
.tutorial-cost-cards{display:flex;gap:14px;justify-content:center;align-items:center;width:100%;min-height:0}
.tutorial-cost-cards>.game-card{width:min(31cqw,calc((100dvh - var(--safe-top) - var(--safe-bottom) - 400px)/1.5),142px);flex:none}
.tutorial-cost-cards>.game-card:only-child{width:min(40cqw,calc((100dvh - var(--safe-top) - var(--safe-bottom) - 375px)/1.5),180px)}

@keyframes tutorial-tap{0%,100%{transform:translateY(0) rotate(-12deg)}45%{transform:translateY(3px) rotate(-12deg) scale(.94)}}
@keyframes tutorial-card-in{from{opacity:0;translate:0 14px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@media(max-height:700px){
 .tutorial-scene{padding:calc(var(--safe-top) + 10px) 17px calc(var(--safe-bottom) + 14px)}
 .tutorial-header{min-height:25px}.tutorial-main{gap:5px}.tutorial-title{font-size:20px}
 .tutorial-mini-deck{height:25vh}.tutorial-mini-deck .game-card{width:28cqw;max-width:116px}
 .tutorial-dialogue{padding:11px 12px}.tutorial-profile{width:58px;height:77px;margin-right:11px;margin-bottom:6px}
 .tutorial-coach{padding:10px 11px;left:14px;right:14px}.tutorial-profile.is-compact{width:54px;height:72px}
 .tutorial-footer{margin-top:10px;gap:5px}.tutorial-guide-next{margin-top:7px}
}
@media(prefers-reduced-motion:reduce){.tutorial-hand,.tutorial-feature-card{animation:none}}

.tutorial-chapter-transition{position:absolute;inset:0;z-index:58;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;pointer-events:auto;background:radial-gradient(ellipse at 50% 48%,#302c25f5,#11100e 70%);color:#efdfb7;isolation:isolate}
.tutorial-chapter-transition:before,.tutorial-chapter-transition:after{content:'';width:56%;max-width:280px;height:1px;background:linear-gradient(90deg,transparent,#cbb178a6,transparent);box-shadow:0 0 14px #d8bf7933}
.tutorial-chapter-transition>span{margin-top:10px;font-size:12px;letter-spacing:.12em;color:#c4b58f}
.tutorial-chapter-transition>strong{margin-bottom:16px;padding-left:.14em;font-size:clamp(38px,12cqw,60px);font-weight:700;line-height:1.35;letter-spacing:.14em;text-shadow:0 3px 2px #0a0907,0 0 36px #dec38835}
.tutorial-result-panel{position:absolute;z-index:3;left:20px;right:20px;bottom:calc(var(--safe-bottom) + 72px);display:grid;gap:12px;max-height:48%;animation:tutorial-card-in .2s ease-out}
.tutorial-result-panel>.tutorial-dialogue{min-height:0;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain}
.tutorial-result-panel>.primary-action{min-height:49px;width:100%}
.has-tutorial-explanation .victory-medallion,.has-tutorial-explanation .victory-rays{top:29%;transition:top .22s ease-out}
.has-tutorial-explanation .victory-words{top:calc(29% + 65px);transition:top .22s ease-out}
@media(max-height:650px){.tutorial-result-panel{left:16px;right:16px;bottom:calc(var(--safe-bottom) + 62px);gap:9px}.has-tutorial-explanation .victory-medallion,.has-tutorial-explanation .victory-rays{top:25%}.has-tutorial-explanation .victory-words{top:calc(25% + 52px)}}
@media(prefers-reduced-motion:reduce){.tutorial-result-panel{animation:none}.has-tutorial-explanation .victory-medallion,.has-tutorial-explanation .victory-rays,.has-tutorial-explanation .victory-words{transition:none}}