/* --- 【全新】来电界面样式 --- */
.incoming-call-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 9998; /* 层级极高 */
    display: none; /* 默认隐藏 */
    color: #fff;
}
.incoming-call-background {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #2c3e50;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.6);
    transform: scale(1.1);
}
.incoming-call-actions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding-bottom: 50px;
}
.incoming-action-item {
    text-align: center;
}
.incoming-action-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.incoming-action-btn.decline {
    background-color: #FF3B30;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91'%3E%3C/path%3E%3C/svg%3E");
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(135deg);
}
.incoming-action-btn.accept {
    background-color: #34C759;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
    background-size: 35px;
    background-repeat: no-repeat;
    background-position: center;
}
.incoming-action-item span {
    font-size: 16px;
    font-weight: 500;
}
/* --- 【全新】温馨小屋 (Pet House) 样式 --- */
#ph-tabs .ph-tab-btn {
    flex: 1;
    padding: 12px;
    border: none;
    background: none;
    font-size: 16px;
    font-weight: 500;
    color: var(--secondary-text);
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
#ph-tabs .ph-tab-btn.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.ph-content .creature-display {
    text-align: center;
    margin-bottom: 20px;
}
.ph-content .creature-image {
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin-bottom: 10px;
    /* filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1)); */ /* 给宠物加点阴影 */
}
.ph-content .creature-name {
    font-size: 18px;
    font-weight: 600;
}
.ph-content .creature-species {
    font-size: 14px;
    color: var(--secondary-text);
}

.ph-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.ph-status-bar label {
    width: 60px;
    font-size: 14px;
}
.ph-status-bar .progress-bg {
    flex-grow: 1;
    height: 12px;
    background-color: #eee;
    border-radius: 6px;
    overflow: hidden;
}
.ph-status-bar .progress-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.3s ease;
}

.ph-section h4 {
    margin: 10px 0 8px 0;
    font-size: 15px;
    color: var(--secondary-text);
}
.ph-log-box, .ph-inventory-box {
    max-height: 100px;
    overflow-y: auto;
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
}
.ph-log-box p {
    margin: 0 0 4px;
    color: #666;
}
.ph-inventory-box .inventory-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
}

/* 商店样式 */
#shop-items-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}
.shop-item {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
}
.shop-item-icon {
    font-size: 28px;
}
.shop-item-name {
    font-weight: 500;
    margin: 8px 0;
}
.shop-item-desc {
    font-size: 12px;
    color: var(--secondary-text);
    min-height: 30px;
}
.shop-item-buy-btn {
    width: 100%;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background-color: var(--accent-color);
    color: white;
    cursor: pointer;
    margin-top: 10px;
}
#ph-main-view {
    flex-grow: 1;          /* 关键：让这个区域占据所有可用空间 */
    display: flex;         /* 关键：让它内部的元素也使用 flex 布局 */
    flex-direction: column;/* 关键：内部元素垂直排列 */
    overflow: hidden;      /* 关键：防止内部内容溢出到弹窗外 */
    min-height: 0;         /* 一个 flexbox 布局的“魔法”属性，增强稳定性 */
}
/* 3. 让 Tab 切换栏高度固定，不被压缩 */
#ph-tabs {
    flex-shrink: 0;
}
/* 4. 【核心修复】让滚动区域占据所有“剩余”空间，并允许其内容滚动 */
#ph-scroll-wrapper {
    flex-grow: 1;         /* 关键：让这个滚动区域填满 #ph-main-view 中除了 Tab 和按钮之外的所有空间 */
    overflow-y: auto;     /* 关键：当内容超出其高度时，自动显示垂直滚动条 */
    min-height: 0;        /* 关键：flexbox 魔法，防止其内容撑破布局 */
}
/* 5. 让商店按钮高度固定，不被压缩，并加上一点上边距 */
#ph-open-shop-btn {
    flex-shrink: 0;     /* 关键：确保按钮不会被压缩 */
    margin-top: 15px;   /* 和上方滚动区域拉开一点距离 */
}