/* 大屏端样式：1920×1080 设计稿，JS 等比缩放
   注意兼容旧内核：不用 inset 简写、不用 flex gap */

@font-face {
    font-family: 'JianHei';
    src: url('../fonts/zaozigongfangjianheiti.ttf?v=3.1.2') format('truetype');
    font-display: swap;
}
@font-face {
    font-family: 'AgencyBold';
    src: url('../fonts/AgencyFB-Bold.otf?v=3.1.2') format('opentype');
    font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #000; }
body { font-family: 'JianHei', "Microsoft YaHei", "微软雅黑", sans-serif; }

#viewport { position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; }

#stage {
    position: absolute;
    left: 50%; top: 50%;
    width: 1920px; height: 1080px;
    transform-origin: center center;
    overflow: hidden;
    background: #05060a;
}

#bgLayer {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    z-index: 1;
}

#video {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    width: 1920px; height: 1080px;
    object-fit: cover;
    visibility: hidden; /* 视觉隐藏但保持布局与解码器常驻：display:none 会让内核释放解码管线，起播时重建导致卡顿 */
    z-index: 2;
}

/* 待机提示 */
#hint {
    position: absolute;
    left: 0; right: 0; bottom: 70px;
    text-align: center;
    font-size: 40px;
    letter-spacing: 6px;
    color: rgba(245, 224, 170, 0.92);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9), 0 0 30px rgba(245, 214, 122, 0.35);
    background: rgba(0, 0, 0, 0.28);
    width: 720px;
    margin-left: 600px;
    padding: 18px 0;
    border-radius: 60px;
    z-index: 5;
    animation: hintBreathe 2.2s ease-in-out infinite;
}
@keyframes hintBreathe {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 1; }
}

/* 滚动文本层 */
#rollLayer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 6; display: none; }

/* 数字块：右边缘锚定在屏右 279px（数字右缘 x=1641），
   数字右对齐、位数变多向左延伸，保证「克」位置钉死不动 */
#rollNumberWrap {
    position: absolute;
    right: 279px; bottom: 369px;
    white-space: nowrap;
    text-align: right;
    height: 200px;
    line-height: 200px;
}
#rollNum {
    display: inline-block;
    vertical-align: bottom;
    font-family: 'AgencyBold', "Microsoft YaHei", sans-serif;
    font-size: 158px;
    color: #b0a163; /* 纯色金：参考素材 PIL 采样亮部中位代表色，不再用渐变 */
}
/* 滚动期间数字只原地跳变，无任何 scale/translate/opacity 附加动效 */
/* 单位「克」：字形左缘钉死在 86.6% 屏宽（1663px，SimHei 左 bearing 16px，CSS left=1647），
   与数字右缘留约 1.5% 屏宽间距，数字 8~24 个位/两位跳变时克纹丝不动；
   行盒体系与数字块相同，translateY 校准底边对齐；标准黑体常规字重，与滚动数字同字号 */
#rollUnit {
    position: absolute;
    left: 1647px; bottom: 369px; /* SimHei 克字左 bearing 约 16px，CSS 1647+16=字形左缘 1663（86.6% 屏宽），与上版验收锚点一致 */
    height: 200px;
    line-height: 200px;
    transform: translateY(-15px); /* 静帧实测：SimHei 克字形底与 Agency 数字字形底对齐到同一条线（y=667） */
    font-family: SimHei, "黑体", sans-serif;
    font-weight: normal;
    font-size: 158px; /* 与滚动数字同字号 */
    color: #b0a163; /* 纯色金，与数字同色 */
}

/* 物品名：左边缘 60.9%、底边与数字块对齐 */
#rollItemName {
    position: absolute;
    left: 1169px; bottom: 364px;
    font-size: 53px;
    line-height: 64px;
    letter-spacing: 3px;
    color: #cfc0a0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    white-space: nowrap;
}

/* 开奖文本层
   版式按 1920×1080 设计稿实测坐标：
   上行「物品名」左边缘 77.6%（1490px），SimHei 字形顶约 440px、字形底约 505px
   下行：单位「克」字形左缘钉死 86.6% 屏宽（1663px，与滚动态同位置，滚动→定格不跳位），
   数字右对齐、右缘 x=1633，位数变多向左延伸；
   Agency 数字字形顶约 578px、字形底约 698px，单位字形底与数字字形底对齐 */
#winLayer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 7; display: none; }
#winBlock {
    position: absolute;
    left: 1490px; top: 437px;
    height: 280px; /* 固定块高覆盖两行文本，保证特效原点取在两行中心 */
    text-align: left;
    white-space: nowrap;
}
#winBlock.pop { animation: winPop 0.55s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
@keyframes winPop {
    0%   { transform: scale(0.5); opacity: 0; }
    70%  { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
#winName {
    font-family: SimHei, "黑体", sans-serif;
    font-weight: normal;
    font-size: 72px;
    line-height: 1;
    letter-spacing: 4px;
    color: #ffffff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 26px rgba(255, 255, 255, 0.22);
}
/* 数字容器：右缘锚定到 stage x=1641（winBlock 左缘 1490 - 329 + 480），
   内部右对齐，1 位/2 位数字都向左延伸，「克」不被推动 */
#winAmount {
    position: absolute;
    left: -329px;
    width: 480px;
    top: 126px;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}
#winNum {
    font-family: 'AgencyBold', "Microsoft YaHei", sans-serif;
    font-size: 158px;
    color: #b0a163; /* 纯色金：参考素材 PIL 采样亮部中位代表色，不再用渐变 */
}
/* 单位「克」：字形左缘钉死在 86.6% 屏宽（winBlock 1490 + CSS 163 + SimHei 左 bearing 10 = 1663px，与滚动态同位置，滚动→定格不跳位），
   标准黑体常规字重，字号约为数字 62%，top 按实测校准使字形底与数字字形底对齐（y=698） */
#winUnit {
    position: absolute;
    left: 163px;
    top: 168px;
    font-family: SimHei, "黑体", sans-serif;
    font-weight: normal;
    font-size: 99px;
    line-height: 1;
    color: #b0a163; /* 纯色金，与数字同色 */
}

/* 特效层：原点坐标由 JS 注入 */
#fxLayer {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 8;
    pointer-events: none;
    overflow: hidden;
}
.fx-flash {
    position: absolute;
    width: 500px; height: 500px;
    margin-left: -250px; margin-top: -250px;
    border-radius: 50%;
    background: -webkit-radial-gradient(center, rgba(255, 246, 210, 0.95) 0%, rgba(236, 208, 138, 0.55) 35%, rgba(236, 208, 138, 0) 70%);
    background: radial-gradient(circle at center, rgba(255, 246, 210, 0.95) 0%, rgba(236, 208, 138, 0.55) 35%, rgba(236, 208, 138, 0) 70%);
    animation: fxFlash 0.9s ease-out both;
}
@keyframes fxFlash {
    0%   { transform: scale(0.1); opacity: 1; }
    100% { transform: scale(2.6); opacity: 0; }
}
.fx-diamond {
    position: absolute;
    border: 4px solid #ecd08a;
    box-shadow: 0 0 24px rgba(236, 208, 138, 0.85), inset 0 0 24px rgba(236, 208, 138, 0.4);
    opacity: 0;
    animation: fxDiamond 1.7s ease-out both;
}
@keyframes fxDiamond {
    0%   { transform: translate(-50%, -50%) rotate(45deg) scale(0.15); opacity: 1; }
    60%  { opacity: 0.9; }
    100% { transform: translate(-50%, -50%) rotate(45deg) scale(2.6); opacity: 0; }
}
.fx-ray {
    position: absolute;
    width: 760px; height: 5px;
    margin-top: -2px;
    transform-origin: left center;
    background: -webkit-linear-gradient(left, rgba(236, 208, 138, 0.95) 0%, rgba(236, 208, 138, 0) 100%);
    background: linear-gradient(to right, rgba(236, 208, 138, 0.95) 0%, rgba(236, 208, 138, 0) 100%);
    opacity: 0;
    animation: fxRay 1.1s ease-out both;
}
@keyframes fxRay {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
.fx-star {
    position: absolute;
    color: #ffe9a8;
    text-shadow: 0 0 12px rgba(236, 208, 138, 0.95), 0 0 28px rgba(236, 208, 138, 0.6);
    opacity: 0;
    animation: fxStar 2.2s ease-in-out both;
}
@keyframes fxStar {
    0%   { opacity: 0; transform: translateY(0) scale(0.4) rotate(0deg); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(90px) scale(1.1) rotate(90deg); }
}

/* 中奖记录弹窗 */
#recordsMask {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 20;
    display: none;
}
#recordsMask.show { display: block; animation: maskIn 0.25s ease-out; }
@keyframes maskIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
#recordsBox {
    position: absolute;
    left: 50%; top: 50%;
    width: 600px; height: 648px;
    transform: translate(-50%, -50%);
    background: rgba(10, 10, 14, 0.85);
    border: 1px solid rgba(236, 208, 138, 0.75);
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(236, 208, 138, 0.18), 0 20px 60px rgba(0, 0, 0, 0.6);
}
#recordsMask.show #recordsBox { animation: boxIn 0.28s cubic-bezier(0.2, 1.2, 0.4, 1); }
@keyframes boxIn {
    0%   { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
#recordsTitle {
    font-size: 30px;
    letter-spacing: 4px;
    color: #ecd08a;
    text-align: center;
    padding: 26px 0 16px;
    border-bottom: 1px solid rgba(236, 208, 138, 0.25);
    margin: 0 30px;
}
#recordsClose {
    position: absolute;
    right: 18px; top: 16px;
    width: 36px; height: 36px;
    line-height: 34px;
    text-align: center;
    font-size: 24px;
    color: rgba(236, 208, 138, 0.8);
    cursor: pointer;
    border: 1px solid rgba(236, 208, 138, 0.4);
    border-radius: 50%;
    font-family: "Microsoft YaHei", sans-serif;
}
#recordsClose:hover { color: #fff0c8; border-color: #ecd08a; }
#recordsList {
    position: absolute;
    top: 86px; bottom: 20px;
    left: 30px; right: 30px;
    overflow-y: auto;
    overflow-x: hidden;
}
#recordsList::-webkit-scrollbar { width: 5px; }
#recordsList::-webkit-scrollbar-thumb { background: rgba(236, 208, 138, 0.45); border-radius: 3px; }
#recordsList::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
.rec-row {
    display: block;
    padding: 13px 6px;
    border-bottom: 1px solid rgba(236, 208, 138, 0.12);
    font-size: 21px;
    color: rgba(240, 230, 205, 0.9);
    letter-spacing: 1px;
}
.rec-row .t { color: rgba(200, 190, 160, 0.6); font-size: 19px; margin-right: 18px; font-family: "Microsoft YaHei", sans-serif; }
/* 奖项名：标准黑体常规字重 */
.rec-row .g { color: #b0a163; font-family: SimHei, "黑体", sans-serif; font-weight: normal; margin-right: 8px; }
/* 克数数字：AgencyBold，纯色金与抽奖画面一致 */
.rec-row .a { color: #b0a163; font-family: 'AgencyBold', 'JianHei', "Microsoft YaHei", sans-serif; }
.rec-empty {
    text-align: center;
    color: rgba(200, 190, 160, 0.5);
    font-size: 22px;
    padding-top: 120px;
}

/* 右下角按钮组 */
#ctrlBar {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 99;
}
#ctrlBar button {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(15, 14, 10, 0.55);
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    margin-left: 10px;
    outline: none;
    padding: 9px;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
}
#ctrlBar button svg { width: 20px; height: 20px; display: block; }
#ctrlBar button:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(201, 150, 46, 0.45);
}
#ctrlBar button.off { color: rgba(255, 255, 255, 0.3); }
/* 一轮抽奖期间按钮整体锁定：灰化且不响应点击（JS 侧 drawLocked 同步拦截，双保险） */
#ctrlBar.locked button {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}