#careerTutorial{position:absolute;top:19%;left:12%;right:12%;z-index:3;text-align:center;pointer-events:none;text-shadow:0 2px 8px #032c3b99}#careerTutorial[hidden],.tutorial-stick[hidden]{display:none}#careerTutorial .tutorial-stick{width:76px;height:76px;margin:0 auto 10px;box-shadow:inset 0 0 24px #04233244}#careerTutorial .stick-knob{width:31px;height:31px;left:calc(50% - 15.5px);top:calc(50% - 15.5px)}.tutorial-stick b{z-index:1;font-size:18px;color:#d9ecefcc}.tutorial-stick svg{position:absolute;inset:0;width:100%;height:100%;fill:currentColor;color:#e5ff62cc}#careerTutorial strong{font-size:clamp(17px,3.8vw,23px);font-weight:700}#careerTutorial p{font-size:clamp(13px,3.2vw,16px);line-height:1.4;margin:7px auto 0;max-width:430px}#game[data-tutorial="true"] .stats,#game[data-tutorial="true"] #announcements,#game[data-tutorial="true"] #banger,#game[data-tutorial="true"] #trickIntent,#game[data-tutorial="true"] #hint,#game[data-tutorial="true"] #doubleUpCue{visibility:hidden!important}#careerFade{position:absolute;inset:0;background:#000;z-index:20;pointer-events:auto}@media(max-height:600px){#careerTutorial{top:16%;left:23%;right:23%}#careerTutorial .tutorial-stick{width:54px;height:54px;margin-bottom:5px}#careerTutorial strong{font-size:16px}#careerTutorial p{font-size:12px;margin-top:4px}}
#careerCredit{position:absolute;top:calc(25% + 26px);left:16px;right:16px;z-index:3;margin:0;text-align:center;color:#fff;font-family:Arial,Helvetica,sans-serif;font-size:clamp(16px,4.5vw,29px);font-weight:850;letter-spacing:-.8px;line-height:1.15;text-shadow:0 2px 14px #032c3bcc;opacity:0;pointer-events:none}
#careerCredit span{display:block;margin-top:12px;font-size:.5em;font-weight:600;letter-spacing:5px;text-transform:uppercase}
#game[data-intro="hidden"] :is(header,#lakeHud,#announcements,#doubleUpCue,#controls,footer>:not(#pause),#careerTutorial){opacity:0!important}
#game[data-intro="sticks"] :is(header,#lakeHud,#announcements,#doubleUpCue,footer>:not(#pause),#careerTutorial){opacity:0!important}
#game[data-intro="sticks"] #controls{animation:careerHudIn .55s ease-out backwards}
#game[data-intro="in"] :is(header,#lakeHud,#announcements,#doubleUpCue,footer,#careerTutorial){animation:careerHudIn 1.2s ease-out backwards}
@keyframes careerHudIn{from{opacity:0}}
/* Tutorial prompts share the look of the real sticks: hairline ring, almost no fill, translucent knob. */
#careerTutorial{text-shadow:var(--hud-shadow)}
#careerTutorial .tutorial-stick{border:1px solid #efffff9c;background:var(--hud-glass);box-shadow:none}
#careerTutorial .stick-knob{border:1px solid #efffffba;background:#deefff30;box-shadow:none}
.tutorial-stick b{font-weight:600;color:#fff;text-shadow:var(--hud-shadow)}
.tutorial-stick svg{color:#efffffc7;filter:drop-shadow(0 1px 3px #032a3b80)}
#careerTutorial strong{font-weight:600;letter-spacing:.2px}
#careerTutorial[data-release-cue="true"] p{color:#e5ff62;font-weight:700}

#game[data-powell-score="true"] .stats{visibility:visible!important}
.career-levels button.career-complete{color:#fff;border-color:#e5ff62;background:linear-gradient(110deg,#163e57,#215980)}
.career-complete .level-number,.career-complete .completion{color:#e5ff62}.completion{margin-left:auto;font-size:11px}
.career-difficulty{width:min(340px,calc(100% - 48px));max-width:none;padding:0;border:0;background:transparent;color:#fff;font-family:var(--hud-font);overflow:visible}
.career-difficulty::backdrop{background:#021e345c;backdrop-filter:blur(5px)}
.career-difficulty div{display:grid;gap:10px;margin:0}
.career-difficulty .difficulty-option{display:block;width:100%;min-height:44px;padding:10px 18px;border:1px solid #ffffff30;border-radius:8px;background:#092c3ded;color:#fff;font:500 15px/1.3 var(--hud-font);text-align:left;letter-spacing:0;box-shadow:none;text-shadow:none;text-transform:none}
.career-difficulty .difficulty-option:hover{background:#204658}.career-difficulty .difficulty-option:focus-visible{outline:2px solid #b8dce9;outline-offset:3px}
#powellTransition{position:absolute;inset:0;z-index:100;background:#000;pointer-events:auto}
#game[data-mode="career-transition"]>header,#game[data-mode="career-transition"]>#lakeHud,#game[data-mode="career-transition"]>#announcements,#game[data-mode="career-transition"]>#controls,#game[data-mode="career-transition"]>footer{visibility:visible}

#game[data-powell-kicker="true"] #banger{visibility:visible!important}
#game[data-orlando-banger="true"] #banger{visibility:visible!important}

#game[data-powell-score="true"] #banger{visibility:visible!important}

#game[data-powell-score="true"] #announcements,#game[data-powell-score="true"] #trickIntent{visibility:visible!important}
.career-beat{box-sizing:border-box;width:min(480px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:24px;border:1px solid #9edce8;border-radius:14px;background:#062735;color:#fff;font-family:var(--hud-font);box-shadow:0 18px 50px #001722aa}
.career-beat::backdrop{background:#031820cc;backdrop-filter:blur(5px)}
.career-beat h2{margin:0 0 16px;font-size:clamp(22px,5vw,30px);line-height:1.1}
.career-beat-lines{display:grid;gap:12px}.career-beat-lines p{margin:0;font-size:clamp(15px,3.8vw,18px);line-height:1.4}.career-beat-lines strong{color:#a5e6ef}
.career-beat-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}.career-beat-actions button{min-height:44px;flex:1}
@media(max-height:500px){.career-beat{padding:16px}.career-beat h2{margin-bottom:10px}.career-beat-lines{gap:6px}.career-beat-actions{margin-top:12px}}

#game[data-como-training="true"]:not([data-replay="true"]) #banger,#game[data-como-training="true"]:not([data-replay="true"]) #doubleUpCue{visibility:visible!important}

/* Career lessons: keep the lesson on the edge and teach on the real controls. */
/* Under the top row (lake, rope, meters, score: hud-stack.mjs --hud-top-end), which never moves for it. */
#careerTutorial[data-compact="true"]{top:var(--hud-top-end,calc(env(safe-area-inset-top,0px) + 100px));left:52px;right:52px;margin:auto;max-width:430px;padding:8px 30px 8px 10px;box-sizing:border-box;border-radius:12px;background:var(--hud-glass);box-shadow:inset 0 0 0 1px #ffffff26;text-align:left;}
#careerTutorial[data-compact="true"] .tutorial-stick{display:none}
#careerTutorial[data-compact="true"] strong{display:block;font-size:15px;line-height:1.2}
#careerTutorial[data-compact="true"] p{font-size:12px;line-height:1.35;margin:4px 0 0;max-width:none}
.lesson-help{position:absolute;inset:0;width:100%;text-align:right;padding-right:10px;border:0;background:transparent;color:#fff;font:600 16px var(--hud-font);pointer-events:auto;min-width:0;min-height:44px;cursor:pointer}
.lesson-help[hidden]{display:none}
#game[data-stance-cue="true"] #controls #stance{color:#e5ff62;background:#ffffff0d;border-radius:24px;outline:1px solid #e5ff62;outline-offset:-6px;box-shadow:0 0 14px #e5ff6233;text-decoration-color:#e5ff62}
.lesson-explanation p{font-size:16px;line-height:1.6;margin:0 0 24px}
.lesson-explanation button{width:100%;min-height:44px}
.lesson-explanation .lesson-how{margin-top:-12px;color:#cfeef3;font-size:15px}
.lesson-explanation .lesson-guide{margin-top:-12px;padding:10px 12px;border-left:3px solid #e5ff62;border-radius:6px;background:#0a3445;color:#cfeef3;font-size:15px;line-height:1.5}.lesson-explanation .lesson-guide[hidden]{display:none}.lesson-explanation .lesson-guide small{display:block;margin-bottom:2px;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:#a5e6ef}
.lesson-challenges{margin:0 0 20px;padding:12px 14px;border:1px solid #9edce855;border-radius:10px;background:#0a3445}
.lesson-challenges h3{margin:0 0 8px;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:#a5e6ef}.lesson-challenges h3 small{font-weight:400;text-transform:none;letter-spacing:0;color:#cfeef3aa;margin-left:6px}
.lesson-challenges ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:15px;line-height:1.35}.lesson-challenges li[data-done=true]{color:#8ff0b0}.lesson-challenges li small{display:block;margin:1px 0 3px 1.3em;font-size:13px;line-height:1.3;color:#cfeef3b0}.lesson-challenges li[data-done=false]{color:#ffffffcc}
.lesson-explanation{max-height:calc(100dvh - 32px);overflow:auto}

/* Tennessee part two: the shootout's trick table is a score bug and stays at the
   top with the others; the header goes under it. Short landscape screens narrow
   the header to the table's left instead, so it only clears the lake column. */
@media(max-height:600px) and (orientation:landscape){
 #game[data-compact-lesson="true"][data-local-shootout="true"] #careerTutorial[data-compact="true"]{right:calc(min(48%,280px) + max(18px,env(safe-area-inset-right,0px)) + 14px)}
}

/* Powell's pop trainer stays in the compact header, above the riding view. */
#careerTutorial[data-step="clean-pop"]{left:18px;right:18px;padding:10px 30px 10px 12px}
#careerTutorial[data-step="clean-pop"] p{font-size:13px}
/* Where the last release was: a tick on the wake with the verdict over it (EARLY 0.12s / ON TIME / LATE 0.08s). */
#game[data-pop-trainer="true"][data-pop-phase="release"] #rideZone .stick-ring{border-color:#e5ff62;box-shadow:0 0 14px #e5ff6277}
#game[data-pop-trainer="true"][data-pop-phase="release"] #careerTutorial p{color:#e5ff62;font-weight:700}


/* The big pop meter: the everyday #rideNotes .pop-meter (hud.css), scaled up. */
.pop-trainer{margin-top:22px;max-width:320px}.pop-trainer[hidden]{display:none}
.pop-trainer-meter{display:flex;justify-content:center;padding:18px 10px 0}
.pop-trainer-line{position:relative;display:block;width:100%;height:4px;border-radius:2px;background:rgba(255,255,255,.35)}
.pop-trainer-top{position:absolute;left:50%;top:-7px;width:2px;height:18px;background:rgba(255,255,255,.75);transform:translateX(-50%)}
.pop-trainer-live{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;border:2px solid #fff;box-sizing:border-box;transform:translate(-50%,-50%);box-shadow:0 0 3px rgba(0,0,0,.5)}
.pop-trainer-live[hidden],.pop-trainer-mark[hidden]{display:none}
.pop-trainer[data-phase="release"] .pop-trainer-live{border-color:var(--hud-lime,#e5ff62);background:#e5ff6255}
.pop-trainer-mark{position:absolute;top:50%;width:0;height:0}
.pop-trainer-mark i{position:absolute;left:0;top:0;width:14px;height:14px;border-radius:50%;background:#fff;transform:translate(-50%,-50%);box-shadow:0 0 3px rgba(0,0,0,.5)}
.pop-trainer-mark em{position:absolute;bottom:9px;left:0;transform:translateX(-50%);padding:1px 5px;border-radius:4px;background:#0007;font:700 10px/1.2 var(--hud-font);font-style:normal;letter-spacing:.3px;white-space:nowrap}
.pop-trainer-mark[data-kind="clean"] i{background:var(--hud-lime,#e5ff62)}.pop-trainer-mark[data-kind="clean"] em{color:var(--hud-lime,#e5ff62)}
.pop-trainer-mark[data-kind="early"] em{color:#ffb347}.pop-trainer-mark[data-kind="late"] em{color:#ff8a8a}.pop-trainer-mark[data-kind="soft"] em{color:#b5edff}
.pop-trainer-labels{display:flex;justify-content:space-between;margin:9px 4px 0;font:500 9.5px/1.1 var(--hud-font);letter-spacing:.4px;color:#d2eaf3}.pop-trainer-labels b{color:#fff;font-weight:600}
@media(max-height:500px){.pop-trainer{margin-top:14px}.pop-trainer-meter{padding-top:14px}}
/* While the big meter is up, the small one under the pop cue would repeat it. */
#game[data-pop-trainer="true"] #rideNotes .pop-meter{display:none}/* Career beat lines as speech bubbles in each speaker's faded signature colour (signature-colors.mjs). */
.career-beat-lines p[data-sig]{padding:8px 12px;border-radius:13px 13px 13px 3px;background:var(--sig-faded);color:#101820}
.career-beat-lines p[data-sig] strong{color:#101820}
.career-beat-lines p[data-sig="you"]{border-radius:13px 13px 3px 13px;margin-left:12%}
.career-beat-lines p[data-sig]:not([data-sig="you"]){margin-right:12%}
/* The pause button stays through the openings (a story scene now leads straight into them). */

/* Career tiers (2026-10-10): the challenge checklist grouped under Pro and Legendary. */
.lesson-challenges li.lesson-tier{margin-top:6px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#a5e6ef}
.lesson-challenges li.lesson-tier:first-child{margin-top:0}
.lesson-challenges li.lesson-tier::before{content:'';display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;border:1.5px solid #cfeef3;vertical-align:-1px}
.lesson-challenges li.lesson-tier[data-tier=pro]::before{background:#d6ff32}
.lesson-challenges li.lesson-tier[data-tier=legendary]::before{background:#25b8ff}
/* Crew extras (career-tiers.mjs): count toward nothing, so no medal colour. */
.lesson-challenges li.lesson-tier[data-tier=extra]{margin-top:10px;color:#cfeef3}
.lesson-challenges li.lesson-tier[data-tier=extra]::before{background:none;border-style:dashed}
