/* Feature tutorial player */
.tutorial-dialog{width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: clamp(0.7rem, 3vw, 2rem); overflow-y: auto; border: 0; background: rgba(1, 8, 4, 0.94); color: var(--ink);}
.tutorial-dialog::backdrop{background: rgba(0, 0, 0, 0.82);}
.tutorial-shell{position: relative; width: min(1080px, 100%); min-height: min(44rem, calc(100vh - 4rem)); margin: auto; padding: clamp(1.2rem, 4vw, 2.5rem); border: 1px solid rgba(99, 232, 135, 0.3); border-radius: 0.75rem; background: radial-gradient(circle at 90% 0%, rgba(255, 216, 74, 0.08), transparent 30%), #08170f; box-shadow: 0 35px 110px rgba(0, 0, 0, 0.65);}
.tutorial-close{position: absolute; z-index: 5; top: 1rem; right: 1rem; display: grid; width: 2.8rem; height: 2.8rem; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(3, 14, 8, 0.88); color: white; cursor: pointer; font-size: 1.35rem;}
.tutorial-close:hover{border-color: var(--green); color: var(--green-bright);}
.tutorial[hidden]{display: none;}
.tutorial-heading{display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding-right: 3.5rem;}
.tutorial-heading h2{max-width: 17ch; margin-top: 0.7rem; font-family: var(--display); font-size: clamp(2.4rem, 5vw, 4.5rem); letter-spacing: -0.045em; line-height: 0.95; text-transform: uppercase;}
.tutorial-heading > div > p:last-child{margin: 0.8rem 0 0; color: var(--muted); font-size: 0.72rem;}
.tutorial-number{color: var(--green); font-family: ui-monospace, monospace; font-size: 0.66rem; letter-spacing: 0.12em;}
.tutorial-layout{display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(17rem, 0.75fr); gap: 1rem; margin-top: 2rem;}
.tutorial-screen{--scene-accent: #63e887; position: relative; min-height: 25rem; overflow: hidden; border: 1px solid rgba(99, 232, 135, 0.27); border-radius: 0.55rem; background: #06140c; box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.35);}
.tutorial-screen[data-scene="crates"],.tutorial-screen[data-scene="ranks-kits"]{--scene-accent: #ffd84a;}
.tutorial-screen[data-scene="pinata"],.tutorial-screen[data-scene="currencies"]{--scene-accent: #ff8a3d;}
.tutorial-screen[data-scene="crossplay"],.tutorial-screen[data-scene="playerwarps"]{--scene-accent: #74d9ff;}
.tutorial-screen[data-scene="dungeons"],.tutorial-screen[data-scene="custom-content"]{--scene-accent: #d99cff;}
.tutorial-screen-top,.tutorial-screen-bottom{position: absolute; z-index: 5; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 1rem; background: rgba(2, 11, 6, 0.8); font-family: ui-monospace, monospace; font-size: 0.56rem; letter-spacing: 0.12em;}
.tutorial-screen-top{top: 0; border-bottom: 1px solid rgba(99, 232, 135, 0.16);}
.tutorial-screen-top span{display: flex; align-items: center; gap: 0.45rem;}
.tutorial-screen-top i{width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--scene-accent); box-shadow: 0 0 12px var(--scene-accent);}
.tutorial-screen-top strong{color: var(--scene-accent); font-size: inherit;}
.tutorial-screen-bottom{bottom: 0; border-top: 1px solid rgba(99, 232, 135, 0.16); color: var(--muted);}
.tutorial-scene{position: absolute; inset: 2.55rem 0; overflow: hidden; background: linear-gradient(180deg, #122f26 0 57%, #183a22 57% 72%, #102a18 72%);}
.tutorial-scene::before{position: absolute; inset: 0; background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 2rem 2rem; content: ""; mask-image: linear-gradient(to bottom, black, transparent 82%);}
.tutorial-scene::after{position: absolute; right: -5%; bottom: 16%; left: -5%; height: 20%; border-top: 2px solid rgba(99,232,135,.15); background: repeating-linear-gradient(90deg, rgba(0,0,0,.11) 0 2rem, transparent 2rem 4rem); content: ""; transform: skewY(-2deg);}
.scene-route{position: absolute; z-index: 2; right: 16%; bottom: 25%; left: 16%; height: 2px; border-top: 2px dashed color-mix(in srgb, var(--scene-accent) 65%, transparent);}
.scene-zone{position: absolute; z-index: 1; top: 28%; right: 17%; bottom: 25%; left: 17%; border: 2px dashed var(--scene-accent); background: color-mix(in srgb, var(--scene-accent) 8%, transparent); opacity: 0.28; transition: opacity 400ms ease, transform 400ms ease;}
.scene-object{position: absolute; z-index: 3; bottom: 24%; display: grid; min-width: 5.2rem; min-height: 4.6rem; place-items: center; padding: 0.55rem; border: 2px solid color-mix(in srgb, var(--scene-accent) 55%, #26382d); background: linear-gradient(145deg, color-mix(in srgb, var(--scene-accent) 22%, #0b1b11), #07120b); color: white; font-family: ui-monospace, monospace; font-size: 0.54rem; font-weight: 900; letter-spacing: 0.06em; text-align: center; box-shadow: inset -0.45rem -0.45rem rgba(0,0,0,.22), 0 0 30px color-mix(in srgb, var(--scene-accent) 10%, transparent);}
.scene-object-a{left: 10%;}
.scene-object-b{right: 10%; min-height: 6.4rem;}
.scene-avatar{position: absolute; z-index: 4; bottom: 23%; left: 17%; width: 2.6rem; height: 4.7rem; border: 2px solid rgba(255,255,255,.18); background: linear-gradient(#ffd7a1 0 30%, #56a96c 30% 67%, #243d92 67%); box-shadow: inset -0.45rem 0 rgba(0,0,0,.18), 0 1rem 1.4rem rgba(0,0,0,.3); transition: left 720ms cubic-bezier(.2,.8,.2,1), transform 350ms ease;}
.scene-avatar::before,.scene-avatar::after{position: absolute; top: 34%; width: 0.6rem; height: 2.3rem; background: #478f5b; content: "";}
.scene-avatar::before{right: 100%;}
.scene-avatar::after{left: 100%;}
.scene-avatar i{position: absolute; top: 0.72rem; right: 0.45rem; width: 0.32rem; height: 0.32rem; background: #20251f; box-shadow: -0.75rem 0 #20251f;}
.scene-focus{position: absolute; z-index: 5; right: 13%; bottom: 21%; width: 7rem; height: 7rem; border: 1px solid var(--scene-accent); border-radius: 50%; opacity: 0; box-shadow: 0 0 35px color-mix(in srgb, var(--scene-accent) 25%, transparent); transition: opacity 300ms ease, transform 500ms ease;}
.tutorial-screen[data-step="1"] .scene-avatar{left: 18%;}
.tutorial-screen[data-step="2"] .scene-avatar{left: 37%; transform: translateY(-0.35rem);}
.tutorial-screen[data-step="3"] .scene-avatar{left: 55%;}
.tutorial-screen[data-step="4"] .scene-avatar{left: 70%; transform: translateY(-0.35rem);}
.tutorial-screen[data-step="1"] .scene-zone{opacity: 0.12; transform: scale(.72);}
.tutorial-screen[data-step="2"] .scene-zone{opacity: 0.42; transform: scale(.88);}
.tutorial-screen[data-step="3"] .scene-zone,.tutorial-screen[data-step="4"] .scene-zone{opacity: 0.8; transform: scale(1);}
.tutorial-screen[data-step="3"] .scene-focus,.tutorial-screen[data-step="4"] .scene-focus{opacity: 0.72; animation: tutorial-focus 1.8s ease-in-out infinite;}
.tutorial-screen[data-scene="pinata"] .scene-object-b{animation: tutorial-bounce 1.2s ease-in-out infinite;}
.tutorial-screen[data-scene="dungeons"] .scene-object-b,.tutorial-screen[data-scene="worlds"] .scene-object-b{border-width: 0.45rem; background: radial-gradient(circle, var(--scene-accent), #1c1230 68%);}
.tutorial-copy{display: flex; min-height: 25rem; flex-direction: column; padding: 1.15rem; border: 1px solid var(--line); border-radius: 0.55rem; background: rgba(255,255,255,.018);}
.tutorial-slides{flex: 1; margin: 0; padding: 0; list-style: none;}
.tutorial-slides li[hidden]{display: none;}
.tutorial-slides span{color: var(--scene-accent, var(--green)); font-family: ui-monospace, monospace; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;}
.tutorial-slides p{margin: 1.1rem 0 0; color: white; font-size: clamp(1rem, 1.7vw, 1.28rem); font-weight: 720; line-height: 1.65;}
.tutorial-progress{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem; margin-block: 1rem;}
.tutorial-progress i{height: 0.22rem; background: rgba(255,255,255,.11);}
.tutorial-progress i.is-complete,.tutorial-progress i.is-active{background: var(--green);}
.tutorial-progress i.is-active{box-shadow: 0 0 10px rgba(99,232,135,.35);}
.tutorial-controls{display: grid; grid-template-columns: 3rem 1fr 3rem; gap: 0.45rem;}
.tutorial-controls button{min-height: 3rem; border: 1px solid var(--line-strong); border-radius: 0.35rem; background: rgba(99,232,135,.055); color: white; cursor: pointer; font-weight: 850;}
.tutorial-controls button:hover{border-color: var(--green); background: rgba(99,232,135,.12);}
.tutorial-play{color: var(--green-bright) !important; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;}
.tutorial-hint{margin: 0.7rem 0 0; color: var(--muted); font-size: 0.62rem; line-height: 1.5; text-align: center;}
@keyframes tutorial-focus{50% { transform: scale(1.12); opacity: .35; }}
@keyframes tutorial-bounce{50% { transform: translateY(-.7rem) rotate(2deg); }}
.tutorial-dialog{color:#f5f7e9}
.tutorial-shell{background:#173b2b;border:1px solid #8aa36b;border-radius:14px}
.tutorial-heading .eyebrow{color:#c9d5ac}
.tutorial-heading h2{text-transform:none;font-size:clamp(2rem,4vw,3.5rem);line-height:1.1}
.tutorial-heading>div>p:last-child,.tutorial-screen-bottom,.tutorial-hint{color:#bfcead}
.tutorial-number,.tutorial-play{color:#e6d396!important}
.tutorial-progress i.is-active,.tutorial-progress i.is-complete{background:#dfc97e}
.tutorial-screen,.tutorial-copy{border-color:#5e7c4f;border-radius:9px}
.tutorial-close{border-color:#83996b;background:#31533a}
.tutorial-controls button{border-color:#6e8857;background:#294d33}
.tutorial-copy{background:#1f422e}
.tutorial-shell .eyebrow span{display:none}
.tutorial-slides span{color:#e3cd87}
.tutorial-screen-top{color:#f3f7e4}
.tutorial-screen-top strong{color:#d9c788}
.tutorial-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
@media(max-width:900px){.tutorial-layout{grid-template-columns:1fr}.tutorial-screen{min-height:18rem}.tutorial-copy{min-height:13rem}.tutorial-shell{min-height:0}.tutorial-heading{gap:15px}.tutorial-number{display:none}.tutorial-slides p{margin-top:15px}.tutorial-heading>div>p:last-child{font-size:.7rem}}
@media(max-width:700px){.tutorial-dialog{padding:10px}.tutorial-shell{padding:24px 18px}.tutorial-close{top:12px;right:12px;width:36px;height:36px;font-size:1.2rem}.tutorial-heading{padding-right:25px}.tutorial-heading h2{font-size:2rem}.tutorial-layout{margin-top:22px;gap:12px}.tutorial-screen{min-height:16rem}.tutorial-copy{padding:14px;min-height:15rem}.tutorial-screen-top,.tutorial-screen-bottom{font-size:.45rem;padding-inline:10px}.scene-object{font-size:.45rem!important}.tutorial-slides p{font-size:.9rem}.tutorial-controls button{min-height:44px}.tutorial-hint{font-size:.6rem}.tutorial-progress{margin-block:14px}}
@media(prefers-reduced-motion:reduce){.tutorial-scene *{transition:none!important}}
/* Open/close state is added by the tutorial player, rather than initial markup. */
body.tutorial-open{overflow:hidden}
.tutorial-screen[data-playing="false"] .tutorial-scene *{animation-play-state:paused!important}