/* Shared visual language for the landing page, games, assessments and guides. */
body {
    --c-bg: #f2f6ff;
    --c-surface: #fff;
    --c-text: #121b38;
    --c-text-muted: #64718f;
    --c-purple: #593ff0;
    --c-purple-soft: #edebff;
    --c-blue: #2796ed;
    --c-blue-soft: #e7f3ff;
    --font-display: 'Manrope', sans-serif;
    --font-body: 'Manrope', sans-serif;
    --radius-xl: 26px;
    --radius-lg: 20px;
    --radius-md: 14px;
    --shadow-soft: 0 10px 30px rgba(34, 53, 103, .055);
    --shadow-card: 0 16px 40px rgba(34, 53, 103, .075);
    background: radial-gradient(circle at 78% 4%, #dfebff 0, transparent 34%),
                radial-gradient(circle at 10% 36%, #e9eeff 0, transparent 34%),
                #f2f6ff;
    color: var(--c-text);
    font-family: 'Manrope', sans-serif;
}
body .bg-blobs { display: none; }
body .container { width: min(1200px, calc(100% - 48px)); }
body main.container { padding-top: 24px; padding-bottom: 80px; }
.site-header {
    background: rgba(247, 249, 255, .92);
    border-bottom: 1px solid #e7ecf7;
    box-shadow: none;
}
.header-inner { min-height: 76px; }
.logo {
    color: #101936;
    font-family: 'Manrope', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.055em;
}
.logo-emoji { width: 44px; height: 44px; object-fit: contain; filter: none; }
.logo:hover .logo-emoji { transform: none; }
.logo-text em {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: inherit;
    font-weight: inherit;
}
.site-nav { gap: 4px; }
.nav-link,
.site-nav .nav-link-assessment,
.nav-categories > summary {
    color: #4c5875 !important;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 10px;
    padding: 9px 12px !important;
    font-family: 'Manrope', sans-serif;
    font-size: .84rem;
    font-weight: 750 !important;
    text-decoration: none;
    white-space: nowrap;
}
.nav-link:hover,
.site-nav .nav-link-assessment:hover,
.nav-categories > summary:hover {
    color: #4934d5 !important;
    background: #eeedff;
    box-shadow: none;
    transform: none;
}
.nav-categories { position: relative; }
.nav-categories > summary { display: block; list-style: none; cursor: pointer; }
.nav-categories > summary::-webkit-details-marker { display: none; }
.nav-categories > summary::after { content: '⌄'; margin-left: 6px; color: #7d8aa4; }
.nav-categories-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 400;
    display: grid;
    min-width: 190px;
    gap: 2px;
    padding: 8px;
    border: 1px solid #e2e8f5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(31, 48, 94, .14);
}
.nav-categories-menu .nav-link { display: block; }
.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin-left: 8px;
    padding: 9px 20px;
    border-radius: 13px;
    background: #17243d;
    box-shadow: 0 8px 18px rgba(18, 31, 63, .12);
    color: #fff;
    font-size: .84rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.header-cta:hover { background: #2c3b5b; }
.lang-current {
    border: 1px solid #dce4f2;
    border-radius: 12px;
    box-shadow: none;
    color: #263454;
}
.lang-menu { border-color: #e3e8f3; border-radius: 14px; }
.nav-toggle {
    border: 1px solid #dce4f2;
    border-radius: 12px;
    box-shadow: none;
}
.site-footer {
    background: #edf2fc;
    border-top: 1px solid #e0e7f5;
    padding: 34px 0;
}
.footer-nav a { color: #506080; font-size: .82rem; }
.footer-categories {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 24px;
    padding-bottom: 18px;
    margin-bottom: 16px;
    border-bottom: 1px solid #dfe6f4;
}
.footer-categories a { color: #3f4f70; font-size: .82rem; font-weight: 800; text-decoration: none; }
.footer-categories a:hover { color: #533de3; }
.footer-brand img { vertical-align: middle; }
.footer-muted { color: #7886a0; }
.btn {
    border-radius: 13px;
    font-family: 'Manrope', sans-serif;
    font-size: .96rem;
    font-weight: 800;
}
.btn-purple { background: linear-gradient(110deg, #6241f1, #3d8ff4); box-shadow: 0 10px 24px rgba(74, 62, 216, .2); }
.btn-blue { background: linear-gradient(110deg, #347eec, #2fb5ed); box-shadow: 0 10px 24px rgba(48, 120, 216, .18); }
.btn-green { background: #0dbd95; box-shadow: 0 10px 24px rgba(13, 189, 149, .16); }
.btn-orange { background: #f99a2d; box-shadow: 0 10px 24px rgba(249, 154, 45, .18); }
.btn-pink { background: #e84e91; box-shadow: 0 10px 24px rgba(232, 78, 145, .16); }
.btn-red { background: #eb5965; box-shadow: 0 10px 24px rgba(235, 89, 101, .16); }
.btn-teal { background: #12aaa8; box-shadow: 0 10px 24px rgba(18, 170, 168, .16); }
.game-page { padding-top: 30px; }
.game-header { margin-bottom: 28px; }
.game-title { color: #15213d; font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 800; letter-spacing: -.04em; }
.game-subtitle { color: #66738f; }
.back-link {
    border: 1px solid #e4eaf5;
    border-radius: 11px;
    background: rgba(255, 255, 255, .68);
}
.game-panel, .score-badge, .cv-page .cv-panel {
    border: 1px solid #e4eaf5;
    border-radius: 20px;
    background: rgba(255, 255, 255, .93);
    box-shadow: 0 14px 38px rgba(36, 54, 101, .065);
}
.score-badge { min-width: 108px; }
.score-badge .label { color: #73819c; }
.content-page { padding-top: 28px; }
.content-hero {
    margin-bottom: 28px;
    text-align: left;
}
.content-eyebrow { color: #5d53c8; font-size: .76rem; letter-spacing: .13em; }
.content-hero h1 {
    color: #15213d;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.16;
}
.content-lead { color: #64728e; font-weight: 500; line-height: 1.7; }
.content-body {
    border: 1px solid #e7ecf6;
    border-radius: 20px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 12px 35px rgba(35, 53, 96, .055);
}
.guide-grid { gap: 16px; }
.guide-card {
    border: 1px solid #e4eaf5;
    border-radius: 18px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 10px 26px rgba(35, 53, 96, .045);
}
.guide-card:hover { border-color: #c7c7f0; box-shadow: 0 14px 32px rgba(44, 50, 114, .09); }
.guide-card-title { color: #1a2743; font-weight: 800; }
.guide-card-desc, .guide-card-meta { color: #6a7791; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible {
    outline: 3px solid #5941ed;
    outline-offset: 3px;
}
@media (max-width: 850px) {
    .header-actions { position: relative; }
    .nav-toggle { display: flex; }
    .site-nav {
        display: none;
        position: absolute;
        top: calc(100% + 10px);
        right: 0;
        z-index: 300;
        min-width: 240px;
        align-items: stretch;
        flex-direction: column;
        padding: 8px;
        border: 1px solid #e4eaf5;
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 16px 40px rgba(39, 53, 96, .14);
    }
    .site-nav.open { display: flex; }
    .site-nav .nav-link { display: block; padding: 12px 14px !important; font-size: .9rem; }
    .nav-categories > summary { padding: 12px 14px !important; }
    .nav-categories-menu { position: static; box-shadow: none; border: 0; padding: 0 0 0 12px; }
}
@media (max-width: 620px) {
    body .container { width: min(100% - 32px, 1200px); }
    .header-inner { min-height: 68px; }
    .logo { gap: 5px; font-size: 1.15rem; }
    .logo-emoji { width: 34px; height: 34px; }
    .header-cta { display: none; }
    .content-hero h1 { font-size: 2rem; }
    .game-panel { padding: 22px; }
}