/**
 * Casnezer Gaming Engine — Core Stylesheet
 * Integrates dark theme CSS variables matching Forum Engine (--cf-*)
 */

/* ── Base Container & Reset ── */
.cge-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--cf-on-s, #e5e2e1);
    background-color: var(--cf-bg, #131313);
    min-height: 80vh;
}

.cge-container h1, 
.cge-container h2, 
.cge-container h3, 
.cge-container h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--cf-on-s, #e5e2e1);
    margin: 0 0 12px;
    font-weight: 600;
}

.cge-container a {
    color: var(--cf-gold, #e9c349);
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.cge-container a:hover {
    color: #ffd700;
}

/* ── Gaming Navigation Breadcrumb ── */
.cge-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--cf-on-tf, #7c7977);
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.cge-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--cf-on-sv, #c4c7c7);
}

.cge-breadcrumb a:hover {
    color: var(--cf-gold, #e9c349);
}

.cge-breadcrumb .cge-sep {
    color: var(--cf-outline, #8e9192);
}

.cge-breadcrumb .cge-current {
    color: var(--cf-gold, #e9c349);
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ── Hero & Header Bars ── */
.cge-hero-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--cf-surface, #131313);
    border: 1px solid var(--cf-s-var, #353535);
    border-radius: 12px;
    padding: 28px 32px;
    margin-bottom: 28px;
    gap: 20px;
    flex-wrap: wrap;
}

.cge-title {
    font-size: 2rem;
    margin-bottom: 8px;
}

.cge-subtitle {
    color: var(--cf-on-sv, #c4c7c7);
    font-size: 0.98rem;
    margin: 0;
    max-width: 680px;
}

/* User Card in Hero */
.cge-user-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--cf-s-low, #1c1b1b);
    border: 1px solid var(--cf-s-high, #2a2a2a);
    padding: 12px 20px;
    border-radius: 10px;
}

.cge-user-avatar img {
    border-radius: 50%;
    border: 2px solid var(--cf-gold, #e9c349);
}

.cge-user-stats {
    text-align: right;
}

.cge-stat-val {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.2;
}

.cge-stat-lbl {
    font-size: 0.75rem;
    color: var(--cf-on-tf, #7c7977);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cge-gold-text {
    color: var(--cf-gold, #e9c349);
}

/* ── Domain Navigation Tabs ── */
.cge-domain-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 32px;
    border-bottom: 1px solid var(--cf-s-var, #353535);
    padding-bottom: 12px;
    overflow-x: auto;
}

.cge-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    background: var(--cf-s-cont, #20201f);
    color: var(--cf-on-sv, #c4c7c7) !important;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.cge-tab:hover {
    background: var(--cf-s-high, #2a2a2a);
    color: var(--cf-on-s, #e5e2e1) !important;
}

.cge-tab.active {
    background: var(--cf-gold, #e9c349);
    color: var(--cf-gold-on, #3c2f00) !important;
    font-weight: 600;
}

/* ── Level Badges & Section Styling ── */
.cge-domain-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.cge-domain-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--cf-s-high, #2a2a2a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cf-gold, #e9c349);
}

.cge-level-group {
    margin-bottom: 36px;
}

.cge-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
}

.cge-level-badge.level-1 { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.3); }
.cge-level-badge.level-2 { background: rgba(52, 152, 219, 0.15); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.3); }
.cge-level-badge.level-3 { background: rgba(155, 89, 182, 0.15); color: #9b59b6; border: 1px solid rgba(155, 89, 182, 0.3); }
.cge-level-badge.level-4 { background: rgba(230, 126, 34, 0.15); color: #e67e22; border: 1px solid rgba(230, 126, 34, 0.3); }
.cge-level-badge.level-5 { background: rgba(233, 195, 73, 0.15); color: #e9c349; border: 1px solid rgba(233, 195, 73, 0.3); }

/* ── Games Grid & Card Layout ── */
.cge-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.cge-game-card {
    background: var(--cf-s-low, #1c1b1b);
    border: 1px solid var(--cf-s-high, #2a2a2a);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.cge-game-card:hover {
    transform: translateY(-3px);
    border-color: var(--cf-gold, #e9c349);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.cge-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.cge-card-icon {
    color: var(--cf-gold, #e9c349);
}

.cge-card-diff {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
}

.cge-card-title {
    font-size: 1.25rem;
    margin-bottom: 8px;
}

.cge-card-desc {
    font-size: 0.88rem;
    color: var(--cf-on-sv, #c4c7c7);
    line-height: 1.5;
    margin-bottom: 16px;
    flex-grow: 1;
}

.cge-card-meta {
    display: flex;
    gap: 16px;
    font-size: 0.8rem;
    color: var(--cf-on-tf, #7c7977);
    margin-bottom: 16px;
}

.cge-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cge-card-footer {
    margin-top: 12px;
}

/* ── Buttons ── */
.cge-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s ease, transform 0.1s ease;
}

.cge-btn-primary {
    background: var(--cf-gold, #e9c349);
    color: var(--cf-gold-on, #3c2f00) !important;
}

.cge-btn-primary:hover {
    background: #ffd700;
}

.cge-btn-outline {
    background: transparent;
    border: 1px solid var(--cf-outline, #8e9192);
    color: var(--cf-on-s, #e5e2e1) !important;
}

.cge-btn-outline:hover {
    border-color: var(--cf-gold, #e9c349);
    color: var(--cf-gold, #e9c349) !important;
}

.cge-btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

/* ── Task Workspace & Single Task Layout ── */
.cge-task-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 28px;
}

.cge-card {
    background: var(--cf-s-low, #1c1b1b);
    border: 1px solid var(--cf-s-high, #2a2a2a);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.cge-workspace-card {
    background: var(--cf-s-least, #0e0e0e);
    border: 1px solid var(--cf-s-var, #353535);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 24px;
}

.cge-workspace-header {
    background: var(--cf-s-cont, #20201f);
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--cf-s-var, #353535);
}

.cge-workspace-title {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--cf-gold, #e9c349);
}

.cge-code-textarea {
    width: 100%;
    background: #090909;
    color: #2ecc71;
    font-family: 'Fira Code', 'JetBrains Mono', Consolas, monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    padding: 18px;
    border: none;
    outline: none;
    resize: vertical;
    box-sizing: border-box;
}

.cge-workspace-footer {
    padding: 14px 20px;
    background: var(--cf-s-cont, #20201f);
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid var(--cf-s-var, #353535);
}

/* Console Output */
.cge-console {
    background: #050509;
    border-top: 1px solid var(--cf-s-var, #353535);
    padding: 16px 20px;
    font-family: monospace;
    font-size: 0.88rem;
}

.cge-console-header {
    color: var(--cf-on-tf, #7c7977);
    margin-bottom: 8px;
    font-weight: 600;
}

.cge-console-body {
    color: var(--cf-on-s, #e5e2e1);
    white-space: pre-wrap;
    word-break: break-word;
}

/* Progress Bars */
.cge-progress-wrap {
    margin: 12px 0;
}

.cge-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--cf-on-tf, #7c7977);
    margin-bottom: 4px;
}

.cge-progress-bar {
    height: 6px;
    background: var(--cf-s-var, #353535);
    border-radius: 3px;
    overflow: hidden;
}

.cge-progress-fill {
    height: 100%;
    background: var(--cf-gold, #e9c349);
    transition: width 0.3s ease;
}

/* Hints & Walkthrough Styling */
.cge-hint-item {
    background: var(--cf-s-cont, #20201f);
    border: 1px solid var(--cf-s-high, #2a2a2a);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.cge-hint-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.88rem;
    font-weight: 600;
}

.cge-hint-content {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cf-s-var, #353535);
    font-size: 0.9rem;
    color: var(--cf-on-sv, #c4c7c7);
}

/* ── Responsive Breakpoints ── */
@media (max-width: 1024px) {
    .cge-task-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .cge-hero-bar {
        padding: 20px;
        flex-direction: column;
        align-items: flex-start;
    }
    .cge-games-grid {
        grid-template-columns: 1fr;
    }
}

/* ════════════════════════════════════════════════════════════════
   SANDBOX PANEL & TERMINAL (SRS Section 8)
   ════════════════════════════════════════════════════════════════ */

.cge-sandbox-panel {
    background: #1a1a2e;
    border: 1px solid #2a2a4a;
    border-radius: 12px;
    margin-bottom: 20px;
    overflow: hidden;
}

.cge-sandbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: #16162a;
    border-bottom: 1px solid #2a2a4a;
    flex-wrap: wrap;
    gap: 10px;
}

.cge-sandbox-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #e5e2e1;
}

.cge-sandbox-title .material-symbols-outlined {
    color: #e9c349;
    font-size: 22px;
}

.cge-sandbox-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #7c7977;
}

.cge-sandbox-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.cge-sandbox-status-disconnected {
    background: #555;
}

.cge-sandbox-status-connected {
    background: #2ecc71;
    box-shadow: 0 0 6px rgba(46, 204, 113, 0.5);
}

.cge-sandbox-status-executing {
    background: #f39c12;
    animation: cge-pulse 1s infinite;
}

.cge-sandbox-status-error {
    background: #e74c3c;
}

.cge-sandbox-status-expired {
    background: #555;
    opacity: 0.5;
}

@keyframes cge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.cge-sandbox-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Terminal */
.cge-terminal {
    background: #0d0d1a;
    padding: 16px;
    max-height: 400px;
    display: flex;
    flex-direction: column;
}

.cge-terminal-output {
    flex: 1;
    overflow-y: auto;
    background: #0a0a14;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #00ff41;
    min-height: 200px;
    max-height: 300px;
}

.cge-terminal-output::-webkit-scrollbar {
    width: 6px;
}

.cge-terminal-output::-webkit-scrollbar-track {
    background: #0d0d1a;
}

.cge-terminal-output::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}

.cge-terminal-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cge-terminal-prompt {
    color: #00ff41;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
}

.cge-terminal-input {
    flex: 1;
    background: #0a0a14;
    border: 1px solid #2a2a4a;
    border-radius: 6px;
    padding: 8px 12px;
    color: #00ff41;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 13px;
    outline: none;
}

.cge-terminal-input:focus {
    border-color: #e9c349;
    box-shadow: 0 0 0 2px rgba(233, 195, 73, 0.15);
}

.cge-terminal-input::placeholder {
    color: #444;
}

/* Onboarding page styles */
.cge-onboarding {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px;
}

.cge-onboarding-header {
    text-align: center;
    margin-bottom: 40px;
}

.cge-onboarding-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    color: #e5e2e1;
    margin: 0 0 12px;
}

.cge-onboarding-header p {
    color: #7c7977;
    font-size: 15px;
}

.cge-domain-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (min-width: 768px) {
    .cge-domain-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.cge-domain-card {
    background: #1c1b1b;
    border: 2px solid #2a2a2a;
    border-radius: 12px;
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cge-domain-card:hover {
    border-color: #e9c349;
    background: #20201f;
    transform: translateY(-2px);
}

.cge-domain-card.cge-domain-selected {
    border-color: #e9c349;
    background: rgba(233, 195, 73, 0.08);
}

.cge-domain-card .material-symbols-outlined {
    font-size: 36px;
    color: #e9c349;
    margin-bottom: 12px;
}

.cge-domain-card .cge-domain-name {
    font-size: 14px;
    font-weight: 600;
    color: #e5e2e1;
    margin-bottom: 4px;
}

.cge-domain-card .cge-domain-desc {
    font-size: 12px;
    color: #7c7977;
}

.cge-onboarding-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 32px;
}

.cge-assessment-progress {
    background: #1c1b1b;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 24px;
}

.cge-progress-bar-track {
    height: 6px;
    background: #2a2a2a;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}

.cge-progress-bar-fill {
    height: 100%;
    background: #e9c349;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cge-progress-bar-label {
    font-size: 13px;
    color: #7c7977;
}

.cge-assessment-question {
    background: #1c1b1b;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.cge-assessment-question h3 {
    color: #e5e2e1;
    font-size: 18px;
    margin: 0 0 16px;
}

.cge-level-result {
    text-align: center;
    padding: 32px;
    background: #1c1b1b;
    border-radius: 16px;
    margin-bottom: 24px;
}

.cge-level-badge {
    display: inline-block;
    padding: 12px 32px;
    border-radius: 8px;
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.cge-level-badge.cge-level-initiate  { background: #2a2a2a; color: #e5e2e1; }
.cge-level-badge.cge-level-operator  { background: #1a3a2a; color: #2ecc71; }
.cge-level-badge.cge-level-specialist{ background: #1a2a3a; color: #3498db; }
.cge-level-badge.cge-level-tactician { background: #3a2a1a; color: #e9c349; }
.cge-level-badge.cge-level-commander { background: #3a1a1a; color: #e74c3c; }

.cge-learning-path {
    background: #1c1b1b;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.cge-learning-path-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #2a2a2a;
}

.cge-learning-path-item:last-child {
    border-bottom: none;
}

.cge-learning-path-item .material-symbols-outlined {
    color: #e9c349;
    font-size: 20px;
}

/* ==========================================================================
   DESIGN SYSTEM PASS (v1.1.0)

   One place that defines the gaming pages' scale, rhythm and tier colours.
   Earlier rules in this file mixed rem and fixed px sizes (32px, 36px titles
   that overflowed on a phone) and had no offset for the theme's fixed header.
   Everything below is fluid, container-relative and mobile-first.
   ========================================================================== */

.cge-container {
    /* Type scale — clamp() keeps headings readable at 360px without a
       separate mobile stylesheet fighting the desktop one. */
    --cge-h1: clamp(22px, 3.2vw, 34px);
    --cge-h2: clamp(18px, 2.2vw, 24px);
    --cge-h3: clamp(16px, 1.8vw, 19px);
    --cge-body: clamp(14px, 1.1vw, 16px);
    --cge-small: 13px;
    --cge-micro: 11px;

    /* Spacing rhythm */
    --cge-gap: clamp(12px, 2vw, 20px);
    --cge-pad: clamp(16px, 2.4vw, 28px);
    --cge-radius: 12px;

    max-width: 1240px;
    padding: clamp(20px, 3vw, 36px) clamp(14px, 3vw, 28px) 72px;
    font-size: var(--cge-body);
    line-height: 1.6;
    /* Nothing inside a game page may push the document sideways. */
    overflow-x: clip;
}

.cge-container *,
.cge-container *::before,
.cge-container *::after { box-sizing: border-box; }

.cge-container h1 { font-size: var(--cge-h1); line-height: 1.2; }
.cge-container h2 { font-size: var(--cge-h2); line-height: 1.25; }
.cge-container h3 { font-size: var(--cge-h3); line-height: 1.3; }
.cge-container h4 { font-size: var(--cge-body); line-height: 1.35; }

/* Long words, code identifiers and URLs wrap instead of overflowing. */
.cge-container p,
.cge-container h1,
.cge-container h2,
.cge-container h3,
.cge-container h4,
.cge-container li { overflow-wrap: anywhere; }

.cge-title { font-size: var(--cge-h1); }
.cge-subtitle { font-size: var(--cge-body); max-width: 62ch; }
.cge-task-title { font-size: var(--cge-h1); }
.cge-stat-number { font-size: clamp(24px, 3vw, 34px); line-height: 1.1; }
.cge-stat-label { font-size: var(--cge-small); }

/* ── Tier colours ──────────────────────────────────────────────────────── */

.cge-tier-1 { --cge-tier-colour: #4ea8de; }
.cge-tier-2 { --cge-tier-colour: #48bb78; }
.cge-tier-3 { --cge-tier-colour: var(--cf-gold, #e9c349); }
.cge-tier-4 { --cge-tier-colour: #ed8936; }
.cge-tier-5 { --cge-tier-colour: #e53e3e; }

.cge-tier {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: var(--cge-micro);
    font-weight: 700;
    letter-spacing: .06em;
    white-space: nowrap;
    color: var(--cge-tier-colour, var(--cf-gold, #e9c349));
    background: color-mix(in srgb, var(--cge-tier-colour, #e9c349) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--cge-tier-colour, #e9c349) 40%, transparent);
}

/* Fallback for browsers without color-mix(). */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .cge-tier {
        background: rgba(255, 255, 255, .06);
        border-color: rgba(255, 255, 255, .18);
    }
}

.cge-level-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 28px 0 14px;
    padding: 8px 14px;
    border-left: 3px solid var(--cge-tier-colour, var(--cf-gold, #e9c349));
    background: var(--cf-s-low, #1c1b1b);
    border-radius: 0 6px 6px 0;
    font-size: var(--cge-small);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cge-tier-colour, var(--cf-gold, #e9c349));
}

.cge-level-meaning {
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cf-on-tf, #7c7977);
}

.cge-card-diff {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: var(--cge-micro);
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
    color: var(--cge-tier-colour, var(--cf-gold, #e9c349));
    background: rgba(255, 255, 255, .05);
    border: 1px solid currentColor;
}

.cge-badge.cge-tier-1,
.cge-badge.cge-tier-2,
.cge-badge.cge-tier-3,
.cge-badge.cge-tier-4,
.cge-badge.cge-tier-5 {
    color: var(--cge-tier-colour);
    border: 1px solid currentColor;
    background: rgba(255, 255, 255, .04);
}

/* ── Cards & grids ─────────────────────────────────────────────────────── */

.cge-games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--cge-gap);
}

.cge-game-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: var(--cge-pad);
    min-width: 0;
    border-radius: var(--cge-radius);
}

.cge-game-card .cge-card-footer { margin-top: auto; }

.cge-card-title { font-size: var(--cge-h3); margin: 0; }
.cge-card-desc {
    font-size: var(--cge-small);
    color: var(--cf-on-sv, #c4c7c7);
    margin: 0;
    /* Keeps every card in a row the same height without truncating mid-word. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cge-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-size: var(--cge-micro);
    color: var(--cf-on-tf, #7c7977);
}

.cge-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.cge-card-meta .material-symbols-outlined { font-size: 15px; }

/* ── Progress bars ─────────────────────────────────────────────────────── */

.cge-progress-bar {
    height: 6px;
    width: 100%;
    border-radius: 999px;
    background: var(--cf-s-high, #2a2a2a);
    overflow: hidden;
}

.cge-progress-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--cf-gold, #e9c349);
    transition: width .4s ease;
}

.cge-progress-info {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: var(--cge-micro);
    color: var(--cf-on-tf, #7c7977);
    margin-bottom: 5px;
}

/* ── Rank card ─────────────────────────────────────────────────────────── */

.cge-rank-card { display: grid; gap: 10px; }

.cge-rank-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cge-rank-name { font-weight: 700; font-size: var(--cge-h3); }

.cge-rank-note {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin: 0;
    font-size: var(--cge-micro);
    color: var(--cf-on-tf, #7c7977);
}

.cge-user-rank { display: grid; gap: 6px; min-width: 150px; }

/* ── Task page ─────────────────────────────────────────────────────────── */

.cge-task-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--cge-gap);
    align-items: start;
}

.cge-task-main, .cge-task-sidebar { min-width: 0; }

.cge-task-meta-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cge-task-body { font-size: var(--cge-body); }

.cge-task-body pre,
.cge-expected-code,
.cge-console-body {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre;
    font-size: var(--cge-small);
    -webkit-overflow-scrolling: touch;
}

.cge-code-textarea {
    width: 100%;
    max-width: 100%;
    min-height: 220px;
    resize: vertical;
    font-family: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    line-height: 1.6;
    tab-size: 4;
}

.cge-locked-card { opacity: .8; }
.cge-locked-note { font-size: var(--cge-small); color: var(--cf-on-tf, #7c7977); margin: 0; }

.cge-tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
    gap: 10px;
}

.cge-task-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 14px;
}

.cge-task-card-info { min-width: 0; display: grid; gap: 4px; }
.cge-task-card-info h4 { margin: 0; }
.cge-task-card-info .cge-tier { justify-self: start; }
.cge-task-card-arrow { margin-left: auto; }

/* ── Focus & interaction states ────────────────────────────────────────── */

.cge-container a:focus-visible,
.cge-container button:focus-visible,
.cge-container textarea:focus-visible,
.cge-container select:focus-visible {
    outline: 2px solid var(--cf-gold, #e9c349);
    outline-offset: 2px;
    border-radius: 4px;
}

.cge-btn {
    min-height: 42px;          /* comfortable touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}

.cge-btn:disabled { opacity: .55; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    .cge-container * {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

/* ── Breakpoints ───────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .cge-task-layout { grid-template-columns: minmax(0, 1fr); }
    /* Rank and rewards belong above the fold on a narrow screen. */
    .cge-task-sidebar {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
        gap: var(--cge-gap);
    }
}

@media (max-width: 640px) {
    .cge-hero-bar { padding: 18px; gap: 14px; }
    .cge-user-card {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
    }
    .cge-games-grid,
    .cge-tasks-grid { grid-template-columns: 1fr; }
    .cge-domain-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 6px;
        scrollbar-width: none;
    }
    .cge-domain-tabs::-webkit-scrollbar { display: none; }
    .cge-domain-tabs .cge-tab { flex: 0 0 auto; }
    .cge-mission-header { flex-direction: column; align-items: flex-start; gap: 10px; }
    .cge-workspace-footer { flex-direction: column; }
    .cge-workspace-footer .cge-btn { width: 100%; }
    .cge-breadcrumb { font-size: var(--cge-micro); flex-wrap: wrap; }
}

/* Objective line, shown under the brief when it adds something the
   instructions do not already say. */
.cge-objective {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--cf-s-high, #2a2a2a);
    font-size: var(--cge-small);
    color: var(--cf-on-sv, #c4c7c7);
}

/* Brief celebration when a submission crosses into a new rank. */
.cge-rank-up { animation: cge-rank-pulse 1.4s ease 2; }

@keyframes cge-rank-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(233, 195, 73, 0); }
    50%      { box-shadow: 0 0 0 4px rgba(233, 195, 73, .28); }
}

.cge-badge-success {
    color: #2ecc71;
    border: 1px solid currentColor;
    background: rgba(46, 204, 113, .1);
}

/* ==========================================================================
   UI PASS 2 (v1.3.0)

   The game pages read as a wireframe: everything present, nothing weighted.
   This pass adds surface, edge and state — the three things that make a
   layout look built rather than sketched.
   ========================================================================== */

/* ── Cards get an actual surface ───────────────────────────────────────── */

.cge-card,
.cge-game-card,
.cge-task-card {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, .035) 0%,
        rgba(255, 255, 255, .015) 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--cge-radius, 12px);
}

.cge-card { padding: var(--cge-pad, 22px); }

/* Hover lift only where the card is a link. */
.cge-task-card,
.cge-game-card {
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}

.cge-task-card:hover,
.cge-game-card:hover {
    transform: translateY(-2px);
    border-color: rgba(233, 195, 73, .45);
    background: rgba(255, 255, 255, .055);
}

/* ── Completed state — the thing players were not seeing ───────────────── */

.cge-task-card.completed {
    border-color: rgba(46, 204, 113, .45);
    background: linear-gradient(180deg,
        rgba(46, 204, 113, .10) 0%,
        rgba(46, 204, 113, .03) 100%);
}

.cge-task-card.completed .cge-task-card-icon .material-symbols-outlined {
    color: #2ecc71;
}

.cge-task-card.completed .cge-task-card-info h4::after {
    content: "✓";
    margin-left: 8px;
    color: #2ecc71;
    font-weight: 700;
}

/* ── Task sidebar ──────────────────────────────────────────────────────── */

.cge-status-strip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: var(--cge-small, 13px);
    font-weight: 600;
    margin-bottom: 16px;
}

.cge-status-strip .material-symbols-outlined { font-size: 19px; }
.cge-status-strip.is-complete { background: rgba(46, 204, 113, .12); border: 1px solid rgba(46, 204, 113, .4); color: #2ecc71; }
.cge-status-strip.is-open     { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12); color: var(--cf-on-sv, #c4c7c7); }
.cge-status-strip.is-guest    { background: rgba(233, 195, 73, .10); border: 1px solid rgba(233, 195, 73, .35); color: var(--cf-gold, #e9c349); }

.cge-reward-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 14px;
}

.cge-reward-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .08);
}

.cge-reward-val { font-size: 19px; font-weight: 700; line-height: 1.1; }
.cge-reward-lbl { font-size: var(--cge-micro, 11px); color: var(--cf-on-tf, #7c7977); }
.cge-xp-icon { color: #4ea8de; }
.cge-sp-icon { color: var(--cf-gold, #e9c349); }

.cge-reward-note {
    font-size: var(--cge-micro, 11px);
    color: var(--cf-on-tf, #7c7977);
    margin: 0 0 14px;
    padding: 8px 10px;
    border-left: 2px solid rgba(255, 255, 255, .15);
}

.cge-sidebar-meta { list-style: none; margin: 0; padding: 0; }

.cge-sidebar-meta li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: var(--cge-small, 13px);
}

.cge-sidebar-meta li:last-child { border-bottom: 0; }
.cge-sidebar-meta span { color: var(--cf-on-tf, #7c7977); }
.cge-sidebar-meta strong { font-weight: 600; text-align: right; }

/* ── Guest notice ──────────────────────────────────────────────────────── */

.cge-guest-notice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 18px;
    margin-bottom: var(--cge-gap, 18px);
    border-radius: var(--cge-radius, 12px);
    background: rgba(233, 195, 73, .08);
    border: 1px solid rgba(233, 195, 73, .3);
}

.cge-guest-notice > .material-symbols-outlined {
    color: var(--cf-gold, #e9c349);
    font-size: 22px;
    flex: 0 0 auto;
}

.cge-guest-copy { flex: 1 1 260px; min-width: 0; }
.cge-guest-copy strong { display: block; margin-bottom: 3px; }
.cge-guest-copy p { margin: 0; font-size: var(--cge-small, 13px); color: var(--cf-on-sv, #c4c7c7); }

.cge-guest-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cge-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .22);
    color: var(--cf-on-surface, #e5e2e1);
}

.cge-btn-ghost:hover { border-color: var(--cf-gold, #e9c349); color: var(--cf-gold, #e9c349); }

/* ── Leaderboards ──────────────────────────────────────────────────────── */

.cge-leaderboard { margin-top: var(--cge-gap, 18px); }

.cge-lb-row {
    display: grid;
    grid-template-columns: 40px 40px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 9px;
    border: 1px solid transparent;
}

.cge-lb-row + .cge-lb-row { margin-top: 5px; }
.cge-lb-row:nth-child(odd) { background: rgba(255, 255, 255, .025); }

.cge-lb-row.is-you {
    background: rgba(233, 195, 73, .10);
    border-color: rgba(233, 195, 73, .4);
}

.cge-lb-pos {
    font-family: ui-monospace, monospace;
    font-weight: 700;
    color: var(--cf-on-tf, #7c7977);
    text-align: center;
}

.cge-lb-row:nth-child(1) .cge-lb-pos { color: #e9c349; }
.cge-lb-row:nth-child(2) .cge-lb-pos { color: #c8ccce; }
.cge-lb-row:nth-child(3) .cge-lb-pos { color: #cd7f32; }

.cge-lb-avatar { width: 36px; height: 36px; border-radius: 50%; }
.cge-lb-name { min-width: 0; }
.cge-lb-name strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cge-lb-sub { font-size: var(--cge-micro, 11px); color: var(--cf-on-tf, #7c7977); }
.cge-lb-score { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.cge-lb-score small { display: block; font-weight: 400; font-size: var(--cge-micro, 11px); color: var(--cf-on-tf, #7c7977); }

/* Score bar showing the four Hall of Fame components. */
.cge-lb-components {
    display: flex;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 5px;
    background: rgba(255, 255, 255, .07);
}

.cge-lb-components i { display: block; height: 100%; }
.cge-lb-c-mastery      { background: #4ea8de; }
.cge-lb-c-integrity    { background: #2ecc71; }
.cge-lb-c-contribution { background: #e9c349; }
.cge-lb-c-consistency  { background: #ed8936; }

.cge-lb-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    font-size: var(--cge-micro, 11px);
    color: var(--cf-on-tf, #7c7977);
}

.cge-lb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cge-lb-legend i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

@media (max-width: 560px) {
    .cge-lb-row { grid-template-columns: 32px minmax(0, 1fr) auto; }
    .cge-lb-avatar { display: none; }
    .cge-reward-box { grid-template-columns: 1fr; }
    .cge-guest-actions { width: 100%; }
    .cge-guest-actions .cge-btn { flex: 1 1 auto; }
}

/* ── Domain tabs: instant switching ────────────────────────────────────── */

.cge-domain-panel[hidden] { display: none; }

.cge-tab.is-loading { opacity: .6; pointer-events: none; }

/* ==========================================================================
   MISSION BLOCKS (v1.3.2)

   Corrects two things.

   1. The previous pass styled `.cge-mission-block`. The template renders
      `.cge-mission-card`. None of those rules ever matched, which is why the
      missions had no padding, no surface and no separation — the CSS was
      landing on nothing.

   2. Layout, per the reported structure:
      - a divider ABOVE each mission, so the heading, sub-heading and task
        grid all sit together between two lines, instead of the divider
        cutting between the heading and the grid;
      - the mission number BESIDE the heading rather than stacked above it.
   ========================================================================== */

.cge-missions-list {
    display: flex;
    flex-direction: column;
}

.cge-mission-card {
    /* The divider belongs at the top of a mission, so everything below it
       reads as belonging to that mission. */
    border-top: 1px solid rgba(255, 255, 255, .12);
    padding: clamp(28px, 4vw, 44px) 0 clamp(28px, 4vw, 44px);
}

/* No line above the first mission — the section heading already separates it. */
.cge-mission-card:first-child { border-top: 0; padding-top: clamp(8px, 1.5vw, 16px); }

/* ── Header: number beside the title ───────────────────────────────────── */

.cge-mission-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(16px, 3vw, 32px);
    flex-wrap: wrap;
    /* Space between the heading block and the task grid below it. */
    margin-bottom: clamp(20px, 3vw, 30px);
    /* Explicitly no border here — that was the misplaced divider. */
    border-bottom: 0;
    padding-bottom: 0;
}

.cge-mission-title-wrap {
    display: flex;
    align-items: flex-start;   /* number aligns with the first line of the title */
    gap: clamp(12px, 1.6vw, 18px);
    min-width: 0;
    flex: 1 1 320px;
}

.cge-mission-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 10px;
    background: rgba(233, 195, 73, .12);
    border: 1px solid rgba(233, 195, 73, .38);
    color: var(--cf-gold, #e9c349);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    /* Nudge down so the digits sit optically level with the title's cap
       height rather than its line box. */
    margin-top: 2px;
}

.cge-mission-title {
    margin: 0 0 6px;
    font-size: var(--cge-h2, clamp(18px, 2.2vw, 24px));
    line-height: 1.25;
}

.cge-mission-desc {
    margin: 0;
    font-size: var(--cge-small, 13px);
    line-height: 1.6;
    color: var(--cf-on-sv, #c4c7c7);
    max-width: 68ch;
}

.cge-mission-rewards {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 0 0 auto;
    margin-top: 4px;
}

/* ── Task grid inside a mission ────────────────────────────────────────── */

.cge-tasks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: clamp(12px, 1.6vw, 18px);
}

.cge-task-card { padding: 16px 18px; }

/* ── Narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .cge-mission-card { padding: 26px 0; }

    .cge-mission-header {
        flex-direction: column;
        gap: 14px;
        margin-bottom: 18px;
    }

    .cge-mission-num { width: 38px; height: 38px; flex-basis: 38px; font-size: 13px; }
    .cge-mission-rewards { margin-top: 0; }
}

/* ==========================================================================
   GAME PAGE HERO (v1.3.3)

   The top of a game page was effectively unstyled: breadcrumb, tier badge,
   title, description and progress all sat in one undifferentiated stack with
   default margins. The tier badge in particular looked broken because
   `.cge-badge` had no box of its own — it inherited a stray text-selection
   background and no padding, so it read as highlighted text rather than a
   chip.
   ========================================================================== */

.cge-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 clamp(20px, 3vw, 30px);
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    font-size: var(--cge-micro, 11px);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--cf-on-tf, #7c7977);
}

.cge-breadcrumb a { color: var(--cf-on-sv, #c4c7c7); text-decoration: none; }
.cge-breadcrumb a:hover { color: var(--cf-gold, #e9c349); }

.cge-hero-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 40px);
    flex-wrap: wrap;
    padding: clamp(22px, 3vw, 32px);
    margin-bottom: clamp(28px, 4vw, 40px);
    border-radius: var(--cge-radius, 12px);
    background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.012));
    border: 1px solid rgba(255, 255, 255, .09);
}

.cge-hero-left {
    display: flex;
    align-items: flex-start;
    gap: clamp(14px, 2vw, 22px);
    flex: 1 1 420px;
    min-width: 0;
}

.cge-hero-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    flex: 0 0 56px;
    border-radius: 14px;
    background: rgba(233, 195, 73, .12);
    border: 1px solid rgba(233, 195, 73, .32);
    color: var(--cf-gold, #e9c349);
}

.cge-hero-icon .material-symbols-outlined { font-size: 26px; }

.cge-hero-details { min-width: 0; }

/* The tier badge is a chip, not highlighted text. */
.cge-hero-details .cge-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    margin-bottom: 12px;
    border-radius: 5px;
    font-size: var(--cge-micro, 11px);
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    background: rgba(255, 255, 255, .05);
    color: var(--cge-tier-colour, var(--cf-gold, #e9c349));
    border: 1px solid currentColor;
}

.cge-hero-title {
    margin: 0 0 10px;
    font-size: var(--cge-h1, clamp(24px, 3.2vw, 36px));
    line-height: 1.15;
}

.cge-hero-desc {
    margin: 0;
    font-size: var(--cge-body, 15px);
    line-height: 1.6;
    color: var(--cf-on-sv, #c4c7c7);
    max-width: 62ch;
}

.cge-hero-right {
    flex: 0 1 280px;
    min-width: 0;
}

.cge-stat-card {
    padding: 18px 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
}

.cge-stat-card .cge-stat-number {
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 6px;
}

.cge-stat-card .cge-stat-label {
    display: block;
    font-size: var(--cge-micro, 11px);
    color: var(--cf-on-tf, #7c7977);
    margin-bottom: 12px;
    line-height: 1.5;
}

.cge-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 clamp(14px, 2vw, 20px);
    font-size: var(--cge-h2, clamp(18px, 2.2vw, 24px));
}

@media (max-width: 780px) {
    .cge-hero-card { flex-direction: column; padding: 20px; }
    .cge-hero-right { flex: 1 1 auto; width: 100%; }
    .cge-hero-icon { width: 46px; height: 46px; flex-basis: 46px; }
}

/* Leaderboard empty state — informative rather than a dead line. */
.cge-lb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 26px 16px 8px;
    text-align: center;
}

.cge-lb-empty .material-symbols-outlined {
    font-size: 34px;
    color: var(--cf-gold, #e9c349);
    opacity: .7;
}

.cge-lb-empty p {
    margin: 0;
    max-width: 46ch;
    font-size: var(--cge-small, 13px);
    color: var(--cf-on-sv, #c4c7c7);
}

.cge-empty-note {
    margin: 0;
    padding: 18px 0 6px;
    font-size: var(--cge-small, 13px);
    color: var(--cf-on-tf, #7c7977);
}

.cge-hall-of-fame { margin-bottom: clamp(24px, 3vw, 34px); }