/* Lemonade Empire: game.css */

.game-stage{height:524px;position:relative;isolation:isolate;border-radius:20px;overflow:hidden;background:#d5e8e2 url("../images/orchard.webp") center 60%/cover no-repeat;box-shadow:var(--shadow);border:1px solid #b3bda250;text-align:center}

.stage-heading{position:relative;padding:27px 16px 0;z-index:1}

.stage-heading .eyebrow{color:#365544;font-size:9px;letter-spacing:2px}

.stage-heading h1{font-size:40px;margin:4px 0 0;line-height:1.2;color:#244532;text-shadow:0 1px 12px #fdf9e988}

.stage-heading p{font-size:13px;margin:7px 0;color:#3f5c4b}

.stand-badge{position:absolute;top:153px;left:22px;max-width:180px;padding:7px 11px;border:1px solid #d9deca;background:#fffdf1eb;border-radius:8px;display:flex;align-items:center;gap:7px;text-align:left;font-size:10px}

.status-dot{width:6px;height:6px;border-radius:50%;background:#54804a;display:inline-block;flex-shrink:0}

.lemon-zone{position:relative;width:290px;height:245px;margin:1px auto 0}

.lemon-button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;padding:0;background:none;border-radius:50%;position:relative}

.lemon-img{width:243px;height:243px;object-fit:contain;filter:drop-shadow(0 16px 14px #4e451f44);animation:float 5s ease-in-out infinite;pointer-events:none;user-select:none}

.lemon-button:hover .lemon-img{filter:drop-shadow(0 19px 14px #4e451f55)}

.lemon-button:active .lemon-img{scale:.92;rotate:-3deg;transition:scale 70ms,rotate 70ms}

.lemon-hint{position:absolute;bottom:2px;display:flex;gap:20px;padding:6px 14px;background:#fffdf5ef;border:1px solid #d6d8b8;border-radius:30px;font-size:11px;box-shadow:0 3px 5px #3c462f12}

.lemon-hint span{font-size:14px}

.click-yield{font-size:11px;position:relative;margin:8px auto 0;color:#344e37;background:#fffbeeeb;border-radius:20px;padding:3px 12px;width:fit-content;max-width:90%;overflow-wrap:anywhere}

.click-yield strong{font-size:15px}

.stage-sale{position:absolute;bottom:17px;left:50%;transform:translateX(-50%);width:min(430px,calc(100% - 32px));display:flex;flex-direction:column;align-items:center;gap:8px}

.sell-button{width:100%;display:flex;justify-content:center;align-items:center;gap:12px;background:var(--green);color:#fffdee;min-height:52px;padding:11px 17px;border-radius:12px;box-shadow:0 4px 0 #163923,0 7px 12px #283b2d33;font-size:13px;font-weight:bold;flex-wrap:wrap}

.sell-button:hover{background:#326547}

.sell-button svg{width:20px;height:20px}

.sell-button #sellAllEarnings{color:#f7dd87;font-size:12px;overflow-wrap:anywhere;max-width:100%}

.price-note{font-size:10px;color:#fffbe9;text-shadow:0 1px 3px #2d2515,0 1px 6px #2d2515;background:#4b3b2375;padding:2px 9px;border-radius:8px}

.production{display:grid;grid-template-columns:1.05fr 1fr 1fr;padding:18px 22px;background:#f1f1e5;border:1px solid var(--line);border-radius:13px;gap:26px}

.production-heading{display:flex;gap:12px;align-items:center}

.production-heading svg{width:30px;height:30px;color:#68844f}

.production-heading strong{display:block;font-size:13px}

.production-heading small{display:block;font-size:10px;color:var(--muted);margin-top:4px}

.production-line{min-width:0;position:relative}

.production-label{font-size:11px;font-weight:bold;padding-right:50px}

.production-label span{display:block;font-size:9px;color:var(--muted);font-weight:normal;margin:2px 0}

.stat-inline{display:flex;align-items:center;justify-content:space-between;gap:5px}

.stat-value{font-size:17px;font-weight:bold;overflow-wrap:anywhere;min-width:0}

.stat-value:after{content:" / sec";font-size:10px;font-weight:normal;color:var(--muted)}

.stat-icon-btn{position:absolute;top:0;right:0;min-width:44px;min-height:44px;border:1px solid #cfd6c0;background:#fcfcf2;border-radius:8px;font-size:10px;padding:5px}

.stat-progress.is-inactive{opacity:.5}

.juice-number{position:absolute;top:46%;left:50%;font-weight:bold;font-size:22px;color:#28583b;text-shadow:0 2px 0 #fff9d5;animation:juice-rise .65s ease-out forwards;pointer-events:none;white-space:nowrap}

.juice-number:after{content:" ✧";color:#ae7517}

#juiceFeedback{position:absolute;inset:0;pointer-events:none}

@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-7px) rotate(1deg)}}

@keyframes juice-rise{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(calc(-50% + var(--drift,0px)),-85px)}}

.game-stage[data-growth="flourishing"] .stand-badge{border-color:#bd9937;background:#fff0b9}

.game-stage[data-growth="growing"] .stand-badge{border-color:#90a16f}

.stage-tool-dock {
    position: absolute;
    top: 50%;
    right: 14px;
    z-index: 8;

    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 8px;

    background: #fffdf5b8;
    border: 1px solid #ffffff80;
    border-radius: 16px;

    box-shadow:
        0 8px 24px #1d362520,
        inset 0 1px 0 #ffffff80;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    transform: translateY(-50%);

    
    overflow: visible;
}

.stage-tool-button {
    position: relative;

    width: 50px;
    height: 50px;

    display: grid;
    place-items: center;

    padding: 0;

    color: var(--green);
    background: #fffdf5dd;

    border: 1px solid #d8dcc9;
    border-radius: 12px;

    box-shadow: 0 3px 8px #30433212;

    transition:
        background .15s ease,
        transform .15s ease,
        box-shadow .15s ease;

    overflow: visible;
}

.stage-tool-button svg {
    width: 24px;
    height: 24px;
}

.stage-tool-button:hover {
    background: #fff;
    box-shadow: 0 5px 12px #30433220;
}

.stage-tool-button:not(:disabled):active {
    transform: translateY(1px);
}

.stage-tool-shop {
    background: #f5cf5cdd;
    border-color: #d9b847;
    color: #525126;
}

.stage-tool-shop:hover {
    background: #f8d878;
}

.stage-tool-count {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 3;

    display: grid;
    place-items: center;

    min-width: 20px;
    height: 20px;

    padding: 0 5px;

    background: var(--green);
    color: #fff;

    border: 2px solid #fffdf5;
    border-radius: 20px;

    font-size: 9px;
    line-height: 1;
    font-weight: bold;
}

.stage-tooltip {
    position: absolute;
    top: 50%;
    right: calc(100% + 14px);
    z-index: 20;

    width: 265px;
    min-height: 92px;

    display: flex;
    align-items: center;

    padding: 15px 16px 15px 78px;

    background: #fffdf5f5;
    color: var(--ink);

    border: 1px solid #dedfce;
    border-radius: 14px;

    box-shadow:
        0 12px 32px #20362724,
        0 2px 6px #20362712;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    text-align: left;

    opacity: 0;
    visibility: hidden;

    transform: translate(8px, -50%);

    transition:
        opacity .16s ease,
        transform .16s ease,
        visibility .16s ease;

    pointer-events: none;
}

.stage-tooltip::after {
    content: "";

    position: absolute;
    top: 50%;
    right: -7px;

    width: 13px;
    height: 13px;

    background: #fffdf5f5;

    border-top: 1px solid #dedfce;
    border-right: 1px solid #dedfce;

    transform:
        translateY(-50%)
        rotate(45deg);
}

.stage-tool-button:hover .stage-tooltip,
.stage-tool-button:focus-visible .stage-tooltip {
    opacity: 1;
    visibility: visible;

    transform: translate(0, -50%);
}

.stage-sale{width:min(610px,calc(100% - 32px))}

.sale-action-row{width:100%;display:grid;grid-template-columns:72px minmax(0,1fr) 72px;align-items:end;gap:9px}

.sell-main-wrap{position:relative;min-width:0}

.sale-side-button{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:7px 5px;border:1px solid #d7d9c6;border-radius:12px;background:#fffdf5e8;color:var(--ink);box-shadow:0 4px 0 #b9bca9,0 7px 12px #283b2d20;font-size:9px;font-weight:bold}

.sale-side-button svg{width:20px;height:20px}

.prestige-button{color:#785726;background:#fff3c8e8;border-color:#ddc273;box-shadow:0 4px 0 #b89847,0 7px 12px #4b3b2324}

/*
 * Reusable Prestige medallion.
 * The number is the count of completed Prestiges.
 */
.prestige-level-badge{
    position:relative;
    box-sizing:border-box;
    width:32px;
    height:32px;
    flex:0 0 32px;
    display:grid;
    place-items:center;
    padding-top:7px;
    color:#6a4911;
    background:
        radial-gradient(circle at 35% 28%,#fff8bd 0 13%,transparent 14%),
        linear-gradient(145deg,#f6dc78 0%,#d8aa37 48%,#f1cf65 100%);
    border:2px solid #9f7620;
    border-radius:50% 50% 46% 46% / 43% 43% 57% 57%;
    box-shadow:
        inset 0 0 0 2px #fff3ad,
        0 2px 0 #7c5a18,
        0 3px 7px #3e321f2b;
    font-family:Georgia,'Times New Roman',serif;
    font-variant-numeric:tabular-nums;
    line-height:1;
    vertical-align:middle
}

.prestige-level-badge::after{
    content:"";
    position:absolute;
    inset:4px;
    border:1px solid #ad8128;
    border-radius:inherit;
    opacity:.7;
    pointer-events:none
}

.prestige-level-badge strong{
    position:relative;
    z-index:2;
    min-width:1ch;
    font-size:13px;
    line-height:1;
    text-align:center
}

.prestige-level-star{
    position:absolute;
    z-index:2;
    top:3px;
    left:50%;
    font-size:7px;
    line-height:1;
    transform:translateX(-50%)
}

.prestige-level-badge-button{
    width:29px;
    height:29px;
    flex-basis:29px;
    padding-top:6px
}

.prestige-level-badge-button strong{font-size:12px}
.prestige-level-badge-button .prestige-level-star{top:2px;font-size:6px}

.prestige-level-badge.is-compact{
    width:25px;
    height:25px;
    flex-basis:25px;
    padding-top:5px;
    border-width:1px;
    box-shadow:inset 0 0 0 1px #fff3ad,0 1px 0 #7c5a18,0 2px 5px #3e321f24
}

.prestige-level-badge.is-compact::after{inset:3px}
.prestige-level-badge.is-compact strong{font-size:10px}
.prestige-level-badge.is-compact .prestige-level-star{top:2px;font-size:5px}

.multiplier-button{color:var(--green)}

.sell-button #sellSelectedEarnings{color:#f7dd87;font-size:12px}

.sell-qty-menu{position:absolute;left:50%;bottom:calc(100% + 9px);z-index:12;display:flex;gap:5px;padding:6px;background:#fffdf5f2;border:1px solid #d7d9c6;border-radius:12px;box-shadow:0 8px 24px #20362728;opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,7px);transition:.15s}

.sell-qty-menu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}

.sell-qty-button{min-width:48px;min-height:38px;padding:7px 9px;border:1px solid #d4d7c5;border-radius:8px;background:#f4f3e7;font-size:10px;font-weight:bold}

.sell-qty-button.is-active:not(:disabled){background:var(--green);color:#fffdea}

.sell-qty-button:disabled{opacity:.45;background:#dedfd6;cursor:not-allowed}

.sell-qty-button.is-unavailable:not(.is-locked){
    opacity:.38;
    color:#6f7168;
    background:#ecece4;
    border-color:#d9dacd
}



/* Storage now lives with the right-side business tools. */
.stage-storage-button {
    color: #426148;
}
.stage-storage-button.has-overflow {
    color: #8c3c2f;
    background: #fff1df;
    border-color: #d6a46f;
}
.storage-capacity-badge {
    min-width: 28px;
    font-size: 8px;
}