/* Racing action with readable captions outside the artwork. */
.sw-clean #gate .gatebox{max-width:1120px!important;grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr);column-gap:34px}
.sw-clean #gate :is(#swWelcomeReel,#swStageTutorial){position:relative;isolation:isolate;overflow:hidden;grid-column:2;grid-row:2/span 7;width:100%;min-width:0;text-align:left;border:1px solid #69829c;border-top:4px solid #ffe400;border-radius:4px;box-shadow:5px 6px #08162c;background:#163454 url('assets/tactic-contours-v1.svg') center/cover}
.sw-clean #gate :is(#swWelcomeReel,#swStageTutorial) #journeyWelcomeArt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0;box-shadow:none;opacity:.3;z-index:-1}
.sw-clean #gate :is(#swWelcomeReel,#swStageTutorial).tutorial-ready #journeyWelcomeArt{opacity:0}
.tutorial-shell{position:relative;visibility:hidden}.tutorial-ready .tutorial-shell{visibility:visible}
.tutorial-top{display:flex;align-items:center;gap:12px;min-height:50px;padding-left:18px;background:#0c1b31;color:#fff5db}
.tutorial-top small{color:#ffe400;font-family:var(--arc-label);font-weight:800;letter-spacing:1.3px;font-size:13px}.tutorial-sequence{margin-left:auto;font:700 11px Arial,sans-serif;letter-spacing:1px;color:#b8cce0}
.sw-clean :is(#swWelcomeReel,#swStageTutorial) .sw-reel-toggle{display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0 3px 0 0;padding:12px;border:0;border-radius:0;background:transparent;color:#fff5db;box-shadow:none;cursor:pointer}
:is(#swWelcomeReel,#swStageTutorial) .sw-reel-toggle svg{width:18px;height:18px}:is(#swWelcomeReel,#swStageTutorial) .sw-reel-toggle .reel-play-icon,:is(#swWelcomeReel,#swStageTutorial) .sw-reel-toggle[aria-pressed="true"] .reel-pause-icon{display:none}:is(#swWelcomeReel,#swStageTutorial) .sw-reel-toggle[aria-pressed="true"] .reel-play-icon{display:block}:is(#swWelcomeReel,#swStageTutorial) .sw-reel-toggle[hidden]{display:none!important}
:is(#swWelcomeReel,#swStageTutorial) button:focus-visible{outline:3px solid #ffe400;outline-offset:-4px}:is(#swWelcomeReel,#swStageTutorial) button:hover{background:#254364}
.tutorial-stage{position:relative;width:100%;min-width:0;aspect-ratio:1.55;min-height:255px;background:radial-gradient(ellipse at 70% 10%,#294e70,transparent 65%),url('assets/tactic-contours-v1.svg') center/cover,#173454;overflow:hidden}
.tutorial-scene{position:absolute;inset:0;opacity:0;visibility:hidden;overflow:hidden;transition:opacity .25s}.tutorial-scene.is-active{opacity:1;visibility:visible}
.sw-clean :is(#swWelcomeReel,#swStageTutorial) .tutorial-screenshot>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;border:0;border-radius:0}
.tutorial-caption{display:flex;gap:16px;align-items:flex-start;min-height:132px;padding:20px 20px 22px;border-top:2px solid #ffe400;background:radial-gradient(#fff5db0c .8px,transparent 1px) 0 0/5px 5px,linear-gradient(115deg,#183659,#0c1b31 80%);color:#fff5db}
.tutorial-number{flex:none;display:grid;place-items:center;width:50px;min-height:49px;margin:2px 0 0;padding:2px 5px 6px;font:italic 900 35px/1 var(--arc-shout);color:#0b1930;background:#ffe400;border-bottom:4px solid #ee3344;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)}
.tutorial-caption>div{min-width:0;flex:1}
.sw-clean :is(#swWelcomeReel,#swStageTutorial) .tutorial-caption h3{margin:0 0 8px!important;padding-right:3px;font:italic 900 34px/1.12 var(--arc-shout)!important;color:#ffe400!important;text-transform:uppercase;letter-spacing:.015em;text-shadow:1px 2px #071226;-webkit-text-stroke:1.5px #071226;paint-order:stroke fill;overflow-wrap:normal;text-wrap:balance}
.sw-clean :is(#swWelcomeReel,#swStageTutorial) .tutorial-caption p{margin:0!important;font:700 18px/1.45 var(--arc-label);color:#fff5db!important;max-width:none;text-shadow:none;-webkit-text-stroke:0}

.tutorial-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#3a5574}.sw-clean :is(#swWelcomeReel,#swStageTutorial) .tutorial-steps button{position:relative;min-height:44px;padding:8px;border:0;border-radius:0;box-shadow:none;background:#0d1d34;color:#a9bfd5;font:800 12px Arial,sans-serif;cursor:pointer}.sw-clean :is(#swWelcomeReel,#swStageTutorial) .tutorial-steps button[aria-current="step"]{background:#203c5b;color:#ffe400}.tutorial-steps i{position:absolute;left:0;right:0;bottom:0;height:3px;background:#ffe400;transform:scaleX(0);transform-origin:left}.tutorial-steps [aria-current="step"] i{transform:scaleX(var(--step-progress,0))}
:is(#swWelcomeReel,#swStageTutorial):not(.reel-running) .tutorial-stage *{animation-play-state:paused!important}:is(#swWelcomeReel,#swStageTutorial) .tutorial-image-fallback{display:none!important}.reel-reduced .tutorial-stage *{animation:none!important}.reel-reduced .tutorial-steps [aria-current="step"] i{transform:scaleX(1)}
@media(max-width:700px){.sw-clean #gate #swWelcomeReel{order:5;max-width:510px}.sw-clean #gate #gatePlay{order:4}.sw-clean #gate #gateHow{order:6}.tutorial-stage{min-height:210px;aspect-ratio:1.55}.tutorial-caption{min-height:146px;padding:18px 14px 20px;gap:12px}.sw-clean :is(#swWelcomeReel,#swStageTutorial) .tutorial-caption h3{font-size:30px!important}.tutorial-number{width:42px;min-height:43px;font-size:31px}}
.reel-reduced .tutorial-scene{transition:none}
:is(#swWelcomeReel,#swStageTutorial),:is(#swWelcomeReel,#swStageTutorial) *{box-sizing:border-box}

/* Both entry points use the same moving guide, including returning players. */
.sw-clean #swStageTutorial{position:relative;isolation:isolate;overflow:hidden;width:100%;min-width:0;text-align:left;border:1px solid #69829c;border-top:4px solid #ffe400;border-radius:4px;box-shadow:5px 6px #08162c;background:#163454 url('assets/tactic-contours-v1.svg') center/cover}
.sw-clean #swStageTutorial>.tutorial-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:-1}
.sw-clean #journeyStageVoice{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:24px;align-items:center;min-height:0;padding:24px;background:radial-gradient(ellipse at 0 0,#294e70,transparent 65%),url('assets/tactic-contours-v1.svg') center/cover,#132e50!important}
.sw-clean #journeyStageVoice[hidden]{display:none}
.sw-clean #journeyStageVoice::before,.sw-clean #journeyStageVoice::after{content:none}
.sw-clean #journeyStageVoice>.poster-copy{width:100%;padding:0}
.sw-clean #journeyStageVoice h2{font-size:clamp(36px,4.5vw,55px)!important}
.sw-clean #journeyStageVoice #swStageTutorial small{padding:0;border:0;box-shadow:none;transform:none;background:transparent;color:inherit;font:800 10px/1.3 Arial,sans-serif;letter-spacing:1px}
.sw-clean #journeyStageVoice #swStageTutorial .tutorial-top small{color:#ffe400;font:800 13px/1.3 var(--arc-label);letter-spacing:1.3px}
@media(max-width:700px){.sw-clean #journeyStageVoice{grid-template-columns:minmax(0,1fr);padding:14px;gap:22px}.sw-clean #swStageTutorial{order:-1}.sw-clean #journeyStageVoice>.poster-copy{padding:0 4px 8px}.sw-clean #journeyStageVoice h2{font-size:36px!important;margin-top:14px}}

@media(max-width:350px){.sw-clean :is(#swWelcomeReel,#swStageTutorial) .tutorial-caption h3{font-size:27px!important}.tutorial-caption{gap:10px;padding-left:12px;padding-right:12px}.sw-clean :is(#swWelcomeReel,#swStageTutorial) .tutorial-caption p{font-size:17px}}
.sw-clean .sw-home-install{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 16px;margin:8px 0 12px;background:linear-gradient(110deg,#173759,#102444);color:#fff6df;border:1px solid #93a6bd;border-radius:3px;font:700 19px/1.2 var(--arc-label);cursor:pointer;white-space:normal;text-align:center}
.sw-clean .sw-home-install::before{content:'↓';color:#ffe400;font:700 22px/1 Arial,sans-serif}
.sw-clean .sw-home-install:focus-visible{outline:3px solid #ffe400;outline-offset:3px}
.sw-clean .sw-home-install[hidden]{display:none!important}
.sw-clean #gate #welcomeSaveDevice{grid-row:9;order:7;width:100%}
.sw-clean #homeSaveDevice{width:100%}
body.sw-clean:not([data-journey="stage"]) #homeSaveDevice{display:none}