/* FLOW's illustrations are raster art; labels, controls and balances stay native. */
:root{--tour-surface:#12212e;--tour-ink:#0d1421;--tour-line:#435b6a;--tour-text:#f7efd9;--tour-muted:#b6c7cd}
body{color:var(--tour-text);font-size:16px;line-height:1.4}
button{min-height:48px;transition:background-color .14s,border-color .14s,transform .1s;color:var(--tour-text);font-size:16px;line-height:1.25}
button:not(:disabled):active{transform:scale(.98)}
button:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
button:disabled{opacity:.5}
.action{min-height:56px;border-radius:12px;font-size:18px;color:#14221e}
.career{width:min(100%,1120px);padding:16px;gap:16px}
.career-header{min-height:48px;gap:12px}.career-brand{font-size:28px;letter-spacing:-.055em}
.wallet{gap:12px}.wallet>div{display:grid;justify-items:end;gap:0}.wallet b{font-size:20px;line-height:1.15}.wallet span{font-size:10px;letter-spacing:.03em}
.career-panel{background:var(--tour-surface);padding:20px;border-color:var(--tour-line)}
.career[data-screen=hub],.career[data-screen=result]{max-width:1120px;grid-template-columns:minmax(0,1fr)}
.career[data-screen=hub] #hub{width:min(100%,560px);margin:auto;display:flex;flex-direction:column;gap:16px;background:transparent;border:0;padding:0}
.hub-feature,.hub-controls,.hub-control-content{display:contents}
.hero-intro{display:flex;align-items:baseline;gap:12px}.hero-intro h1{font-style:normal;font-size:24px;margin:0}.hero-intro small{font-size:12px}
.flow-ink{display:block;flex:none;aspect-ratio:1;background-image:url(assets/career/flow-atlas-v2.png);background-size:400% 200%;background-repeat:no-repeat;background-position:var(--ink-x,0%) var(--ink-y,0%);pointer-events:none}
.ink-rival{--ink-x:0%;--ink-y:100%}.ink-victory{--ink-x:33.333333%;--ink-y:100%}.ink-event{--ink-x:66.666667%;--ink-y:100%}.ink-windmill{--ink-x:100%;--ink-y:100%}
.event-poster{position:relative;min-height:220px;padding:16px 12px;isolation:isolate;overflow:hidden}
.event-poster>.ink-event{position:absolute;z-index:-1;right:-8px;top:-16px;width:70%;height:100%;opacity:.85}
.event-poster:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0d1421 6%,#0d1421a8 42%,transparent 80%);pointer-events:none}
.event-poster small{display:block;color:var(--cyan);font-size:12px;letter-spacing:.1em;font-weight:750}
.event-poster h2{max-width:85%;font-size:clamp(36px,9vw,56px);line-height:.98;letter-spacing:-.035em;font-style:italic;font-weight:900;margin:12px 0;color:var(--tour-text);text-shadow:0 2px 8px #0d1421}
.event-poster p{display:table;background:var(--tour-text);color:var(--tour-ink);padding:3px 10px;font-weight:800;font-style:italic;transform:rotate(-2deg);margin:0 0 12px}
.match-progress{display:flex;gap:10px}.match-progress span{display:grid;place-items:center;width:24px;height:24px;border:2px solid #526576;border-radius:50%;font-size:14px;color:var(--tour-ink)}
.match-progress [data-state=done]{background:var(--lime);border-color:var(--lime)}.match-progress [data-state=current]{border-color:var(--lime);box-shadow:inset 0 0 0 4px var(--tour-ink);background:var(--lime)}
.opponent-preview{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--tour-line);border-radius:12px;background:#182a38}
.opponent-preview>.flow-ink{width:84px;align-self:stretch;background-color:transparent}
.opponent-preview h2{font-style:italic;font-size:26px;line-height:1.1;margin:0 0 4px}.opponent-preview p{font-size:14px;margin:0;color:var(--tour-muted)}
#opponentAdvice{margin-top:10px;color:var(--tour-text);border-left:2px solid var(--lime);padding-left:10px}
.hub-lead{font-size:14px;color:var(--tour-muted);margin:0}.hub-lead:empty{display:none}
#hub .panel-heading{margin:0;gap:8px}#hub .panel-heading button{border:0;background:transparent;color:var(--tour-muted);font-size:14px}
#hub .rank-card{order:9;min-height:48px;margin:0;padding:4px 0;border:0;background:transparent;grid-template-columns:30px 1fr auto;gap:8px;text-align:left}
#hub .rank-card .rank-mark{width:30px}#hub .rank-copy strong{font-size:14px}#hub .rank-copy small{font-size:12px}#hub .rank-copy progress{display:none}#hub .rank-arrow{font-size:12px}
#careerLoadout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;min-height:90px}
.loadout-move{padding:8px 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;background:#172a38;min-width:0;border-color:#647b87;border-radius:12px;font-size:14px;font-weight:700;overflow-wrap:anywhere;user-select:none;-webkit-touch-callout:none}
.loadout-move .flow-ink{width:64px;max-width:100%}.loadout-move svg{width:52px;height:52px;color:var(--cyan)}
.loadout-move b{font-size:14px;line-height:1.2;font-weight:700}
.learning-target{width:100%;border:0;background:transparent;text-align:left;padding:0;display:grid;gap:6px;min-height:48px;color:var(--tour-text);font-size:14px}
.learning-target .target-row{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.learning-target small{color:var(--tour-muted);font-size:14px}
.learning-target progress{width:100%;height:8px;appearance:none;border:0;border-radius:8px;background:#334652;overflow:hidden}
.learning-target progress::-webkit-progress-bar{background:#334652}.learning-target progress::-webkit-progress-value{background:var(--lime);border-radius:8px}.learning-target progress::-moz-progress-bar{background:var(--lime)}
.career-menu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}.career-menu button{font-size:14px;padding:10px 6px;background:#172a38}
.tournament-list{font-size:14px}.tournament-list summary{min-height:48px;display:flex;align-items:center;cursor:pointer;color:var(--tour-muted)}
.tournament-list[open] summary{color:var(--tour-text)}#tournamentChoices{display:grid;gap:8px;margin-bottom:12px}#tournamentChoices button{text-align:left;display:grid;gap:4px;font-size:16px}#tournamentChoices small{font-size:14px;color:var(--tour-muted)}#tournamentChoices [aria-pressed=true]{border-color:var(--lime)}
.tournament-list .round-row{padding:10px}.round-row button{font-size:14px}.round-row small{display:block;font-size:14px}#openVideos{margin-top:12px;font-size:14px;width:100%}
.hub-controls>.action{order:8}.hub-feature>.tournament-list{order:10}
.career-link{margin:0;padding:8px 0;height:40px;flex:none;border-top:1px solid #435b6a77;color:var(--tour-text);font-size:15px;font-weight:700;line-height:1.25;overflow:hidden}
.career-link[data-empty=true]{visibility:hidden}
.move-pad>span:last-child{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.career-link[data-ready=true]{color:var(--lime)}
.career[data-playing=true]>.career-header{grid-column:1/-1}.career[data-playing=true] .wallet{display:none}.career[data-playing=true] .career-tag{display:none}
.career[data-playing=true] .move-pad{min-width:0;min-height:100px;font-size:16px;line-height:1.2;gap:4px;padding:8px;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}
.move-pad .flow-ink{width:76px;max-width:75%;height:auto;max-height:76px}.career[data-playing=true] .move-pad svg{width:56px;height:56px}
.move-pad[aria-pressed=true]{background:#8fe2dc!important;border-color:#b7ffef!important;color:#101f26!important;box-shadow:none!important}
.move-pad[data-current=true]:not([aria-pressed=true]){background:#27454b;border-color:#9deae5}
.move-pad[data-link=true]:not([aria-pressed=true]):after{content:'↗';position:absolute;right:8px;top:4px;color:var(--lime);font-size:20px}
.move-pad[data-current=true] span:last-child:after{content:' ·';color:currentColor}.move-pad[data-pending=true]:after{content:'→';position:absolute;right:8px;top:4px;color:var(--cyan)}
.rhythm-lane{border:0;background:transparent;padding:0}.lane-header{font-size:14px}.lane-header span{font-size:14px}.play-hint{font-size:14px!important;line-height:1.3!important}
.career[data-playing=true] #play{background:var(--tour-surface);overflow:visible}.career[data-playing=true] .move-pads{flex:0 1 auto;align-content:center;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.career[data-playing=true] .game-actions{gap:8px}.career[data-playing=true] .game-actions>.quiet{min-height:48px;font-size:14px;flex:1}
.career[data-playing=true] .scene-heading h1{font-size:24px}.career[data-playing=true] .scene-heading{max-width:70%;right:auto;top:14px}.scene-heading small{font-size:12px}.scene-hud span{font-size:12px}
.scene-score{font-size:16px;color:var(--tour-text);font-variant-numeric:tabular-nums}
.career[data-screen=result] #result{position:relative;width:min(100%,560px);margin:auto;display:flex;flex-direction:column;gap:16px;background:transparent;border:0;padding:0}
#resultArtwork{width:min(56%,200px);align-self:center;margin:-10px 0 -28px;z-index:0}.career[data-screen=result] .intro h1{font-size:clamp(36px,9vw,58px);margin:0 0 8px}.career[data-screen=result] .intro{text-align:center}.career[data-screen=result] .intro p{margin:0;font-size:16px}
.reward:not([hidden]){display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 8px;border:1px solid var(--tour-line);background:#172a38;border-radius:12px;font-size:16px;text-align:center;font-weight:800;color:var(--lime);margin:0}.reward:before{display:none!important}.reward span{font-size:16px}.reward b{font-size:30px;font-variant-numeric:tabular-nums}
.career-coach{padding:16px;border:1px solid var(--tour-line);border-radius:12px;display:grid;gap:12px;background:#172a38}.career-coach strong{font-size:18px}.career-coach p{font-size:14px;margin:4px 0 0;color:var(--tour-muted)}.career-coach button{font-size:14px;justify-self:end}
#judgingDetails{border:1px solid var(--tour-line);border-radius:12px;padding:0 12px}#judgingDetails>summary{min-height:48px;display:list-item;padding:12px 0;cursor:pointer;font-weight:700}.judge-card{margin-top:0}#awardBreakdown{font-size:14px;margin:0;padding-left:24px}
.result-actions{display:grid;gap:8px}.result-actions .quiet{background:transparent;border:0;font-size:14px;color:var(--tour-muted)}
.loadout-picker{width:min(560px,calc(100% - 24px));max-height:85dvh;overflow:auto;background:#12212e;color:var(--tour-text);border:1px solid var(--tour-line);border-radius:16px;padding:16px}.loadout-picker::backdrop{background:#060d16bb}.loadout-picker header{display:flex;justify-content:space-between;align-items:center;gap:12px}.loadout-picker h2{font-size:22px;margin:0}.loadout-picker header button{width:48px}.loadout-picker p{font-size:14px;color:var(--tour-muted)}#loadoutOptions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#loadoutOptions button{min-height:100px;min-width:0;overflow-wrap:anywhere}#loadoutOptions [aria-pressed=true]{border-color:var(--lime);color:var(--lime)}
.career-tier summary small{font-size:13px}.lesson-tile small{font-size:14px}.lesson-actions button{font-size:14px}.lesson-tile>span>.flow-ink{width:48px}.career-filters button{font-size:14px;min-height:48px}
.lesson-tile{grid-template-columns:auto minmax(0,1fr) auto}.lesson-tile>div{min-width:0;overflow-wrap:anywhere}
@media(max-width:739px) and (orientation:portrait){
 .career{padding:12px 16px}.career-header{gap:8px}.career-tag{display:none}.career-header>.quiet{font-size:14px;padding:8px}.career-brand{font-size:25px}.wallet{gap:8px}.wallet b{font-size:18px}.wallet span{font-size:10px}
 .career[data-screen=hub] #hub{gap:12px;padding-bottom:80px}.career[data-screen=result] #result{padding-bottom:80px}.career[data-screen=result] #resultNext{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:16px;right:16px;width:calc(100% - 32px);z-index:20;box-shadow:0 0 0 8px #0d1421,0 -12px 24px #0d1421}.career[data-screen=hub] #careerContinue{position:fixed;bottom:max(12px,env(safe-area-inset-bottom));left:16px;right:16px;width:calc(100% - 32px);z-index:20;box-shadow:0 0 0 8px #0d1421,0 -12px 24px #0d1421}.career[data-screen=hub] .event-poster{min-height:190px}.career[data-screen=hub] #hubLead{display:none}
 .career[data-playing=true]{grid-template-rows:44px minmax(120px,1fr) auto;gap:8px;padding:8px 10px max(8px,env(safe-area-inset-bottom))}
 .career[data-playing=true]>#play{max-height:none;padding:8px 4px;gap:6px}
 .career[data-playing=true] .move-pads{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .career[data-playing=true] .move-pad{min-height:78px;flex-direction:row;text-align:left;gap:4px;font-size:15px;padding:4px 8px;justify-content:flex-start}
 .move-pad .flow-ink{width:58px;max-width:44%}.career[data-playing=true] .move-pad svg{width:44px;height:44px}.move-pad>span:last-child{overflow-wrap:anywhere}
 .career[data-playing=true] .game-actions{margin:0}.career[data-playing=true] #careerGroove{height:28px}.career-link{font-size:14px;padding:4px 0;height:38px;line-height:1.1}
 .career[data-playing=true] .play-hint{height:34px;flex:none;overflow:hidden}
 .career[data-playing=true] .lane-header{font-size:13px}.career[data-playing=true] .play-hint{font-size:13px!important;margin:0}.career[data-playing=true] .scene-heading h1{font-size:22px}
 .career[data-playing=true][data-side=rival]>#play{max-height:185px}.career[data-playing=true][data-side=rival] .career-link{display:none}
 .career[data-playing=true] .scene-message{font-size:12px;max-width:calc(100% - 96px)}
}
@media(max-height:500px) and (orientation:landscape){
 .career[data-playing=true]{grid-template-columns:minmax(0,1fr) minmax(220px,34%);grid-template-rows:38px minmax(0,1fr);padding:4px 8px;gap:6px}
 .career[data-playing=true]>#play{padding:6px;gap:5px;justify-content:center}
 .career[data-playing=true] .move-pad{min-height:62px;padding:4px;font-size:14px;flex-direction:row;gap:4px}
 .move-pad .flow-ink{width:46px;max-width:44%}.career[data-playing=true] .move-pad svg{width:34px;height:34px}.career[data-playing=true] .move-pads{gap:6px}
 .career[data-playing=true] .game-actions .quiet{min-height:44px}.career[data-playing=true] .play-hint{display:none}.career[data-playing=true] .career-link{font-size:13px;height:32px;padding:2px 0}.career[data-playing=true] .lane-header{font-size:13px}.career[data-playing=true] .lane-header span{font-size:12px}
 .career[data-playing=true] #careerGroove{height:26px}.career[data-playing=true] .career-header{min-height:38px}.career[data-playing=true] .career-header button{min-height:38px}.career[data-playing=true] .scene-heading h1{font-size:20px}
}
@media(max-width:360px){.career-header .career-brand{font-size:22px}.wallet b{font-size:17px}.wallet span{font-size:9px}.hero-intro{gap:8px}.hero-intro small{font-size:11px}.hero-intro h1{font-size:22px}.event-poster{min-height:190px}.event-poster h2{font-size:38px}.opponent-preview>.flow-ink{width:62px}.opponent-preview h2{font-size:23px}.opponent-preview p{font-size:14px}#careerLoadout{gap:5px}.loadout-move{font-size:13px;padding:6px 3px}.loadout-move b{font-size:13px}.career-menu{gap:5px}.career-menu button{font-size:14px}}
@media(max-height:640px) and (orientation:portrait){.career[data-playing=true] .move-pads{grid-template-columns:repeat(var(--moves,1),minmax(0,1fr));gap:6px}.career[data-playing=true] .move-pad{flex-direction:column;justify-content:center;min-height:82px;padding:4px;font-size:13px;text-align:center;gap:2px}.career[data-playing=true] .move-pad .flow-ink{width:42px;max-width:100%}.career[data-playing=true] .move-pad svg{width:38px;height:38px}.career[data-playing=true] .play-hint{height:30px}.career[data-playing=true] .career-link{height:30px}}
@media(prefers-reduced-motion:no-preference){#result .intro,#result .reward,.opponent-preview{animation:flow-arrive .2s ease-out both}.career-link[data-ready=true]{animation:flow-ink-cue .32s ease-out}.move-pad[aria-pressed=true]{transform:scale(.985)}@keyframes flow-arrive{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes flow-ink-cue{from{opacity:.5}to{opacity:1}}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}button:active,.move-pad[aria-pressed=true]{transform:none!important}}
/* Independent columns avoid empty grid rows imposed by the event artwork. */
@media(min-width:740px){.career[data-screen=hub] #hub{width:100%;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,1fr);gap:16px 32px;align-items:start}.hub-feature,.hub-controls{display:flex;flex-direction:column;gap:16px;min-width:0}.hub-feature{grid-column:1}.hub-controls{grid-column:2}.hero-intro{grid-column:1/-1}.event-poster{min-height:380px}.event-poster>.ink-event{width:100%;height:100%;top:0;right:0}#hub .rank-card{grid-row:auto;grid-column:auto}#hub .hub-controls>.action{order:8}.hub-feature>.tournament-list{order:10}}
@media(max-width:1100px) and (max-height:500px) and (orientation:landscape){
 .career[data-screen=hub]{height:100dvh;grid-template-rows:48px minmax(0,1fr);gap:8px;padding:8px 16px;overflow:hidden}
 .career[data-screen=hub] #hub{display:grid;width:100%;height:100%;min-height:0;margin:0;grid-template-columns:minmax(0,1.2fr) minmax(220px,1fr);grid-template-rows:28px minmax(0,1fr);gap:8px 16px}
 .career[data-screen=hub] .hero-intro{grid-column:1/-1}
 .career[data-screen=hub] .hub-feature,.career[data-screen=hub] .hub-controls{display:flex;flex-direction:column;gap:8px;min-width:0;min-height:0;height:100%}
 .career[data-screen=hub] .hub-feature{grid-column:1;overflow:auto;overscroll-behavior:contain}
 .career[data-screen=hub] .hub-feature .event-poster{min-height:205px;flex:none}
 .career[data-screen=hub] .event-poster h2{font-size:clamp(30px,5.5vw,44px)}
 .career[data-screen=hub] .hub-controls{grid-column:2;overflow:hidden}
 .career[data-screen=hub] .hub-control-content{display:flex;flex:1;flex-direction:column;gap:12px;min-height:0;overflow:auto;overscroll-behavior:contain;padding:0 2px 8px}
 .career[data-screen=hub] .hub-controls>.action{position:static;flex:none;width:100%;min-height:48px;font-size:17px;box-shadow:none}
 .career[data-screen=hub] #hubLead{display:none}
 .career[data-screen=hub] .opponent-preview{padding:8px;gap:8px}
 .career[data-screen=hub] .opponent-preview>.flow-ink{width:56px}
 .career[data-screen=hub] .opponent-preview h2{font-size:23px}
 .career[data-screen=hub] #opponentAdvice{margin-top:5px;font-size:13px}
}
@media(max-width:360px){.career-header{gap:6px}.career-header>.quiet{padding:6px;font-size:13px}.wallet{gap:6px}.wallet b{font-size:16px}.reward>span{display:grid;justify-items:center;gap:2px}.reward>span>span{font-size:14px}}

@media(max-width:360px){.lesson-tile{grid-template-columns:42px minmax(0,1fr);gap:8px}.lesson-tile>.lesson-actions{grid-column:2;justify-content:flex-start}.lesson-tile>button{grid-column:2;justify-self:start}.lesson-tile>span>.flow-ink{width:42px}}