/* 抽奖系统前台样式（金色星空主题体系），主题通过切换。 */ /* ---------- 主题变量 ---------- 浅色基底（高明度、低饱和的果冻色渐变）叠加珠光纹理、磨砂玻璃与金属高光，避免纯色扁平感。 bg1/2/3 三段背景色深（最浅基底 / 中调 / 右上主光） metal-* 金属高光三段色：按钮、门头匾额、金属描边的亮—中—暗 glass-* 玻璃四要素：顶面高光 / 内部微光 / 内部基底 / 边缘亮线 aurora-* 氛围光斑色（浅底上表现为柔和的彩色光晕） stage-* 转盘展示台中心与外圈的浅色过渡 shadow / overlay 统一的柔和投影与弹窗遮罩；plaque-* 门头牌匾底色与文字色 btn-fg 主按钮（饱和金属渐变）上的文字色，浅金主题深字、蓝粉主题白字 */ :root, [data-theme="gold"] { --bg1: #fffdf8; --bg2: #fff2da; --bg3: #ffe2ae; --accent: #c9820c; --accent2: #f0a91e; --accent3: #ff8a2b; --accent-soft: rgba(240, 169, 30, 0.14); --card-bg: rgba(255, 255, 255, 0.64); --card-border: rgba(201, 130, 12, 0.22); --glow: rgba(255, 190, 70, 0.45); --text: #3b2d14; --text2: #6d5a36; --text-dim: #9b8862; --btn-grad: linear-gradient(135deg, #f7cd63, #e59a12 48%, #bf7405); --btn-grad2: linear-gradient(135deg, #fff6dc, #ffd875 56%, #f0b64a); --btn-fg: #4a2f02; --success: #4caf50; --danger: #e05252; --info: #2f8fd8; --metal-1: #fffdf4; --metal-2: #eab84f; --metal-3: #b98a20; --glass-1: rgba(255, 255, 255, 0.85); --glass-2: rgba(255, 255, 255, 0.32); --glass-3: rgba(255, 255, 255, 0.55); --glass-edge: rgba(255, 255, 255, 0.95); --aurora-1: rgba(255, 200, 90, 0.42); --aurora-2: rgba(178, 150, 255, 0.30); --stage-1: #fffaf1; --stage-2: #ffe9c6; --shadow: rgba(150, 112, 34, 0.16); --overlay: rgba(74, 54, 18, 0.30); --plaque-1: #fffaf0; --plaque-2: #ffe7ba; --plaque-fg: #8a5600; /* ========== 老虎机专属变量（SLOT THEME） ========== */ --slot-cab-bg1: rgba(255,255,255,0.95); --slot-cab-bg2: linear-gradient(158deg,#fff6dc,#ffd875 48%,#f0b64a); --slot-cab-border: rgba(201,130,12,0.22); --slot-cab-shadow: 0 18px 42px rgba(150,112,34,0.20); --slot-reel-bg: #fff; --slot-reel-border: rgba(201,130,12,0.30); --slot-reel-glow: rgba(255,214,96,0.85); --slot-symbol-color: #3b2d14; --slot-btn-bg: linear-gradient(135deg,#f7cd63,#e59a12 48%,#bf7405); --slot-btn-fg: #4a2f02; --slot-lever: #b98a20; --slot-lamp-on: #ffb648; --slot-lamp-off: rgba(150,112,34,0.16); --slot-radius: 22px; --slot-animation-speed: 0.42s; /* ========== 报名抽奖专属变量（RAFFLE THEME） ========== */ --raffle-card-bg: rgba(255,215,0,0.08); --raffle-card-border: rgba(255,215,0,0.20); --raffle-title-color: #ffd700; --raffle-btn-bg: linear-gradient(135deg,#f7cd63,#e59a12); --raffle-btn-fg: #4a2f02; --raffle-status-signup: #5cb85c; --raffle-status-closed: #f0ad4e; --raffle-status-drawn: #ffd700; --raffle-text: #ddd; --raffle-text-dim: #909399; --raffle-radius: 12px; } [data-theme="blue"] { --bg1: #f8fcff; --bg2: #e7f5ff; --bg3: #cee9ff; --accent: #1a7cc0; --accent2: #35b8f0; --accent3: #0a6fb0; --accent-soft: rgba(53, 184, 240, 0.14); --card-bg: rgba(255, 255, 255, 0.64); --card-border: rgba(26, 124, 192, 0.22); --glow: rgba(95, 195, 255, 0.45); --text: #16303f; --text2: #44657a; --text-dim: #7d99ab; --btn-grad: linear-gradient(135deg, #58c4f5, #1f95dd 48%, #1068a8); --btn-grad2: linear-gradient(135deg, #e6f7ff, #9fe0ff 56%, #5cc2ef); --btn-fg: #ffffff; --success: #43a047; --danger: #e05353; --info: #2f8fd8; --metal-1: #ffffff; --metal-2: #7cc6e8; --metal-3: #4a8db0; --glass-1: rgba(255, 255, 255, 0.85); --glass-2: rgba(255, 255, 255, 0.32); --glass-3: rgba(255, 255, 255, 0.55); --glass-edge: rgba(255, 255, 255, 0.95); --aurora-1: rgba(95, 200, 255, 0.38); --aurora-2: rgba(130, 150, 255, 0.28); --stage-1: #f7fdff; --stage-2: #d9edfc; --shadow: rgba(40, 92, 132, 0.15); --overlay: rgba(18, 46, 72, 0.30); --plaque-1: #f2fbff; --plaque-2: #cfe9fa; --plaque-fg: #14618f; } [data-theme="pink"] { --bg1: #fff9fc; --bg2: #ffeef6; --bg3: #ffd8ea; --accent: #c9427b; --accent2: #f472b6; --accent3: #d9257a; --accent-soft: rgba(244, 114, 182, 0.14); --card-bg: rgba(255, 255, 255, 0.64); --card-border: rgba(201, 66, 123, 0.22); --glow: rgba(255, 140, 190, 0.45); --text: #3d2230; --text2: #6f4b5c; --text-dim: #a17d90; --btn-grad: linear-gradient(135deg, #f58dbf, #e0438a 48%, #b32363); --btn-grad2: linear-gradient(135deg, #fff0f6, #ffc2dc 56%, #f58ec0); --btn-fg: #ffffff; --success: #4caf50; --danger: #e05252; --info: #3d8fd8; --metal-1: #ffffff; --metal-2: #ec9ac0; --metal-3: #b8658f; --glass-1: rgba(255, 255, 255, 0.85); --glass-2: rgba(255, 255, 255, 0.32); --glass-3: rgba(255, 255, 255, 0.55); --glass-edge: rgba(255, 255, 255, 0.95); --aurora-1: rgba(255, 140, 190, 0.38); --aurora-2: rgba(190, 140, 255, 0.28); --stage-1: #fff8fb; --stage-2: #ffdcea; --shadow: rgba(140, 70, 110, 0.15); --overlay: rgba(72, 30, 56, 0.30); --plaque-1: #fff2f7; --plaque-2: #ffdcea; --plaque-fg: #ad3a6c; } /* ---------- 基础 ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Microsoft Yahei", "SimHei", "PingFang SC", sans-serif; } html { min-height: 100%; } body { /* 固定用 100vh（= 地址栏收起时的最大高度），不要用 100dvh： dvh 会随移动端地址栏收起/展开实时变化 → body 高度跟着变 → 文档高度变化触发重排，滚动时地址栏反复伸缩就会表现为"布局反复调整"。这里是 min-height，内容超出照样滚动，且背景是 fixed 绘制，所以用稳定的 100vh 不会出现视觉空缺。 */ min-height: 100vh; background: radial-gradient(1000px 600px at 80% -10%, var(--bg3), transparent 60%), radial-gradient(800px 500px at -10% 110%, var(--bg2), transparent 60%), linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 55%, var(--bg3) 100%); background-attachment: fixed; color: var(--text); overflow-x: hidden; } /* 动态星光背景 */ body::before { content: ""; position: fixed; inset: 0; background-image: radial-gradient(2px 2px at 20px 30px, #ffffff, transparent), radial-gradient(2px 2px at 80px 150px, var(--accent), transparent), radial-gradient(1px 1px at 180px 90px, #fff, transparent), radial-gradient(2px 2px at 260px 220px, var(--accent2), transparent), radial-gradient(1px 1px at 350px 120px, #fff, transparent); background-repeat: repeat; background-size: 400px 300px; opacity: 0.35; z-index: 0; animation: starMove 24s linear infinite; pointer-events: none; } @keyframes starMove { 0% { background-position: 0 0; } 100% { background-position: 400px 300px; } } .hidden { display: none !important; } .view { position: relative; z-index: 1; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- 通用按钮 ---------- */ .btn { border: none; border-radius: 10px; cursor: pointer; font-size: 16px; font-weight: 600; color: #fff; transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, filter 0.18s; user-select: none; } .btn:hover { transform: translateY(-1px); filter: brightness(1.06); } .btn:active { transform: translateY(0); } .btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; filter: none; } .btn.primary { background: var(--btn-grad); box-shadow: 0 4px 18px var(--glow); } .btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn.danger { background: var(--danger); } .btn.small { padding: 7px 14px; font-size: 13px; border-radius: 8px; } .btn.draw { min-width: 200px; padding: 14px 30px; font-size: 20px; letter-spacing: 4px; background: var(--btn-grad); border-radius: 40px; box-shadow: 0 6px 24px var(--glow), 0 0 18px var(--glow); position: relative; overflow: hidden; } .btn.draw::before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); animation: btnLight 2.6s infinite; } @keyframes btnLight { 0% { left: -100%; } 100% { left: 100%; } } /* ---------- 报名抽奖（Raffle）卡片按钮：主题化 ---------- */ .raffle-card .btn { padding: 9px 18px; font-size: 14px; border-radius: var(--raffle-radius, 10px); border: none; cursor: pointer; transition: filter .15s; } .raffle-card .btn.signup-now { background: var(--raffle-btn-bg, linear-gradient(135deg,#ffd700,#ff9f00)); color: var(--raffle-btn-fg, #3a2400); box-shadow: 0 3px 12px rgba(255, 180, 0, 0.35); } .raffle-card .btn.signup-now:hover { filter: brightness(1.08); } .raffle-card .btn.cancel-signup { background: rgba(255, 215, 0, 0.12); color: var(--raffle-status-drawn, #ffd700); border: 1px solid var(--raffle-status-drawn, #ffd700); } .raffle-card .btn.view-result { background: var(--raffle-btn-bg, linear-gradient(135deg,#b8860b,#9c7306)); color: var(--raffle-btn-fg, #fff); } .raffle-card .btn.view-result:hover { filter: brightness(1.1); } /* ---------- 登录页 ---------- */ .login-wrap { max-width: 460px; margin: 0 auto; padding: 60px 20px 40px; text-align: center; } .logo-title { font-size: 42px; letter-spacing: 8px; background: linear-gradient(to right, var(--accent), #fff6d8, var(--accent)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 18px var(--glow); animation: titleShine 3s ease-in-out infinite alternate; margin-bottom: 10px; } @keyframes titleShine { from { filter: drop-shadow(0 0 8px var(--accent)); } to { filter: drop-shadow(0 0 22px var(--accent)); } } .logo-sub { color: var(--text2); letter-spacing: 3px; margin-bottom: 34px; } .login-box { background: linear-gradient(150deg, var(--accent-soft), rgba(138, 43, 226, 0.1)); border: 1px solid var(--card-border); border-radius: 18px; padding: 28px 26px 30px; box-shadow: 0 0 28px var(--glow); } .login-tabs { display: flex; gap: 8px; margin-bottom: 22px; } .login-tabs .tab { flex: 1; padding: 10px 0; background: transparent; border: 1px solid var(--card-border); color: var(--text2); border-radius: 10px; font-size: 15px; cursor: pointer; transition: 0.2s; } .login-tabs .tab.active { background: var(--btn-grad); border-color: transparent; color: #fff; font-weight: 700; } .form-pane { display: flex; flex-direction: column; gap: 14px; } .form-pane input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--card-border); border-radius: 10px; background: rgba(0, 0, 0, 0.35); color: var(--text); font-size: 16px; /* 必须 ≥16px：iOS Safari 聚焦字号 <16px 的输入框会自动放大整页 */ outline: none; } .form-pane input::placeholder { color: var(--text-dim); } .form-pane input:focus { border-color: var(--accent); } .avatar-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .avatar-opt { width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; font-size: 22px; line-height: 36px; background: rgba(0, 0, 0, 0.25); transition: 0.15s; } .avatar-opt:hover { transform: scale(1.1); } .avatar-opt.active { border-color: var(--accent); box-shadow: 0 0 10px var(--glow); } .login-foot { margin-top: 22px; } .login-foot a { color: var(--accent); opacity: 0.85; text-decoration: none; font-size: 14px; } .login-foot a:hover { opacity: 1; text-decoration: underline; } .tip { color: var(--text-dim); font-size: 13px; } .tip a { color: var(--accent); cursor: pointer; text-decoration: underline; } /* ---------- 顶栏 ---------- */ .topbar { position: sticky; top: 0; z-index: 50; background: rgba(8, 4, 30, 0.72); backdrop-filter: blur(10px); border-bottom: 1px solid var(--card-border); } .topbar-inner { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .brand { font-size: 20px; font-weight: 800; letter-spacing: 3px; /* 顶栏标题：实心深金色 + 白色提亮描边。原方案的 background-clip:text + color:transparent 一旦不被支持（或受顶栏 backdrop-filter 影响）会整片文字消失，所以不再依赖这个特性。*/ color: var(--accent); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85); } .user-chip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .avatar { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--accent); background: rgba(0,0,0,0.3); font-size: 20px; line-height: 30px; text-align: center; } .user-chip .name { font-weight: 600; } /* 顶栏「退出登录」后边的固定小字：写死不可修改，后台无入口 */ .brand-note { position: absolute; right: 12px; bottom: 3px; display: flex; align-items: center; gap: 5px; font-size: 9px; line-height: 1.35; color: rgba(168, 8, 8, 0.66); font-weight: 400; letter-spacing: 0; user-select: none; text-align: right; pointer-events: none; } .brand-note-avatar { height: 24px; width: auto; opacity: 0.5; border-radius: 3px; flex: 0 0 auto; } @media (max-width: 768px) { .brand-note { font-size: 8px; color: rgba(168, 8, 8, 0.58); } .brand-note-avatar { height: 22px; } } .chip-points { color: var(--accent); font-weight: 700; } /* ---------- 系统公告条幅（独立一条） ---------- 宽度用 calc(100% - 28px) + max-width 居中：窄屏两侧自动留出 14px 边距，宽屏居中且不超过 1200px，任何屏幕下都不会贴边或与其它条幅错位。 */ .announce-bar { width: calc(100% - 28px); max-width: 1200px; margin: 14px auto 0; padding: 10px 18px; border-radius: 10px; box-sizing: border-box; font-size: 14px; border: 1px solid var(--card-border); background: var(--accent-soft); color: var(--text); display: flex; align-items: center; gap: 12px; } .announce-text { flex: 1 1 auto; min-width: 0; word-break: break-word; } /* ---------- 限时活动条幅（独立一条）：左侧标签 + 最右侧倒计时 ---------- 与系统公告条幅互不影响：各自 hidden 时不占位，两条之间用 margin 隔开。左侧标签单行显示（超长省略号），右侧倒计时 nowrap + 等宽数字（tabular-nums），所以条幅高度和倒计时位置在各种屏宽下都稳定，每秒刷新也不会引起抖动与整页重排。 */ .activity-bar { width: calc(100% - 28px); max-width: 1200px; margin: 10px auto 0; padding: 9px 18px; border-radius: 10px; box-sizing: border-box; border: 1px solid rgba(255, 179, 0, 0.55); background: linear-gradient(90deg, rgba(255, 107, 0, 0.22), rgba(255, 179, 0, 0.12)); color: var(--accent); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .activity-bar .act-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .activity-bar .act-time { flex: 0 0 auto; margin-left: auto; color: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0.5px; white-space: nowrap; } .activity-bar.ended { background: linear-gradient(90deg, rgba(120, 120, 120, 0.14), rgba(120, 120, 120, 0.05)); color: var(--text-dim); border-color: rgba(107, 99, 85, 0.35); } /* ---------- 导航 Tabs ---------- */ .tabs { max-width: 1200px; margin: 22px auto 0; padding: 0 20px; display: flex; gap: 10px; flex-wrap: wrap; } .tabs .tab { padding: 9px 22px; border-radius: 22px; border: 1px solid var(--card-border); background: transparent; color: var(--text2); font-size: 15px; cursor: pointer; transition: 0.2s; } .tabs .tab:hover { color: var(--accent); } .tabs .tab.active { background: var(--btn-grad2); color: #241434; font-weight: 800; border-color: transparent; box-shadow: 0 2px 14px var(--glow); } main { max-width: 1200px; margin: 0 auto; padding: 24px 20px 60px; } .tab-pane { display: none; } .tab-pane.active { display: block; animation: paneIn 0.3s ease; } @keyframes paneIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------- 置顶宽屏轮播 ---------- */ .top-banner { position: relative; width: 100%; max-width: 1080px; margin: 4px auto 18px; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22); } .banner-carousel, .banner-poster { position: relative; width: 100%; height: 200px; } .banner-carousel img, .banner-poster img { width: 100%; height: 100%; object-fit: cover; display: block; } .banner-track { position: relative; width: 100%; height: 100%; } .banner-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; } .banner-slide.active { opacity: 1; pointer-events: auto; } .banner-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.35); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; z-index: 5; transition: 0.18s; } .banner-arrow:hover { background: rgba(0, 0, 0, 0.6); } .banner-arrow.prev { left: 12px; } .banner-arrow.next { right: 12px; } .banner-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; } .banner-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(0, 0, 0, 0.2); cursor: pointer; transition: 0.2s; } .banner-dot.active { background: #ffd700; border-color: #b8860b; transform: scale(1.25); } /* 霓虹灯超大滚屏文字 */ .banner-neon { position: relative; width: 100%; height: 200px; overflow: hidden; background: linear-gradient(180deg, #0b0b22 0%, #1a1040 55%, #2a1050 100%); display: flex; align-items: center; } .banner-neon-track { display: flex; width: max-content; white-space: nowrap; animation: neonScroll 16s linear infinite; } .banner-neon:hover .banner-neon-track { animation-play-state: paused; } @keyframes neonScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .banner-neon-txt { font-size: clamp(44px, 7vw, 84px); font-weight: 900; letter-spacing: 14px; padding: 0 40px; color: #fff; text-shadow: 0 0 6px #fff, 0 0 14px #ff2d95, 0 0 30px #ff2d95, 0 0 55px #ff2d95, 0 0 90px #7a1fa8; } .banner-neon-txt:nth-child(2) { text-shadow: 0 0 6px #fff, 0 0 14px #00e5ff, 0 0 30px #00e5ff, 0 0 55px #00e5ff, 0 0 90px #0040ff; } @media (max-width: 720px) { .banner-carousel, .banner-poster, .banner-neon { height: 120px; } .banner-neon-txt { letter-spacing: 6px; padding: 0 18px; } .banner-arrow { width: 30px; height: 30px; font-size: 18px; } } /* ---------- 首页数据来源提示 ---------- */ .sync-badge { max-width: 720px; margin: -10px auto 14px; padding: 6px 12px; border-radius: 999px; font-size: 12px; line-height: 1.6; text-align: center; color: #6b6355; background: rgba(107, 99, 85, 0.08); border: 1px solid rgba(107, 99, 85, 0.18); word-break: break-all; } .sync-badge.ok { color: #1f8a4c; background: rgba(31, 138, 76, 0.08); border-color: rgba(31, 138, 76, 0.28); } .sync-badge.off { color: #a8621f; background: rgba(212, 160, 23, 0.12); border-color: rgba(212, 160, 23, 0.38); } .sync-badge.err { color: #c0392b; background: rgba(192, 57, 43, 0.08); border-color: rgba(192, 57, 43, 0.32); } /* ---------- 门头标语 ---------- */ .hall-slogan { position: relative; z-index: 5; /* 保证标语永远在背景/装饰层之上，不被任何色块压住 */ text-align: center; width: fit-content; /* 底框贴合文字宽度（居中胶囊），避免出现整条空色带 */ margin: 8px auto 20px; padding: 16px 26px; font-size: clamp(30px, 4.6vw, 46px); font-weight: 900; letter-spacing: 8px; line-height: 1.25; /* 实心深金色文字 + 浅金底框：同样不依赖 background-clip:text，任何浏览器和主题底色下都清晰可读。*/ color: #7a4a00; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 244, 210, 0.92)); border: 1px solid rgba(184, 134, 11, 0.42); border-radius: 16px; box-shadow: 0 8px 22px rgba(184, 134, 11, 0.16), inset 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff, 0 0 12px rgba(255, 196, 0, 0.45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .hall-slogan::before, .hall-slogan::after { content: '✦'; position: absolute; top: 50%; transform: translateY(-50%); font-size: 0.55em; color: #b8860b; filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8)); animation: sloganStar 2s ease-in-out infinite; } .hall-slogan::before { left: 8px; } .hall-slogan::after { right: 8px; animation-delay: 1s; } @keyframes sloganStar { 0%, 100% { opacity: 0.6; transform: translateY(-50%) scale(1); } 50% { opacity: 1; transform: translateY(-50%) scale(1.25); } } @media (max-width: 720px) { .hall-slogan { letter-spacing: 4px; padding: 12px 18px; } .hall-slogan::before, .hall-slogan::after { display: none; } } /* ---------- 统计卡片 ---------- */ .stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .stat-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 14px; padding: 16px 12px; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } .stat-num { font-size: 28px; font-weight: 800; color: var(--accent); text-shadow: 0 0 12px var(--glow); } .stat-label { color: var(--text2); font-size: 13px; margin-top: 4px; } /* ---------- 大厅布局 ---------- */ .hall-layout { display: grid; grid-template-columns: minmax(360px, 460px) 1fr; gap: 24px; align-items: start; } /* 幸运转盘单列布局：大转盘在上，奖池预览下置 */ .hall-layout.wheel-mode { grid-template-columns: 1fr; max-width: 1000px; margin: 0 auto; } .hall-layout.wheel-mode .game-card { max-width: 100%; width: 100%; } .hall-layout.wheel-mode .prize-panel { display: none; } .wheel-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 22px var(--glow); text-align: center; } .wheel-wrap { position: relative; width: min(680px, 100%); /* 上下留出转盘光环 / 放射光芒向外溢出的空间（约 6%，这里给 32/40px），别让上面的「🎡 幸运转盘」和下面的「🎁 奖池预览」被装饰遮住。*/ margin: 32px auto 40px; } /* ---------- 转盘皮肤主题（统一配置入口） ---------- 变量由 js/skins.js 的 WheelSkin.applyThemeTo() 按当前皮肤写入，这里给的是经典皮肤的默认值，所以没启用皮肤系统（或 JS 没执行）时页面与原来一致。新增皮肤只要在 skins.js 的 theme 里填 4 个中心色 + 描边色，CSS 侧不用改。 */ .wheel-wrap { --wc-1: #c39bff; --wc-2: #8b3ff2; --wc-3: #5217a8; --wc-4: #26055c; --wc-ring: #f5c542; --wc-text: #ffe98a; --wc-glow: rgba(255, 215, 0, 0.9); --sk-rim: #f7c948; --sk-deep: #0b0620; } /* 非经典皮肤：宝石环 / 跑马灯灯泡 / 流光扫光 / DOM 指针 / 四角卷草纹都是经典皮肤的专属视觉，一律隐藏；指针改由画布按皮肤现画，避免两套指针打架。 */ .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-halo, .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-gloss, .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-bulbs, .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-lux, .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-pointer, .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-gear, .wheel-wrap[data-skin]:not([data-skin="classic"]) .wl-corner { display: none !important; } /* 中心按钮随皮肤换色（文字颜色由 skins.js 的主题决定；浅底皮肤自动转深字） */ .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-center { background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0) 38%), radial-gradient(circle at 50% 46%, var(--wc-1) 0%, var(--wc-2) 44%, var(--wc-3) 74%, var(--wc-4) 100%); border-color: var(--wc-ring); box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.42), 0 0 0 7px var(--wc-ring), 0 0 34px var(--wc-glow), inset 0 4px 16px rgba(255, 255, 255, 0.45), inset 0 -10px 22px rgba(0, 0, 0, 0.45); } .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-center::before { border-color: var(--wc-ring); } .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-center .wc-t, .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-center .wc-b { color: var(--wc-text); } .wheel-wrap[data-skin]:not([data-skin="classic"]) .wheel-center::after { animation-name: wheelCenterPulseSkin; } @keyframes wheelCenterPulseSkin { 0%, 100% { box-shadow: 0 0 0 2px var(--wc-ring), 0 0 16px 4px var(--wc-glow); } 50% { box-shadow: 0 0 0 3px var(--wc-ring), 0 0 32px 10px var(--wc-glow); } } /* 九宫格 / 环形跑道是「面板式」皮肤：中心按钮改方形，与整块底板语言一致 */ .wheel-wrap[data-skin="grid9"] .wheel-center, .wheel-wrap[data-skin="ring"] .wheel-center { border-radius: 26px; } .wheel-wrap[data-skin="grid9"] .wheel-center::before, .wheel-wrap[data-skin="ring"] .wheel-center::before { border-radius: 20px; } .wheel-wrap[data-skin="grid9"] .wheel-center::after, .wheel-wrap[data-skin="ring"] .wheel-center::after { border-radius: 32px; } /* 九宫格放满第 9 个奖品时它正好落在中心格，隐藏 124px 的悬浮「开始」按钮，否则按钮会整块盖住中心格（表现为第 9 格加不进奖品），此时用下方的「开始抽奖」按钮。 */ .wheel-wrap[data-skin="grid9"].grid-center-hidden .wheel-center { display: none !important; } /* 画布位图按「显示宽度 × devicePixelRatio」生成，与屏幕物理像素 1:1，浏览器不再二次缩放，保持默认平滑过滤即可 */ .wheel-wrap canvas { display: block; width: 100%; height: auto; position: relative; z-index: 1; image-rendering: auto; } /* ---------- 高亮 / 高闪：光环脉冲 + 流光扫过 + 跑马灯灯泡 ---------- */ /* 底盘外围脉冲光环 */ .wheel-halo { position: absolute; inset: -5%; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(255, 215, 0, 0) 50%, rgba(255, 196, 60, 0.5) 60%, rgba(255, 120, 40, 0.3) 68%, rgba(157, 107, 255, 0.34) 76%, rgba(157, 107, 255, 0) 85%); filter: blur(9px); animation: wheelHaloPulse 2.4s ease-in-out infinite; } @keyframes wheelHaloPulse { 0%, 100% { opacity: 0.5; transform: scale(0.97); } 50% { opacity: 1; transform: scale(1.05); } } /* 盘面流光扫过（旋转高光） */ .wheel-gloss { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: 5; background: conic-gradient(from 0deg, rgba(255, 255, 255, 0) 0deg, rgba(255, 255, 255, 0) 32deg, rgba(255, 252, 214, 0.32) 50deg, rgba(255, 255, 255, 0.06) 62deg, rgba(255, 255, 255, 0) 76deg, rgba(255, 255, 255, 0) 360deg); -webkit-mask: radial-gradient(closest-side, transparent 0 27%, #000 40% 92%, transparent 98%); mask: radial-gradient(closest-side, transparent 0 27%, #000 40% 92%, transparent 98%); mix-blend-mode: screen; animation: wheelGlossSpin 3s linear infinite; will-change: transform; } @keyframes wheelGlossSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 外圈跑马灯灯泡（依次爆闪） */ .wheel-bulbs { position: absolute; left: 50%; top: 50%; width: 87.5%; height: 87.5%; transform: translate(-50%, -50%); pointer-events: none; z-index: 6; } .wheel-bulbs i { position: absolute; width: 2.6%; height: 2.6%; min-width: 9px; min-height: 9px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle at 35% 30%, #fffdf0, #ffe066 45%, #d99400 100%); box-shadow: 0 0 6px 2px rgba(255, 220, 110, 0.95), 0 0 15px 5px rgba(255, 180, 40, 0.6); animation: wheelBulbFlash 1.1s ease-in-out infinite; animation-delay: var(--bd, 0s); } .wheel-bulbs i.alt { background: radial-gradient(circle at 35% 30%, #ffffff, #dcc7ff 45%, #8b3ff2 100%); box-shadow: 0 0 6px 2px rgba(214, 186, 255, 0.95), 0 0 15px 5px rgba(139, 63, 242, 0.65); } @keyframes wheelBulbFlash { 0%, 100% { opacity: 0.3; filter: brightness(0.7); } 50% { opacity: 1; filter: brightness(1.7); } } /* 星光闪烁动画（通用） */ @keyframes wheelStarTwinkle { 0%, 100% { opacity: 0.4; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } } /* 豪华紫晶菱形指针（金框 + 紫宝石 + 底部尖角） */ .wheel-pointer { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); width: 40px; height: 48px; background: linear-gradient(135deg, #fff8dc, #f7ce55 42%, #a9771a); clip-path: polygon(50% 0%, 92% 38%, 50% 100%, 8% 38%); filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 14px rgba(255, 215, 0, 0.9)); z-index: 8; pointer-events: none; } .wheel-pointer::before { content: ''; position: absolute; inset: 4px 7px; background: radial-gradient(circle at 38% 28%, #ffffff 0%, #e3cdff 20%, #a86bff 52%, #5b21b6 100%); clip-path: polygon(50% 0%, 92% 38%, 50% 100%, 8% 38%); filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.85)); } /* 中心「开始抽奖」紫色宝石按钮 + 金色齿轮边框 */ .wheel-gear { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 176px; height: 176px; pointer-events: none; z-index: 6; filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.75)) drop-shadow(0 0 26px rgba(157, 107, 255, 0.5)); animation: wheelGearSpin 26s linear infinite; } @keyframes wheelGearSpin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } } .wheel-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 124px; height: 124px; border-radius: 50%; background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 36%), radial-gradient(circle at 50% 46%, #c39bff 0%, #8b3ff2 44%, #5217a8 72%, #26055c 100%); border: 5px solid #f5c542; box-shadow: 0 0 0 3px rgba(90, 30, 170, 0.85), 0 0 0 7px rgba(245, 197, 66, 0.45), 0 0 34px rgba(157, 107, 255, 0.9), 0 0 80px rgba(255, 215, 0, 0.35), inset 0 4px 16px rgba(255, 255, 255, 0.5), inset 0 -10px 22px rgba(30, 0, 80, 0.7); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; z-index: 7; transition: transform 0.18s ease, box-shadow 0.18s ease; user-select: none; } /* 内圈细金线 + 玻璃高光 */ .wheel-center::before { content: ''; position: absolute; inset: 9px; border-radius: 50%; border: 1.5px solid rgba(255, 240, 190, 0.6); box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.35); pointer-events: none; } /* 中心按钮脉冲金环（高闪） */ .wheel-center::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none; animation: wheelCenterPulse 1.5s ease-in-out infinite; } @keyframes wheelCenterPulse { 0%, 100% { box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.8), 0 0 16px 4px rgba(255, 215, 0, 0.5), 0 0 40px 8px rgba(157, 107, 255, 0.4); } 50% { box-shadow: 0 0 0 3px rgba(255, 246, 205, 1), 0 0 32px 10px rgba(255, 215, 0, 0.95), 0 0 78px 18px rgba(157, 107, 255, 0.7); } } .wheel-center:hover { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 0 0 3px rgba(90, 30, 170, 0.9), 0 0 0 7px rgba(245, 197, 66, 0.6), 0 0 48px rgba(157, 107, 255, 1), 0 0 100px rgba(255, 215, 0, 0.5), inset 0 4px 16px rgba(255, 255, 255, 0.6), inset 0 -10px 22px rgba(30, 0, 80, 0.7); } .wheel-center:active { transform: translate(-50%, -50%) scale(0.96); } .wheel-center .wc-t, .wheel-center .wc-b { position: relative; font-family: "Microsoft YaHei", sans-serif; font-weight: 900; color: #ffe98a; text-shadow: 0 1px 0 rgba(60, 10, 0, 0.85), 0 0 14px rgba(255, 215, 0, 0.9), 0 0 3px rgba(255, 255, 255, 0.6); line-height: 1.14; } .wheel-center .wc-t { font-size: 23px; letter-spacing: 7px; text-indent: 7px; } .wheel-center .wc-b { font-size: 25px; letter-spacing: 7px; text-indent: 7px; } /* 中心文字高闪 */ .wheel-center .wc-t, .wheel-center .wc-b { animation: wheelTextFlash 1.5s ease-in-out infinite; } @keyframes wheelTextFlash { 0%, 100% { text-shadow: 0 1px 0 rgba(60, 10, 0, 0.85), 0 0 10px rgba(255, 215, 0, 0.7), 0 0 3px rgba(255, 255, 255, 0.5); } 50% { text-shadow: 0 1px 0 rgba(60, 10, 0, 0.85), 0 0 24px rgba(255, 238, 160, 1), 0 0 9px rgba(255, 255, 255, 0.95); } } /* 指针高闪 */ .wheel-pointer { animation: wheelPointerFlash 1.5s ease-in-out infinite; } @keyframes wheelPointerFlash { 0%, 100% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 10px rgba(255, 215, 0, 0.7)); } 50% { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 28px rgba(255, 244, 170, 1)); } } .wheel-center.busy { cursor: default; animation: wheelBusy 0.9s ease-in-out infinite; } @keyframes wheelBusy { 0%, 100% { box-shadow: 0 0 0 3px rgba(90, 30, 170, 0.9), 0 0 0 7px rgba(245, 197, 66, 0.5), 0 0 30px rgba(255, 215, 0, 0.9), inset 0 3px 14px rgba(255, 255, 255, 0.6), inset 0 -10px 22px rgba(30, 0, 80, 0.7); } 50% { box-shadow: 0 0 0 3px rgba(90, 30, 170, 1), 0 0 0 7px rgba(245, 197, 66, 0.75), 0 0 52px rgba(255, 215, 0, 1), inset 0 3px 14px rgba(255, 255, 255, 0.75), inset 0 -10px 22px rgba(30, 0, 80, 0.7); } } .draw-actions { display: flex; flex-direction: column; align-items: center; gap: 12px; } .multi-row { display: flex; gap: 10px; } .draw-hint { color: var(--text-dim); font-size: 13px; } .draw-hint b { color: var(--accent); } /* ---------- 奖池预览 ---------- */ .prize-panel h3 { color: var(--accent); font-size: 20px; letter-spacing: 2px; margin-bottom: 14px; } .prize-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .prize-item { flex: 0 1 250px; min-width: 220px; display: flex; align-items: center; gap: 12px; background: linear-gradient(160deg, var(--card-bg), rgba(20, 10, 50, 0.7)); border: 1px solid var(--card-border); border-radius: 14px; padding: 12px 14px; text-align: left; transition: transform 0.25s ease, box-shadow 0.25s ease; position: relative; } .prize-item:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 10px 24px var(--glow); } .prize-item img { width: 62px; height: 62px; object-fit: cover; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0,0,0,0.3); flex-shrink: 0; } .prize-item .p-info { flex: 1; min-width: 0; } .prize-item .p-name { font-size: 14px; font-weight: 700; line-height: 1.25; } .prize-item .p-meta { font-size: 12px; color: var(--text-dim); margin-top: 4px; } .prize-item .p-meta b { color: var(--accent); } .prize-item .p-desc { font-size: 11px; color: var(--text-dim); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .badge-featured { position: absolute; top: 8px; right: 8px; background: linear-gradient(90deg, #ff3d6e, #ff7a00); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 8px; } .badge-off { position: absolute; top: 8px; right: 8px; background: rgba(120,120,120,0.75); color: #fff; font-size: 10px; padding: 2px 7px; border-radius: 8px; } .stock-low { color: var(--danger); font-weight: 700; } /* ---------- 记录 ---------- */ .mini-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .mini-stats > div { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 20px; color: var(--text2); font-size: 13px; } .mini-stats b { color: var(--accent); font-size: 20px; margin-right: 4px; } .record-list { display: flex; flex-direction: column; gap: 10px; } .record-item { display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 16px; } .record-item img { width: 46px; height: 46px; border-radius: 10px; object-fit: cover; border: 1px solid rgba(255,255,255,0.2); background: rgba(0,0,0,0.3); } .record-item .r-name { font-weight: 700; } .record-item .r-name.win { color: var(--accent); } .record-item .r-time { color: var(--text-dim); font-size: 12px; margin-left: auto; } .record-item .r-cost { color: var(--text-dim); font-size: 12px; } .empty-state { text-align: center; padding: 46px 20px; color: var(--text-dim); font-size: 14px; border: 1px dashed var(--card-border); border-radius: 14px; } /* ---------- 排行榜 ---------- */ .rank-tabs { display: flex; gap: 10px; margin-bottom: 16px; } .rank-tabs .tab { padding: 8px 20px; border-radius: 18px; border: 1px solid var(--card-border); background: transparent; color: var(--text2); cursor: pointer; font-size: 14px; } .rank-tabs .tab.active { background: var(--btn-grad2); color: #241434; font-weight: 800; border-color: transparent; } .rank-list { display: flex; flex-direction: column; gap: 10px; } .rank-item { display: flex; align-items: center; gap: 14px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 12px 18px; } .rank-item.me { border-color: var(--accent); box-shadow: 0 0 14px var(--glow); } .rank-no { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; background: rgba(255,255,255,0.08); color: var(--text2); flex: 0 0 auto; } .rank-no.top1 { background: linear-gradient(135deg, #ffd700, #ff9f00); color: #3a2400; } .rank-no.top2 { background: linear-gradient(135deg, #d9e2ea, #9aa7b5); color: #24303c; } .rank-no.top3 { background: linear-gradient(135deg, #f2b08c, #c96a3a); color: #3a1a08; } .rank-user { flex: 1; min-width: 0; } .rank-user .u-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank-user .u-sub { color: var(--text-dim); font-size: 12px; } .rank-val { color: var(--accent); font-weight: 800; font-size: 18px; } .rank-val small { font-size: 12px; color: var(--text-dim); font-weight: 400; } /* ---------- 任务中心 ---------- */ .task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; } .task-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; } .task-card h4 { color: var(--accent); font-size: 17px; letter-spacing: 1px; } .task-desc { color: var(--text2); font-size: 13px; line-height: 1.6; } .task-desc b { color: var(--accent); } .streak { color: var(--text-dim); font-size: 13px; } .streak b { color: var(--accent); font-size: 16px; } .task-claim.claimed { background: rgba(255,255,255,0.1); color: var(--text-dim); border: 1px solid var(--card-border); } .code-row { display: flex; gap: 8px; } .code-row input { flex: 1; height: 42px; padding: 0 12px; border: 1px solid var(--card-border); border-radius: 10px; background: rgba(0,0,0,0.35); color: var(--text); outline: none; font-size: 16px; /* ≥16px，避免 iOS 聚焦自动放大整页 */ } .code-row input::placeholder { color: var(--text-dim); } .prefs-card { margin-top: 18px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 16px; padding: 20px; } .prefs-card h4 { color: var(--accent); margin-bottom: 14px; } .prefs-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: var(--text2); font-size: 14px; } .theme-btn { padding: 7px 16px; border-radius: 18px; border: 1px solid var(--card-border); background: transparent; color: var(--text2); cursor: pointer; font-size: 13px; transition: 0.2s; } .theme-btn:hover { color: var(--accent); border-color: var(--accent); } .theme-btn.active { background: var(--btn-grad2); color: #241434; font-weight: 800; border-color: transparent; } .prefs-row .sep { width: 1px; height: 22px; background: var(--card-border); margin: 0 4px; } /* ---------- 弹窗 ---------- */ .modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.78); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .modal.open { display: flex; } .modal-content { width: min(480px, 100%); max-height: 86vh; overflow-y: auto; background: linear-gradient(155deg, #2a1858, #140b33); border: 2px solid var(--accent); border-radius: 20px; box-shadow: 0 0 44px var(--glow); text-align: center; padding: 30px 28px; animation: modalPop 0.35s ease; } .modal-content.wide { width: min(560px, 100%); } @keyframes modalPop { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-content h3 { font-size: 26px; color: var(--accent); letter-spacing: 3px; margin-bottom: 16px; } #resultImg { width: 150px; height: 150px; object-fit: cover; border-radius: 14px; border: 2px solid var(--accent); box-shadow: 0 0 22px var(--glow); margin: 8px auto 14px; display: block; background: rgba(0,0,0,0.3); } #resultName { font-size: 20px; font-weight: 700; margin-bottom: 20px; } /* 中奖积分到账提示（结果弹窗 / 连抽弹窗共用） */ .result-payout { display: inline-block; margin: -8px auto 18px; padding: 7px 16px; border-radius: 999px; font-size: 14px; font-weight: 700; color: #7a4a00; background: linear-gradient(135deg, #ffe6a8, #ffc24d); border: 1px solid rgba(255, 173, 43, 0.85); box-shadow: 0 6px 16px rgba(255, 173, 43, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7); animation: payoutPop 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); } .result-payout.hidden { display: none; } @keyframes payoutPop { 0% { transform: scale(0.82); opacity: 0; } 100% { transform: scale(1); opacity: 1; } } .multi-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; margin-bottom: 18px; } .multi-item { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,0.05); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 12px; font-size: 14px; } .multi-item img { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; background: rgba(0,0,0,0.3); } .multi-item .m-name { flex: 1; text-align: left; font-weight: 600; } .multi-item .m-name.win { color: var(--accent); } .multi-item .m-flag { font-size: 12px; } .form-line { margin-bottom: 12px; text-align: left; } .form-line label { display: block; color: var(--text2); font-size: 13px; margin-bottom: 6px; } .form-line input { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--card-border); border-radius: 10px; background: rgba(0,0,0,0.35); color: var(--text); outline: none; font-size: 16px; /* ≥16px，避免 iOS 聚焦自动放大整页 */ } .form-line input:focus { border-color: var(--accent); } .user-stat-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; } .user-stat-row div { background: rgba(255,255,255,0.06); border: 1px solid var(--card-border); border-radius: 10px; padding: 8px 14px; font-size: 13px; color: var(--text2); } .user-stat-row b { color: var(--accent); font-size: 17px; } /* ---------- Toast ---------- */ .toast { position: fixed; top: 24px; left: 50%; transform: translateX(-50%) translateY(-80px); padding: 11px 24px; border-radius: 30px; background: rgba(20, 12, 48, 0.94); border: 1px solid var(--accent); color: #fff; font-size: 14px; z-index: 200; transition: transform 0.3s ease, opacity 0.3s; opacity: 0; pointer-events: none; box-shadow: 0 6px 22px rgba(0,0,0,0.4); } .toast.show { transform: translateX(-50%) translateY(0); opacity: 1; } .toast.err { border-color: var(--danger); } /* ---------- 彩带 ---------- */ .confetti { position: fixed; top: -16px; width: 10px; height: 16px; z-index: 150; pointer-events: none; border-radius: 2px; animation: confettiFall linear forwards; } @keyframes confettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(105vh) rotate(720deg); opacity: 0.6; } } /* ---------- 响应式 ---------- */ @media (max-width: 900px) { .hall-layout { grid-template-columns: 1fr; } } @media (max-width: 768px) { .logo-title { font-size: 30px; letter-spacing: 4px; } .stat-cards { grid-template-columns: repeat(2, 1fr); } .topbar-inner { justify-content: center; text-align: center; } .btn.draw { min-width: 100%; } main { padding: 18px 14px 50px; } } @media (max-width: 420px) { .task-grid { grid-template-columns: 1fr; } .multi-row { width: 100%; } .multi-row .btn { flex: 1; } } /* 动效降级 */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ============================================================ * 十种抽奖玩法样式 * ============================================================ */ /* ---------- 玩法选择栏 ---------- */ .mode-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 18px; position: relative; z-index: 10; /* 高于转盘装饰层，避免「🎡 幸运转盘」被外扩的光芒/光环盖住 */ } .mode-bar button { border: 1px solid var(--card-border); background: rgba(20, 10, 50, 0.55); color: var(--text2); border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer; transition: all 0.2s; } .mode-bar button:hover { border-color: var(--accent); color: var(--text); } .mode-bar button.active { background: var(--btn-grad); color: #fff; border-color: transparent; box-shadow: 0 4px 16px var(--glow); font-weight: 700; } /* ---------- 玩法舞台 ---------- */ .game-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 20px; padding: 22px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 22px var(--glow); text-align: center; } .game-pane { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .game-hint { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; } .game-hint::before { content: "\1F4A1 "; } /* 揭晓内容通用 */ /* ============================================================ * 高端视觉体系：清淡鲜亮底 × 磨砂玻璃 × 珠光金属 * ------------------------------------------------------------ * 主页 / 面板 / 弹窗共用的表面语言，只管环境与容器的质感， * 转盘本体仍由 js/skins.js 绘制，各盘型的命名与布局逻辑不变。 * ============================================================ */ /* ---------- 页面底色：清淡鲜亮渐变 + 珠光细纹 + 柔彩光晕 ---------- */ body { background: /* ① 珠光细纹：极淡的斜向丝光，让大面积浅色「有质感」而不是一块纯色 */ repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0 1px, rgba(255, 255, 255, 0) 1px 3px, rgba(0, 0, 0, 0.012) 3px 4px), /* ② 主光：右上大片明亮色深，形成清透的光照方向 */ radial-gradient(1220px 800px at 84% -10%, var(--bg3), transparent 60%), /* ③ 副光：左下补色，拉出通透的体积与明暗过渡 */ radial-gradient(940px 660px at -10% 110%, var(--bg2), transparent 62%), /* ④ 基底：清淡鲜亮的线性渐变 */ linear-gradient(160deg, var(--bg1) 0%, var(--bg2) 52%, var(--bg1) 100%); background-attachment: fixed; color: var(--text); } /* 氛围光晕：柔和彩晕缓慢漂移，制造「空间深度」而非平铺色块（内容之下的最底层） */ body::after { content: ""; position: fixed; inset: -18%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, var(--aurora-1), transparent 70%) 18% 20% / 46% 46% no-repeat, radial-gradient(closest-side, var(--aurora-2), transparent 70%) 84% 28% / 52% 52% no-repeat, radial-gradient(closest-side, var(--aurora-1), transparent 72%) 58% 90% / 60% 60% no-repeat; opacity: 0.6; filter: blur(36px) saturate(1.2); animation: auroraDrift 28s ease-in-out infinite alternate; } @keyframes auroraDrift { 0% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: 0.50; } 50% { transform: translate3d(2%, 2%, 0) scale(1.08); opacity: 0.68; } 100% { transform: translate3d(1%, -2%, 0) scale(1.03); opacity: 0.54; } } /* 彩色微粒：浅底上以少量彩色小点作为点缀，避免大面积背景过于单调 */ body::before { background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.95), transparent), radial-gradient(3px 3px at 80px 150px, var(--accent-soft), transparent), radial-gradient(2px 2px at 180px 90px, rgba(255, 255, 255, 0.9), transparent), radial-gradient(3px 3px at 260px 220px, var(--accent-soft), transparent), radial-gradient(2px 2px at 350px 120px, rgba(255, 255, 255, 0.85), transparent); opacity: 0.75; } /* ---------- 磨砂玻璃表面体系（卡片 / 面板 / 弹窗统一语言） ---------- 顶面高光渐变压出立体 + 半透明基底 + 边缘亮线。 backdrop-filter 只给下面这条里的少数大面积容器：奖池卡、记录行这类数量多的小卡片每张都做背景模糊的话低端机容易掉帧，不模糊同样有玻璃质感。 */ .game-card, .wheel-card, .stat-card, .prize-item, .task-card, .record-item, .rank-item, .mini-stats > div, .prefs-card, .login-box, .side-item, .empty-state, .asset-empty { background: linear-gradient(158deg, var(--glass-1), var(--glass-2) 46%, var(--glass-3)), var(--card-bg); border: 1px solid var(--card-border); box-shadow: 0 14px 34px var(--shadow), inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(255, 255, 255, 0.55); } /* 大面积容器做真正的背景模糊：数量少、可承受，且能透出背后的氛围光晕与底色 */ .game-card, .login-box, .side-item { backdrop-filter: blur(14px) saturate(1.25); -webkit-backdrop-filter: blur(14px) saturate(1.25); } /* ---------- 金属高光：按钮（主行动 / 播放器） ---------- */ .btn.primary, .btn.draw { background: var(--btn-grad); color: var(--btn-fg); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 12px 26px var(--glow), inset 0 1px 0 rgba(255, 255, 255, 0.8), inset 0 -10px 20px rgba(0, 0, 0, 0.16); text-shadow: 0 1px 2px rgba(255, 255, 255, 0.35); } /* 激活态标签：金属胶囊（浅金属底 + 深字 + 上缘高光） */ .tabs .tab.active, .rank-tabs .tab.active, .theme-btn.active, .mode-bar button.active, .login-tabs .tab.active, .asset-tabs .atab.active { background: var(--btn-grad2); color: #33240a; border: 1px solid rgba(255, 255, 255, 0.85); box-shadow: 0 8px 20px var(--glow), inset 0 1px 0 #ffffff, inset 0 -6px 14px rgba(0, 0, 0, 0.08); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); } /* 未激活标签：玻璃胶囊 */ .tabs .tab, .rank-tabs .tab, .theme-btn, .mode-bar button, .asset-tabs .atab { background: rgba(255, 255, 255, 0.62); border: 1px solid var(--card-border); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .tabs .tab:hover, .rank-tabs .tab:hover, .theme-btn:hover, .mode-bar button:hover, .asset-tabs .atab:hover { background: rgba(255, 255, 255, 0.9); color: var(--accent); border-color: var(--accent); } /* ---------- 顶栏 / 条幅：浅色磨砂玻璃 ---------- */ .topbar { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid var(--card-border); box-shadow: 0 8px 24px var(--shadow), inset 0 -1px 0 rgba(255, 255, 255, 0.9); } .brand { color: var(--accent); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85), 0 0 18px var(--glow); } .announce-bar { background: linear-gradient(120deg, var(--accent-soft), rgba(255, 255, 255, 0.6)); border: 1px solid var(--card-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #ffffff, 0 8px 20px var(--shadow); } .activity-bar { background: linear-gradient(90deg, var(--accent-soft), rgba(255, 255, 255, 0.55)); color: var(--accent); border-color: var(--card-border); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 #ffffff, 0 8px 20px var(--shadow); } /* ---------- 门头标语：珠光金属匾额（浅色底 + 内凹金属压边） ---------- */ .hall-slogan { color: var(--plaque-fg); background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 46%, rgba(0, 0, 0, 0.04)), repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.55) 0 1px, rgba(0, 0, 0, 0) 1px 4px), linear-gradient(135deg, var(--plaque-1), var(--plaque-2)); border: 1px solid var(--metal-2); box-shadow: 0 14px 32px var(--shadow), inset 0 1px 0 #ffffff, inset 0 -8px 20px rgba(255, 255, 255, 0.55), 0 0 26px var(--glow); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9), 0 0 16px var(--glow); } .hall-slogan::before, .hall-slogan::after { color: var(--metal-2); } /* ---------- 输入框 / 头像 / 缩略图：浅色玻璃 ---------- */ .form-pane input, .code-row input, .form-line input { background: rgba(255, 255, 255, 0.78); border-color: var(--card-border); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 2px 8px rgba(0, 0, 0, 0.05); } .form-pane input:focus, .code-row input:focus, .form-line input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), inset 0 2px 8px rgba(0, 0, 0, 0.05); } .avatar { background: rgba(255, 255, 255, 0.75); } .avatar-opt { background: rgba(255, 255, 255, 0.6); } .record-item img, .prize-item img, .multi-item img, #resultImg { background: rgba(0, 0, 0, 0.06); } .rank-no { background: rgba(255, 255, 255, 0.75); } .task-claim.claimed { background: rgba(0, 0, 0, 0.06); } /* ---------- 奖品卡 / 记录行：玻璃 + 悬停金属高光 ---------- */ .prize-item:hover { border-color: var(--accent); box-shadow: 0 18px 38px var(--shadow), 0 0 24px var(--glow), inset 0 1px 0 #ffffff; } .rank-item.me { border-color: var(--accent); box-shadow: 0 12px 26px var(--shadow), 0 0 18px var(--glow), inset 0 1px 0 #ffffff; } /* ---------- 弹窗：浅色磨砂玻璃 + 金属描边 ---------- */ .modal { background: var(--overlay); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-content { background: linear-gradient(158deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.62) 42%, rgba(255, 255, 255, 0.88)), linear-gradient(155deg, var(--bg1), var(--bg2)); border: 1.5px solid var(--accent); box-shadow: 0 26px 60px rgba(0, 0, 0, 0.22), 0 0 40px var(--glow), inset 0 1px 0 #ffffff; backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); } .modal-content h3 { color: var(--accent); text-shadow: 0 0 18px var(--glow); } #resultName { color: var(--text); } .multi-item { background: rgba(255, 255, 255, 0.65); } .user-stat-row div { background: rgba(255, 255, 255, 0.65); } .form-line label { color: var(--text2); } /* ---------- 转盘外围奢华装饰（抽奖框内） ---------- */ .wheel-lux { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* 外扩放射光芒（缓慢旋转） */ .wl-rays { position: absolute; inset: -6%; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 216, 120, 0.17) 0deg 2.2deg, rgba(255, 216, 120, 0) 2.2deg 10deg); -webkit-mask: radial-gradient(closest-side, transparent 0 62%, #000 76%, transparent 96%); mask: radial-gradient(closest-side, transparent 0 62%, #000 76%, transparent 96%); filter: blur(1.2px); opacity: 0.9; animation: wlRaysSpin 32s linear infinite; } @keyframes wlRaysSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 宝石铆钉金环（金属渐变带 + 缓慢反向旋转的流光） */ .wl-ring { position: absolute; inset: -4%; border-radius: 50%; background: conic-gradient(from 0deg, #6d4a10 0deg, #ffe9a6 14deg, #c9973a 28deg, #7a5416 42deg, #fff3c6 60deg, #d8a63f 76deg, #6d4a10 92deg, #ffe9a6 118deg, #c9973a 142deg, #7a5416 168deg, #fff3c6 196deg, #d8a63f 224deg, #6d4a10 252deg, #ffe9a6 286deg, #c9973a 318deg, #7a5416 340deg, #ffe9a6 354deg, #6d4a10 360deg); -webkit-mask: radial-gradient(closest-side, transparent 0 87%, #000 90% 99%, transparent 100%); mask: radial-gradient(closest-side, transparent 0 87%, #000 90% 99%, transparent 100%); filter: drop-shadow(0 0 7px rgba(255, 196, 60, 0.55)); animation: wlRingSpin 46s linear infinite reverse; } @keyframes wlRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 环上宝石与金钉 */ .wl-gems { position: absolute; inset: -4%; border-radius: 50%; } .wl-gem { position: absolute; width: 3%; height: 3%; min-width: 10px; min-height: 10px; transform: translate(-50%, -50%) rotate(45deg); border-radius: 3px; background: linear-gradient(135deg, #fffdf2, #f4c757 45%, #a6741b 100%); box-shadow: 0 0 8px 2px rgba(255, 205, 90, 0.7), inset 0 0 4px rgba(255, 255, 255, 0.85); animation: wlGemShine 2.6s ease-in-out infinite; } .wl-gem.ruby { background: linear-gradient(135deg, #ffe7ef, #ff5a86 45%, #8c0d2c 100%); box-shadow: 0 0 9px 3px rgba(255, 90, 134, 0.65), inset 0 0 4px rgba(255, 255, 255, 0.8); animation-delay: 0.5s; } .wl-gem.amethyst { background: linear-gradient(135deg, #f6ecff, #a86bff 45%, #4a1e8f 100%); box-shadow: 0 0 9px 3px rgba(168, 107, 255, 0.7), inset 0 0 4px rgba(255, 255, 255, 0.8); animation-delay: 1.1s; } @keyframes wlGemShine { 0%, 100% { filter: brightness(0.82); } 50% { filter: brightness(1.5); } } /* 漂浮星尘 */ .wl-dust { position: absolute; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, #ffffff 0%, #ffe08a 45%, rgba(255, 190, 60, 0) 74%); box-shadow: 0 0 10px 3px rgba(255, 205, 90, 0.6); animation: wlDustFloat 4.8s ease-in-out infinite; } @keyframes wlDustFloat { 0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.7); } 50% { opacity: 1; transform: translate(-50%, -80%) scale(1.25); } } /* 抽奖框四角金色卷草纹（巴洛克花饰） */ .wl-corner { position: absolute; width: 96px; height: 96px; pointer-events: none; z-index: 2; filter: drop-shadow(0 0 9px rgba(255, 200, 70, 0.5)); animation: wlCornerGlow 3.8s ease-in-out infinite; } .wl-corner-tl { top: -8px; left: -8px; } .wl-corner-tr { top: -8px; right: -8px; transform: rotate(90deg); animation-delay: 0.9s; } .wl-corner-br { bottom: -8px; right: -8px; transform: rotate(180deg); animation-delay: 1.8s; } .wl-corner-bl { bottom: -8px; left: -8px; transform: rotate(270deg); animation-delay: 2.7s; } @keyframes wlCornerGlow { 0%, 100% { opacity: 0.72; filter: drop-shadow(0 0 6px rgba(255, 200, 70, 0.35)); } 50% { opacity: 1; filter: drop-shadow(0 0 14px rgba(255, 216, 110, 0.8)); } } /* 转盘下方奖池预览 */ .wheel-pool-wrap { margin: 20px auto 0; max-width: 780px; text-align: left; position: relative; z-index: 10; /* 高于转盘装饰层，确保「🎁 奖池预览」标题与卡片不被压住 */ } .wheel-pool-wrap h3 { color: var(--accent); font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; text-align: center; text-shadow: 0 0 12px var(--glow); } .wheel-pool-wrap .prize-list { justify-content: center; } @media (max-width: 768px) { .hall-layout.wheel-mode { max-width: 100%; } .wl-corner { width: 62px; height: 62px; } .wl-gem { min-width: 8px; min-height: 8px; } .wl-dust { display: none; } } /* ========================================================================== 本次新增：限时活动倒计时 / 左右侧边栏素材 / 音乐播放器 ========================================================================== */ /* 限时活动条幅的样式已与「系统公告条幅」并列定义在文件上部（.activity-bar） */ /* ---------- 左右素材侧边栏 ---------- 宽度 / 单个素材最大高度由后台「侧边栏素材 → 显示尺寸」写入的 CSS 变量驱动，变量缺失时回退默认值（160px / 190px），因此前台永远有话可说、不会塌陷。 */ .side-rail { position: fixed; top: 96px; bottom: 92px; width: var(--rail-w, 160px); display: flex; flex-direction: column; gap: 10px; overflow-y: auto; overflow-x: hidden; padding: 4px; z-index: 20; scrollbar-width: thin; } .side-rail.side-left { left: 10px; } .side-rail.side-right { right: 10px; } .side-item { flex: 0 0 auto; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06); } .side-item img, .side-item video { display: block; width: 100%; height: auto; max-height: var(--side-item-maxh, 190px); object-fit: cover; background: rgba(0, 0, 0, 0.04); } .side-title { padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--accent); line-height: 1.3; border-bottom: 1px solid var(--card-border); } /* 文字素材字号随侧栏宽度自适应：窄栏不溢出，宽栏更易读 */ .side-text { padding: 10px; font-size: clamp(12px, calc(var(--rail-w, 160px) / 12), 15px); line-height: 1.6; word-break: break-word; } .side-link { display: block; color: inherit; text-decoration: none; } .side-empty { padding: 14px 8px; text-align: center; font-size: 12px; color: var(--text-dim); border: 1px dashed var(--card-border); border-radius: 12px; } /* 说明：前台侧边栏已改为只读展示，原来的「＋添加素材」按钮已移除，编辑能力统一迁移到后台「侧边栏素材」面板 */ /* 窄屏：侧栏隐藏，用这个小圆按钮打开只读预览面板 —— 不遮挡主内容 */ .rail-toggle { display: none; position: fixed; left: 14px; bottom: 88px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--card-border); background: var(--card-bg); color: var(--accent); font-size: 20px; cursor: pointer; z-index: 30; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15); } /* ---------- 素材管理面板 ---------- */ .asset-modal { max-width: 520px; max-height: 86vh; overflow-y: auto; text-align: left; } .asset-modal h3 { margin-bottom: 12px; } .asset-tabs { display: flex; gap: 8px; margin-bottom: 12px; } .asset-tabs .atab { flex: 1; padding: 9px 0; border-radius: 10px; cursor: pointer; border: 1px solid var(--card-border); background: transparent; color: var(--text2); font-size: 14px; } .asset-tabs .atab.active { background: var(--btn-grad); border-color: transparent; font-weight: 700; } /* 只读预览列表：仅展示素材，不提供任何编辑入口（编辑在后台） */ .asset-view { max-height: 54vh; overflow-y: auto; margin-bottom: 12px; } .asset-view .side-item { margin-bottom: 10px; } .asset-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--text-dim); border: 1px dashed var(--card-border); border-radius: 10px; } .asset-tip { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; min-height: 18px; } #assetClose { width: 100%; margin-bottom: 10px; } /* ---------- 响应式：宽屏显示侧栏，窄屏隐藏侧栏避免遮挡 ---------- */ @media (min-width: 1180px) { .side-rail { display: flex; } .rail-toggle { display: none; } } @media (max-width: 1179px) { .side-rail { display: none; } .rail-toggle { display: block; } } /* 中等宽度：视口装不下「1200px 正文 + 两侧侧栏」时，让正文整体左右避让，保证侧栏与正文永不重叠。避让量跟随后台设置的侧栏宽度（+22px 间隙），所以把侧栏调宽也不会被正文压住。>1540px 时正文两侧空白已足够，无需避让。 */ @media (min-width: 1180px) and (max-width: 1540px) { #mainView main, #mainView .topbar-inner, #mainView .announce-bar, #mainView .activity-bar, #mainView .tabs { box-sizing: border-box; padding-left: calc(var(--rail-w, 160px) + 22px); padding-right: calc(var(--rail-w, 160px) + 22px); } } @media (max-width: 520px) { .rail-toggle { left: 12px; bottom: 80px; } /* 超窄屏：两条条幅统一收窄内边距，活动条幅保持「左标签 + 右倒计时」单行，标签过长自动省略号，倒计时始终贴右，位置不会漂移。 */ .announce-bar { padding: 9px 14px; } .activity-bar { padding: 8px 14px; } } /* ---------- 轮播图点击交互 / 点击展示内容弹窗 ---------- */ /* 只有后台配置了「跳转链接」或「展示内容」时才会加上这个类 → 未编辑时点击无任何反应 */ .banner-clickable { cursor: pointer; } .banner-detail { max-width: 720px; max-height: 86vh; overflow-y: auto; text-align: left; } .banner-detail h3 { margin-bottom: 10px; } .banner-detail #bdText { white-space: pre-wrap; word-break: break-word; line-height: 1.75; font-size: 15px; color: var(--text2); margin: 0 0 14px; } .bd-posters { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 14px; } .bd-posters a { display: block; } .bd-posters img { display: block; width: 100%; border-radius: 10px; border: 1px solid var(--card-border); } .bd-videos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; } .bd-video-title { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px; } .bd-videos video { display: block; width: 100%; border-radius: 10px; background: #000; } .banner-detail #bdClose { width: 100%; } /* ---------- 移动端稳定性收尾 ---------- */ @media (max-width: 768px) { /* 固定定位背景在移动端滚动时会触发整页重绘（卡顿/闪烁来源之一），小屏改为随页面滚动绘制；桌面端保持 fixed 的渐变观感。 */ body { background-attachment: scroll; } /* 系统公告 / 限时活动两条独立条幅：块级独立、各自 hidden 不占位，纵向用 margin 分隔，永远不会重叠或错位。 */ .announce-bar { margin-top: 12px; } .activity-bar { margin-top: 10px; } /* 公告文字按需换行但不撑破容器；活动条幅保持单行（左侧标签超长自动省略号，右侧倒计时 nowrap 贴右，位置不漂移）。 */ .announce-text { overflow-wrap: anywhere; } /* 禁止双击缩放：部分 Android 浏览器即使 viewport 锁定 still 会双击放大，这正是"界面反复缩放、布局被来回调整"的来源之一。 touch-action: manipulation 只禁用双击缩放，不影响正常滚动与点击。 */ .btn, .tab, .announce-bar, .activity-bar, .banner-clickable { touch-action: manipulation; } } /* ========================================================================== * 转盘舞台与沉浸氛围（容器 / 环境 / 氛围的质感：清透展台、顶部柔光、外圈光晕、落地投影） * 转盘本体的绘制、旋转、指针与特效仍由 js/skins.js 负责，不改任何盘型的布局与交互。 * ========================================================================== */ /* 转盘展台：给画布一个「清透宝石展示台」的底，衬托盘面高光与金属结构 */ .hall-layout.wheel-mode .game-card { position: relative; background: radial-gradient(130% 96% at 50% -8%, rgba(255, 255, 255, 0.95), transparent 60%), radial-gradient(closest-side at 50% 45%, #ffffff, var(--stage-1) 70%, var(--stage-2) 100%); border: 1px solid var(--card-border); box-shadow: 0 26px 64px var(--shadow), inset 0 1px 0 #ffffff, inset 0 0 90px rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.7); } /* 台面顶光：从上方打下一束柔光，令盘体周围形成自然明暗过渡（不遮挡内容） */ .hall-layout.wheel-mode .game-card::before { content: ""; position: absolute; left: 50%; top: -6%; width: 78%; height: 58%; transform: translateX(-50%); background: radial-gradient(closest-side, var(--glow), transparent 72%); opacity: 0.7; filter: blur(30px); pointer-events: none; z-index: 0; } /* 转盘外圈氛围光：随主题换色的柔光晕，让盘体「悬浮」于展台之上 */ .wheel-wrap::before { content: ""; position: absolute; inset: -6%; z-index: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, var(--glow), transparent 72%); filter: blur(24px); opacity: 0.9; } /* 台面倒影：盘体下方一抹渐隐压暗，强化「放置物」的体积与落地感 */ .wheel-wrap::after { content: ""; position: absolute; left: 50%; bottom: -5%; width: 62%; height: 12%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 90, 40, 0.3), transparent 72%); filter: blur(10px); pointer-events: none; z-index: 0; } /* 分层入场动效：面板内的卡片依次淡入上浮，增强「揭晓」的层次与仪式感 */ @keyframes riseIn { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } .tab-pane.active .stat-card, .tab-pane.active .game-card, .tab-pane.active .prize-panel, .tab-pane.active .task-card, .tab-pane.active .record-item, .tab-pane.active .rank-item { animation: riseIn 0.5s cubic-bezier(0.22, 0.61, 0.36, 1) both; } .tab-pane.active .stat-card:nth-child(2) { animation-delay: 0.05s; } .tab-pane.active .stat-card:nth-child(3) { animation-delay: 0.10s; } .tab-pane.active .stat-card:nth-child(4) { animation-delay: 0.15s; } /* 移动端：氛围层降级为静态，避免固定定位 + 模糊在大面积上持续重绘 */ @media (max-width: 768px) { body::after { animation: none; opacity: 0.4; } .hall-layout.wheel-mode .game-card::before { filter: blur(18px); } .wheel-wrap::before { filter: blur(16px); opacity: 0.7; } } /* 动效降级：关闭极光漂移与入场动画（沿用系统偏好） */ @media (prefers-reduced-motion: reduce) { body::after { animation: none; } } /* ========================================================================== 老虎机（第二个抽奖玩法）：机台 / 卷轴 / 口数切换 / 下注区 / 实时开奖 / 我的战绩 · 奖品、概率、库存、开奖记录都与转盘独立 · 2~9 口共用同一套结构与动画，尺寸只由 --reel-w / --reel-h / --reel-font 三个变量驱动（front.js 的 applySlotMetrics 按口数与可用宽度下发），因此任意口数的观感、动效节奏与交互完全一致。 ========================================================================== */ /* ---- 拉杆：与机台并排的第二个开奖入口（点击 =「开转老虎机」） ---- 机台在舞台里自适应宽度，拉杆固定宽度；窄屏只收窄拉杆，不换行也不裁切机台。 */ .slot-stage { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; } .slot-stage .slot-cabinet { flex: 1 1 auto; min-width: 0; margin: 0; } .slot-lever { position: relative; flex: 0 0 64px; width: 64px; height: 232px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .slot-lever:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 14px; } /* 底座：金属块 */ .slot-lever .lever-base { position: absolute; left: 50%; bottom: 0; width: 58px; height: 36px; transform: translateX(-50%); border-radius: 12px 12px 16px 16px; background: linear-gradient(165deg, #79818f, #333a46 52%, #14171d); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: 0 12px 22px var(--shadow), inset 0 2px 0 rgba(255, 255, 255, 0.22), inset 0 -4px 8px rgba(0, 0, 0, 0.45); } /* 杆身：以底座为轴下拉回弹 */ .slot-lever .lever-rod { position: absolute; left: 50%; bottom: 28px; width: 13px; height: 126px; transform-origin: 50% 100%; transform: translateX(-50%); transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1); border-radius: 9px; background: linear-gradient(90deg, #8f97a4, #f2f5f9 44%, #737b89); box-shadow: 0 6px 14px var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.4); } /* 握把：红宝石球，待机时轻微上下浮动，暗示「可以拉」 */ .slot-lever .lever-knob { position: absolute; left: 50%; top: -19px; width: 32px; height: 32px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 34% 28%, #ffe0b0, #ff9440 40%, #e0222b 74%, #8d1017); box-shadow: 0 8px 16px rgba(224, 34, 43, 0.42), inset 0 -3px 7px rgba(0, 0, 0, 0.4), inset 0 3px 7px rgba(255, 255, 255, 0.5); animation: slotLeverBob 2.4s ease-in-out infinite; } @keyframes slotLeverBob { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-4px); } } /* 开奖中：拉杆压到底并停住，开奖结束后回弹，让玩家清楚「这一拉已经生效」 */ .slot-lever.busy .lever-rod { transform: translateX(-50%) translateY(42px) scaleY(0.72); transition-duration: 0.3s; } .slot-lever.busy .lever-knob { animation: none; } .slot-lever.busy { cursor: not-allowed; opacity: 0.72; } /* 「拉」字提示（在握把上方） */ .slot-lever .lever-tip { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--text-dim); } @media (max-width: 640px) { .slot-stage { gap: 8px; } .slot-lever { flex: 0 0 44px; width: 44px; height: 178px; } .slot-lever .lever-base { width: 40px; height: 28px; } .slot-lever .lever-rod { bottom: 22px; width: 11px; height: 98px; } .slot-lever .lever-knob { width: 26px; height: 26px; top: -16px; } .slot-lever .lever-tip { display: none; } } /* 机台外壳：深色鎏金 + 霓虹描边 */ .slot-cabinet { position: relative; width: 100%; max-width: 580px; margin: 0 auto; padding: 14px 16px 14px; border-radius: var(--slot-radius, 22px); text-align: center; background: radial-gradient(120% 78% at 50% -12%, rgba(255, 214, 120, 0.22), transparent 62%), var(--slot-cab-bg2, linear-gradient(158deg,#fff6dc,#ffd875 48%,#f0b64a)), var(--slot-cab-bg1, rgba(255,255,255,0.95)); border: 1px solid var(--slot-cab-border, rgba(201,130,12,0.22)); box-shadow: var(--slot-cab-shadow, 0 18px 42px rgba(150,112,34,0.20)), inset 0 1px 0 var(--glass-edge), inset 0 -1px 0 rgba(255, 255, 255, 0.55); transition: box-shadow 0.35s ease, border-color 0.35s ease; } /* 中奖：整机金光呼吸 */ .slot-cabinet.win-glow { border-color: rgba(255, 196, 66, 0.85); box-shadow: 0 20px 52px rgba(255, 176, 32, 0.30), 0 0 0 2px rgba(255, 196, 66, 0.32), inset 0 1px 0 var(--glass-edge); animation: slotCabPulse 1.1s ease-in-out 2; } @keyframes slotCabPulse { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } /* 顶部招牌：金属渐变字 + 跑马扫光 */ .slot-marquee { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 12px; margin-bottom: 10px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, rgba(255, 226, 160, 0.22), rgba(255, 196, 66, 0.05)); border: 1px solid rgba(255, 206, 96, 0.35); } .slot-marquee::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.42) 50%, transparent 68%); transform: translateX(-130%); animation: slotSheen 3.8s ease-in-out infinite; } .sm-dot { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff6cf, #ffc030 62%, #b97a00); box-shadow: 0 0 10px rgba(255, 196, 66, 0.85); animation: slotLamp 1.4s ease-in-out infinite; } .slot-title { color: var(--accent); font-weight: 800; font-size: 17px; letter-spacing: 3px; background: var(--slot-btn-bg, linear-gradient(180deg,#fff7dc 12%,#ffcf5c 54%,#d18b0b)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 1px 0 rgba(120, 70, 0, 0.3)); } .slot-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 10px; } .slot-badge { font-size: 12px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--card-border); color: var(--text2); background: var(--accent-soft); } .slot-badge.low { color: var(--danger); border-color: var(--danger); font-weight: 700; } /* 口数切换器：下注档位，只渲染后台启用的口数 */ .slot-reel-switch { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; } .srs-label { font-size: 12px; color: var(--text-dim); letter-spacing: 1px; margin-right: 2px; } .srs-btn { min-width: 46px; padding: 5px 10px; font-size: 12.5px; font-weight: 700; border-radius: 10px; cursor: pointer; color: var(--text2); background: var(--accent-soft); border: 1px solid var(--card-border); transition: transform 0.16s ease, box-shadow 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .srs-btn:hover { transform: translateY(-1px); color: var(--accent); border-color: var(--accent); } .srs-btn.active { color: #2b1a00; border-color: rgba(255, 206, 96, 0.9); background: linear-gradient(180deg, #fff0c4, #ffc23f); box-shadow: 0 4px 14px rgba(255, 186, 40, 0.45); } .srs-tip { font-size: 11.5px; color: var(--text-dim); margin-left: 4px; } /* 卷轴窗口：中间的横向亮线就是「中奖线」 */ .slot-window { position: relative; display: flex; justify-content: center; padding: 14px 12px; border-radius: 18px; overflow: hidden; background: radial-gradient(120% 120% at 50% 0%, var(--slot-reel-glow, rgba(255,214,96,.10)), transparent 56%), linear-gradient(180deg, rgba(3, 10, 8, 0.92), rgba(0, 0, 0, 0.72)); border: 1px solid var(--slot-reel-border, rgba(255, 206, 96, 0.30)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 14px 30px rgba(0, 0, 0, 0.62), inset 0 -14px 30px rgba(0, 0, 0, 0.55); } /* 网格纹理：给机箱一点纵深 */ .slot-mesh { position: absolute; inset: 0; pointer-events: none; opacity: 0.55; background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px); background-size: 18px 18px; } /* 玻璃扫光 */ .slot-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.14) 50%, transparent 62%); transform: translateX(-130%); animation: slotSheen 4.6s ease-in-out infinite; } @keyframes slotSheen { 0% { transform: translateX(-130%); } 55% { transform: translateX(130%); } 100% { transform: translateX(130%); } } /* 卷轴：宽高字号全部来自 JS 下发的变量，2~9 口共用同一套结构与动画 */ .slot-reels { position: relative; display: flex; gap: 9px; max-width: 100%; min-width: 0; } .slot-reel { width: var(--reel-w, 84px); height: var(--reel-h, 76px); border-radius: 12px; overflow: hidden; position: relative; background: var(--slot-reel-bg, linear-gradient(180deg,#fffdf7,#ffeccd 52%,#f6ddb4)); border: 1px solid var(--slot-reel-border, rgba(120,78,12,0.35)); box-shadow: inset 0 8px 15px rgba(0, 0, 0, 0.16), inset 0 -8px 15px rgba(0, 0, 0, 0.16), 0 2px 6px rgba(0, 0, 0, 0.35); } /* 卷轴上下压暗：做出旋转鼓的立体感 */ .slot-reel::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent 27%, transparent 73%, rgba(0, 0, 0, 0.2)); } .slot-strip { display: flex; flex-direction: column; will-change: transform; } .slot-strip > span { height: var(--reel-h, 76px); line-height: var(--reel-h, 76px); font-size: var(--reel-font, 38px); text-align: center; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.22)); } .slot-strip > span.hit { background: radial-gradient(circle at 50% 50%, var(--slot-reel-glow, rgba(255,214,96,.85)), transparent 72%); animation: slotHit 0.6s ease-out 2; } .slot-reel.rolling .slot-strip { animation: slotRoll var(--slot-animation-speed, 0.42s) linear infinite; } @keyframes slotRoll { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes slotHit { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } .slot-payline { position: absolute; left: 10px; right: 10px; top: 50%; height: 2px; transform: translateY(-1px); background: linear-gradient(90deg, transparent, rgba(255, 214, 96, 0.95), transparent); box-shadow: 0 0 12px rgba(255, 200, 60, 0.7); opacity: 0.9; pointer-events: none; } .slot-lamps { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .slot-lamps i { width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff3cd, var(--slot-lamp-on, #ffbe30) 62%, var(--slot-lamp-off, #a86800)); box-shadow: 0 0 8px var(--slot-lamp-on, rgba(255, 196, 66, 0.65)); animation: slotLamp 1.6s ease-in-out infinite; } /* 中奖时灯带加速闪烁，强化反馈 */ .slot-cabinet.win-glow .slot-lamps i { animation-duration: 0.55s; } @keyframes slotLamp { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* 下注区：口数 / 单次消耗 / 返奖倍率 / 中奖率 / 中奖条件，随口数实时刷新 */ .slot-bet { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 12px; } .slot-bet-cell { display: flex; flex-direction: column; gap: 3px; padding: 8px 6px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--card-border); } .slot-bet-cell span { font-size: 11px; color: var(--text-dim); letter-spacing: 1px; } .slot-bet-cell b { font-size: 14.5px; color: var(--accent); } .slot-hint { color: var(--text-dim); font-size: 12.5px; margin-top: 10px; } /* 全服开奖（老虎机战绩页） */ .slot-block { margin: 20px auto 0; max-width: 780px; text-align: left; } .slot-block h3 { color: var(--accent); font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; text-align: center; text-shadow: 0 0 12px var(--glow); } .slot-live-tip { color: var(--text-dim); font-size: 12px; font-weight: 400; letter-spacing: 0; margin-left: 6px; } .slot-live-list { display: flex; flex-direction: column; gap: 8px; } .slot-live-item { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 12px; font-size: 13px; color: var(--text2); background: linear-gradient(158deg, var(--glass-1), var(--glass-2) 46%, var(--glass-3)), var(--card-bg); border: 1px solid var(--card-border); } .slot-live-item .sl-no { color: var(--text-dim); font-size: 12px; min-width: 44px; } /* 口数徽标：一眼看出这条记录来自哪种口数玩法 */ .slot-live-item .sl-reels { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: var(--accent); border: 1px solid var(--card-border); background: var(--accent-soft); white-space: nowrap; } /* 奖池徽标：一眼看出这条记录来自哪个独立奖池 */ .slot-live-item .sl-pool { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; color: #8fd0ff; border: 1px solid rgba(80, 160, 220, 0.35); background: rgba(60, 130, 200, 0.12); white-space: nowrap; } /* ======================================================================= 🎰 老虎机 10 套夸张化皮肤（CSS 命名空间覆盖） ======================================================================= */ /* 共通：slot-stage 作为皮肤挂载体，每套主题覆盖 cabinet / reels / lever / marquee / buttons */ /* -------- 1. 🏆 经典鎏金 -------- */ .slot-stage.slot-theme-classic .slot-cabinet { background: radial-gradient(120% 78% at 50% -12%, rgba(255,214,120,0.28), transparent 62%), linear-gradient(160deg, #fff6dc, #ffd875 48%, #e89c2a); border: 1px solid rgba(180,110,0,0.3); border-radius: 24px; box-shadow: 0 22px 50px rgba(160,120,30,0.28), inset 0 1px 0 rgba(255,255,255,0.6); } .slot-stage.slot-theme-classic .slot-title { background: linear-gradient(180deg,#fff7dc 12%,#ffcf5c 54%,#b57600); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 2px 0 rgba(90,55,0,0.35)); letter-spacing: 5px; font-size: 20px; } .slot-stage.slot-theme-classic .slot-reel { background: linear-gradient(180deg, #fffdf4, #ffe8a8); border: 2px solid #b57600; border-radius: 10px; box-shadow: inset 0 0 16px rgba(120,70,0,0.2); } /* -------- 2. 🤖 赛博霓虹 -------- */ .slot-stage.slot-theme-neon .slot-cabinet { background: linear-gradient(160deg, #0a0f2a, #06081a); border: 1px solid rgba(0,229,255,0.5); border-radius: 14px; box-shadow: 0 0 24px rgba(0,229,255,0.25), inset 0 0 20px rgba(0,229,255,0.1); clip-path: polygon(4% 0, 100% 0, 100% 92%, 96% 100%, 0 100%, 0 8%); position: relative; } .slot-stage.slot-theme-neon .slot-cabinet::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(90deg, transparent 0 28px, rgba(0,229,255,0.07) 28px 29px); animation: neonScan 4s linear infinite; } @keyframes neonScan { 0% { background-position: 0 0; } 100% { background-position: 29px 0; } } .slot-stage.slot-theme-neon .slot-title { font-family: 'Courier New', monospace; background: linear-gradient(90deg, #00e5ff, #ff00ff, #00e5ff); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: neonTitle 2.5s linear infinite; letter-spacing: 6px; font-size: 20px; filter: drop-shadow(0 0 10px #00e5ff); } @keyframes neonTitle { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } } .slot-stage.slot-theme-neon .slot-reel { background: #020414; border: 1px solid rgba(0,229,255,0.4); border-radius: 4px; box-shadow: inset 0 0 12px rgba(0,229,255,0.15), 0 0 8px rgba(0,229,255,0.2); } .slot-stage.slot-theme-neon .slot-marquee { border: 1px solid rgba(255,0,255,0.5); box-shadow: 0 0 12px rgba(255,0,255,0.3), inset 0 0 8px rgba(255,0,255,0.15); background: linear-gradient(180deg, rgba(0,229,255,0.12), rgba(255,0,255,0.06)); } .slot-stage.slot-theme-neon .sm-dot { background: radial-gradient(circle at 35% 30%, #fff, #00e5ff 62%, #003d4a); box-shadow: 0 0 14px #00e5ff; } /* -------- 3. 🍭 糖果甜心 -------- */ .slot-stage.slot-theme-candy .slot-cabinet { background: linear-gradient(160deg, #ffe0ee, #ffc0dd 48%, #ff99c2); border: 3px dashed #ff6aa8; border-radius: 34px 26px 32px 24px; box-shadow: 0 20px 40px rgba(255,80,140,0.35), inset 0 0 24px rgba(255,255,255,0.5); } .slot-stage.slot-theme-candy .slot-title { background: linear-gradient(90deg, #ff5599, #ff99cc, #ff5599); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 4px; font-size: 22px; font-weight: 900; } .slot-stage.slot-theme-candy .slot-reel { background: #fff5fa; border: 2px solid #ff88b0; border-radius: 50% 40% 45% 50% / 55% 45% 50% 45%; box-shadow: inset 0 0 14px rgba(255,100,160,0.15); } .slot-stage.slot-theme-candy .slot-marquee { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.3) 0 12px, transparent 12px 24px); border: 2px solid #ff88b0; border-radius: 20px; } .slot-stage.slot-theme-candy .sm-dot { background: radial-gradient(circle at 35% 30%, #fff, #ff88b0 62%, #cc3366); box-shadow: 0 0 12px rgba(255,130,180,0.8); animation-duration: 1.0s; } .slot-stage.slot-theme-candy .slot-lever .lever-knob { background: radial-gradient(circle at 34% 28%, #fff, #ff99cc 40%, #ff5599 74%, #cc2266); } /* -------- 4. 💎 冰雪水晶 -------- */ .slot-stage.slot-theme-ice .slot-cabinet { background: linear-gradient(160deg, rgba(192,224,255,0.95), rgba(144,200,240,0.9)); border: 1px solid rgba(90,200,255,0.6); border-radius: 20px; box-shadow: 0 20px 40px rgba(80,160,220,0.35), inset 0 1px 0 rgba(255,255,255,0.9), inset 0 -2px 8px rgba(0,120,180,0.15); backdrop-filter: blur(6px); } .slot-stage.slot-theme-ice .slot-cabinet::after { content: ''; position: absolute; inset: 4px; pointer-events: none; border-radius: 16px; border: 1px solid rgba(255,255,255,0.4); } .slot-stage.slot-theme-ice .slot-title { color: #0a3a60; background: linear-gradient(180deg, #ffffff, #a0d8ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 5px; font-size: 20px; font-weight: 800; } .slot-stage.slot-theme-ice .slot-reel { background: linear-gradient(180deg, #f0f8ff, #d0e8f8); border: 1px solid rgba(90,200,255,0.5); border-radius: 12px; box-shadow: inset 0 0 18px rgba(120,180,220,0.2); } .slot-stage.slot-theme-ice .slot-marquee { background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(192,224,255,0.3)); border: 1px solid rgba(90,200,255,0.4); border-radius: 12px; } .slot-stage.slot-theme-ice .sm-dot { background: radial-gradient(circle at 35% 30%, #ffffff, #80d8ff 62%, #0068a8); box-shadow: 0 0 14px #80d8ff; } /* 冰晶飘落装饰 */ .slot-stage.slot-theme-ice .slot-cabinet::before { content: '❄ ❄ ❄'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: 8px; color: rgba(150,200,240,0.6); animation: iceFall 4s linear infinite; } @keyframes iceFall { 0% { transform: translateX(-50%) translateY(0); opacity: 0.3; } 50% { opacity: 0.8; } 100% { transform: translateX(-50%) translateY(6px); opacity: 0.3; } } /* -------- 5. 🔥 烈焰红金 -------- */ .slot-stage.slot-theme-fire .slot-cabinet { background: linear-gradient(160deg, #5a1408, #2a0a04); border: 2px solid #ff6a20; border-radius: 18px; box-shadow: 0 22px 50px rgba(255,80,30,0.35), inset 0 0 28px rgba(255,100,40,0.15); position: relative; overflow: hidden; } .slot-stage.slot-theme-fire .slot-cabinet::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 110%, rgba(255,100,30,0.35), transparent 60%); animation: firePulse 1.8s ease-in-out infinite; } @keyframes firePulse { 0%, 100% { opacity: 0.4; } 50% { opacity: 0.9; } } .slot-stage.slot-theme-fire .slot-title { background: linear-gradient(180deg, #ffd090 12%, #ff6a20 54%, #c82200); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 5px; font-size: 22px; font-weight: 900; filter: drop-shadow(0 2px 4px rgba(255,80,20,0.5)); } .slot-stage.slot-theme-fire .slot-reel { background: linear-gradient(180deg, #1a0502, #3a0804); border: 1px solid rgba(255,100,40,0.5); border-radius: 8px; box-shadow: inset 0 0 16px rgba(255,80,30,0.25); } .slot-stage.slot-theme-fire .slot-marquee { background: linear-gradient(180deg, rgba(255,100,40,0.22), rgba(200,30,0,0.05)); border: 1px solid rgba(255,120,50,0.5); border-radius: 12px; } .slot-stage.slot-theme-fire .sm-dot { background: radial-gradient(circle at 35% 30%, #ffdc80, #ff6a20 62%, #881a00); box-shadow: 0 0 16px #ff6a20; animation-duration: 0.8s; } /* -------- 6. 🍃 翡翠东方 -------- */ .slot-stage.slot-theme-emerald .slot-cabinet { background: linear-gradient(160deg, #1a3a22, #0a1a10); border: 1px solid rgba(46,224,112,0.5); border-radius: 16px; box-shadow: 0 20px 44px rgba(0,120,50,0.4), inset 0 0 24px rgba(46,224,112,0.1); } .slot-stage.slot-theme-emerald .slot-title { background: linear-gradient(180deg, #c8f0d8 12%, #2ee070 54%, #00803a); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 5px; font-size: 20px; font-weight: 800; } .slot-stage.slot-theme-emerald .slot-reel { background: linear-gradient(180deg, #040a06, #0d1a12); border: 1px solid rgba(46,224,112,0.4); border-radius: 8px; box-shadow: inset 0 0 14px rgba(46,224,112,0.15); } .slot-stage.slot-theme-emerald .slot-marquee { background: linear-gradient(180deg, rgba(46,224,112,0.18), rgba(0,100,40,0.05)); border: 1px solid rgba(46,224,112,0.4); border-radius: 12px; } .slot-stage.slot-theme-emerald .sm-dot { background: radial-gradient(circle at 35% 30%, #e0ffe0, #2ee070 62%, #006828); box-shadow: 0 0 12px #2ee070; } /* -------- 7. 🏛️ 古典青铜 -------- */ .slot-stage.slot-theme-retro .slot-cabinet { background: linear-gradient(160deg, #403028, #201814); border: 2px solid rgba(184,144,96,0.5); border-radius: 6px 14px 6px 14px; box-shadow: 0 20px 48px rgba(60,40,20,0.55), inset 0 2px 0 rgba(184,144,96,0.25); font-family: 'Georgia', serif; } .slot-stage.slot-theme-retro .slot-title { background: linear-gradient(180deg, #e8d4b0 12%, #b89060 54%, #6a4a28); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 4px; font-size: 22px; font-weight: 700; font-family: 'Georgia', serif; } .slot-stage.slot-theme-retro .slot-reel { background: linear-gradient(180deg, #1a1208, #0d0804); border: 2px solid rgba(184,144,96,0.4); border-radius: 4px 6px 4px 6px; box-shadow: inset 0 0 16px rgba(0,0,0,0.5); } .slot-stage.slot-theme-retro .slot-marquee { background: linear-gradient(180deg, rgba(184,144,96,0.18), rgba(80,50,20,0.05)); border: 1px solid rgba(184,144,96,0.4); border-radius: 4px; } .slot-stage.slot-theme-retro .sm-dot { background: radial-gradient(circle at 35% 30%, #f0e0c0, #b89060 62%, #5a3a18); box-shadow: 0 0 8px rgba(184,144,96,0.6); } .slot-stage.slot-theme-retro .slot-lever .lever-rod { background: linear-gradient(90deg, #5a3a18, #b89060 44%, #3a2410); } .slot-stage.slot-theme-retro .slot-lever .lever-knob { background: radial-gradient(circle at 34% 28%, #e0c890, #b89060 40%, #5a3a18 74%, #2a1a08); } /* -------- 8. 🌈 彩虹糖豆 -------- */ .slot-stage.slot-theme-rainbow .slot-cabinet { background: linear-gradient(135deg, #ff6090, #ffdd30 25%, #60ffa0 50%, #60a0ff 75%, #cc60ff); background-size: 300% 300%; animation: rainbowMove 8s ease infinite; border: 3px solid #ffffff; border-radius: 28px 20px 34px 22px; box-shadow: 0 22px 52px rgba(200,80,200,0.35), 0 0 24px rgba(255,220,50,0.4); } @keyframes rainbowMove { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .slot-stage.slot-theme-rainbow .slot-title { background: linear-gradient(180deg, #ffffff, #ffeecc 50%, #ff8844); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 6px; font-size: 24px; font-weight: 900; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4)); } .slot-stage.slot-theme-rainbow .slot-reel { background: #101020; border: 2px solid #ffffff; border-radius: 16px 10px 18px 12px; box-shadow: 0 0 12px rgba(255,255,255,0.4), inset 0 0 14px rgba(0,0,0,0.4); } .slot-stage.slot-theme-rainbow .slot-marquee { background: rgba(255,255,255,0.2); backdrop-filter: blur(4px); border: 2px solid #ffffff; border-radius: 18px; } .slot-stage.slot-theme-rainbow .sm-dot { background: radial-gradient(circle at 35% 30%, #fff, #ffff80 62%, #ff60a0); box-shadow: 0 0 14px #ffff80; animation: rainbowBlink 0.8s ease-in-out infinite; } @keyframes rainbowBlink { 0%, 100% { box-shadow: 0 0 10px #ffff80; } 50% { box-shadow: 0 0 24px #ff60a0, 0 0 12px #60a0ff; } } /* -------- 9. 🪐 深空星河 -------- */ .slot-stage.slot-theme-cosmos .slot-cabinet { background: radial-gradient(ellipse at 50% 40%, #1a1050, #04041a 70%); border: 1px solid rgba(144,112,255,0.6); border-radius: 20px; box-shadow: 0 22px 52px rgba(60,40,140,0.6), inset 0 0 40px rgba(100,60,200,0.25); position: relative; overflow: hidden; } /* 星星装饰 */ .slot-stage.slot-theme-cosmos .slot-cabinet::before, .slot-stage.slot-theme-cosmos .slot-cabinet::after { content: ''; position: absolute; pointer-events: none; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 20px 30px 0 rgba(255,255,255,0.7), 80px 60px 0 rgba(180,160,255,0.5), 140px 20px 0 rgba(255,255,255,0.6), 200px 100px 0 rgba(200,180,255,0.4), 50px 160px 0 rgba(255,255,255,0.7), 260px 50px 0 rgba(255,200,255,0.5), 170px 190px 0 rgba(255,255,255,0.5), 100px 230px 0 rgba(180,160,255,0.6); animation: starTwinkle 3s ease-in-out infinite; } .slot-stage.slot-theme-cosmos .slot-cabinet::after { top: 60px; left: 120px; animation-delay: 1.5s; } @keyframes starTwinkle { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.5); } } .slot-stage.slot-theme-cosmos .slot-title { background: linear-gradient(180deg, #f0e8ff 12%, #9070ff 54%, #4a20a0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: 5px; font-size: 20px; font-weight: 800; filter: drop-shadow(0 0 8px rgba(144,112,255,0.6)); } .slot-stage.slot-theme-cosmos .slot-reel { background: linear-gradient(180deg, #060418, #0a0624); border: 1px solid rgba(144,112,255,0.5); border-radius: 10px; box-shadow: inset 0 0 18px rgba(100,60,200,0.3), 0 0 6px rgba(144,112,255,0.3); } .slot-stage.slot-theme-cosmos .slot-marquee { background: linear-gradient(180deg, rgba(144,112,255,0.18), rgba(40,20,80,0.05)); border: 1px solid rgba(144,112,255,0.4); border-radius: 14px; } .slot-stage.slot-theme-cosmos .sm-dot { background: radial-gradient(circle at 35% 30%, #fff, #b080ff 62%, #3010a0); box-shadow: 0 0 14px #b080ff; } /* -------- 10. ⚡ 极简闪电 -------- */ .slot-stage.slot-theme-minimal .slot-cabinet { background: #0a0a0a; border: 2px solid #ffffff; border-radius: 0; box-shadow: 0 0 0 6px #0a0a0a, 0 0 0 8px #ffffff; } .slot-stage.slot-theme-minimal .slot-title { color: #ffffff; -webkit-text-fill-color: #ffffff; background: none; letter-spacing: 10px; font-size: 18px; font-weight: 900; filter: none; position: relative; } .slot-stage.slot-theme-minimal .slot-title::after { content: '⚡'; position: absolute; right: -24px; top: -4px; color: #ffff00; font-size: 18px; animation: flash 0.6s ease-in-out infinite; } @keyframes flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .slot-stage.slot-theme-minimal .slot-reel { background: #141414; border: 2px solid #ffffff; border-radius: 0; } .slot-stage.slot-theme-minimal .slot-marquee { background: #ffffff; border: none; border-radius: 0; } .slot-stage.slot-theme-minimal .slot-title { color: #0a0a0a; -webkit-text-fill-color: #0a0a0a; letter-spacing: 10px; } .slot-stage.slot-theme-minimal .sm-dot { display: none; } .slot-stage.slot-theme-minimal .slot-lever .lever-base { background: #444; border: 1px solid #fff; border-radius: 0; } .slot-stage.slot-theme-minimal .slot-lever .lever-rod { background: linear-gradient(90deg, #fff, #888 50%, #fff); border-radius: 0; } .slot-stage.slot-theme-minimal .slot-lever .lever-knob { background: #ffff00; border-radius: 50%; animation: none; box-shadow: 0 0 20px #ffff00; } /* 中奖：极简闪电特别处理（全场闪烁） */ .slot-stage.slot-theme-minimal .slot-cabinet.win-glow { animation: 0.4s linear infinite flashWhite; } @keyframes flashWhite { 0%, 49% { background: #0a0a0a; } 50%, 100% { background: #ffffff; } } /* ======================================================================= 🎟️ 报名抽奖 10 套皮肤 ======================================================================= */ .raffle-wrap.raffle-theme-classic { background: linear-gradient(160deg,#1a1408,#2a1e0c); border-radius: 16px; padding: 16px; } .raffle-wrap.raffle-theme-classic .raffle-card { background: linear-gradient(160deg,#3a2a10,#1a1408); border: 1px solid rgba(200,150,60,0.4); border-radius: 14px; box-shadow: 0 10px 24px rgba(100,70,20,0.3); transition: transform 0.2s; } .raffle-wrap.raffle-theme-classic .raffle-card:hover { transform: translateY(-2px); } .raffle-wrap.raffle-theme-dark { background: linear-gradient(160deg,#0a0a14,#1a1a2a); border-radius: 16px; padding: 16px; } .raffle-wrap.raffle-theme-dark .raffle-card { background: linear-gradient(160deg,#1a1a2a,#0a0a14); border: 1px solid rgba(192,160,255,0.35); border-radius: 14px; box-shadow: 0 10px 24px rgba(40,20,80,0.4), inset 0 1px 0 rgba(192,160,255,0.1); } .raffle-wrap.raffle-theme-ocean { background: linear-gradient(160deg,#e8f4ff,#c8e4ff); border-radius: 16px; padding: 16px; } .raffle-wrap.raffle-theme-ocean .raffle-card { background: linear-gradient(160deg,#ffffff,#e0f0ff); border: 1px solid rgba(90,200,255,0.5); border-radius: 12px; box-shadow: 0 8px 24px rgba(80,160,220,0.25); } .raffle-wrap.raffle-theme-flame { background: linear-gradient(160deg,#2a0a04,#4a1408); border-radius: 16px; padding: 16px; } .raffle-wrap.raffle-theme-flame .raffle-card { background: linear-gradient(160deg,#5a1408,#2a0a04); border: 1px solid rgba(255,106,32,0.5); border-radius: 12px; box-shadow: 0 10px 28px rgba(255,80,30,0.3); } .raffle-wrap.raffle-theme-forest { background: linear-gradient(160deg,#0a1a10,#1a2a18); border-radius: 16px; padding: 16px; } .raffle-wrap.raffle-theme-forest .raffle-card { background: linear-gradient(160deg,#1a3a22,#0a1a10); border: 1px solid rgba(46,224,112,0.4); border-radius: 14px; box-shadow: 0 10px 24px rgba(0,100,40,0.4); } .raffle-wrap.raffle-theme-love { background: linear-gradient(160deg,#fff0f7,#ffd0e8); border-radius: 20px; padding: 16px; } .raffle-wrap.raffle-theme-love .raffle-card { background: linear-gradient(160deg,#ffe0ee,#ffc0dd); border: 2px solid #ff88b0; border-radius: 24px 18px 24px 18px; box-shadow: 0 12px 28px rgba(255,80,140,0.3); } .raffle-wrap.raffle-theme-cyber { background: linear-gradient(160deg,#06081a,#0a0f2a); border-radius: 14px; padding: 16px; clip-path: polygon(2% 0, 100% 0, 100% 94%, 98% 100%, 0 100%, 0 6%); } .raffle-wrap.raffle-theme-cyber .raffle-card { background: linear-gradient(160deg,#0a0f2a,#06081a); border: 1px solid rgba(0,229,255,0.4); border-radius: 6px; box-shadow: 0 0 16px rgba(0,229,255,0.18), inset 0 0 8px rgba(0,229,255,0.08); font-family: 'Courier New', monospace; } .raffle-wrap.raffle-theme-vintage { background: linear-gradient(160deg,#201814,#32241e); border-radius: 8px; padding: 16px; font-family: 'Georgia', serif; } .raffle-wrap.raffle-theme-vintage .raffle-card { background: linear-gradient(160deg,#403028,#201814); border: 1px solid rgba(184,144,96,0.45); border-radius: 4px 10px 4px 10px; box-shadow: 0 10px 26px rgba(60,40,20,0.5); font-family: 'Georgia', serif; } .raffle-wrap.raffle-theme-joy { background: linear-gradient(135deg,#ff6090,#ffdd30 25%,#60ffa0 50%,#60a0ff 75%,#cc60ff); background-size: 300% 300%; animation: joyBg 10s ease infinite; border-radius: 24px; padding: 16px; } @keyframes joyBg { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .raffle-wrap.raffle-theme-joy .raffle-card { background: rgba(255,255,255,0.92); border: 3px solid #ffffff; border-radius: 20px; box-shadow: 0 12px 30px rgba(0,0,0,0.18); } .raffle-wrap.raffle-theme-galaxy { background: radial-gradient(ellipse at 50% 30%,#1a1050,#04041a 75%); border-radius: 18px; padding: 16px; overflow: hidden; position: relative; } .raffle-wrap.raffle-theme-galaxy::before { content: '✨ ⭐ ✨'; position: absolute; top: 8px; right: 16px; font-size: 14px; animation: galaxySpin 12s linear infinite; } @keyframes galaxySpin { from { transform: rotate(0); } to { transform: rotate(360deg); } } .raffle-wrap.raffle-theme-galaxy .raffle-card { background: linear-gradient(160deg,rgba(40,30,90,0.8),rgba(10,8,26,0.9)); border: 1px solid rgba(144,112,255,0.5); border-radius: 14px; box-shadow: 0 10px 28px rgba(60,40,140,0.4); backdrop-filter: blur(4px); } /* ======================================================================= 💡 灯光系统 —— 霓虹边框 + 爆闪动画 ======================================================================= */ /* 霓虹红 */ .slot-stage.has-neon-red .slot-cabinet, .raffle-wrap.has-neon-red { border-color: #ff3366 !important; box-shadow: 0 0 12px #ff3366, 0 0 28px #ff3366, 0 0 42px rgba(255,51,102,0.5) !important; animation: neonBreath 1.4s ease-in-out infinite; } /* 霓虹青 */ .slot-stage.has-neon-cyan .slot-cabinet, .raffle-wrap.has-neon-cyan { border-color: #00e5ff !important; box-shadow: 0 0 12px #00e5ff, 0 0 28px #00e5ff, 0 0 42px rgba(0,229,255,0.5) !important; animation: neonBreath 1.4s ease-in-out infinite; } /* 霓虹绿 */ .slot-stage.has-neon-green .slot-cabinet, .raffle-wrap.has-neon-green { border-color: #00ff88 !important; box-shadow: 0 0 12px #00ff88, 0 0 28px #00ff88, 0 0 42px rgba(0,255,136,0.5) !important; animation: neonBreath 1.4s ease-in-out infinite; } /* 霓虹黄 */ .slot-stage.has-neon-yellow .slot-cabinet, .raffle-wrap.has-neon-yellow { border-color: #ffdd33 !important; box-shadow: 0 0 12px #ffdd33, 0 0 28px #ffdd33, 0 0 42px rgba(255,221,51,0.5) !important; animation: neonBreath 1.4s ease-in-out infinite; } @keyframes neonBreath { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } } /* 七彩爆闪（背景） */ .slot-stage.has-flash-rainbow, .raffle-wrap.has-flash-rainbow { animation: flashRainbow 0.9s linear infinite !important; } @keyframes flashRainbow { 0% { filter: hue-rotate(0deg) saturate(1.3); } 25% { filter: hue-rotate(90deg) saturate(1.6); } 50% { filter: hue-rotate(180deg) saturate(1.4); } 75% { filter: hue-rotate(270deg) saturate(1.6); } 100% { filter: hue-rotate(360deg) saturate(1.3); } } /* 爱心脉动 */ .slot-stage.has-flash-heartbeat, .raffle-wrap.has-flash-heartbeat { animation: flashHeartbeat 1.1s ease-in-out infinite !important; } @keyframes flashHeartbeat { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,107,157,0.6)); } 20% { filter: drop-shadow(0 0 22px rgba(255,107,157,1)); } 40% { filter: drop-shadow(0 0 6px rgba(255,107,157,0.5)); } 60% { filter: drop-shadow(0 0 18px rgba(255,107,157,0.9)); } } /* ======================================================================= 📱 响应式：小屏适配 ======================================================================= */ @media (max-width: 640px) { .slot-stage.slot-theme-classic .slot-cabinet, .slot-stage.slot-theme-neon .slot-cabinet, .slot-stage.slot-theme-candy .slot-cabinet, .slot-stage.slot-theme-ice .slot-cabinet, .slot-stage.slot-theme-fire .slot-cabinet, .slot-stage.slot-theme-emerald .slot-cabinet, .slot-stage.slot-theme-retro .slot-cabinet, .slot-stage.slot-theme-rainbow .slot-cabinet, .slot-stage.slot-theme-cosmos .slot-cabinet, .slot-stage.slot-theme-minimal .slot-cabinet { padding: 10px 10px; border-radius: 14px; } .slot-stage.slot-theme-minimal .slot-title { font-size: 14px; letter-spacing: 6px; } } /* 中奖记录：左侧金色描边 + 微光 */ .slot-live-item.win { border-color: rgba(255, 196, 66, 0.55); box-shadow: inset 3px 0 0 rgba(255, 196, 66, 0.85); } .slot-live-item .sl-syms { font-size: 20px; letter-spacing: 2px; } .slot-live-item .sl-prize { font-weight: 700; } .slot-live-item .sl-prize.win { color: var(--accent); } .slot-live-item .sl-time { color: var(--text-dim); font-size: 12px; margin-left: auto; } .slot-warn { max-width: 780px; margin: 14px auto 0; padding: 10px 16px; border-radius: 12px; text-align: center; font-size: 13px; color: var(--danger); background: rgba(224, 82, 82, 0.12); border: 1px solid var(--danger); } /* 我的中奖记录与奖品状态 */ .slot-rec-list { display: flex; flex-direction: column; gap: 10px; } .slot-rec-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px; background: linear-gradient(158deg, var(--glass-1), var(--glass-2) 46%, var(--glass-3)), var(--card-bg); border: 1px solid var(--card-border); } .slot-rec-item .sr-syms { font-size: 22px; letter-spacing: 1px; } .slot-rec-item .sr-info { flex: 1; min-width: 0; } .slot-rec-item .sr-name { font-weight: 700; color: var(--text); } .slot-rec-item .sr-payout { color: var(--accent); font-size: 12px; margin-left: 8px; } .slot-rec-item .sr-meta { color: var(--text-dim); font-size: 12px; margin-top: 2px; } .sr-status { white-space: nowrap; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--card-border); color: var(--text2); } .sr-status.s-unclaimed { color: var(--accent); border-color: var(--accent); font-weight: 700; } .sr-status.s-claimed { color: var(--info); border-color: var(--info); } .sr-status.s-delivered { color: var(--success); border-color: var(--success); } .sr-status.s-none { color: var(--text-dim); } .record-item .r-mode { font-size: 12px; color: var(--accent); } @media (max-width: 768px) { .slot-cabinet { padding: 12px 10px; border-radius: 18px; } .slot-window { padding: 11px 8px; } .slot-reels { gap: 6px; } /* 卷轴尺寸由 JS 按口数与宽度下发，这里只收紧边距，保证 2~9 口都不溢出 */ .slot-bet { grid-template-columns: repeat(2, 1fr); gap: 6px; } .slot-bet-cell b { font-size: 13.5px; } .srs-btn { min-width: 40px; font-size: 12px; padding: 5px 8px; } .srs-tip { display: none; } .slot-title { font-size: 15px; letter-spacing: 2px; } .slot-lamps { margin-top: 9px; } .slot-live-item { font-size: 12px; gap: 8px; padding: 8px 10px; } .slot-live-item .sl-syms { font-size: 17px; letter-spacing: 1px; } .slot-live-item .sl-no { min-width: 38px; } .slot-live-tip { display: none; } } /* 动效降级：尊重系统「减少动态效果」偏好 */ @media (prefers-reduced-motion: reduce) { .slot-marquee::after, .slot-sheen, .slot-lamps i, .sm-dot { animation: none; } .slot-cabinet.win-glow { animation: none; } } /* ========================================================= 界面造型（skin）—— 与 uiTheme 配色正交的结构性差异类名由 front.js applySlotTheme / applyRaffleTheme 施加 ========================================================= */ /* ---------- Raffle 卡片基础规则（原为 JS 内联，移入 CSS 便于造型覆盖） ---------- */ .raffle-card { background: var(--raffle-card-bg, rgba(255,215,0,0.08)); border: 1px solid var(--raffle-card-border, rgba(255,215,0,0.20)); border-radius: var(--raffle-radius, 12px); padding: 16px; margin-bottom: 12px; }