:root {
    --bg-page: #0D0F12;
    --surface-card: #14171C;
    --surface-hover: #1A1E24;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #828EA5;
    --border-color: #2D3748;
    --accent-glow: rgba(56, 189, 248, 0.15);
    --accent-solid: #38BDF8;

    /* Named so a light theme can change them. A white overlay is invisible on
       a white page, so these cannot stay hard coded. */
    --border-strong: #475569;
    --overlay-soft: rgba(255, 255, 255, 0.03);
    --overlay-mid: rgba(255, 255, 255, 0.06);
    --overlay-strong: rgba(255, 255, 255, 0.08);
    --hairline: rgba(255, 255, 255, 0.05);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.4);
    --solid-btn-bg: var(--text-primary);
    --solid-btn-fg: var(--bg-page);
    --accent-deep: #38BDF8;
    --accent-on-fill: #0D0F12;
    --accent-text: var(--accent-solid);
    --bar-bg: rgba(13, 15, 18, 0.82);
    --pill-bg: rgba(20, 23, 28, 0.92);

    /* A surface one step ABOVE the card, for the recommended tier. This was a
       hard-coded #1A202C, which is a lift on a dark page and a near-black block
       on a light one: the $5 card rendered as dark ink on a dark fill, which is
       the one card the page most wants read. */
    --surface-raised: #1A202C;
    /* A solid button uses the page's darkest ink as its fill, so hover has to
       move AWAY from the label colour, and which way that is depends on the
       theme. Hard-coding white made it white on white in the light one. */
    --solid-btn-hover: #FFFFFF;
    /* Status colours. Chosen on a dark page, so each needs a darker twin that
       carries the same meaning against white. */
    --ok-text: #4ADE80;
    --bad-text: #F87171;
    --warn-text: #FECACA;
    --tab-selected: #12263a;
}

/* ------------------------------------------------------------- light theme
   Not an inversion. The accent has to change too: the sky blue that carries a
   dark page measures under 2:1 on white, so text set in it would be unreadable
   and the whole reason for having an accent would be lost. #0284C7 is the same
   hue at a contrast that works.

   The page is a warm off white rather than pure white, which is easier to read
   a lot of prose on and keeps the site feeling considered rather than default. */
[data-theme="light"] {
    --bg-page: #FBFBF9;
    --accent-deep: #0369A1;
    --accent-on-fill: #FFFFFF;
    /* The accent is legible ON a dark page and too pale to set text in on a
       white one, so the light theme uses the deeper tone for text as well. */
    --accent-text: #0369A1;
    --surface-card: #FFFFFF;
    --surface-hover: #F3F4F6;
    --text-primary: #14181F;
    --text-secondary: #4A5567;
    --text-muted: #646E80;
    --border-color: #E3E6EB;
    --border-strong: #BFC6D2;
    --accent-glow: rgba(2, 132, 199, 0.12);
    --accent-solid: #0284C7;

    --overlay-soft: rgba(15, 23, 42, 0.025);
    --overlay-mid: rgba(15, 23, 42, 0.045);
    --overlay-strong: rgba(15, 23, 42, 0.07);
    --hairline: rgba(15, 23, 42, 0.08);
    --shadow-card: 0 10px 30px rgba(15, 23, 42, 0.07);
    --solid-btn-bg: #14181F;
    --solid-btn-fg: #FFFFFF;
    --bar-bg: rgba(251, 251, 249, 0.86);
    --pill-bg: rgba(255, 255, 255, 0.94);
    /* A faint blue tint, so the recommended tier still reads as lifted without
       becoming a dark block on a white page. */
    --surface-raised: #F1F7FB;
    --solid-btn-hover: #000000;
    /* The dark-page versions of these measure between 1.5 and 2.2 against white,
       which is text you cannot read. Same meaning, darker. */
    --ok-text: #15803D;
    --bad-text: #B91C1C;
    --warn-text: #9F1239;
    --tab-selected: #E0F2FE;
}

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

body {
    flex-wrap: wrap;
    align-content: flex-start;
    font-family: 'Inter', -apple-system, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-page);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem 1.5rem;
    overflow-x: hidden;
}

.page-wrapper {
    width: 100%;
    max-width: 850px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 2rem;
}

/* Navigation */
.main-nav {
    /* Fixed bar rather than a floating absolute strip. The right padding
       reserves the space the language control occupies, which is what stops
       the last nav items from sliding underneath it. */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.35rem;
    padding: 1.1rem 9.5rem 1.1rem 1.5rem;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 50;
    transition: background 0.3s ease;
    flex-wrap: wrap;
    background: var(--bar-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--hairline);
}

.main-nav a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    padding-bottom: 2px;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--text-primary);
    border-bottom: 1px solid var(--text-muted);
}

/* Header & Hooks */
.header-section {
    text-align: center;
    max-width: 600px;
    margin-bottom: 3.5rem;
    animation: fadeIn 1s ease-out;
}

.hook-title {
    font-size: 2.2rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.core-message {
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Pricing Grid */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    width: 100%;
    align-items: stretch;
    animation: fadeIn 1.2s ease-out;
}

.tier-card {
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 2.5rem 1.75rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.tier-card:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    transform: translateY(-4px);
    box-shadow: var(--shadow-card), 0 0 15px var(--overlay-soft);
}

.tier-header {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
}

.tier-price {
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.tier-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    flex-grow: 1;
}

/* Recommended Tier */
.tier-card.recommended {
    background: var(--surface-raised);
    border: 1px solid rgba(56, 189, 248, 0.4);
    box-shadow: 0 10px 40px var(--accent-glow);
    transform: scale(1.03);
    z-index: 10;
}

.tier-card.recommended:hover {
    transform: scale(1.05);
    border-color: var(--accent-solid);
}

/* Buttons */
.action-btn {
    width: 100%;
    padding: 0.85rem;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

/* The button inside a tier card is decoration: the CARD carries the click
   handler, so the button must not swallow it. That was written as a blanket
   `.action-btn { pointer-events: none }`, which also disabled every OTHER use
   of the class. The "Support the idea" link at the foot of all eight game
   pages is an .action-btn, and clicking it did nothing at all, by mouse or by
   keyboard. Scope the rule to the case it was written for. */
.sleek-btn .action-btn,
.tier-card .action-btn {
    pointer-events: none;
}

.outline-btn {
    background: var(--overlay-soft);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.solid-btn {
    background: var(--solid-btn-bg);
    border: none;
    color: var(--solid-btn-fg);
}

.tier-card:hover .outline-btn {
    background: var(--overlay-strong);
}

.tier-card.recommended:hover .solid-btn {
    background: var(--solid-btn-hover);
}

/* Social Proof Section */
.social-proof-section {
    margin-top: 4rem;
    text-align: center;
    color: var(--text-secondary);
    animation: fadeIn 1.5s ease-out;
}

.proof-numbers {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.proof-stats {
    font-size: 0.85rem;
    color: var(--ok-text);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}

.proof-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Footer & Trust */
.trust-footer {
    margin-top: 3rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.6;
}

.stripe-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.5rem;
    opacity: 0.8;
}

.closing-line {
    margin-top: 5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
    font-weight: 300;
    letter-spacing: 0.02em;
}

/* Share Button */
.share-section {
    margin-top: 2rem;
    text-align: center;
}

.share-btn {
    background: transparent;
    border: 1px dashed var(--text-muted);
    color: var(--text-secondary);
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.share-btn:hover {
    border-color: var(--text-primary);
    color: var(--text-primary);
}

/* Text Content pages */
.text-content {
    max-width: 600px;
    margin: 0 auto;
    animation: fadeIn 1s ease-out;
}

.text-content p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    font-weight: 300;
}

.text-content h2 {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--text-primary);
    margin-bottom: 1.2rem;
    margin-top: 3rem;
}

.section-divider {
    width: 1px;
    height: 20px;
    background: var(--border-color);
    margin: 1.5rem auto;
}

/* Animations Hub */
.page-wrapper>* {
    animation: fadeUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.page-wrapper>*:nth-child(1) {
    animation-delay: 0.1s;
}

.page-wrapper>*:nth-child(2) {
    animation-delay: 0.2s;
}

.page-wrapper>*:nth-child(3) {
    animation-delay: 0.3s;
}

.page-wrapper>*:nth-child(4) {
    animation-delay: 0.4s;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Language Selection UI */
.lang-selector {
    position: fixed;
    top: 0.85rem;
    right: 1.25rem;
    z-index: 100;
    display: flex;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--pill-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.lang-selector span,
.lang-selector a {
    cursor: pointer;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: color 0.2s ease, background 0.2s ease;
    letter-spacing: 0.6px;
    padding: 5px 10px;
    border-radius: 999px;
    line-height: 1;
    user-select: none;
}

.lang-selector span:hover,
.lang-selector a:hover {
    color: var(--text-primary);
    background: var(--overlay-mid);
}

/* Which language is active was never indicated at all. */
.lang-selector span.active,
.lang-selector a.active {
    color: var(--bg-page);
    background: var(--text-primary);
}

/* Native UI overrides to hide Google's messy implementation */
.skiptranslate,
.goog-te-banner-frame {
    display: none !important;
}

body {
    top: 0px !important;
}

/* Live Toast Notification */
.toast-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: var(--pill-bg);
    border: 1px solid var(--border-strong);
    color: var(--text-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 50px;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
}

.toast-notification.hidden {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.toast-icon {
    color: #F43F5E;
    /* soft energetic pink */
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Responsive */
/* On a narrow screen the language pill takes the first line of the fixed bar
   and the nav sits underneath it, so the two can never share a row and
   overlap. body is display:flex (a row), so the nav has to STAY fixed here:
   making it static would turn it into a column beside the content. */
@media (max-width: 780px) {
    .lang-selector {
        top: 0.55rem;
        right: 0.7rem;
    }

    .main-nav {
        padding: 2.75rem 0.7rem 0.75rem;
        gap: 0.7rem 0.85rem;
    }

    .main-nav a {
        font-size: 0.66rem;
    }

    body {
        padding-top: 7.5rem;
    }
}

@media (max-width: 850px) {
    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .tier-card.recommended {
        transform: scale(1);
    }

    .tier-card.recommended:hover {
        transform: scale(1.02);
    }

    .toast-notification {
        bottom: 20px;
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        width: max-content;
    }

    .toast-notification.hidden {
        transform: translate(-50%, 20px);
    }
}

/* Footer Identity */
.site-footer {
    /* Was position:fixed, which pinned it over the page and let it land on top
       of content. It belongs at the end of the document.

       body is a flex ROW, so a static footer would become a column beside the
       content; `width:100%` plus `flex-wrap` on body forces it onto its own
       line underneath instead. */
    position: static;
    width: 100%;
    order: 99;
    margin-top: 4rem;
    padding-bottom: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1;
    font-size: 0.75rem;
    letter-spacing: 0.5px;
}

.footer-center {
    color: var(--text-secondary);
}

.footer-role {
    position: absolute;
    right: 2.5rem;
    color: var(--text-muted);
    font-family: inherit;
    font-style: italic;
}

/* footer-role stacked
   The name is centred and the role was pinned to the right edge, which is only
   ever far enough apart on a wide screen. On a phone the two boxes landed on
   top of each other: 107px of overlap at 375px, worst on the Spanish pages
   where the role text is longest. Measuring page WIDTH never caught it because
   nothing overflowed, they simply collided.

   Below the point where they can no longer sit side by side, take the role out
   of absolute positioning and stack the two lines instead. */
@media (max-width: 780px) {
    .site-footer {
        flex-direction: column;
        gap: 0.25rem;
        text-align: center;
        margin-top: 3rem;
        padding: 0 1.1rem 1.4rem;
        box-sizing: border-box;
    }

    .footer-role {
        position: static;
        right: auto;
        opacity: 0.6;
    }
}

/* Viral Popup */
.sale-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 15, 18, 0.8);
    backdrop-filter: blur(4px);
    z-index: 200;
    display: none;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.sale-popup {
    background: var(--surface-hover);
    border: 1px solid var(--border-color);
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    position: relative;
    min-width: 320px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    animation: popIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes popIn {
    from {
        transform: scale(0.95) translateY(10px);
    }

    to {
        transform: scale(1) translateY(0);
    }
}

.popup-close {
    position: absolute;
    top: 15px;
    left: 20px;
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--text-muted);
    transition: color 0.2s;
}

.popup-close:hover {
    color: var(--text-primary);
}

.sale-popup h3 {
    font-weight: 400;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.sale-prices {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 1.2rem;
}

.new-price {
    color: var(--ok-text);
    font-size: 2rem;
    font-weight: 500;
    text-shadow: 0 0 15px rgba(74, 222, 128, 0.3);
}
/* ============================================================================
   Checkout (Stripe Elements), added alongside the original styles.
   Reuses the existing palette variables so it reads as the same site.
   ========================================================================= */

.co-card {
    width: 100%;
    max-width: 520px;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.75rem;
    text-align: left;
}

.co-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.co-label {
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.co-concept {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}

.co-amount {
    font-size: 1.9rem;
    font-weight: 400;
    color: var(--text-primary);
    white-space: nowrap;
}

.co-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
    margin-bottom: 1.4rem;
}

.co-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
}

.co-field input {
    width: 100%;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.75rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem; /* >=16px keeps iOS from zooming the viewport on focus */
    min-height: 46px;
}

.co-field input:focus {
    outline: none;
    border-color: var(--accent-solid);
}

.co-field input::placeholder { color: var(--text-muted); }

.co-payment { min-height: 90px; margin-bottom: 1.25rem; }

.co-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 2rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.co-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-solid);
    border-radius: 50%;
    display: inline-block;
    animation: co-spin 0.8s linear infinite;
}

@keyframes co-spin { to { transform: rotate(360deg); } }

.co-error {
    background: rgba(248, 113, 113, 0.08);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: var(--warn-text);
    border-radius: 8px;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.co-submit { pointer-events: auto; }
.co-submit:disabled { opacity: 0.5; cursor: not-allowed; }

.co-fineprint {
    margin-top: 1rem;
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}

.co-fineprint a { color: var(--text-secondary); }

.co-gift {
    margin-top: 2.5rem;
    max-width: 480px;
    text-align: center;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--text-muted);
}

.co-gift strong { color: var(--text-secondary); font-weight: 500; }

/* Result panel on success.html */
.res-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 0.7rem;
    margin: 1.75rem 0;
    text-align: left;
}

.res-fact {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    background: var(--overlay-soft);
}

.res-fact dt {
    font-size: 0.65rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.res-fact dd { margin: 0; font-size: 0.95rem; color: var(--text-primary); overflow-wrap: anywhere; }
.res-fact dd.accent { color: var(--accent-text); }

.res-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    justify-content: center;
    margin-top: 1.5rem;
}

.res-actions .action-btn { width: auto; padding: 0.8rem 1.5rem; pointer-events: auto; }

@media (max-width: 540px) {
    .co-fields { grid-template-columns: 1fr; }
    .co-card { padding: 1.25rem; }
    .co-amount { font-size: 1.6rem; }
}

/* The standalone "Claim" link inherits .action-btn's width:100% and had no
   rules of its own, so it rendered as a full-width bar floating across the
   page. Give it a real size and place it under the tiers. */
.claim-btn {
    /* This link sits outside .page-wrapper in the markup, and body is a flex
       row, so in normal flow it becomes a second column beside the content.
       Taking it out of flow makes it a deliberate floating affordance instead
       of a stray element wedged against the tiers. */
    position: fixed;
    left: 20px;
    bottom: 20px;
    z-index: 40;
    display: inline-block;
    width: auto;
    padding: 0.6rem 1.4rem;
    font-size: 0.8rem;
    text-align: center;
    text-decoration: none;
    pointer-events: auto;
    opacity: 0.85;
}

.claim-btn:hover { opacity: 1; }

@media (max-width: 540px) {
    /* Keep clear of the activity toast on a phone. */
    .claim-btn { left: 12px; bottom: 12px; padding: 0.5rem 1.1rem; }
}

/* Supporter counter: the inflated number animates and climbs, with the real
   figure stated underneath. See renderProof() for why it is built this way. */
.proof-numbers.proof-big {
    position: relative;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.proof-truth {
    color: var(--text-muted) !important;
    font-size: 0.78rem !important;
    display: block !important;
    margin-top: 0.35rem;
}

.proof-heart {
    position: absolute;
    left: 50%;
    top: -0.2rem;
    color: #f43f5e;
    font-size: 1rem;
    pointer-events: none;
    animation: proof-float 1.4s ease-out forwards;
}

@keyframes proof-float {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(0.6); }
    18%  { opacity: 1; transform: translate(-50%, -0.35rem) scale(1.15); }
    100% { opacity: 0; transform: translate(-50%, -2.2rem) scale(0.9); }
}

/* Toast: a headline with a quiet meta line, rather than one run-on sentence. */
.toast-line { display: block; font-weight: 500; }

.toast-meta {
    display: block;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.3px;
    margin-top: 1px;
}

/* The weekly figure bumps when it climbs. */
.proof-bump { animation: proof-bump 0.5s ease-out; display: inline-block; }

@keyframes proof-bump {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.22); color: var(--ok-text); }
    100% { transform: scale(1); }
}

/* ============================================================================
   Games
   ========================================================================= */

.game-page body, body.game-page { align-items: flex-start; }

.game-wrap {
    max-width: 620px;
    gap: 1rem;
    padding-bottom: 2rem;
}

.game-head {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.game-title {
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    margin: 0;
}

.game-stats {
    display: flex;
    gap: 1.1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.game-stats strong { color: var(--text-primary); font-weight: 600; }

.game-stage {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.game-stage canvas {
    display: block;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    /* The game handles gestures itself; the browser must not also pan or zoom. */
    touch-action: none;
    max-width: 100%;
}

.game-over {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    text-align: center;
    padding: 1.2rem;
    background: rgba(13, 15, 18, 0.92);
    border-radius: 10px;
}

.game-over[hidden] { display: none; }

/* The two ways out of a game over: start again for nothing, or pay a dollar to
   carry on with the score you had. Free is the solid button, because it is the
   one most people want and hiding it would be the trick this site is against. */
.game-over #go-again,
.game-over .go-life {
    width: auto;
    padding: 0.7rem 1.4rem;
    pointer-events: auto;
}

.game-over .go-life {
    font-size: 0.85rem;
}

.go-note {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    max-width: 24rem;
    color: var(--text-muted);
}
.game-over h2 { font-size: 1.15rem; font-weight: 500; margin: 0; }
.game-over p { font-size: 0.9rem; color: var(--text-secondary); margin: 0 0 0.5rem; }

/* On-screen pad. Shown on touch devices, where there is no keyboard. */
.game-pad {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 1rem;
    user-select: none;
}

.pad-row { display: flex; gap: 8px; }

.game-pad button {
    width: 62px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background: var(--surface-card);
    color: var(--text-primary);
    font-size: 1rem;
    cursor: pointer;
    touch-action: manipulation;
}

.game-pad button:active { background: var(--surface-hover); border-color: var(--accent-solid); }

@media (pointer: coarse) {
    .game-pad { display: flex; }
}

.game-mods {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.2rem;
}

.mods-label {
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 0.2rem;
}

.game-mods button {
    padding: 0.5rem 0.95rem;
    min-height: 40px;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.game-mods button:hover { color: var(--text-primary); border-color: var(--border-strong); }

.game-mods button.on {
    background: var(--accent-solid);
    border-color: var(--accent-solid);
    color: var(--bg-page);
    font-weight: 600;
}

.game-mods .mod-restart { border-style: dashed; }

.game-note {
    margin-top: 1.2rem;
    font-size: 0.8rem;
    line-height: 1.7;
    color: var(--text-muted);
    text-align: center;
    max-width: 460px;
}

.game-cta {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
    text-align: center;
}

.game-cta p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 0.9rem;
    max-width: 420px;
}

/* Catalog */
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: 1rem;
    width: 100%;
}

.game-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem 1.3rem;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.game-card:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    transform: translateY(-4px);
}

.game-card .gc-art {
    font-size: 1.8rem;
    margin-bottom: 0.7rem;
    display: block;
    line-height: 1;
}

.game-card h3 { font-size: 1rem; font-weight: 600; margin: 0 0 0.4rem; }
.game-card p { font-size: 0.82rem; color: var(--text-secondary); margin: 0; line-height: 1.5; }

.game-card.soon { opacity: 0.5; pointer-events: none; }
.game-card .gc-tag {
    display: block;
    margin-top: auto;
    padding-top: 0.9rem;
    font-size: 0.65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

@media (max-width: 540px) {
    .game-head { flex-direction: column; align-items: center; gap: 0.4rem; }
    .game-title { font-size: 1.35rem; }
    .game-pad button { width: 66px; height: 56px; }
}

/* "Most popular" ribbon on a tier. */
.tier-card[data-badge] { position: relative; overflow: visible; }

.tier-card[data-badge]::before {
    content: attr(data-badge);
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent-solid);
    color: var(--bg-page);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(56, 189, 248, 0.28);
}

/* Visitor counter: a real figure, animated, with the weekly climb. */
.proof-numbers.proof-big {
    position: relative;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.proof-arrow { color: var(--ok-text); font-weight: 700; }

/* Name your own amount, on the home page. */
.own-amount {
    margin-top: 2.5rem;
    width: 100%;
    max-width: 420px;
    text-align: center;
}

.own-amount label {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.own-row { display: flex; gap: 0.7rem; }

.own-field { position: relative; flex: 1 1 auto; min-width: 0; }

.own-field span {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 1rem;
    pointer-events: none;
}

.own-field input {
    width: 100%;
    background: var(--surface-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.8rem 0.8rem 0.8rem 2rem;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 1rem;   /* >=16px keeps iOS from zooming the viewport on focus */
    min-height: 48px;
}

.own-field input:focus { outline: none; border-color: var(--accent-solid); }
.own-field input::placeholder { color: var(--text-muted); }

.own-row .own-go {
    width: auto;
    flex: none;
    padding: 0.8rem 1.4rem;
    pointer-events: auto;
}

.own-go:disabled { opacity: 0.45; cursor: not-allowed; }

.own-note {
    margin-top: 0.7rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    min-height: 1.2em;
}

.own-note.err { color: var(--bad-text); }

@media (max-width: 480px) {
    .own-row { flex-wrap: wrap; }
    .own-row .own-go { width: 100%; }
}

/* ============================================================================
   Bottom bar

   The top nav holds eight links and wraps to two lines on a phone, which puts
   the main destinations behind a squint. This is the thumb-reachable version:
   the five places most people actually want, fixed to the bottom on small
   screens and hidden on desktop where the top nav is perfectly usable.
   ========================================================================= */

.bottom-bar {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    /* The bar is chrome, not content, and the two bars above it already follow the theme through this
       token. Hard-coding a dark ground here left its links reading their LIGHT-theme text colours on a
       near-black bar: measured on a real load, the labels scored 3.73 against the bar on the light theme,
       and the active one, at --text-primary #14181F, was near-black on near-black. */
    background: var(--bar-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-color);
    padding-bottom: env(safe-area-inset-bottom);
}

.bottom-bar-inner {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}

.bottom-bar a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 9px 2px 8px;
    min-height: 54px;
    text-decoration: none;
    color: var(--text-muted);
    font-size: 0.62rem;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    transition: color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.bottom-bar a .bb-icon {
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0.85;
}

.bottom-bar a:hover,
.bottom-bar a.active {
    color: var(--text-primary);
}

.bottom-bar a.active .bb-icon { opacity: 1; }

.bottom-bar a.bb-support {
    color: var(--accent-text);
    font-weight: 600;
}

@media (max-width: 780px) {
    .bottom-bar { display: block; }

    /* Clear the bar so nothing sits underneath it. */
    body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

    /* The floating Claim pill would otherwise sit on top of the bar. */
    .claim-btn { bottom: calc(74px + env(safe-area-inset-bottom)); }

    /* Same for the activity toast. */
    .toast-notification { bottom: calc(74px + env(safe-area-inset-bottom)) !important; }
}


/* ---------------------------------------------------------------- field guide
   Long-form reading, which the rest of the site does not do. The measure is
   held near 68 characters because that is where prose stops being tiring, and
   the lists are the part people actually come for, so they get the weight. */

.fg-head { margin-bottom: 2.4rem; }

.fg-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.9rem;
}

.fg-eyebrow a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-color); }
.fg-eyebrow a:hover { color: var(--text-secondary); }

.fg-aka {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 1rem auto 0;
    font-style: italic;
}

.fg-body {
    max-width: 42rem;
    margin: 0 auto;
    text-align: left;
}

.fg-sect { margin-bottom: 2.6rem; }

.fg-sect h2 {
    font-size: 0.72rem;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--accent-text);
    font-weight: 600;
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--border-color);
}

.fg-sect p {
    font-size: 0.95rem;
    line-height: 1.72;
    color: var(--text-secondary);
    margin: 0 0 1rem;
}

.fg-list { margin: 0; padding: 0; list-style: none; }

.fg-list li {
    position: relative;
    padding: 0 0 0 1.5rem;
    margin-bottom: 0.85rem;
    font-size: 0.93rem;
    line-height: 1.65;
    color: var(--text-secondary);
}

/* A dash rather than a bullet: this is a list of tells, not a shopping list. */
.fg-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.65rem;
    height: 1px;
    background: var(--text-muted);
}

.fg-do li::before { background: var(--accent-solid); height: 2px; top: 0.68em; }

.fg-caveat {
    font-size: 0.78rem !important;
    color: var(--text-muted) !important;
    line-height: 1.6 !important;
    border-left: 2px solid var(--border-color);
    padding-left: 0.9rem;
}

.fg-demo {
    border: 1px solid var(--border-color);
    background: var(--surface-card);
    border-radius: 12px;
    padding: 1.4rem;
    margin-bottom: 2.6rem;
}

.fg-demo-tag {
    display: inline-block;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--bg-page);
    background: var(--accent-deep);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 0.8rem;
}

.fg-demo p {
    font-size: 0.9rem;
    line-height: 1.68;
    color: var(--text-secondary);
    margin: 0 0 1.1rem;
}

.fg-demo-btn {
    width: auto !important;
    padding: 0.65rem 1.3rem !important;
    text-decoration: none;
    pointer-events: auto;
    display: inline-block;
    font-size: 0.85rem;
}

.fg-src { margin: 0; padding: 0; list-style: none; }
.fg-src li { margin-bottom: 0.6rem; font-size: 0.88rem; line-height: 1.55; }
.fg-src a { color: var(--text-secondary); text-decoration: none; border-bottom: 1px solid var(--border-color); }
.fg-src a:hover { color: var(--accent-text); border-bottom-color: var(--accent-solid); }

.fg-rel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0.8rem; }

.fg-rel-card {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-card);
    text-decoration: none;
    transition: border-color 0.25s ease, background 0.25s ease;
}

.fg-rel-card:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.fg-rel-card strong { display: block; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.3rem; font-weight: 600; }
.fg-rel-card span { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; }

.fg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
    width: 100%;
    text-align: left;
}

.fg-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.4rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-card);
    text-decoration: none;
    color: inherit;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.fg-card:hover { background: var(--surface-hover); border-color: var(--border-strong); transform: translateY(-4px); }
.fg-card h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 0.5rem; }
.fg-card p { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.58; margin: 0; }

.fg-card-tag {
    display: block;
    margin-top: auto;
    padding-top: 0.9rem;
    font-size: 0.63rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

@media (max-width: 540px) {
    .fg-body { max-width: 100%; }
    .fg-sect { margin-bottom: 2rem; }
}


/* -------------------------------------------------------------- identifier
   Signals on the left, the answer on the right, and on a phone the answer
   sticks to the bottom so it stays visible while you are still ticking. */

.fg-tool {
    display: block;
    width: 100%;
    padding: 1.5rem 1.5rem 1.6rem;
    margin-bottom: 1.6rem;
    border: 1px solid rgba(56, 189, 248, 0.35);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.07), rgba(56, 189, 248, 0.02));
    text-decoration: none;
    color: inherit;
    text-align: left;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.fg-tool:hover { border-color: var(--accent-solid); transform: translateY(-3px); }

.fg-tool-tag {
    display: inline-block;
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--bg-page);
    background: var(--accent-deep);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 0.7rem;
}

.fg-tool strong { display: block; font-size: 1.1rem; margin-bottom: 0.35rem; }
.fg-tool span:last-child { display: block; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }

.id-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.6rem;
    width: 100%;
    text-align: left;
    align-items: start;
}

/* The checklist. Eighty four sentences, so the work is all in making them
   findable: a filter, headings, and rows big enough to hit on a phone. */

.id-left { min-width: 0; }

.id-bar {
    position: sticky;
    top: 3.6rem;
    z-index: 5;
    background: var(--bg-page);
    padding: 0.5rem 0 0.7rem;
    margin-bottom: 0.4rem;
    border-bottom: 1px solid var(--border-color);
}

.id-flabel {
    display: block;
    font-size: 0.66rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

.id-filter {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 0.9rem;
    padding: 0.6rem 0.75rem;
    border-radius: 9px;
    border: 1px solid var(--border-color);
    background: var(--surface-card);
    color: var(--text-primary);
}

.id-filter::placeholder { color: var(--text-muted); }
.id-filter:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 1px; }

.id-meta {
    display: flex;
    align-items: center;
    min-height: 1.2rem;
    margin-top: 0.4rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.id-clear {
    margin-left: auto;
    font: inherit;
    font-size: 0.72rem;
    background: none;
    border: none;
    padding: 0;
    color: var(--accent-text);
    cursor: pointer;
    text-decoration: underline;
}

[dir="rtl"] .id-clear { margin-left: 0; margin-right: auto; }

.id-group { margin: 0 0 1.5rem; }

.id-gh {
    font-size: 0.68rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-weight: 600;
    margin: 1.2rem 0 0.5rem;
    padding-left: 0.7rem;
    border-left: 2px solid var(--accent-solid);
}

[dir="rtl"] .id-gh { padding-left: 0; padding-right: 0.7rem; border-left: none; border-right: 2px solid var(--accent-solid); }

.id-sig {
    display: flex;
    align-items: flex-start;
    padding: 0.62rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 9px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

.id-sig + .id-sig { margin-top: 0.2rem; }
.id-sig:hover { background: var(--surface-hover); }

/* The real checkbox stays in the accessibility tree and out of the way, so the
   tick can be a shape that reads at a glance and is large enough to hit. */
.id-sig input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.id-tick {
    flex: none;
    width: 19px;
    height: 19px;
    margin-top: 0.1rem;
    margin-right: 0.7rem;
    border: 1.5px solid var(--border-strong);
    border-radius: 5px;
    background: var(--surface-card);
    position: relative;
    transition: background 0.15s ease, border-color 0.15s ease;
}

[dir="rtl"] .id-tick { margin-right: 0; margin-left: 0.7rem; }

.id-tick::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid var(--accent-on-fill);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform 0.15s ease;
}

.id-txt { font-size: 0.86rem; line-height: 1.55; color: var(--text-secondary); }

.id-sig input:checked ~ .id-tick { background: var(--accent-deep); border-color: var(--accent-deep); }
.id-sig input:checked ~ .id-tick::after { transform: rotate(45deg) scale(1); }
.id-sig input:checked ~ .id-txt { color: var(--text-primary); }

.id-sig:has(input:checked) {
    background: var(--accent-glow);
    border-color: var(--accent-solid);
}

/* :has is recent. Without it the row still changes: the tick fills and the
   text darkens, which is the part that matters. */
.id-sig input:focus-visible ~ .id-tick {
    outline: 2px solid var(--accent-solid);
    outline-offset: 2px;
}

.id-none { font-size: 0.84rem; color: var(--text-muted); padding: 0.6rem 0.75rem; margin: 0; }

.id-picked {
    font-size: 0.66rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--accent-text);
    margin: 0 0 0.5rem;
}

.id-meter {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: var(--overlay-mid);
    margin-bottom: 0.55rem;
    overflow: hidden;
}

.id-meter i { display: block; height: 100%; background: var(--accent-deep); }

.id-jump {
    display: none;
    margin-top: 0.45rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: var(--accent-glow);
    border: 1px solid var(--accent-solid);
    color: var(--accent-text);
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    line-height: 1.4;
}

@media (max-width: 860px) {
    .id-bar { top: 0; }
    .id-sig { padding: 0.7rem 0.75rem; }
    /* The panel is a long way below once the columns stack, so the answer
       rides along in the bar that is already stuck to the top. */
    .id-jump:not([hidden]) { display: block; }
    .id-out { margin-top: 1.4rem; }
}

.id-out {
    position: sticky;
    top: 4.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-card);
    padding: 1.2rem;
    min-height: 8rem;
}

.id-empty { font-size: 0.83rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.id-head { font-size: 0.8rem; color: var(--text-secondary); margin: 0 0 0.9rem; line-height: 1.5; }

.id-card {
    display: block;
    padding: 0.9rem 1rem;
    margin-bottom: 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--bg-page);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

.id-card:hover { border-color: var(--border-strong); }
.id-top { border-color: rgba(56, 189, 248, 0.45); }
.id-card strong { display: block; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 0.15rem; }
.id-score { display: block; font-size: 0.66rem; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent-text); margin-bottom: 0.45rem; }
.id-sum { display: block; font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; margin-bottom: 0.5rem; }
.id-go { display: block; font-size: 0.72rem; color: var(--text-secondary); border-top: 1px solid var(--border-color); padding-top: 0.5rem; }

@media (max-width: 780px) {
    .id-wrap { grid-template-columns: 1fr; gap: 1rem; }
    /* Keep the answer in view while the thumb is still working down the list. */
    .id-out { position: sticky; top: auto; bottom: 4.6rem; order: -1; }
}


/* ---------------------------------------------------------------------- RTL
   Arabic runs right to left, so anything pinned to an edge has to swap sides.
   There are not many: the language pill, the footer role, the claim button and
   the FAB. Everything else is centred or full width and needs nothing.

   Scoped to [dir="rtl"] so the left to right pages are untouched by any of it. */

[dir="rtl"] {
    /* Inter has no Arabic, so the browser would fall back to whatever the
       system happens to have. Name a face that actually covers the script. */
    font-family: "IBM Plex Sans Arabic", "Noto Sans Arabic", Inter, system-ui, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] .hook-title,
[dir="rtl"] .core-message,
[dir="rtl"] .fg-body,
[dir="rtl"] .fg-sect p,
[dir="rtl"] .fg-list li {
    font-family: inherit;
}

[dir="rtl"] .lang-selector { right: auto; left: 1.25rem; }
[dir="rtl"] .footer-role { right: auto; left: 2.5rem; }
[dir="rtl"] .claim-btn { left: auto; right: 20px; }
[dir="rtl"] .fab { right: auto; left: 30px; }

/* The dash before a field guide bullet has to sit on the other side, and the
   padding with it, or the text runs under its own marker. */
[dir="rtl"] .fg-list li { padding: 0 1.5rem 0 0; }
[dir="rtl"] .fg-list li::before { left: auto; right: 0; }
[dir="rtl"] .fg-caveat { border-left: none; border-right: 2px solid var(--border-color); padding-left: 0; padding-right: 0.9rem; }
[dir="rtl"] .fg-body,
[dir="rtl"] .fg-grid,
[dir="rtl"] .id-wrap,
[dir="rtl"] .fg-tool { text-align: right; }

[dir="rtl"] .id-sig { flex-direction: row; }
[dir="rtl"] .id-out { text-align: right; }

@media (max-width: 780px) {
    [dir="rtl"] .lang-selector { right: auto; left: 0.7rem; }
    [dir="rtl"] .claim-btn { left: auto; right: 12px; }
}

/* Numbers, prices and Latin product names stay left to right inside Arabic
   text, which is what the bidi algorithm does on its own, but an isolated span
   keeps a price from swallowing the punctuation next to it. */
[dir="rtl"] .price,
[dir="rtl"] .tier-price,
[dir="rtl"] .hud-num,
[dir="rtl"] [data-ltr] {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
}


/* ------------------------------------------------- clearing the fixed bar
   Below 780px the bottom bar is fixed, 66px tall, and painted over the page.
   When the browser scrolls a control into view on its own, which is what
   happens the moment focus moves to it, it stops as soon as the control is
   inside the VIEWPORT. It knows nothing about a bar drawn on top of that, so
   the control comes to rest underneath, and the tap meant for it hits the bar.

   Nothing else catches this. The page is not too wide, nothing overflows, and
   the control is present and clickable in the DOM. It was measured instead:
   202 controls across 32 pages, including the checkout submit button and every
   Restart in every game.

   scroll-margin tells the browser to stop short by this much, which is the
   whole fix. */
@media (max-width: 780px) {
    a,
    button,
    input,
    select,
    textarea,
    summary,
    [tabindex]:not([tabindex="-1"]),
    .fg-card,
    .game-card,
    .tier-card,
    .sleek-btn,
    .fg-rel-card,
    .fg-tool,
    .id-card {
        scroll-margin-bottom: calc(78px + env(safe-area-inset-bottom));
    }

    /* The bar's own links are fixed, so they are never scrolled to. */
    .bottom-bar a { scroll-margin-bottom: 0; }
}


/* ====================================================================== head
   The bar had ten items in a row and read as a list rather than a structure.
   Grouping the pages that belong together takes it to five, and the two
   controls move into the bar instead of floating over it.

   The menus open on CLICK, not hover. A hover menu cannot be opened on a
   phone, and one that opens as the pointer passes is a menu you fight with. */

.nav-group { position: relative; display: inline-flex; }

.nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: none;
    border: none;
    cursor: pointer;
    font: inherit;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 0 0 2px;
    transition: color 0.25s ease;
}

.nav-trigger:hover,
.nav-trigger[aria-expanded="true"],
.nav-group.here .nav-trigger { color: var(--text-primary); }

.nav-caret { font-size: 0.55em; opacity: 0.7; transition: transform 0.25s ease; }
.nav-trigger[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }

.nav-menu {
    position: absolute;
    top: calc(100% + 0.7rem);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    min-width: 11.5rem;
    padding: 0.45rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--surface-card);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 1px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 60;
}

.nav-menu[data-open="true"] { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.nav-menu a {
    display: block;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    font-size: 0.8rem;
    letter-spacing: 0.2px;
    text-transform: none;
    color: var(--text-secondary);
    white-space: nowrap;
}

.nav-menu a:hover,
.nav-menu a.active {
    background: var(--surface-hover);
    color: var(--text-primary);
    border-bottom: none;
}

.nav-menu .nav-note {
    padding: 0.3rem 0.7rem 0.45rem;
    font-size: 0.63rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ---- the two controls, in the bar rather than floating over it */

.head-tools {
    position: fixed;
    top: 0.7rem;
    right: 1.1rem;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 34px;
    height: 34px;
    padding: 0 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--pill-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: var(--text-primary); border-color: var(--border-strong); }
.icon-btn .ib-glyph { font-size: 0.95em; line-height: 1; }

.head-support {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 0.85rem;
    border-radius: 999px;
    background: var(--accent-deep);
    color: var(--accent-on-fill);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter 0.2s ease;
}

.head-support:hover { filter: brightness(1.12); }

.lang-menu { left: auto; right: 0; transform: translateY(-4px); min-width: 9rem; }
.lang-menu[data-open="true"] { transform: translateY(0); }
.lang-menu a { display: flex; justify-content: space-between; gap: 0.8rem; }
.lang-menu a span { color: var(--text-muted); font-size: 0.72rem; }

@media (max-width: 780px) {
    .head-tools { top: 0.5rem; right: 0.6rem; gap: 0.3rem; }
    .icon-btn { min-width: 31px; height: 31px; padding: 0 0.5rem; font-size: 0.66rem; }
    .head-support { display: none; }        /* the bottom bar already has it */
    .nav-menu { min-width: 10rem; }
}

/* Arabic runs the other way, and the text does mirror: the nav links read
   right to left, and الرئيسية sits at the start of the line where it belongs.

   The utility cluster does NOT mirror, and that is a deliberate exception.
   Full mirroring is the usual RTL convention and this site did it for a while,
   which put the Support button hard against the left edge. Keeping the theme
   toggle, the language picker and the Support button in the same corner in
   every language means someone switching language finds them where they left
   them, and it is the one part of the page that is chrome rather than reading
   matter. If that turns out to read wrong to an Arabic speaker, the fix is to
   delete this comment and the rule below and let it mirror again. */
[dir="rtl"] .head-tools {
    left: auto;
    right: 1.1rem;
    /* And the contents keep their order too, so Support sits in the same corner
       of the screen in every language rather than only the cluster doing so.
       Reversing the row is what keeps the three controls in the same physical
       places, because the flex row itself is laid out right to left in RTL. */
    flex-direction: row-reverse;
}
@media (max-width: 780px) { [dir="rtl"] .head-tools { left: auto; right: 0.6rem; } }


/* ================================================================ footer nav
   The grouped menus keep the bar calm, and they hide their links until they
   are opened. That is fine for a person and not fine as the ONLY route: with
   JavaScript off the menus never open, and every page behind one becomes
   unreachable. A plain list in the footer is the route that always works, and
   it is what a reader looking for something specific reaches for anyway. */

.site-nav-foot {
    width: 100%;
    order: 98;
    margin-top: 4rem;
    padding: 2.4rem 1.5rem 0;
    border-top: 1px solid var(--border-color);
    box-sizing: border-box;
}

.snf-inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
    gap: 1.8rem;
    max-width: 62rem;
    margin: 0 auto;
    text-align: left;
}

.snf-col h3 {
    font-size: 0.63rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.snf-col a {
    display: block;
    font-size: 0.83rem;
    line-height: 1.55;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.22rem 0;
    transition: color 0.2s ease;
}

.snf-col a:hover { color: var(--text-primary); }
.snf-col a.active { color: var(--text-primary); }

@media (max-width: 780px) {
    .site-nav-foot { margin-top: 3rem; padding: 1.9rem 1.1rem 0; }
    .snf-inner { gap: 1.4rem; }
}

/* Three small utilities that lived inside one calculator's own <style> block
   and were used well outside it. The policy pages and the changelog all carry
   a "written plainly rather than by a lawyer, and not legal advice" footnote
   with class rp-privacy, and on every one of those pages it was rendering at
   full body size with no rule beside it, because the class only existed on
   /tools/real-price. A disclaimer that looks exactly like the policy above it
   is not doing its job. */

.rp-ghost {
    font: inherit;
    font-size: 0.78rem;
    padding: 0.5rem 0.8rem;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background: var(--overlay-soft);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.rp-ghost:hover { background: var(--overlay-mid); color: var(--text-primary); }
.rp-ghost:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 1px; }

.rp-label {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.35rem;
}

/* .text-content p sets 1.1rem and is one point more specific, so the footnote
   kept body size wherever it sat inside prose. Matching that specificity rather
   than reaching for !important. */
.rp-privacy,
.text-content .rp-privacy {
    font-size: 0.78rem;
    line-height: 1.6;
    color: var(--text-muted);
    border-left: 2px solid var(--border-color);
    padding-left: 0.9rem;
    margin: 1.4rem 0 0;
}

[dir="rtl"] .rp-privacy {
    border-left: none;
    border-right: 2px solid var(--border-color);
    padding-left: 0;
    padding-right: 0.9rem;
}

/* Checkout controls must not sit beneath fixed navigation. */
.checkout-page .bottom-bar{position:static;margin-top:40px}.co-review{font-size:14px;line-height:1.6;margin-bottom:28px}.co-review h2{font-size:22px;line-height:1.3}.co-review p{margin:16px 0}.co-review a{text-decoration:underline}.co-review select{width:100%;padding:12px;font:inherit;background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-color);border-radius:8px}.co-review button{width:100%;min-height:48px;padding:12px;font:inherit;cursor:pointer}.co-review button:disabled{opacity:.5;cursor:default}