/* Course profiles and beginner mates use the app's own palette and pieces. */
.site-header { position:relative; }
.offline-profile-entry { min-height:44px; padding:8px 12px; color:#9ceddf; border:1px solid #356265; border-radius:24px; background:#102b32; font:inherit; font-size:12px; margin-left:auto; }
body[data-app-section=play][data-app-view=lesson] .offline-profile-entry { display:none; }
.level-screen { position:fixed; inset:0; z-index:80; overflow:auto; color:#e9f0f7; background:radial-gradient(ellipse at 95% 0,#183642 0,transparent 55%),#081322; padding:28px 20px; }
.level-content { max-width:880px; margin:auto; }
.level-eyebrow { color:#87d8c9; font-size:10px; font-weight:800; letter-spacing:2.5px; margin:0 0 14px; }
.level-content h1 { max-width:560px; font-size:clamp(28px,6vw,46px); line-height:1.08; letter-spacing:-1px; margin:0; color:#f1f5f8; }
.level-intro { color:#b0c4d2; font-size:14px; line-height:1.55; max-width:480px; margin:12px 0 22px; }
.level-cards { display:grid; gap:14px; }
.level-card { display:flex; position:relative; width:100%; align-items:center; padding:21px 19px; border-radius:20px; text-align:left; color:#eaf6f4; background:linear-gradient(130deg,#16483f,#12283a); border:1px solid #4c9682; box-shadow:0 10px 28px #0003; font:inherit; }
.level-card--advanced { background:linear-gradient(135deg,#363326,#172538); border-color:#8c7851; }
.level-card-copy { display:flex; flex-direction:column; gap:9px; min-width:0; z-index:1; padding-right:54px; }
.level-card-kicker { font-size:9px; letter-spacing:1.2px; color:#98dfce; font-weight:800; }
.level-card--advanced .level-card-kicker { color:#e7c987; }
.level-card strong { font-size:23px; line-height:1.12; letter-spacing:-.5px; }
.level-card-description { font-size:13px; line-height:1.5; color:#ccdadf; }
.level-card-meta { font-size:11px; line-height:1.5; color:#a9c7c8; }
.level-card-action { margin-top:4px; font-size:12px; font-weight:800; color:#afffe5; }
.level-card--advanced .level-card-action { color:#f4d896; }
.level-card-art { position:absolute; right:8px; top:calc(50% - 44px); width:76px; height:88px; object-fit:contain; filter:drop-shadow(0 8px 12px #0007); }
.level-footnote { font-size:11px; line-height:1.6; color:#a5bac9; margin:19px 3px 10px; max-width:620px; }
.level-close { min-height:48px; width:100%; margin-top:10px; }
.basic-play,.basic-section { min-width:0; padding:0!important; border:0!important; background:none!important; }
.journey-lesson .puzzle-module-section.basic-section { display:block; }
.basic-tools { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:7px; margin:3px 0 6px; align-items:start; }
.basic-tools>details[open] { grid-column:1/-1; }
.basic-selector { border:1px solid #2f4e60; background:#122234; border-radius:12px; margin:0; }
.basic-selector>summary { min-height:44px; padding:12px; font-size:13px; color:#cfe5ea; cursor:pointer; }
.basic-selector h3 { margin:10px 12px; font-size:14px; color:#a4ead7; }
.basic-puzzle-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; padding:0 12px 12px; }
.basic-slot { min-height:44px; border-radius:9px; border:1px solid #385568; background:#1a2c42; color:#d4e1ed; font-weight:700; }
.basic-slot[data-result=alone] { background:#195445; border-color:#71c5a2; }
.basic-slot[data-result=help] { background:#57482a; border-color:#b99b59; }
.basic-slot[data-result=alone]::after { content:' ✓'; }
.basic-slot[data-result=help]::after { content:' A'; }
.basic-slot[aria-current] { outline:2px solid #e8ca81; outline-offset:1px; }
.basic-selector-legend { font-size:11px; padding:0 12px 12px; color:#b3c7d7; }
.basic-top { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 3px 2px; }
.basic-goal { font-size:21px; color:#e8f0f5; letter-spacing:-.4px; }
.basic-counter { font-size:12px; color:#9febd4; font-weight:700; border-radius:20px; background:#163b37; padding:7px 10px; white-space:nowrap; }
.basic-rule { font-size:12px; color:#b4cada; margin:0; }
.basic-rule summary { min-height:44px; padding:13px 3px; cursor:pointer; }
.basic-rule p { line-height:1.6; margin:4px 0 8px; }
.basic-workspace { display:grid; gap:7px; align-items:start; }
.basic-board-frame { display:flex!important; justify-content:center; padding:0!important; background:none!important; border:0!important; min-width:0; }
.basic-board { margin:0 auto; flex:none; border:0!important; border-radius:8px; width:100%; aspect-ratio:1; }
.basic-controls { height:164px; display:flex; flex-direction:column; gap:8px; min-width:0; }
[data-mate-state=failed] .basic-controls { height:208px; }
[data-mate-state=failed] .basic-actions { flex-direction:row; align-items:stretch; }
[data-mate-state=failed] .basic-primary { width:auto; flex:1.4; font-size:12px; }
[data-mate-state=failed] .basic-secondary { flex:1; }
.basic-message { flex:1; min-height:0; overflow:auto; padding:9px 12px; border:1px solid #344c5e; background:#112335; border-radius:10px; }
.basic-message strong { display:block; font-size:16px; line-height:1.3; color:#edf3f7; }
.basic-message p { font-size:12px; line-height:1.55; color:#bcd0dc; margin:4px 0 0; }
[data-mate-state=solved] .basic-message { border-color:#4b9a7f; background:#143d35; }
[data-mate-state=failed] .basic-message { border-color:#a97761; background:#362e30; }
.basic-actions { display:flex; flex-direction:column; gap:6px; }
.basic-primary { width:100%; min-height:44px; padding:10px; }
.basic-section.has-gem-guidance .basic-controls { height:auto; }
.basic-section.has-gem-guidance .basic-message { flex:none; overflow:visible; }
.basic-actions .guide-more { width:100%; min-height:44px; white-space:normal; }
.guide-more[hidden] { display:none!important; }
.basic-secondary { display:flex; gap:6px; }
.basic-secondary button { flex:1; min-width:0; min-height:44px; padding:7px 5px; font-size:11px; }
.basic-review-controls { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.basic-review-controls button { min-height:44px; font-size:11px; padding:7px 5px; }
.basic-review-controls button:last-child { grid-column:1/-1; }
.basic-review-controls[hidden],.basic-actions[hidden],.basic-primary[hidden],.basic-secondary[hidden],.basic-secondary button[hidden],.basic-review-controls button[hidden] { display:none; }
.basic-about { margin:12px 3px; color:#acbdca; font-size:12px; }
.basic-about summary { min-height:44px; padding:12px 0; }
.basic-about p { margin:5px 0; overflow-wrap:anywhere; }
body[data-level=basic] .offline-progress-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(min-width:680px) { .level-cards{grid-template-columns:1fr 1fr}.level-content{padding-top:24px}.level-card{min-height:265px}.level-card strong{font-size:28px}.level-card-art{width:84px}.level-close{max-width:360px} }
@media(min-width:600px) and (max-height:599px) { .basic-workspace{grid-template-columns:minmax(0,1fr) minmax(220px,.9fr);gap:12px}.basic-controls{height:230px}.basic-about{margin-top:8px}.basic-selector{margin-bottom:4px}.basic-rule{margin-bottom:2px}.basic-goal{font-size:18px} }
@media(prefers-reduced-motion:reduce) { .level-screen *,.basic-play *{scroll-behavior:auto;transition:none!important;animation:none!important} }
@media(max-width:360px) { .basic-goal{font-size:19px}.basic-counter{font-size:11px} }