/* 房间布局样式 */

@font-face {
    font-family: 'Knewave';
    src: url('/font/Knewave-Regular.ttf') format('truetype');
    font-display: swap; /* Lighthouse优化：避免字体阻塞渲染 */
}

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

/* 全局禁用文本选择和复制（输入框除外） */
* {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 允许输入框复制和选择 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* 移除移动端按钮的默认按压高亮效果 */
button,
a,
.btn,
[role="button"],
input[type="button"],
input[type="submit"] {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

html {
    background: #fff;  /* 默认背景放到html */
}

@media (prefers-color-scheme: dark) {
    html {
        background: #1a1a1a;
    }
}

body {
    font-family: 'Courier New', monospace;
    background: transparent;  /* body透明，让Canvas可见 */
    color: #000;
    min-height: 100vh;
    overflow: hidden; /* 固定显示区域，禁止滚动 */
    position: relative;
    -webkit-user-select: none; /* 禁止文字选中 */
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 绘画背景样式 - 更新时间: 2025-10-10-18:30 */
/* 所有设备统一：完整居中显示 */
body.has-painting {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    background-size: contain !important; /* 统一使用contain保持完整显示和居中 */
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    body {
        color: #fff;
    }
}

/* 左上角房间信息组（包含牢房编号+窥探统计） */
.room-info-group {
    position: fixed;
    top: clamp(20px, 2.08vw, 40px); /* 40/1920=2.08% */
    left: clamp(30px, 3.125vw, 60px); /* 60/1920=3.125% */
    z-index: 100;
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: flex-start; /* 左对齐 */
    gap: 10px; /* 固定间距10px */
}

/* 房间标题 */
.room-title {
    background: url('/images/button/cell_number.svg') center center no-repeat;
    background-size: contain;
    /* 素材378×80,比例4.725:1 */
    width: clamp(189px, 19.69vw, 378px); /* 按80px高度的比例计算 */
    height: clamp(40px, 4.17vw, 80px);
    padding: 0 clamp(20px, 2.08vw, 40px);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.room-title-text {
    font-family: 'Knewave', sans-serif;
    font-size: clamp(20px, 2.08vw, 40px);
    font-weight: bold;
    color: #000;
    white-space: nowrap;
}

/* 用户统计信息（窥探、连续登录、宣言、减刑） */
.user-stats {
    font-family: 'Courier New', monospace;
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: 1.5;
    color: #666;
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 6px; /* 内容间距6px */
    margin-top: 20px; /* 距离房间标题20px */
}

.user-stats-item {
    white-space: nowrap;
}

/* 窥探达到上限时的高亮样式 */
.user-stats-item.max-reached {
    color: #ff5555;
    font-weight: bold;
}

/* 绘画模式下隐藏统计信息 */
body.paint-mode .user-stats {
    display: none !important;
}

/* 顶部按钮组 */
.top-buttons {
    position: fixed;
    top: clamp(20px, 2.08vw, 40px); /* 40/1920=2.08% */
    right: clamp(30px, 3.125vw, 60px); /* 60/1920=3.125% - 与左侧牢房编号一致 */
    display: flex;
    gap: clamp(10px, 1.04vw, 20px); /* 20/1920=1.04% */
    z-index: 100;
}

.top-buttons.hidden {
    display: none;
}

.top-btn {
    width: auto;
    height: clamp(42px, 4.22vw, 81px);
    flex-shrink: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Knewave', sans-serif;
    font-size: clamp(20px, 2.08vw, 40px);
    color: #000;
    transition: transform 0.2s ease;
}

/* 桌面端hover效果（仅支持hover的设备） */
@media (hover: hover) {
    .top-btn:hover {
        transform: scale(1.15);
    }
}

.top-btn:active {
    transform: scale(0.8);
}

.fish-shop-btn {
    background-image: url('/images/button/shop.svg');
    background-color: transparent; /* 确保无背景颜色 */
}

.back-hall-btn {
    background-image: url('/images/button/back.svg'); /* 统一使用back.svg */
    background-color: transparent; /* 确保无背景颜色 */
    font-size: 0; /* 隐藏文字 */
    color: transparent;
    padding: 0;
    justify-content: center;
    /* back.svg素材尺寸81×80 */
    width: clamp(42px, 4.22vw, 81px); /* 81/1920=4.22% */
    height: clamp(42px, 4.17vw, 80px); /* 80/1920=4.17% */
}

@media (prefers-color-scheme: dark) {
    .back-hall-btn {
        color: #000 !important;
    }
}

.fish-icon {
    width: clamp(44px, 3.44vw, 66px); /* 66/1920=3.44% */
    height: clamp(16px, 1.25vw, 24px); /* 24/1920=1.25% */
    background: url('/images/icon/fish.svg') center center no-repeat;
    background-size: 100% 100%;
    margin-right: clamp(4px, 0.42vw, 8px); /* 8/1920=0.42% */
}

.fish-count {
    font-family: 'Knewave', sans-serif;
    font-size: clamp(16px, 1.25vw, 24px); /* 24/1920=1.25% */
    color: #000;
}

@media (prefers-color-scheme: dark) {
    .top-btn {
        color: #fff;
    }
}

/* 底部功能区域（宣言+功能按钮，左右对齐布局） */
.bottom-container {
    position: fixed;
    bottom: 2.08vw; /* 40/1920=2.08% - 使用纯百分比 */
    left: clamp(30px, 3.125vw, 60px); /* 60/1920=3.125% - 与牢房编号左对齐 */
    right: clamp(30px, 3.125vw, 60px); /* 60/1920=3.125% - 与回大厅右对齐，保证右侧安全距离 */
    z-index: 100;
    display: none;
    flex-direction: row; /* 横向布局 */
    flex-wrap: nowrap; /* 不换行 */
    align-items: center; /* 垂直居中 */
    justify-content: flex-start; /* 从左开始排列，使用gap控制间距 */
    gap: clamp(10px, 1.04vw, 20px); /* 20/1920=1.04% - 四个组件间距均分 */
}

.bottom-container.show {
    display: flex;
}

/* 功能按钮组（水平排列） */
.function-buttons {
    display: flex;
    flex-direction: row;
    gap: clamp(10px, 1.04vw, 20px); /* 20/1920=1.04% - 与底部容器gap一致，实现均分 */
    align-items: center;
    flex-shrink: 0;
    flex: 1; /* 占据剩余空间 */
    justify-content: flex-end; /* 内容靠右对齐 */
}

.function-btn {
    /* 素材164×81,比例2.02:1 */
    width: clamp(85px, 8.54vw, 164px);
    height: clamp(42px, 4.22vw, 81px); /* 响应式高度，最小42px，最大81px */
    flex-shrink: 0;
    background: url('/images/button/button_room_day.svg') center center no-repeat;
    background-size: contain;
    background-color: transparent; /* 确保无背景颜色 */
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: 'Knewave', sans-serif;
    font-size: clamp(20px, 2.08vw, 40px);
    font-weight: bold;
    color: #000;
    transition: transform 0.2s ease;
    position: relative; /* 为红点提供定位参考 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 功能按钮红点 */
.function-btn-badge {
    position: absolute;
    top: clamp(2px, 0.42vw, 8px);
    right: clamp(2px, 0.42vw, 8px);
    width: clamp(16px, 1.25vw, 24px);
    height: clamp(16px, 1.25vw, 24px);
    background: #ff4444;
    border-radius: 50%;
    z-index: 200;
    display: none; /* 默认隐藏 */
    pointer-events: none; /* 不阻挡点击 */
}

.function-btn-badge.show {
    display: block !important;
}

@media (prefers-color-scheme: dark) {
    .function-btn {
        background-image: url('/images/button/button_room_night.svg');
        color: #fff;
    }
}

/* 狱友和背包选中态 */
.function-btn.active {
    background-image: url('/images/button/buttonfill_room_day.svg');
    color: #fff !important; /* 日间模式选中态：黑色填充素材用白字 */
    transform: scale(1); /* 重置transform，防止一直放大 */
}

@media (prefers-color-scheme: dark) {
    .function-btn.active {
        background-image: url('/images/button/buttonfill_room_night.svg');
        color: #000 !important; /* 暗色模式选中态：白色填充素材用黑字 */
    }
}

/* 桌面端hover效果（仅支持hover的设备），但不影响active状态 */
@media (hover: hover) {
    .function-btn:hover:not(.active) {
        transform: scale(1.15);
    }
}

/* 移动端按压反馈（所有设备），但不影响active状态 */
.function-btn:active:not(.active) {
    transform: scale(0.8);
}

/* 小屏适配：宽度缩小，宣言可压缩 */
@media (max-width: 800px) {
    .bottom-container {
        left: clamp(20px, 4vw, 30px); /* 移动端左侧间距 */
        right: clamp(20px, 4vw, 30px); /* 移动端右侧间距 */
    }
    
    .declaration-bar {
        flex-shrink: 1; /* 允许收缩 */
    }
    
    .function-buttons {
        flex-shrink: 0; /* 按钮区域不收缩 */
    }
}

/* 极小屏适配：420px以下切换双行布局 */
@media (max-width: 420px) {
    .bottom-container {
        flex-direction: column; /* 改为垂直布局 */
        align-items: stretch; /* 拉伸对齐 */
        gap: 10px; /* 上下间距 */
        left: 20px;
        right: 20px;
    }
    
    .declaration-bar {
        width: 100%; /* 宣言条占满一行 */
        order: 1; /* 第一行：宣言 */
    }
    
    .function-buttons {
        width: 100%;
        order: 2; /* 第二行：三个按钮 */
        justify-content: space-between; /* 左右两端对齐 */
        gap: 0; /* 去掉间距，让左右button顶到边缘 */
    }
    
    /* 左侧button顶到左边缘 */
    .function-btn:first-child {
        margin-right: auto; /* 推到最左 */
    }
    
    /* 右侧button顶到右边缘 */
    .function-btn:last-child {
        margin-left: auto; /* 推到最右 */
    }
    
    /* 中间button居中 */
    .function-btn:nth-child(2) {
        margin: 0 auto;
    }
}