/* ============================================================
   store.css · 便利店俯视小游戏
   ============================================================ */

.sg {
    position: absolute;
    inset: 0;
    z-index: 880;
    display: none;
    flex-direction: column;
    background: #0A0610;
    color: var(--text);
    overflow: hidden;
}
.sg.active { display: flex; }
html[data-mode="day"] .sg {
    background: linear-gradient(180deg, var(--day-bg), var(--day-bg-2));
    color: var(--day-ink);
}

.sg-top {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 8px;
}
.sg-title { font-size: 14px; letter-spacing: .06em; }
.sg-progress { flex: 1; text-align: right; font-size: 11px; color: var(--text-dim); }
.sg-progress.low { color: #E8879B; }
/* 日间：顶栏在浅背景上，倒计时和「已收 N 单」得用深色 */
html[data-mode="day"] .sg-title { color: var(--day-ink); }
html[data-mode="day"] .sg-progress { color: var(--day-dim); }
html[data-mode="day"] .sg-progress.low { color: #A33A45; }
html[data-mode="day"] .sg-quit { color: var(--day-dim); }
.sg-quit {
    border: 0; background: none; padding: 2px 0;
    font-size: 11px; color: var(--text-dim);
    cursor: pointer; font-family: inherit;
}

.sg-stage {
    flex: 1;
    touch-action: none;
    min-height: 0;
    position: relative;
    overflow: hidden;
}
/* 定尺寸外框：绝对定位 + translate(-50%,-50%) 居中，再整体 scale
   （不能用 flex 居中——flex 会把 480px 的框压缩，缩放中心偏移，画面往右漂） */
.sg-fit {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 480px;
    height: 720px;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) scale(1);
}
.sg-world {
    position: absolute;
    left: 0; top: 0;
    width: 480px;
    height: 720px;
    transform-origin: center center;
    /* 底图还没画出来时先垫一层地板色，避免闪黑 */
    background: #E8CBA3;
    border-radius: 10px;
    overflow: hidden;
    touch-action: none;
}

/* 场景底图：地板 + 货架 + 收银台 + 仓库（程序画，见 js/store-art.js） */
.sg-art {
    position: absolute;
    left: 0; top: 0;
    width: 480px;
    height: 720px;
    display: block;
    pointer-events: none;
    z-index: 0;
}

/* 货架 / 收银台 / 仓库 / 入口 / 背后货架 / 拖把：
   只留位置和文字，形状由底图画，别再叠一层色块 */
.sg-shelf, .sg-counter, .sg-wh, .sg-mat, .sg-backshelf, .sg-mop {
    position: absolute;
    background: none;
    box-shadow: none;
}
.sg-shelf-label {
    position: absolute; left: 6px; top: -15px;
    font-size: 9px; letter-spacing: .12em; color: rgba(96, 62, 34, .62);
}
.sg-slots { position: absolute; inset: 6px 8px; display: flex; gap: 5px; align-items: center; }
.sg-slots i {
    width: 12px; height: 12px; border-radius: 3px;
    background: rgba(255, 250, 240, .34);
    box-shadow: inset 0 0 0 1px rgba(96, 62, 34, .30);
}
.sg-slots i.on { background: #86BF8F; box-shadow: inset 0 0 0 1px rgba(60, 96, 62, .35); }

.sg-counter span {
    position: absolute; left: 50%; top: 5px; transform: translateX(-50%);
    font-size: 9px; letter-spacing: .12em; color: rgba(96, 62, 34, .58);
    white-space: nowrap;
}
.sg-wh span {
    position: absolute; left: 8px; top: 6px;
    font-size: 9px; letter-spacing: .16em; color: rgba(96, 62, 34, .55);
}
.sg-mat {
    font-size: 9px; letter-spacing: .14em; color: #7E4C58;
    text-align: center; line-height: 26px;
}

/* 玩家 */
.sg-player {
    position: absolute;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(201, 166, 107, .85), 0 0 14px rgba(201, 166, 107, .30);
    z-index: 5;
}

/* 顾客 */
.sg-cust {
    position: absolute;
    width: 32px; height: 32px;
    margin: -16px 0 0 -16px;
    z-index: 4;
}
.sg-av {
    display: block;
    width: 32px; height: 32px;
    border-radius: 50%;
}
/* 俯视小人（js/store-art.js 画的），放大不外推像素 */
.sg-fig {
    display: block;
    width: 32px; height: 32px;
    image-rendering: pixelated;
}
.sg-nm {
    position: absolute; left: 50%; top: 30px; transform: translateX(-50%);
    font-size: 9px; color: rgba(96, 62, 34, .66);
    white-space: nowrap;
}
.sg-pat {
    position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
    width: 30px; height: 3px; border-radius: 2px;
    background: rgba(96, 62, 34, .18);
    overflow: hidden;
}
.sg-pat i { display: block; height: 100%; background: #7FD3A3; }
.sg-bubble {
    position: absolute; left: 50%; top: -26px; transform: translateX(-50%);
    padding: 3px 8px; border-radius: 9px;
    font-size: 9.5px; white-space: nowrap;
    color: #FFD9C2;
    background: rgba(90, 40, 26, .95);
    box-shadow: inset 0 0 0 1px rgba(224, 140, 90, .45);
}
/* 角色主动搭话：长句子，要换行 */
.sg-say {
    position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%);
    max-width: 208px;
    padding: 6px 10px;
    border-radius: 12px;
    font-size: 10.5px;
    line-height: 1.55;
    white-space: normal;
    text-align: left;
    color: #F0DCB4;
    background: rgba(46, 33, 18, .96);
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .55), 0 10px 24px -14px rgba(0, 0, 0, .9);
    z-index: 8;
}

/* 摇杆 */
.sg-stick {
    position: absolute;
    width: 72px; height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(246, 240, 244, .10), rgba(246, 240, 244, .04) 70%, transparent 72%);
    box-shadow: inset 0 0 0 1px rgba(246, 240, 244, .18);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s;
    z-index: 9;
}
.sg-stick.on { opacity: 1; }
.sg-knob {
    position: absolute; left: 50%; top: 50%;
    width: 30px; height: 30px; border-radius: 50%;
    background: linear-gradient(180deg, rgba(246, 240, 244, .9), rgba(214, 206, 216, .75));
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .7);
    transform: translate(-50%, -50%);
}

/* 底部按钮 */
.sg-bar {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}
.sg-btn {
    flex: 1;
    width: 100%; height: 44px;
    border: 0; border-radius: 14px;
    font-size: 13px; letter-spacing: .04em;
    color: var(--text-dim);
    background: rgba(246, 240, 244, .06);
    box-shadow: inset 0 0 0 1px rgba(246, 240, 244, .10);
    cursor: pointer; font-family: inherit;
}
.sg-btn:disabled { cursor: default; opacity: .75; }
.sg-btn.on {
    color: #1B0C14;
    background: linear-gradient(180deg, #E07BA2, #C4577F);
    box-shadow: 0 10px 22px -14px rgba(212, 106, 147, .8);
}

/* 手上拿着的东西 */
.sg-hold {
    position: absolute;
    left: 50%; top: -19px;
    transform: translateX(-50%);
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 9px;
    font-style: normal;
    white-space: nowrap;
    color: #F0DCB4;
    background: rgba(60, 42, 20, .95);
    box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .5);
    display: none;
}
.sg-hold.on { display: block; }

/* 地上的脏 */
.sg-dirt {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
    background:
        radial-gradient(circle at 38% 34%, rgba(96, 74, 52, .62), rgba(64, 48, 34, .45) 46%, rgba(40, 30, 24, .18) 78%);
    box-shadow: inset 0 0 0 1px rgba(150, 118, 84, .28), inset 0 0 10px rgba(30, 20, 14, .45);
    pointer-events: none;
    z-index: 2;
    opacity: .95;
    transition: opacity .5s;
}
/* 水渍：是水，得有点反光 */
.sg-dirt.water {
    border-radius: 50% 50% 46% 54% / 54% 48% 52% 46%;
    background:
        radial-gradient(circle at 36% 30%, rgba(150, 190, 210, .42), rgba(90, 120, 150, .30) 48%, rgba(60, 80, 100, .12) 80%);
    box-shadow: inset 0 0 0 1px rgba(170, 205, 225, .35), inset 0 0 14px rgba(150, 190, 220, .18);
}
.sg-dirt.cleaning { opacity: .25; }

/* 抓到的提示条 */
.sg-toast {
    position: absolute;
    left: 50%; top: 10px;
    transform: translateX(-50%);
    padding: 5px 12px;
    border-radius: 10px;
    font-size: 10.5px;
    letter-spacing: .04em;
    white-space: nowrap;
    color: #FFD9C2;
    background: rgba(70, 30, 24, .92);
    box-shadow: inset 0 0 0 1px rgba(224, 140, 90, .45);
    opacity: 0;
    transition: opacity .18s;
    pointer-events: none;
    z-index: 12;
}
.sg-toast.on { opacity: 1; }

/* 小偷跑起来的样子 */
.sg-cust.thief .sg-av {
    box-shadow: 0 0 0 2px rgba(228, 106, 80, .80), 0 0 12px rgba(228, 106, 80, .35);
}
.sg-cust.thief .sg-nm { color: #A33A2C; }

/* 认识的角色来店里：金圈 */
.sg-cust.char .sg-av {
    box-shadow: 0 0 0 2px rgba(201, 166, 107, .80), 0 0 12px rgba(201, 166, 107, .35);
}
.sg-cust.char .sg-nm { color: #7A5A22; }

/* 拿走的拖把 */
.sg-mop.off { opacity: .18; }

/* 弹层 */
.sg-wrap { position: absolute; inset: 0; z-index: 20; display: none; }
.sg-wrap.active { display: block; }
.sg-mask { position: absolute; inset: 0; background: rgba(6, 4, 10, .55); backdrop-filter: blur(5px); }
.sg-sheet {
    position: absolute; left: 12px; right: 12px; bottom: 16px;
    padding: 16px 16px 14px;
    border-radius: 18px;
    background: linear-gradient(180deg, #171020, #100A17);
    box-shadow: inset 0 0 0 1px rgba(246, 240, 244, .09), 0 30px 60px -30px rgba(0, 0, 0, .95);
}
html[data-mode="day"] .sg-sheet {
    background: #FFF;
    box-shadow: inset 0 0 0 1px rgba(36, 26, 34, .10), 0 30px 50px -30px rgba(36, 26, 34, .5);
    color: var(--day-ink);
}
/* 日间：弹层里的字全部改成深色，不然白底上几乎看不见 */
html[data-mode="day"] .sg-item,
html[data-mode="day"] .sg-total,
html[data-mode="day"] .sg-total span:last-child,
html[data-mode="day"] .sg-result-desc { color: var(--day-ink) !important; }
html[data-mode="day"] .sg-total { border-top-color: rgba(36, 26, 34, .10); }
html[data-mode="day"] .sg-hint,
html[data-mode="day"] .sg-x { color: var(--day-dim) !important; opacity: 1; }
html[data-mode="day"] .sg-pay input {
    color: var(--day-ink);
    border-color: rgba(36, 26, 34, .18);
    background: rgba(36, 26, 34, .03);
}
html[data-mode="day"] .sg-btn {
    color: var(--day-ink);
    background: rgba(36, 26, 34, .05);
    box-shadow: inset 0 0 0 1px rgba(36, 26, 34, .14);
}
html[data-mode="day"] .sg-btn.on {
    color: #FFF;
    background: linear-gradient(180deg, #E07BA2, #C4577F);
    box-shadow: 0 10px 22px -14px rgba(212, 106, 147, .6);
}
html[data-mode="day"] .sg-paytag.qr { color: #2F6B57; box-shadow: inset 0 0 0 1px rgba(47, 107, 87, .35); }
html[data-mode="day"] .sg-paytag.card { color: #A33A57; box-shadow: inset 0 0 0 1px rgba(163, 58, 87, .35); }
html[data-mode="day"] .sg-paytag.cash { color: #8A6A2F; box-shadow: inset 0 0 0 1px rgba(138, 106, 47, .4); }
.sg-sheet-hd { display: flex; justify-content: space-between; align-items: center; font-size: 15px; }
.sg-x { border: 0; background: none; color: var(--text-dim); font-size: 16px; cursor: pointer; }
.sg-items { margin-top: 10px; }
.sg-item { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; }
.sg-total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-top: 8px; padding-top: 8px;
    border-top: 1px solid rgba(246, 240, 244, .08);
    font-size: 12px; color: var(--text-dim);
}
.sg-total span:last-child { font-size: 20px; color: var(--text); }
.sg-pay { display: flex; gap: 8px; margin-top: 10px; }
.sg-pay input {
    flex: 1; height: 44px; border-radius: 12px;
    border: 1px solid rgba(246, 240, 244, .14);
    background: rgba(246, 240, 244, .04);
    color: var(--text); font-size: 16px; padding: 0 12px;
    font-family: inherit; outline: none;
}
.sg-pay .sg-btn { width: 90px; height: 44px; flex: 0 0 90px; }
.sg-hint { margin-top: 8px; font-size: 10.5px; line-height: 1.7; color: var(--text-dim); opacity: .6; }

/* 支付方式标签 */
.sg-paytag {
    display: inline-block;
    margin-top: 8px;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 10px;
    letter-spacing: .12em;
}
.sg-paytag.qr { color: #8FD8B8; box-shadow: inset 0 0 0 1px rgba(110, 231, 183, .4); }
.sg-paytag.card { color: #E9B3C8; box-shadow: inset 0 0 0 1px rgba(212, 106, 147, .45); }
.sg-paytag.cash { color: #E9CB94; box-shadow: inset 0 0 0 1px rgba(201, 166, 107, .5); }
.sg-pay-now { margin-top: 12px; }

/* 现金找零 */
.sg-cash {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(246, 240, 244, .04);
    box-shadow: inset 0 0 0 1px rgba(246, 240, 244, .08);
}
.sg-cash-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    color: var(--text-dim);
    padding: 3px 0;
}
.sg-cash-row.big { font-size: 13px; color: var(--text); }
.sg-cash-row.big span:last-child { font-size: 18px; color: var(--accent); }
.sg-cash-row span:last-child { font-family: 'JetBrains Mono', monospace; }

.sg-dens {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    margin-top: 10px;
}
.sg-dens button {
    height: 36px;
    border: 0;
    border-radius: 10px;
    font-size: 12px;
    font-family: 'JetBrains Mono', monospace;
    color: var(--text);
    background: rgba(246, 240, 244, .06);
    box-shadow: inset 0 0 0 1px rgba(246, 240, 244, .12);
    cursor: pointer;
}
.sg-dens button:active { background: rgba(201, 166, 107, .22); }
.sg-pay-cash .sg-btn { width: auto; flex: 1; }
html[data-mode="day"] .sg-cash {
    background: rgba(36, 26, 34, .04);
    box-shadow: inset 0 0 0 1px rgba(36, 26, 34, .10);
}
html[data-mode="day"] .sg-cash-row { color: var(--day-dim); }
html[data-mode="day"] .sg-cash-row.big { color: var(--day-ink); }
html[data-mode="day"] .sg-dens button {
    color: var(--day-ink);
    background: rgba(36, 26, 34, .04);
    box-shadow: inset 0 0 0 1px rgba(36, 26, 34, .14);
}
.sg-result { text-align: center; padding: 14px 0 6px; }
.sg-result-pay { font-size: 32px; color: var(--primary); }
.sg-result-desc { margin-top: 8px; font-size: 11.5px; line-height: 1.8; color: var(--text-dim); }

/* 背后货架 + 拖把（形状由底图画） */
.sg-backshelf span {
    position: absolute; left: 4px; top: 6px;
    writing-mode: vertical-rl;
    font-size: 9px; letter-spacing: .14em;
    /* 货架本体是深木色，字要浅一点才看得见 */
    color: rgba(255, 248, 236, .90);
}
/* 背后货架上的两列库存：酒（金）/ 口香糖（粉），各 5 格 */
.sg-bk {
    position: absolute;
    top: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sg-bk[data-bk="E"] { left: 24px; }
.sg-bk[data-bk="F"] { left: 34px; }
.sg-bk i {
    width: 6px; height: 6px; border-radius: 2px;
    background: rgba(255, 250, 240, .30);
    box-shadow: inset 0 0 0 1px rgba(96, 62, 34, .28);
}
.sg-bk[data-bk="E"] i.on { background: #C9A66B; }
.sg-bk[data-bk="F"] i.on { background: #D46A93; }