/* /Components/AchievementList.razor.rz.scp.css */
.achievements[b-yvjo4p2bv6] {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.achievements-header[b-yvjo4p2bv6] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.achievements-header h2[b-yvjo4p2bv6] {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b39868;
}

.achievements-count[b-yvjo4p2bv6] {
    font-size: 0.85rem;
    color: #ffd857;
    font-weight: 700;
}

.achievement-tabs[b-yvjo4p2bv6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.75rem;
}

.achievement-tab[b-yvjo4p2bv6] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.4rem;
    color: #cbb78e;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}

.achievement-tab:hover[b-yvjo4p2bv6] {
    background: rgba(255, 216, 87, 0.1);
    border-color: rgba(255, 216, 87, 0.3);
}

.achievement-tab.active[b-yvjo4p2bv6] {
    background: linear-gradient(180deg, rgba(255, 216, 87, 0.22), rgba(255, 165, 60, 0.22));
    border-color: rgba(255, 216, 87, 0.6);
    color: #ffe9a8;
}

.achievement-tab.complete .tab-icon[b-yvjo4p2bv6] {
    filter: drop-shadow(0 0 3px rgba(255, 216, 87, 0.9));
}

.achievement-tab .tab-icon[b-yvjo4p2bv6] {
    font-size: 1rem;
    line-height: 1;
}

.achievement-tab .tab-count[b-yvjo4p2bv6] {
    font-size: 0.72rem;
    font-weight: 700;
    color: #9c8a63;
}

.achievement-tab.active .tab-count[b-yvjo4p2bv6] {
    color: #ffd857;
}

.achievement-grid[b-yvjo4p2bv6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.4rem, 1fr));
    gap: 0.3rem;
    /* Cap the panel height so 300+ tiles don't stretch the whole column;
       overflow scrolls inside the box, matching the original's fixed panel. */
    max-height: 16rem;
    overflow-y: auto;
    /* Room so tiles never sit flush against the scrollbar. */
    padding-right: 0.25rem;
    /* Firefox: thin bar tinted to match the WebKit thumb/track below. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 216, 87, 0.3) rgba(0, 0, 0, 0.25);
}

/* Slim, themed scrollbar so it blends with the panel. */
.achievement-grid[b-yvjo4p2bv6]::-webkit-scrollbar {
    width: 0.5rem;
}

.achievement-grid[b-yvjo4p2bv6]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.4rem;
}

.achievement-grid[b-yvjo4p2bv6]::-webkit-scrollbar-thumb {
    background: rgba(255, 216, 87, 0.3);
    border-radius: 0.4rem;
}

.achievement-grid[b-yvjo4p2bv6]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 216, 87, 0.5);
}

.achievement-tile[b-yvjo4p2bv6] {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.3rem;
    font-size: 1.2rem;
    cursor: help;
}

.achievement-tile.unlocked[b-yvjo4p2bv6] {
    background: linear-gradient(180deg, rgba(255, 216, 87, 0.15), rgba(255, 165, 60, 0.15));
    border-color: rgba(255, 216, 87, 0.4);
}

.achievement-tile.locked .achievement-icon[b-yvjo4p2bv6] {
    filter: grayscale(1) brightness(0.5);
    opacity: 0.6;
}
/* /Components/AchievementToasts.razor.rz.scp.css */
.ach-toasts[b-a4786qu2ip] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    pointer-events: none;
}

.ach-toast[b-a4786qu2ip] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(180deg, rgba(255, 216, 87, 0.95), rgba(255, 165, 60, 0.95));
    color: #1c120a;
    border-radius: 0.4rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    min-width: 16rem;
    animation: ach-in-b-a4786qu2ip 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.ach-toast-icon[b-a4786qu2ip] { font-size: 2rem; }
.ach-toast-title[b-a4786qu2ip] {
    font-size: 0.7rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 700;
    opacity: 0.7;
}
.ach-toast-name[b-a4786qu2ip] { font-weight: 700; font-size: 0.95rem; }

@keyframes ach-in-b-a4786qu2ip {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}
/* /Components/AscendPanel.razor.rz.scp.css */
.ascend-panel[b-58imiwc8ee] {
    margin-top: 12px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #2d1e40 0%, #1b1229 100%);
    border-radius: 10px;
    color: #e8d9ff;
    box-shadow: inset 0 0 0 1px #7d5cc9, 0 4px 10px rgba(0, 0, 0, 0.35);
}

.ascend-header[b-58imiwc8ee] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 6px;
}

.ascend-header h3[b-58imiwc8ee] {
    margin: 0;
    font-size: 15px;
    color: #d9b7ff;
}

.ascend-current[b-58imiwc8ee] {
    font-weight: 700;
    color: #ffdc86;
    font-size: 13px;
}

.ascend-blurb[b-58imiwc8ee] {
    margin: 4px 0 8px 0;
    font-size: 12px;
    line-height: 1.4;
    color: #cbb6ea;
}

.ascend-blurb strong[b-58imiwc8ee] {
    color: #ffdc86;
}

.ascend-btn[b-58imiwc8ee] {
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(180deg, #a86bff 0%, #6f39d1 100%);
    color: #fff8ff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 3px 0 #40208a, 0 6px 14px rgba(80, 30, 180, 0.55);
    transition: transform 60ms ease, box-shadow 60ms ease;
}

.ascend-btn:active[b-58imiwc8ee] {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #40208a, 0 3px 8px rgba(80, 30, 180, 0.55);
}

.ascend-btn.danger[b-58imiwc8ee] {
    background: linear-gradient(180deg, #ff7676 0%, #b53434 100%);
    box-shadow: 0 3px 0 #7a1f1f, 0 6px 14px rgba(180, 30, 30, 0.5);
}

.ascend-confirm[b-58imiwc8ee] {
    background: rgba(15, 8, 30, 0.6);
    border-radius: 8px;
    padding: 10px;
    font-size: 12px;
    line-height: 1.4;
}

.ascend-confirm p[b-58imiwc8ee] {
    margin: 0 0 8px 0;
    color: #d5c2f5;
}

.ascend-actions[b-58imiwc8ee] {
    display: flex;
    gap: 8px;
}

.ascend-actions .ascend-btn[b-58imiwc8ee] {
    padding: 7px 10px;
    font-size: 13px;
}
/* /Components/BigCookie.razor.rz.scp.css */
/* Click "bounce" mirrors the original Cookie Clicker (cookieclicker-reference/
   style.css:430-467) verbatim: it is not a keyframe animation. The whole feel
   is produced by a 100ms transition on transform+opacity plus two pseudo-class
   states — :hover scales up slightly and fades, :active scales *uniformly*
   down to 0.98 (which is why the cookie stays round and does not deform).
   Releasing the mouse lets the transition carry it back, and that return glide
   is what reads as the "bounce". No JS, no @keyframes, no restart trick. */

.big-cookie[b-r58rjcu24z] {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin: 0;
    line-height: 1;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.5));
    /* Original uses 0.1s ease-out on opacity and transform together. */
    transition: opacity 100ms ease-out, transform 100ms ease-out;
    user-select: none;
    /* Mobile Chrome/WebView paints a translucent blue rectangle over any
       tapped <button> via -webkit-tap-highlight-color. On the round cookie
       that flash reads as a bug, so suppress it — the :active scale below
       already provides press feedback. */
    -webkit-tap-highlight-color: transparent;
    /* Sit above the decorative milk layer (z-index:1) so the cookie stays
       fully visible and clickable no matter how high the milk rises. */
    position: relative;
    z-index: 2;
    transform-origin: 50% 50%;
}

.big-cookie-img[b-r58rjcu24z] {
    width: 15rem;
    height: 15rem;
    display: block;
    /* Suppress the drag-to-save ghost image so the cookie feels like a button. */
    -webkit-user-drag: none;
    user-select: none;
}

.big-cookie:hover[b-r58rjcu24z]  { transform: scale(1.05); opacity: 0.9; }
.big-cookie:active[b-r58rjcu24z] { transform: scale(0.98); opacity: 1;   }

@media (max-width: 900px) {
    .big-cookie-img[b-r58rjcu24z] { width: 10rem; height: 10rem; }
}
/* /Components/BuildingList.razor.rz.scp.css */
.building-list[b-lnnpoxj27y] {
    padding: 1rem;
    overflow-y: auto;
}

.building-list-header[b-lnnpoxj27y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.building-list-header h2[b-lnnpoxj27y] {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b39868;
}

.bulk-select[b-lnnpoxj27y] {
    display: flex;
    gap: 0.25rem;
}

.bulk-option[b-lnnpoxj27y] {
    padding: 0.25rem 0.6rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #a08765;
    border-radius: 0.3rem;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 600;
    transition: all 100ms;
}

.bulk-option:hover[b-lnnpoxj27y] {
    background: rgba(255, 255, 255, 0.08);
    color: #f2e6cf;
}

.bulk-option.active[b-lnnpoxj27y] {
    background: #ffd857;
    color: #1c120a;
    border-color: #ffd857;
}
/* /Components/BuildingRow.razor.rz.scp.css */
.building-row[b-fwoxsn34es] {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.6rem 0.8rem;
    margin-bottom: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
    background: linear-gradient(90deg, rgba(60, 40, 20, 0.7), rgba(40, 25, 12, 0.7));
    color: #f2e6cf;
    cursor: pointer;
    text-align: left;
    transition: background 100ms, transform 60ms;
}

.building-row:hover:not(.locked)[b-fwoxsn34es] {
    background: linear-gradient(90deg, rgba(80, 55, 25, 0.9), rgba(55, 35, 18, 0.9));
    transform: translateX(2px);
}

.building-row.locked[b-fwoxsn34es] {
    opacity: 0.55;
    cursor: not-allowed;
    filter: grayscale(0.4);
}

/* "Coming next" placeholder: heavily dimmed, no hover lift, hidden identity. */
.building-row.locked-preview[b-fwoxsn34es] {
    opacity: 0.4;
    cursor: help;
    filter: grayscale(0.9);
    border-style: dashed;
    background: linear-gradient(90deg, rgba(35, 30, 25, 0.6), rgba(25, 20, 15, 0.6));
}

.building-row.locked-preview .building-name[b-fwoxsn34es] {
    color: #9a8d78;
    letter-spacing: 0.15em;
}

.building-row.locked-preview .building-cost[b-fwoxsn34es] {
    color: #a08765;
}

.building-icon[b-fwoxsn34es] {
    font-size: 2rem;
    margin-right: 0.75rem;
    flex-shrink: 0;
    width: 2.5rem;
    text-align: center;
}

.building-body[b-fwoxsn34es] {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.building-name[b-fwoxsn34es] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #f7dfa8;
}

.building-cost[b-fwoxsn34es] {
    font-size: 0.85rem;
    color: #ffd857;
}

.bulk-tag[b-fwoxsn34es] {
    margin-left: 0.3rem;
    padding: 0 0.4rem;
    background: rgba(255, 216, 87, 0.2);
    border-radius: 0.3rem;
    font-size: 0.7rem;
}

.building-info[b-fwoxsn34es] {
    font-size: 0.75rem;
    color: #a08765;
    display: flex;
    gap: 0.4rem;
}

.building-count[b-fwoxsn34es] {
    font-size: 1.8rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.15);
    margin-left: 0.5rem;
    min-width: 2ch;
    text-align: right;
}
/* /Components/CursorRing.razor.rz.scp.css */
/* Decorative ring of fingers behind the cookie. pointer-events:none ensures
   it doesn't intercept clicks or block the milk layer's tooltip. The inner
   spinner does the actual 60s rotation; the outer container stays fixed. */
.cursor-ring[b-jakp5460vy] {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    /* Keep the spinner centred on the cookie regardless of container aspect. */
    display: grid;
    place-items: center;
}

/* Inner wrapper that actually spins; fingers live inside this. */
.cursor-ring-spinner[b-jakp5460vy] {
    position: absolute;
    inset: 0;
    animation: cursor-ring-spin-b-jakp5460vy 60s linear infinite;
    display: grid;
    place-items: center;
}

/* Stationary, invisible hit target for the tooltip. It's a donut covering the
   finger band (inner rings ≈8.2rem out to outer ≈17rem when all 5 rings fill)
   with a hollow centre the size of the cookie, punched out via a radial-gradient
   mask so clicks fall straight through to the big cookie. Being fixed (outside
   the spinner), its bounding rect is constant, so the tooltip anchors here and
   never chases the rotating fingers — the bug that killed the original ring
   tooltip. */
.cursor-ring-hit[b-jakp5460vy] {
    position: absolute;
    width: 36rem;
    height: 36rem;
    border-radius: 50%;
    pointer-events: auto;
    cursor: help;
    /* Hollow out the central cookie-sized disc: transparent (masked-out, so no
       pointer events) inside 7.5rem, opaque (hit-testable) beyond it. */
    -webkit-mask: radial-gradient(circle at center, transparent 7.5rem, #000 7.5rem);
    mask: radial-gradient(circle at center, transparent 7.5rem, #000 7.5rem);
}

.cursor-finger[b-jakp5460vy] {
    position: absolute;
    /* Anchor the finger box on the ring centre, then rotate to its angle and
       push out along the radius. Centring via left/top:50% + translate(-50%,-50%)
       (NOT negative margins) is what keeps the rotation pivot exactly ON the
       centre. The old margin trick double-centred against the spinner's
       place-items:center — the pivot ended up off by half the finger's
       (non-square) box, so a finger's true distance from the cookie centre
       varied with its angle: fingers near the top read farther out, those near
       the bottom got pulled under the cookie. */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--radius)));
    transform-origin: center;
    /* The stationary .cursor-ring-hit handles all hover now. Fingers must NOT
       take pointer events: as they rotate over the cursor they'd otherwise steal
       the hover from the hit ring, firing mouseout and making the tooltip flicker
       (and the old finger-as-anchor bug is exactly what the hit ring replaced). */
    pointer-events: none;
    width: 1.15rem;
    height: 1.9rem;
}

/* Inner wrapper does the "poke" toward the cookie — a short push inward and
   back. Kept separate from the placement transform so the two don't fight.
   Phase is staggered per finger via animation-delay so they tap out of sync. */
.cursor-finger-poke[b-jakp5460vy] {
    width: 100%;
    height: 100%;
    animation: cursor-finger-poke-b-jakp5460vy 1.2s ease-in-out infinite;
    animation-delay: var(--phase);
    transform-origin: center;
}

.cursor-finger-svg[b-jakp5460vy] {
    width: 100%;
    height: 100%;
    /* Point the fingertip inward, toward the cookie at the ring's centre. */
    transform: rotate(180deg);
    fill: var(--finger-fill, #f5f5f5);
    stroke: var(--finger-stroke, rgba(0, 0, 0, 0.35));
    /* Non-scaling stroke keeps the outline crisp and constant regardless of
       the 448×512 viewBox being scaled to fit the 1.15rem CSS box. */
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

/* Colour tiers: white → green → blue → purple → orange → red → gold. Each tier
   up means every finger represents twice as many cursors (see CursorRingLayout).
   Fill is the bright face; stroke a darker same-hue outline for definition. */
.cursor-finger.tier-0[b-jakp5460vy] { --finger-fill: #f5f5f5; --finger-stroke: #b8b8b8; }
.cursor-finger.tier-1[b-jakp5460vy] { --finger-fill: #6fcf6f; --finger-stroke: #2f7d2f; }
.cursor-finger.tier-2[b-jakp5460vy] { --finger-fill: #5aa9f0; --finger-stroke: #245f9e; }
.cursor-finger.tier-3[b-jakp5460vy] { --finger-fill: #b57ee0; --finger-stroke: #6a3f94; }
.cursor-finger.tier-4[b-jakp5460vy] { --finger-fill: #f0a24b; --finger-stroke: #a5641d; }
.cursor-finger.tier-5[b-jakp5460vy] { --finger-fill: #e85d5d; --finger-stroke: #9c2f2f; }
.cursor-finger.tier-6[b-jakp5460vy] {
    --finger-fill: #f5d76e;
    --finger-stroke: #b8912b;
    /* A little extra glow so the ultimate tier reads as special. */
    filter: drop-shadow(0 0 3px rgba(245, 215, 110, 0.8));
}

@keyframes cursor-ring-spin-b-jakp5460vy {
    to { transform: rotate(360deg); }
}

/* Push inward (toward the cookie) then ease back — the "tap". translateY is in
   the finger's local frame, which points outward, so a positive Y moves the
   fingertip toward the centre. */
@keyframes cursor-finger-poke-b-jakp5460vy {
    0%, 70%, 100% { transform: translateY(0); }
    85% { transform: translateY(0.4rem); }
}

/* Respect reduced-motion: freeze both the orbit and the tapping so the ring is
   a static decoration rather than a source of vestibular discomfort. */
@media (prefers-reduced-motion: reduce) {
    .cursor-ring[b-jakp5460vy] { animation: none; }
    .cursor-finger-poke[b-jakp5460vy] { animation: none; }
}

/* Mobile: the cookie shrinks (image 15rem → 10rem), so pull the rings inward to
   stay hugging the cookie. Scales the base radius and gap by ~0.66. */
@media (max-width: 900px) {
    .cursor-finger[b-jakp5460vy] {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-0.66 * var(--radius)));
        width: 0.82rem;
        height: 1.35rem;
    }

    /* Shrink the hit donut with the ring and move the hollow centre in to the
       10rem cookie's 5rem radius, so clicks still fall through to the cookie. */
    .cursor-ring-hit[b-jakp5460vy] {
        width: 24rem;
        height: 24rem;
        -webkit-mask: radial-gradient(circle at center, transparent 5rem, #000 5rem);
        mask: radial-gradient(circle at center, transparent 5rem, #000 5rem);
    }
}
/* /Components/GoldenCookieLayer.razor.rz.scp.css */
.golden-cookie[b-p1a0veli13] {
    position: fixed;
    z-index: 100;
    background: none;
    border: none;
    padding: 0;
    font-size: 3.5rem;
    cursor: pointer;
    filter: drop-shadow(0 0 12px rgba(255, 216, 87, 0.9));
    animation: gc-float-b-p1a0veli13 2s ease-in-out infinite, gc-spin-b-p1a0veli13 8s linear infinite;
    user-select: none;
    transform: translate(-50%, -50%);
}

.golden-cookie:hover[b-p1a0veli13] {
    transform: translate(-50%, -50%) scale(1.15);
}

@keyframes gc-float-b-p1a0veli13 {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(255, 216, 87, 0.9)); }
    50% { filter: drop-shadow(0 0 24px rgba(255, 255, 150, 1)); }
}

@keyframes gc-spin-b-p1a0veli13 {
    from { rotate: 0deg; }
    to { rotate: 360deg; }
}
/* /Components/LanguageSelect.razor.rz.scp.css */
.language-select[b-8d2wnyo9se] {
    position: relative;
    display: inline-block;
}

.language-trigger[b-8d2wnyo9se] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 140px;
    padding: 5px 10px;
    background: #1c130a;
    color: #ffdc86;
    border: 1px solid #5c4426;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: border-color 120ms, background 120ms;
}

.language-trigger:hover[b-8d2wnyo9se] {
    border-color: #b6873c;
    background: #241608;
}

.language-icon[b-8d2wnyo9se] {
    font-size: 13px;
    line-height: 1;
}

.language-current[b-8d2wnyo9se] {
    flex: 1;
    text-align: left;
    white-space: nowrap;
}

.language-caret[b-8d2wnyo9se] {
    font-size: 11px;
    color: #d7bd8b;
    transition: transform 120ms;
}

.language-caret.open[b-8d2wnyo9se] {
    transform: rotate(180deg);
}

/* Transparent click-catcher behind the list. */
.language-scrim[b-8d2wnyo9se] {
    position: fixed;
    inset: 0;
    z-index: 10;
}

.language-list[b-8d2wnyo9se] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 11;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: linear-gradient(180deg, #33240f 0%, #241608 100%);
    border: 1px solid #b6873c;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    animation: language-pop-b-8d2wnyo9se 120ms ease-out;
}

.language-option[b-8d2wnyo9se] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    background: transparent;
    color: #f2e6cf;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
    transition: background 100ms;
}

.language-option:hover[b-8d2wnyo9se] {
    background: rgba(255, 216, 87, 0.14);
}

.language-option.selected[b-8d2wnyo9se] {
    color: #ffdc86;
    background: rgba(255, 216, 87, 0.08);
}

.language-check[b-8d2wnyo9se] {
    width: 12px;
    flex-shrink: 0;
    color: #ffd857;
    font-size: 12px;
}

@keyframes language-pop-b-8d2wnyo9se {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/MilkLayer.razor.rz.scp.css */
/* Milk sits at the bottom of the (position:relative, overflow:hidden) cookie
   area and rises with milk level. Behind the cookie (low z-index) so clicks and
   the big cookie itself stay unobstructed. */
.milk[b-m5myt3zxfs] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /* Receives hover so the tooltip can fire; the big cookie sits at a higher
       z-index, so clicks on the cookie still land on the cookie, not the milk. */
    cursor: help;
    transition: height 600ms ease-out;
    overflow: hidden;
}

/* Decorative layers never intercept pointer events — only the container does. */
.milk-body[b-m5myt3zxfs],
.milk-wave[b-m5myt3zxfs] {
    pointer-events: none;
}

/* Solid milk body fills everything below the animated surface strip. */
.milk-body[b-m5myt3zxfs] {
    position: absolute;
    left: 0;
    right: 0;
    top: 18px;
    bottom: 0;
    background: linear-gradient(to bottom, #f7f4ec 0%, #efe9db 100%);
}

/* Each wave is a horizontally-tiled SVG sine crest, 200% wide so it can scroll
   one full period and loop seamlessly. Three layers at different speeds and
   opposite directions, plus a gentle vertical bob, give the surface a flowing,
   liquid feel instead of a rigid edge. The fill under each crest matches the
   milk body so the layers blend into one surface. */
.milk-wave[b-m5myt3zxfs] {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 24px;
    background-repeat: repeat-x;
    background-position: 0 bottom;
    background-size: 160px 24px;
    will-change: transform;
}

/* Back layer: palest, slowest, drifts right. */
.milk-wave-back[b-m5myt3zxfs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M0 12 C 40 2 40 2 80 12 S 120 22 160 12 V24 H0 Z' fill='%23f7f4ec' opacity='0.55'/%3E%3C/svg%3E");
    animation: milk-flow-right-b-m5myt3zxfs 9s linear infinite, milk-bob-b-m5myt3zxfs 4.2s ease-in-out infinite;
}

/* Mid layer: medium tone and speed, drifts left. */
.milk-wave-mid[b-m5myt3zxfs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M0 14 C 40 4 40 4 80 14 S 120 24 160 14 V24 H0 Z' fill='%23f2ece0' opacity='0.8'/%3E%3C/svg%3E");
    animation: milk-flow-left-b-m5myt3zxfs 6s linear infinite, milk-bob-b-m5myt3zxfs 3.4s ease-in-out infinite reverse;
}

/* Front layer: opaque milk, fastest, drifts right — this is the crisp surface. */
.milk-wave-front[b-m5myt3zxfs] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 24' preserveAspectRatio='none'%3E%3Cpath d='M0 16 C 40 6 40 6 80 16 S 120 26 160 16 V24 H0 Z' fill='%23f7f4ec'/%3E%3C/svg%3E");
    animation: milk-flow-right-b-m5myt3zxfs 4.5s linear infinite, milk-bob-b-m5myt3zxfs 2.8s ease-in-out infinite;
}

/* Scroll exactly one tile width (160px) so the repeat loops without a seam. */
@keyframes milk-flow-right-b-m5myt3zxfs {
    from { transform: translateX(-160px); }
    to { transform: translateX(0); }
}

@keyframes milk-flow-left-b-m5myt3zxfs {
    from { transform: translateX(0); }
    to { transform: translateX(-160px); }
}

/* Subtle vertical swell layered on top of the horizontal scroll. */
@keyframes milk-bob-b-m5myt3zxfs {
    0%, 100% { margin-top: 0; }
    50% { margin-top: 3px; }
}

@media (prefers-reduced-motion: reduce) {
    .milk[b-m5myt3zxfs] { transition: none; }
    .milk-wave[b-m5myt3zxfs] { animation: none; }
}
/* /Components/MuteButton.razor.rz.scp.css */
.mute-btn[b-pbpvxao67n] {
    background: #1c130a;
    color: #ffdc86;
    border: 1px solid #5c4426;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 80ms ease, transform 60ms ease;
}

.mute-btn:hover[b-pbpvxao67n] {
    background: #2d2010;
}

.mute-btn:active[b-pbpvxao67n] {
    transform: translateY(1px);
}

.mute-btn.muted[b-pbpvxao67n] {
    color: #c96565;
    border-color: #6a2a2a;
}
/* /Components/NewsTicker.razor.rz.scp.css */
.news-ticker[b-tp0xnxp9gh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: #efd8a7;
    font-size: 13px;
    font-style: italic;
    line-height: 1.35;
    overflow: hidden;
}

.news-icon[b-tp0xnxp9gh] {
    flex: 0 0 auto;
    font-size: 13px;
    opacity: 0.75;
    font-style: normal;
}

.news-track[b-tp0xnxp9gh] {
    flex: 0 1 auto;
    overflow: hidden;
    position: relative;
    height: 1.35em;
}

.news-item[b-tp0xnxp9gh] {
    display: inline-block;
    animation: news-fade-in-b-tp0xnxp9gh 400ms ease-out;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 100%;
}

@keyframes news-fade-in-b-tp0xnxp9gh {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* /Components/OfflineDialog.razor.rz.scp.css */
.offline-backdrop[b-bnpu9gfp4d] {
    position: fixed;
    inset: 0;
    background: rgba(10, 6, 2, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 40;
    animation: offline-fade-b-bnpu9gfp4d 200ms ease-out;
}

.offline-dialog[b-bnpu9gfp4d] {
    max-width: 420px;
    background: linear-gradient(180deg, #3b2915 0%, #241608 100%);
    border-radius: 12px;
    padding: 22px 26px;
    color: #ffedcf;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #b6873c;
    text-align: center;
}

.offline-dialog h2[b-bnpu9gfp4d] {
    margin: 0 0 10px 0;
    font-size: 22px;
    color: #ffdc86;
}

.offline-elapsed[b-bnpu9gfp4d] {
    margin: 4px 0 6px 0;
    font-size: 14px;
    color: #d7bd8b;
}

.offline-earned[b-bnpu9gfp4d] {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #cdb18b;
    line-height: 1.4;
}

.offline-amount[b-bnpu9gfp4d] {
    font-size: 28px;
    font-weight: 800;
    color: #ffbb54;
    margin: 8px 0 14px 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.offline-lump[b-bnpu9gfp4d] {
    margin: 8px 0;
    padding: 8px 12px;
    background: rgba(255, 180, 80, 0.12);
    border-radius: 6px;
    font-size: 12.5px;
    color: #ffcf80;
}

.offline-btn[b-bnpu9gfp4d] {
    margin-top: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(180deg, #f0a94a 0%, #b3701f 100%);
    color: #2a1804;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 3px 0 #6c410f, 0 6px 14px rgba(0, 0, 0, 0.5);
}

.offline-btn:active[b-bnpu9gfp4d] {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #6c410f, 0 3px 8px rgba(0, 0, 0, 0.5);
}

@keyframes offline-fade-b-bnpu9gfp4d {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/OptionsMenu.razor.rz.scp.css */
/* Compact gear button that sits at the trailing edge of the top masthead. */
.options-open-btn[b-sbuhyvkzys] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: #d7bd8b;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.3rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 100ms, color 100ms, border-color 100ms;
}

.options-open-btn:hover[b-sbuhyvkzys] {
    color: #ffdc86;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(182, 135, 60, 0.6);
}

/* Modal shell — mirrors OfflineDialog's backdrop so the two feel of a piece.
   The backdrop (not the dialog) owns scrolling: if the dialog itself clipped
   overflow, the language dropdown — an absolutely-positioned child that extends
   past the dialog edge — would get cut off. So the dialog keeps natural height
   and the backdrop scrolls when content is taller than the viewport. */
.options-backdrop[b-sbuhyvkzys] {
    position: fixed;
    inset: 0;
    background: rgba(10, 6, 2, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 30px 20px;
    z-index: 45;
    animation: options-fade-b-sbuhyvkzys 200ms ease-out;
}

.options-dialog[b-sbuhyvkzys] {
    position: relative;
    width: min(420px, 100%);
    margin: auto;
    background: linear-gradient(180deg, #3b2915 0%, #241608 100%);
    border-radius: 12px;
    padding: 20px 24px;
    color: #ffedcf;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #b6873c;
}

.options-header[b-sbuhyvkzys] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.options-header h2[b-sbuhyvkzys] {
    margin: 0;
    font-size: 22px;
    color: #ffdc86;
}

.options-close[b-sbuhyvkzys] {
    background: rgba(255, 255, 255, 0.08);
    color: #f2e6cf;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.3rem;
    width: 28px;
    height: 28px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.options-close:hover[b-sbuhyvkzys] { background: rgba(255, 255, 255, 0.18); }

.options-section[b-sbuhyvkzys] {
    padding: 12px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.options-section:first-of-type[b-sbuhyvkzys] { border-top: none; }

.options-section h3[b-sbuhyvkzys] {
    margin: 0 0 10px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #d7bd8b;
}

.options-buttons[b-sbuhyvkzys] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.save-btn[b-sbuhyvkzys] {
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.08);
    color: #f2e6cf;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.3rem;
    cursor: pointer;
    transition: background 100ms;
}

.save-btn:hover[b-sbuhyvkzys] { background: rgba(255, 255, 255, 0.16); }
.save-btn.danger:hover[b-sbuhyvkzys] { background: rgba(200, 60, 60, 0.4); border-color: rgba(200, 60, 60, 0.6); }

/* Debug/GM section (Debug builds only): tinted apart from the real controls so
   it reads as a dev tool, and its stacked button rows get a little breathing
   room between them. */
.options-debug h3[b-sbuhyvkzys] { color: #8fd18f; }
.options-debug .options-buttons + .options-buttons[b-sbuhyvkzys] { margin-top: 0.4rem; }

.save-import[b-sbuhyvkzys] {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.save-import textarea[b-sbuhyvkzys] {
    width: 100%;
    min-height: 5rem;
    padding: 0.4rem;
    background: #0d0603;
    color: #f2e6cf;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0.3rem;
    font-family: monospace;
    font-size: 0.7rem;
    resize: vertical;
    box-sizing: border-box;
}

.save-import-file[b-sbuhyvkzys] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: #cbb99a;
}

/* "Or [Export to file]" — a text-link-styled button so it reads as an inline
   alternative action next to the label, not a heavy button. */
.save-linkbtn[b-sbuhyvkzys] {
    background: none;
    border: none;
    padding: 0;
    color: #ffd857;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.75rem;
}
.save-linkbtn:hover[b-sbuhyvkzys] { color: #ffe89a; }

.save-import-actions[b-sbuhyvkzys] { display: flex; gap: 0.4rem; }
.save-import-actions button[b-sbuhyvkzys] {
    padding: 0.35rem 0.75rem;
    background: rgba(255, 216, 87, 0.2);
    color: #ffd857;
    border: 1px solid rgba(255, 216, 87, 0.4);
    border-radius: 0.3rem;
    cursor: pointer;
    font-size: 0.8rem;
}
.save-import-actions button:hover[b-sbuhyvkzys] { background: rgba(255, 216, 87, 0.35); }

.save-error[b-sbuhyvkzys] {
    color: #ff8c8c;
    font-size: 0.75rem;
    padding: 0.2rem 0;
}

.options-toast[b-sbuhyvkzys] {
    position: sticky;
    bottom: 0;
    margin-top: 12px;
    text-align: center;
    background: rgba(0, 0, 0, 0.85);
    color: #f2e6cf;
    padding: 0.4rem 0.8rem;
    border-radius: 0.3rem;
    font-size: 0.8rem;
    animation: options-fade-b-sbuhyvkzys 0.2s ease-out;
}

@keyframes options-fade-b-sbuhyvkzys {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/StatsDialog.razor.rz.scp.css */
/* =========================================================================
   Stats dialog — dashboard-style modal.

   Aesthetic: dark chocolate glass with copper trim, matching the game shell,
   but structured like a small BI dashboard: hero tiles up top, then labeled
   panels for the sparkline, the details grid, building contribution, progress
   bars, prestige, purchased upgrades, and sugar lumps. Every panel is the
   same shape (rounded card with an inset border and a heading strip) so the
   whole modal reads as one instrument cluster.
   ========================================================================= */

/* Trigger button in the masthead — twin to `.options-open-btn` so the two
   sit as a matched pair on the trailing edge of the top row. */
.stats-open-btn[b-bxf5gjwpv8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: #d7bd8b;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.3rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 100ms, color 100ms, border-color 100ms;
}

.stats-open-btn:hover[b-bxf5gjwpv8] {
    color: #ffdc86;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(182, 135, 60, 0.6);
}

/* -------- Modal shell ---------------------------------------------------- */

.stats-backdrop[b-bxf5gjwpv8] {
    position: fixed;
    inset: 0;
    background: rgba(10, 6, 2, 0.75);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 30px 20px;
    z-index: 45;
    animation: stats-fade-b-bxf5gjwpv8 200ms ease-out;
}

.stats-dialog[b-bxf5gjwpv8] {
    position: relative;
    width: min(1000px, 100%);
    margin: auto;
    /* Slightly cooler than the options gradient so hero tiles pop against it. */
    background:
        radial-gradient(circle at 20% -10%, rgba(255, 200, 120, 0.08), transparent 60%),
        linear-gradient(180deg, #2f2011 0%, #180d04 100%);
    border-radius: 14px;
    padding: 22px 24px 26px;
    color: #ffedcf;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px #b6873c,
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    /* Panels arrange as a 2-column grid on desktop so the dialog uses the
       horizontal space desktop screens make available instead of stretching
       into a very long single column that always requires scrolling. The
       header and hero row above the grid sit as normal block children; only
       elements from `.stats-hero` onward participate in the grid, and any
       panel marked `.stats-span-full` re-consumes the full row width (used by
       the hero tiles, the CPS chart, and the wide-flow Purchased Upgrades
       panel). `dense` packs shorter panels (Prestige, Sugar lumps) into the
       gap a taller neighbour leaves rather than creating uneven whitespace.

       Below the media-query breakpoint we fall back to a single column so
       every panel keeps its full width on phones. */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    grid-auto-flow: row dense;
    align-items: start;
}

.stats-header[b-bxf5gjwpv8] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

/* Hero row + any panel that wants the full dialog width (chart, upgrades). */
.stats-span-full[b-bxf5gjwpv8] {
    grid-column: 1 / -1;
}

.stats-header h2[b-bxf5gjwpv8] {
    margin: 0;
    font-size: 22px;
    color: #ffdc86;
    letter-spacing: 0.02em;
}

.stats-close[b-bxf5gjwpv8] {
    background: rgba(255, 255, 255, 0.08);
    color: #f2e6cf;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.3rem;
    width: 28px;
    height: 28px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.stats-close:hover[b-bxf5gjwpv8] { background: rgba(255, 255, 255, 0.18); }

/* -------- Hero tiles: three big numeric cards --------------------------- */

.stats-hero[b-bxf5gjwpv8] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.hero-card[b-bxf5gjwpv8] {
    position: relative;
    padding: 12px 14px;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.06),
        inset 0 0 20px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* A tinted glow in the corner tells the tile apart at a glance without
   fighting the game palette. Colors correspond to bank / cps / all-time. */
.hero-card[b-bxf5gjwpv8]::before {
    content: "";
    position: absolute;
    inset: -40px -40px auto auto;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    opacity: 0.35;
    filter: blur(20px);
    pointer-events: none;
}

.hero-gold[b-bxf5gjwpv8]::before   { background: radial-gradient(#ffd857, transparent 70%); }
.hero-copper[b-bxf5gjwpv8]::before { background: radial-gradient(#ff9c3d, transparent 70%); }
.hero-bronze[b-bxf5gjwpv8]::before { background: radial-gradient(#c98c53, transparent 70%); }

.hero-icon[b-bxf5gjwpv8] {
    font-size: 20px;
    line-height: 1;
    opacity: 0.9;
}

.hero-value[b-bxf5gjwpv8] {
    font-size: 22px;
    font-weight: 700;
    color: #fff5da;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.005em;
    /* Long numbers ("999.999 quadrillion") shouldn't blow out a hero tile:
       ellipsis rather than wrap keeps every tile the same height. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-label[b-bxf5gjwpv8] {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b39a70;
}

.hero-chip[b-bxf5gjwpv8] {
    position: absolute;
    top: 10px;
    right: 12px;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(255, 216, 87, 0.18);
    color: #ffdc86;
    font-variant-numeric: tabular-nums;
    border: 1px solid rgba(255, 216, 87, 0.35);
}

/* -------- Uniform panel shape (used by every remaining section) --------- */

.stats-panel[b-bxf5gjwpv8] {
    padding: 12px 14px 14px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.25);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.stats-panel-head[b-bxf5gjwpv8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.stats-panel-head h3[b-bxf5gjwpv8] {
    margin: 0;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #d7bd8b;
}

.stats-panel-badge[b-bxf5gjwpv8] {
    font-size: 0.75rem;
    color: #ffd857;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 216, 87, 0.12);
    border: 1px solid rgba(255, 216, 87, 0.25);
    font-variant-numeric: tabular-nums;
}

/* Right-hand cluster inside a panel head: hosts controls (sort toggle) plus
   the count badge. Kept separate from `.stats-panel-head` because a plain
   `justify-content: space-between` would only balance the h3 against one
   sibling. */
.stats-panel-head-right[b-bxf5gjwpv8] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Segmented "Category / Recent" toggle for the Purchased Upgrades panel. */
.stats-sort-toggle[b-bxf5gjwpv8] {
    display: inline-flex;
    padding: 2px;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.stats-sort-btn[b-bxf5gjwpv8] {
    appearance: none;
    background: transparent;
    color: #b39a70;
    border: 0;
    padding: 3px 10px;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    border-radius: 999px;
    cursor: pointer;
    transition: background 100ms, color 100ms;
    font-family: inherit;
}

.stats-sort-btn:hover:not(.is-active)[b-bxf5gjwpv8] { color: #ffedcf; }

.stats-sort-btn.is-active[b-bxf5gjwpv8] {
    background: rgba(255, 216, 87, 0.18);
    color: #ffdc86;
    box-shadow: inset 0 0 0 1px rgba(255, 216, 87, 0.35);
}

.stats-empty[b-bxf5gjwpv8] {
    padding: 10px 6px;
    font-size: 0.8rem;
    color: #8f7d5b;
    font-style: italic;
    text-align: center;
}

/* -------- CPS sparkline -------------------------------------------------- */

.stats-chart[b-bxf5gjwpv8] {
    position: relative;
    height: 66px;
    padding: 4px 0;
}

.chart-svg[b-bxf5gjwpv8] {
    width: 100%;
    height: 100%;
    display: block;
    /* Subtle horizontal grid, painted with background not SVG so it lines up
       cleanly regardless of the sparkline's non-scaling stroke. */
    background:
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 100% 25% repeat-y,
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
    border-radius: 6px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.chart-axis[b-bxf5gjwpv8] {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
    justify-content: space-between;
    height: 54px;
    pointer-events: none;
    font-size: 0.65rem;
    color: #8f7d5b;
    font-variant-numeric: tabular-nums;
}

.chart-warming[b-bxf5gjwpv8] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8f7d5b;
    font-style: italic;
    font-size: 0.8rem;
}

/* -------- Details grid: compact stat chips ------------------------------ */

.stats-grid[b-bxf5gjwpv8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}

.stat-chip[b-bxf5gjwpv8] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    min-width: 0; /* let long values ellipsize instead of stretching the grid */
}

.stat-chip-icon[b-bxf5gjwpv8] {
    font-size: 18px;
    line-height: 1;
    flex: 0 0 auto;
}

.stat-chip-body[b-bxf5gjwpv8] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.stat-chip-label[b-bxf5gjwpv8] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #b39a70;
}

.stat-chip-value[b-bxf5gjwpv8] {
    font-size: 0.95rem;
    color: #ffedcf;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -------- Building contribution bars ------------------------------------ */

.stats-bars[b-bxf5gjwpv8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stats-bar-row[b-bxf5gjwpv8] { display: flex; flex-direction: column; gap: 4px; }

.stats-bar-head[b-bxf5gjwpv8] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.82rem;
}

.stats-bar-icon[b-bxf5gjwpv8] { font-size: 15px; line-height: 1; }
.stats-bar-name[b-bxf5gjwpv8] { color: #ffedcf; flex: 0 0 auto; }
.stats-bar-caption[b-bxf5gjwpv8] {
    color: #8f7d5b;
    font-size: 0.72rem;
    flex: 1;
}
.stats-bar-value[b-bxf5gjwpv8] {
    display: flex;
    gap: 6px;
    align-items: baseline;
    font-variant-numeric: tabular-nums;
}
.stats-bar-value strong[b-bxf5gjwpv8] { color: #ffedcf; font-weight: 600; }
.stats-bar-value em[b-bxf5gjwpv8] {
    color: #ffd857;
    font-style: normal;
    font-size: 0.75rem;
    min-width: 34px;
    text-align: right;
}

.stats-bar-track[b-bxf5gjwpv8] {
    height: 6px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.stats-bar-fill[b-bxf5gjwpv8] {
    height: 100%;
    background: linear-gradient(90deg, #a56a2a 0%, #ffb85a 60%, #ffd857 100%);
    border-radius: 3px;
    min-width: 2px;
    transition: width 200ms ease-out;
}

/* -------- Progress bars (upgrades / achievements / milk) --------------- */

.stats-progress-list[b-bxf5gjwpv8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual progress row — reuses --fill for its bar color so callers can
   pass an accent inline without needing per-instance CSS. */
.stats-progress[b-bxf5gjwpv8] {
    --fill: #ffd857;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stats-progress-head[b-bxf5gjwpv8] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 0.82rem;
}

.stats-progress-icon[b-bxf5gjwpv8] { font-size: 15px; line-height: 1; }
.stats-progress-label[b-bxf5gjwpv8] { color: #ffedcf; flex: 1; }
.stats-progress-value[b-bxf5gjwpv8] {
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}
.stats-progress-value strong[b-bxf5gjwpv8] { color: #ffedcf; font-weight: 600; }
.stats-progress-value em[b-bxf5gjwpv8] {
    color: #8f7d5b;
    font-style: normal;
    font-size: 0.72rem;
}

.stats-progress-track[b-bxf5gjwpv8] {
    height: 8px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.stats-progress-fill[b-bxf5gjwpv8] {
    height: 100%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--fill) 55%, #4a2f10) 0%, var(--fill) 100%);
    border-radius: 4px;
    min-width: 2px;
    transition: width 250ms ease-out;
}

/* Milk gets a distinct pastel treatment so a 4% fill on it doesn't look
   identical to a 4% "no upgrades yet" bar. */
.milk-fill[b-bxf5gjwpv8] {
    background: linear-gradient(90deg, #d5cbb6 0%, #fff7dd 100%);
}

/* -------- Prestige feature line ---------------------------------------- */

.stats-prestige[b-bxf5gjwpv8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 216, 87, 0.08);
    border-radius: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 216, 87, 0.2);
    color: #fff5da;
    font-size: 0.9rem;
}

.prestige-icon[b-bxf5gjwpv8] { font-size: 22px; line-height: 1; }
.prestige-text[b-bxf5gjwpv8] { font-variant-numeric: tabular-nums; }

/* -------- Purchased upgrades: grouped chips ---------------------------- */

.stats-upgrade-groups[b-bxf5gjwpv8] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upgrade-group[b-bxf5gjwpv8] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.upgrade-group-label[b-bxf5gjwpv8] {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #b39a70;
}

.upgrade-group-chips[b-bxf5gjwpv8] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.upgrade-chip[b-bxf5gjwpv8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 216, 87, 0.15);
    border-radius: 999px;
    color: #ffedcf;
    font-size: 0.75rem;
    cursor: default;
    transition: background 100ms, border-color 100ms;
    /* Long, un-cropped upgrade names would otherwise force the whole row to
       stretch — soft-cap chip width and ellipsize the label. */
    max-width: 220px;
}
.upgrade-chip:hover[b-bxf5gjwpv8] {
    background: rgba(255, 216, 87, 0.12);
    border-color: rgba(255, 216, 87, 0.5);
}
.upgrade-chip-icon[b-bxf5gjwpv8] { font-size: 13px; line-height: 1; }
.upgrade-chip-name[b-bxf5gjwpv8] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@keyframes stats-fade-b-bxf5gjwpv8 {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Narrow viewports: collapse the 2-column grid to a single column so every
   panel takes the full width. Also drops the hero row to a single column so
   three 22px-value tiles don't fight for width under ~480px. */
@media (max-width: 720px) {
    .stats-dialog[b-bxf5gjwpv8] { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .stats-hero[b-bxf5gjwpv8] { grid-template-columns: 1fr; }
    .stats-dialog[b-bxf5gjwpv8] { padding: 18px 16px 22px; }
    /* On phone widths the sort labels and count badge risk crowding out the
       panel title — stack the head into two rows so the toggle sits below. */
    .stats-panel-head[b-bxf5gjwpv8] { flex-wrap: wrap; row-gap: 6px; }
}
/* /Components/StatsPanel.razor.rz.scp.css */
.stats[b-9fvk9xp5c5] {
    text-align: center;
    padding: 1rem 0.5rem;
    /* Anchor for the absolutely-positioned buff row below — see .stats-buffs.
       Without this, activating a Frenzy buff would grow the panel and push the
       big cookie downward, which players read as jitter. */
    position: relative;
}

.stats-bank-count[b-9fvk9xp5c5] {
    font-size: 3rem;
    font-weight: 700;
    color: #f7dfa8;
    letter-spacing: -0.02em;
    /* Tabular figures keep every digit the same width so the frame-by-frame
       last-digit churn (1.231 → 1.238) can't jitter this centred number.
       Pairs with NumberFormat.FormatStable, which fixes the character count. */
    font-variant-numeric: tabular-nums;
}

.stats-bank-label[b-9fvk9xp5c5] {
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #b39868;
}

.stats-cps[b-9fvk9xp5c5] {
    margin-top: 0.5rem;
    color: #d7c497;
    font-size: 1rem;
}

.stats-meta[b-9fvk9xp5c5] {
    margin-top: 0.75rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    font-size: 0.8rem;
    color: #a08765;
    flex-wrap: wrap;
}

.stats-buffs[b-9fvk9xp5c5] {
    /* Overlay the buff pills just below the stats panel instead of reserving
       vertical flow space. Otherwise a fresh "Frenzy x7" pill would extend
       .stats and shift the centred big cookie down by its height. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 0.5rem;
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    /* The pills are decorative status readouts, not click targets — let clicks
       fall through to the big cookie underneath. */
    pointer-events: none;
    z-index: 5;
}

.buff[b-9fvk9xp5c5] {
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    background: rgba(255, 205, 60, 0.2);
    color: #ffd857;
    border: 1px solid rgba(255, 205, 60, 0.5);
    animation: pulse-b-9fvk9xp5c5 1.5s ease-in-out infinite;
}
.buff-clickfrenzy[b-9fvk9xp5c5] {
    background: rgba(255, 100, 100, 0.2);
    color: #ff8c8c;
    border-color: rgba(255, 100, 100, 0.5);
}

@keyframes pulse-b-9fvk9xp5c5 {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
/* /Components/SugarLumpModal.razor.rz.scp.css */
/* Self-contained modal shell. We can't reuse OptionsMenu's .options-backdrop /
   .options-dialog because those are scoped to that component (Blazor adds a
   per-component b-xxxxx attribute), so mirror the same look here — matching
   OptionsMenu/OfflineDialog so the three modals feel of a piece. */
.sugar-backdrop[b-s359hv05hr] {
    position: fixed;
    inset: 0;
    background: rgba(10, 6, 2, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 30px 20px;
    z-index: 45;
    animation: sugar-fade-b-s359hv05hr 200ms ease-out;
}

.sugar-dialog[b-s359hv05hr] {
    position: relative;
    width: min(460px, 100%);
    margin: auto;
    background: linear-gradient(180deg, #3b2915 0%, #241608 100%);
    border-radius: 12px;
    padding: 20px 24px;
    color: #ffedcf;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6), inset 0 0 0 1px #b6873c;
}

.sugar-dialog-header[b-s359hv05hr] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sugar-dialog-header h2[b-s359hv05hr] {
    margin: 0;
    font-size: 22px;
    color: #ffdc86;
}

.sugar-dialog-close[b-s359hv05hr] {
    background: rgba(255, 255, 255, 0.08);
    color: #f2e6cf;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.3rem;
    width: 28px;
    height: 28px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

.sugar-dialog-close:hover[b-s359hv05hr] { background: rgba(255, 255, 255, 0.18); }

.sugar-modal-balance[b-s359hv05hr] {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 700;
    color: #ffb864;
}

.sugar-modal-hint[b-s359hv05hr] {
    margin: 0 0 12px 0;
    font-size: 12px;
    color: #c9b090;
    line-height: 1.4;
}

.sugar-modal-list[b-s359hv05hr] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 55vh;
    overflow-y: auto;
}

.sugar-modal-row[b-s359hv05hr] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.2);
}

.sugar-modal-emoji[b-s359hv05hr] {
    font-size: 18px;
}

.sugar-modal-name[b-s359hv05hr] {
    flex: 1;
    font-weight: 600;
}

.sugar-modal-level[b-s359hv05hr] {
    font-size: 12px;
    color: #ffb864;
    min-width: 44px;
    text-align: right;
}

.sugar-modal-buy[b-s359hv05hr] {
    padding: 5px 10px;
    border: none;
    border-radius: 6px;
    background: radial-gradient(circle at 30% 30%, #ffb04a 0%, #d97a1e 90%);
    color: #33210d;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.sugar-modal-buy:disabled[b-s359hv05hr] {
    background: #4a3822;
    color: #8a755a;
    cursor: not-allowed;
}

@keyframes sugar-fade-b-s359hv05hr {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/SugarLumpWidget.razor.rz.scp.css */
.sugar-lump[b-lk0z787sa5] {
    margin-top: 12px;
    padding: 10px 12px;
    background: linear-gradient(180deg, #3b2d20 0%, #2a2013 100%);
    border-radius: 10px;
    color: #f5e0c9;
    box-shadow: inset 0 0 0 1px #8a6a3f, 0 4px 10px rgba(0, 0, 0, 0.35);
}

.sugar-lump-header[b-lk0z787sa5] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 8px;
}

.sugar-lump-header h3[b-lk0z787sa5] {
    margin: 0;
    font-size: 15px;
    letter-spacing: 0.02em;
    color: #ffd9a7;
}

.sugar-lump-count[b-lk0z787sa5] {
    font-weight: 700;
    font-size: 16px;
    color: #ffb864;
}

.sugar-lump-btn[b-lk0z787sa5] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: radial-gradient(circle at 30% 30%, #ffb04a 0%, #d97a1e 90%);
    color: #33210d;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 3px 0 #7a3f10, 0 6px 12px rgba(0, 0, 0, 0.4);
    transition: transform 60ms ease, box-shadow 60ms ease;
}

.sugar-lump-btn.ripe[b-lk0z787sa5] {
    animation: sugar-glow-b-lk0z787sa5 1.5s ease-in-out infinite alternate;
}

.sugar-lump-btn:active[b-lk0z787sa5] {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #7a3f10, 0 3px 6px rgba(0, 0, 0, 0.4);
}

.sugar-lump-emoji[b-lk0z787sa5] {
    font-size: 20px;
    filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.65));
}

.sugar-lump-progress[b-lk0z787sa5] {
    position: relative;
    height: 20px;
    background: #1c130a;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px #5c4426;
}

.sugar-lump-progress-fill[b-lk0z787sa5] {
    height: 100%;
    background: linear-gradient(90deg, #b56a1e 0%, #ffb864 100%);
    transition: width 300ms ease;
}

.sugar-lump-progress-label[b-lk0z787sa5] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: #fff2d6;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}

.sugar-lump-blurb[b-lk0z787sa5] {
    margin: 8px 0 0 0;
    font-size: 11.5px;
    color: #c9b090;
    line-height: 1.35;
}

.sugar-lump-spend[b-lk0z787sa5] {
    width: 100%;
    margin-top: 8px;
    padding: 7px 12px;
    border: none;
    border-radius: 7px;
    background: #4a3822;
    color: #ffd9a7;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #8a6a3f;
    transition: background 80ms ease;
}

.sugar-lump-spend:hover[b-lk0z787sa5] {
    background: #5c4629;
}

@keyframes sugar-glow-b-lk0z787sa5 {
    from { box-shadow: 0 3px 0 #7a3f10, 0 6px 12px rgba(255, 190, 90, 0.35); }
    to   { box-shadow: 0 3px 0 #7a3f10, 0 6px 22px rgba(255, 220, 120, 0.85); }
}
/* /Components/TooltipCard.razor.rz.scp.css */
.tooltip-card[b-x2qn6uyg6j] {
    min-width: 13rem;
    max-width: 20rem;
    padding: 0.6rem 0.75rem;
    background: linear-gradient(180deg, rgba(48, 32, 16, 0.98), rgba(30, 20, 10, 0.98));
    border: 1px solid rgba(255, 216, 87, 0.35);
    border-radius: 0.5rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    color: #f2e6cf;
    font-size: 0.8rem;
    line-height: 1.35;
}

/* Per-category accent stripe on the left edge. */
.tooltip-card.building[b-x2qn6uyg6j] { border-left: 3px solid #ffd857; }
.tooltip-card.upgrade[b-x2qn6uyg6j] { border-left: 3px solid #8fd6ff; }
.tooltip-card.achievement[b-x2qn6uyg6j] { border-left: 3px solid #ffa83c; }
.tooltip-card.locked[b-x2qn6uyg6j] { border-left: 3px solid #6b4f2d; }

.tooltip-head[b-x2qn6uyg6j] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.tooltip-icon[b-x2qn6uyg6j] {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.tooltip-titles[b-x2qn6uyg6j] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.tooltip-title[b-x2qn6uyg6j] {
    font-weight: 800;
    font-size: 0.95rem;
    color: #f7dfa8;
}

.tooltip-tag[b-x2qn6uyg6j] {
    align-self: flex-start;
    padding: 0.1rem 0.4rem;
    background: rgba(255, 216, 87, 0.18);
    border-radius: 0.3rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #ffd857;
}

/* Cost block, pinned top-right like the original game's tooltips. */
.tooltip-cost[b-x2qn6uyg6j] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: auto;
    white-space: nowrap;
}

.tooltip-cost-icon[b-x2qn6uyg6j] {
    font-size: 1rem;
    line-height: 1;
}

.tooltip-cost-value[b-x2qn6uyg6j] {
    font-weight: 800;
    font-size: 0.95rem;
    color: #6cff6c;
    text-shadow: 0 0 6px rgba(108, 255, 108, 0.35);
}

.tooltip-rows[b-x2qn6uyg6j] {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tooltip-row[b-x2qn6uyg6j] {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
}

.tooltip-row-label[b-x2qn6uyg6j] {
    color: #a08765;
}

.tooltip-row-value[b-x2qn6uyg6j] {
    color: #f2e6cf;
    font-weight: 600;
    text-align: right;
}

.tooltip-flavor[b-x2qn6uyg6j] {
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-style: italic;
    color: #b39868;
    font-size: 0.75rem;
}
/* /Components/TooltipHost.razor.rz.scp.css */
.tooltip-layer[b-4a8dqu8ad7] {
    position: fixed;
    /* Start genuinely off-screen — not (0,0) — so the card never flashes in the
       top-left corner between render and the JS positioning pass, and stays
       hidden if the anchor turns out to be detached (zero-size rect). */
    left: -9999px;
    top: -9999px;
    z-index: 9999;
    pointer-events: none;
    transform: translateZ(0);
}
/* /Components/UpdateBanner.razor.rz.scp.css */
/* Pinned announcement above the masthead. Shares the ticker's warm palette but
   reads as a distinct, attention-catching strip with a solid CTA. */
.update-banner[b-ag6nag5hhw] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 8px 16px;
    background: rgba(90, 60, 20, 0.55);
    border-bottom: 1px solid rgba(255, 220, 150, 0.25);
    color: #efd8a7;
    font-size: 13px;
    line-height: 1.35;
}

.update-icon[b-ag6nag5hhw] {
    flex: 0 0 auto;
    font-size: 14px;
}

.update-text[b-ag6nag5hhw] {
    flex: 0 1 auto;
    min-width: 0;
}

.update-refresh[b-ag6nag5hhw] {
    flex: 0 0 auto;
    cursor: pointer;
    padding: 4px 12px;
    border: 1px solid rgba(255, 220, 150, 0.45);
    border-radius: 4px;
    background: rgba(255, 220, 150, 0.15);
    color: #ffe9bd;
    font-size: 13px;
    font-weight: 600;
}

.update-refresh:hover[b-ag6nag5hhw] {
    background: rgba(255, 220, 150, 0.3);
}

.update-dismiss[b-ag6nag5hhw] {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    cursor: pointer;
    border: none;
    background: transparent;
    color: #efd8a7;
    font-size: 12px;
    opacity: 0.7;
    padding: 2px 4px;
}

.update-dismiss:hover[b-ag6nag5hhw] {
    opacity: 1;
}
/* /Components/UpgradeStore.razor.rz.scp.css */
.upgrade-store[b-pdv4f2w2k4] {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.upgrade-header[b-pdv4f2w2k4] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.75rem;
}

.upgrade-header h2[b-pdv4f2w2k4] {
    margin: 0;
    font-size: 1.1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #b39868;
}

.upgrade-count[b-pdv4f2w2k4] {
    font-size: 0.75rem;
    color: #a08765;
}

.upgrade-empty[b-pdv4f2w2k4] {
    color: #7a5a3a;
    font-size: 0.85rem;
    font-style: italic;
    padding: 0.5rem 0;
}

.upgrade-grid[b-pdv4f2w2k4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
    gap: 0.4rem;
}

.upgrade-tile[b-pdv4f2w2k4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.4rem;
    background: linear-gradient(180deg, rgba(90, 60, 30, 0.8), rgba(60, 40, 20, 0.8));
    border: 1px solid rgba(255, 216, 87, 0.3);
    border-radius: 0.4rem;
    color: #f2e6cf;
    cursor: pointer;
    transition: all 100ms;
}

.upgrade-tile:hover:not(.locked)[b-pdv4f2w2k4] {
    background: linear-gradient(180deg, rgba(120, 80, 40, 1), rgba(80, 50, 25, 1));
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

.upgrade-tile.locked[b-pdv4f2w2k4] {
    opacity: 0.4;
    cursor: not-allowed;
}

.upgrade-icon[b-pdv4f2w2k4] {
    font-size: 1.5rem;
    line-height: 1;
}

.upgrade-cost[b-pdv4f2w2k4] {
    font-size: 0.65rem;
    color: #ffd857;
    margin-top: 0.2rem;
}
/* /Layout/MainLayout.razor.rz.scp.css */
.game-root[b-a4y0mh0aa0] {
    min-height: 100vh;
    color: #f2e6cf;
    background:
        radial-gradient(circle at 20% 10%, #442a15 0%, transparent 40%),
        radial-gradient(circle at 80% 90%, #2a1a0d 0%, transparent 50%),
        #1c120a;
}
/* /Pages/Home.razor.rz.scp.css */
.game-masthead[b-b4odke3rkc] {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 1400px;
    margin: 0 auto;
    padding-right: 12px;
    background: rgba(0, 0, 0, 0.25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Let the news ticker take the width; the trailing masthead buttons (Stats,
   Options) stay compact. ::deep reaches the child components' root elements,
   which carry their own scope and so are otherwise untouchable from here. */
.game-masthead[b-b4odke3rkc]  .news-ticker {
    flex: 1;
    min-width: 0;
}

.game-masthead[b-b4odke3rkc]  .stats-open-btn,
.game-masthead[b-b4odke3rkc]  .options-open-btn {
    flex: 0 0 auto;
}

.game-shell[b-b4odke3rkc] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    min-height: calc(100vh - 2.75rem);
    max-width: 1400px;
    margin: 0 auto;
    gap: 0;
    background: rgba(0, 0, 0, 0.15);
}

.game-left[b-b4odke3rkc],
.game-center[b-b4odke3rkc],
.game-right[b-b4odke3rkc] {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.game-right[b-b4odke3rkc] { border-right: none; }

.game-left[b-b4odke3rkc] {
    align-items: stretch;
    text-align: center;
}

.cookie-area[b-b4odke3rkc] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1rem;
    overflow: hidden;
}

.floater[b-b4odke3rkc] {
    position: fixed;
    pointer-events: none;
    color: #ffd857;
    font-size: 1.2rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
    animation: floater-rise-b-b4odke3rkc 900ms ease-out forwards;
    z-index: 50;
    user-select: none;
}

@keyframes floater-rise-b-b4odke3rkc {
    from { opacity: 1; transform: translate(-50%, 0); }
    to   { opacity: 0; transform: translate(-50%, -80px); }
}

.crumb[b-b4odke3rkc] {
    position: fixed;
    pointer-events: none;
    user-select: none;
    font-size: 0.9rem;
    z-index: 49;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6));
    animation: crumb-fly-b-b4odke3rkc 900ms cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
    transform-origin: center;
    will-change: transform, opacity;
}

@keyframes crumb-fly-b-b4odke3rkc {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0);
    }
    to {
        opacity: 0;
        transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot));
    }
}

.game-footer[b-b4odke3rkc] {
    padding: 0.75rem 1rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.game-title[b-b4odke3rkc] {
    font-size: 0.85rem;
    font-weight: 700;
    color: #b39868;
    letter-spacing: 0.05em;
    /* Title text + inline credit icons share this row so the footer stays
       two lines tall — same footprint as before we added the links.
       line-height: 1 shrinks the text's line box to match the glyph so its
       optical center aligns with the fixed-size icon boxes; without this
       the inherited body line-height inflates the text box and the glyph's
       cap-center drifts below the icons' geometric center. */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    line-height: 1;
}

.game-subtitle[b-b4odke3rkc] {
    font-size: 0.7rem;
    color: #7a5a3a;
    margin-top: 0.15rem;
}

/* Credit links: muted next to the title so they read as attribution, not
   part of the identifying text; warm on hover to invite the click. */
.game-link[b-b4odke3rkc] {
    display: inline-flex;
    width: 0.95rem;
    height: 0.95rem;
    color: #7a5a3a;
    transition: color 0.15s ease, transform 0.15s ease;
}

.game-link:hover[b-b4odke3rkc],
.game-link:focus-visible[b-b4odke3rkc] {
    color: #d9b976;
    transform: translateY(-1px);
}

.game-link svg[b-b4odke3rkc] {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.game-center[b-b4odke3rkc] {
    overflow-y: auto;
    max-height: calc(100vh - 2.75rem);
}

.game-right[b-b4odke3rkc] {
    overflow-y: auto;
    max-height: calc(100vh - 2.75rem);
}

@media (max-width: 1100px) {
    .game-shell[b-b4odke3rkc] {
        grid-template-columns: 1fr;
    }
    .game-left[b-b4odke3rkc], .game-center[b-b4odke3rkc], .game-right[b-b4odke3rkc] {
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        max-height: none;
    }
}