/* Two-column lobby: brand and navigation share the normal document scroll. */
/* Reference-inspired title face, bundled so Android/iOS/desktop use the same lettering. */
.app-shell{display:grid;grid-template-columns:calc(260px + var(--safe-left)) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.app-shell .sidebar{position:static;inset:auto;width:auto;min-width:0;align-self:stretch;padding:calc(28px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left));overflow:visible}
.app-shell .workspace{margin-left:0;min-width:0;padding-top:var(--safe-top);padding-right:var(--safe-right)}
.app-brand{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:0 0 24px;flex-shrink:0;text-align:left;color:#fff;border-bottom:1px solid #354658}
.app-shell .sidebar nav{flex-shrink:0;margin-top:24px}
.app-shell .side-caddy{margin-top:32px;padding:0 6px}
@media(max-width:1200px) and (min-width:761px){.app-shell{grid-template-columns:calc(220px + var(--safe-left)) minmax(0,1fr)}.app-shell .sidebar{padding-right:14px;padding-left:calc(14px + var(--safe-left))}.app-brand{gap:8px}}
.help-page{max-width:1100px;margin:auto}.help-return{margin-top:22px;gap:10px;display:inline-flex;align-items:center;min-height:52px}
.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.help-card{background:#fff;border:1px solid #dce9ed;border-radius:20px;padding:28px;min-width:0}
.help-card h2,.help-about h2{font-size:26px;line-height:1.4;color:#21384b;margin-bottom:20px}
.help-card h3{font-size:21px;line-height:1.5;margin:24px 0 10px;color:#336a6f}.help-card h3:first-of-type{margin-top:0}
.help-card p{font-size:19px;line-height:1.85;color:#476373}.help-card p+p{margin-top:16px}.help-card .secondary{margin-top:24px;min-height:56px;font-size:19px}
.help-card .guide-steps{margin:0}.help-card .guide-steps>div{gap:16px;align-items:flex-start}.help-card .guide-steps strong{font-size:21px;line-height:1.5}.help-card .guide-steps small{display:block;font-size:19px;line-height:1.85;color:#476373;margin-top:8px}.help-card .guide-steps>div>b{font-size:21px;flex-shrink:0}
.help-card .help-note{border-top:1px solid #dce9ed;padding-top:16px;color:#526354}
.help-about{border-top:1px solid #cddde0;margin-top:36px;padding:28px 0 12px}.help-about dl{margin:0;display:grid;gap:16px}.help-about dl>div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;font-size:18px;line-height:1.6}.help-about dt{color:#526777}.help-about dd{margin:0;font-weight:600;overflow-wrap:anywhere}
@media(max-height:740px) and (min-width:761px){.side-caddy{display:none}}
@media(max-width:1100px){.help-grid{grid-template-columns:1fr}}
@media(max-width:760px){.app-shell{display:block}.app-shell .workspace{padding:0}.app-shell .sidebar{display:flex;background:transparent;border:0;padding:calc(12px + var(--safe-top)) max(12px,var(--safe-right)) 0 max(12px,var(--safe-left))}.app-shell .sidebar nav,.app-shell .side-caddy{display:none}.app-brand{gap:12px;width:fit-content;padding:0;border:0;color:#1e2838}.mobile-nav{grid-template-columns:repeat(5,minmax(0,1fr))}.mobile-nav button{font-size:16px;min-height:56px;padding-inline:0}.help-card{padding:24px 20px}.help-card h2,.help-about h2{font-size:25px}.help-about dl>div{grid-template-columns:90px minmax(0,1fr);gap:12px}.help-card .guide-steps>div{gap:12px}.help-card .guide-steps>div>b{width:30px;height:30px;line-height:30px}.help-return{width:100%;justify-content:center}}

.music-toggle{min-height:54px;font-size:19px;line-height:1.5}.music-toggle[aria-pressed="false"]{background:#eef2f3;color:#455d69;border-color:#ccd9dd}

/* Course selection must be distinct from green course art, with text as well as color. */
.course-section .course-card{border:3px solid #d4dfe3;transition:border-color .15s,box-shadow .15s}
.course-section .course-card.selected{border-color:#233b5b;background:#fff7dc;box-shadow:0 0 0 2px #f0bf4f,0 5px 14px #233b5b18}
.course-section .course-card.selected .card-body{background:#fff7dc}
.course-section .selection-check{width:36px;height:36px;top:12px;right:12px;border:2px solid #758697;background:#fffffff2;border-radius:10px}
.course-section .selected .selection-check{width:44px;height:44px;border:2px solid #fff;background:#ffdc65;color:#172d49;box-shadow:0 2px 8px #182b4530}
.course-section .selected .selection-check svg{width:28px;height:28px;stroke-width:3}
.course-selection-banner{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;min-height:46px;padding:9px 14px;background:#233b5b;color:#fff;font-size:18px;line-height:1.4;font-weight:700;letter-spacing:0}
.course-selection-banner b{color:#ffdf79;font-size:18px}.course-selection-banner>span{white-space:nowrap}
.course-section .selected .course-tag{display:none}
.course-section .selected .card-meta{border-color:#decf9b}.course-section .selected .card-meta strong{font-size:18px;color:#233b5b;font-weight:800}
.course-section .selected-count{border:2px solid #233b5b;background:#fff7dc;color:#233b5b;font-size:18px}.course-section .selected-count b{color:#233b5b}
@media(max-width:400px){.course-selection-banner{padding:8px 12px}.course-section .selection-check{top:10px;right:10px}}
@media(forced-colors:active){.course-section .course-card.selected{border-color:Highlight;outline:2px solid Highlight}.course-selection-banner{border-top:2px solid Highlight}}

/* One symbol and wordmark treatment for the game and administrator pages. */
@font-face{font-family:'Park Player Title';src:url('../assets/fonts/Belleza-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
.park-player-brand{display:flex;align-items:center;gap:10px}
.park-player-brand .park-player-symbol{display:block;width:44px;height:44px;flex-shrink:0;border-radius:11px;object-fit:contain}
.park-player-brand .park-player-wordmark{display:inline-block;font-family:'Park Player Title',Georgia,serif;font-size:34px;line-height:1.2;font-weight:400;letter-spacing:-.3px;-webkit-text-stroke:.18px currentColor;white-space:nowrap}
@media(max-width:1200px) and (min-width:761px){.park-player-brand{gap:8px}.park-player-brand .park-player-symbol{width:40px;height:40px}.park-player-brand .park-player-wordmark{font-size:30px}}
@media(max-width:760px){.park-player-brand{gap:12px}}