/* 全局样式 */
body {
    /*background-color: #8f0002;*/
    /* 设置背景颜色，与 .monopoly 背景一致，深红色 */
    margin: 0;
    /* 移除默认边距 */
}

/* 灵活布局类 */
.flex {
    display: flex;
    /* 使用 Flexbox 布局 */
}

.items-center {
    align-items: center;
    /* 垂直居中 */
    justify-content: space-between;
    /* 水平两端对齐 */
}

.items-end {
    align-items: flex-end;
    /* 垂直底部对齐 */
}

.items-start {
    align-items: flex-start;
    /* 垂直顶部对齐 */
}

.justify-between {
    justify-content: space-between;
    /* 水平两端对齐 */
}

.justify-center {
    justify-content: center;
    /* 水平居中 */
}

/* 主容器样式 */
.monopoly {
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列子元素 */
    align-items: center;
    /* 水平居中 */
    background-color: #8f0002;
    /* 背景颜色，深红色 */
    color: #fff;
    /* 文字颜色，白色 */
    font-family: Arial, sans-serif;
    /* 字体设置 */
    flex-grow: 1;
    /* 填充剩余空间 */
    position: relative;
    /* 相对定位，方便子元素绝对定位 */
    width: 100vw;
    /* 宽度占满视口 */
    min-height: 100vh;
    /* 最小高度为视口高度 */
    /* padding-bottom: 8vw; 注释掉，覆盖 go-button 的 -7.5vw 定位 */
}

/* 起始和结束图标样式 */
.start-icon {
    position: absolute;
    /* 绝对定位 */
    left: 5vw;
    /* 距离左侧 5vw */
    width: 7vw;
    /* 宽度 7vw */
    height: auto;
    /* 高度自适应 */
    bottom: -2.5vw;
    /* 距离底部 -2.5vw */
}

.end-icon {
    position: absolute;
    /* 绝对定位 */
    right: 5.7vw;
    /* 距离右侧 5.7vw */
    width: 7vw;
    /* 宽度 7vw */
    bottom: -2.5vw;
    /* 距离底部 -2.5vw */
    height: auto;
    /* 高度自适应 */
}

/* 得分面板样式 */
.score-panel {
    width: 10.5vw;
    /* 宽度 10.5vw */
    height: auto;
    /* 高度自适应 */
}

.score-panel-wrapper {
    position: absolute;
    /* 绝对定位 */
    bottom: -5%;
    /* 距离底部 -5% */
    left: 30%;
    /* 距离左侧 30% */
    color: #8F0002;
    /* 文字颜色，深红色 */
    font-size: 0.8vw;
    /* 字体大小 0.8vw */
}

.score-panel-wrapper .now-score {
    position: absolute;
    /* 绝对定位 */
    top: 20%;
    /* 距离顶部 20% */
    left: 50%;
    /* 距离左侧 50% */
    transform: translateX(-50%);
    /* 水平居中 */
    width: 7vw;
    /* 宽度 7vw */
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: space-between;
    /* 水平两端对齐 */
    align-items: center;
    /* 垂直居中 */
    gap: 0.3vw;
    /* 子元素间距 */
}

.score-panel-wrapper .score-item {
    background-color: #F0F0F0;
    /* 背景色，浅灰 */
    flex: 1;
    /* 平均分配空间 */
    justify-content: center;
    /* 水平居中 */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
    padding: 0.3vw 0;
    /* 上下内边距 */
    border-radius: 31px;
    /* 圆角 */
}

.score-panel-wrapper .now-gold {
    position: absolute;
    /* 绝对定位 */
    top: 37%;
    /* 距离顶部 37% */
    left: 50%;
    /* 距离左侧 50% */
    transform: translateX(-50%);
    /* 水平居中 */
    width: 7vw;
    /* 宽度 7vw */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
}

/* 头部样式 */
.header {
    background: url('/static/images/snatch/bg.png') no-repeat center / 100%;
    /* 背景图片 */
    background-size: cover;
    /* 背景图片覆盖 */
    width: 100%;
    /* 宽度占满 */
    height: 51vw;
    /* 高度 51vw */
    margin-left: -1px;
    /* 微调位置 */
    position: absolute;
    /* 绝对定位 */
    z-index: 0;
    max-height: 100%;
}

/* 弹窗背景样式 */
.popup_bg {
    background: url('/static/images/snatch/popup_bg.png') center center;
    /* 背景图片 */
    background-size: cover;
    /* 背景图片覆盖 */
    width: 100%;
    /* 宽度占满 */
    height: 5vw;
    /* 高度 5vw */
    position: absolute;
    /* 绝对定位 */
    z-index: 2;
    /* 层级 2 */
    left: 50%;
    /* 水平居中 */
    top: 40%;
    /* 顶部对齐 */
    transform: translate(-50%, -85%);
    /* 微调位置 */
    animation: float-up-down 1.5s ease-in-out infinite;
    /* 浮动动画 */
}

/* 单元格内部包装器样式 */
.cell-inner-wrapper {
    position: relative;
    /* 相对定位 */
    width: 100%;
    /* 宽度占满 */
    height: 100%;
    /* 高度占满 */
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
    /* 垂直居中 */
}

/* 浮动动画定义 */
@keyframes float-up-down {
    0% {
        transform: translate(-50%, -85%);
    }

    /* 起始位置 */
    50% {
        transform: translate(-50%, -90%);
    }

    /* 中间位置 */
    100% {
        transform: translate(-50%, -85%);
    }

    /* 结束位置 */
}

/* 单元格图标样式 */
.cell-inner-wrapper .record-icon {
    width: 4vw;
    /* 宽度 4vw */
    height: 4vw;
    /* 高度 4vw */
    position: absolute;
    /* 绝对定位 */
    left: 50%;
    /* 水平居中 */
    top: 50%;
    /* 垂直居中 */
    transform: translate(-50%, -50%);
    /* 居中调整 */
}

/* 奖励数字样式 */
.cell-inner-wrapper .reward-num {
    /* 粗体 */
    position: absolute;
    /* 绝对定位 */
    right: 3px;
    /*right: -15%;*/
    /* 距离右侧 -15% */
    font-family: YEFONTAoYeHei,SourceHanSansCN, Monts-NotoSansSC, sans-serif;
    font-weight: 400;
    font-size: 23px;
    text-align: center;
    color: #FF9807;
}

/* 高亮背景样式 */
.light-bg {
    background: url('/static/images/snatch/light_bg.png') center center;
    /* 背景图片 */
    background-size: cover;
    /* 背景图片覆盖 */
    width: 100%;
    /* 宽度占满 */
    height: 4vw;
    /* 高度 4vw */
    position: absolute;
    /* 绝对定位 */
    z-index: 1;
    /* 层级 1 */
    left: 50%;
    /* 水平居中 */
    transform: translate(-45%, -15%);
    /* 微调位置 */
}

/* 标题标志样式 */
.title-logo {
    width: auto;
    /* 宽度自适应 */
    height: 17vw;
    /* 高度 17vw */
    margin-left: 4vw;
    /* 左侧外边距 */
    margin-top: 10px;
    /* 顶部外边距 */
}

.header-img {
    width: auto;
    /* 宽度自适应 */
    height: 22vw;
    /* 高度 22vw */
    margin-top: 100px;
    /* 顶部外边距 */
}

/* 定位类 */
.relative {
    position: relative;
}

/* 相对定位 */
.absolute {
    position: absolute;
}

/* 绝对定位 */

/* 规则包装器样式 */
.box-rule-wrapper {
    width: 100%;
    /* 宽度占满 */
    height: 75vw;
    /* 高度 75vw */
    background: url(/static/images/snatch/box_rule_bg_1.png);
    /* 背景图片 */
    background-size: cover;
    /* 背景图片覆盖 */
    margin-top: 5vw;
    /* 顶部外边距 */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
    padding-top: 11vw;
    /* 顶部内边距 */
    flex-direction: column;
    /* 垂直排列 */
}

.box-rule-wrapper .box-text-title {
    color: #fedc38;
    /* 颜色，浅黄色 */
    font-weight: 600;
    /* 字体粗细 */
    font-size: 23px;
    /* 字体大小 */
    line-height: 220%;
    /* 行高 */
}

.box-rule-wrapper .box-text {
    color: #fff;
    /* 颜色，白色 */
    font-weight: 400;
    /* 字体粗细 */
    font-size: 16px;
    /* 字体大小 */
    line-height: 220%;
    /* 行高 */
}

/* 奖励记录样式 */
.reward-record {
    height: 31vw;
    /* 高度 31vw */
    width: 60%;
    /* 宽度 60% */
    backdrop-filter: blur(42px);
    /* 背景模糊 */
    background: #FFFFFF1F;
    /* 背景色，半透明白色 */
    background-color: rgba(255, 255, 255, 0.12);
    /* 备用背景色 */
    position: relative;
    /* 相对定位 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    border-radius: 10px;
    /* 圆角 */
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 水平居中 */
    margin-top: 2vw;
    /* 顶部外边距 */
    padding: 0vw 3.1vw;
    /* 左右内边距 */
    box-sizing: border-box;
    /* 包含内边距 */
}

.reward-record-items-wrapper {
    flex: 1;
    /* 填充剩余空间 */
    width: 100%;
    /* 宽度占满 */
    overflow: hidden;
    /* 防止内容溢出 */
    padding-top: 1vw;
    /* 与标题的间距 */
}

.reward-items {
    height: calc(100% - 6vw);
    /* 动态适配高度，减去标题高度 */
    overflow-y: auto;
    /* 启用垂直滚动 */
    padding: 0px 5px;
    /* 左右内边距 */
    box-sizing: border-box;
    /* 包含内边距 */
}

/* 自定义滚动条样式 */
.reward-items::-webkit-scrollbar {
    width: 6px;
    /* 滚动条宽度 */
}

.reward-items::-webkit-scrollbar-track {
    background: transparent;
    /* 滚动轨道背景 */
}

.reward-items::-webkit-scrollbar-thumb {
    background: #fff;
    /* 滚动块颜色 */
    border-radius: 10px;
    /* 圆角 */
    transition: background 0.3s ease;
    /* 过渡效果 */
}

.reward-items::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.6);
    /* 悬停高亮 */
}

/* 奖励记录项样式 */
.reward-record-item {
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: space-between;
    /* 水平两端对齐 */
    align-items: center;
    /* 垂直居中 */
    padding: 0.5vw 0;
    /* 上下内边距 */
    border-bottom: 1px solid #fff;
    /* 下边框 */
    color: #fff;
    /* 文字颜色 */
    font-size: 0.14rem;
    /* 字体大小 */
}

.reward-record-item .left {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    gap: 10px
    /* 垂直居中 */
}

.reward-record-item .left .avatar {
    width: 3.8vw;
    /* 宽度 */
    height: auto;
    /* 高度 */

    /* 右侧外边距 */
}

.reward-record-item .left .name {
    font-size: 16px;
    /* 字体大小 */
    font-weight: 600;

    /* 字体粗细 */
}

.reward-record-item .right {
    text-align: right;
    /* 文字右对齐 */
    font-size: 16px;
    /* 字体大小 */
}

/* 阴影背景 */
.reward-record::after {
    content: '';
    /* 伪元素内容 */
    position: absolute;
    /* 绝对定位 */
    bottom: 0;
    /* 底部对齐 */
    left: 0;
    /* 左侧对齐 */
    width: 100%;
    /* 宽度占满 */
    height: 5.5vw;
    /* 高度 */
    background: url(/static/images/snatch/shadow_bg.png);
    /* 背景图片 */
    background-size: cover;
    /* 背景图片覆盖 */
    pointer-events: none;
    /* 防止干扰点击 */
    z-index: 2;
    /* 层级 */
}

/* 文本包装器样式 */
.box-text-wrapper {
    width: 60%;
    /* 宽度 60% */
}

/* 规则框样式 */
.box-rule .title {
    height: 0.65rem;
    /* 高度 */
    position: absolute;
    /* 绝对定位 */
    left: 50%;
    /* 水平居中 */
    transform: translateX(-50%);
    /* 居中调整 */
}

.box-rule .rule {
    height: 4.09rem;
    /* 高度 */
    border-radius: 0.2rem;
    /* 圆角 */
    background: #aa323c;
    /* 背景色，深红 */
    margin: 0 auto;
    /* 水平居中 */
    padding: 0.32rem;
    /* 内边距 */
    font-size: 0.14rem;
    /* 字体大小 */
    color: #fff;
    /* 文字颜色 */
}

.box-rule .rule p {
    margin-bottom: 0.06rem;
    /* 段落间距 */
    line-height: 0.25rem;
    /* 行高 */
}

.box-rule .list {
    height: 0.5rem;
    /* 高度 */
    border-bottom: 1px solid #f17680;
    /* 下边框 */
    display: flex;
    /* 使用 Flexbox 布局 */
    justify-content: space-between;
    /* 水平两端对齐 */
    align-items: center;
    /* 垂直居中 */
}

.box-rule .list .avatar {
    width: 0.32rem;
    /* 宽度 */
    height: 0.32rem;
    /* 高度 */
    margin-right: 0.17rem;
    /* 右侧外边距 */
    margin-left: 0.1rem;
    /* 左侧外边距 */
}

.box-rule .list .name {
    color: #fff;
    /* 文字颜色 */
    font-size: 0.16rem;
    /* 字体大小 */
    font-weight: 500;
    /* 字体粗细 */
}

.box-rule .list .right {
    color: #fff;
    /* 文字颜色 */
    text-align: right;
    /* 文字右对齐 */
    font-size: 0.14rem;
    /* 字体大小 */
}

/* 路线包装器样式 */
.box-route-wrapper {
    position: relative;
    /* 相对定位，支持子元素定位 */
    width: 100vw;
    /* 宽度占满视口 */
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 水平居中 */
    margin-top: 8vw;
    /* 顶部外边距 */
}

.box-route {
    position: relative;
    /* 相对定位 */
    width: 100vw;
    /* 宽度占满视口 */
    margin-top: 0.4rem;
    /* 顶部外边距 */
    font-size: 0.24rem;
    /* 字体大小 */
}

.box-route-row {
    position: absolute;
    /* 绝对定位 */
    top: 60%;
    /* 距离顶部 60% */
    left: 50%;
    /* 距离左侧 50% */
    transform: translate(-50%, -60%);
    /* 居中调整 */
}

.box-route-row-wrapper {
    height: 100%;
    /* 高度占满 */
    width: 62vw;
    /* 宽度 62vw */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: flex-end;
    /* 垂直底部对齐 */
    position: relative;
    /* 相对定位 */
}

.box-bg {
    width: 100%;
    /* 宽度占满 */
    height: auto;
    /* 高度自适应 */
}

/* 弹出奖励窗口样式 */
.popup-award {
    position: absolute;
    /* 绝对定位 */
    left: 50%;
    /* 水平居中 */
    top: 45%;
    /* 距离顶部 45% */
    transform: translate(-50%, -50%);
    /* 居中调整 */
    width: 32vw;
    /* 宽度 */
    min-height: 15vw;
    /* 高度 */
    border-radius: 0.16rem;
    /* 圆角 */
    border: 5px solid #F6FF00;
    /* 边框 */
    background-color: rgba(80, 80, 80, 0.7);
    /* 半透明背景 */
    display: none;
    /* 默认隐藏 */
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 水平居中 */
    justify-content: space-around;
    /* 垂直均匀分布 */
    color: #fff;
    /* 文字颜色 */
    padding: 0.12rem 0;
    /* 上下内边距 */
    z-index: 100000;
    /* 最高层级 */
    backdrop-filter: blur(17.7px);
    /* 背景模糊 */
}

.popup-award.active {
    display: flex;
    /* 激活时显示 */
}

.popup-award .popup-contnt {
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 水平居中 */
    width: 100%;
    /* 宽度占满 */
}

.popup-award .text-medium {
    font-weight: 500;
    /* 字体粗细 */
}

.popup-award .text-yellow {
    color: #ffd600;
    /* 颜色，金黄色 */
    font-size: 24px;
    /* 字体大小 */
    font-weight: 600;
    /* 字体粗细 */
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 水平居中 */
    gap: 10px;
    /* 子元素间距 */
}

.popup-award .text-large {
    font-size: 2.6vw;
    /* 字体大小 */
    font-weight: 500;
    margin-bottom: 15px;
    /* 字体粗细 */
}

.popup-award .reward-item:not(:last-child) {
    margin-bottom: 1vw;
}

.popup-award .reward-item {
    display: flex;
    /* 使用 Flexbox 布局 */
    gap: 15px;
    /* 子元素间距 */
    line-height: 35px;
}

.popup-award .mt-10px {
    margin-top: 10px;
    /* 顶部外边距 */
}

/* 路线行样式 */
.route-row {
    display: flex;
    /* 使用 Flexbox 布局 */
}

.route-row.top-row {
    justify-content: space-between;
    /* 水平两端对齐 */
    flex-direction: row;
    /* 横向排列 */
}

.route-row.connection-row {
    justify-content: space-between;
    /* 水平两端对齐 */
    flex-direction: row-reverse;
    /* 反向横向排列 */
}

/* 路线列样式 */
.route-column {
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列 */
}

.route-column.left-column-up {
    justify-content: flex-end;
    /* 底部对齐 */
    flex-direction: column;
    /* 垂直排列 */
}

.route-column.left-column-down {
    justify-content: flex-start;
    /* 顶部对齐 */
    flex-direction: column;
    /* 垂直排列 */
}

.route-column.right-column {
    justify-content: flex-end;
    /* 底部对齐 */
    flex-direction: column;
    /* 垂直排列 */
}

.route-column.top-column {
    justify-content: flex-start;
    /* 顶部对齐 */
    flex-direction: column;
    /* 垂直排列 */
}

/* 路线单元格样式 */
.route-cell {
    width: 4.7vw;
    /* 宽度 */
    height: 5vw;
    /* 高度 */
    display: flex;
    /* 使用 Flexbox 布局 */
    flex-direction: column;
    /* 垂直排列 */
    align-items: center;
    /* 水平居中 */
    color: #000;
    /* 文字颜色 */
    font-size: 0.2rem;
    /* 字体大小 */
    border-radius: 8px;
    /* 圆角 */
    transition: background-color 0.5s ease;
    /* 背景颜色过渡 */
    position: relative;
    /* 相对定位 */
    background-size: cover !important;
    /* 背景图片覆盖 */

}

.route-cell.group_bg {
    background: url('/static/images/snatch/group_bg.png') no-repeat center;
    /* 背景图片 */
    background-size: cover;
    /* 背景图片覆盖 */
}

.route-cell.highlight {
    background-size: cover;
    /* 背景图片覆盖 */
    z-index: 2;
    /* 提高层级 */
}

.route-cell .cell-number {
    font-size: 0.24rem;
    /* 字体大小 */
    line-height: 1;
    /* 行高 */
}

.route-cell .cell-reward {
    font-size: 0.14rem;
    /* 字体大小 */
    line-height: 1;
    /* 行高 */
}

.route-cell .cell-icon {
    width: 0.32rem;
    /* 宽度 */
    height: 0.32rem;
    /* 高度 */
    font-size: 0.24rem;
    /* 字体大小 */
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
}

/* 骰子滚动动画 */
.dice.rolling {
    animation: diceRoll 0.2s ease-in-out infinite;
    /* 动画效果 */
}

@keyframes diceRoll {
    0% {
        transform: translateX(-50%) scale(1) rotate(0deg);
    }

    /* 起始状态 */
    50% {
        transform: translateX(-50%) scale(1.2) rotate(10deg);
    }

    /* 中间状态 */
    100% {
        transform: translateX(-50%) scale(1) rotate(0deg);
    }

    /* 结束状态 */
}

/* 可玩次数样式 */
.play-times {
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    width: 43vw;
    /* 宽度 */
    height: 7vw;
    /* 高度 */
    font-size: 2.1vw;
    /* 字体大小 */
    font-weight: 500;
    /* 字体粗细 */
    color: #fff;
    /* 文字颜色 */
    background: url('/static/images/snatch/play_times.png') no-repeat center / 100%;
    /* 背景图片 */
    background-size: cover;
    /* 背景图片覆盖 */
    position: absolute;
    /* 绝对定位 */
    bottom: -14vw;
    /* 距离底部 -14vw */
    font-family: YEFONTAoYeHei,SourceHanSansCN, Monts-NotoSansSC, sans-serif;
    /*line-height: 110px;*/
}
.play-times p{
    margin-top: 15px;
}
.play-times p span {
    color: #fff48f;
    /* 颜色，浅黄色 */
}

/* 重置样式 */
.reset {
    color: #ffd600;
    /* 颜色，金黄色 */
    font-size: 0.24rem;
    /* 字体大小 */
    text-align: center;
    /* 文字居中 */
    margin-top: 0.5rem;
    /* 顶部外边距 */
}

/* 通知容器 */
.notification-container {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  /*width: 90vw;*/
  max-width: 500px;
}

.notification-list {
  position: relative;
  width: 100%;
}

/* 单个通知 */
.notification {
  position: relative;
  background: linear-gradient(135deg, #ff4d4f, #ff8c1a);
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  margin-bottom: 10px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  max-width: 100%;
  overflow-wrap: break-word;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.3s ease;
  cursor: pointer;
}

.notification.active {
  opacity: 1;
  transform: translateY(0);
}

.notification:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
  transform: scale(1.02);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* 前往按钮样式 */
.go-button {
    width: 14.5vw;
    /* 宽度 */
    height: auto;
    /* 高度自适应 */
    position: absolute;
    /* 绝对定位 */
    bottom: -7.5vw;
    /* 距离底部 -7.5vw */
    left: 50%;
    /* 水平居中 */
    transform: translateX(-50%);
    /* 居中调整 */
    cursor: pointer;
    /* 鼠标悬停为手型 */
    z-index: 3;
    /* 层级 */
}

.each-score {
    width: 6vw;
    /* 宽度 */
    height: auto;
    /* 高度自适应 */
    position: absolute;
    /* 绝对定位 */
    bottom: 0.9vw;
    /* 距离底部 */
    left: 58.5%;
    /* 距离左侧 */
    transform: translateX(-58.5%);
    /* 微调位置 */
    z-index: 3;
    /* 层级 */
    font-size: 20px;
    /* 字体大小 */
}

/* 骰子包装器样式 */
.dice-wrapper {
    position: absolute;
    /* 绝对定位 */
    bottom: 0.8vw;
    /* 距离底部 */
    left: 50%;
    /* 水平居中 */
    transform: translateX(-50%);
    /* 居中调整 */
}

.dice-wrapper .dice-bg {
    width: 12vw;
    /* 宽度 */
    height: auto;
    /* 高度自适应 */
}

.dice-wrapper .dice {
    z-index: 1;
    /* 层级 */
    width: 6vw;
    /* 宽度 */
    height: auto;
    /* 高度自适应 */
    object-fit: contain;
    /* 图片自适应 */
    position: absolute;
    /* 绝对定位 */
    top: -5vw;
    /* 距离顶部 */
    left: 50%;
    /* 水平居中 */
    transform: translateX(-50%);
    /* 居中调整 */
}

/* 关闭弹窗按钮样式 */
.close-popup {
    width: 2vw;
    height: auto;
    /* 宽度 */
    position: absolute;
    /* 绝对定位 */
    top: -1vw;
    /* 距离顶部 */
    right: -1vw;
    /* 距离右侧 */
    cursor: pointer;
    /* 鼠标悬停为手型 */
}

/* 列表包装器样式 */
.list-wrap {
    overflow-y: auto;
    /* 启用垂直滚动 */
    height: 3rem;
    /* 固定高度 */
}

.rule .highlight-text {
    color: #ffdf39;
    /* 颜色，高亮黄色 */
}

/* 玩家角色样式 */
.player-character {
    width: 6vw;
    /* 宽度 */
    height: auto;
    /* 高度自适应 */
    position: absolute;
    /* 绝对定位 */
    transition: left 0.5s ease, bottom 0.5s ease;
    /* 位置过渡 */
    z-index: 9999;
    /* 最高层级 */
    object-fit: contain;
    /* 图片自适应 */
}

/* HTML 根元素样式 */
html {
    height: 100%;
    /* 高度占满 */
    font-size: 100px;
    /* 基础字体大小 */
}

/* 隐藏全局滚动条 */
.monopoly::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
}

html::-webkit-scrollbar {
    display: none;
    /* 隐藏滚动条 */
}