:root {
    --ns-a: #038141; --ns-b: #85BB2F; --ns-c: #FECB02; --ns-d: #EE8100; --ns-e: #E63E11;

    --bg: #f7f3ec;
    --bg-soft: #fbf9f4;
    --card: #ffffff;
    --text: #2b2620;
    --text-light: #7d766b;
    --line: #eae4d8;
    --line-soft: #f1ede4;

    --brand: #038141;
    --brand-dark: #026637;
    --brand-soft: #e9f4ee;
    --sun: #f7931e;
    --sun-deep: #ff6b35;

    --radius: 18px;
    --radius-sm: 12px;
    --shadow: 0 1px 2px rgba(72,60,38,.05), 0 6px 20px rgba(72,60,38,.07);
    --shadow-lift: 0 2px 6px rgba(72,60,38,.08), 0 14px 36px rgba(72,60,38,.12);

    --header-h: 60px;

    --product-zoom: 1.3;
    --product-focus-y: 50%;

    --ad-height: 0px;
}
@media (min-width: 768px) {
    :root { --header-h: 68px; }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    font-family: 'Nunito', system-ui, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

img, svg { max-width: 100%; height: auto; vertical-align: middle; }

a { color: var(--brand); }

:focus-visible {
    outline: 3px solid var(--ns-c);
    outline-offset: 2px;
    border-radius: 4px;
}

::selection { background: #c8e6d4; }

.sr-only {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
    position: absolute; left: 8px; top: -48px;
    z-index: 2000;
    background: var(--brand); color: #fff;
    padding: 10px 18px; border-radius: 0 0 10px 10px;
    font-weight: 700; text-decoration: none;
    transition: top .2s ease;
}
.skip-link:focus { top: 0; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 1500;
    width: 100%;
    background: rgba(255,255,255,.92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}
.site-header-inner {
    max-width: 1160px;
    margin: 0 auto;
    height: var(--header-h);
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 900;
    font-size: 1.22em;
    letter-spacing: -.01em;
    white-space: nowrap;
}
.brand-mark { width: 40px; height: 26px; flex: none; display: block; }
.brand-name .brand-guess { color: var(--brand); }

.nav-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 10px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.nav-toggle:hover { background: var(--line-soft); }
.nav-toggle-bar {
    display: block;
    width: 100%; height: 2.6px;
    border-radius: 2px;
    background: var(--text);
    transition: transform .25s ease, opacity .2s ease;
}
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7.6px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7.6px) rotate(-45deg); }

.site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0; right: 0;
    z-index: 1400;
    display: flex;
    flex-direction: column;
    padding: 10px 14px 18px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 40px rgba(72,60,38,.14);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform .22s ease, opacity .22s ease, visibility .22s;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
}
body.nav-open .site-nav {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.site-nav a {
    display: block;
    padding: 13px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    font-weight: 700;
    font-size: 1.02em;
}
.site-nav a:hover { background: var(--brand-soft); color: var(--brand-dark); }
.site-nav a[aria-current="true"] {
    color: var(--brand-dark);
    background: var(--brand-soft);
}
.site-nav a.nav-play,
.site-nav a.nav-play[aria-current="true"] {
    background: var(--brand);
    color: #fff;
    text-align: center;
    margin-bottom: 8px;
    box-shadow: 0 4px 12px rgba(3,129,65,.25);
}
.site-nav a.nav-play:hover { background: var(--brand-dark); color: #fff; }

.nav-backdrop {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 1300;
    background: rgba(43,38,32,.35);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s;
}
body.nav-open .nav-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
body.nav-open { overflow: hidden; }

@media (min-width: 980px) {
    .nav-toggle, .nav-backdrop { display: none; }
    body.nav-open { overflow: auto; }
    .site-nav {
        position: static;
        flex-direction: row;
        align-items: center;
        gap: 2px;
        padding: 0;
        background: none;
        border: none;
        box-shadow: none;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        max-height: none;
        overflow: visible;
    }
    .site-nav a {
        padding: 9px 13px;
        font-size: .95em;
        white-space: nowrap;
    }
    .site-nav a.nav-play {
        margin: 0 0 0 8px;
        order: 99;
        padding: 9px 18px;
        border-radius: 999px;
    }
}
@media (min-width: 980px) and (max-width: 1099px) {
    .site-nav a { padding: 9px 5px; font-size: .84em; }
    .site-nav a.nav-play { margin-left: 4px; padding: 9px 12px; }
}
@media (min-width: 1100px) and (max-width: 1199px) {
    .site-nav a { padding: 9px 8px; font-size: .9em; }
    .site-nav a.nav-play { margin-left: 4px; padding: 9px 14px; }
}

main { display: block; width: 100%; }

.game-main {
    flex: 1;
    padding: 20px 16px calc(var(--ad-height) + 40px + env(safe-area-inset-bottom, 0px));
}
.screen { display: none; width: 100%; max-width: 540px; margin: 0 auto; }
.screen.active { display: block; animation: fadeIn .25s ease; }
#screen-home.active { max-width: none; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: translateY(0) } }

.home-wrap { max-width: 540px; margin: 0 auto; }

.article-main, .legal-main, .privacy-main {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: 22px 16px 48px;
    flex: 1;
}
.category-main {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    padding: 22px 16px 48px;
    flex: 1;
}

.overlay {
    position: fixed; inset: 0;
    background: rgba(247,243,236,.94);
    display: flex; align-items: center; justify-content: center;
    z-index: 1900;
}
.overlay-content { text-align: center; font-weight: 700; color: var(--text-light); }
.spinner {
    width: 48px; height: 48px;
    border: 5px solid var(--line);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .8s linear infinite;
    margin: 0 auto 14px;
}
.spinner.small { width: 28px; height: 28px; border-width: 3px; margin-bottom: 8px; }
@keyframes spin { to { transform: rotate(360deg) } }

.btn {
    display: inline-block;
    width: 100%;
    padding: 15px 24px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 1.05em;
    font-weight: 800;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s, opacity .15s;
    -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-solo { background: var(--brand); color: #fff; box-shadow: 0 4px 14px rgba(3,129,65,.22); }
.btn-solo:hover { background: var(--brand-dark); }
.btn-create { background: var(--ns-b); color: #fff; box-shadow: 0 4px 14px rgba(133,187,47,.25); }
.btn-join { background: var(--ns-d); color: #fff; width: auto; padding: 15px 22px; flex: none; }
.btn-start { background: var(--brand); color: #fff; margin-top: 20px; box-shadow: 0 4px 14px rgba(3,129,65,.22); }
.btn-start:hover { background: var(--brand-dark); }
.btn-back {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text);
    width: auto;
    margin: 0 0 16px;
    padding: 9px 18px;
    font-size: .92em;
    font-weight: 700;
    border-radius: 999px;
    box-shadow: none;
}
.btn-back:hover { border-color: var(--text-light); background: var(--bg-soft); }
.btn-small {
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 15px;
    font-family: inherit;
    font-size: .85em;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-light);
    margin-top: 8px;
    transition: border-color .15s, color .15s;
}
.btn-small:hover { border-color: var(--brand); color: var(--brand); }
.btn-skip { display: block; margin: 8px auto 0; }

.error { color: var(--ns-e); margin-top: 12px; font-size: .9em; font-weight: 700; min-height: 1.2em; }
.info-text { color: var(--text-light); margin-top: 12px; font-size: .9em; }

input[type="text"], input[type="email"], textarea {
    width: 100%;
    padding: 14px 16px;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 1em;
    outline: none;
    transition: border-color .2s, box-shadow .2s;
    background: var(--bg-soft);
    color: var(--text);
}
input[type="text"]:focus, input[type="email"]:focus, textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(3,129,65,.10);
}
#input-code {
    width: 130px;
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 4px;
    font-size: 1.2em;
}

.home-hero { text-align: center; padding: 26px 4px 18px; }
.home-hero .tagline {
    font-size: clamp(1.7em, 5.5vw, 2.4em);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -.015em;
}
.home-hero .tagline em {
    font-style: normal;
    color: var(--brand);
}
.home-lede {
    color: var(--text-light);
    font-size: 1.05em;
    max-width: 430px;
    margin: 10px auto 0;
}

.home-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 28px 24px;
    text-align: center;
}
.home-section { margin-top: 14px; }
.separator {
    display: flex; align-items: center;
    margin: 18px 0;
    color: var(--text-light);
    font-size: .85em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.separator::before, .separator::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.separator span { padding: 0 12px; }
.join-row { display: flex; gap: 10px; margin-top: 10px; justify-content: center; }

.btn .btn-title { display: block; font-size: 1.06em; }
.btn .btn-sub {
    display: block;
    font-size: .78em;
    font-weight: 700;
    opacity: .88;
    margin-top: 2px;
    letter-spacing: .01em;
}

.btn-marathon {
    background: linear-gradient(135deg, var(--sun-deep), var(--sun));
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(255,107,53,.32);
}
.btn-marathon::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
    animation: shimmer 3s infinite;
}
@keyframes shimmer { 0% { left: -100% } 50%, 100% { left: 100% } }

.top-marathon-card {
    margin-top: 18px;
    padding: 22px 20px 16px;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    text-align: center;
}
.top-marathon-title { font-size: 1.1em; margin-bottom: 14px; }
.top-marathon-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-weight: 700;
    text-align: left;
}
.top-marathon-row.rank-1 { background: linear-gradient(135deg, #fff3cd, #ffe69c); }
.top-marathon-row.rank-2 { background: linear-gradient(135deg, #eeeeee, #dcdcdc); }
.top-marathon-row.rank-3 { background: linear-gradient(135deg, #f4d4a8, #e6bd92); }
.top-marathon-row .tm-rank { width: 36px; font-size: 1.2em; font-weight: 900; }
.top-marathon-row .tm-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-marathon-row .tm-score { font-weight: 900; color: var(--brand); margin-left: 10px; }
.top-marathon-row.finisher .tm-score::after { content: ' 🏁'; font-size: .85em; }
.top-marathon-empty { color: var(--text-light); font-size: .9em; font-style: italic; padding: 12px 0; }
.top-me {
    margin-top: 10px;
    padding: 10px;
    background: var(--brand-soft);
    border-radius: 10px;
    font-weight: 700;
    font-size: .9em;
}
#btn-show-full-ranking { margin-top: 10px; }

.rules-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 24px;
}
.rules-title { font-size: 1.6em; color: var(--brand); text-align: center; margin-bottom: 4px; }
.rules-subtitle { text-align: center; color: var(--text-light); font-size: .9em; margin-bottom: 20px; }
.rules-section {
    margin-bottom: 18px;
    padding: 16px;
    background: var(--bg-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
}
.rules-section h3 { font-size: 1em; margin-bottom: 10px; }
.rules-section ul { list-style: none; padding: 0; }
.rules-section li { padding: 6px 0 6px 20px; position: relative; font-size: .95em; line-height: 1.45; }
.rules-section li::before { content: '•'; position: absolute; left: 6px; color: var(--brand); font-weight: 900; }
.rules-note { margin-top: 8px; font-size: .85em; color: var(--text-light); font-style: italic; }
.btn-marathon-start { margin-top: 16px; }
#marathon-prep-zone { margin: 20px 0; }
#marathon-prep-zone .btn-marathon-start { margin: 0; }

.marathon-prep-progress {
    margin-top: 16px;
    padding: 20px 16px;
    background: linear-gradient(135deg, #fff3e8, #ffe4cd);
    border-radius: var(--radius-sm);
    text-align: center;
    animation: fadeIn .3s ease;
}
.prep-label { font-weight: 900; font-size: 1em; color: #c94f1a; margin-bottom: 4px; }
.prep-sublabel { font-size: .85em; color: var(--text-light); margin-bottom: 14px; font-style: italic; }
.prep-bar { height: 8px; background: rgba(201,79,26,.15); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.prep-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sun-deep), var(--sun));
    width: 0%;
    transition: width .3s ease;
    border-radius: 4px;
}
.prep-counter { font-size: .9em; font-weight: 700; color: #c94f1a; }
.prep-counter span { font-size: 1.2em; font-weight: 900; }

.btn-marathon-start.ready { animation: readyPulse 1.2s ease-in-out infinite; }
@keyframes readyPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(3,129,65,0); }
    50% { transform: scale(1.03); box-shadow: 0 0 0 8px rgba(3,129,65,.15); }
}
@keyframes shakeX {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.lobby-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 28px 24px;
}
.lobby-label {
    font-weight: 800;
    font-size: .82em;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-light);
    margin-bottom: 8px;
}
.code-display { font-size: 3em; font-weight: 900; letter-spacing: 10px; color: var(--brand); text-align: center; }
#lobby-code-section { text-align: center; margin-bottom: 24px; }
#player-list { list-style: none; margin-bottom: 24px; }
#player-list li {
    padding: 11px 14px;
    background: var(--bg-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
}
#player-list .host-badge {
    font-size: .75em;
    background: var(--ns-c);
    color: var(--text);
    padding: 2px 8px;
    border-radius: 6px;
    font-weight: 700;
}

.settings-section { margin-bottom: 8px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.setting-row > span { font-weight: 700; font-size: .95em; }
.setting-options { display: flex; gap: 6px; }
.setting-options button {
    padding: 8px 14px;
    border: 2px solid var(--line);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: .9em;
    cursor: pointer;
    transition: all .15s;
}
.setting-options button.selected { border-color: var(--brand); background: var(--brand); color: #fff; }
.setting-options button:not(.selected):hover { border-color: var(--ns-b); }
.setting-options button:disabled { opacity: .6; cursor: default; }

.game-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.round-info { font-weight: 900; font-size: 1.05em; color: var(--text-light); }
#scoreboard-mini { display: flex; gap: 10px; font-size: .85em; font-weight: 700; flex-wrap: wrap; justify-content: flex-end; }
#scoreboard-mini .sb-entry { display: flex; gap: 4px; }
#scoreboard-mini .sb-score { color: var(--brand); }

#timer-bar-container { height: 6px; background: var(--line); border-radius: 3px; margin-bottom: 16px; overflow: hidden; }
#timer-bar { height: 100%; background: var(--brand); border-radius: 3px; transition: width .3s linear, background .3s; width: 100%; }
#timer-bar.warning { background: var(--ns-d); }
#timer-bar.danger { background: var(--ns-e); }

.product-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 18px;
    text-align: center;
    margin-bottom: 18px;
}
.product-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: 62vh;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    margin-bottom: 12px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product-image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center var(--product-focus-y);
    transform: scale(var(--product-zoom));
    transform-origin: center var(--product-focus-y);
}
.product-name { font-weight: 800; font-size: 1.1em; line-height: 1.3; }
.loading-spinner { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--text-light); font-size: .9em; }

.nutriscore-choices { display: flex; gap: 8px; justify-content: center; margin-bottom: 16px; }
.ns-btn {
    width: 62px; height: 62px;
    border-radius: 16px;
    border: 3px solid transparent;
    font-family: inherit;
    font-size: 1.55em;
    font-weight: 900;
    color: #fff;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, opacity .15s;
    box-shadow: 0 3px 10px rgba(72,60,38,.16);
    -webkit-tap-highlight-color: transparent;
}
.ns-btn:hover:not(.locked) { transform: scale(1.08); }
.ns-btn:active:not(.locked) { transform: scale(.95); }
.ns-btn.selected { box-shadow: 0 0 0 4px rgba(43,38,32,.3); transform: scale(1.12); }
.ns-btn.locked { opacity: .4; cursor: default; pointer-events: none; }
.ns-btn.locked.selected { opacity: 1; }
.ns-a { background: var(--ns-a); }
.ns-b { background: var(--ns-b); }
.ns-c { background: var(--ns-c); color: var(--text); }
.ns-d { background: var(--ns-d); }
.ns-e { background: var(--ns-e); }

#players-status { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 12px; }
.player-status {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: .85em;
    font-weight: 700;
    background: var(--line-soft);
    color: var(--text-light);
    transition: all .2s;
}
.player-status.done { background: #d6edde; color: var(--brand); }

.marathon-streak {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--sun-deep), var(--sun));
    color: #fff;
    border-radius: 999px;
    width: fit-content;
    max-width: 92%;
    margin: 0 auto 12px;
    font-weight: 900;
    font-size: .95em;
    box-shadow: 0 2px 6px rgba(255,107,53,.3);
    animation: streakPop .3s ease;
}
.marathon-streak.hot { box-shadow: 0 2px 14px rgba(255,107,53,.6); }
.marathon-streak.fire { animation: streakFire .6s infinite alternate; }
@keyframes streakPop { from { transform: scale(.8); opacity: 0 } to { transform: scale(1); opacity: 1 } }
@keyframes streakFire {
    from { box-shadow: 0 2px 8px rgba(255,107,53,.4); }
    to { box-shadow: 0 2px 20px rgba(255,107,53,.9); }
}
.streak-flame { font-size: 1.2em; }
.streak-count { font-size: 1.1em; }
.streak-multiplier { font-size: .95em; opacity: .9; }

.marathon-lives {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 0 auto 12px;
    font-size: 1.15em;
    line-height: 1;
}
.ml-heart { animation: streakPop .3s ease; transition: transform .2s, filter .2s, opacity .2s; }
.ml-heart.lost { filter: grayscale(1) brightness(1.35); opacity: .35; transform: scale(.85); }

.reveal-checkpoint-msg {
    margin-top: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffe1e6, #ffd0da);
    color: #b3123c;
    font-weight: 900;
    font-size: .85em;
    animation: streakPop .3s ease;
}

.checkpoint-heart {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 9999;
}
.cph-core {
    position: relative;
    font-size: 5.5rem;
    line-height: 1;
    filter: drop-shadow(0 8px 24px rgba(230,62,17,.45));
    animation: cphPop 1.3s cubic-bezier(.2,1.3,.4,1) forwards;
}
.cph-plus {
    position: absolute;
    top: -6px; right: -22px;
    font-size: 1.4rem;
    font-weight: 900;
    color: #fff;
    background: var(--brand);
    padding: 3px 11px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(3,129,65,.4);
    transform: rotate(8deg);
}
.cph-spark {
    position: absolute;
    top: 50%; left: 50%;
    font-size: 1.35rem;
    animation: cphSpark 1.1s ease-out forwards;
}
@keyframes cphPop {
    0%   { transform: scale(0) rotate(-12deg); opacity: 0; }
    30%  { transform: scale(1.25) rotate(4deg); opacity: 1; }
    55%  { transform: scale(1) rotate(0deg); }
    80%  { transform: scale(1.02); opacity: 1; }
    100% { transform: scale(.85) translateY(-30px); opacity: 0; }
}
@keyframes cphSpark {
    0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
    25%  { opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .cph-core { animation: streakPop .4s ease forwards; }
    .cph-spark { display: none; }
}

.emoji-bar { display: flex; gap: 6px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.emoji-btn {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    width: 44px; height: 44px;
    font-size: 1.4em;
    cursor: pointer;
    transition: transform .1s, background .15s;
    -webkit-tap-highlight-color: transparent;
}
.emoji-btn:hover { background: var(--bg-soft); }
.emoji-btn:active { transform: scale(.88); background: var(--line-soft); }

#floating-emojis {
    position: fixed;
    left: calc(50vw + 285px);
    bottom: calc(var(--ad-height) + 80px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    pointer-events: none;
    display: flex;
    flex-direction: column-reverse;
    gap: 6px;
    max-width: 180px;
}
@media (max-width: 820px) {
    #floating-emojis { left: auto; right: 16px; }
}
.floating-emoji {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.95);
    border-radius: 18px;
    padding: 6px 10px;
    font-weight: 700;
    font-size: .9em;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    animation: floatUp 2.5s ease-out forwards;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.floating-emoji .fe-emoji { font-size: 1.3em; }
.floating-emoji .fe-name { color: var(--text-light); font-size: .85em; }
@keyframes floatUp {
    0%   { opacity: 0; transform: translateY(10px) scale(.8); }
    15%  { opacity: 1; transform: translateY(0) scale(1); }
    85%  { opacity: 1; transform: translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateY(-50px) scale(.9); }
}

.reveal-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 28px 24px;
    text-align: center;
}
.reveal-round-info { font-weight: 900; font-size: .9em; color: var(--text-light); margin-bottom: 8px; }
.reveal-label { font-size: 1.1em; color: var(--text-light); margin-bottom: 8px; }
.reveal-ns {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px; height: 84px;
    border-radius: 20px;
    font-size: 2.5em;
    font-weight: 900;
    color: #fff;
    margin-bottom: 20px;
    box-shadow: 0 8px 24px rgba(72,60,38,.18);
    animation: pop .4s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pop { from { transform: scale(0); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.reveal-product { margin-bottom: 20px; }
.reveal-product img {
    width: 100%;
    aspect-ratio: 2 / 1;
    height: auto;
    max-height: 62vh;
    object-fit: contain;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    margin-bottom: 8px;
    display: block;
}
.reveal-product p { font-weight: 700; font-size: .95em; }
#reveal-results { text-align: left; margin-bottom: 8px; }
.reveal-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    background: var(--bg-soft);
    animation: slideIn .3s ease;
}
@keyframes slideIn { from { opacity: 0; transform: translateX(-10px) } to { opacity: 1; transform: translateX(0) } }
.reveal-row .r-name { font-weight: 700; flex: 1; }
.reveal-row .r-guess {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    border-radius: 8px;
    font-weight: 900;
    color: #fff;
    font-size: .85em;
    margin: 0 10px;
}
.reveal-row .r-points { font-weight: 900; color: var(--brand); min-width: 40px; text-align: right; }
.reveal-row .r-points.zero { color: var(--text-light); }

.reveal-marathon-points {
    margin: 14px 0;
    padding: 12px;
    border-radius: var(--radius-sm);
    font-weight: 900;
    font-size: 1.2em;
    animation: pop .4s cubic-bezier(.34,1.56,.64,1);
}
.reveal-marathon-points.points-exact { background: linear-gradient(135deg, #d6edde, #c3e6cb); color: var(--brand); }
.reveal-marathon-points.points-close { background: linear-gradient(135deg, #fff3cd, #ffe69c); color: #856404; }
.reveal-marathon-points.points-fail  { background: linear-gradient(135deg, #f8d7da, #f5c6cb); color: #721c24; }
.reveal-marathon-points .mp-main { display: block; font-size: 1.4em; }
.reveal-marathon-points .mp-detail { font-size: .75em; font-weight: 700; opacity: .85; }

.reveal-countdown {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    text-align: center;
}
.countdown-label {
    font-size: .85em; font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase; letter-spacing: 1px;
    margin-bottom: 8px;
}
.countdown-value { font-size: 2.4em; font-weight: 900; color: var(--brand); line-height: 1; transition: color .2s; }
.countdown-value.urgent { color: var(--ns-e); animation: pulse .4s ease; }
@keyframes pulse { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.15) } }
.countdown-bar { height: 4px; background: var(--line); border-radius: 2px; margin-top: 12px; overflow: hidden; }
.countdown-bar-fill { height: 100%; background: var(--brand); width: 100%; transition: width .1s linear, background .2s; }
.countdown-bar-fill.warning { background: var(--ns-d); }
.countdown-bar-fill.danger { background: var(--ns-e); }

.results-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 28px 24px;
    text-align: center;
}
.results-card h2 { font-size: 1.8em; margin-bottom: 20px; animation: pop .5s ease; }
#final-ranking { text-align: left; margin-bottom: 24px; }
.rank-row {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    background: var(--bg-soft);
    animation: slideIn .3s ease;
}
.rank-row.winner { background: linear-gradient(135deg, #d6edde, #c3e6cb); }
.rank-pos { font-weight: 900; font-size: 1.3em; width: 40px; text-align: center; }
.rank-row.winner .rank-pos { color: var(--brand); }
.rank-name { font-weight: 700; flex: 1; }
.rank-score { font-weight: 900; color: var(--brand); font-size: 1.1em; }
.results-actions { display: flex; gap: 10px; }
.results-actions .btn { flex: 1; }

.share-networks {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 12px;
}
.share-net {
    border: none;
    border-radius: 999px;
    padding: 9px 18px;
    font-family: inherit;
    font-size: .9em;
    font-weight: 800;
    color: #fff;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, filter .15s;
    -webkit-tap-highlight-color: transparent;
}
.share-net:hover { transform: translateY(-1px); filter: brightness(1.06); }
.share-net:active { transform: scale(.96); }
.share-net-wa { background: #25D366; box-shadow: 0 3px 10px rgba(37,211,102,.28); }
.share-net-x  { background: #14171a; box-shadow: 0 3px 10px rgba(20,23,26,.22); }
.share-net-tg { background: #2AABEE; box-shadow: 0 3px 10px rgba(42,171,238,.28); }

.share-hint {
    margin-top: 10px;
    font-size: .88em;
    font-weight: 700;
    color: var(--text-light);
    text-align: center;
}

#replay-status {
    margin-bottom: 20px;
    padding: 14px;
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    text-align: left;
    animation: slideIn .3s ease;
}
#replay-status .replay-counter { font-weight: 900; font-size: 1em; text-align: center; margin-bottom: 10px; }
#replay-status .replay-players { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
#replay-status .replay-player {
    padding: 5px 11px;
    border-radius: 999px;
    font-size: .85em;
    font-weight: 700;
    background: var(--line-soft);
    color: var(--text-light);
    transition: all .2s;
}
#replay-status .replay-player.ready { background: #d6edde; color: var(--brand); }
#btn-replay.waiting { background: #d6edde; color: var(--brand); }

.marathon-results-card { text-align: center; }
.marathon-result-reason { color: var(--text-light); margin-bottom: 20px; font-size: .95em; }
.marathon-result-stats { margin-bottom: 20px; }
.stat-big {
    background: linear-gradient(135deg, var(--sun-deep), var(--sun));
    color: #fff;
    padding: 20px;
    border-radius: 16px;
    margin-bottom: 10px;
    box-shadow: 0 8px 24px rgba(255,107,53,.25);
}
.stat-big .stat-label { font-size: .85em; text-transform: uppercase; letter-spacing: 1px; opacity: .9; }
.stat-big .stat-value { font-size: 3em; font-weight: 900; line-height: 1; margin-top: 4px; }
.stat-row { display: flex; gap: 10px; }
.stat-small { flex: 1; background: var(--bg-soft); border: 1px solid var(--line-soft); padding: 12px; border-radius: var(--radius-sm); }
.stat-small .stat-label { font-size: .75em; color: var(--text-light); text-transform: uppercase; letter-spacing: 1px; }
.stat-small .stat-value-small { font-size: 1.4em; font-weight: 900; margin-top: 2px; }

.marathon-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin: 20px auto;
    max-width: 300px;
    justify-content: center;
}
.mg-cell {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .8em;
    font-weight: 900;
    color: #fff;
    animation: slideIn .2s ease;
}
.mg-cell.exact { background: var(--ns-a); }
.mg-cell.close { background: var(--ns-c); color: var(--text); }
.mg-cell.fail { background: var(--ns-e); }
.mg-cell.empty { background: var(--line); }
.mg-cell.checkpoint, .mg-cell.finish { position: relative; overflow: visible; }
.mg-cell.checkpoint::before, .mg-cell.finish::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 8px;
    background: repeating-conic-gradient(#161616 0 25%, #fff 0 50%) left top / 8px 8px repeat-x;
    border-radius: 4px 4px 0 0;
    pointer-events: none;
}
.mg-cell.checkpoint::after {
    content: "❤️";
    position: absolute;
    right: 1px; bottom: 1px;
    font-size: .9em; line-height: 1;
    filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff);
}
.mg-cell.finish::after {
    content: "🏆";
    position: absolute;
    right: 1px; bottom: 1px;
    font-size: .95em; line-height: 1;
    filter: drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1px #fff);
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(43,38,32,.55);
    z-index: 1800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn .2s ease;
}
.modal-content {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0,0,0,.3);
    padding: 24px;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
}
.modal-content h2 { font-size: 1.4em; margin-bottom: 4px; padding-right: 30px; }
.modal-subtitle { color: var(--text-light); font-size: .9em; margin-bottom: 16px; }
.modal-close {
    position: absolute;
    top: 16px; right: 16px;
    width: 34px; height: 34px;
    border: none;
    background: var(--line-soft);
    border-radius: 50%;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-light);
}
.modal-close:hover { background: var(--line); }

.modal-rank-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: 8px;
    margin-bottom: 4px;
    font-size: .9em;
    background: var(--bg-soft);
}
.modal-rank-row.me { background: var(--brand-soft); font-weight: 700; border: 2px solid var(--brand); }
.modal-rank-row .mr-rank { width: 40px; font-weight: 900; color: var(--text-light); }
.modal-rank-row.rank-1 .mr-rank { color: #c9a227; }
.modal-rank-row.rank-2 .mr-rank { color: #888; }
.modal-rank-row.rank-3 .mr-rank { color: #c07c3a; }
.modal-rank-row .mr-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal-rank-row .mr-rounds { font-size: .8em; color: var(--text-light); margin-right: 8px; }
.modal-rank-row .mr-score { font-weight: 900; color: var(--brand); }

.confetti-container { position: fixed; inset: 0; pointer-events: none; z-index: 1850; overflow: hidden; }
.confetti { position: absolute; border-radius: 2px; top: -20px; animation: confettiFall 2.5s ease-in forwards; }
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 1 }
    100% { transform: translateY(100vh) rotate(900deg) scale(.5); opacity: 0 }
}

#ad-slot {
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    height: var(--ad-height);
    background: rgba(255,255,255,.9);
    backdrop-filter: blur(5px);
    border-top: 1px solid var(--line);
    z-index: 1600;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
#ad-slot ins.adsbygoogle {
    display: inline-block !important;
    width: 100% !important;
    height: var(--ad-height) !important;
}
#ad-slot.hidden { display: none; }
#ad-slot .ad-placeholder {
    width: 100%; max-width: 728px; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-light); font-size: .8em; font-weight: 700;
    border: 1px dashed var(--line); border-radius: 6px; margin: 6px 10px;
    background: var(--bg-soft);
}

.seo-content { display: block; }
.seo-content > .seo-block {
    width: 100%;
    max-width: 760px;
    margin: 20px auto 0;
}
.seo-block {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 32px 26px;
}
.seo-block h2 {
    font-size: 1.45em;
    line-height: 1.25;
    margin-bottom: 16px;
    letter-spacing: -.01em;
}
.seo-block h2::after {
    content: '';
    display: block;
    width: 44px; height: 4px;
    border-radius: 2px;
    margin-top: 8px;
    background: linear-gradient(90deg, var(--ns-a), var(--ns-b), var(--ns-c), var(--ns-d), var(--ns-e));
}
.seo-block h3 { font-size: 1.12em; margin: 18px 0 8px; }
.seo-block p, .seo-block li { line-height: 1.7; margin-bottom: 10px; }
.seo-block ul, .seo-block ol { padding-left: 22px; margin-bottom: 12px; }
.seo-mode { padding: 4px 0 10px; }
.seo-steps li { margin-bottom: 8px; }
.seo-note {
    background: var(--bg-soft);
    border-left: 3px solid var(--ns-c);
    border-radius: 0 10px 10px 0;
    padding: 12px 16px;
    font-size: .95em;
}
.seo-ns-list { list-style: none; padding-left: 0 !important; }
.seo-ns-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.seo-ns-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px; height: 32px;
    flex: none;
    border-radius: 9px;
    font-weight: 900;
    font-size: 1.05em;
}
.seo-reasons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 6px;
}
@media (min-width: 640px) { .seo-reasons { grid-template-columns: 1fr 1fr; } }
.seo-reason {
    background: var(--bg-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
}
.seo-reason h3 { margin: 0 0 6px; font-size: 1.02em; }
.seo-reason p { margin: 0; font-size: .95em; }

.seo-faq-item {
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    background: var(--bg-soft);
    overflow: hidden;
}
.seo-faq-item summary {
    padding: 14px 16px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    position: relative;
    padding-right: 40px;
    -webkit-tap-highlight-color: transparent;
}
.seo-faq-item summary::-webkit-details-marker { display: none; }
.seo-faq-item summary::after {
    content: '+';
    position: absolute;
    right: 16px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.3em;
    font-weight: 900;
    color: var(--brand);
    transition: transform .2s;
}
.seo-faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.seo-faq-item summary:hover { color: var(--brand-dark); }
.seo-faq-item p { padding: 0 16px 14px; margin: 0; line-height: 1.65; }

.seo-articles-list { list-style: none; padding-left: 0 !important; margin-top: 16px; }
.seo-articles-list li {
    background: var(--bg-soft);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin-bottom: 12px;
    line-height: 1.6;
    border-left: 4px solid var(--brand);
}
.seo-articles-list li a { color: var(--brand); text-decoration: none; font-size: 1.05em; }
.seo-articles-list li a:hover { text-decoration: underline; }
.seo-articles-list li strong { color: var(--brand); }

.breadcrumb {
    width: 100%;
    margin: 0 0 14px;
    font-size: .85em;
    color: var(--text-light);
    padding: 4px 2px;
    line-height: 1.6;
}
.breadcrumb a { color: var(--text-light); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; }
.breadcrumb span[aria-hidden] { margin: 0 6px; color: #c9c3b8; }
.breadcrumb [aria-current="page"] { color: var(--text); font-weight: 600; }

.category-header {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 34px 28px;
    margin-bottom: 18px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.category-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--ns-a), var(--ns-b), var(--ns-c), var(--ns-d), var(--ns-e));
}
.category-header h1 {
    font-size: clamp(1.55em, 4.5vw, 2.1em);
    color: var(--brand);
    margin-bottom: 10px;
    line-height: 1.2;
    letter-spacing: -.01em;
}
.category-header .category-lede {
    font-size: 1.02em;
    line-height: 1.65;
    max-width: 640px;
    margin: 0 auto;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.category-card {
    background: var(--card);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 22px;
    display: flex;
    flex-direction: column;
    transition: transform .15s, box-shadow .15s;
}
.category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.category-card h2 { font-size: 1.08em; line-height: 1.35; margin-bottom: 8px; }
.category-card h2 a { color: var(--text); text-decoration: none; }
.category-card h2 a:hover { color: var(--brand); }
.category-card .card-excerpt { font-size: .94em; line-height: 1.6; margin-bottom: 10px; flex-grow: 1; }
.category-card .card-meta { font-size: .8em; color: var(--text-light); margin-top: auto; font-weight: 700; }

.article-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 34px 28px;
    margin-bottom: 16px;
}
.article-card h1 {
    font-size: clamp(1.55em, 4.5vw, 2.05em);
    line-height: 1.22;
    margin-bottom: 10px;
    color: var(--brand);
    letter-spacing: -.01em;
}
.article-card .meta { font-size: .85em; color: var(--text-light); margin-bottom: 24px; font-weight: 600; }
.article-card .lede {
    font-size: 1.12em;
    line-height: 1.65;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--line-soft);
}
.article-card h2 {
    font-size: 1.35em;
    line-height: 1.3;
    margin: 34px 0 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--line-soft);
    letter-spacing: -.01em;
}
.article-card h2:first-of-type { margin-top: 0; }
.article-card h3 { font-size: 1.1em; margin: 22px 0 8px; }
.article-card p, .article-card li { line-height: 1.75; font-size: 1em; margin-bottom: 10px; }
.article-card ul, .article-card ol { padding-left: 22px; margin-bottom: 14px; }
.article-card li { margin-bottom: 6px; }
.article-card a {
    color: var(--brand);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.article-card a:hover { text-decoration-thickness: 2px; }
.article-card strong { font-weight: 800; }

.info-block {
    background: var(--brand-soft);
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin: 18px 0;
    font-size: .97em;
    line-height: 1.7;
    border-left: 4px solid var(--brand);
}
.info-block strong { color: var(--brand-dark); }

.ns-table, .data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0;
    font-size: .95em;
}
.ns-table th, .ns-table td, .data-table th, .data-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--line-soft);
}
.ns-table th, .data-table th { background: var(--bg-soft); font-weight: 800; }
.ns-table tr:last-child td, .data-table tr:last-child td { border-bottom: none; }

.ns-badge {
    display: inline-block;
    width: 24px; height: 24px;
    line-height: 24px;
    text-align: center;
    border-radius: 50%;
    font-weight: 900;
    color: #fff;
    font-size: .9em;
}

.back-to-game, .article-card a.back-to-game {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand);
    color: #fff !important;
    text-decoration: none !important;
    padding: 13px 22px;
    border-radius: 999px;
    font-weight: 800;
    margin-top: 20px;
    box-shadow: 0 4px 14px rgba(3,129,65,.25);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.back-to-game:hover {
    transform: translateY(-2px);
    background: var(--brand-dark);
    box-shadow: 0 6px 18px rgba(3,129,65,.35);
    color: #fff !important;
}

.article-nav-related {
    background: var(--bg-soft);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    padding: 18px 20px;
    margin-top: 26px;
}
.article-nav-related h3 { margin-top: 0; font-size: 1em; color: var(--brand); }
.article-nav-related ul { padding-left: 18px; margin-bottom: 0; }

.static-card {
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--line-soft);
    padding: 34px 28px;
    margin-bottom: 16px;
}
.static-card h1 { font-size: clamp(1.55em, 4.5vw, 2.05em); line-height: 1.22; margin-bottom: 10px; color: var(--brand); }
.static-card h2 { font-size: 1.3em; margin: 30px 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--line-soft); }
.static-card h2:first-of-type { margin-top: 18px; }
.static-card p, .static-card li { line-height: 1.75; margin-bottom: 10px; }
.static-card ul, .static-card ol { padding-left: 22px; margin-bottom: 14px; }
.static-card .updated { font-size: .85em; color: var(--text-light); margin-bottom: 20px; font-weight: 600; }

.contact-box {
    background: var(--brand-soft);
    border-radius: var(--radius-sm);
    padding: 22px;
    text-align: center;
    margin: 22px 0;
}
.contact-box .contact-mail {
    display: inline-block;
    font-size: 1.15em;
    font-weight: 900;
    color: var(--brand-dark);
    margin-top: 6px;
    word-break: break-all;
}

.site-footer {
    width: 100%;
    max-width: 1160px;
    margin: 40px auto 0;
    padding: 34px 22px 22px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    font-size: .92em;
    box-shadow: var(--shadow);
}
.footer-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
    gap: 22px;
    margin-bottom: 24px;
}
.footer-col h3 {
    font-size: .95em;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--line-soft);
}
.footer-col h3 a { color: var(--brand); text-decoration: none; font-weight: 800; }
.footer-col h3 a:hover { text-decoration: underline; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 6px; line-height: 1.45; }
.footer-col li a { color: var(--text); text-decoration: none; font-size: .88em; }
.footer-col li a:hover { color: var(--brand); text-decoration: underline; }

.footer-bottom { padding-top: 18px; border-top: 1px solid var(--line-soft); text-align: center; }
.footer-legal { margin-bottom: 10px; font-size: .88em; }
.footer-legal a { color: var(--text-light); text-decoration: none; margin: 0 4px; }
.footer-legal a:hover { color: var(--brand); text-decoration: underline; }
.footer-legal span[aria-hidden] { color: #c9c3b8; }
.footer-credit {
    font-size: .78em;
    color: var(--text-light);
    line-height: 1.55;
    max-width: 740px;
    margin: 0 auto;
}
.footer-credit a { color: var(--text-light); text-decoration: underline; }
.footer-credit a:hover { color: var(--brand); }

@media (max-width: 400px) {
    .ns-btn { width: 54px; height: 54px; font-size: 1.35em; }
    .code-display { font-size: 2.4em; letter-spacing: 8px; }
    .emoji-btn { width: 40px; height: 40px; font-size: 1.2em; }
    #floating-emojis { max-width: 140px; }
    .marathon-grid { max-width: 260px; }
    .stat-big .stat-value { font-size: 2.4em; }
    .rules-section li { font-size: .9em; }
    .home-card, .seo-block, .article-card, .static-card { padding-left: 18px; padding-right: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}


.ng-flame-layer{
  position:absolute;
  z-index:0;
  pointer-events:none;
  overflow:visible;
  contain:layout style;
}
.ng-flame-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
@media (prefers-reduced-motion: reduce){
  .ng-flame-canvas{ opacity:1; }
}
#ng-confetti-canvas{
    position:fixed; inset:0; top:0; left:0;
    width:100%; height:100%;
    pointer-events:none; z-index:100000; display:block;
}

.ng-score-popup{
    position:fixed; left:50%; top:44%;
    transform:translate(-50%,-50%) scale(.2);
    pointer-events:none; z-index:100001;
    font-family:'Nunito',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-weight:900; font-size:clamp(40px,9vw,72px); line-height:1;
    white-space:nowrap; color:var(--sun-deep,#ff6b35);
    text-shadow:0 4px 0 rgba(0,0,0,.10), 0 0 24px rgba(255,210,63,.60);
    opacity:0; will-change:transform,opacity;
}
.ng-score-popup.ng-go{ animation:ngScorePop 1.6s cubic-bezier(.16,.9,.3,1) forwards; }
@keyframes ngScorePop{
    0%   { opacity:0; transform:translate(-50%,-30%) scale(.2)  rotate(-8deg); }
    16%  { opacity:1; transform:translate(-50%,-54%) scale(1.20) rotate(3deg); }
    30%  {            transform:translate(-50%,-58%) scale(.98) rotate(-1deg); }
    46%  {            transform:translate(-50%,-64%) scale(1.06) rotate(0); }
    100% { opacity:0; transform:translate(-50%,-150%) scale(1.02); }
}

@media (prefers-reduced-motion: reduce){
    .ng-score-popup.ng-go{ animation:ngScorePopReduced .9s ease-out forwards; }
    @keyframes ngScorePopReduced{
        0%   { opacity:0; transform:translate(-50%,-50%) scale(.9); }
        20%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
        78%  { opacity:1; transform:translate(-50%,-50%) scale(1); }
        100% { opacity:0; transform:translate(-50%,-56%) scale(1); }
    }
}

.ng-reveal-host{
  position:relative !important;
  overflow:hidden !important;
}

.ng-reveal-reel{
  position:absolute; inset:0;
  overflow:hidden;
  border-radius:inherit;
  z-index:1;
}

.ng-reveal-strip{
  position:absolute; top:0; left:0; width:100%;
  display:flex; flex-direction:column;
  will-change:transform;
  transform:translateY(0);
  backface-visibility:hidden;
}
.ng-reveal-strip.ng-reveal-spin{ filter:blur(1.4px); }

.ng-reveal-cell{
  width:100%; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  font-family:inherit; font-weight:900; line-height:1;
}

@keyframes ng-reveal-pop{
  0%{transform:scale(1)}
  20%{transform:scale(1.32)}
  44%{transform:scale(.9)}
  64%{transform:scale(1.09)}
  82%{transform:scale(.975)}
  100%{transform:scale(1)}
}

.ng-reveal-flood{
  position:fixed; z-index:9998; pointer-events:none;
  width:560px; height:560px; margin:-280px 0 0 -280px;
  border-radius:50%;
  background:radial-gradient(circle,
    var(--ng-reveal-flood) 0%,
    var(--ng-reveal-flood) 40%,
    transparent 70%);
  transform:scale(0); opacity:0;
  will-change:transform,opacity;
  animation:ng-reveal-flood .85s ease-out forwards;
}
@keyframes ng-reveal-flood{
  0%{transform:scale(0);opacity:.70}
  50%{transform:scale(1);opacity:.45}
  100%{transform:scale(1.25);opacity:0}
}

.ng-reveal-ring{
  position:fixed; z-index:9999; pointer-events:none;
  box-sizing:border-box;
  border:6px solid var(--ng-reveal-flood);
  transform:scale(.5); opacity:0;
  will-change:transform,opacity;
  animation:ng-reveal-ring .7s ease-out forwards;
}
@keyframes ng-reveal-ring{
  0%{transform:scale(.5);opacity:.85}
  100%{transform:scale(1.8);opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .ng-reveal-strip.ng-reveal-spin{ filter:none; }
  .ng-reveal-flood,
  .ng-reveal-ring{ animation:none; opacity:0; }
}

.ns-btn.ng-juice-press,
.ns-btn.ng-juice-exact,
.ns-btn.ng-juice-close,
.ns-btn.ng-juice-fail{
  position:relative;
  overflow:visible;
  z-index:2;
  will-change:transform;
  transform-origin:center center;
}

.ns-btn.ng-juice-press{
  animation:ngJuicePress .26s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ngJuicePress{
  0%{transform:none}
  32%{transform:translateY(3px) scale(.93)}
  62%{transform:translateY(-2px) scale(1.03)}
  100%{transform:none}
}

.ns-btn.ng-juice-exact{
  animation:ngJuicePop .42s cubic-bezier(.2,1.6,.35,1) both;
}
.ns-btn.ng-juice-exact::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  border:3px solid var(--brand,#038141);
  box-shadow:0 0 0 2px var(--brand,#038141),0 0 20px 4px rgba(3,129,65,.5);
  background:transparent;pointer-events:none;
  animation:ngJuiceRing .62s ease-out forwards;
}
@keyframes ngJuicePop{
  0%{transform:none}
  30%{transform:translateY(-5px) scale(1.14)}
  55%{transform:translateY(0) scale(.97)}
  100%{transform:none}
}
@keyframes ngJuiceRing{
  0%{opacity:.9;transform:scale(.85)}
  100%{opacity:0;transform:scale(1.85)}
}

.ns-btn.ng-juice-close{
  animation:ngJuiceNudge .4s ease both;
}
.ns-btn.ng-juice-close::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(254,203,2,.26);
  box-shadow:0 0 0 3px rgba(254,203,2,.85),0 0 16px 2px rgba(254,203,2,.5);
  pointer-events:none;
  animation:ngJuiceTint .72s ease-out forwards;
}
@keyframes ngJuiceNudge{
  0%,100%{transform:none}
  40%{transform:translateY(-4px) scale(1.05)}
}
@keyframes ngJuiceTint{
  0%{opacity:0}
  22%{opacity:1}
  100%{opacity:0}
}

.ns-btn.ng-juice-fail{
  animation:ngJuiceShake .42s cubic-bezier(.36,.07,.19,.97) both;
}
.ns-btn.ng-juice-fail::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:rgba(230,62,17,.34);
  box-shadow:0 0 0 3px rgba(230,62,17,.9),0 0 20px 3px rgba(230,62,17,.5);
  pointer-events:none;
  animation:ngJuiceFlash .5s ease-out forwards;
}
@keyframes ngJuiceShake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}
@keyframes ngJuiceFlash{
  0%{opacity:1}
  100%{opacity:0}
}

.ng-juice-screen{
  will-change:transform;
  animation:ngJuiceScreen .5s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes ngJuiceScreen{
  10%{transform:translate(-3px,2px) rotate(-.4deg)}
  30%{transform:translate(5px,-3px) rotate(.5deg)}
  50%{transform:translate(-6px,3px) rotate(-.5deg)}
  70%{transform:translate(4px,-2px) rotate(.3deg)}
  90%{transform:translate(-2px,1px)}
  100%{transform:none}
}

@media (prefers-reduced-motion: reduce){
  .ns-btn.ng-juice-press,
  .ns-btn.ng-juice-exact,
  .ns-btn.ng-juice-close,
  .ns-btn.ng-juice-fail,
  .ng-juice-screen{animation:none !important}
  .ns-btn.ng-juice-exact::after{
    animation:ngJuiceRMfade .5s ease-out forwards !important;
    transform:none !important;
  }
  .ns-btn.ng-juice-close::after{animation:ngJuiceRMfade .6s ease-out forwards !important}
  .ns-btn.ng-juice-fail::after{animation:ngJuiceRMfade .5s ease-out forwards !important}
}
@keyframes ngJuiceRMfade{
  0%{opacity:1}
  100%{opacity:0}
}
.ng-bg{
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    --ng-bg-opacity: .06;
    opacity: var(--ng-bg-opacity);
    --ng-bg-image: url("data:image/svg+xml,%3csvg%20xmlns%3d%27http%3a%2f%2fwww.w3.org%2f2000%2fsvg%27%20width%3d%27120%27%20height%3d%27120%27%20viewBox%3d%270%200%20120%20120%27%3e%3csvg%20x%3d%2728%27%20y%3d%2742%27%20width%3d%2764%27%20height%3d%2736.2%27%20viewBox%3d%270%200%2046%2026%27%3e%3crect%20x%3d%270%27%20y%3d%275%27%20width%3d%277.6%27%20height%3d%2716%27%20rx%3d%272.5%27%20fill%3d%27%23038141%27%2f%3e%3crect%20x%3d%279.6%27%20y%3d%275%27%20width%3d%277.6%27%20height%3d%2716%27%20rx%3d%272.5%27%20fill%3d%27%2385BB2F%27%2f%3e%3crect%20x%3d%2719.2%27%20y%3d%271%27%20width%3d%277.6%27%20height%3d%2724%27%20rx%3d%272.5%27%20fill%3d%27%23FECB02%27%2f%3e%3crect%20x%3d%2728.8%27%20y%3d%275%27%20width%3d%277.6%27%20height%3d%2716%27%20rx%3d%272.5%27%20fill%3d%27%23EE8100%27%2f%3e%3crect%20x%3d%2738.4%27%20y%3d%275%27%20width%3d%277.6%27%20height%3d%2716%27%20rx%3d%272.5%27%20fill%3d%27%23E63E11%27%2f%3e%3c%2fsvg%3e%3c%2fsvg%3e");
}

.ng-bg__rot{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 160vmax;
    height: 160vmax;
    transform: translate(-50%, -50%) rotate(45deg);
    transform-origin: center;
}

.ng-bg__slide{
    position: absolute;
    inset: -150px;
    background-image: var(--ng-bg-image);
    background-repeat: repeat;
    background-size: 120px 120px;
    background-position: 0 0;
    will-change: transform;
    animation: ng-bg-slide 28s linear infinite;
}

@keyframes ng-bg-slide{
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -120px, 0); }
}

@media (prefers-reduced-motion: reduce){
    .ng-bg__slide{ animation: none; }
}