/* Course selection artwork is separate from the homepage and lobby. */
#help-panel:is([data-page=courses],[data-page=holes]){padding:0;background:linear-gradient(105deg,#03121b99,#071a2777),url('../assets/ui/course-selection-background-v1.png') center/cover;backdrop-filter:none}
#help-panel:is([data-page=courses],[data-page=holes]) .menu-sheet{width:100%;max-width:none;height:100dvh;max-height:100dvh;padding:32px clamp(24px,4vw,76px);border:0;box-shadow:none;border-radius:0;background:transparent;overflow:auto}
#help-panel:is([data-page=courses],[data-page=holes]) .sheet-top{max-width:1700px;margin:0 auto;align-items:center}
#help-panel:is([data-page=courses],[data-page=holes]) #panel-title{max-width:1700px;margin:16px auto 28px;font-size:clamp(40px,4.2vw,66px);line-height:1;transform:none;text-shadow:3px 4px #020f18}
#help-panel:is([data-page=courses],[data-page=holes]) .sheet-top .kicker{border:0;border-left:3px solid #bd315c;padding:2px 12px;font-size:13px;letter-spacing:.12em}
#help-panel:is([data-page=courses],[data-page=holes]) .sheet-top .icon-button{transform:none}
#help-panel :is([data-sheet=courses],[data-sheet=holes]){max-width:1700px;margin:auto;animation:selection-reveal .35s ease-out both}
#help-panel :is([data-sheet=courses],[data-sheet=holes]) .flow-footer{margin-top:22px}
#help-panel :is([data-sheet=courses],[data-sheet=holes]) .flow-footer .secondary{border:0;border-left:3px solid #7498a4;background:linear-gradient(90deg,#163440cc,transparent);color:#fff0ce;box-shadow:none;padding:12px 20px;font-size:22px;min-height:48px;transform:none}
#help-panel .course-list{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(280px,1fr));gap:22px;height:clamp(582px,calc(100dvh - 290px),1000px)}
#help-panel .course-card{min-height:0;min-width:0;gap:12px;padding:24px 28px;transform:none;box-shadow:0 14px 35px #020b1566;border:1px solid #7796a755;border-radius:0;transition:transform .25s,border-color .25s,box-shadow .25s;background:linear-gradient(0deg,#03121bf5,transparent 72%),var(--course-art) center/cover}
#help-panel .course-card::after{background:linear-gradient(110deg,#04202b30,transparent);mask-image:none;pointer-events:none}
#help-panel .course-card.course-skyline-trials{--course-art:url('../assets/ui/course-skyline-circuit-v1.png');border-bottom:4px solid #bd315c}
#help-panel .course-card.course-foundry{--course-art:url('../assets/ui/course-foundry-v1.png')}
#help-panel .course-card.course-underworld{--course-art:url('../assets/ui/course-underworld-v1.png')}
#help-panel .course-card.course-skyline-full{--course-art:url('../assets/ui/course-skyline-full-v1.png')}
#help-panel .course-card:hover,#help-panel .course-card:focus-visible{transform:translateY(-3px);border-color:#f0c59a;box-shadow:0 0 32px #bd315c30}
#help-panel .course-card .course-index{top:22px;left:28px;right:auto;font:12px/1.2 Arial,sans-serif;letter-spacing:.12em;color:#fff0ce;border-left:3px solid #bd315c;padding:8px 10px;background:#041520c9;text-shadow:none}
#help-panel .course-card strong{font:clamp(30px,3vw,48px)/1 var(--comic-type);letter-spacing:.025em;max-width:100%;text-shadow:3px 4px #03121d}

#help-panel .course-card b{border:0;padding:0;font:18px/1.2 var(--comic-type);letter-spacing:.09em;color:#bbc8cb}
#help-panel .course-card.course-skyline-trials b{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #f2d6ad66;padding-top:12px;color:#fff0ce;font-size:18px}
#help-panel .course-card b span{font:24px/1 Arial,sans-serif;color:#f18aab}
#help-panel .hole-layout{grid-template-columns:minmax(0,1.8fr) minmax(330px,1fr);gap:28px;align-items:stretch;min-height:clamp(580px,calc(100dvh - 310px),980px)}
#help-panel .hole-feature{position:relative;isolation:isolate;display:flex;align-items:flex-end;padding:36px;border:1px solid #8099a655;border-bottom:5px solid #bd315c;box-shadow:0 16px 36px #020b1555;background:#061b27;overflow:hidden;min-width:0}
#help-panel .hole-art{position:absolute;inset:0;z-index:-1;height:100%;padding:0;border:0;box-shadow:none;background:linear-gradient(0deg,#041520 1%,#041520cc 25%,#04152020 65%),var(--course-art,url('../assets/ui/course-skyline-circuit-v1.png')) center/cover;transition:transform 1s ease}
#help-panel .hole-feature:hover .hole-art{transform:scale(1.025)}
#help-panel [data-course=foundry] .hole-art{--course-art:url('../assets/ui/course-foundry-v1.png')}
#help-panel [data-course=underworld] .hole-art{--course-art:url('../assets/ui/course-underworld-v1.png')}
#help-panel [data-course=skyline-full] .hole-art{--course-art:url('../assets/ui/course-skyline-full-v1.png')}
#help-panel .hole-feature-content{width:100%;padding-top:180px}
#help-panel .hole-feature .kicker{font:15px Arial,sans-serif;letter-spacing:.16em;color:#f1d5a5}
#help-panel .hole-feature #course-name{font:clamp(50px,5.6vw,90px)/1 var(--comic-type);letter-spacing:.02em;margin:12px 0;text-shadow:3px 4px #02121d}
#help-panel .hole-feature #hole-summary{font:22px/1.3 var(--comic-type);letter-spacing:.06em;color:#f0d3a8;margin:0 0 28px}
#help-panel .hole-feature :is(#hole-launch,#hole-practice){max-width:430px;min-height:60px;margin:12px 0 0;font-size:29px;transform:none}
#help-panel .hole-feature #hole-practice{background:#0b2634e6;color:#fff0ce;border:1px solid #b5c5c799;box-shadow:0 4px #020f18}
#help-panel .hole-feature .tour-choice{font:16px Arial,sans-serif;color:#d5e0de;margin:22px 0 0}
#help-panel .hole-feature .tour-choice input{width:21px;height:21px;margin:0}
#help-panel .hole-picker{min-width:0;display:flex;flex-direction:column;padding:26px;background:linear-gradient(140deg,#102d3adc,#061721e8);border-top:3px solid #71949f55}
#help-panel .hole-picker h3{font:25px var(--comic-type);letter-spacing:.08em;margin:0 0 22px;color:#fff0ce}
#help-panel .hole-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;flex:1}
#help-panel .hole-tile{aspect-ratio:auto;min-height:66px;gap:3px;padding:8px;background:#18344188;box-shadow:none;border:1px solid #7395a644;transform:none;color:#99b1b8}
#help-panel .hole-tile strong{font:30px var(--comic-type)}
#help-panel .hole-tile span{height:16px;font:11px Arial,sans-serif;letter-spacing:.03em;display:flex;align-items:center;justify-content:center}
#help-panel .hole-tile svg{width:11px;height:13px;stroke:currentColor;stroke-width:1.5;fill:none}
#help-panel .hole-tile:disabled{opacity:.65}
#help-panel .hole-tile[aria-pressed=true]{background:linear-gradient(130deg,#d03b6b,#8b2349);color:#fff0ce;border:1px solid #efd5b3;box-shadow:0 0 24px #bd315c30;transform:none}
@keyframes selection-reveal{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(max-width:1000px){#help-panel .course-list{gap:16px}#help-panel .course-card{padding:24px}#help-panel .hole-layout{grid-template-columns:1.5fr 1fr;gap:18px}#help-panel .hole-feature{padding:26px}#help-panel .hole-picker{padding:18px}#help-panel .hole-grid{gap:8px}}
@media(max-width:700px){
 #help-panel:is([data-page=courses],[data-page=holes]) .menu-sheet{padding:22px 18px}
 #help-panel:is([data-page=courses],[data-page=holes]) #panel-title{font-size:40px;margin:20px 0 24px}
 #help-panel .course-list{height:auto;grid-template-columns:1fr;grid-template-rows:auto;gap:18px}
 #help-panel .course-card{min-height:300px;padding:24px}
 #help-panel .course-card .course-index{top:24px;left:24px;font-size:14px}
 #help-panel .hole-layout{grid-template-columns:1fr;min-height:0;gap:22px}
 #help-panel .hole-feature{min-height:580px;padding:24px}#help-panel .hole-feature #course-name{font-size:56px}#help-panel .hole-feature #hole-summary{font-size:19px}
 #help-panel .hole-picker{padding:20px}#help-panel .hole-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}#help-panel .hole-tile{min-height:66px;padding:6px 1px}#help-panel .hole-tile strong{font-size:26px}#help-panel .hole-tile span{font-size:8px}
}
@media(max-width:420px){#help-panel .hole-grid{grid-template-columns:repeat(3,minmax(0,1fr))}#help-panel .hole-tile span{font-size:11px}}
@media(prefers-reduced-motion:reduce){#help-panel :is([data-sheet=courses],[data-sheet=holes]){animation:none}#help-panel :is(.course-card,.hole-art){transition:none}}
.reduced-motion #help-panel :is([data-sheet=courses],[data-sheet=holes]){animation:none}.reduced-motion #help-panel :is(.course-card,.hole-art){transition:none}

#help-panel .hole-feature #hole-summary{margin-bottom:12px}#help-panel .hole-par{display:table;padding:7px 12px;margin-bottom:18px;border-left:3px solid #bd315c;background:#051924df;color:#fff0ce;font:24px/1 var(--comic-type);letter-spacing:.06em}#help-panel .hole-par[hidden]{display:none}