/* ============================================================================
 * 中秋博饼 —— 全屏夜景页面样式
 * 由 build 生成的全屏页 bobing.html 引用；与 css/tools.css 并存但互不依赖。
 * 原 one_admin 版本为多个 scoped SCSS 组件，这里合并为普通 CSS 并做了
 * Element Plus 组件（el-tag / el-timeline / 折叠动画）的原等价替换。
 * ==========================================================================*/

/* 全屏页外壳：覆盖 tools.css 的 body flex 与浅色底 */
body.bobing-body {
    display: block;
    min-height: 100vh;
    overflow: hidden;
    color: #f5e6c8;
    background: #131038;
}

/* 供 SEO 的单标题：视觉隐藏但可被爬虫与读屏软件读取 */
.bobing-sr-h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.bobing-page {
    position: relative;
    height: 100vh;
    overflow: hidden;
    color: #f5e6c8;
    background: linear-gradient(180deg, #131038 0%, #2a1b52 45%, #4b2650 78%, #6d3341 100%);
}

/* 内容铺满视口，内部自行滚动 */
.bobing-page .page-inner {
    position: relative;
    z-index: 1;
    height: 100%;
    max-width: 1600px;
    padding: 16px 24px;
    margin: 0 auto;
}

/* 音效开关：左上角圆形按钮（避开右侧信息栏） */
.bobing-page .sound-btn {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    font-size: 20px;
    cursor: pointer;
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(247 200 115 / 35%);
    border-radius: 50%;
    backdrop-filter: blur(6px);
    transition: background 0.2s ease;
}

.bobing-page .sound-btn:hover {
    background: rgb(255 255 255 / 18%);
}

/* 圆月：径向渐变 + 外发光（左上，避开右侧信息栏） */
.bobing-page .moon {
    position: absolute;
    top: 5%;
    left: 4%;
    width: clamp(90px, 12vw, 150px);
    aspect-ratio: 1;
    background: radial-gradient(circle at 38% 34%, #fffbe8 0%, #ffe9a8 55%, #f7c873 100%);
    border-radius: 50%;
    box-shadow:
        0 0 60px 18px rgb(255 224 138 / 45%),
        0 0 160px 60px rgb(255 224 138 / 18%);
}

/* 祥云：模糊半透明椭圆 */
.bobing-page .cloud {
    position: absolute;
    height: 46px;
    background: rgb(255 255 255 / 8%);
    border-radius: 999px;
    filter: blur(14px);
}

.bobing-page .cloud--1 {
    top: 16%;
    right: 30%;
    width: 240px;
}

.bobing-page .cloud--2 {
    bottom: 18%;
    left: 8%;
    width: 320px;
}

/* --------------------------------------------------------------- 主体网格 */
.bobing-page .page-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    height: 100%;
    min-height: 0;
}

/* 舞台纵向居中，骰盅随可用空间自动放大；按钮悬浮右上角 */
.bobing-page .stage-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 16px;
    background: rgb(0 0 0 / 18%);
    border-radius: 24px;
}

.bobing-page .scene {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 0;
}

.bobing-page .table-glow {
    position: absolute;
    bottom: 4%;
    left: 50%;
    width: 100%;
    max-width: 720px;
    height: 34%;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgb(255 190 120 / 14%) 0%, transparent 65%);
    transform: translateX(-50%);
}

/* 画布高度跟随舞台，宽度按宽高比换算，最大化利用空间 */
.bobing-page .canvas-wrap {
    width: min(92vw, calc(82vh * 1.22), 100%);
    max-width: 900px;
    aspect-ratio: 1 / 0.82;
}

/* canvas 必须纯 CSS 定尺寸：否则 WebGL 缓冲固有尺寸会反撑容器，触发 ResizeObserver 循环放大 */
.bobing-page .canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.bobing-page .scene-fallback {
    padding: 24px;
    font-size: 14px;
    color: rgb(245 230 200 / 80%);
    text-align: center;
}

/* 金色渐变大按钮：悬浮舞台右上角 */
.bobing-page .roll-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    padding: 10px 30px;
    font-size: 16px;
    font-weight: 700;
    color: #6b2a10;
    cursor: pointer;
    background: linear-gradient(180deg, #ffe3a1 0%, #f7b955 55%, #e89a2e 100%);
    border: none;
    border-radius: 999px;
    box-shadow:
        0 8px 24px rgb(247 185 85 / 45%),
        inset 0 2px 4px rgb(255 255 255 / 70%);
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.bobing-page .roll-btn:active:not(:disabled) {
    box-shadow: 0 3px 12px rgb(247 185 85 / 40%);
    transform: translateY(2px) scale(0.98);
}

.bobing-page .roll-btn--disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* --------------------------------------------------------------- 右侧信息栏 */
.bobing-page .side-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* 记录卡吃掉右栏剩余高度，列表内部滚动 */
.bobing-page .side-col .history-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.bobing-page .side-col .history-card__list {
    flex: 1;
    max-height: none;
}

/* ------------------------------------------------------------ 规则折叠栏 */
.rules-collapse {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rules-collapse__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: #f7c873;
    cursor: pointer;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 214 140 / 18%);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    transition: background 0.2s ease;
}

.rules-collapse__header:hover {
    background: rgb(255 255 255 / 10%);
}

.rules-collapse__arrow {
    transition: transform 0.3s ease;
}

.rules-collapse.is-open .rules-collapse__arrow {
    transform: rotate(180deg);
}

/* 折叠体：靠 max-height 过渡模拟原 el-collapse-transition，默认收起 */
.rules-collapse__body {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition:
        max-height 0.4s ease,
        visibility 0.4s;
}

.rules-collapse.is-open .rules-collapse__body {
    max-height: 80vh;
    overflow-y: auto;
    visibility: visible;
}

/* -------------------------------------------------------------- 规则面板 */
.rules-panel {
    padding: 20px;
    color: #f5e6c8;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 214 140 / 18%);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}

.rules-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
}

.rules-item {
    padding-bottom: 12px;
    border-bottom: 1px dashed rgb(255 214 140 / 15%);
}

.rules-item:last-of-type {
    padding-bottom: 0;
    border-bottom: none;
}

.rules-item__faces,
.result-card__faces,
.history-item__body {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.rules-item__faces {
    margin-bottom: 6px;
}

.rules-item__text {
    display: flex;
    gap: 8px;
    align-items: center;
}

.rules-item__name {
    font-size: 14px;
    font-weight: 600;
}

.rules-item__desc {
    margin-top: 2px;
    font-size: 12px;
    color: rgb(245 230 200 / 65%);
}

.rules-note {
    padding: 12px;
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.7;
    color: rgb(245 230 200 / 70%);
    background: rgb(0 0 0 / 18%);
    border-radius: 8px;
}

/* ------------------------------------------------------------ 2D 骰面图示 */
.face-row {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.pip-face {
    display: grid;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    place-items: center;
    background: linear-gradient(135deg, #fffef9 0%, #efe8da 100%);
    border: 1px solid rgb(0 0 0 / 8%);
    border-radius: 22%;
    box-shadow: 0 1px 3px rgb(0 0 0 / 15%);
}

.pip {
    width: 56%;
    height: 56%;
    background: radial-gradient(circle at 35% 30%, #6d6d6d, #171717 70%);
    border-radius: 50%;
}

.pip--red {
    background: radial-gradient(circle at 35% 30%, #ff8a7a, #c8161d 70%);
}

/* ------------------------------------------------------------- 奖项徽标 */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: #f5e6c8;
    background: rgb(255 255 255 / 12%);
    border: 1px solid rgb(255 255 255 / 20%);
    border-radius: 6px;
}

.tag--danger {
    color: #fff;
    background: #d93a2b;
    border-color: #d93a2b;
}

.tag--warning {
    color: #4a2a00;
    background: #f0a53f;
    border-color: #f0a53f;
}

.tag--success {
    color: #fff;
    background: #22b573;
    border-color: #22b573;
}

.tag--primary {
    color: #fff;
    background: #4f6ef7;
    border-color: #4f6ef7;
}

.tag--info {
    color: #fff;
    background: #8b93a8;
    border-color: #8b93a8;
}

.tag--plain {
    color: rgb(245 230 200 / 75%);
    background: transparent;
    border-color: rgb(255 214 140 / 30%);
}

/* -------------------------------------------------------------- 结果卡片 */
.result-card {
    padding: 18px 20px;
    color: #f5e6c8;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 214 140 / 18%);
    border-radius: 16px;
    backdrop-filter: blur(8px);
    transition: box-shadow 0.4s;
}

.result-card--gold {
    background: linear-gradient(135deg, rgb(255 200 90 / 18%), rgb(200 60 40 / 14%));
    border-color: rgb(255 214 140 / 65%);
    box-shadow: 0 0 26px rgb(255 190 90 / 35%);
}

.result-card__label {
    margin-bottom: 10px;
    font-size: 12px;
    color: rgb(245 230 200 / 55%);
}

.result-card__head {
    display: flex;
    gap: 10px;
    align-items: center;
}

.result-card__name {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #f7c873;
}

.result-card__faces {
    margin: 12px 0 8px;
}

.result-card__desc {
    font-size: 13px;
    color: rgb(245 230 200 / 80%);
}

.result-card__pending {
    padding: 8px 0;
    margin: 0;
    font-size: 14px;
    color: rgb(245 230 200 / 60%);
}

/* -------------------------------------------------------------- 历史记录 */
.history-card {
    padding: 18px 20px;
    color: #f5e6c8;
    background: rgb(255 255 255 / 6%);
    border: 1px solid rgb(255 214 140 / 18%);
    border-radius: 16px;
    backdrop-filter: blur(8px);
}

.history-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.history-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #f7c873;
}

.history-clear {
    padding: 2px 8px;
    font-family: inherit;
    font-size: 13px;
    color: #f0a53f;
    cursor: pointer;
    background: none;
    border: none;
    border-radius: 6px;
    transition: opacity 0.2s ease;
}

.history-clear:hover:not(:disabled) {
    background: rgb(240 165 63 / 14%);
}

.history-clear:disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.history-card__list {
  /* empty */
}

.history-empty {
    padding: 16px 0;
    font-size: 13px;
    color: rgb(245 230 200 / 55%);
    text-align: center;
}

/* 时间线：左侧竖线 + 金色节点，替代原 el-timeline */
.history-list {
    padding-top: 6px;
    padding-left: 4px;
    margin: 0;
    overflow-y: auto;
    list-style: none;
    border-left: 2px solid rgb(255 214 140 / 25%);
}

.history-item {
    position: relative;
    padding: 0 0 14px 18px;
}

.history-item::before {
    position: absolute;
    top: 4px;
    left: -7px;
    width: 12px;
    height: 12px;
    content: "";
    background: #f7c873;
    border-radius: 50%;
}

.history-item__time {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: rgb(245 230 200 / 55%);
}

.history-item__body {
    gap: 8px;
    justify-content: space-between;
}

.history-item__body .face-row {
    gap: 3px;
}

/* 备案信息：左下角低调常驻，满足全站合规要求 */
.bobing-filing {
    position: fixed;
    bottom: 8px;
    left: 50%;
    z-index: 3;
    font-size: 12px;
    color: rgb(245 230 200 / 45%);
    text-align: center;
    transform: translateX(-50%);
}

.bobing-filing a {
    margin: 0 4px;
    color: inherit;
    text-decoration: none;
}

.bobing-filing a:hover {
    color: rgb(245 230 200 / 80%);
}

/* 返回首页链接：右上角音效按钮旁 */
.bobing-home-link {
    position: fixed;
    top: 26px;
    left: 74px;
    z-index: 2;
    padding: 8px 14px;
    font-size: 13px;
    color: #f5e6c8;
    text-decoration: none;
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(247 200 115 / 35%);
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

.bobing-home-link:hover {
    background: rgb(255 255 255 / 18%);
}

/* --------------------------------------------------------------- 响应式 */
/* 平板及以上：固定两栏 */
@media (width >= 1024px) {
    .bobing-page .page-main {
        grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 440px);
    }
}

/* 小屏：整页滚动，骰盅固定尺寸 */
@media (width < 1024px) {
    body.bobing-body {
        overflow: auto;
    }

    .bobing-page {
        height: auto;
        min-height: 100vh;
    }

    .bobing-page .page-inner {
        height: auto;
        padding: 16px 12px 48px;
    }

    .bobing-page .page-main {
        height: auto;
    }

    .bobing-page .side-col {
        overflow: visible;
    }

    .bobing-page .canvas-wrap {
        width: min(560px, 92vw);
    }
}