/* Dashboard-only styles. Native links keep every mode keyboard accessible. */
.dashboard-page, .dashboard-page *, .dashboard-page *::before, .dashboard-page *::after { box-sizing: border-box; }
.dashboard-page h1, .dashboard-page h2, .dashboard-page h3, .dashboard-page p { margin: 0; }
.dashboard-header form { margin: 0; flex-shrink: 0; }
.brand-mark { flex-shrink: 0; }
body.dashboard-page { margin: 0; padding: 0; display: block; min-height: 100vh; color: #eef3ff; font-family: 'Segoe UI', sans-serif; background: radial-gradient(ellipse at 12% 0%, #153043 0, transparent 45%), radial-gradient(ellipse at 100% 65%, #211c3b 0, transparent 45%), #0a101d; }
.dashboard-page .dashboard-container { width: min(1120px, calc(100% - 48px)); max-width: 1120px; margin: 0 auto; padding: 26px 0 18px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.dashboard-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid #ffffff12; }
.brand { display: flex; align-items: center; gap: 12px; color: #f3f7ff; text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: 1.5px; }
.brand-mark { display: grid; place-content: center; position: relative; width: 43px; height: 43px; border: 1px solid #67e8d955; border-radius: 12px; background: #17343d; font: bold 25px monospace; color: #77efdf; }
.brand-mark span { position: absolute; right: 6px; bottom: 7px; font-size: 18px; }
.brand small { display: block; font-size: 9px; color: #95a7be; margin-top: 5px; letter-spacing: 2px; }
.logout-btn { border: 1px solid #ffffff20; border-radius: 9px; padding: 9px 15px; color: #c1cddd; background: #ffffff05; cursor: pointer; }
.logout-btn span { margin-left: 12px; }
.welcome-section { padding: 28px 0 24px; }
.dashboard-page .eyebrow { color: #78dccc; font-size: 10px; font-weight: 700; letter-spacing: 2px; margin-bottom: 9px; }
.welcome-section h1 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -1px; line-height: 1.25; overflow-wrap: anywhere; margin-bottom: 8px; }
.welcome-section p { font-size: 14px; color: #a2b1c6; line-height: 1.6; }
.challenge { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 36px; padding: 32px; border: 1px solid #69dccc35; border-radius: 20px; background: radial-gradient(ellipse at 10% 10%, #24676665, transparent 75%), linear-gradient(115deg, #142d36, #131e31 65%, #202342); }
.challenge::after { content: ''; position: absolute; width: 220px; height: 220px; border: 1px solid #79e1d414; border-radius: 50%; right: -95px; bottom: -110px; pointer-events: none; }
.pill { display: inline-flex; align-items: center; gap: 8px; color: #92f2df; font-size: 9px; font-weight: 700; letter-spacing: 1.5px; border: 1px solid #8be6d52b; background: #62c9b90b; border-radius: 30px; padding: 7px 10px; }
.status-dot { width: 6px; height: 6px; background: #7bf2d2; border-radius: 50%; box-shadow: 0 0 10px #7bf2d266; }
.challenge h2 { max-width: 400px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -1.2px; margin: 18px 0 12px; }
.challenge-copy > p { max-width: 420px; color: #b5c7d5; font-size: 14px; line-height: 1.7; }
.primary-action { display: inline-flex; justify-content: space-between; align-items: center; gap: 25px; min-height: 46px; margin-top: 23px; padding: 12px 18px; background: #86edda; border-radius: 9px; color: #0a302e; text-decoration: none; font-size: 13px; font-weight: 750; box-shadow: 0 5px 25px #57d8c018; transition: background .2s, transform .2s; }
.primary-action:hover { background: #b6ffed; transform: translateY(-2px); }
.challenge-note { display: block; color: #97b9bb; font-size: 11px; margin-top: 11px; }
.code-window { min-width: 0; transform: rotate(-2deg); background: #0a1422; border: 1px solid #738db43a; border-radius: 12px; box-shadow: 0 24px 40px #00000038; overflow: hidden; }
.code-title { display: flex; justify-content: space-between; padding: 12px 15px; border-bottom: 1px solid #ffffff0d; color: #94a7bf; font: 11px monospace; }
.code-title > span:first-child { color: #70949f; letter-spacing: 3px; }
.code-window pre { margin: 0; padding: 23px 18px; font: 13px/1.9 Consolas, monospace; color: #c9d8ec; }
.code-purple { color: #c4a8f5; }.code-green { color: #92dec0; }.code-blue { color: #84cbef; }.code-gold { color: #f0c780; }
.code-output { padding: 13px 18px; background: #73d3b909; color: #9abbb3; font: 11px monospace; border-top: 1px solid #ffffff09; }
.code-output > span:first-child { color: #79e4c4; margin-right: 8px; }.code-cursor { margin-left: 5px; color: #79e4c4; }
.first-steps { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 25px 8px; margin-bottom: 8px; }
.first-steps > div { display: flex; align-items: center; gap: 12px; }
.step-number { color: #739fba; font: 20px Consolas, monospace; }
.first-steps strong { display: block; font-size: 12px; color: #d6e1ef; }.first-steps small { display: block; margin-top: 5px; color: #93a5bc; font-size: 10px; }.step-arrow { color: #53697f; }
.stats-section { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin: 23px 0; }
.stat-card { padding: 15px 18px; border-left: 2px solid #67d2bf44; background: #ffffff03; }.stat-label { color: #99abc2; font-size: 11px; }.stat-card strong { display: block; margin-top: 8px; font-size: 22px; overflow-wrap: anywhere; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }.section-heading h2 { font-size: 18px; letter-spacing: -.3px; }.section-heading > span { color: #8b9eb8; font-size: 11px; }
.games-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.mode-card { --accent: #85dfea; display: flex; flex-direction: column; padding: 22px; text-decoration: none; border: 1px solid #78cde32a; border-radius: 15px; background: radial-gradient(ellipse at 100% 0, #28647726, transparent 70%), #121f2d; transition: transform .2s, border-color .2s, box-shadow .2s; }
.rank-card { --accent: #f2cf85; border-color: #f2cf852b; background: radial-gradient(ellipse at 100% 0, #84602626, transparent 70%), #242126; }
.mode-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 12px 25px #00000025; }.mode-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }.mode-icon { display: grid; place-content: center; width: 42px; height: 42px; border: 1px solid #ffffff15; border-radius: 12px; color: var(--accent); background: #ffffff06; font: bold 22px Consolas, monospace; }.rank-card .mode-icon { font-size: 29px; }.mode-tag { color: var(--accent); font-size: 9px; letter-spacing: 1.6px; font-weight: 650; }
.mode-card h3 { color: #f4f6fc; font-size: 21px; margin-bottom: 9px; }.mode-card p { flex: 1; max-width: 400px; color: #adbacb; font-size: 13px; line-height: 1.7; margin-bottom: 20px; }.mode-footer { display: flex; justify-content: space-between; align-items: center; padding-top: 14px; border-top: 1px solid #ffffff10; color: var(--accent); font-size: 12px; font-weight: 650; }.mode-arrow { font-size: 21px; }
.coach-card { display: flex; gap: 15px; align-items: flex-start; background: #b19bea08; border: 1px solid #b19bea20; border-radius: 12px; padding: 18px 20px; margin-top: 22px; }.coach-icon { color: #c1acf0; font-size: 24px; }.coach-card h2 { font-size: 12px; color: #dbd2f3; margin: 0 0 6px; }.coach-card p { color: #a5afc5; font-size: 12px; line-height: 1.7; }
.dashboard-footer { display: flex; justify-content: space-between; gap: 12px; padding-top: 20px; color: #8696ad; font-size: 10px; }
.dashboard-page a:focus-visible, .dashboard-page button:focus-visible { outline: 3px solid #9cecdf; outline-offset: 5px; }
@media (max-width: 760px) { .dashboard-page .dashboard-container { width: calc(100% - 32px); padding-top: 18px; }.challenge { gap: 22px; padding: 24px; }.code-window pre { font-size: 11px; padding: 16px 12px; }.first-steps { gap: 10px; }.first-steps > div { gap: 8px; }.first-steps small { line-height: 1.5; }.step-arrow { display: none; }.stats-section { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .challenge { grid-template-columns: 1fr; }.challenge h2 { max-width: 320px; }.code-window { transform: none; }.code-window pre { font-size: 12px; }.first-steps { flex-direction: column; align-items: flex-start; gap: 18px; padding: 24px 8px; }.first-steps small { font-size: 11px; }.games-grid { grid-template-columns: 1fr; }.section-heading { align-items: flex-start; flex-direction: column; gap: 5px; }.brand { font-size: 11px; gap: 9px; }.brand small { font-size: 8px; letter-spacing: 1px; }.logout-btn { padding: 8px 10px; font-size: 12px; }.logout-btn span { margin-left: 5px; }.welcome-section { padding: 23px 0; }.mode-card { padding: 20px; } }
@media (prefers-reduced-motion: reduce) { .dashboard-page *, .dashboard-page *::before, .dashboard-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }