/* Session 3 learning and gameplay experiences. Uses the shared application tokens. */
.gameplay-hero { position: relative; display: flex; min-height: 220px; align-items: center; justify-content: space-between; gap: 25px; padding: 27px 30px; margin: 18px 0 24px; overflow: hidden; background: linear-gradient(108deg,rgba(69,57,133,.38),rgba(28,75,103,.35)); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.gameplay-hero > div:first-child { position: relative; z-index: 2; max-width: 650px; }
.gameplay-hero h2 { max-width: 560px; margin: 13px 0 7px; font-size: clamp(20px,3vw,28px); letter-spacing: -.04em; }
.gameplay-hero p { max-width: 590px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.hero-feature-points { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 18px; color: var(--text-soft); font-size: 9px; }
.hero-key-art,.practice-hero-art,.campaign-hero-art,.challenge-hero-art { position: relative; display: flex; flex: 0 0 230px; height: 160px; align-items: center; justify-content: center; }
.hero-key-art:before,.practice-hero-art:before,.campaign-hero-art:before,.challenge-hero-art:before { position: absolute; inset: 6px 25px; content: ""; border: 1px dashed rgba(166,159,255,.33); border-radius: 50%; transform: rotate(-17deg); }
.hero-key-art span { display: grid; width: 47px; height: 47px; place-items: center; margin: 0 4px; color: #d7edff; background: rgba(76,117,168,.3); border: 1px solid rgba(188,216,255,.3); border-radius: 12px; font-weight: 800; transform: rotate(-7deg); box-shadow: 0 12px 25px rgba(0,0,0,.13); }
.hero-key-art span:nth-child(2) { transform: translateY(18px) rotate(8deg); }.hero-key-art strong { position: absolute; right: 18px; bottom: 3px; color: rgba(148,219,236,.7); font-size: 26px; }
.practice-hero { background: linear-gradient(105deg,rgba(27,78,91,.43),rgba(44,54,109,.43)); }.practice-hero-art span { position: absolute; display: grid; width: 42px; height: 42px; place-items: center; color: #e1ebff; background: rgba(73,116,151,.42); border: 1px solid rgba(255,255,255,.15); border-radius: 12px; font-weight: 850; }.practice-hero-art span:nth-child(1) { top: 22px; left: 47px; transform: rotate(-11deg); }.practice-hero-art span:nth-child(2) { top: 54px; right: 42px; transform: rotate(8deg); }.practice-hero-art span:nth-child(3) { bottom: 19px; left: 67px; transform: rotate(7deg); }.practice-hero-art strong { color: rgba(125,218,218,.78); font-size: 30px; }
.campaign-hero { background: linear-gradient(105deg,rgba(72,52,128,.44),rgba(36,70,105,.43)); }.campaign-hero-art span { display: grid; width: 75px; height: 75px; place-items: center; color: #fff; background: linear-gradient(145deg,#8672ed,#4a89ba); border: 1px solid rgba(255,255,255,.23); border-radius: 22px; font-size: 32px; box-shadow: 0 15px 38px rgba(49,49,117,.3); transform: rotate(-9deg); }.campaign-hero-art i { position: absolute; top: 15px; right: 38px; color: #ffe19b; font-size: 24px; }.campaign-hero-art b { position: absolute; bottom: 12px; left: 25px; color: #91e5db; font-size: 24px; }
.challenge-hero { background: linear-gradient(105deg,rgba(27,78,91,.42),rgba(58,49,119,.42)); }.challenge-hero-art span { display: grid; width: 78px; height: 78px; place-items: center; color: #fff; background: linear-gradient(140deg,#5daec0,#7773e6); border: 1px solid rgba(255,255,255,.3); border-radius: 25px; font-size: 38px; box-shadow: 0 12px 35px rgba(84,139,195,.28); transform: rotate(9deg); }.challenge-hero-art i { position: absolute; top: 18px; right: 36px; color: #ffe29c; font-size: 22px; }
.gameplay-board { margin: 20px 0; }.loading-state { padding: 25px; color: var(--muted); text-align: center; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.learning-summary-row { display: flex; align-items: center; gap: 16px; padding: 15px 18px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; }.learning-summary-row > div:first-child { min-width: 210px; }.learning-summary-row strong { display: block; margin-top: 3px; font-size: 18px; }.learning-summary-row strong small { color: var(--muted); font-size: 9px; font-weight: 550; }.learning-summary-track { height: 8px; flex: 1; overflow: hidden; background: var(--surface-3); border-radius: 9px; }.learning-summary-track span { display: block; height: 100%; background: linear-gradient(90deg,var(--primary),var(--cyan)); border-radius: inherit; transition: width .25s ease; }
.curriculum-layout { display: grid; grid-template-columns: minmax(230px,.72fr) minmax(0,1.7fr); gap: 14px; align-items: start; }.curriculum-level-list { display: grid; gap: 7px; }.curriculum-level { display: flex; width: 100%; align-items: center; gap: 10px; padding: 10px 12px; color: var(--text); text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 11px; cursor: pointer; transition: var(--transition); }.curriculum-level:hover { background: var(--surface-hover); border-color: var(--border-strong); }.curriculum-level.is-selected { background: color-mix(in srgb,var(--primary) 10%,var(--surface)); border-color: color-mix(in srgb,var(--primary) 50%,var(--border)); box-shadow: inset 3px 0 var(--primary); }.curriculum-level-icon { display: grid; width: 37px; height: 37px; flex: 0 0 auto; place-items: center; color: #b9afff; background: rgba(137,120,255,.13); border-radius: 10px; font-size: 13px; font-weight: 850; }.curriculum-level-copy { min-width: 0; flex: 1; }.curriculum-level-copy small,.curriculum-level-copy strong,.curriculum-level-copy em { display: block; }.curriculum-level-copy small { color: var(--muted-2); font-size: 7px; font-weight: 850; letter-spacing: .11em; }.curriculum-level-copy strong { margin-top: 2px; font-size: 10px; }.curriculum-level-copy em { margin-top: 3px; color: var(--muted); font-size: 8px; font-style: normal; }.curriculum-level-chevron { color: var(--muted-2); font-size: 19px; }
.curriculum-detail { min-width: 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }.curriculum-detail-head,.campaign-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }.curriculum-detail-head h2,.campaign-detail-head h2 { margin: 8px 0 5px; font-size: 17px; letter-spacing: -.03em; }.curriculum-detail-head p,.campaign-detail-head p { max-width: 580px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.65; }.level-progress-ring,.campaign-progress-circle { display: grid; flex: 0 0 62px; width: 62px; height: 62px; align-content: center; justify-items: center; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: 50%; }.level-progress-ring strong,.campaign-progress-circle strong { font-size: 14px; }.level-progress-ring small,.campaign-progress-circle small { color: var(--muted); font-size: 7px; }
.lesson-list { display: grid; gap: 8px; margin-top: 13px; }.lesson-row { display: flex; align-items: center; gap: 11px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; }.lesson-row.is-completed { border-color: rgba(75,212,160,.24); }.lesson-row-number { display: grid; width: 31px; height: 31px; flex: 0 0 auto; place-items: center; color: var(--muted); background: var(--surface-3); border-radius: 9px; font-size: 9px; font-weight: 850; }.lesson-row-copy { min-width: 0; flex: 1; }.lesson-row-copy strong { font-size: 10px; }.lesson-row-copy p { margin: 3px 0 4px; color: var(--muted); font-size: 8px; line-height: 1.5; }.lesson-row-copy small { color: var(--muted-2); font-size: 7px; }.lesson-row .button { flex: 0 0 auto; padding: 8px 11px; font-size: 8px; }
.practice-board-head,.challenge-board-head { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 13px; }.practice-board-head h2,.challenge-board-head h2 { margin: 5px 0 3px; font-size: 17px; }.practice-board-head p,.challenge-board-head p { max-width: 600px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.6; }.gameplay-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }.gameplay-card { display: flex; min-width: 0; flex-direction: column; padding: 15px; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; transition: transform var(--transition),border-color var(--transition); }.gameplay-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }.gameplay-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.gameplay-icon { display: grid; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; color: #b9afff; background: rgba(137,120,255,.13); border-radius: 11px; font-size: 15px; font-weight: 850; }.tone-left-reach,.tone-right-reach { color: #92d9ef; background: rgba(89,212,232,.12); }.tone-number-sequences { color: #ffd18b; background: rgba(255,189,103,.12); }.tone-code-snippet { color: #92e4bc; background: rgba(75,212,160,.12); }.gameplay-card h3 { margin: 12px 0 5px; font-size: 12px; }.gameplay-card > p { min-height: 42px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.65; }.gameplay-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; margin-top: auto; color: var(--muted); border-top: 1px solid var(--border); font-size: 8px; }.gameplay-card-meta strong { color: var(--text-soft); font-size: 8px; }.gameplay-card .button { width: 100%; justify-content: center; padding: 9px; font-size: 9px; }
.campaign-picker-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-bottom: 14px; }.campaign-picker-card { display: grid; min-width: 0; justify-items: start; gap: 8px; padding: 13px; color: var(--text); text-align: left; background: var(--surface); border: 1px solid var(--border); border-radius: 13px; cursor: pointer; transition: var(--transition); }.campaign-picker-card:hover { border-color: var(--border-strong); transform: translateY(-2px); }.campaign-picker-card.is-selected { border-color: color-mix(in srgb,var(--primary) 60%,var(--border)); box-shadow: inset 0 0 0 1px color-mix(in srgb,var(--primary) 23%,transparent); background: color-mix(in srgb,var(--primary) 8%,var(--surface)); }.campaign-picker-icon { display: grid; width: 37px; height: 37px; place-items: center; color: #c0b6ff; background: rgba(137,120,255,.14); border-radius: 11px; font-size: 17px; }.campaign-picker-card.orange .campaign-picker-icon { color: #ffd19a; background: rgba(255,189,103,.12); }.campaign-picker-card.green .campaign-picker-icon { color: #88e1bb; background: rgba(75,212,160,.12); }.campaign-picker-card.cyan .campaign-picker-icon { color: #8ce1ec; background: rgba(89,212,232,.12); }.campaign-picker-card > strong { font-size: 10px; }.campaign-picker-card > small { color: var(--muted); font-size: 8px; line-height: 1.4; }.campaign-detail-panel { padding: 19px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }.campaign-stage-list { display: grid; gap: 8px; margin-top: 13px; }.campaign-stage { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }.campaign-stage.is-completed { border-color: rgba(75,212,160,.23); }.campaign-stage.is-locked { opacity: .53; }.campaign-stage-index { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; color: var(--muted); background: var(--surface-3); border-radius: 50%; font-size: 9px; font-weight: 850; }.campaign-stage.is-completed .campaign-stage-index { color: #83e6ba; background: rgba(75,212,160,.12); }.campaign-stage > div { min-width: 0; flex: 1; }.campaign-stage strong { font-size: 10px; }.campaign-stage p { margin: 3px 0 0; color: var(--muted); font-size: 8px; line-height: 1.5; }.campaign-stage .button { padding: 8px 11px; font-size: 8px; }.stage-lock { color: var(--muted-2); font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.challenge-rule-list { display: grid; gap: 5px; padding: 10px 0; color: var(--muted); font-size: 8px; }.challenge-game-card > p { min-height: 48px; }.session-only-note { display: flex; align-items: flex-start; gap: 11px; padding: 14px; margin: 16px 0; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }.session-only-note .note-icon { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; color: var(--cyan); background: rgba(89,212,232,.1); border-radius: 9px; }.session-only-note strong { font-size: 9px; }.session-only-note p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.6; }.session-only-note.learning-note { margin-top: 20px; }.session-only-note.learning-note .note-icon { color: var(--primary); background: rgba(137,120,255,.12); }
.activity-player { padding: 21px; margin: 22px 0; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 17px; box-shadow: var(--shadow); scroll-margin-top: 88px; }.activity-player-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }.activity-player-head h2 { margin: 8px 0 4px; font-size: 19px; }.activity-player-head p { max-width: 700px; margin: 0; color: var(--muted); font-size: 9px; line-height: 1.65; }.activity-metrics,.activity-result-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 16px 0 12px; }.activity-metrics > div,.activity-result-stats > div { display: grid; gap: 4px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; }.activity-metrics small,.activity-result-stats small { color: var(--muted-2); font-size: 7px; font-weight: 850; letter-spacing: .1em; }.activity-metrics strong,.activity-result-stats strong { font-size: 17px; font-variant-numeric: tabular-nums; }.activity-progress { height: 6px; overflow: hidden; background: var(--surface-3); border-radius: 6px; }.activity-progress span { display: block; width: 0; height: 100%; background: linear-gradient(90deg,var(--primary),var(--cyan)); border-radius: inherit; transition: width .15s ease; }.activity-passage-wrap { min-height: 126px; padding: 17px; margin: 14px 0 11px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; cursor: text; }.activity-passage { color: var(--muted); font-size: clamp(14px,1.8vw,18px); line-height: 1.9; overflow-wrap: anywhere; }.activity-passage .typing-char.is-correct { color: var(--green); }.activity-passage .typing-char.is-error { color: var(--red); background: rgba(255,124,147,.12); border-radius: 3px; }.activity-passage .typing-char.is-current { color: var(--text); background: rgba(139,123,255,.22); border-bottom: 2px solid var(--primary); }.activity-input-label { display: block; margin: 10px 0 6px; color: var(--text-soft); font-size: 8px; font-weight: 800; }.activity-capture { display: block; width: 100%; min-height: 48px; resize: vertical; padding: 11px 13px; color: var(--text); background: var(--bg-soft); border: 1px solid var(--border-strong); border-radius: 10px; font: 12px/1.5 var(--font); outline: none; }.activity-capture:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(139,123,255,.13); }.activity-capture:disabled { opacity: .55; }.activity-input-help { margin: 6px 0 0; color: var(--muted-2); font-size: 8px; }.activity-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; margin-top: 10px; border-top: 1px solid var(--border); }.activity-state { color: var(--muted); font-size: 8px; font-weight: 800; }.activity-control-buttons,.activity-result-actions { display: flex; flex-wrap: wrap; gap: 7px; }.activity-controls .button,.activity-result-actions .button { padding: 8px 12px; font-size: 8px; }.activity-passage-wrap.is-paused { opacity: .55; }.activity-result { padding-top: 16px; margin-top: 13px; border-top: 1px solid var(--border); }.activity-result-title { display: flex; align-items: center; gap: 12px; }.activity-result-icon { display: grid; width: 40px; height: 40px; place-items: center; color: var(--amber); background: rgba(255,189,103,.12); border-radius: 13px; font-size: 19px; font-weight: 850; }.activity-result-icon.is-success { color: var(--green); background: rgba(75,212,160,.12); }.activity-result-title h3 { margin: 4px 0 2px; font-size: 15px; }.activity-result-title p { margin: 0; color: var(--muted); font-size: 9px; }.activity-criteria { display: grid; gap: 7px; padding: 0; margin: 13px 0; list-style: none; }.activity-criteria li { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 9px; }.activity-criteria li span:first-child { color: var(--muted-2); font-weight: 850; }.activity-criteria li.is-passed span:first-child { color: var(--green); }.activity-criteria li.is-failed span:first-child { color: var(--red); }

@media (max-width: 980px) { .curriculum-layout { grid-template-columns: 1fr; }.curriculum-level-list { grid-template-columns: repeat(2,minmax(0,1fr)); }.gameplay-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.campaign-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 640px) { .gameplay-hero { min-height: 0; padding: 21px; }.hero-key-art,.practice-hero-art,.campaign-hero-art,.challenge-hero-art { display: none; }.learning-summary-row { flex-wrap: wrap; }.learning-summary-row > div:first-child { min-width: 0; flex: 1; }.learning-summary-track { order: 3; flex-basis: 100%; }.curriculum-level-list { grid-template-columns: 1fr; }.curriculum-detail { padding: 13px; }.lesson-row { flex-wrap: wrap; }.lesson-row-copy { flex-basis: calc(100% - 45px); }.lesson-row .button { width: 100%; justify-content: center; }.practice-board-head,.challenge-board-head { align-items: flex-start; flex-direction: column; }.gameplay-card-grid { grid-template-columns: 1fr; }.campaign-picker-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }.campaign-picker-card { padding: 10px; }.campaign-stage { flex-wrap: wrap; }.campaign-stage > div { flex-basis: calc(100% - 48px); }.campaign-stage .button { width: 100%; justify-content: center; }.stage-lock { margin-left: auto; }.activity-player { padding: 13px; }.activity-metrics,.activity-result-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }.activity-controls { align-items: flex-start; flex-direction: column; }.activity-control-buttons { width: 100%; }.activity-control-buttons .button { flex: 1; justify-content: center; }.activity-result-actions { display: grid; grid-template-columns: 1fr 1fr; }.activity-result-actions .button { justify-content: center; } }