/* ============================================================
   HERO DUAL PANEL — Video + Telemetry on First Impact
   Appended to styles.css
============================================================ */

/* Override hero grid: text left, dual-panel right */
.hero {
    /* Using minmax(0, 1fr) prevents grid columns from blowing out past the viewport width */
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); 

    align-items: center;
    padding-top: 120px;
    gap: var(--space-lg);
}

/* ---- Dual Panel Container ---- */
.hero-visual {
    align-self: start; /* Aligns the visual panel to the top instead of centering it */
    margin-top: 15px; /* Slight offset for perfect visual balance with the left text */
}

.hero-dual-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: 540px; /* Scaled perfectly to fit within the viewport bounds without right cut-off */
    margin: 0 auto 0 0; /* Align to the left of its container, moving it away from the right margin */
}

/* ---- Video (top) — perfectly scaled to fit without crop ---- */
.hero-dual-panel .glass-video-container {
    width: 100%;
    max-width: 100%;
    height: 300px;              /* Harmonious height for 540px width */
    border-radius: var(--radius-lg);
    box-shadow: 0 24px 70px rgba(0,0,0,0.55), 0 0 0 1px rgba(0,232,255,0.1),
                0 0 50px rgba(0,232,255,0.06);
    animation: fadeInUp 0.8s var(--ease-out-expo) 0.1s both;
}

/* Video fills frame but shows full content — no cropping */
.hero-dual-panel .glass-video-container .hero-video {
    width: 100%;
    height: 100%;
    object-fit: contain;         /* was 'cover' — now shows full game UI */
    background: #000;
}

/* ---- Telemetry Panel (bottom) — harmoniously sized ---- */
.hero-telemetry-panel {
    width: 100%;
    overflow: hidden;
    padding: 0;
    border-color: rgba(0,232,255,0.16) !important;
    box-shadow: 0 16px 50px rgba(0,0,0,0.45), 0 0 30px rgba(0,232,255,0.08);
    animation: fadeInUp 0.8s var(--ease-out-expo) 0.28s both;
    transition: transform var(--duration-slow) var(--ease-spring),
                box-shadow var(--duration-base) var(--ease-smooth);
}
.hero-telemetry-panel:hover {
    transform: translateY(-5px);
    box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 0 55px rgba(0,232,255,0.13);
}
/* Cap dashboard image height so it stays proportional to the enlarged video */
.htp-img {
    width: 100%; height: auto;
    max-height: 200px;           /* proportional to 360px video above */
    object-fit: cover;
    object-position: top center; /* show the most important top part */
    display: block;
    filter: brightness(1.06) saturate(1.15) contrast(1.02);
}

/* macOS-style header bar */
.htp-header {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 10px var(--space-md);
    background: rgba(0,0,0,0.35);
    border-bottom: 1px solid var(--glass-border);
}
.htp-dot {
    width: 10px; height: 10px;
    border-radius: 50%; flex-shrink: 0;
}
.htp-dot.green  { background: #27c93f; box-shadow: 0 0 6px rgba(39,201,63,0.6); }
.htp-dot.yellow { background: #ffbd2e; box-shadow: 0 0 6px rgba(255,189,46,0.6); }
.htp-dot.red-dot{ background: #ff5f57; box-shadow: 0 0 6px rgba(255,95,87,0.6); }
.htp-title {
    flex: 1;
    font-size: var(--text-xs);
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted);
    letter-spacing: 1px;
    text-align: center;
}
.htp-badge {
    display: flex; align-items: center; gap: 5px;
    font-size: 0.65rem; font-weight: 700;
    font-family: 'JetBrains Mono', monospace;
    color: var(--neon-green); letter-spacing: 1px;
}

/* Dashboard Image - constrained to harmonize with video */
.htp-img {
    width: 100%;
    height: auto;
    max-height: 165px; /* Harmonious scale for the updated dual panel */
    object-fit: cover;
    object-position: top center;
    display: block;
    filter: brightness(1.06) saturate(1.15) contrast(1.02);
}

/* Metrics Footer Bar */
.htp-footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: var(--space-sm) var(--space-md);
    background: rgba(0,0,0,0.35);
    border-top: 1px solid var(--glass-border);
    gap: var(--space-xs);
}
.htp-stat {
    display: flex; flex-direction: column;
    align-items: center; gap: 2px;
}
.htp-num {
    font-size: var(--text-lg);
    font-weight: 900;
    color: var(--neon-cyan);
    font-family: 'JetBrains Mono', monospace;
    line-height: 1;
    text-shadow: 0 0 12px rgba(0,232,255,0.4);
    font-variant-numeric: tabular-nums;
    transition: color 0.5s ease;
}
.htp-label {
    font-size: 0.6rem;
    color: var(--text-faint);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    white-space: nowrap;
}
.htp-divider {
    width: 1px; height: 32px;
    background: var(--glass-border);
    flex-shrink: 0;
}

/* ---- Keyboard Section Styles ---- */
.keyboard-section {
    max-width: 1200px;
    margin: var(--space-3xl) auto;
    padding: 0 var(--space-lg);
    position: relative; z-index: 1;
}
.keyboard-inner { text-align: center; }

.kb-toggle-bar {
    display: inline-flex;
    gap: 4px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-full);
    padding: 4px;
    margin-bottom: var(--space-lg);
}
.kb-toggle-btn {
    padding: 9px 22px;
    border-radius: var(--radius-full);
    border: none; cursor: pointer;
    font-family: 'Outfit', sans-serif;
    font-size: var(--text-sm); font-weight: 700;
    color: var(--text-muted);
    background: transparent;
    transition: all var(--duration-base) var(--ease-smooth);
}
.kb-toggle-btn.kb-active, .kb-toggle-btn:hover {
    background: var(--neon-cyan); color: #000;
    box-shadow: 0 0 16px rgba(0,232,255,0.3);
}

.kb-master-wrapper {
    max-width: 820px;
    margin: 0 auto;
    padding: var(--space-xl);
    background: linear-gradient(160deg, rgba(0,232,255,0.03), rgba(180,0,255,0.02));
    border-color: var(--glass-border-cyan) !important;
}
.kb-legend {
    display: flex; justify-content: center;
    align-items: center; gap: var(--space-lg);
    flex-wrap: wrap;
    margin-bottom: var(--space-lg);
    font-size: var(--text-xs);
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-muted); letter-spacing: 0.5px;
}
.legend-item { display: flex; align-items: center; gap: 6px; }
.legend-dot {
    width: 10px; height: 10px;
    border-radius: 50%; flex-shrink: 0;
}
.legend-dot.home   { background: var(--neon-cyan); box-shadow: 0 0 8px rgba(0,232,255,0.6); }
.legend-dot.top    { background: var(--neon-purple); box-shadow: 0 0 8px rgba(180,0,255,0.5); }
.legend-dot.bottom { background: var(--neon-gold); box-shadow: 0 0 8px rgba(255,201,71,0.5); }
.legend-dot.red    { background: var(--neon-red); box-shadow: 0 0 8px rgba(255,45,85,0.5); }

.keyboard-display { display: flex; flex-direction: column; gap: var(--space-md); margin-bottom: var(--space-lg); }
.kb-row-label {
    font-size: var(--text-xs); font-family: 'JetBrains Mono', monospace;
    letter-spacing: 3px; color: var(--text-faint);
    text-transform: uppercase; text-align: center;
    margin-bottom: -6px;
}
.home-label { color: var(--neon-cyan) !important; }
.hr-badge {
    background: rgba(0,232,255,0.1);
    border: 1px solid rgba(0,232,255,0.25);
    padding: 2px 8px; border-radius: var(--radius-full);
    font-size: 0.65rem; margin-left: 6px; vertical-align: middle;
}
.kb-row {
    display: flex; justify-content: center; gap: 6px;
    flex-wrap: nowrap;
}

/* Base Key */
.kb-key {
    width: 62px; height: 58px; flex-shrink: 0;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--radius-sm);
    border-bottom: 3px solid rgba(0,0,0,0.45);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 2px;
    cursor: default;
    transition: all var(--duration-base) var(--ease-smooth);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    position: relative;
}
.kb-key:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.4); }

.kb-sym {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-base); font-weight: 800;
    line-height: 1;
}
.kb-letter {
    font-size: 0.6rem; font-weight: 600;
    color: var(--text-faint); letter-spacing: 0.5px;
    line-height: 1; font-family: 'Outfit', sans-serif;
}

/* Home Row Keys */
.key-home {
    background: rgba(0,232,255,0.07);
    border-color: rgba(0,232,255,0.25);
    border-bottom-color: rgba(0,232,255,0.4);
    box-shadow: 0 0 12px rgba(0,232,255,0.1), 0 2px 8px rgba(0,0,0,0.3);
}
.key-home .kb-sym { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(0,232,255,0.6); }
.key-home .kb-letter { color: rgba(0,232,255,0.5); }
.key-home:hover { background: rgba(0,232,255,0.14); box-shadow: 0 0 20px rgba(0,232,255,0.2), 0 6px 16px rgba(0,0,0,0.4); }
/* F and J (index finger anchors) extra highlight */
.key-accent {
    background: rgba(0,232,255,0.14) !important;
    border-color: rgba(0,232,255,0.5) !important;
    border-bottom-width: 4px !important;
}

/* Top Row Keys */
.key-top {
    background: rgba(180,0,255,0.06);
    border-color: rgba(180,0,255,0.2);
    border-bottom-color: rgba(180,0,255,0.35);
    box-shadow: 0 0 10px rgba(180,0,255,0.07), 0 2px 8px rgba(0,0,0,0.3);
}
.key-top .kb-sym { color: var(--neon-purple); text-shadow: 0 0 10px rgba(180,0,255,0.5); }
.key-top .kb-letter { color: rgba(180,0,255,0.45); }
.key-top:hover { background: rgba(180,0,255,0.12); }

/* Bottom Row Keys */
.key-bottom {
    background: rgba(255,201,71,0.05);
    border-color: rgba(255,201,71,0.18);
    border-bottom-color: rgba(255,201,71,0.3);
    box-shadow: 0 0 10px rgba(255,201,71,0.05), 0 2px 8px rgba(0,0,0,0.3);
}
.key-bottom .kb-sym { color: var(--neon-gold); text-shadow: 0 0 10px rgba(255,201,71,0.5); }
.key-bottom .kb-letter { color: rgba(255,201,71,0.4); }
.key-bottom:hover { background: rgba(255,201,71,0.1); }

/* QWERTY Keys */
.key-qwerty { background: rgba(255,255,255,0.025); border-color: rgba(255,255,255,0.07); }
.key-qwerty .kb-sym { color: var(--text-muted); font-size: var(--text-md); }
.key-qwerty .kb-letter { color: var(--text-faint); font-size: 0.52rem; }
.kb-strain {
    background: rgba(255,45,85,0.08) !important;
    border-color: rgba(255,45,85,0.3) !important;
    border-bottom-color: rgba(255,45,85,0.45) !important;
    animation: strainPulse 2.5s ease-in-out infinite;
}
.kb-strain .kb-sym { color: var(--neon-red) !important; text-shadow: 0 0 8px rgba(255,45,85,0.4); }
.kb-strain .kb-letter { color: rgba(255,45,85,0.6) !important; }
@keyframes strainPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* Chord Hint */
.kb-chord-hint {
    display: flex; align-items: center; justify-content: center;
    gap: var(--space-sm); flex-wrap: wrap;
    font-size: var(--text-sm); color: var(--text-muted);
    margin-bottom: var(--space-md); font-family: 'JetBrains Mono', monospace;
}
.chord-key {
    background: var(--bg-elevated);
    border: 1px solid rgba(0,232,255,0.3);
    border-bottom: 2px solid rgba(0,232,255,0.5);
    color: var(--neon-cyan); padding: 4px 12px;
    border-radius: var(--radius-sm); font-weight: 700; font-size: var(--text-sm);
    box-shadow: 0 0 10px rgba(0,232,255,0.15);
}
.chord-plus { color: var(--neon-cyan); font-weight: 700; }

.kb-label {
    font-size: var(--text-sm); color: var(--text-muted);
    margin-bottom: var(--space-xs); font-weight: 600; letter-spacing: 0.3px;
    text-align: center;
}
.kb-metric { margin-bottom: var(--space-lg); font-size: var(--text-sm); font-family: 'JetBrains Mono', monospace; text-align: center; }
.metric-good { color: var(--neon-green); }
.metric-bad  { color: var(--neon-red); }
.kb-note {
    font-size: var(--text-xs); color: var(--text-faint); line-height: 1.7;
    max-width: 500px; margin: 0 auto; text-align: center;
}

/* Symbol Ref */
.sym-ref-wrapper { margin-top: var(--space-2xl); }
.sym-ref-title {
    font-size: var(--text-2xl); font-weight: 900;
    text-align: center; margin-bottom: var(--space-xl); letter-spacing: -0.3px;
}
.sym-ref-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-lg);
}
.sym-ref-card { padding: var(--space-lg); }
.sym-ref-header {
    display: flex; flex-direction: column; gap: var(--space-xs);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--glass-border);
}
.tier-label {
    font-size: var(--text-sm); font-weight: 800; letter-spacing: 1px;
}
.home-tier   { color: var(--neon-cyan); }
.top-tier    { color: var(--neon-purple); }
.bottom-tier { color: var(--neon-gold); }
.tier-keys {
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-xs); color: var(--text-faint); letter-spacing: 2px;
}
.sym-chips {
    display: flex; flex-wrap: wrap;
    gap: 7px; margin-bottom: var(--space-md);
}
.sym-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    font-family: 'JetBrains Mono', monospace;
    font-size: var(--text-base); font-weight: 800;
    transition: transform var(--duration-fast);
    cursor: default;
}
.sym-chip:hover { transform: scale(1.1); }
.sym-chip.critical {
    background: rgba(0,232,255,0.08);
    border: 1px solid rgba(0,232,255,0.25);
    color: var(--neon-cyan);
}
.sym-chip.operator {
    background: rgba(180,0,255,0.07);
    border: 1px solid rgba(180,0,255,0.2);
    color: var(--neon-purple);
}
.sym-chip.string {
    background: rgba(255,201,71,0.07);
    border: 1px solid rgba(255,201,71,0.2);
    color: var(--neon-gold);
}
.chip-key {
    font-size: 0.6rem; font-weight: 600;
    background: rgba(255,255,255,0.1);
    padding: 1px 5px; border-radius: 4px;
    color: var(--text-faint); letter-spacing: 0.5px;
}
.tier-desc {
    font-size: var(--text-sm); color: var(--text-muted);
    line-height: 1.7;
}

/* ---- Responsive Dual Panel ---- */
@media (max-width: 1060px) {
    .hero { grid-template-columns: 1fr; }
    .hero-dual-panel { max-width: 600px; }
    .hero-dual-panel .glass-video-container { height: 240px; }
}
@media (max-width: 640px) {
    .kb-key { width: 44px; height: 48px; }
    .kb-sym { font-size: var(--text-sm); }
    .htp-num { font-size: var(--text-base); }
    .sym-ref-grid { grid-template-columns: 1fr; }
}

/* ---- JS toggle for layout ---- */
/* (handled by inline onclick in HTML) */