/* ========== 魔法宠物店 · 高级感 UI ========== */

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

body {
    font-family: var(--font-display);
    color: var(--c-ink);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    user-select: none;
    background: #ffe9f0;
}

img {
    display: block;
    max-width: 100%;
    pointer-events: none;
    -webkit-user-drag: none;
}

/* ----- 页面氛围背景 ----- */
.page-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 20% 20%, rgba(255, 181, 197, 0.55), transparent 55%),
        radial-gradient(ellipse 70% 50% at 80% 10%, rgba(184, 224, 246, 0.5), transparent 50%),
        radial-gradient(ellipse 60% 50% at 70% 90%, rgba(168, 230, 207, 0.4), transparent 50%),
        linear-gradient(160deg, #fff5f8 0%, #f0f7ff 45%, #fff8ee 100%);
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.55;
    animation: blobFloat 14s ease-in-out infinite;
}
.blob-1 {
    width: 320px; height: 320px;
    background: #ffb5c5;
    top: -80px; left: -60px;
}
.blob-2 {
    width: 280px; height: 280px;
    background: #b8e0f6;
    bottom: -40px; right: -40px;
    animation-delay: -4s;
}
.blob-3 {
    width: 200px; height: 200px;
    background: #d4c1ec;
    top: 40%; left: 45%;
    animation-delay: -7s;
}

.sparkle-field {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 1px, transparent 1.5px),
        radial-gradient(circle, rgba(255, 201, 74, 0.5) 1px, transparent 1.5px);
    background-size: 120px 120px, 180px 180px;
    background-position: 0 0, 40px 60px;
    opacity: 0.35;
    pointer-events: none;
}

/* ----- 主容器 ----- */
#game-container {
    position: relative;
    z-index: 1;
    width: 98%;
    max-width: 1280px;
    height: 96vh;
    background: var(--glass-strong);
    border-radius: 24px;
    box-shadow:
        var(--shadow-soft),
        0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 1);
    backdrop-filter: blur(18px) saturate(1.2);
    border: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    padding: 10px 12px;
    overflow: hidden;
}
#shop-floor-area {
    min-height: 0;
    flex: 2.4 !important;
}
#shop-floor {
    min-height: 220px !important;
    flex: 1;
}
#counter-area {
    padding-bottom: 8px !important;
}
.click-hint {
    font-size: 0.85rem !important;
    position: relative;
    z-index: 2;
}

.glass-panel {
    background: var(--glass);
    border-radius: var(--radius-xl);
    padding: 14px 16px;
    box-shadow: var(--shadow-inset), 0 4px 20px rgba(255, 143, 171, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(12px);
}

/* ----- 紧凑顶栏 ----- */
header.top-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 240, 245, 0.8));
    border-radius: 18px;
    box-shadow: var(--shadow-float);
    border: 1px solid rgba(255, 255, 255, 0.9);
    margin-bottom: 8px;
    flex-shrink: 0;
}
.top-row1, .top-row2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.top-row3 {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.72rem;
}
.top-row3 .sl-progress-track.thin {
    flex: 1;
    min-width: 80px;
    height: 6px;
    margin-bottom: 0;
    background: #f0e8ec;
    border-radius: 6px;
    overflow: hidden;
}
.sl-conds-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.sl-conds-inline .cond-ok,
.sl-conds-inline .cond-wait {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 6px;
}
.day-inline { color: #3d9b74; }
.day-inline.warn { color: #c47a00; }
.day-inline.closed { color: #8878a0; }
.lv-energy-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.energy-bar.mini {
    margin: 0;
    padding: 4px 8px;
    min-width: 130px;
    flex: 1;
}
.btn-upgrade.mini {
    padding: 6px 10px;
    font-size: 0.8rem;
}
.shop-closed-veil {
    position: absolute;
    inset: 0;
    z-index: 40;
    background: rgba(40, 35, 55, 0.42);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
    pointer-events: none;
    border-radius: inherit;
}
.shop-closed-veil p { font-size: 1.25rem; margin-bottom: 4px; }
.shop-closed-veil small { font-size: 0.8rem; opacity: 0.9; }
.shop-closed-veil.hidden { display: none !important; }
#shop-floor.is-resting { filter: saturate(0.72); }
#btn-gacha.is-disabled { opacity: 0.55; filter: grayscale(0.35); }

/* 店内角色：方底立绘，减少「圆形飘图」 */
.floor-actor .actor-body img {
    border-radius: 10px !important;
    background: transparent !important;
    object-fit: contain !important;
    filter: drop-shadow(0 3px 2px rgba(0,0,0,0.15));
}

.shop-brand {
    display: flex;
    align-items: center;
    gap: 8px;
}
.brand-logo {
    width: 36px;
    height: 36px;
    filter: drop-shadow(0 4px 8px rgba(255, 107, 157, 0.35));
}
.shop-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.name-main {
    font-size: 1.25rem;
    color: var(--c-rose);
    letter-spacing: 1px;
    text-shadow: 0 2px 0 rgba(255, 255, 255, 0.9);
    line-height: 1.1;
}
.name-sub {
    font-size: 0.7rem;
    color: var(--c-muted);
    letter-spacing: 0.5px;
    font-family: system-ui, sans-serif;
    font-weight: 500;
    opacity: 0.75;
}

.header-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ----- 店铺等级条 ----- */
.shop-level-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 240, 248, 0.88));
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 16px rgba(255, 143, 171, 0.12);
}
.sl-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 160px;
}
.sl-badge {
    background: linear-gradient(135deg, #ff8fab, #ff6b9d);
    color: white;
    font-weight: bold;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.95rem;
    box-shadow: 0 3px 0 #c71565;
}
.sl-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sl-text strong {
    color: var(--c-rose);
    font-size: 1rem;
}
.sl-text span {
    font-size: 0.72rem;
    color: var(--c-muted);
    max-width: 200px;
}
.sl-mid {
    flex: 1;
    min-width: 160px;
}
.sl-progress-track {
    height: 10px;
    background: #f0e8ec;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 6px;
}
.sl-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #a8e6cf, #ff8fab, #ffc94a);
    border-radius: 8px;
    transition: width 0.35s ease;
}
.sl-conds {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.72rem;
}
.cond-ok {
    background: #e8fff0;
    color: #27ae60;
    padding: 2px 8px;
    border-radius: 8px;
}
.cond-wait {
    background: #fff5f8;
    color: var(--c-muted);
    padding: 2px 8px;
    border-radius: 8px;
}
.btn-upgrade {
    padding: 10px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: bold;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    background: linear-gradient(135deg, #ffc94a, #ff8fab);
    color: white;
    box-shadow: 0 4px 0 #e08a30;
    white-space: nowrap;
}
.btn-upgrade:disabled {
    background: #d8d0d4;
    box-shadow: 0 4px 0 #b0a8ac;
    cursor: not-allowed;
    color: #888;
}
.btn-upgrade:not(:disabled):active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #e08a30;
}

/* 营业状态 */
.biz-status {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px;
    margin-bottom: 10px;
    border-radius: 14px;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.9);
}
.biz-status.biz-lucky {
    background: linear-gradient(90deg, #fff9e0, #e8fff4);
    color: #c47a00;
}
.biz-status.biz-quiet {
    background: linear-gradient(90deg, #e8eef8, #f0e8f8);
    color: #5a6a8a;
}
.biz-timer-track {
    flex: 1;
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    overflow: hidden;
    min-width: 60px;
}
.biz-timer-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ffc94a, #ff8fab);
    transition: width 0.1s linear;
}

/* 目标路线图 */
.goal-roadmap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}
.goal-step {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: white;
    border-radius: 14px;
    border: 1.5px solid transparent;
    opacity: 0.55;
}
.goal-step.current {
    opacity: 1;
    border-color: var(--c-peach-deep);
    box-shadow: 0 0 12px rgba(255, 143, 171, 0.25);
}
.goal-step.done {
    opacity: 0.9;
    background: linear-gradient(135deg, #f0fff6, #fff);
}
.goal-lv {
    background: #f0e8ec;
    color: var(--c-rose);
    font-weight: bold;
    padding: 6px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    align-self: flex-start;
}
.goal-step.done .goal-lv {
    background: #d4f5e4;
    color: #27ae60;
}
.goal-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    color: var(--c-muted);
}
.goal-info strong {
    color: var(--c-ink);
    font-size: 0.92rem;
}
.soft-fail-note {
    background: #fff8f0;
    border-radius: 14px;
    padding: 12px;
    font-size: 0.82rem;
    color: var(--c-muted);
    border: 1px dashed #ffc94a;
}
.dev-tools {
    margin-top: 12px;
    padding: 12px;
    border-radius: 14px;
    background: #f5f5f8;
    border: 1px dashed #bbb;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.btn-dev {
    padding: 8px 12px;
    border-radius: 12px;
    border: none;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    background: #d0d8e8;
    color: #334;
    box-shadow: 0 3px 0 #a8b0c0;
}
.btn-dev:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #a8b0c0;
}
.btn-dev.danger {
    background: linear-gradient(135deg, #ffb5b5, #ff8a8a);
    color: #5a2020;
    box-shadow: 0 3px 0 #d06060;
}
.soft-fail-note strong {
    color: var(--c-gold-deep);
    display: block;
    margin-bottom: 4px;
}
.soft-fail-note p { line-height: 1.45; }

/* 事件层：绝对铺满店面中部（避开顶栏芯片与底部收银台），完整显示彩虹/浪花等 */
#event-layer {
    position: absolute;
    top: 44px;
    left: 4px;
    right: 4px;
    bottom: 108px;
    z-index: 12;
    pointer-events: none;
    overflow: visible;
}
.event-actor {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: eventBob 0.5s ease-in-out infinite;
    filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
    z-index: 15;
    /* 安卓 WebView 默认点击会闪灰底（像收银台），全部关掉 */
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    background: transparent !important;
    border: none;
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}
.event-actor:active,
.event-actor:focus {
    background: transparent !important;
    outline: none;
}
.event-actor img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 0;
    background: transparent !important;
    border: none;
    pointer-events: none; /* 点击落在父级，避免 img 自己出高亮 */
    -webkit-tap-highlight-color: transparent;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.35))
        drop-shadow(0 4px 8px rgba(40, 30, 45, 0.3));
}
.event-star img {
    /* 流星用金币图：已抠透明 */
    filter:
        drop-shadow(0 0 6px rgba(255, 201, 74, 0.7))
        drop-shadow(0 3px 5px rgba(40, 30, 45, 0.25));
}
.event-troublemaker img,
.event-sea-crab img {
    width: 72px;
    height: 72px;
}
.event-gift img,
.event-rainbow img,
.event-sea-wave img,
.event-sea-shell img {
    width: 68px;
    height: 68px;
}
.event-label {
    margin-top: 4px;
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.92);
    color: var(--c-rose);
    padding: 2px 8px;
    border-radius: 8px;
    white-space: nowrap;
    font-weight: bold;
}
.event-hp {
    width: 56px;
    height: 6px;
    background: #eee;
    border-radius: 4px;
    margin-top: 4px;
    overflow: hidden;
}
.event-hp-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #ff6b9d, #ffc94a);
    transition: width 0.15s;
}
.event-actor.hit {
    animation: eventHit 0.2s ease;
}
/* 事件等级：同一张图，用大小/光晕/标签色区分（以后可换独立立绘） */
.event-actor.tier-1 .event-label {
    background: rgba(255, 255, 255, 0.92);
    color: var(--c-rose, #e86a8a);
}
.event-actor.tier-2 {
    filter: drop-shadow(0 0 8px rgba(255, 196, 80, 0.55)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.2));
}
.event-actor.tier-2 img {
    width: 78px !important;
    height: 78px !important;
}
.event-actor.tier-2 .event-label {
    background: linear-gradient(135deg, #fff6d6, #ffe08a);
    color: #9a5b00;
    border: 1px solid rgba(255, 200, 80, 0.8);
}
.event-actor.tier-3 {
    filter: drop-shadow(0 0 12px rgba(186, 120, 255, 0.7)) drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
}
.event-actor.tier-3 img {
    width: 90px !important;
    height: 90px !important;
}
.event-actor.tier-3 .event-label {
    background: linear-gradient(135deg, #f3e8ff, #d9b3ff);
    color: #6b2d9b;
    border: 1px solid rgba(180, 100, 255, 0.85);
    font-size: 0.74rem;
    box-shadow: 0 0 8px rgba(180, 120, 255, 0.45);
}
.event-actor.tier-2.event-troublemaker img,
.event-actor.tier-2.event-sea-crab img {
    width: 84px !important;
    height: 84px !important;
}
.event-actor.tier-3.event-troublemaker img,
.event-actor.tier-3.event-sea-crab img {
    width: 96px !important;
    height: 96px !important;
}
@keyframes eventBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes eventHit {
    0% { transform: scale(1); }
    50% { transform: scale(1.15) rotate(-8deg); }
    100% { transform: scale(1); }
}

.display-slot.locked {
    background: rgba(0, 0, 0, 0.06);
    border-style: dashed;
    border-color: #ccc;
    opacity: 0.7;
}
.slot-lock { font-size: 1rem; opacity: 0.7; }

.floating-text.loss {
    color: #e74c3c;
    text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(231, 76, 60, 0.3);
}

/* 升级/通关弹窗 */
#level-modal {
    position: fixed;
    inset: 0;
    background: rgba(255, 248, 252, 0.88);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1100;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
#level-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}
.level-modal-content {
    background: linear-gradient(165deg, #fff, #fff8fb);
    padding: 36px 40px;
    border-radius: 32px;
    text-align: center;
    border: 3px solid #ffc94a;
    box-shadow: 0 20px 50px rgba(255, 201, 74, 0.35);
    max-width: 360px;
    position: relative;
}
#level-modal-title {
    color: var(--c-rose);
    font-size: 1.6rem;
    margin-bottom: 12px;
}
.level-modal-body {
    font-size: 1rem;
    color: var(--c-ink);
    line-height: 1.55;
    margin-bottom: 20px;
}
#btn-close-level {
    padding: 10px 28px;
    font-size: 1.1rem;
    font-family: inherit;
    background: linear-gradient(135deg, #ffc94a, #ff8fab);
    color: white;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    box-shadow: 0 4px 0 #e08a30;
}
#btn-close-level:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #e08a30;
}

/* 图鉴宠物详情 */
#pet-detail-modal {
    position: fixed;
    inset: 0;
    background: rgba(40, 24, 36, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1150;
    padding: 20px;
}
#pet-detail-modal.hidden { display: none; }
.pet-detail-content {
    background: linear-gradient(165deg, #fffefb, #fff5f8);
    padding: 24px 20px 18px;
    border-radius: 28px;
    text-align: center;
    border: 3px solid #ffb6c8;
    box-shadow: 0 18px 48px rgba(255, 105, 160, 0.28);
    max-width: 340px;
    width: 100%;
    position: relative;
    animation: confirmPop 0.28s ease;
}
.pet-detail-x {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: #f0e8ec;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #665;
}
.pet-detail-frame {
    width: 132px;
    height: 132px;
    margin: 8px auto 12px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(145deg, #fff6e9, #ffe0ec);
    box-shadow: 0 0 0 3px #ddd, 0 8px 20px rgba(0,0,0,0.08);
}
.pet-detail-frame.rarity-uncommon { box-shadow: 0 0 0 3px #6ecb8a, 0 0 18px rgba(110,200,140,0.45); }
.pet-detail-frame.rarity-rare { box-shadow: 0 0 0 3px #6ea8ff, 0 0 20px rgba(110,168,255,0.5); }
.pet-detail-frame.rarity-epic { box-shadow: 0 0 0 4px #b07cff, 0 0 24px rgba(176,124,255,0.55); }
.pet-detail-frame.rarity-legendary {
    box-shadow: 0 0 0 4px #ffc94a, 0 0 28px rgba(255,201,74,0.7);
    background: linear-gradient(145deg, #fffef5, #ffe8a3);
}
#pet-detail-img {
    width: 112px;
    height: 112px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
}
#pet-detail-name {
    margin: 0 0 8px;
    color: var(--c-rose, #e85a8a);
    font-size: 1.35rem;
}
.pet-detail-rarity-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 8px;
}
.pet-detail-rarity-label {
    font-size: 0.85rem;
    color: #887;
    font-weight: bold;
}
#pet-detail-rarity {
    margin: 0;
    font-size: 0.95rem;
    padding: 4px 14px;
}
.pet-detail-stars {
    margin: 6px 0;
    color: #c47a00;
    font-size: 1.05rem;
    letter-spacing: 1px;
}
.pet-detail-meta {
    font-size: 0.85rem;
    color: #665;
    margin: 0 0 10px;
    line-height: 1.45;
}
.pet-detail-meta .rarity-inline {
    font-weight: bold;
}
.pet-detail-meta .rarity-inline.rarity-common { color: #777; }
.pet-detail-meta .rarity-inline.rarity-uncommon { color: #2a8a4a; }
.pet-detail-meta .rarity-inline.rarity-rare { color: #2a5fbf; }
.pet-detail-meta .rarity-inline.rarity-epic { color: #6b2fbf; }
.pet-detail-meta .rarity-inline.rarity-legendary { color: #c47a00; }
.pet-detail-desc {
    text-align: left;
    font-size: 0.92rem;
    line-height: 1.55;
    color: #5a4a55;
    background: rgba(255,255,255,0.7);
    border-radius: 14px;
    padding: 12px 14px;
    margin: 0 0 14px;
    border: 1px solid rgba(255,181,197,0.35);
}
.pet-detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.pet-detail-actions .btn-confirm-ok,
.pet-detail-actions .btn-confirm-cancel {
    flex: 1 1 120px;
}
#btn-pet-duty.is-off {
    background: linear-gradient(135deg, #c8c0d0, #a8a0b0);
    box-shadow: 0 3px 0 #888;
}

/* 游戏内确认弹窗（领奖 / 重置等） */
#confirm-modal {
    position: fixed;
    inset: 0;
    background: rgba(40, 24, 36, 0.45);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
    padding: 20px;
}
#confirm-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}
.confirm-modal-content {
    background: linear-gradient(165deg, #fffefb, #fff5f8);
    padding: 28px 24px 22px;
    border-radius: 28px;
    text-align: center;
    border: 3px solid #ffb6c8;
    box-shadow: 0 18px 48px rgba(255, 105, 160, 0.28);
    max-width: 340px;
    width: 100%;
    animation: confirmPop 0.28s ease;
}
#confirm-modal.is-danger .confirm-modal-content {
    border-color: #f0a0a0;
    background: linear-gradient(165deg, #fff, #fff5f5);
}
@keyframes confirmPop {
    from { transform: scale(0.92); opacity: 0.6; }
    to { transform: scale(1); opacity: 1; }
}
.confirm-emoji {
    font-size: 2.2rem;
    line-height: 1;
    margin-bottom: 8px;
}
#confirm-title {
    color: var(--c-rose, #e85a8a);
    font-size: 1.35rem;
    margin: 0 0 10px;
    font-family: 'ZCOOL KuaiLe', cursive, sans-serif;
}
#confirm-modal.is-danger #confirm-title {
    color: #d64545;
}
#confirm-body {
    font-size: 0.95rem;
    color: #5a4a55;
    line-height: 1.55;
    margin: 0 0 18px;
    text-align: left;
}
#confirm-body strong {
    color: #c47a00;
}
.confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}
.btn-confirm-cancel,
.btn-confirm-ok {
    flex: 1 1 120px;
    min-width: 110px;
    padding: 12px 14px;
    font-size: 1rem;
    font-family: inherit;
    border: none;
    border-radius: 16px;
    cursor: pointer;
}
.btn-confirm-cancel {
    background: #f0e8ec;
    color: #665566;
    box-shadow: 0 3px 0 #d0c4c8;
}
.btn-confirm-ok {
    background: linear-gradient(135deg, #ffc94a, #ff8fab);
    color: #fff;
    font-weight: bold;
    box-shadow: 0 3px 0 #e08a30;
}
#confirm-modal.is-danger .btn-confirm-ok {
    background: linear-gradient(135deg, #ff8a8a, #e85a5a);
    box-shadow: 0 3px 0 #c04040;
}
.btn-confirm-cancel:active,
.btn-confirm-ok:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #d0c4c8;
}

.stat-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 10px rgba(92, 74, 90, 0.06);
    font-size: 1rem;
}
.coin-chip {
    font-size: 1.35rem;
    font-weight: bold;
    color: var(--c-gold-deep);
    background: linear-gradient(135deg, #fff9e8, #fff);
    border-color: rgba(255, 201, 74, 0.45);
}
.fame-chip {
    color: var(--c-rose);
    font-size: 0.95rem;
    border-color: rgba(255, 181, 197, 0.6);
}
.auto-chip {
    color: var(--c-sky-deep);
    font-size: 0.9rem;
    border-style: dashed;
    border-color: var(--c-sky);
}
.diamond-chip {
    color: #5b8def;
    font-size: 1.15rem;
    font-weight: bold;
    background: linear-gradient(135deg, #eef4ff, #fff);
    border-color: rgba(100, 149, 237, 0.45);
}
.diamond-icon {
    font-size: 1.1rem;
    filter: drop-shadow(0 1px 2px rgba(80, 120, 200, 0.35));
}

/* 分店栏 */
.branch-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.75);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.9);
}
.branch-label {
    font-size: 0.85rem;
    color: var(--c-rose);
    font-weight: bold;
}
.branch-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.branch-tab {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    border: 2px solid rgba(255, 181, 197, 0.5);
    background: white;
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    color: var(--c-ink);
}
.branch-tab.active {
    background: linear-gradient(135deg, #ff8fab, #ff6b9d);
    color: white;
    border-color: transparent;
    box-shadow: 0 3px 0 #c71565;
}
.branch-tab.locked {
    opacity: 0.55;
    cursor: not-allowed;
    background: #f0ecee;
}
.branch-note {
    font-size: 0.72rem;
    color: var(--c-muted);
    margin-left: auto;
}
.boost-status {
    padding: 6px 12px;
    margin-bottom: 8px;
    border-radius: 12px;
    background: linear-gradient(90deg, #eef4ff, #fff0f8);
    font-size: 0.85rem;
    color: #5b6a9a;
    border: 1px solid rgba(120, 150, 220, 0.3);
}
.day-banner {
    padding: 8px 14px;
    margin-bottom: 10px;
    border-radius: 14px;
    font-size: 0.9rem;
    text-align: center;
    background: linear-gradient(90deg, #e8fff4, #fff9e8);
    color: #3d8b6e;
    border: 1.5px solid rgba(86, 197, 150, 0.45);
}
.day-banner.closed {
    background: linear-gradient(90deg, #f0eef4, #e8e4f0);
    color: #6a6080;
    border-color: rgba(120, 110, 140, 0.35);
}
.energy-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    border: 1px solid rgba(168, 230, 207, 0.6);
}
.energy-label {
    font-size: 0.85rem;
    color: #3d9b74;
    font-weight: bold;
    white-space: nowrap;
}
.energy-track {
    flex: 1;
    height: 12px;
    background: #e8f5ef;
    border-radius: 8px;
    overflow: hidden;
}
.energy-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #a8e6cf, #56c596);
    border-radius: 8px;
    transition: width 0.2s ease;
}
.energy-fill.low {
    background: linear-gradient(90deg, #ffe8a3, #ffb347);
}
.energy-fill.empty {
    background: #ccc;
    width: 0% !important;
}
.energy-num {
    font-size: 0.85rem;
    color: #3d9b74;
    min-width: 48px;
    text-align: right;
}
.close-story {
    border-color: #b8a0e0 !important;
    max-width: 400px;
}
.goal-step.locked-step {
    opacity: 0.45;
}

/* 钻石商店 */
.diamond-shop {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.diamond-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 12px;
    border-radius: 14px;
    border: 1.5px solid rgba(100, 149, 237, 0.25);
}
.diamond-item.owned {
    opacity: 0.75;
    background: #f4f8ff;
}
.diamond-item.unaffordable {
    opacity: 0.72;
}
.diamond-item.unaffordable .btn-diamond:disabled,
.diamond-item.owned .btn-diamond:disabled {
    background: #c8c8d0;
    box-shadow: 0 3px 0 #a0a0a8;
    color: #f0f0f0;
    cursor: not-allowed;
}
.diamond-item-info {
    flex: 1;
}
.diamond-item-info h4 {
    color: #5b8def;
    font-size: 0.95rem;
}
.diamond-item-info p {
    font-size: 0.78rem;
    color: var(--c-muted);
}
.diamond-item-info .cost {
    color: #5b8def;
    font-weight: bold;
    margin-top: 2px;
}
.btn-diamond {
    padding: 7px 12px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #8eb6ff, #6a9aef);
    color: white;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 3px 0 #4a7ad0;
    flex-shrink: 0;
}
.btn-diamond:disabled {
    background: #c8c8d0;
    box-shadow: 0 3px 0 #a0a0a8;
    cursor: not-allowed;
}
.btn-diamond:not(:disabled):active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #4a7ad0;
}

.pet-card.maxed .pet-stars {
    color: #c47a00;
}
.pet-card {
    position: relative;
    overflow: visible;
}
.pet-frame {
    position: relative;
    overflow: hidden;
}
/* 默认：角标在卡片上；具体位置由 mobile.css 覆盖为右上角 */
.region-tag {
    font-size: 0.55rem;
    background: #5BAFD0;
    color: white;
    padding: 1px 5px;
    border-radius: 6px;
    line-height: 1.2;
}
.shop-floor.branch-seaside.theme-default,
#shop-floor.branch-seaside.theme-default {
    background:
        linear-gradient(180deg, rgba(200, 240, 255, 0.5) 0%, transparent 40%),
        linear-gradient(180deg, #e0f7ff 0%, #b8e8f8 50%, #7ec8e8 100%);
}
#main-box-container.sparkle-fx .cash-img {
    filter: drop-shadow(0 0 16px gold) drop-shadow(0 10px 16px rgba(196, 154, 154, 0.35));
}
.side-tabs {
    flex-wrap: wrap;
}
.side-tabs .tab-btn {
    font-size: 0.78rem;
    padding: 7px 2px;
}

/* ----- 主布局：默认手机竖屏 ----- */
main, main.phone-main {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

h2, h3 {
    text-align: center;
    color: var(--c-rose);
    text-shadow: 0 1px 0 white;
}
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; margin-bottom: 8px; }

.panel-head { margin-bottom: 8px; }
.panel-hint {
    text-align: center;
    font-size: 0.8rem;
    color: var(--c-muted);
    margin-bottom: 8px;
}

/* ----- 图鉴：手机上横向滚动卡片 ----- */
#collection-area {
    flex: 0 0 auto;
    max-height: 140px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    order: 2;
}
#pets-grid {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
}
#pets-grid .pet-card {
    flex: 0 0 88px;
    min-width: 88px;
}

#collection-area::-webkit-scrollbar,
#side-panel::-webkit-scrollbar { width: 6px; }
#collection-area::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--c-peach), var(--c-peach-deep));
    border-radius: 4px;
}
#side-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(var(--c-sky), var(--c-sky-deep));
    border-radius: 4px;
}

#pets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
    padding: 4px 2px 8px;
}

.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 28px 12px;
    color: var(--c-muted);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0.85;
}
.empty-state img { opacity: 0.7; filter: grayscale(0.2); }
.empty-state p { font-size: 0.9rem; line-height: 1.5; }

.pet-card {
    background: linear-gradient(165deg, #ffffff 0%, #fff8fb 100%);
    border-radius: 18px;
    padding: 10px 8px 8px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(92, 74, 90, 0.08);
    transition: transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.22s;
    cursor: pointer;
    border: 2px solid transparent;
    position: relative;
}
.pet-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 12px 28px rgba(255, 143, 171, 0.22);
}
.pet-card.on-duty {
    border-color: var(--c-peach-deep);
    box-shadow: 0 0 0 3px rgba(255, 143, 171, 0.25), 0 8px 20px rgba(255, 107, 157, 0.2);
}

.pet-frame {
    width: 72px;
    height: 72px;
    margin: 0 auto 6px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.95), transparent 45%),
        linear-gradient(145deg, #fff6e9, #ffe0ec);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -3px 8px rgba(255, 143, 171, 0.15), 0 4px 10px rgba(0, 0, 0, 0.06);
    overflow: hidden;
}
.pet-art {
    width: 64px;
    height: 64px;
    object-fit: contain; /* 勿用 cover：会裁切角/尾巴，显得体型不一 */
    border-radius: 50%;
    background: transparent;
}

.pet-name {
    font-size: 0.72rem;
    color: var(--c-ink);
    line-height: 1.25;
    margin-bottom: 2px;
}
.pet-stars {
    font-size: 0.62rem;
    color: var(--c-gold-deep);
    letter-spacing: -0.5px;
}
.pet-badge {
    font-size: 0.62rem;
    margin-top: 5px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: #f3f0f4;
    color: var(--c-muted);
    display: inline-block;
}
.pet-card.on-duty .pet-badge {
    background: linear-gradient(90deg, #ffe0f0, #ffd0e4);
    color: var(--c-rose);
}

/* 稀有度边框光（5 档） */
.pet-card.rarity-common .pet-frame {
    box-shadow: inset 0 -3px 8px rgba(0, 0, 0, 0.04), 0 0 0 2px #c8c4cc;
}
.pet-card.rarity-uncommon .pet-frame {
    box-shadow: inset 0 -3px 8px rgba(120, 200, 140, 0.12), 0 0 0 2px #6ecb8a, 0 0 10px rgba(110, 200, 140, 0.35);
}
.pet-card.rarity-rare .pet-frame {
    box-shadow: inset 0 -3px 8px rgba(110, 168, 255, 0.15), 0 0 0 2px var(--rarity-rare), 0 0 14px rgba(110, 168, 255, 0.35);
}
.pet-card.rarity-epic .pet-frame {
    box-shadow: inset 0 -3px 8px rgba(180, 120, 255, 0.2), 0 0 0 2px #b07cff, 0 0 18px rgba(176, 124, 255, 0.5);
}
.pet-card.rarity-legendary .pet-frame {
    box-shadow: inset 0 -3px 8px rgba(255, 201, 74, 0.25), 0 0 0 3px #ffc94a, 0 0 22px rgba(255, 201, 74, 0.65), 0 0 36px rgba(255, 160, 60, 0.35);
}
.pet-card.rarity-epic {
    background: linear-gradient(165deg, #faf5ff, #efe0ff);
}
.pet-card.rarity-legendary {
    background: linear-gradient(165deg, #fffef0, #ffe8a8 55%, #ffd76a);
    position: relative;
}
.pet-card.rarity-legendary::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
    animation: shineSweep 2.4s ease infinite;
    opacity: 0.7;
}

/* ----- 中间店面 ----- */
#shop-floor-area {
    flex: 2.2;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    background: transparent;
    border: none;
    padding: 0;
}

#shop-floor {
    flex: 1;
    border-radius: 26px;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--shadow-soft), inset 0 0 60px rgba(255, 255, 255, 0.25);
    display: flex;
    flex-direction: column;
    min-height: 280px;
    transition: background 0.5s ease;
}

/* 主题背景 */
.theme-default {
    background:
        linear-gradient(180deg, rgba(255, 252, 248, 0.5) 0%, transparent 40%),
        linear-gradient(180deg, #fff5f0 0%, #ffe4ec 55%, #ffd6e4 100%);
}
.theme-default .floor-rug {
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.55) 0%, transparent 70%);
}
.theme-default .floor-window {
    background: linear-gradient(180deg, #b8e0f6 0%, #e8f6ff 100%);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.8), 0 4px 12px rgba(126, 200, 232, 0.3);
}

.theme-starry {
    background:
        radial-gradient(circle at 15% 20%, rgba(255, 255, 220, 0.5) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 15%, rgba(255, 255, 255, 0.7) 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 40% 40%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px),
        radial-gradient(circle at 85% 50%, rgba(255, 220, 180, 0.35) 0 2px, transparent 3px),
        linear-gradient(180deg, #1e1a3a 0%, #3d2f6b 45%, #6b4d8a 100%);
}
.theme-starry .floor-label,
.theme-starry .slots-label { color: #ffe8a3; }
.theme-starry .floor-label {
    background: rgba(30, 26, 58, 0.55);
    border-color: rgba(255, 232, 163, 0.3);
}
.theme-starry .floor-window {
    background: linear-gradient(180deg, #0a0820 0%, #2a1f50 100%);
    box-shadow: inset 0 0 20px rgba(180, 160, 255, 0.4), 0 0 16px rgba(255, 201, 74, 0.2);
}
.theme-starry .floor-rug {
    background: radial-gradient(ellipse, rgba(155, 126, 222, 0.25) 0%, transparent 70%);
}
.theme-starry .display-slot {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(212, 193, 236, 0.5);
}
.theme-starry .click-hint {
    color: #ffe8a3;
    background: rgba(0, 0, 0, 0.35);
}

.theme-strawberry {
    background:
        radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.45) 0 10px, transparent 11px),
        radial-gradient(circle at 78% 30%, rgba(255, 255, 255, 0.3) 0 7px, transparent 8px),
        radial-gradient(circle at 50% 70%, rgba(255, 255, 255, 0.2) 0 14px, transparent 15px),
        linear-gradient(180deg, #ffd6e8 0%, #ff9fbc 50%, #ff7aa2 100%);
}
.theme-strawberry .floor-window {
    background: linear-gradient(180deg, #fff0f5 0%, #ffcce0 100%);
}
.theme-strawberry .floor-rug {
    background: radial-gradient(ellipse, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
}

/* 场景装饰层 */
.floor-decor {
    position: absolute;
    pointer-events: none;
    z-index: 1;
}
.floor-shelf {
    top: 0; left: 0; right: 0;
    height: 28px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent);
}
.floor-rug {
    left: 10%;
    right: 10%;
    bottom: 18%;
    height: 40%;
    border-radius: 50%;
}
/* 左右货架（立体一点的置物柜，不是树枝） */
.shelf-unit {
    top: 56px;
    width: 36px;
    height: 100px;
    border-radius: 8px 8px 4px 4px;
    background:
        linear-gradient(180deg, #fff6e9 0%, #f0d8c8 100%);
    box-shadow:
        4px 6px 12px rgba(0, 0, 0, 0.1),
        inset 0 0 0 2px rgba(255, 255, 255, 0.5);
    opacity: 0.9;
    z-index: 2;
}
.shelf-unit.left { left: 12px; transform: perspective(120px) rotateY(18deg); }
.shelf-unit.right { right: 12px; transform: perspective(120px) rotateY(-18deg); }
.shelf-unit::before,
.shelf-unit::after {
    content: '';
    position: absolute;
    left: 4px; right: 4px;
    height: 3px;
    background: rgba(200, 160, 140, 0.45);
    border-radius: 2px;
}
.shelf-unit::before { top: 28px; }
.shelf-unit::after { top: 56px; }

/* 简易 3D 店面透视 */
.shop-3d {
    perspective: 900px;
}
.shop-stage {
    flex: 1;
    position: relative;
    min-height: 120px;
    margin: 0 20px;
    transform-style: preserve-3d;
}
.stage-floor-plane {
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 55%;
    border-radius: 50% 50% 8px 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 200, 180, 0.25));
    transform: rotateX(55deg);
    transform-origin: center bottom;
    pointer-events: none;
    z-index: 0;
}
.shop-3d #actors-layer {
    margin: 0;
    z-index: 3;
}
.counter-3d {
    position: relative;
    z-index: 5;
}
.counter-desk {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: min(70%, 280px);
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(180deg, #f5e0d0, #d4a890);
    box-shadow: 0 8px 0 #c09078, 0 12px 20px rgba(0, 0, 0, 0.12);
    z-index: 0;
    pointer-events: none;
}
.counter-3d #main-box-container {
    position: relative;
    z-index: 1;
}
.floor-wall {
    top: 0; left: 0; right: 0;
    height: 42%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25), transparent);
    pointer-events: none;
}
.floor-window {
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    width: 72px;
    height: 40px;
    border-radius: 12px 12px 6px 6px;
    opacity: 0.85;
    border: 3px solid rgba(255, 255, 255, 0.7);
}

.floor-label {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.82rem;
    color: var(--c-rose);
    background: rgba(255, 255, 255, 0.78);
    padding: 4px 14px 4px 10px;
    border-radius: var(--radius-pill);
    z-index: 5;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(6px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.floor-label-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #56c596;
    box-shadow: 0 0 6px #56c596;
    animation: pulseDot 1.6s ease infinite;
}

#display-slots-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 12px 6px;
    z-index: 4;
    position: relative;
}
.slots-label {
    font-size: 0.8rem;
    color: var(--c-rose);
    opacity: 0.9;
}
#display-slots { display: flex; gap: 10px; }

.display-slot {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
    border: 2px dashed rgba(255, 181, 197, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* 宠物图裁进圆角方框，不溢出 */
    backdrop-filter: blur(4px);
    box-sizing: border-box;
}
.display-slot.filled {
    border-style: solid;
    border-color: var(--c-peach-deep);
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 14px rgba(255, 105, 180, 0.2);
    padding: 0;
}
.display-slot.filled.rarity-rare { border-color: var(--rarity-rare); }
.display-slot.filled.rarity-legendary {
    border-color: var(--rarity-legendary);
    box-shadow: 0 0 12px rgba(255, 201, 74, 0.45);
}
.display-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 正方形图铺满圆角框并裁切 */
    object-position: center;
    display: block;
    border-radius: 12px;
}
.display-slot small {
    position: absolute;
    bottom: 1px;
    right: 1px;
    font-size: 0.55rem;
    background: rgba(255, 255, 255, 0.95);
    color: var(--c-gold-deep);
    padding: 1px 4px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    z-index: 2;
    line-height: 1.2;
}
.display-slot .slot-rarity {
    position: absolute;
    top: 1px;
    left: 1px;
    font-size: 0.5rem;
    font-style: normal;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 4px;
    padding: 0 3px;
    line-height: 1.2;
    z-index: 2;
}
.slot-empty {
    font-size: 0.85rem;
    color: #d0c8d0;
    line-height: 1;
}

#actors-layer {
    flex: 1;
    position: relative;
    min-height: 120px;
    width: 100%;
    height: 100%;
    z-index: 3;
}

/* ----- 角色骨架：阴影 + 身体（走路/发呆/开心） ----- */
.floor-actor {
    --walk-ms: 420ms;
    --walk-amp: 6px;
    position: absolute;
    width: 64px;
    height: 72px;
    cursor: pointer;
    z-index: 3;
    line-height: 0;
    transform-origin: 50% 100%;
}
.floor-actor .actor-shadow {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 36px;
    height: 10px;
    margin-left: -18px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(60, 40, 50, 0.28) 0%, transparent 70%);
    pointer-events: none;
    transform-origin: center center;
    z-index: 0;
}
.floor-actor .actor-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transform-origin: 50% 100%;
    z-index: 1;
    will-change: transform;
}
.floor-actor .actor-body img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: 0;
    display: block;
    background: transparent !important;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.25))
        drop-shadow(0 3px 5px rgba(40, 30, 45, 0.28));
}
.floor-customer {
    width: 72px;
    height: 88px;
    cursor: default;
}
/* 客人：全身立绘，比店员宠物略大一点（像「人」走进店） */
.floor-customer .actor-body img {
    width: 64px;
    height: 74px;
    object-fit: contain;
    border-radius: 0;
    background: transparent !important;
    opacity: 1;
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.3))
        drop-shadow(0 4px 6px rgba(40, 30, 45, 0.3));
}
.floor-customer .actor-shadow {
    width: 40px;
    margin-left: -20px;
    height: 10px;
    background: radial-gradient(ellipse, rgba(50, 35, 45, 0.32) 0%, transparent 72%);
}
.floor-pet .actor-body img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    object-position: center bottom;
}
/* 图鉴卡、收银台陈列：主体占满圆/框，减少「有的大有的小」 */
.display-slot img {
    object-fit: contain !important;
    object-position: center center;
}

/* 转向：只翻身体，不翻阴影逻辑 */
.floor-actor.face-left .actor-body {
    transform: scaleX(-1);
}
.floor-actor.face-right .actor-body {
    transform: scaleX(1);
}

/* 走路：轻微颠簸（别一直狂蹦） */
.floor-actor.is-walking .actor-body {
    animation: walkBody 0.7s ease-in-out infinite;
}
.floor-actor.is-walking.face-left .actor-body {
    animation-name: walkBodyLeft;
}
.floor-actor.is-walking .actor-shadow {
    animation: walkShadow 0.7s ease-in-out infinite;
}

/* 发呆：很轻的呼吸，几乎静止 */
.floor-actor.is-idle .actor-body {
    animation: idleBreath 2.8s ease-in-out infinite;
}
.floor-actor.is-idle.face-left .actor-body {
    animation-name: idleBreathLeft;
}
.floor-actor.is-idle .actor-shadow {
    animation: idleShadow 2.8s ease-in-out infinite;
}

/* 客人驻足看货：微倾头 */
.floor-actor.is-look .actor-body {
    animation: lookAround 1.2s ease-in-out infinite;
}
.floor-actor.is-look.face-left .actor-body {
    animation-name: lookAroundLeft;
}
.floor-actor.is-look .actor-shadow {
    transform: scaleX(1.05);
    opacity: 0.9;
}

/* 被戳开心：原地跳 */
.floor-actor.is-happy .actor-body {
    animation: happyJump 0.45s cubic-bezier(0.34, 1.5, 0.64, 1) infinite;
}
.floor-actor.is-happy.face-left .actor-body {
    animation-name: happyJumpLeft;
}
.floor-actor.is-happy .actor-shadow {
    animation: happyShadow 0.45s ease infinite;
}

.floor-pet:hover .actor-body img {
    filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.55));
}

/* 走路：小幅度（约 2px）+ 微倾，不夸张蹦跳 */
@keyframes walkBody {
    0%, 100% { transform: scaleX(1) translateY(0) rotate(0deg); }
    50%      { transform: scaleX(1) translateY(-2px) rotate(2deg); }
}
@keyframes walkBodyLeft {
    0%, 100% { transform: scaleX(-1) translateY(0) rotate(0deg); }
    50%      { transform: scaleX(-1) translateY(-2px) rotate(2deg); }
}
@keyframes walkShadow {
    0%, 100% { transform: scaleX(1); opacity: 0.75; }
    50%      { transform: scaleX(0.88); opacity: 0.55; }
}

@keyframes idleBreath {
    0%, 100% { transform: scaleX(1) translateY(0) scale(1, 1); }
    50%      { transform: scaleX(1) translateY(-1px) scale(1.01, 0.99); }
}
@keyframes idleBreathLeft {
    0%, 100% { transform: scaleX(-1) translateY(0) scale(1, 1); }
    50%      { transform: scaleX(-1) translateY(-1px) scale(1.01, 0.99); }
}
@keyframes idleShadow {
    0%, 100% { transform: scaleX(1); opacity: 0.75; }
    50%      { transform: scaleX(0.96); opacity: 0.65; }
}

@keyframes lookAround {
    0%, 100% { transform: scaleX(1) rotate(0deg) translateY(0); }
    30%      { transform: scaleX(1) rotate(-8deg) translateY(-1px); }
    70%      { transform: scaleX(1) rotate(8deg) translateY(-1px); }
}
@keyframes lookAroundLeft {
    0%, 100% { transform: scaleX(-1) rotate(0deg) translateY(0); }
    30%      { transform: scaleX(-1) rotate(-8deg) translateY(-1px); }
    70%      { transform: scaleX(-1) rotate(8deg) translateY(-1px); }
}

@keyframes happyJump {
    0%, 100% { transform: scaleX(1) translateY(0) scale(1, 1) rotate(0deg); }
    30%      { transform: scaleX(1) translateY(-16px) scale(0.94, 1.08) rotate(-6deg); }
    55%      { transform: scaleX(1) translateY(-4px) scale(1.06, 0.92) rotate(4deg); }
    75%      { transform: scaleX(1) translateY(-10px) scale(0.97, 1.04) rotate(-3deg); }
}
@keyframes happyJumpLeft {
    0%, 100% { transform: scaleX(-1) translateY(0) scale(1, 1) rotate(0deg); }
    30%      { transform: scaleX(-1) translateY(-16px) scale(0.94, 1.08) rotate(-6deg); }
    55%      { transform: scaleX(-1) translateY(-4px) scale(1.06, 0.92) rotate(4deg); }
    75%      { transform: scaleX(-1) translateY(-10px) scale(0.97, 1.04) rotate(-3deg); }
}
@keyframes happyShadow {
    0%, 100% { transform: scaleX(1); opacity: 0.85; }
    30%      { transform: scaleX(0.55); opacity: 0.35; }
    55%      { transform: scaleX(1.15); opacity: 0.9; }
    75%      { transform: scaleX(0.7); opacity: 0.45; }
}

#counter-area {
    display: flex;
    justify-content: center;
    padding: 4px 0 14px;
    z-index: 4;
    position: relative;
}
#main-box-container {
    text-align: center;
    cursor: pointer;
    position: relative;
    padding: 4px 8px;
    background: transparent !important;
    border: none;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    user-select: none;
    /* 安卓 WebView 避免整块矩形高亮底 */
    border-radius: 0;
    box-shadow: none !important;
}
#main-box-container:active,
#main-box-container.cash-press {
    background: transparent !important;
    box-shadow: none !important;
    outline: none;
}
.cash-glow {
    position: absolute;
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    width: 88px;
    height: 64px;
    background: radial-gradient(ellipse, rgba(255, 201, 74, 0.28), transparent 72%);
    pointer-events: none;
    animation: glowPulse 2.5s ease infinite;
    z-index: 0;
}
.cash-img {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    display: block;
    background: transparent !important;
    filter: drop-shadow(0 10px 16px rgba(196, 154, 154, 0.35));
    animation: floatSoft 3s ease-in-out infinite;
    -webkit-tap-highlight-color: transparent;
    pointer-events: none; /* 点击落在容器上，避免 img 额外矩形 */
}
.cash-press .cash-img {
    animation: none;
    transform: scale(0.92);
}
.cash-press .cash-glow {
    opacity: 0.85;
}
.click-hint {
    font-size: 0.95rem;
    color: var(--c-rose);
    font-weight: bold;
    margin-top: 2px;
    background: rgba(255, 255, 255, 0.75);
    padding: 3px 14px;
    border-radius: var(--radius-pill);
    display: inline-block;
    animation: pulse 1.8s infinite;
    border: 1px solid rgba(255, 255, 255, 0.9);
    position: relative;
    z-index: 1;
}

#speech-bubbles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}
.speech-bubble {
    position: absolute;
    background: white;
    color: var(--c-rose);
    font-size: 1rem;
    padding: 4px 10px;
    border-radius: 12px 12px 12px 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: bubbleUp 1.5s ease-out forwards;
    white-space: nowrap;
    border: 1px solid rgba(255, 181, 197, 0.4);
}

.center-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.btn-gacha {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px 10px 14px;
    font-size: 1.15rem;
    font-family: inherit;
    background: linear-gradient(135deg, #ff8fab 0%, #ff6b9d 50%, #ff4d8d 100%);
    color: white;
    border: none;
    border-radius: var(--radius-pill);
    cursor: pointer;
    box-shadow:
        0 6px 0 #c71565,
        0 10px 24px rgba(255, 77, 141, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition: transform 0.12s, box-shadow 0.12s;
    font-weight: bold;
}
.btn-gacha img { filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.15)); }
.btn-gacha:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 #c71565, 0 14px 28px rgba(255, 77, 141, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.btn-gacha:not(:disabled):active {
    transform: translateY(5px);
    box-shadow: 0 1px 0 #c71565, 0 4px 12px rgba(255, 77, 141, 0.3);
}
.btn-gacha:disabled {
    background: linear-gradient(135deg, #ddd, #c8c8c8);
    box-shadow: 0 6px 0 #a0a0a0;
    cursor: not-allowed;
    opacity: 0.85;
}
.btn-coin-mini { margin-left: -2px; }

.ticket-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #fff9e0, #ffe8a3);
    color: var(--c-gold-deep);
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    border: 1.5px solid rgba(232, 163, 23, 0.4);
    box-shadow: 0 2px 8px rgba(232, 163, 23, 0.15);
}

/* ----- 右侧面板 ----- */
#side-panel {
    flex: 1.15;
    min-width: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.side-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    background: rgba(255, 255, 255, 0.35);
    padding: 4px;
    border-radius: 16px;
}
.tab-btn {
    flex: 1;
    padding: 8px 4px;
    border: none;
    border-radius: 12px;
    background: transparent;
    font-family: inherit;
    font-size: 0.88rem;
    cursor: pointer;
    color: var(--c-muted);
    transition: all 0.2s;
}
.tab-btn.active {
    background: white;
    color: var(--c-rose);
    box-shadow: 0 2px 10px rgba(255, 105, 180, 0.2);
    font-weight: bold;
}

.tab-panel { display: none; flex-direction: column; gap: 10px; }
.tab-panel.active { display: flex; }

#task-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.task-item {
    background: white;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 0.88rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(255, 240, 245, 0.9);
}
.task-item.done {
    background: linear-gradient(135deg, #f0fff6, #e8fff0);
    border-color: rgba(86, 197, 150, 0.3);
}
.task-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.task-check {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #f0ebe8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: white;
    flex-shrink: 0;
}
.task-item.done .task-check {
    background: linear-gradient(135deg, #6bc4a6, #56c596);
}
.task-label { flex: 1; }
.task-prog {
    font-size: 0.75rem;
    color: var(--c-muted);
    white-space: nowrap;
}
.task-item.done .task-prog { color: #27ae60; }
.task-bar {
    height: 5px;
    background: #f0ebe8;
    border-radius: 4px;
    overflow: hidden;
}
.task-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-peach), var(--c-rose));
    border-radius: 4px;
    transition: width 0.3s ease;
}
.task-item.done .task-bar-fill {
    background: linear-gradient(90deg, var(--c-mint), var(--c-mint-deep));
}

.btn-primary {
    padding: 10px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    background: linear-gradient(135deg, #a8e6cf, #56c596);
    color: white;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    box-shadow: 0 4px 0 #3d9b74, inset 0 1px 0 rgba(255, 255, 255, 0.35);
    margin-top: 4px;
}
.btn-primary:disabled {
    background: #d8d4d8;
    box-shadow: 0 4px 0 #b0acb0;
    cursor: not-allowed;
}
.btn-primary:not(:disabled):active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #3d9b74;
}

.shop-items { display: flex; flex-direction: column; gap: 10px; }
.shop-item {
    display: flex;
    align-items: center;
    background: white;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
    border: 1.5px solid transparent;
    transition: all 0.2s;
}
.shop-item:hover { border-color: var(--c-peach); }
.shop-item.purchased-flash {
    transform: scale(1.02);
    border-color: var(--c-peach-deep);
    box-shadow: 0 0 16px rgba(255, 143, 171, 0.35);
}

.item-icon {
    font-size: 1.6rem;
    margin-right: 10px;
    background: linear-gradient(145deg, #fff6e9, #ffe0ec);
    width: 48px;
    height: 48px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 -2px 6px rgba(255, 143, 171, 0.15);
}
.item-info { flex: 1; min-width: 0; }
.item-info h4 { color: var(--c-rose); margin-bottom: 2px; font-size: 0.95rem; }
.item-info p { font-size: 0.78rem; color: var(--c-muted); }
.item-info .cost {
    font-weight: bold;
    color: var(--c-gold-deep);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 3px;
}

.btn-buy {
    padding: 7px 12px;
    background: linear-gradient(135deg, var(--c-sky), var(--c-sky-deep));
    color: white;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: bold;
    box-shadow: 0 3px 0 #5aafd0;
    flex-shrink: 0;
}
.btn-buy:active:not(:disabled) {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #5aafd0;
}
.btn-buy:disabled {
    background: #d0ccd0;
    box-shadow: 0 3px 0 #b0acb0;
    cursor: not-allowed;
}

.deco-list { display: flex; flex-direction: column; gap: 10px; }
.deco-card {
    display: flex;
    align-items: center;
    background: white;
    padding: 12px;
    border-radius: 16px;
    border: 2px solid transparent;
    gap: 10px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.deco-card.active {
    border-color: var(--c-peach-deep);
    box-shadow: 0 0 14px rgba(255, 143, 171, 0.25);
}
.deco-swatch {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.deco-swatch-cream {
    background: linear-gradient(145deg, #fff5f0, #ffd6e4);
}
.deco-swatch-starry {
    background:
        radial-gradient(circle at 30% 30%, #ffe8a3 0 2px, transparent 3px),
        linear-gradient(145deg, #1e1a3a, #6b4d8a);
}
.deco-swatch-berry {
    background: linear-gradient(145deg, #ffd6e8, #ff6b9d);
}
.deco-info { flex: 1; }
.deco-info h4 { color: var(--c-rose); font-size: 0.95rem; }
.deco-info p { font-size: 0.78rem; color: var(--c-muted); }
.deco-info .cost { color: var(--c-gold-deep); font-weight: bold; }

.btn-deco {
    padding: 6px 12px;
    background: linear-gradient(135deg, var(--c-lavender), var(--c-lilac));
    color: white;
    border: none;
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    box-shadow: 0 3px 0 #8a70c0;
}
.btn-deco:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 #8a70c0;
}

/* ----- 飘字 / Toast ----- */
/* 用视口坐标（clientX/Y），固定铺满屏幕，避免被场景 overflow 裁掉 */
#floating-texts {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 500;
    overflow: visible;
}
.floating-text {
    position: absolute;
    color: var(--c-gold-deep);
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 0 1px 0 #fff, 0 2px 4px rgba(232, 163, 23, 0.35);
    pointer-events: none;
    animation: floatUp 1s ease-out forwards;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 2px;
}

#toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.96);
    color: var(--c-rose);
    padding: 12px 24px;
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(255, 105, 180, 0.28);
    border: 1.5px solid rgba(255, 181, 197, 0.7);
    z-index: 2000;
    font-size: 1.02rem;
    max-width: 90%;
    text-align: center;
    animation: toastIn 0.3s ease;
    backdrop-filter: blur(8px);
}
#toast.hidden { display: none; }

/* ----- 开盲盒弹窗 ----- */
#gacha-modal {
    position: fixed;
    inset: 0;
    background: rgba(255, 248, 252, 0.82);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s;
}
#gacha-modal:not(.hidden) {
    opacity: 1;
    visibility: visible;
}
#gacha-modal.uncommon-flash {
    background: rgba(230, 255, 240, 0.9);
}
#gacha-modal.rare-flash {
    background: rgba(230, 240, 255, 0.9);
}
#gacha-modal.epic-flash {
    background: rgba(245, 230, 255, 0.94);
    animation: epicPulse 0.55s ease infinite alternate;
}
#gacha-modal.legendary-flash {
    background: radial-gradient(circle at 50% 40%, rgba(255, 250, 200, 0.98), rgba(255, 220, 140, 0.92));
    animation: legendaryPulse 0.55s ease infinite alternate;
}
@keyframes epicPulse {
    from { filter: brightness(1); }
    to { filter: brightness(1.08) saturate(1.15); }
}

.modal-content {
    background: linear-gradient(165deg, #ffffff 0%, #fff8fb 100%);
    padding: 32px 36px;
    border-radius: 36px;
    text-align: center;
    box-shadow:
        0 24px 60px rgba(255, 105, 180, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.9),
        inset 0 1px 0 #fff;
    border: 3px solid rgba(255, 181, 197, 0.7);
    min-width: 300px;
    position: relative;
    z-index: 1001;
}

#gacha-box-anim {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    filter: drop-shadow(0 12px 20px rgba(255, 107, 157, 0.35));
}
.gacha-stage-shake #gacha-box-anim {
    animation: boxShake 0.95s ease;
}
.gacha-opening-text {
    margin-top: 12px;
    color: var(--c-muted);
    font-size: 1rem;
}

.reveal-frame {
    width: 140px;
    height: 140px;
    margin: 12px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(145deg, #fff6e9, #ffe0ec);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}
.reveal-frame.rarity-common {
    box-shadow: 0 0 0 3px #c8c4cc, 0 8px 24px rgba(0, 0, 0, 0.08);
}
.reveal-frame.rarity-uncommon {
    box-shadow: 0 0 0 3px #6ecb8a, 0 0 22px rgba(110, 200, 140, 0.45);
}
.reveal-frame.rarity-rare {
    box-shadow: 0 0 0 3px var(--rarity-rare), 0 0 28px rgba(110, 168, 255, 0.5);
}
.reveal-frame.rarity-epic {
    box-shadow: 0 0 0 4px #b07cff, 0 0 32px rgba(176, 124, 255, 0.65);
    background: linear-gradient(145deg, #faf0ff, #e8d0ff);
}
.reveal-frame.rarity-legendary {
    box-shadow: 0 0 0 5px #ffc94a, 0 0 40px rgba(255, 201, 74, 0.75), 0 0 60px rgba(255, 140, 60, 0.4);
    background: linear-gradient(145deg, #fffef5, #ffe8a3, #ffd060);
    animation: legendaryPulse 0.8s ease infinite alternate;
}
.reveal-shine {
    position: absolute;
    inset: -20%;
    background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
    animation: shineSweep 1.8s ease infinite;
}
#gacha-result-icon {
    width: 110px;
    height: 110px;
    object-fit: contain;
    border-radius: 0;
    background: transparent;
    position: relative;
    z-index: 1;
    animation: popIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
}
.brand-logo,
#gacha-box-anim {
    object-fit: contain;
    border-radius: 12px;
}
.cash-img {
    object-fit: contain;
    border-radius: 0 !important; /* 收银箱已抠透明底，不要圆角白底框 */
    background: transparent !important;
}
.stat-chip img,
.btn-gacha img,
.item-info .cost img {
    object-fit: contain;
    border-radius: 50%;
}

#gacha-title {
    color: var(--c-rose);
    font-size: 1.5rem;
}
#gacha-pet-name {
    font-size: 1.5rem;
    color: var(--c-ink);
    margin-bottom: 6px;
}
.rarity-pill {
    font-size: 0.95rem;
    padding: 4px 16px;
    border-radius: var(--radius-pill);
    display: inline-block;
    margin-bottom: 10px;
    font-weight: bold;
    background: #eee;
    color: var(--c-ink);
}
.rarity-pill.rarity-common { background: #ebe8ee; color: #777; }
.rarity-pill.rarity-uncommon { background: linear-gradient(90deg, #d8f5e2, #b8ebc8); color: #2a8a4a; }
.rarity-pill.rarity-rare { background: linear-gradient(90deg, #d0e4ff, #b0d0ff); color: #2a5fbf; }
.rarity-pill.rarity-epic { background: linear-gradient(90deg, #edd8ff, #d4b0ff); color: #6b2fbf; font-weight: bold; }
.rarity-pill.rarity-legendary {
    background: linear-gradient(90deg, #ffe8a3, #ffc94a);
    color: #9a6200;
    box-shadow: 0 0 12px rgba(255, 201, 74, 0.45);
}
.gacha-extra {
    font-size: 0.9rem;
    color: var(--c-muted);
    margin-bottom: 16px;
    min-height: 1.2em;
}

#btn-close-modal {
    padding: 10px 28px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--c-peach), var(--c-peach-deep));
    color: white;
    border: none;
    border-radius: 18px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 0 #e86a90, inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
#btn-close-modal:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #e86a90;
}

.hidden { display: none !important; }

/* ----- 动画 ----- */
@keyframes floatSoft {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.04); opacity: 1; }
}
@keyframes pulseDot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.85); }
}
@keyframes floatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-72px) scale(1.25); }
}
@keyframes popIn {
    0% { transform: scale(0) rotate(-160deg); opacity: 0; }
    75% { transform: scale(1.12) rotate(8deg); }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes pokeBounce {
    0% { transform: scale(1); }
    40% { transform: scale(1.28); }
    100% { transform: scale(1); }
}
@keyframes bubbleUp {
    0% { opacity: 1; transform: translateY(0) scale(0.85); }
    100% { opacity: 0; transform: translateY(-36px) scale(1.08); }
}
@keyframes boxShake {
    0%, 100% { transform: rotate(0) scale(1); }
    15% { transform: rotate(-16deg) scale(1.05); }
    30% { transform: rotate(16deg) scale(1.1); }
    45% { transform: rotate(-12deg) scale(1.05); }
    60% { transform: rotate(12deg) scale(1.12); }
    75% { transform: rotate(-6deg) scale(1.08); }
    90% { transform: rotate(6deg) scale(1.15); }
}
@keyframes legendaryPulse {
    from { box-shadow: inset 0 0 40px rgba(255, 201, 74, 0.15); }
    to { box-shadow: inset 0 0 80px rgba(255, 201, 74, 0.4); }
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(12px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -16px) scale(1.06); }
}
@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes shineSweep {
    0% { transform: translateX(-60%) rotate(15deg); }
    100% { transform: translateX(60%) rotate(15deg); }
}

/* ----- 手机竖屏优先 ----- */
body {
    align-items: stretch !important;
}
#game-container {
    width: 100% !important;
    max-width: 430px !important;
    height: 100dvh !important;
    min-height: 100vh;
    border-radius: 0 !important;
    margin: 0 auto;
}
#shop-floor-area {
    order: 1;
    flex: 1 1 auto !important;
    min-height: 42dvh !important;
    display: flex;
    flex-direction: column;
}
#shop-floor {
    flex: 1 !important;
    min-height: 280px !important;
}
#side-panel {
    order: 3;
    flex: 0 0 auto;
    max-height: 38dvh;
    min-height: 180px;
    overflow-y: auto;
}
#event-layer {
    pointer-events: none !important;
    z-index: 12;
}
.event-actor {
    pointer-events: auto !important;
}
#actors-layer {
    z-index: 8 !important;
    min-height: 140px !important;
    flex: 1 !important;
    touch-action: manipulation;
}
.floor-actor {
    width: 72px !important;
    height: 80px !important;
    z-index: 10 !important;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.floor-actor .actor-body,
.floor-actor .actor-body img {
    pointer-events: none; /* 点击落在父级 floor-actor 上，面积更大 */
}
.floor-pet .actor-body img {
    width: 56px !important;
    height: 56px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.floor-customer {
    width: 78px !important;
    height: 96px !important;
}
.floor-customer .actor-body img {
    width: 70px !important;
    height: 80px !important;
    object-fit: contain !important;
    border-radius: 0 !important;
    background: transparent !important;
}
.poke-flash {
    animation: pokeFlash 0.35s ease !important;
}
@keyframes pokeFlash {
    0% { transform: scale(1); filter: brightness(1); }
    40% { transform: scale(1.2); filter: brightness(1.25); }
    100% { transform: scale(1); filter: brightness(1); }
}
.cash-img {
    width: 88px !important;
    height: 88px !important;
    border-radius: 0 !important;
    background: transparent !important;
    object-fit: contain !important;
}
.click-hint {
    margin-bottom: 4px;
}

@media (min-width: 480px) {
    #game-container {
        max-width: 390px !important;
        height: min(844px, 96dvh) !important;
        border-radius: 24px !important;
        margin: 2vh auto;
    }
}