/* ===================================================================== screens-share.css —— 排行榜（.lbx）/ 赛后结算（.stx）两屏美化 + 邀请海报全屏遮罩（.share-mask，由 https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/js/share.js 动态创建）。 设计 token / 组件类来自 theme.css（已在 index.html 引入）。 只作用于上述三个作用域，不影响其他屏。 ===================================================================== */ /* ---- 两屏共用的暗色电竞底（覆盖 main.css .panel 的渐变） ---- */ .lbx, .stx { background: radial-gradient(900px 480px at 80% -8%, rgba(45, 212, 255, 0.10), transparent 62%), radial-gradient(700px 420px at 0% 108%, rgba(245, 195, 75, 0.06), transparent 60%), linear-gradient(180deg, #0d1426 0%, #070b14 100%); } /* ============================ 排行榜 .lbx ============================ */ .lbx { gap: 18px; } .lbx .t-title { font-size: 42px; } .lbx-sp { flex: 1 1 auto; } /* 顶栏弹性占位：把按钮推到右侧 */ .lbx-act { font-size: 26px; padding: 12px 24px; } /* 页签按钮组：胶囊容器 + 选中项霓虹填充 */ .lbx-tabs { display: flex; gap: 8px; padding: 8px; background: rgba(10, 16, 32, 0.7); border: 1px solid var(--line); border-radius: 16px; } .lbx-tab { flex: 1 1 0; padding: 16px 0; font-size: 30px; letter-spacing: 6px; text-indent: 6px; /* 抵消末字 letter-spacing，视觉居中 */ color: var(--text-1); background: transparent; border: 1px solid transparent; border-radius: 11px; cursor: pointer; transition: all 0.15s ease; } .lbx-tab:hover { color: var(--text-0); border-color: var(--line); } .lbx-tab.active { background: linear-gradient(180deg, #19b8e8, #0e7fb6); color: #04121d; font-weight: 700; border-color: rgba(45, 212, 255, 0.7); box-shadow: var(--shadow-glow); } /* 列说明行 + 榜单容器 */ .lbx-colhead { font-size: 22px; color: var(--text-2); letter-spacing: 2px; padding: 0 18px; min-height: 26px; } .lbx-list.list { background: rgba(8, 13, 26, 0.55); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; gap: 10px; } /* ---- 榜单行（基于 .t-row 生成，见 leaderboard.js） ---- */ .lbx-row { cursor: default; padding: 12px 16px; } /* 名次：前三名金 / 银 / 铜大字（斜体 + 光晕），其余弱化数字 */ .lbx-rank { flex: none; width: 76px; text-align: center; font-weight: 800; font-style: italic; font-size: 26px; color: var(--text-2); } .lbx-rank.r1 { font-size: 40px; color: #ffd75e; text-shadow: 0 0 16px rgba(255, 210, 90, 0.6); } .lbx-rank.r2 { font-size: 34px; color: #d7e2f2; text-shadow: 0 0 12px rgba(200, 220, 255, 0.45); } .lbx-rank.r3 { font-size: 31px; color: #e8995c; text-shadow: 0 0 12px rgba(230, 150, 90, 0.45); } .lbx-flag { font-size: 42px; line-height: 1; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.5)); } .lbx-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; overflow: hidden; } .lbx-name { font-size: 28px; color: var(--text-0); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .lbx-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .lbx-sub { font-size: 20px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lbx-rec { flex: none; font-size: 22px; color: var(--text-1); } /* 数值列：金色大字 */ .lbx-val { flex: none; min-width: 110px; text-align: right; font-size: 32px; font-weight: 800; color: var(--gold); text-shadow: 0 0 12px rgba(245, 195, 75, 0.3); } /* 我的行：金色描边 + 内发光高亮 */ .lbx-row.lbx-me { background: rgba(245, 195, 75, 0.10); border-color: rgba(245, 195, 75, 0.6); box-shadow: inset 0 0 16px rgba(245, 195, 75, 0.08), 0 0 12px rgba(245, 195, 75, 0.12); } .lbx-myrank { min-height: 34px; font-size: 26px; font-weight: 700; color: var(--gold); } /* ============================ 结算 .stx ============================ */ .stx { gap: 14px; } .stx .t-title { font-size: 40px; } .stx .t-group { font-size: 24px; margin: 6px 2px 0; } /* 记分板卡 */ .stx-board { padding: 28px 36px 22px; display: flex; flex-direction: column; gap: 10px; } .stx-score-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .stx-team { font-size: 32px; font-weight: 700; color: var(--text-0); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .stx-team:last-child { text-align: right; } /* 比分大字居中：胜=金色光晕 / 负=灰暗 / 平=常规 */ .stx-score { font-size: 100px; font-weight: 900; letter-spacing: 4px; line-height: 1.05; text-align: center; color: var(--text-0); } .stx-score.win { color: var(--gold); text-shadow: 0 0 28px rgba(245, 195, 75, 0.65), 0 0 64px rgba(245, 195, 75, 0.3); } .stx-score.lose { color: #94a3c2; } .stx-score.draw { color: var(--text-0); } .stx-result-row { display: flex; align-items: center; justify-content: center; gap: 28px; } .stx-result { font-size: 40px; font-weight: 800; letter-spacing: 8px; text-indent: 8px; } .stx .st-result.win { color: var(--gold); text-shadow: 0 0 18px rgba(245, 195, 75, 0.5); } .stx .st-result.lose { color: var(--danger); } .stx .st-result.draw { color: var(--text-1); } /* 积分变化：+xx 绿 / -xx 红 */ .stx-delta { font-size: 30px; font-weight: 800; color: var(--text-1); } .stx-delta.pos { color: var(--ok); text-shadow: 0 0 12px rgba(52, 211, 153, 0.35); } .stx-delta.neg { color: var(--danger); text-shadow: 0 0 12px rgba(243, 100, 92, 0.35); } /* 进球简报 */ .stx-list.list { background: rgba(8, 13, 26, 0.55); border: 1px solid var(--line); border-radius: var(--r-md); max-height: 230px; flex: none; } .stx-brief.t-row { cursor: default; } .stx-bname { flex: 1 1 auto; min-width: 0; font-size: 25px; color: var(--text-0); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* 统计容器（球队汇总 / 球员表共用） */ .stx-stats { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; background: rgba(8, 13, 26, 0.55); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px; } /* 球队汇总行：双向占比条（主=青色 / 客=金色），.t-stat 同款条形 */ .stx-trow { display: grid; grid-template-columns: 92px 1fr 190px 1fr 92px; align-items: center; gap: 14px; padding: 4px 8px; font-size: 24px; } .stx-trow .tv { font-weight: 800; color: var(--text-0); font-size: 26px; } .stx-trow .tv.a { text-align: right; } .stx-trow .tlabel { text-align: center; color: var(--text-2); letter-spacing: 2px; } .stx-trow .bar { height: 10px; border-radius: 5px; background: rgba(20, 30, 52, 0.9); overflow: hidden; display: flex; } .stx-trow .bar.h { justify-content: flex-end; } /* 主队条从中间往左生长 */ .stx-trow .bar > i { display: block; height: 100%; border-radius: 5px; } .stx-trow .bar.h > i { background: linear-gradient(270deg, var(--accent), #1ba7d8); } .stx-trow .bar.a > i { background: linear-gradient(90deg, #d8a31b, var(--gold)); } /* 球员数据行 */ .stx-prow { display: grid; grid-template-columns: 1.5fr 0.8fr 1.1fr; gap: 12px; padding: 9px 14px; border-radius: var(--r-sm); background: rgba(30, 44, 76, 0.4); font-size: 23px; color: var(--text-0); } .stx-prow.head { background: transparent; color: var(--text-2); font-size: 21px; letter-spacing: 1px; padding: 2px 14px; } .stx-prow .pc2, .stx-prow .pc3 { text-align: center; color: var(--text-1); } .stx-prow:not(.head) .pc2 { color: var(--gold); font-weight: 700; } /* 底部按钮组 */ .stx-actions { gap: 16px; } .stx-actions .t-btn { font-size: 28px; } .stx-actions .stx-main { flex: 1 1 auto; font-size: 30px; } /* ============================ 邀请海报遮罩 ============================ */ /* 挂在 #stage 内（继承舞台缩放），https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/js/share.js 动态创建。 设计稿 design_handoff_invite_poster（452px 宽原型）按 2x 等比放大为 904px 宽海报卡；竖版居中、横版超高时 .share-scroll 内部滚动。 ★ 海报卡（.share-poster-card）会被 html2canvas 截图：内部一律不用 backdrop-filter / 外部图片，全部实色、渐变与内联 SVG。 */ .share-mask { position: absolute; inset: 0; z-index: 90; display: flex; flex-direction: column; background: radial-gradient(1600px 1200px at 18% -4%, rgba(245, 196, 81, 0.14), transparent 55%), radial-gradient(1640px 1240px at 86% 6%, rgba(21, 227, 113, 0.13), transparent 52%), linear-gradient(180deg, rgba(4, 7, 13, 0.97), rgba(7, 13, 24, 0.97) 55%, rgba(4, 7, 15, 0.97)); } .share-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .share-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 105% at 50% 30%, transparent 52%, rgba(2, 4, 9, 0.78)); } /* 滚动容器：海报双向居中（margin:auto，超高时可滚不裁顶） */ .share-scroll { position: relative; flex: 1 1 auto; min-height: 0; display: flex; overflow-y: auto; padding: 44px 24px 24px; } .share-poster-card, .share-fallback-img { margin: auto; } /* ---- 海报卡本体（设计 452px → 2x = 904px） ---- */ .share-poster-card { position: relative; width: 904px; max-width: 96%; overflow: hidden; color: #eaf1fb; background: linear-gradient(180deg, #0a1322 0%, #0b1426 46%, #070f1e 100%); border: 2px solid rgba(120, 150, 200, 0.22); border-radius: 44px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 2px rgba(245, 196, 81, 0.12), inset 0 2px 0 rgba(255, 255, 255, 0.05); font-family: 'Saira', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; } /* 保存兜底：海报截图 （长按保存） */ .share-fallback-img { width: 904px; max-width: 96%; border-radius: 44px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } /* 炫光顶条 foil（绿→青→金渐变 + 流光） */ .sp-foil { height: 12px; background: linear-gradient(90deg, #15e371, #2bc7f0, #f5c451, #2bc7f0, #15e371); background-size: 200% 100%; animation: sp-foil 6s linear infinite; } /* 顶部青色网格装饰（向下渐隐） */ .sp-grid { position: absolute; inset: 0; pointer-events: none; opacity: 0.4; background-image: linear-gradient(rgba(43, 199, 240, 0.07) 2px, transparent 2px), linear-gradient(90deg, rgba(43, 199, 240, 0.07) 2px, transparent 2px); background-size: 68px 68px; -webkit-mask: linear-gradient(180deg, #000, transparent 46%); mask: linear-gradient(180deg, #000, transparent 46%); } .sp-pad { position: relative; padding: 44px 48px 52px; } /* ---- 品牌头 ---- */ .sp-brand { text-align: center; } .sp-kicker { font-family: 'Saira Condensed', sans-serif; font-weight: 700; letter-spacing: 8px; font-size: 26px; color: #2bc7f0; } .sp-word { font-family: 'Saira Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 96px; line-height: 1; margin-top: 8px; } .sp-word .a { color: #fff; } .sp-word .s { color: #2bc7f0; text-shadow: 0 0 44px rgba(43, 199, 240, 0.5); } .sp-sub { font-family: 'Noto Sans SC', sans-serif; font-size: 26px; color: #9aa8c4; margin-top: 16px; letter-spacing: 1px; } /* ---- 胜利 / 排名面板（金色描边 + 内发光 + 24 芒旋转光芒） ---- */ .sp-win { position: relative; margin-top: 36px; padding: 40px 32px 36px; overflow: hidden; border-radius: 32px; background: radial-gradient(120% 90% at 50% 0%, rgba(245, 196, 81, 0.16), rgba(245, 196, 81, 0.04) 60%, transparent), rgba(8, 13, 24, 0.6); border: 2px solid rgba(245, 196, 81, 0.35); box-shadow: inset 0 0 60px rgba(245, 196, 81, 0.08); } .sp-rays { position: absolute; top: 42%; left: 50%; width: 680px; height: 680px; transform: translate(-50%, -50%); opacity: 0.5; animation: sp-spin 26s linear infinite; } /* 右上斜角印章：胜局红 VICTORY / 平负青 AI DUEL / 排行榜金段位名 */ .sp-stamp { position: absolute; top: 24px; right: -64px; transform: rotate(34deg); background: linear-gradient(180deg, #ff5d72, #d8324e); color: #fff; font-family: 'Saira Condensed', sans-serif; font-style: italic; font-weight: 800; letter-spacing: 6px; font-size: 24px; padding: 10px 80px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .sp-stamp.neutral { background: linear-gradient(180deg, #34d2f5, #0e7fb6); color: #04222c; } .sp-stamp.gold { background: linear-gradient(180deg, #ffd874, #e8a81c); color: #3a2a08; } .sp-tag { position: relative; text-align: center; font-family: 'Noto Sans SC', sans-serif; font-weight: 900; font-size: 36px; color: #f5c451; text-shadow: 0 0 36px rgba(245, 196, 81, 0.4); letter-spacing: 2px; } .sp-tag.neutral { color: #2bc7f0; text-shadow: 0 0 36px rgba(43, 199, 240, 0.4); } /* 段位奖牌（tierEmblem.js SVG）+ 金色光晕脉冲 */ .sp-medal { position: relative; display: flex; justify-content: center; margin: 12px 0 4px; } .sp-medal .halo { position: absolute; top: 50%; left: 50%; width: 192px; height: 192px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 196, 81, 0.35), transparent 72%); animation: sp-pulse 3s ease-in-out infinite; } .sp-medal svg { position: relative; width: 124px; height: 124px; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5)); } /* 世界杯预测版式：奖牌位换 🔮 水晶球（盒子与段位奖牌同尺寸，复用 halo 光晕） */ .sp-wc-orb { position: relative; width: 124px; height: 124px; display: flex; align-items: center; justify-content: center; font-size: 92px; line-height: 1; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.5)); } .sp-vs { position: relative; text-align: center; font-family: 'Noto Sans SC', sans-serif; font-weight: 700; font-size: 30px; color: #cdd8ec; margin-top: 12px; } .sp-vs .me { color: #2bc7f0; } /* 比分 / #排名超大金渐变字（截图时由 share.js onclone 换实色金，见 js 注释） */ .sp-score { position: relative; text-align: center; font-family: 'Saira Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 152px; line-height: 0.95; margin: 4px 0; background: linear-gradient(180deg, #ffe492, #f5b324 60%, #e0900f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 28px rgba(245, 179, 36, 0.35)); } .sp-score.small { font-size: 96px; line-height: 1.1; } /* 未上榜等长文案 */ .sp-ladder { position: relative; text-align: center; font-family: 'Noto Sans SC', sans-serif; font-weight: 700; font-size: 30px; color: #15e371; text-shadow: 0 0 28px rgba(21, 227, 113, 0.35); } .sp-ladder b { color: #fff; font-weight: 700; font-style: normal; } .sp-ladder b.pos { color: #15e371; } .sp-ladder b.neg { color: #fb4d6a; } .sp-ladder b.zero { color: #cdd8ec; } /* ---- 挑衅挑战标语（结算/对决面板印章下方 + 人格卡分享语） ---- */ .sp-challenge { position: relative; text-align: center; margin: 14px auto 2px; max-width: 760px; padding: 12px 26px; border-radius: 16px; font-family: 'Noto Sans SC', sans-serif; font-weight: 900; font-size: 30px; letter-spacing: 1px; color: #eafff5; background: linear-gradient(180deg, rgba(21, 227, 113, 0.16), rgba(21, 227, 113, 0.05)); border: 2px solid rgba(21, 227, 113, 0.55); text-shadow: 0 0 24px rgba(21, 227, 113, 0.4); } .sp-challenge.persona { margin-top: 26px; color: #f0e9ff; background: linear-gradient(180deg, rgba(167, 122, 255, 0.18), rgba(167, 122, 255, 0.05)); border-color: rgba(167, 122, 255, 0.6); text-shadow: 0 0 24px rgba(167, 122, 255, 0.45); } /* ---- 足球人格卡（FOOTBALL DNA：紫电风，与主面板同尺寸，可切换显示） ---- */ .sp-persona-panel[hidden] { display: none; } .sp-persona-panel { background: radial-gradient(120% 90% at 50% 0%, rgba(167, 122, 255, 0.18), rgba(167, 122, 255, 0.05) 60%, transparent), rgba(8, 13, 24, 0.6); border-color: rgba(167, 122, 255, 0.4); box-shadow: inset 0 0 60px rgba(167, 122, 255, 0.08); } /* 紫色 DNA 印章（复用 .sp-stamp 定位；与红/青/金印章并列） */ .sp-stamp.persona { background: linear-gradient(180deg, #b794ff, #7a4fd6); color: #1a0f33; } /* 人格大标签：紫电渐变实色（非 background-clip，html2canvas 直接可栅格化） */ .sp-persona-label { position: relative; text-align: center; margin: 8px 0 6px; font-family: 'Noto Sans SC', sans-serif; font-weight: 900; font-size: 64px; line-height: 1.1; color: #c9b3ff; text-shadow: 0 0 40px rgba(167, 122, 255, 0.5), 0 4px 18px rgba(0, 0, 0, 0.4); } .sp-persona-desc { position: relative; text-align: center; margin: 0 auto; max-width: 720px; font-family: 'Noto Sans SC', sans-serif; font-weight: 500; font-size: 28px; line-height: 1.55; color: #cdd8ec; } .sp-persona-taunt { position: relative; text-align: center; margin: 18px auto 0; max-width: 720px; font-family: 'Noto Sans SC', sans-serif; font-weight: 700; font-size: 30px; line-height: 1.45; color: #15e371; text-shadow: 0 0 24px rgba(21, 227, 113, 0.35); } /* 操作栏「测测我的球队人格」按钮（紫电填充，与保存/复制并列） */ .share-abtn.persona[hidden] { display: none; } .share-abtn.persona { color: #1a0f33; background: linear-gradient(180deg, #c4a6ff, #8b5cf0); border: none; box-shadow: 0 16px 44px rgba(139, 92, 240, 0.35); } /* ---- 邀请区 ---- */ .sp-invite { margin-top: 36px; text-align: center; } .sp-inv-h { font-family: 'Noto Sans SC', sans-serif; font-weight: 900; font-size: 34px; color: #fff; } .sp-inv-sub { font-family: 'Noto Sans SC', sans-serif; font-size: 23px; color: #62718f; margin-top: 10px; } /* 白底金边二维码卡（SCAN TO JOIN） */ .sp-qr-card { margin: 28px auto 0; width: 344px; background: #fff; border-radius: 28px; padding: 24px 24px 16px; box-shadow: 0 20px 52px rgba(0, 0, 0, 0.45), 0 0 0 6px rgba(245, 196, 81, 0.5); } .sp-qr { width: 296px; height: 296px; margin: 0 auto; display: grid; place-items: center; } .sp-qr img, .sp-qr canvas { display: block; width: 296px !important; height: 296px !important; } .sp-qr-cap { font-family: 'Saira Condensed', sans-serif; font-style: italic; font-weight: 800; color: #0b1426; font-size: 24px; letter-spacing: 2px; margin-top: 12px; } /* qrcode 库加载失败：斜纹占位（链接文本仍在下方框里） */ .sp-qr-fallback { width: 296px; height: 296px; display: grid; place-items: center; color: #0b1426; font-family: 'Saira Condensed', sans-serif; font-style: italic; font-weight: 800; font-size: 28px; background: repeating-linear-gradient(45deg, #0b1426 0 12px, #fff 12px 24px); border-radius: 16px; } /* 金色奖励框（getMe 真实数据：每邀 1 人 +2 次/日 +40 培养积分、已邀 N/M） */ .sp-reward { margin-top: 32px; padding: 26px 28px; border-radius: 24px; text-align: center; background: linear-gradient(180deg, rgba(245, 196, 81, 0.14), rgba(245, 196, 81, 0.05)); border: 2px solid rgba(245, 196, 81, 0.4); } .sp-reward .r1 { font-family: 'Noto Sans SC', sans-serif; font-weight: 700; font-size: 27px; color: #f5c451; line-height: 1.5; } .sp-reward .r2 { font-family: 'Noto Sans SC', sans-serif; font-size: 23px; color: #9aa8c4; margin-top: 10px; } /* 青色虚线链接框 */ .sp-link-box { margin-top: 28px; padding: 24px 28px; border-radius: 24px; background: rgba(43, 199, 240, 0.06); border: 2px dashed rgba(43, 199, 240, 0.4); } .sp-link-box .lk-cap { font-family: 'Noto Sans SC', sans-serif; font-size: 22px; color: #62718f; letter-spacing: 2px; } .sp-link-box .lk { font-family: 'Saira', Consolas, monospace, sans-serif; font-weight: 600; font-size: 26px; color: #2bc7f0; word-break: break-all; margin-top: 10px; } /* 金色流光 CTA */ .sp-cta { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 16px; height: 108px; border-radius: 26px; font-family: 'Noto Sans SC', sans-serif; font-weight: 900; font-size: 32px; color: #3a2a08; letter-spacing: 1px; background: linear-gradient(180deg, #ffd874, #e8a81c); box-shadow: 0 20px 52px rgba(245, 196, 81, 0.4); position: relative; overflow: hidden; } .sp-cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%); transform: translateX(-130%); animation: sp-sheen 3.2s ease-in-out infinite; } .sp-foot { text-align: center; margin-top: 28px; font-family: 'Saira Condensed', sans-serif; font-style: italic; font-weight: 700; letter-spacing: 4px; font-size: 22px; color: #62718f; } /* ---- 操作栏（吸底，不进海报） ---- */ .share-actions { position: relative; flex: none; display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; padding: 28px 36px 32px; background: linear-gradient(0deg, rgba(5, 9, 16, 0.97), rgba(5, 9, 16, 0.5) 72%, transparent); } .share-abtn { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 44px; height: 104px; font-family: 'Noto Sans SC', sans-serif; font-weight: 900; font-size: 30px; letter-spacing: 1px; color: #eaf1fb; background: rgba(16, 24, 42, 0.92); border: 2px solid rgba(120, 150, 200, 0.18); cursor: pointer; transition: 0.15s; clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px); } .share-abtn:hover { transform: translateY(-2px); box-shadow: 0 20px 52px rgba(0, 0, 0, 0.4); } .share-abtn:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; } .share-abtn.save { color: #04222c; background: linear-gradient(180deg, #34d2f5, #16a7d6); border: none; box-shadow: 0 16px 44px rgba(43, 199, 240, 0.35); } .share-abtn.copy { color: #3a2a08; background: linear-gradient(180deg, #ffd874, #e8a81c); border: none; box-shadow: 0 16px 44px rgba(245, 196, 81, 0.35); } /* toast（操作栏上方浮出） */ .share-toast { position: absolute; left: 50%; bottom: 172px; z-index: 95; transform: translateX(-50%) translateY(20px); opacity: 0; background: rgba(8, 14, 24, 0.96); border: 2px solid #15e371; color: #eafff5; font-family: 'Noto Sans SC', sans-serif; font-weight: 700; font-size: 28px; padding: 22px 44px; border-radius: 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); transition: 0.28s; pointer-events: none; max-width: 92%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .share-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* 动画 + 减弱动态偏好（全关） */ @keyframes sp-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes sp-pulse { 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.95); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } @keyframes sp-sheen { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } } @keyframes sp-foil { 0% { background-position: 0 0; } 100% { background-position: 200% 0; } } @media (prefers-reduced-motion: reduce) { .sp-rays, .sp-medal .halo, .sp-foil { animation: none !important; } .sp-cta::after { display: none; animation: none !important; } } /* ===================================================================== ★ PC 横屏（1920x1080）适配 —— 仅在 body.landscape 下生效， 由 https://d1u4k7xc6u3yed.cloudfront.net/agent-soccer/js/app.js fitStage() 切换。竖版规则不动，以下全部是追加覆盖。 ===================================================================== */ /* --------------------------------------------------------------------- ★ 横屏 5. 排行榜：顶栏/页签/榜单整体居中、最大宽 1400px（背景仍全屏）， 行内字段间距加大，利用横向空间；列表纵向滚动不变。 --------------------------------------------------------------------- */ body.landscape #screen-leaderboard .lbx > * { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; } body.landscape #screen-leaderboard .lbx { padding: 36px 48px; } body.landscape #screen-leaderboard .lbx-row { gap: 26px; padding: 14px 30px; } body.landscape #screen-leaderboard .lbx-main { gap: 18px; } body.landscape #screen-leaderboard .lbx-val { min-width: 170px; } body.landscape #screen-leaderboard .lbx-rec { font-size: 24px; } body.landscape #screen-leaderboard .lbx-colhead { padding: 0 30px; } /* --------------------------------------------------------------------- ★ 横屏 6. 赛后结算：记分板横贯顶部，下方「进球简报(左) | 球队统计+ 球员数据(右)」双栏，底部按钮行横贯。各列表内部滚动，杜绝纵向挤压。 --------------------------------------------------------------------- */ body.landscape #screen-settlement .stx { display: grid; grid-template-columns: 620px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto; grid-template-areas: "title title" "board board" "bh th" "brief ts" "brief ph" "brief ps" "act act"; column-gap: 32px; row-gap: 12px; padding: 28px 56px; } body.landscape #screen-settlement .stx > .t-title { grid-area: title; } body.landscape #screen-settlement .stx > .stx-board { grid-area: board; } /* 三个 .t-group 小标题按 DOM 顺序：进球简报 / 球队统计 / 球员数据 */ body.landscape #screen-settlement .stx > h3:nth-of-type(1) { grid-area: bh; } body.landscape #screen-settlement .stx > h3:nth-of-type(2) { grid-area: th; } body.landscape #screen-settlement .stx > h3:nth-of-type(3) { grid-area: ph; } /* 进球简报占满左列整高（竖版 max-height:230px 解除），内部滚动 */ body.landscape #screen-settlement #st-brief { grid-area: brief; max-height: none; min-height: 0; overflow-y: auto; } body.landscape #screen-settlement #st-team-stats { grid-area: ts; } body.landscape #screen-settlement #st-player-stats { grid-area: ps; min-height: 0; } body.landscape #screen-settlement .stx-actions { grid-area: act; }