/* Lemonade Empire: layout.css */

.site-shell{max-width:1040px;margin:0 auto;padding:0 24px}

.site-header{height:94px;display:flex;justify-content:space-between;align-items:center;gap:20px}

.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,serif;font-size:25px;font-weight:bold;line-height:1.1}

.brand-empire{display:block;font:10px "Trebuchet MS",sans-serif;letter-spacing:5px;margin-top:5px}

.site-header nav{display:flex;align-items:center;gap:22px}

.nav-link{font-size:13px;padding:10px 0;color:var(--muted)}

.nav-link.is-active{color:var(--ink);border-bottom:2px solid var(--green)}

.icon-button{background:transparent;width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%}

.eyebrow{display:block;font-size:10px;letter-spacing:1.7px;font-weight:bold;color:var(--muted)}

.balance-bar{display:grid;grid-template-columns:1fr 1fr 1fr;background:var(--paper);border:1px solid var(--line);border-radius:16px;margin:8px 0 18px;box-shadow:0 4px 8px #33432904}

.balance{display:flex;gap:14px;align-items:center;padding:17px 24px;min-width:0}

.balance+.balance{border-left:1px solid var(--line)}

.balance>div{min-width:0}

.balance strong{display:block;font-size:27px;letter-spacing:-.6px;line-height:1.3;font-variant-numeric:tabular-nums;white-space:nowrap}

.hud-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:13px;background:#eaf0df;color:#3c603c;flex-shrink:0}

.lemonade .hud-icon{background:#fff0b9;color:#8b6116}

.income .hud-icon{background:#f1eddf}

.income strong{font-size:24px}

.ticker{display:flex;align-items:center;gap:15px;font-size:10px;height:48px;border-bottom:1px solid var(--line);overflow:hidden}

.ticker-label{font-size:9px;letter-spacing:1px;flex-shrink:0;display:flex;align-items:center;gap:6px}

#activityTicker{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}

.how-to-play{padding:49px 10px 32px;display:grid;grid-template-columns:.9fr 1.4fr;gap:55px}

.how-to-play h2{font-size:30px;line-height:1.15;margin:12px 0}

.how-to-play p{font-size:12px;color:var(--muted);line-height:1.8}

.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}

.guide-grid article>span{font-size:10px;color:#a27831}

.guide-grid h3{margin:3px 0 7px;font-size:12px}

.guide-grid p{font-size:11px;margin:0}

.site-footer{border-top:1px solid var(--line);display:flex;align-items:center;gap:22px;padding:22px 0;font-size:11px;color:var(--muted)}

.site-footer>span{margin-right:auto;font-family:Georgia,serif;color:var(--ink)}

.site-footer small{margin-left:8px;font:10px "Trebuchet MS",sans-serif;color:var(--muted)}

.text-button{background:none;padding:8px 0;font-size:11px;color:var(--muted)}

.skip-link{position:fixed;top:-60px;left:15px;padding:12px;background:var(--green);color:white;z-index:100}

.skip-link:focus{top:10px}

#settingsPanel p{font-size:13px;color:var(--muted)}

html.reduce-motion *,html.reduce-motion *::before,html.reduce-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

.site-footer a,.site-footer .text-button{min-height:44px;display:inline-flex;align-items:center}

.balance strong{max-width:100%}

/* Shared balance bar: available on every page and remains visible while scrolling. */
.balance-bar {
    position: sticky;
    top: 8px;
    z-index: 30;
}

.balance-bar::before {
    content: '';
    position: absolute;
    inset: -8px -4px;
    z-index: -1;
    background: linear-gradient(to bottom, var(--cream) 72%, transparent);
    pointer-events: none;
}

.balance-subline {
    display: block;
    margin-top: 1px;
    font-size: 9px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.balance-subline.is-overflowing {
    color: #9a4b2e;
    font-weight: 700;
}


/* =========================================================
   Header navigation / community statistics
   ========================================================= */

.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

.header-right nav {
    display: flex;
    align-items: center;
}

.header-community-stats {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    min-height: 18px;
    padding-right: 3px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1;
    white-space: nowrap;
}

.header-community-stat {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.header-community-stat strong {
    color: var(--ink);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
}

.header-community-divider {
    opacity: 0.55;
}

.header-community-stat.is-live strong {
    color: var(--green);
}

.header-live-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    background: var(--green);
    border-radius: 50%;
}


/* =========================================================
   Rare power-up inventory
   ========================================================= */

.power-up-inventory {
    position: relative;
    z-index: 24;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 9px;
    margin: -9px 0 17px;
}

.power-up-inventory-items {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 6px;
    padding: 7px;
    background: #f6f4e9;
    border: 1px solid var(--line);
    border-radius: 13px;
}

.power-up-inventory-item {
    position: relative;
    min-width: 0;
    min-height: 43px;
    display: grid;
    place-items: center;
    background: #fffdf5;
    border: 1px solid #dedfce;
    border-radius: 9px;
    outline: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}

.power-up-inventory-item:not(.is-empty):hover,
.power-up-inventory-item:not(.is-empty):focus-visible {
    transform: translateY(-1px);
    border-color: #aebb91;
    background: #fffef8;
}

.power-up-inventory-item.is-empty {
    background: #f2f1e9;
    border-color: #d8d9d0;
}

/*
 * Grey only the unavailable power-up artwork/count.
 * Do not apply opacity/filter to the parent, otherwise
 * its tooltip is faded as well.
 */
.power-up-inventory-item.is-empty .power-up-inventory-icon,
.power-up-inventory-item.is-empty .power-up-inventory-count {
    opacity: .46;
    filter: grayscale(1);
}

.power-up-inventory-item:focus-visible {
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px var(--green);
}

.power-up-inventory-icon {
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

.power-up-inventory-count {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    padding: 0 4px;
    color: #fff;
    background: var(--green);
    border: 2px solid #f6f4e9;
    border-radius: 20px;
    font-size: 8px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.power-up-inventory-item.is-empty .power-up-inventory-count {
    background: #858a80;
}

.power-up-inventory-tooltip {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    z-index: 80;
    width: 220px;
    padding: 11px 12px;
    color: var(--ink);
    background: #fffdf5f8;
    border: 1px solid #dedfce;
    border-radius: 10px;
    box-shadow: 0 10px 25px #20362720;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -5px);
    transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    text-align: left;
}

.power-up-inventory-tooltip::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 9px;
    height: 9px;
    background: #fffdf5f8;
    border-left: 1px solid #dedfce;
    border-top: 1px solid #dedfce;
    transform: translate(-50%, 5px) rotate(45deg);
}

.power-up-inventory-tooltip strong,
.power-up-inventory-tooltip span {
    display: block;
}

.power-up-inventory-tooltip strong {
    color: var(--green);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 13px;
}

.power-up-inventory-tooltip span {
    margin-top: 4px;
    color: var(--muted);
    font-size: 9px;
    line-height: 1.5;
}

.power-up-inventory-item:hover .power-up-inventory-tooltip,
.power-up-inventory-item:focus-visible .power-up-inventory-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

.power-up-earn-link {
    min-width: 145px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 7px 12px;
    color: #fffce8;
    background: var(--green);
    border: 1px solid #173c29;
    border-radius: 13px;
    text-align: left;
}

.power-up-earn-link > span:first-child {
    font-size: 20px;
}

.power-up-earn-link strong,
.power-up-earn-link small {
    display: block;
}

.power-up-earn-link strong {
    font-size: 9px;
}

.power-up-earn-link small {
    margin-top: 2px;
    color: #dbe8dc;
    font-size: 7px;
}

.power-up-earn-link:hover {
    filter: brightness(1.06);
}


/* =========================================================
   Persistent economy HUD
   ========================================================= */

.persistent-hud {
    position: sticky;
    top: 8px;
    z-index: 60;
    padding-top: 1px;
}

.persistent-hud::before {
    content: '';
    position: absolute;
    inset: -8px -5px 0;
    z-index: -1;
    background: linear-gradient(
        to bottom,
        var(--cream) 0%,
        var(--cream) 88%,
        rgba(244, 241, 223, 0) 100%
    );
    pointer-events: none;
}

.persistent-hud .balance-bar {
    position: relative;
    top: auto;
    z-index: 2;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 8px 0 7px;
}

.persistent-hud .balance-bar::before {
    display: none;
}

.persistent-hud .power-up-inventory {
    position: relative;
    z-index: 3;
    margin: 0 0 17px;
}

.golden-lemons .hud-icon {
    background: #fff4bf;
    color: #aa7a09;
}

.golden-lemons strong {
    color: #8d6810;
}


/* =========================================================
   Empire / prestige progress
   ========================================================= */

.prestige-progress {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 47px;
    display: grid;
    grid-template-columns: minmax(155px, .8fr) minmax(260px, 1.8fr) 18px;
    align-items: center;
    gap: 15px;
    margin: -8px 0 17px;
    padding: 9px 12px 9px 15px;
    color: var(--ink);
    background: #f7f3df;
    border: 1px solid #ddd4a9;
    border-radius: 12px;
    box-shadow: 0 3px 8px rgba(51, 67, 41, .04);
    text-align: left;
    cursor: pointer;
    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}

.prestige-progress:hover,
.prestige-progress:focus-visible {
    background: #fff9dc;
    border-color: #c9b96e;
}

.prestige-progress:focus-visible {
    outline: 3px solid rgba(160, 126, 35, .18);
    outline-offset: 2px;
}

.prestige-progress-copy {
    min-width: 0;
}

.prestige-progress-status {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #725915;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prestige-progress-track-wrap {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.prestige-progress-track {
    position: relative;
    height: 8px;
    overflow: hidden;
    background: #e4dfc4;
    border: 1px solid #d3c99b;
    border-radius: 999px;
}

.prestige-progress-fill {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    background: linear-gradient(90deg, #c79c29 0%, #e0bc4c 60%, #f0d875 100%);
    border-radius: inherit;
    transition: transform .35s ease;
}

.prestige-progress-numbers {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 8px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.prestige-progress-numbers strong {
    flex: 0 0 auto;
    color: #89691b;
    font-size: 8px;
}

.prestige-progress-chevron {
    color: #9b7b25;
    font-family: Georgia, serif;
    font-size: 24px;
    line-height: 1;
    text-align: center;
}

.prestige-progress.is-ready {
    background: #fff7cd;
    border-color: #c7aa4c;
}

.prestige-progress.is-ready .prestige-progress-status {
    color: #6f5310;
}

html.reduce-motion .prestige-progress,
html.reduce-motion .prestige-progress-fill {
    transition: none;
}


/* =========================================================
   Complete site navigation / footer
   ========================================================= */

.site-header nav {
    gap: 16px;
}

.site-footer {
    align-items: flex-start;
    flex-wrap: wrap;
}

.site-footer-brand {
    min-width: 175px;
}

.site-footer-nav {
    display: flex;
    flex: 1 1 520px;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 18px;
}

.site-footer-nav a {
    min-height: 30px;
}

.site-footer-reset {
    flex: 0 0 auto;
    min-height: 30px !important;
}

/* Sticky behaviour belongs to the combined HUD, not the balance row alone. */
.balance-bar {
    position: relative;
    top: auto;
}
/* Server-authoritative rare power-up activation state. */
.power-up-inventory-item[role="button"] {
    cursor: pointer;
}

.power-up-inventory-item.is-active {
    background: #fff6c9;
    border-color: #cda83c;
    box-shadow: inset 0 0 0 1px #e0c15e;
}

.power-up-inventory-item.is-active .power-up-inventory-icon,
.power-up-inventory-item.is-active .power-up-inventory-count {
    opacity: 1;
    filter: none;
}

.power-up-inventory-item.is-activating {
    pointer-events: none;
    opacity: .65;
}

.power-up-inventory-status {
    display: block;
    margin-top: 5px;
    color: #f0df9a;
    font-size: 9px;
    line-height: 1.35;
}


/* Server-authoritative offline progress summary. */
.offline-progress-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 260;
    display: grid;
    gap: 4px;
    width: min(390px, calc(100vw - 36px));
    padding: 14px 16px;
    color: #fffce9;
    background: #244532;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 12px;
    box-shadow: 0 14px 38px rgba(20,39,27,.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    pointer-events: none;
}
.offline-progress-toast.is-visible { opacity: 1; visibility: visible; transform: none; }
.offline-progress-toast strong { font-family: Georgia, 'Times New Roman', serif; font-size: 15px; }
.offline-progress-toast span { font-size: 10px; line-height: 1.55; }
.offline-progress-toast small { color: #d8e2c9; font-size: 8px; }


/* Exact-value hover hint for compact Balance Bar numbers. */
.balance strong[data-exact-value] {
    cursor: help;
}