/* ========== 设计系统 ========== */ /* 主题色通过 [data-theme] 在 上切换。 默认（无 data-theme 或 = xiaoxiaoluo）：曼联 —— 红黄配色 */ :root{ --bg:#0b0b0d; --bg-2:#131316; --card:#18181c; --card-hover:#1e1e24; --border:#2a2a30; --border-hot:#3a2020; --crimson:#dc143c; --crimson-dim:#8b0a1e; --crimson-glow:rgba(220,20,60,.15); --accent:#e8b923; /* 曼联辅色：金 */ --accent-2:#dc143c; --gold:#c9a84c; --theme-name:"小小罗"; --text:#d6d6db; --text-dim:#7a7a82; --text-bright:#f0f0f4; --on-accent:#fff; /* 主色块上的文字色 */ --serif:Georgia,'Times New Roman','Noto Serif SC',serif; --sans:-apple-system,BlinkMacSystemFont,'Segoe UI','Microsoft YaHei',sans-serif; --mono:'Courier New','Consolas',monospace; } /* 沙漠骆驼主题 —— 利雅得胜利：黄+蓝（深底+黄主+蓝辅） */ [data-theme="camel"]{ --bg:#0a0d18; --bg-2:#101628; --card:#141d33; --card-hover:#1a2540; --border:#243352; --border-hot:#1f3055; --crimson:#e8b923; /* 利雅得胜利黄 */ --crimson-dim:#9c7d12; --crimson-glow:rgba(232,185,35,.16); --accent:#4a90e2; /* 蓝 */ --accent-2:#e8b923; --text:#d8def0; --text-dim:#7a85a8; --text-bright:#f2f5ff; --on-accent:#1a1a1a; --theme-name:"沙漠骆驼"; } /* 菌鞭罗主题 —— 皇马：纯白底 + 黑字（浅色主题） */ [data-theme="galactico"]{ --bg:#ffffff; --bg-2:#f5f6f8; --card:#ffffff; --card-hover:#eef0f3; --border:#d4d7dc; --border-hot:#b8bdc5; --crimson:#1a1a1a; /* 皇马：黑白，主色用黑 */ --crimson-dim:#444; --crimson-glow:rgba(0,0,0,.08); --accent:#1a1a1a; --accent-2:#666; --text:#1a1a1a; --text-dim:#5a5f66; --text-bright:#000; --on-accent:#fff; --gold:#b8941f; --theme-name:"菌鞭罗"; } /* ========== 全局鼠标涟漪/光晕氛围层 ========== 暗色背景下鼠标周围泛起淡淡红光（screen 混合，不压暗白色文字）； 点击时生成扩散涟漪环。移动端 / prefers-reduced-motion 下由 JS 不启用。*/ .fx-aura{ position:fixed;top:0;left:0;width:600px;height:600px; margin:-300px 0 0 -300px; /* 以鼠标点为中心 */ border-radius:50%; background:radial-gradient(circle,var(--crimson),transparent 60%); opacity:0; /* JS 接管后设为目标值 */ pointer-events:none; mix-blend-mode:screen; z-index:1; /* 在内容之下、背景之上 */ will-change:transform,opacity; transition:opacity .5s ease; /* 进入/离开窗口淡入淡出 */ } body.fx-ready .fx-aura{opacity:.18} /* 启用后的常态透明度 */ .fx-ripple{ position:fixed;top:0;left:0; width:20px;height:20px;margin:-10px 0 0 -10px; border-radius:50%; border:2px solid var(--crimson); pointer-events:none; mix-blend-mode:screen; z-index:1; opacity:0; animation:fxRipple .9s ease-out forwards; } @keyframes fxRipple{ 0%{transform:scale(.3);opacity:.55} 100%{transform:scale(10);opacity:0} } /* 主题切换平滑过渡 */ body,nav,.ticker,.modal,.event-card,.nick-card,.viz-card,.filter-chip, .btn,.name-expose,.hero-stats,.quote-wall,.footer,.tl-item,.scan-item, .pk-arena,.meme-studio,.ledger,.nick-card-img{ transition:background-color .5s,color .5s,border-color .5s; } .bar-fill,.btn-primary,.back-to-top{transition:background-color .5s,border-color .5s} /* 浅色主题（皇马）特殊处理：文字对比 */ [data-theme="galactico"] body{background:#fff;color:#1a1a1a} [data-theme="galactico"] .ticker{background:#1a1a1a;color:#fff} [data-theme="galactico"] .nav{background:rgba(255,255,255,.92);border-bottom-color:#d4d7dc} [data-theme="galactico"] .nav-toggle{border-color:#d4d7dc} [data-theme="galactico"] .nav-toggle span{background:#1a1a1a} [data-theme="galactico"] .nav-search{background:#f5f6f8;border-color:#d4d7dc} [data-theme="galactico"] .hero-bg{ background:radial-gradient(ellipse at 75% 40%,rgba(0,0,0,.06),transparent 60%),radial-gradient(ellipse at 20% 80%,rgba(0,0,0,.04),transparent 50%); } [data-theme="galactico"] .hero-grid{opacity:.5} [data-theme="galactico"] .hero-stats{background:rgba(255,255,255,.9);border-top-color:#d4d7dc} [data-theme="galactico"] .modal{background:#fff} [data-theme="galactico"] .modal-overlay{background:rgba(0,0,0,.5)} [data-theme="galactico"] .quote-wall::before{color:#1a1a1a} [data-theme="galactico"] .bar-track{background:#eef0f3} [data-theme="galactico"] .timeline-section, [data-theme="galactico"] .nickname-section, [data-theme="galactico"] .meme-section{background:#f5f6f8} [data-theme="galactico"] .pk-section{background:linear-gradient(180deg,#fff,#f5f6f8)} [data-theme="galactico"] .tl-item::after{border-color:#fff} [data-theme="galactico"] ::-webkit-scrollbar-track{background:#fff} [data-theme="galactico"] ::-webkit-scrollbar-thumb{background:#ccc} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:var(--sans); line-height:1.7; overflow-x:hidden; } img{display:block;max-width:100%} a{color:inherit;text-decoration:none} /* 滚动条 */ ::-webkit-scrollbar{width:8px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:#333;border-radius:4px} ::-webkit-scrollbar-thumb:hover{background:var(--crimson-dim)} /* ========== 跑马灯 ========== */ .ticker{ background:var(--crimson); color:#fff; font-family:var(--mono); font-size:12px; letter-spacing:1px; white-space:nowrap; overflow:hidden; padding:6px 0; position:relative; z-index:100; } .ticker-track{ display:inline-block; animation:tickerScroll 40s linear infinite; padding-left:100%; } .ticker-track span{margin-right:60px} .ticker-track span::before{content:"⚠ ";color:#fff} @keyframes tickerScroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}} /* ========== 导航 ========== */ .nav{ position:sticky; top:0; z-index:90; background:rgba(11,11,13,.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:14px 0; } .nav-inner{ max-width:1300px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; } .nav-logo{ font-family:var(--serif); font-size:20px; font-weight:bold; letter-spacing:-.5px; color:var(--text-bright); } .nav-logo .red{color:var(--crimson)} .nav-links{display:flex;gap:18px;align-items:center;flex-shrink:1;flex-wrap:wrap} .nav-links a{ font-size:13px; color:var(--text-dim); transition:color .2s; position:relative; } .nav-links a:hover{color:var(--crimson)} .nav-search{ background:var(--card); border:1px solid var(--border); border-radius:20px; padding:6px 14px 6px 32px; color:var(--text); font-size:13px; width:160px; outline:none; transition:border-color .2s,width .2s; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a7a82' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:10px center; } .nav-search:focus{border-color:var(--crimson);width:220px} /* ========== Hero ========== */ .hero{ position:relative; min-height:88vh; display:flex; align-items:center; overflow:hidden; padding:60px 24px; } .hero-bg{ position:absolute;inset:0; background: radial-gradient(ellipse at 75% 40%,rgba(220,20,60,.12),transparent 60%), radial-gradient(ellipse at 20% 80%,rgba(139,10,30,.08),transparent 50%); z-index:0; animation:heroGlow 8s ease-in-out infinite; } /* 径向光晕呼吸：opacity 幅度加大 + 双层错峰（::before 第二层光晕）*/ @keyframes heroGlow{0%,100%{opacity:1}50%{opacity:.45}} .hero-bg::before{ content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse at 50% 50%,rgba(220,20,60,.08),transparent 55%); animation:heroGlow2 11s ease-in-out infinite; mix-blend-mode:screen; } @keyframes heroGlow2{0%,100%{opacity:0;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}} .hero-grid{ position:absolute;inset:0; background-image: linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:60px 60px; z-index:0; animation:heroGridDrift 60s linear infinite; } /* 网格缓慢漂移，制造"监控画面"的活感 */ @keyframes heroGridDrift{from{background-position:0 0,0 0}to{background-position:60px 60px,60px 60px}} /* hero 横向扫描线（叠加在 hero-bg 上，不碰 background 属性以兼容 galactico 主题）*/ .hero-bg::after{ content:"";position:absolute;left:0;right:0;top:0;height:140px;pointer-events:none; background:linear-gradient(180deg,transparent,rgba(220,20,60,.1),transparent); animation:heroScan 7s ease-in-out infinite;opacity:0; } @keyframes heroScan{ 0%{transform:translateY(-140px);opacity:0} 10%,90%{opacity:1} 50%{transform:translateY(60vh)} 100%{transform:translateY(60vh);opacity:0} } .hero-inner{ position:relative;z-index:2; max-width:1300px;margin:0 auto; width:100%; display:grid; grid-template-columns:1.3fr 1fr; gap:60px; align-items:center; } .hero-tag{ display:inline-flex;align-items:center;gap:8px; font-family:var(--mono);font-size:11px; color:var(--crimson);letter-spacing:2px; text-transform:uppercase; margin-bottom:24px; opacity:0;animation:fadeUp .8s .1s forwards; } .hero-tag::before{ content:"";display:block;width:30px;height:1px;background:var(--crimson); } .hero h1{ font-family:var(--serif); font-size:clamp(48px,8vw,96px); line-height:.95; font-weight:900; color:var(--text-bright); letter-spacing:-2px; margin-bottom:8px; opacity:0;animation:fadeUp .8s .2s forwards; } .hero h1 .strike{ color:var(--crimson); position:relative; } .hero h1 .strike::after{ content:"";position:absolute;left:0;right:0;top:50%; height:4px;background:var(--crimson); transform:scaleX(0);transform-origin:left; animation:strikeIn .6s 1s forwards; } @keyframes strikeIn{to{transform:scaleX(1)}} .hero-sub{ font-family:var(--serif); font-size:clamp(18px,2.5vw,26px); color:var(--text-dim); font-style:italic; margin-bottom:28px; opacity:0;animation:fadeUp .8s .3s forwards; } .hero-desc{ font-size:15px; color:var(--text); max-width:520px; margin-bottom:36px; opacity:0;animation:fadeUp .8s .4s forwards; } .hero-desc strong{color:var(--crimson);font-weight:600} .hero-cta{ display:flex;gap:16px; opacity:0;animation:fadeUp .8s .5s forwards; } .btn{ padding:13px 28px; font-size:13px;font-weight:600; letter-spacing:1px;text-transform:uppercase; border:none;cursor:pointer; transition:all .25s; font-family:var(--sans); } .btn-primary{ background:var(--crimson);color:#fff; } .btn-primary:hover{background:#ff1744;transform:translateY(-2px);box-shadow:0 8px 24px rgba(220,20,60,.4)} .btn-ghost{ background:transparent;color:var(--text); border:1px solid var(--border); } .btn-ghost:hover{border-color:var(--crimson);color:var(--crimson)} /* Hero 图片区 */ .hero-visual{ position:relative; opacity:0;animation:fadeUp .8s .6s forwards; } .hero-photo{ position:relative; border-radius:4px; overflow:hidden; border:1px solid var(--border); aspect-ratio:3/4; background:var(--card); } .hero-photo img{ width:100%;height:100%;object-fit:cover; filter:grayscale(.3) contrast(1.1); transition:filter .4s; } .hero-photo:hover img{filter:grayscale(0) contrast(1)} .hero-photo::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(11,11,13,.6),transparent 50%); pointer-events:none; } .hero-stamp{ position:absolute; top:-12px;right:-12px; width:100px;height:100px; border:3px solid var(--crimson); border-radius:50%; display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:10px; color:var(--crimson);text-align:center; font-weight:bold;line-height:1.3; transform:rotate(-12deg); background:var(--bg); z-index:3; } .hero-stamp span{font-size:22px;display:block;margin-bottom:2px} /* Hero 统计条 */ .hero-stats{ position:absolute; bottom:0;left:0;right:0; z-index:3; background:rgba(11,11,13,.85); backdrop-filter:blur(8px); border-top:1px solid var(--border); padding:20px 24px; } .hero-stats-inner{ max-width:1300px;margin:0 auto; display:flex;justify-content:space-around;flex-wrap:wrap;gap:20px; } .hstat{text-align:center} .hstat-num{ font-family:var(--serif); font-size:clamp(28px,4vw,42px); font-weight:900; color:var(--crimson); line-height:1; } .hstat-label{ font-family:var(--mono);font-size:10px; color:var(--text-dim); text-transform:uppercase;letter-spacing:1.5px; margin-top:6px; } @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} /* ========== 板块标题 ========== */ .section{ max-width:1300px; margin:0 auto; padding:50px 24px; } .section-header{ margin-bottom:32px; display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;gap:20px; } .section-label{ font-family:var(--mono); font-size:11px; color:var(--crimson); letter-spacing:3px; text-transform:uppercase; margin-bottom:10px; } .section-title{ font-family:var(--serif); font-size:clamp(32px,5vw,52px); font-weight:900; color:var(--text-bright); letter-spacing:-1px; line-height:1; } .section-desc{ color:var(--text-dim); font-size:14px; max-width:400px; text-align:right; } /* ========== 分类筛选 ========== */ .filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; padding-bottom:24px; border-bottom:1px solid var(--border); } .filter-chip{ padding:8px 18px; font-size:13px; font-weight:500; background:var(--card); border:1px solid var(--border); border-radius:24px; cursor:pointer; transition:all .2s; color:var(--text-dim); display:flex;align-items:center;gap:8px; } .filter-chip:hover{border-color:var(--crimson);color:var(--text)} .filter-chip.active{ background:var(--crimson); border-color:var(--crimson); color:#fff; } .filter-chip .count{ font-family:var(--mono); font-size:10px; background:rgba(255,255,255,.12); padding:1px 6px; border-radius:10px; } .filter-chip.active .count{background:rgba(0,0,0,.25)} /* 严重度筛选 */ .severity-filter{ display:flex;align-items:center;gap:12px; margin-bottom:32px; font-size:12px;color:var(--text-dim); } .severity-filter select{ background:var(--card);border:1px solid var(--border); color:var(--text);padding:6px 12px;border-radius:4px; font-size:12px;outline:none;cursor:pointer; } /* ========== 卡片网格 ========== */ .cards-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; } .event-card{ background:var(--card); border:1px solid var(--border); border-radius:6px; overflow:hidden; cursor:pointer; transition:opacity .5s cubic-bezier(.2,.8,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), background-color .3s,border-color .3s,box-shadow .3s; /* stagger 仅延迟入场的 opacity/transform；hover 时下方规则把 delay 归零保证即时响应 */ transition-delay:var(--stagger,0s); position:relative; display:flex; flex-direction:column; opacity:0; transform:translateY(40px); } .event-card.visible{ opacity:1; transform:translateY(0); } .event-card:hover{transition-delay:0s} .event-card:hover{ border-color:var(--border-hot); background:var(--card-hover); transform:translateY(-6px); box-shadow:0 16px 40px rgba(0,0,0,.5); } .event-card:hover .card-img img{transform:scale(1.08);filter:grayscale(0)} .card-img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-2); } .card-img img{ width:100%;height:100%;object-fit:cover; filter:grayscale(.5) contrast(1.05); transition:all .5s; } .card-img::after{ content:"";position:absolute;inset:0; background:linear-gradient(to bottom,transparent 40%,rgba(24,24,28,.95)); pointer-events:none; } .card-cat{ position:absolute;top:12px;left:12px; z-index:2; font-family:var(--mono);font-size:10px; letter-spacing:1px;text-transform:uppercase; padding:4px 10px;border-radius:3px; font-weight:600; } .card-severity{ position:absolute;top:12px;right:12px; z-index:2; display:flex;gap:2px; } .card-severity .dot{ width:7px;height:7px;border-radius:50%; background:rgba(255,255,255,.15); } .card-severity .dot.on{background:var(--crimson)} .card-body{padding:16px 18px;flex:1;display:flex;flex-direction:column} .card-date{ font-family:var(--mono);font-size:10px; color:var(--text-dim);margin-bottom:6px; letter-spacing:.5px; } .card-title{ font-family:var(--serif); font-size:17px;font-weight:700; color:var(--text-bright); line-height:1.25; margin-bottom:8px; } .card-summary{ font-size:12px;color:var(--text-dim); line-height:1.55; flex:1; } .card-footer{ display:flex;justify-content:space-between;align-items:center; margin-top:12px;padding-top:10px; border-top:1px solid var(--border); } .card-tags{display:flex;gap:6px;flex-wrap:wrap} .card-tag{ font-size:10px;color:var(--text-dim); background:var(--bg-2);padding:2px 8px;border-radius:3px; } .card-read{ font-family:var(--mono);font-size:11px; color:var(--crimson); display:flex;align-items:center;gap:4px; transition:gap .2s; } .event-card:hover .card-read{gap:8px} /* 分类颜色 */ .cat-violence .card-cat{background:var(--crimson-dim);color:#fadbd8} .cat-violence{border-top:3px solid var(--crimson)} .cat-offpitch .card-cat{background:#b9770e;color:#fef9e7} .cat-offpitch{border-top:3px solid #b9770e} .cat-club .card-cat{background:#6e2c00;color:#fae5d3} .cat-club{border-top:3px solid #6e2c00} .cat-national .card-cat{background:#145a32;color:#d5f5e3} .cat-national{border-top:3px solid #145a32} .cat-persona .card-cat{background:#4a235a;color:#e8daef} .cat-persona{border-top:3px solid #4a235a} /* ========== 名字辟谣条 ========== */ .name-expose{ background:linear-gradient(90deg,rgba(74,35,90,.15),transparent 70%); border:1px solid #4a235a; border-radius:6px; padding:24px 28px; margin-bottom:48px; display:flex; align-items:center; gap:24px; flex-wrap:wrap; } .name-expose-icon{ font-family:var(--serif); font-size:48px; color:#9b59b6; font-weight:900; line-height:1; flex-shrink:0; } .name-expose-body{flex:1;min-width:240px} .name-expose-label{ font-family:var(--mono);font-size:10px; color:#9b59b6;letter-spacing:2px; text-transform:uppercase;margin-bottom:6px; } .name-expose-title{ font-family:var(--serif);font-size:18px; color:var(--text-bright);font-weight:700; margin-bottom:6px; } .name-expose-title .crossed{ color:var(--crimson); text-decoration:line-through; text-decoration-color:var(--crimson); } .name-expose-title .real{ color:#9b59b6; } .name-expose-desc{font-size:13px;color:var(--text-dim);line-height:1.6} /* ========== 模态框 ========== */ .modal-overlay{ position:fixed;inset:0; background:rgba(0,0,0,.85); backdrop-filter:blur(6px); z-index:200; display:none; align-items:center;justify-content:center; padding:40px 20px; opacity:0; transition:opacity .3s; } .modal-overlay.show{display:flex;opacity:1} .modal{ background:var(--bg-2); border:1px solid var(--border); border-radius:8px; max-width:800px;width:100%; max-height:88vh;overflow-y:auto; position:relative; transform:scale(.92) translateY(20px); transition:transform .3s cubic-bezier(.2,.8,.2,1); } .modal-overlay.show .modal{transform:scale(1) translateY(0)} .modal-close{ position:absolute;top:16px;right:16px; z-index:5; width:38px;height:38px; background:rgba(0,0,0,.6); border:1px solid var(--border); border-radius:50%; color:#fff;font-size:18px; cursor:pointer; display:flex;align-items:center;justify-content:center; transition:all .2s; } .modal-close:hover{background:var(--crimson);border-color:var(--crimson)} .modal-hero{ position:relative; aspect-ratio:21/9; overflow:hidden; border-radius:8px 8px 0 0; background:var(--card); } .modal-hero img{ width:100%;height:100%;object-fit:cover; filter:grayscale(.2) contrast(1.1); } .modal-hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,var(--bg-2) 2%,transparent 50%); } .modal-cat-badge{ position:absolute;top:20px;left:20px; z-index:3; font-family:var(--mono);font-size:11px; letter-spacing:1px;text-transform:uppercase; padding:6px 14px;border-radius:4px;font-weight:600; } .modal-body{padding:32px 40px 40px} /* 头条长报道：文中插图 */ .modal-figure{ margin:28px -8px;border:1px solid var(--border);border-radius:6px;overflow:hidden; background:var(--card); } .modal-figure img{display:block;width:100%;height:auto} .modal-figure figcaption{ padding:10px 14px;font-family:var(--mono);font-size:11px;color:var(--text-dim); line-height:1.5;border-top:1px solid var(--border);background:var(--bg-2); } .modal-figure figcaption b{color:var(--crimson);font-weight:600} /* 头条长报道：小标题样式增强 */ .modal-body p strong{color:var(--text-bright)} .modal-body .modal-lead{ font-size:17px;line-height:1.85;color:var(--text); border-left:3px solid var(--crimson);padding-left:16px;margin:20px 0 28px; background:var(--crimson-glow);padding:14px 16px;border-radius:0 4px 4px 0; } .modal-date{ font-family:var(--mono);font-size:12px; color:var(--crimson);letter-spacing:1px; margin-bottom:10px; } .modal-title{ font-family:var(--serif); font-size:32px;font-weight:900; color:var(--text-bright); line-height:1.2;margin-bottom:20px; } .modal-meta{ display:flex;flex-wrap:wrap;gap:16px; padding:16px 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); margin-bottom:24px; } .modal-meta-item{font-size:12px} .modal-meta-item .label{ color:var(--text-dim);font-family:var(--mono); font-size:10px;text-transform:uppercase;letter-spacing:1px; display:block;margin-bottom:3px; } .modal-meta-item .val{color:var(--text-bright);font-weight:600} .modal-severity-bar{ display:flex;align-items:center;gap:8px; } .modal-severity-bar .dot{ width:12px;height:12px;border-radius:50%; background:rgba(255,255,255,.1); } .modal-severity-bar .dot.on{background:var(--crimson)} .modal-detail{ font-size:15px;color:var(--text); line-height:1.85; } .modal-detail p{margin-bottom:16px} .modal-detail strong{color:var(--text-bright)} .modal-detail em{color:var(--crimson);font-style:normal;font-weight:600} .modal-quote{ border-left:3px solid var(--crimson); padding:16px 24px; margin:24px 0; background:var(--card); font-family:var(--serif); font-style:italic; font-size:16px; color:var(--text-bright); border-radius:0 4px 4px 0; } .modal-quote cite{ display:block; font-style:normal; font-family:var(--mono); font-size:11px; color:var(--text-dim); margin-top:10px; letter-spacing:1px; } .modal-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px} .modal-tag{ font-size:11px; background:var(--card); border:1px solid var(--border); padding:4px 12px;border-radius:20px; color:var(--text-dim); } /* ========== 时间线 ========== */ .timeline-section{ background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); } .timeline{ position:relative; max-width:900px; margin:0 auto; padding:0 24px; } .timeline::before{ content:"";position:absolute; left:50%;top:0;bottom:0; width:2px;background:var(--border); transform:translateX(-50%); } .tl-item{ position:relative; width:50%; padding:20px 40px; opacity:0; transform:translateY(30px); transition:all .6s; } .tl-item.visible{opacity:1;transform:translateY(0)} .tl-item:nth-child(odd){left:0;text-align:right} .tl-item:nth-child(even){left:50%} .tl-item::after{ content:"";position:absolute; top:28px; width:14px;height:14px; background:var(--crimson); border:3px solid var(--bg-2); border-radius:50%; z-index:2; } .tl-item:nth-child(odd)::after{right:-7px} .tl-item:nth-child(even)::after{left:-7px} .tl-year{ font-family:var(--serif); font-size:24px;font-weight:900; color:var(--crimson); margin-bottom:4px; } .tl-title{ font-size:15px;font-weight:600; color:var(--text-bright); margin-bottom:6px; } .tl-desc{font-size:12px;color:var(--text-dim);line-height:1.6} /* ========== 引用墙 ========== */ .quote-wall{ text-align:center; padding:60px 24px 100px; /* 底部留出按钮的固定席位 */ position:relative; overflow:hidden; min-height:320px; /* 固定高度席位，文字长短不再顶动按钮 */ } .quote-wall::before{ content:'"'; position:absolute; top:-40px;left:50%; transform:translateX(-50%); font-family:var(--serif); font-size:280px; color:var(--crimson); opacity:.06; line-height:1; /* 装饰性大引号：280px 字高向下延伸会盖住下方按钮， 必须设 pointer-events:none，否则它会吞掉左右按钮的点击 */ pointer-events:none; } .quote-text{ font-family:var(--serif); font-size:clamp(22px,3.5vw,36px); font-style:italic; color:var(--text-bright); max-width:900px;margin:0 auto 8px; line-height:1.5; position:relative;z-index:2; } .quote-author{ font-family:var(--mono); font-size:13px; color:var(--crimson); letter-spacing:2px; text-transform:uppercase; } /* ========== 数据可视化区 ========== */ .data-viz{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:40px; margin-top:40px; } .viz-card{ background:var(--card); border:1px solid var(--border); border-radius:6px; padding:28px; } .viz-title{ font-family:var(--mono);font-size:11px; color:var(--text-dim);letter-spacing:2px; text-transform:uppercase;margin-bottom:20px; } .bar-row{ display:flex;align-items:center;gap:12px; margin-bottom:12px;font-size:13px; } .bar-label{width:120px;color:var(--text-dim);font-size:12px;text-align:right;flex-shrink:0} .bar-track{ flex:1;height:24px;background:var(--bg-2); border-radius:3px;overflow:hidden;position:relative; } .bar-fill{ height:100%;background:var(--crimson); border-radius:3px; width:0; transition:width 1.2s cubic-bezier(.2,.8,.2,1); position:relative; } .bar-val{ position:absolute;right:8px;top:50%; transform:translateY(-50%); font-family:var(--mono);font-size:11px; color:#fff;font-weight:bold; } /* ========== Footer ========== */ .footer{ background:var(--bg-2); border-top:1px solid var(--border); padding:60px 24px 30px; text-align:center; } .footer-logo{ font-family:var(--serif); font-size:28px;font-weight:900; color:var(--text-bright); margin-bottom:12px; } .footer-logo .red{color:var(--crimson)} .footer-text{ color:var(--text-dim);font-size:13px; max-width:600px;margin:0 auto 20px; line-height:1.7; } .footer-disclaimer{ font-family:var(--mono);font-size:10px; color:var(--text-dim); border-top:1px solid var(--border); padding-top:20px;margin-top:30px; letter-spacing:.5px; } /* ========== 签名彩蛋（档案封印）========== */ .footer-seal{ position:relative; margin-top:36px;padding-top:24px; border-top:1px dashed var(--border); user-select:none; } .seal-stage{ position:relative;z-index:2; display:flex;flex-direction:column;align-items:center;gap:8px; } /* 签名主体：默认清晰，悬停轻微放大 */ .seal-stamp{ font-family:var(--serif); font-size:clamp(28px,4vw,38px); font-weight:900; letter-spacing:2px; cursor:pointer; color:var(--text-bright); transition:transform .4s cubic-bezier(.2,.8,.2,1),color .4s,filter .4s; display:inline-flex;align-items:baseline;gap:6px; } .seal-stamp .seal-glyph{color:var(--crimson)} .seal-stamp:hover,.seal-stamp:focus-visible{ transform:scale(1.06); filter:drop-shadow(0 0 12px var(--crimson-glow)); outline:none; } .seal-hint{ font-family:var(--mono);font-size:11px; color:var(--text-dim);letter-spacing:1.5px; opacity:.6;transition:opacity .3s; } .footer-seal:hover .seal-hint{opacity:1} .seal-count{ font-family:var(--mono);font-size:11px; color:var(--crimson);letter-spacing:1px; } .seal-title{ font-family:var(--serif);font-size:14px;font-weight:700; background:linear-gradient(90deg,var(--crimson),var(--gold)); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; animation:sealTitleIn .6s cubic-bezier(.2,.8,.2,1); } @keyframes sealTitleIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} /* 印章砸落动画（JS 注入 .seal-drop）*/ .seal-drop{ position:absolute;top:-12px;left:50%; width:48px;height:48px;margin-left:-24px; border-radius:50%; border:2px solid var(--crimson); background:radial-gradient(circle,rgba(220,20,60,.35),rgba(220,20,60,.1)); color:var(--crimson); display:flex;align-items:center;justify-content:center; font-family:var(--serif);font-size:9px;font-weight:900; letter-spacing:.5px;text-align:center;line-height:1.1; pointer-events:none; z-index:3; animation:sealDrop .5s cubic-bezier(.6,1.5,.4,1) forwards; } @keyframes sealDrop{ 0%{transform:translateY(-180px) scale(1.3) rotate(-25deg);opacity:0} 60%{transform:translateY(0) scale(1) rotate(0deg);opacity:1} 75%{transform:translateY(-12px) scale(1.02) rotate(-2deg)} 100%{transform:translateY(0) scale(1) rotate(0deg);opacity:1} } /* 落地震动（施加在 stage）*/ .seal-stamp.shaking{animation:sealShake .4s ease} @keyframes sealShake{ 0%,100%{transform:scaleX(1) rotate(0)} 20%{transform:scaleX(1) rotate(-2deg) translateY(2px)} 40%{transform:scaleX(1) rotate(2deg) translateY(-1px)} 60%{transform:scaleX(1) rotate(-1deg) translateY(1px)} 80%{transform:scaleX(1) rotate(1deg)} } /* 永久墨迹印记（堆叠在底部，随盖章次数累积）*/ .seal-marks{ position:absolute;left:0;right:0;bottom:-8px; height:40px;pointer-events:none;z-index:1; display:flex;justify-content:center;gap:6px;flex-wrap:wrap; } .seal-inkmark{ width:9px;height:9px;border-radius:50%; background:var(--crimson); opacity:.55; filter:blur(.5px); animation:inkBloom .6s ease-out forwards; } @keyframes inkBloom{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:.55}} /* ========== SIU 庆祝（封顶 7 印触发）========== */ .siu-overlay{ position:fixed;inset:0;z-index:9999; display:flex;align-items:center;justify-content:center; pointer-events:none; background:radial-gradient(circle at center,rgba(220,20,60,.25),transparent 60%); animation:siuBg .2s ease-out forwards; } @keyframes siuBg{from{opacity:0}to{opacity:1}} .siu-overlay.out{animation:siuBgOut .4s ease-in forwards} @keyframes siuBgOut{to{opacity:0}} /* SIU! 主文字：放大旋转砸入 */ .siu-text{ font-family:var(--serif); font-size:clamp(80px,18vw,220px); font-weight:900; color:var(--crimson); letter-spacing:6px; text-shadow:0 0 40px var(--crimson),0 0 80px var(--crimson-glow),0 8px 0 rgba(0,0,0,.4); transform:scale(0) rotate(-30deg); animation:siuPop .5s cubic-bezier(.2,1.8,.4,1) forwards; } @keyframes siuPop{ 0%{transform:scale(0) rotate(-30deg);opacity:0} 60%{transform:scale(1.15) rotate(3deg);opacity:1} 80%{transform:scale(.95) rotate(-1deg)} 100%{transform:scale(1) rotate(0deg);opacity:1} } /* C罗剪影姿势（纯 CSS 拼贴：跳起张臂）*/ .siu-figure{ position:absolute;bottom:18%;left:50%;margin-left:-50px; width:100px;height:140px; animation:siuJump .9s cubic-bezier(.3,1.2,.4,1) forwards; } /* 图片版庆祝：居中大图，带红光描边 */ .siu-figure.siu-figure-img{ position:absolute;bottom:0;left:0;margin-left:0; width:auto;height:auto; display:flex;align-items:center;justify-content:center; inset:0; } .siu-figure.siu-figure-img img{ max-width:min(70vw,420px); max-height:70vh; object-fit:contain; border-radius:8px; filter:drop-shadow(0 0 30px var(--crimson)) drop-shadow(0 12px 40px rgba(0,0,0,.6)); animation:siuJump .9s cubic-bezier(.3,1.2,.4,1) forwards; } /* 视频版庆祝：cr7 真人 SIU，居中放大，播一遍后随覆盖层渐变消失 */ .siu-figure.siu-figure-video{ position:absolute;bottom:0;left:0;margin-left:0; width:auto;height:auto; display:flex;align-items:center;justify-content:center; inset:0; } .siu-figure.siu-figure-video video{ max-width:min(94vw,760px); max-height:88vh; border-radius:12px; object-fit:contain; filter:drop-shadow(0 0 40px var(--crimson)) drop-shadow(0 12px 40px rgba(0,0,0,.6)); animation:siuVideoIn .5s cubic-bezier(.2,1.4,.4,1) forwards; } @keyframes siuVideoIn{ 0%{transform:scale(.3) rotate(-12deg);opacity:0} 60%{transform:scale(1.08) rotate(3deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} } @keyframes siuJump{ 0%{transform:translateY(40px) scale(.6);opacity:0} 30%{transform:translateY(-20px) scale(1);opacity:1} 60%{transform:translateY(-30px) scale(1.05)} 100%{transform:translateY(0) scale(1)} } /* 彩纸碎片：JS 注入，随机色随机位落下 */ .siu-confetti{ position:fixed;top:-20px;width:8px;height:14px; z-index:9998;pointer-events:none; animation:siuFall linear forwards; } @keyframes siuFall{to{transform:translateY(110vh) rotate(720deg)}} @media(max-width:600px){ .footer-seal{margin-top:28px;padding-top:20px} .seal-stamp{font-size:26px} } /* ========== 图片加载失败备用 ========== */ .img-fallback{ display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--bg-2),var(--card)); color:var(--text-dim); font-family:var(--mono);font-size:11px; text-align:center; } /* ========== Hero照片轮播 ========== */ .hero-gallery{ position:relative; border-radius:4px; overflow:hidden; border:1px solid var(--border); aspect-ratio:3/4; background:var(--card); } .hero-gallery-track{ position:relative; width:100%;height:100%; } .hero-slide{ position:absolute;inset:0; opacity:0; transition:opacity .8s; } .hero-slide.active{opacity:1} .hero-slide img{ width:100%;height:100%;object-fit:cover; filter:grayscale(.2) contrast(1.1); } .hero-slide::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,rgba(11,11,13,.7),transparent 50%); pointer-events:none; } .hero-slide-caption{ position:absolute;bottom:16px;left:16px;right:16px; z-index:3; font-family:var(--mono);font-size:11px; color:rgba(255,255,255,.8); letter-spacing:1px; } .hero-gallery-nav{ position:absolute;bottom:16px;right:16px; z-index:4; display:flex;gap:6px; } .hero-dot{ width:8px;height:8px;border-radius:50%; background:rgba(255,255,255,.3); cursor:pointer; transition:background .2s; } .hero-dot.active{background:var(--crimson)} .hero-gallery-tag{ position:absolute;top:12px;left:12px; z-index:4; font-family:var(--mono);font-size:9px; color:var(--crimson); background:rgba(0,0,0,.7); padding:4px 10px;border-radius:3px; letter-spacing:1px; text-transform:uppercase; } /* ========== 绰号进化史 ========== */ .nickname-section{ background:var(--bg-2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:50px 0; } .nickname-grid{ max-width:1300px; margin:0 auto; padding:0 24px; display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:20px; } .nick-card{ background:var(--card); border:1px solid var(--border); border-radius:6px; overflow:hidden; transition:all .3s; position:relative; } .nick-card:hover{ border-color:var(--crimson-dim); transform:translateY(-4px); } .nick-card-img{ aspect-ratio:4/3; overflow:hidden; background:var(--bg); position:relative; } .nick-card-img img{ width:100%;height:100%;object-fit:cover; filter:grayscale(.3); transition:filter .4s; } .nick-card:hover .nick-card-img img{filter:grayscale(0)} .nick-card-img::after{ content:"";position:absolute;inset:0; background:linear-gradient(to top,var(--card),transparent 60%); } .nick-num{ position:absolute;top:10px;left:10px; z-index:2; font-family:var(--serif);font-size:32px; font-weight:900;color:var(--crimson); opacity:.5;line-height:1; } .nick-body{padding:18px 20px} .nick-name{ font-family:var(--serif); font-size:22px;font-weight:900; color:var(--text-bright); margin-bottom:4px; } .nick-period{ font-family:var(--mono);font-size:10px; color:var(--crimson); letter-spacing:1px;text-transform:uppercase; margin-bottom:10px; } .nick-desc{font-size:12px;color:var(--text-dim);line-height:1.6} /* ========== 免责声明标记 ========== */ .disclaimer-tag{ display:inline-flex;align-items:center;gap:4px; font-family:var(--mono);font-size:9px; color:#b9770e; background:rgba(185,119,14,.12); padding:2px 8px;border-radius:3px; margin-left:8px; letter-spacing:.5px; } .modal-disclaimer{ background:rgba(185,119,14,.08); border:1px solid rgba(185,119,14,.3); border-radius:4px; padding:12px 16px; margin-top:20px; font-size:12px; color:#d4a64a; line-height:1.6; } .modal-disclaimer strong{color:#e8c068} /* ========== 移动端汉堡菜单 ========== */ .nav-toggle{ display:none; flex-direction:column; justify-content:center; gap:5px; width:34px;height:34px; background:transparent; border:1px solid var(--border); border-radius:6px; cursor:pointer; padding:0 7px; } .nav-toggle span{ display:block; height:2px; width:100%; background:var(--text-bright); transition:.25s; border-radius:2px; } .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.open span:nth-child(2){opacity:0} .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ========== 返回顶部按钮 ========== */ .back-to-top{ position:fixed; right:24px;bottom:24px; width:46px;height:46px; border-radius:50%; background:var(--crimson); color:#fff; border:none; font-size:20px; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(20px); transition:opacity .3s,visibility .3s,transform .3s,background .2s; z-index:80; box-shadow:0 4px 18px rgba(220,20,60,.4); } .back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)} .back-to-top:hover{background:var(--crimson-dim)} /* ========== 模态框翻页 ========== */ .modal-nav{ position:absolute; top:50%; transform:translateY(-50%); width:42px;height:64px; background:rgba(11,11,13,.7); border:1px solid var(--border); color:var(--text-bright); font-size:32px; line-height:1; cursor:pointer; border-radius:6px; display:flex;align-items:center;justify-content:center; transition:background .2s,border-color .2s; z-index:5; } .modal-nav:hover{background:var(--crimson-dim);border-color:var(--crimson)} .modal-nav-prev{left:-56px} .modal-nav-next{right:-56px} .modal-counter{ position:absolute; bottom:-36px;left:50%; transform:translateX(-50%); font-family:var(--mono); font-size:12px; color:var(--text-dim); letter-spacing:1px; } /* ========== 引用轮播控制 ========== */ .quote-controls{ display:flex; gap:12px; justify-content:center; /* 按钮固定在底部，不随语录字数上下跳动 */ position:absolute; left:0;right:0; bottom:28px; margin:0; z-index:3; } .quote-btn{ width:38px;height:38px; border-radius:50%; background:transparent; border:1px solid var(--border); color:var(--text-dim); font-size:12px; cursor:pointer; transition:.2s; display:flex;align-items:center;justify-content:center; } .quote-btn:hover{border-color:var(--crimson);color:var(--crimson)} .quote-btn.quote-play{font-size:11px;letter-spacing:1px} /* ========== 响应式 ========== */ /* 平板及以下：≤900px */ @media(max-width:900px){ .hero{min-height:auto;padding:40px 20px 0} .hero-inner{grid-template-columns:1fr;gap:32px} .hero-visual{max-width:360px;margin:0 auto;width:100%} .hero-stats{ position:static; margin-top:40px; padding:24px 20px; } .hero-stats-inner{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px 12px; } .data-viz{grid-template-columns:1fr} .timeline::before{left:20px} .tl-item{width:100%;left:0!important;text-align:left!important;padding:20px 20px 20px 50px} .tl-item::after{left:13px!important;right:auto!important} .section-header{align-items:flex-start;flex-direction:column} .section-desc{text-align:left;max-width:none} .section{padding:40px 20px} /* 移动端导航：汉堡菜单展开 */ .nav-toggle{display:flex} .nav-links{ position:absolute; top:100%;left:0;right:0; flex-direction:column; align-items:stretch; background:rgba(11,11,13,.98); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:14px 20px 18px; gap:14px; transform:translateY(-8px); opacity:0;visibility:hidden; transition:.25s; } .nav-links.open{transform:translateY(0);opacity:1;visibility:visible} /* 搜索框不再隐藏，而是收进汉堡菜单层（恢复移动端搜索能力） */ .nav-search{ width:100%; border-radius:20px; } .nav-search:focus{width:100%} /* 主题切换器移入汉堡菜单后的样式：三按钮横向均分 */ .nav-links .theme-switcher{ justify-content:space-between; width:100%; margin-top:4px; } .nav-links .theme-switcher .theme-btn{flex:1;text-align:center} .modal-nav-prev{left:8px} .modal-nav-next{right:8px} .modal-body{padding:24px 20px} .modal-title{font-size:24px} .modal-hero{aspect-ratio:16/9} .bar-label{width:96px} } /* 中型手机：≤768px */ @media(max-width:768px){ .hero{padding:32px 16px 0} .section{padding:36px 16px} .hero h1{font-size:clamp(40px,11vw,60px)} .hero-sub{font-size:18px;margin-bottom:20px} .hero-desc{font-size:14px;margin-bottom:28px} .hero-cta{flex-wrap:wrap} .btn{padding:12px 22px;font-size:12px} .section-title{font-size:clamp(28px,7vw,40px)} .data-viz{gap:24px} .viz-card{padding:20px 18px} /* 数据条形图：标签更窄、允许换行，避免挤压条形 */ .bar-label{width:84px;font-size:11px;line-height:1.3;word-break:keep-all} .bar-row{align-items:center} .bar-track{height:22px} } /* 小屏手机：≤600px */ @media(max-width:600px){ .cards-grid{grid-template-columns:1fr;gap:14px} /* Hero 统计：2 列网格，整齐不拥挤 */ .hero-stats-inner{grid-template-columns:repeat(2,1fr);gap:20px 12px} .hstat-num{font-size:clamp(24px,7vw,32px)} .hstat-label{font-size:9px;letter-spacing:1px} .bar-label{width:76px;font-size:10.5px} /* 跑马灯：略放大，避免误触阅读 */ .ticker{font-size:11.5px;padding:5px 0;letter-spacing:.5px} .ticker-track span{margin-right:40px} /* 卡片正文：略放大提升可读性 */ .card-summary{font-size:12.5px} .card-title{font-size:16px} .card-body{padding:14px 16px} /* 分类筛选条：横向滚动，避免换行堆叠占高 */ .filter-bar{ flex-wrap:nowrap; overflow-x:auto; margin:0 -16px 24px; padding:0 16px 16px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .filter-bar::-webkit-scrollbar{display:none} .filter-chip{flex-shrink:0;white-space:nowrap} .severity-filter{flex-wrap:wrap;gap:8px;font-size:11px} .severity-filter #resultCount{width:100%;margin:4px 0 0} /* 名字辟谣条：纵向堆叠 */ .name-expose{flex-direction:column;text-align:left;align-items:flex-start;gap:14px;padding:20px 18px} .name-expose-icon{font-size:40px} .name-expose-title{font-size:15px} .name-expose-desc{font-size:12.5px} /* 引用墙 */ .quote-wall{padding:40px 18px 88px;min-height:260px} .quote-text{font-size:clamp(18px,5.2vw,24px)} .quote-author{font-size:11px;letter-spacing:1px} .quote-controls{bottom:22px} .quote-btn{width:42px;height:42px} /* 模态框：贴边翻页、减小外边距 */ .modal-overlay{padding:0} .modal{max-height:100vh;border-radius:0} .modal-nav{width:36px;height:52px;font-size:26px} .modal-nav-prev{left:6px} .modal-nav-next{right:6px} .modal-body{padding:22px 18px 32px} .modal-title{font-size:21px;margin-bottom:14px} .modal-detail{font-size:14px;line-height:1.75} .modal-meta{gap:10px 18px;padding:12px 0} .modal-quote{padding:12px 16px;font-size:14px;margin:18px 0} .modal-close{top:10px;right:10px;width:34px;height:34px;font-size:16px} /* 返回顶部：缩小，避开内容 */ .back-to-top{right:16px;bottom:16px;width:42px;height:42px;font-size:18px} /* 绰号卡片：单列 */ .nickname-grid{grid-template-columns:1fr;gap:16px;padding:0 16px} /* Footer */ .footer{padding:44px 18px 26px} .footer-logo{font-size:22px} .footer-text{font-size:12px} /* 模态框计数器贴近底部 */ .modal-counter{bottom:-28px;font-size:11px} } /* 超小屏：≤380px */ @media(max-width:380px){ .hero-stats-inner{grid-template-columns:1fr 1fr;gap:16px} .hero h1{font-size:40px} .bar-label{width:68px;font-size:10px} .nav-logo{font-size:17px} } /* 触控设备：确保可点击区域足够大 */ @media (pointer:coarse){ .quote-btn,.modal-close,.nav-toggle{min-width:42px;min-height:42px} .filter-chip{padding:9px 16px} .card-tag,.modal-tag{padding:3px 9px} } /* ============================================================ */ /* ========== 创新模块（主题切换/梅罗PK/检测仪/表情/账本） ======== */ /* ============================================================ */ /* ========== 主题切换器 ========== */ .theme-switcher{ display:flex; align-items:center; gap:8px; padding:0 6px; } .theme-btn{ font-family:var(--mono); font-size:11px; padding:6px 12px; background:var(--card); border:1px solid var(--border); border-radius:16px; color:var(--text-dim); cursor:pointer; transition:all .25s; white-space:nowrap; letter-spacing:.5px; } .theme-btn:hover{border-color:var(--crimson);color:var(--text-bright)} .theme-btn.active{ background:var(--crimson); border-color:var(--crimson); color:#fff; box-shadow:0 0 12px var(--crimson-glow); } .theme-btn .theme-dot{ display:inline-block; width:9px;height:9px; border-radius:50%; margin-right:5px; vertical-align:middle; } .theme-btn[data-theme="xiaoxiaoluo"] .theme-dot{background:#dc143c} .theme-btn[data-theme="camel"] .theme-dot{background:#e8b923} .theme-btn[data-theme="galactico"] .theme-dot{background:#8e6bd6} .theme-btn.active .theme-dot{background:#fff} /* ========== 通用：创新模块 section ========== */ .innov-section{ max-width:1300px; margin:0 auto; padding:60px 24px; } /* ========== 罗黑程度测试 ========== */ .quiz-section{border-top:1px solid var(--border)} .quiz{ position:relative; background:radial-gradient(ellipse at 50% 0%,var(--crimson-glow),transparent 70%),var(--card); border:1px solid var(--border); border-radius:10px; padding:40px 28px; margin-top:30px; overflow:hidden; } .quiz.scanning::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,transparent,var(--crimson),transparent); box-shadow:0 0 20px var(--crimson); animation:scanLine 2.4s ease-in-out infinite;opacity:1; } .quiz-progress{margin-bottom:28px} .quiz-progress-bar{height:4px;background:var(--bg-2);border-radius:2px;overflow:hidden} .quiz-progress-fill{height:100%;width:0;background:var(--crimson);border-radius:2px;transition:width .5s cubic-bezier(.2,.8,.2,1)} .quiz-progress-text{margin-top:10px;font-family:var(--mono);font-size:12px;color:var(--text-dim);letter-spacing:1px} .quiz-q{font-family:var(--serif);font-size:clamp(20px,2.2vw,26px);font-weight:900;line-height:1.3;margin-bottom:22px} .quiz-options{display:flex;flex-direction:column;gap:10px} .quiz-option{ display:flex;align-items:center;gap:14px; padding:14px 18px; background:var(--bg-2); border:1px solid var(--border); border-radius:6px; cursor:pointer; font-size:14px;line-height:1.4; transition:background-color .2s,border-color .2s,transform .15s; text-align:left; color:var(--text); font-family:var(--sans); } .quiz-option:hover{border-color:var(--crimson);background:var(--card-hover);transform:translateX(4px)} .quiz-option .quiz-opt-mark{ flex-shrink:0;width:26px;height:26px;border-radius:50%; border:1px solid var(--border);display:flex;align-items:center;justify-content:center; font-family:var(--mono);font-size:12px;color:var(--text-dim); transition:background-color .2s,border-color .2s,color .2s; } .quiz-option:hover .quiz-opt-mark{border-color:var(--crimson);color:var(--crimson)} .quiz-option.picked{border-color:var(--crimson);background:var(--card-hover)} .quiz-option.picked .quiz-opt-mark{background:var(--crimson);border-color:var(--crimson);color:#fff} .quiz-option.correct{border-color:#3ddc84;background:rgba(61,220,132,.08)} .quiz-option.correct .quiz-opt-mark{background:#3ddc84;border-color:#3ddc84;color:#000} .quiz-option.wrong{border-color:var(--crimson);background:rgba(220,20,60,.1)} .quiz-option.wrong .quiz-opt-mark{background:var(--crimson);border-color:var(--crimson);color:#fff} .quiz-option.locked{cursor:default} .quiz-option.locked:hover{transform:none} .quiz-fb{margin-top:18px;padding:14px 18px;border-radius:6px;font-size:13px;line-height:1.5;background:var(--bg-2);border-left:3px solid var(--crimson)} .quiz-fb.correct-fb{border-left-color:#3ddc84} .quiz-nav{margin-top:24px;display:flex;justify-content:space-between;align-items:center;gap:12px} .quiz-next{ padding:12px 26px;background:var(--crimson);color:#fff;border:none;border-radius:6px; font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase; cursor:pointer;transition:background-color .2s,transform .15s; } .quiz-next:hover{background:#ff1744} .quiz-next:active{transform:scale(.96)} .quiz-next:disabled{background:var(--bg-2);color:var(--text-dim);cursor:not-allowed} .quiz-next:disabled:hover{background:var(--bg-2)} /* 结果页 */ .quiz-result{text-align:center;padding:20px 0} .quiz-score-row{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:18px} .quiz-score-num{font-family:var(--serif);font-size:clamp(56px,8vw,84px);font-weight:900;color:var(--crimson);line-height:1} .quiz-score-num small{font-size:.35em;color:var(--text-dim);font-weight:600} .quiz-rank{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:2px;color:var(--text-bright);text-transform:uppercase} .quiz-verdict{max-width:560px;margin:0 auto 28px;font-size:15px;line-height:1.7;color:var(--text-dim)} .quiz-result.show{animation:fadeUp .6s cubic-bezier(.2,.8,.2,1)} @media(max-width:600px){ .quiz{padding:28px 18px} .quiz-option{padding:12px 14px;font-size:13px} .quiz-nav{flex-direction:column-reverse} .quiz-next{width:100%} } /* ========== #7 黑料真假鉴别 ========== */ .tof-section{border-top:1px solid var(--border)} .tof{position:relative;padding:36px 28px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;overflow:hidden} [data-theme="galactico"] .tof{background:#100c1c;border-color:rgba(142,107,214,.4)} .tof-hud{display:flex;gap:28px;justify-content:center;margin-bottom:24px;flex-wrap:wrap} .tof-stat{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:64px} .tof-stat-n{font-family:var(--serif);font-size:32px;font-weight:900;color:var(--crimson);line-height:1} .tof-stat small{font-size:14px;color:var(--text-dim);font-weight:600} .tof-stat-l{font-family:var(--mono);font-size:10px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase} .tof-card-wrap{display:flex;justify-content:center} .tof-card{ position:relative;max-width:720px;width:100%; background:var(--card);border:1px solid var(--border);border-radius:8px; padding:44px 32px 28px;text-align:center; transition:border-color .3s,box-shadow .3s; } .tof-card.correct{border-color:#3ddc84;box-shadow:0 0 0 2px rgba(61,220,132,.25)} .tof-card.wrong{border-color:#ff1744;box-shadow:0 0 0 2px rgba(255,23,68,.25)} .tof-quote-mark{ position:absolute;top:6px;left:18px; font-family:var(--serif);font-size:90px;line-height:1;color:var(--crimson);opacity:.18;pointer-events:none; } .tof-text{ font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.1vw,24px); line-height:1.55;color:var(--text-bright);min-height:90px; display:flex;align-items:center;justify-content:center;margin-bottom:26px; } .tof-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .tof-btn{ flex:1;min-width:160px;max-width:240px; padding:14px 18px;border-radius:6px;border:2px solid var(--border); background:transparent;color:var(--text);font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:1px; cursor:pointer;transition:.18s;display:flex;align-items:center;justify-content:center;gap:8px; } .tof-btn-fake{border-color:#ff1744;color:#ff1744} .tof-btn-real{border-color:#3ddc84;color:#3ddc84} .tof-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.4)} .tof-btn-fake:hover:not(:disabled){background:#ff1744;color:#fff} .tof-btn-real:hover:not(:disabled){background:#3ddc84;color:#fff} .tof-btn:active:not(:disabled){transform:scale(.97)} .tof-btn:disabled{opacity:.4;cursor:not-allowed} .tof-btn.picked-fake{background:#ff1744;color:#fff} .tof-btn.picked-real{background:#3ddc84;color:#fff} .tof-reveal{ margin-top:22px;padding:16px 18px;border-radius:6px; background:var(--bg);border-left:3px solid var(--crimson); font-size:14px;line-height:1.6;color:var(--text);text-align:left; animation:tofRevealIn .4s ease; } .tof-reveal b{color:var(--crimson)} .tof-reveal .src{display:block;margin-top:8px;font-family:var(--mono);font-size:11px;color:var(--text-dim)} @keyframes tofRevealIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .tof-next{ margin-top:18px;padding:12px 32px;border:none;border-radius:6px; background:var(--crimson);color:#fff;font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:1px; cursor:pointer;transition:.18s; } .tof-next:hover{background:#ff1744;transform:translateY(-1px)} .tof-next:active{transform:scale(.97)} .tof-result{text-align:center;padding:30px 10px;animation:tofRevealIn .5s ease} .tof-result-score{font-family:var(--serif);font-size:clamp(56px,8vw,84px);font-weight:900;color:var(--crimson);line-height:1} .tof-result-score small{font-size:.35em;color:var(--text-dim);font-weight:600} .tof-result-rank{font-family:var(--mono);font-size:18px;font-weight:700;letter-spacing:2px;color:var(--text-bright);text-transform:uppercase;margin:10px 0 14px} .tof-result-verdict{font-size:15px;line-height:1.6;color:var(--text);max-width:560px;margin:0 auto 18px} .tof-result-stats{font-family:var(--mono);font-size:12px;color:var(--text-dim);margin-bottom:22px;letter-spacing:1px} .tof-card.flip-out{animation:tofFlipOut .25s ease forwards} @keyframes tofFlipOut{to{opacity:0;transform:translateY(-12px) scale(.98)}} /* ========== 梅罗 PK 大战 ========== */ .pk-section{ background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%); border-top:1px solid var(--border); } .pk-arena{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; margin-top:30px; } .pk-vs{ position:absolute; top:50%;left:50%; transform:translate(-50%,-50%); font-family:var(--serif); font-size:clamp(28px,2.8vw,42px); font-weight:900; color:var(--crimson); text-shadow:0 0 18px var(--crimson-glow); z-index:5; letter-spacing:-1px; font-style:italic; pointer-events:none; width:clamp(56px,5vw,76px); height:clamp(56px,5vw,76px); display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--card); border:2px solid var(--crimson); box-shadow:0 0 24px var(--crimson-glow),inset 0 0 12px var(--crimson-glow); } .pk-sides{ display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); min-height:340px; } .pk-side{ padding:40px clamp(48px,5vw,80px); display:flex; flex-direction:column; justify-content:center; position:relative; transition:background .4s; } .pk-side.cr7{ background:linear-gradient(135deg,rgba(220,20,60,.08),transparent); border-right:1px dashed var(--border); text-align:right; } .pk-side.messi{ background:linear-gradient(225deg,rgba(120,170,255,.08),transparent); text-align:left; } .pk-side.loser{ background:linear-gradient(135deg,var(--crimson-glow),transparent 70%)!important; } .pk-side.loser .pk-val{color:var(--crimson)} .pk-side.loser::after{ content:"⚠ 黑点更高"; position:absolute; top:14px; font-family:var(--mono); font-size:10px; letter-spacing:1.5px; color:#fff; background:var(--crimson); padding:3px 8px; border-radius:3px; box-shadow:0 0 12px var(--crimson-glow); } .pk-side.cr7.loser::after{right:14px} .pk-side.messi.loser::after{left:14px} .pk-name{ font-family:var(--serif); font-size:clamp(22px,3vw,32px); font-weight:900; color:var(--text-bright); margin-bottom:4px; } .pk-subname{ font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:1px; margin-bottom:18px; } .pk-val{ font-family:var(--serif); font-size:clamp(40px,6vw,60px); font-weight:900; line-height:1; margin-bottom:10px; font-variant-numeric:tabular-nums; /* 翻牌时数字等宽，避免位数跳动 */ } .pk-side.cr7 .pk-val{color:var(--crimson)} .pk-side.messi .pk-val{color:#7aa8ff} /* 翻牌弹性：切换维度时由 JS 短暂加 .counting 触发 */ @keyframes pkValPop{0%{transform:scale(1)}40%{transform:scale(1.12)}100%{transform:scale(1)}} .pk-val.counting{animation:pkValPop .5s cubic-bezier(.2,.8,.2,1)} .pk-note{ font-size:13px; color:var(--text-dim); line-height:1.5; max-width:280px; } .pk-side.cr7 .pk-note{margin-left:auto} /* 维度切换 */ .pk-tabs{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:18px 20px; border-top:1px solid var(--border); background:var(--bg-2); } .pk-tab{ font-family:var(--mono); font-size:12px; padding:8px 16px; background:var(--card); border:1px solid var(--border); border-radius:18px; color:var(--text-dim); cursor:pointer; transition:all .2s; } .pk-tab:hover{border-color:var(--crimson);color:var(--text-bright)} .pk-tab.active{ background:var(--crimson); border-color:var(--crimson); color:#fff; } .pk-tip{ text-align:center; font-family:var(--mono); font-size:12px; color:var(--text-dim); padding:0 20px 20px; letter-spacing:.5px; } .pk-tip strong{color:var(--crimson)} /* ========== 点球含金量检测仪 ========== */ .scanner-section{border-top:1px solid var(--border)} .scanner{ position:relative; background:radial-gradient(ellipse at 50% 0%,var(--crimson-glow),transparent 70%),var(--card); border:1px solid var(--border); border-radius:10px; padding:40px 28px; margin-top:30px; overflow:hidden; } /* 扫描线动画 */ .scanner::before{ content:""; position:absolute; top:0;left:0;right:0; height:2px; background:linear-gradient(90deg,transparent,var(--crimson),transparent); box-shadow:0 0 20px var(--crimson); animation:scanLine 3s ease-in-out infinite; opacity:0; } .scanner.scanning::before{opacity:1} @keyframes scanLine{ 0%{top:0} 50%{top:100%} 100%{top:0} } .scanner-status{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:12px; color:var(--crimson); margin-bottom:24px; letter-spacing:1px; } .scanner-status .blink{ width:8px;height:8px; border-radius:50%; background:var(--crimson); animation:blink 1s infinite; } @keyframes blink{50%{opacity:.2}} .scanner-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; margin-bottom:32px; } .scan-item{ background:var(--bg-2); border:1px solid var(--border); border-radius:6px; padding:18px 16px; position:relative; transition:all .3s; } .scan-item.detected{ border-color:var(--crimson); box-shadow:0 0 16px var(--crimson-glow); } .scan-label{ font-family:var(--mono); font-size:10px; color:var(--text-dim); letter-spacing:1px; text-transform:uppercase; margin-bottom:8px; } .scan-value{ font-family:var(--serif); font-size:28px; font-weight:900; color:var(--text-bright); margin-bottom:4px; line-height:1.1; } .scan-value .unit{font-size:14px;color:var(--text-dim);font-weight:400} .scan-note{font-size:11px;color:var(--text-dim);line-height:1.4} /* 仪表盘 */ .gauge-wrap{ display:flex; flex-direction:column; align-items:center; margin-top:8px; padding-top:28px; border-top:1px solid var(--border); } .gauge{ position:relative; width:200px;height:100px; overflow:hidden; } .gauge svg{width:100%;height:100%;display:block} .gauge-bg{stroke:var(--border);fill:none;stroke-width:14} .gauge-fill{ stroke:var(--crimson);fill:none;stroke-width:14;stroke-linecap:round; stroke-dasharray:314; stroke-dashoffset:314; transition:stroke-dashoffset 1.8s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 0 6px var(--crimson-glow)); } .gauge-num{ position:absolute; bottom:0;left:50%; transform:translateX(-50%); text-align:center; } .gauge-num .n{ font-family:var(--serif); font-size:40px; font-weight:900; color:var(--crimson); line-height:1; } .gauge-num .l{ font-family:var(--mono); font-size:10px; color:var(--text-dim); letter-spacing:1.5px; } .gauge-verdict{ font-family:var(--mono); font-size:14px; color:var(--crimson); margin-top:14px; letter-spacing:1px; text-align:center; } /* ========== C罗表情生成器 ========== */ .meme-section{ background:var(--bg-2); border-top:1px solid var(--border); } .meme-studio{ display:grid; grid-template-columns:1.2fr 1fr; gap:28px; margin-top:30px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:24px; } .meme-canvas-wrap{ position:relative; background:#000; border-radius:6px; overflow:hidden; aspect-ratio:1/1; } .meme-canvas-wrap canvas{ width:100%;height:100%; display:block; } .meme-download{ position:absolute; bottom:10px;right:10px; font-family:var(--mono); font-size:11px; padding:7px 14px; background:var(--crimson); color:#fff; border:none; border-radius:4px; cursor:pointer; z-index:3; letter-spacing:.5px; } .meme-download:hover{background:var(--crimson-dim)} .meme-controls{display:flex;flex-direction:column;gap:14px} .meme-field label{ display:block; font-family:var(--mono); font-size:10px; color:var(--text-dim); letter-spacing:1px; margin-bottom:5px; text-transform:uppercase; } .meme-field input{ width:100%; background:var(--bg-2); border:1px solid var(--border); color:var(--text-bright); padding:9px 12px; border-radius:4px; font-size:13px; font-family:var(--sans); outline:none; } .meme-field input:focus{border-color:var(--crimson)} .meme-thumbs{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; max-height:180px; overflow-y:auto; padding:4px; background:var(--bg); border-radius:4px; border:1px solid var(--border); } .meme-thumb{ aspect-ratio:1/1; background-size:cover; background-position:center; border-radius:4px; cursor:pointer; border:2px solid transparent; transition:border-color .2s; filter:grayscale(.4); } .meme-thumb:hover{filter:grayscale(0)} .meme-thumb.active{border-color:var(--crimson);filter:grayscale(0)} .meme-presets-list{ display:flex; flex-wrap:wrap; gap:6px; } .meme-preset{ font-size:11px; padding:5px 10px; background:var(--bg-2); border:1px solid var(--border); border-radius:12px; color:var(--text-dim); cursor:pointer; transition:all .2s; line-height:1.3; } .meme-preset:hover{border-color:var(--crimson);color:var(--text-bright)} /* ========== 罪恶账本烧钱榜 ========== */ .ledger-section{border-top:1px solid var(--border)} .ledger{ max-width:560px; margin:30px auto 0; background:#15120a; border:1px dashed rgba(232,185,35,.4); border-radius:6px; padding:24px 22px; font-family:var(--mono); position:relative; box-shadow:0 8px 30px rgba(0,0,0,.4); } [data-theme="galactico"] .ledger{background:#100c1c;border-color:rgba(142,107,214,.4)} .ledger-head{ display:flex; justify-content:space-between; align-items:center; border-bottom:1px dashed rgba(255,255,255,.15); padding-bottom:14px; margin-bottom:14px; } .ledger-title{ font-family:var(--serif); font-size:18px; color:#e8b923; font-weight:900; } .ledger-no{font-size:10px;color:var(--text-dim);letter-spacing:1px} .ledger-row{ display:flex; justify-content:space-between; align-items:flex-start; padding:12px 0; border-bottom:1px dashed rgba(255,255,255,.08); opacity:0; transform:translateX(-12px); transition:all .5s; } .ledger-row.show{opacity:1;transform:translateX(0)} .ledger-row .ld-desc{flex:1;font-size:12px;color:var(--text);line-height:1.4} .ledger-row .ld-desc small{display:block;color:var(--text-dim);font-size:10px;margin-top:2px} .ledger-row .ld-amount{ font-size:18px; font-weight:bold; color:#e8b923; white-space:nowrap; margin-left:12px; } .ledger-row .ld-amount .cur{font-size:11px;color:var(--text-dim)} .ledger-cat{ display:inline-block; font-size:9px; background:rgba(220,20,60,.15); color:var(--crimson); padding:1px 6px; border-radius:2px; margin-right:6px; letter-spacing:.5px; } .ledger-foot{ margin-top:16px; padding-top:14px; border-top:2px solid rgba(255,255,255,.15); text-align:right; } .ledger-total{ font-size:12px; color:var(--text-dim); letter-spacing:1px; margin-bottom:4px; } .ledger-total .n{color:#e8b923;font-size:15px;font-weight:bold} /* ========== 创新模块响应式 ========== */ @media(max-width:900px){ .innov-section{padding:40px 18px} .meme-studio{grid-template-columns:1fr} .theme-switcher{gap:5px} .theme-btn{font-size:10px;padding:5px 9px} } @media(max-width:600px){ .pk-sides{grid-template-columns:1fr;min-height:auto} .pk-side{padding:28px 20px} .pk-side.cr7{border-right:none;border-bottom:none;text-align:center;position:relative} .pk-side.cr7::before{ /* 移动端用伪元素在 C罗/梅西之间插入 VS 分隔，避免 absolute VS 重叠 */ content:"VS"; position:absolute; bottom:-26px;left:50%; transform:translateX(-50%); font-family:var(--serif); font-size:36px; font-weight:900; color:var(--crimson); font-style:italic; letter-spacing:-1px; text-shadow:0 0 18px var(--crimson-glow); z-index:5; background:var(--card); padding:0 14px; line-height:1; } .pk-side.cr7{ border-bottom:1px dashed var(--border); padding-bottom:42px; } .pk-side.messi{text-align:center;padding-top:42px} /* 隐藏原 absolute 定位的 VS（移动端用上面的伪元素代替） */ .pk-vs{display:none} .scanner-grid{grid-template-columns:1fr 1fr} .scan-value{font-size:22px} .meme-thumbs{grid-template-columns:repeat(5,1fr)} .gauge{width:160px;height:80px} .gauge-num .n{font-size:32px} } @media(max-width:380px){ .scanner-grid{grid-template-columns:1fr} .theme-btn{padding:4px 7px;font-size:9px} } /* ========== 新增：简约微交互（保留原有视觉，仅新增交互细节）========== */ /* 导航链接：下划线由中间向两侧展开（position:relative 已在 line 172 声明，不再重复）*/ .nav-links a::after{ content:"";position:absolute;left:50%;bottom:-5px; width:0;height:2px;background:var(--crimson); transition:width .25s ease,left .25s ease; } .nav-links a:hover::after,.nav-links a:focus::after{width:100%;left:0} /* 按下反馈：可点击元素 active 时轻微缩放 */ .btn:active,.filter-chip:active,.theme-btn:active,.quote-btn:active, .meme-thumb:active,.meme-preset:active,.nav-logo:active,.event-card:active, .back-to-top:active,.modal-close:active,.modal-nav:active{ transform:scale(.96); } /* primary 按钮：active 时保留 hover 的 translateY(-2px)，叠加缩放，避免按下跳位 */ .btn-primary:active{transform:translateY(-2px) scale(.96)} /* 模态框打开：scale + 淡入动画（仅 .show 触发，不破坏默认隐藏）*/ @keyframes modalPopIn{from{transform:scale(.94);opacity:0}to{transform:scale(1);opacity:1}} .modal-overlay.show .modal{animation:modalPopIn .28s cubic-bezier(.2,.7,.3,1)} /* 时间线条目 hover：高亮（不重写 transition/transform，避免覆盖 line 756 的 all .6s 入场动画与主题切换过渡）*/ .tl-item:hover{border-left-color:var(--crimson);background:var(--card-hover)} /* 数据条形图 hover：行高亮 + 条形提亮 */ .bar-row{transition:background-color .2s ease,border-radius .2s ease} .bar-row:hover{background:var(--card-hover);border-radius:6px} .bar-row:hover .bar-fill{filter:brightness(1.15)} /* 绰号卡片图片 hover 微缩放（原有仅 grayscale 变化，新增 scale）*/ .nick-card-img img{transition:transform .4s ease,filter .4s ease} .nick-card:hover .nick-card-img img{transform:scale(1.05)} /* 引用墙按钮 hover */ .quote-btn{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease} .quote-btn:hover{transform:scale(1.1);background:var(--crimson);color:#fff} /* 烧钱榜行 hover：高亮（不重写原有 transition，避免破坏 .show 动画）*/ .ledger-row:hover{background:var(--card-hover)} /* footer logo hover 变色 */ .footer-logo{transition:color .25s ease} .footer-logo:hover{color:var(--crimson)} /* 主题切换按钮 hover 微浮（不重写 transition，沿用原 line 1317 的 all .25s，已涵盖 transform）*/ .theme-btn:hover{transform:translateY(-1px)} /* ========== 卡片「头条/新增」角标 ========== */ .card-pinned{ position:relative; outline:2px solid var(--crimson); outline-offset:-2px; } .card-badge-breaking{ position:absolute;top:10px;left:10px;z-index:3; font-family:var(--mono);font-size:11px;font-weight:700; color:#fff;background:var(--crimson); padding:3px 9px;border-radius:3px;letter-spacing:1px; box-shadow:0 2px 8px rgba(220,20,60,.5); animation:badgeBlink 1.4s ease-in-out infinite; } .card-badge-new{ position:absolute;top:10px;left:10px;z-index:3; font-family:var(--mono);font-size:10px;font-weight:700; color:var(--crimson);background:#fff; padding:2px 7px;border-radius:3px;letter-spacing:1px; } @keyframes badgeBlink{ 0%,100%{opacity:1} 50%{opacity:.65} } /* ========== 🚨 BREAKING 头条横幅 ========== */ .breaking-bar{ background:linear-gradient(90deg,var(--crimson-dim),var(--crimson),var(--crimson-dim)); border-bottom:1px solid rgba(0,0,0,.4); overflow:hidden; position:relative; z-index:40; box-shadow:0 2px 12px rgba(0,0,0,.4); } .breaking-bar::before{ content:"";position:absolute;inset:0; background:repeating-linear-gradient(45deg,transparent,transparent 18px,rgba(0,0,0,.08) 18px,rgba(0,0,0,.08) 36px); pointer-events:none; } .breaking-inner{ display:flex;align-items:center;gap:16px; padding:10px 16px;max-width:100%; position:relative; } .breaking-tag{ flex-shrink:0; font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:2px; color:#fff;background:rgba(0,0,0,.4); padding:4px 10px;border-radius:3px; animation:breakingBlink 1.2s ease-in-out infinite; } @keyframes breakingBlink{ 0%,100%{opacity:1} 50%{opacity:.55} } .breaking-ticker{ flex:1;overflow:hidden;white-space:nowrap; display:flex;align-items:center;gap:24px; font-family:var(--mono);font-size:13px;color:#fff; min-width:0; /* 全尺寸跑马灯：内容在 HTML 里复制一份， translateX(-50%) 正好滚到第二份起点，无缝循环。 时长按内容宽度自适应，避免宽屏滚太快 / 窄屏太慢。*/ animation:breakingScroll var(--breaking-dur,30s) linear infinite; } .breaking-ticker .breaking-item{flex-shrink:0} .breaking-ticker .breaking-sep{color:rgba(255,255,255,.5);flex-shrink:0} .breaking-bar:hover .breaking-ticker{animation-play-state:paused} @keyframes breakingScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* 窄屏：隐藏 CTA，跑马灯时长稍长一点（内容相对更窄，节奏更舒缓） */ @media(max-width:768px){ .breaking-cta{display:none} .breaking-ticker{animation-duration:var(--breaking-dur,40s)} } .breaking-cta{ flex-shrink:0; font-family:var(--mono);font-size:12px;font-weight:700; color:var(--crimson);background:#fff; border:none;padding:6px 14px;border-radius:3px;cursor:pointer; transition:transform .2s,box-shadow .2s; } .breaking-cta:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.3)} /* ========== 无障碍：尊重「减少动效」系统偏好 ========== 关闭所有装饰性循环动画（ticker/scan/hero 呼吸漂移等）， 保留必要的 hover/active 反馈与一次性入场过渡。*/ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } } /* ========== 黑料盲盒 / 今日通缉令 ========== */ .blindbox-section{border-top:1px solid var(--border)} .blindbox{ position:relative; display:flex;flex-direction:column;align-items:center;gap:24px; margin-top:30px; } .blindbox-poster{ position:relative; width:min(440px,92vw); background:var(--card); border:1px solid var(--border); border-radius:6px; padding:32px 28px 28px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5); transition:transform .4s cubic-bezier(.2,.8,.2,1); } .blindbox-poster.flip{ animation:bbFlip .5s ease; } @keyframes bbFlip{ 0%{transform:rotateY(0)} 50%{transform:rotateY(90deg) scale(.95)} 100%{transform:rotateY(0)} } .blindbox-stamp{ position:absolute;top:14px;right:14px; font-family:var(--mono);font-size:10px;letter-spacing:2px; color:var(--crimson);border:1px solid var(--crimson); padding:3px 8px;border-radius:3px;opacity:.7; } .blindbox-no{ font-family:var(--mono);font-size:13px;color:var(--crimson); letter-spacing:2px;margin-bottom:6px; } .blindbox-cat{ display:inline-block;font-family:var(--mono);font-size:11px; color:var(--text-dim);letter-spacing:1px;text-transform:uppercase; border-bottom:1px solid var(--border);padding-bottom:8px;margin-bottom:14px; } .blindbox-title{ font-family:var(--serif);font-size:clamp(22px,4.5vw,30px);font-weight:900; color:var(--text-bright);line-height:1.15;margin-bottom:12px; } .blindbox-date,.blindbox-loc{ font-family:var(--mono);font-size:12px;color:var(--text-dim); margin-bottom:4px; } .blindbox-sev{ margin:14px 0;display:flex;align-items:center;gap:8px; font-family:var(--mono);font-size:11px;color:var(--text-dim); } .blindbox-sev .sev-bars{display:inline-flex;gap:3px} .blindbox-sev .sev-bar{width:14px;height:8px;background:var(--border);border-radius:1px} .blindbox-sev .sev-bar.on{background:var(--crimson)} .blindbox-summary{ font-size:14px;line-height:1.7;color:var(--text); border-top:1px dashed var(--border);padding-top:14px; } .blindbox-watermark{ position:absolute;bottom:-30px;right:-10px; font-family:var(--serif);font-size:140px;font-weight:900; color:var(--crimson);opacity:.04;letter-spacing:-6px;pointer-events:none; } .blindbox-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} /* ========== 争议世界地图 ========== */ .map-section{border-top:1px solid var(--border)} .worldmap{position:relative;margin-top:30px} .worldmap-svg{width:100%;height:auto;display:block} .worldmap-land path{transition:fill .3s} .worldmap-pinned{cursor:pointer} /* 散开点的引线（连回真实地理坐标）+ 真实位置小种子点 */ .worldmap-pinned line.worldmap-lead{ stroke:rgba(220,20,60,.45); stroke-width:1; stroke-dasharray:2 2; pointer-events:none; } .worldmap-pinned circle.worldmap-seed{ fill:rgba(220,20,60,.55); pointer-events:none; } .worldmap-pinned circle.dot{ filter:drop-shadow(0 0 4px currentColor); /* 关键：fill-box 让 transform-origin:center 指向圆心自身， 否则默认 view-box 会让缩放以整个 SVG 画布中心为原点， 导致脉冲时点向画布中心「飘动」，悬停放大时点跳离光标→反复触发 hover→闪动。*/ transform-box:fill-box; transform-origin:center; animation:mapPulse 2.4s ease-in-out infinite; } .worldmap-pinned:hover circle.dot{animation:none;transform:scale(1.4)} @keyframes mapPulse{ 0%,100%{transform:scale(1);opacity:.9} 50%{transform:scale(1.25);opacity:1} } .worldmap-pinned circle.halo{ opacity:0;transform-box:fill-box;transform-origin:center; } .worldmap-pinned:hover circle.halo{ opacity:.25;animation:mapHalo 1s ease-out; } @keyframes mapHalo{ from{transform:scale(1);opacity:.5} to{transform:scale(3);opacity:0} } .worldmap-tooltip{ position:absolute;pointer-events:none; background:var(--bg-2);border:1px solid var(--crimson); border-radius:4px;padding:8px 12px;max-width:240px; font-size:12px;color:var(--text); box-shadow:0 8px 24px rgba(0,0,0,.6); z-index:20;transform:translate(-50%,-115%); } .worldmap-tooltip b{color:var(--text-bright);display:block;margin-bottom:3px;font-family:var(--serif)} .worldmap-tooltip small{color:var(--text-dim);font-family:var(--mono);font-size:10px} .worldmap-legend{ display:flex;gap:18px;justify-content:center;flex-wrap:wrap; margin-top:18px;font-family:var(--mono);font-size:11px;color:var(--text-dim); } .worldmap-legend .dot{ display:inline-block;width:10px;height:10px;border-radius:50%; margin-right:5px;vertical-align:middle; } .worldmap-legend .sev5{background:#ff1744} .worldmap-legend .sev4{background:#dc143c} .worldmap-legend .sev3{background:#e8b923} .worldmap-legend .sev2{background:#7a7a82} /* ========== #8 世界地图 2.0：控制条 / 时间轴 / 轨迹 / 热度 ========== */ .worldmap-controls{ display:flex;align-items:center;gap:18px;flex-wrap:wrap; padding:12px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;margin-bottom:14px; } .wm-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-family:var(--mono);font-size:12px;color:var(--text);user-select:none} .wm-toggle input{accent-color:var(--crimson);width:14px;height:14px;cursor:pointer} .wm-readout{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:.5px} /* 生涯轨迹线 */ .worldmap-trail .wm-trail-path{ fill:none;stroke:rgba(220,20,60,.55);stroke-width:2;stroke-dasharray:5 4; animation:wmTrailDash 20s linear infinite; } @keyframes wmTrailDash{to{stroke-dashoffset:-200}} .worldmap-trail .wm-club{fill:rgba(232,185,35,.85);stroke:#131316;stroke-width:1.5} .worldmap-trail .wm-club-label{ font-family:var(--mono);font-size:9px;fill:var(--text-dim); text-anchor:middle;pointer-events:none; } /* 热度图层 */ .worldmap-heat circle{fill:var(--crimson);opacity:.12;mix-blend-mode:screen} /* 双 range 时间轴 */ .wm-timeline{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px 14px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px} .wm-play{ flex-shrink:0;width:32px;height:32px;border-radius:50%;border:none; background:var(--crimson);color:#fff;font-size:12px;cursor:pointer;transition:.18s; display:flex;align-items:center;justify-content:center; } .wm-play:hover{background:#ff1744} .wm-play.playing{background:#3ddc84} .wm-tl-track{flex:1;position:relative;height:36px} .wm-tl-range{position:relative;height:36px} .wm-tl-range input[type=range]{ position:absolute;left:0;right:0;width:100%;margin:0; pointer-events:none;-webkit-appearance:none;appearance:none;background:transparent;height:36px; } .wm-tl-range input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;pointer-events:auto; width:18px;height:18px;border-radius:50%;background:var(--crimson);border:2px solid #fff; cursor:pointer;margin-top:-7px;box-shadow:0 2px 6px rgba(0,0,0,.5); } .wm-tl-range input[type=range]::-moz-range-thumb{ pointer-events:auto;width:18px;height:18px;border-radius:50%;background:var(--crimson);border:2px solid #fff;cursor:pointer; } .wm-tl-range input[type=range]::-webkit-slider-runnable-track{height:4px;background:transparent} .wm-tl-range input[type=range]:nth-of-type(2)::-webkit-slider-thumb{background:#e8b923} .wm-tl-range input[type=range]:nth-of-type(2)::-moz-range-thumb{background:#e8b923} /* 中间选中区高亮 */ .wm-tl-track::before{ content:"";position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%); background:var(--bg);border-radius:2px; } .wm-tl-range{position:relative;z-index:1} .wm-tl-ticks{position:absolute;left:0;right:0;top:50%;height:4px;transform:translateY(-50%);display:flex;justify-content:space-between;pointer-events:none} .wm-tl-ticks span{width:2px;height:8px;background:var(--border);align-self:center} .wm-tl-labels{flex-shrink:0;display:flex;gap:4px;font-family:var(--mono);font-size:10px;color:var(--text-dim)} .wm-tl-labels span{min-width:32px;text-align:center} .wm-legend-sep{color:var(--border);margin:0 4px} .wm-dot-trail{background:#e8b923} /* ========== #10 罗黑弹幕墙 + 段子工厂 ========== */ .wall-section{border-top:1px solid var(--border)} .wall{padding:28px 24px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px;display:flex;flex-direction:column;gap:24px} [data-theme="galactico"] .wall{background:#100c1c;border-color:rgba(142,107,214,.4)} /* 弹幕发射器 */ .wall-input-bar{display:flex;gap:10px;flex-wrap:wrap} .wall-input-bar input[type=text]{flex:1;min-width:200px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--mono);font-size:13px;padding:10px 14px} .wall-input-bar select{background:var(--bg);border:1px solid var(--border);color:var(--text);border-radius:4px;padding:0 8px;font-family:var(--mono);font-size:12px} .danmu-send{padding:10px 18px;border:none;border-radius:4px;background:var(--crimson);color:#fff;font-family:var(--mono);font-weight:700;font-size:13px;cursor:pointer;transition:.18s} .danmu-send:hover{background:#ff1744;transform:translateY(-1px)} /* 弹幕舞台 */ .danmu-stage{position:relative;height:260px;background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden} .danmu-stage::before{content:"CA7 黑历史墙";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--serif);font-size:42px;font-weight:900;color:var(--crimson);opacity:.06;pointer-events:none;white-space:nowrap} .danmu-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--mono);font-size:12px;color:var(--text-dim);text-align:center} .danmu-item{position:absolute;white-space:nowrap;font-family:var(--mono);font-size:14px;font-weight:600;animation:danmuFly linear forwards;text-shadow:0 1px 2px rgba(0,0,0,.8);will-change:transform} @keyframes danmuFly{from{transform:translateX(100%)}to{transform:translateX(-100vw)}} /* 段子工厂 */ .punchline{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:18px} .punchline-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .punchline-title{font-family:var(--mono);font-size:11px;color:var(--text-dim);letter-spacing:1px} .punchline-shuffle{background:transparent;border:1px solid var(--border);color:var(--text-dim);font-family:var(--mono);font-size:11px;padding:5px 10px;border-radius:4px;cursor:pointer;transition:.15s} .punchline-shuffle:hover{border-color:var(--crimson);color:var(--crimson)} .punchline-prompt{font-family:var(--serif);font-size:clamp(18px,2.2vw,24px);font-weight:900;color:var(--text-bright);line-height:1.4;margin-bottom:14px;min-height:34px} .punchline-prompt .blank{color:var(--crimson);border-bottom:2px dashed var(--crimson);padding:0 6px} .punchline-input-row{display:flex;gap:10px;margin-bottom:16px} .punchline-input-row input{flex:1;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--mono);font-size:13px;padding:10px 14px} .punchline-submit{padding:10px 22px;border:none;border-radius:4px;background:#e8b923;color:#131316;font-family:var(--mono);font-weight:700;font-size:13px;cursor:pointer;transition:.18s} .punchline-submit:hover{background:#f1c40f;transform:translateY(-1px)} .punchline-list{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto} .punchline-item{display:flex;align-items:flex-start;gap:10px;padding:8px 10px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-size:13px;line-height:1.5;animation:danmuFly .001s} /* 占位，避免 lint */ .punchline-item .pl-prompt{color:var(--text-dim);font-family:var(--mono);font-size:12px} .punchline-item .pl-fill{color:var(--crimson);font-weight:700} .punchline-item .pl-like{margin-left:auto;flex-shrink:0;background:transparent;border:1px solid var(--border);color:var(--text-dim);font-family:var(--mono);font-size:11px;padding:3px 8px;border-radius:3px;cursor:pointer;transition:.15s;white-space:nowrap} .punchline-item .pl-like:hover{border-color:var(--crimson);color:var(--crimson)} .punchline-item .pl-like.liked{background:rgba(220,20,60,.15);color:var(--crimson);border-color:var(--crimson)} .punchline-empty{font-family:var(--mono);font-size:12px;color:var(--text-dim);text-align:center;padding:14px;opacity:.6} /* 工具栏 */ .wall-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--border)} .wall-tool-btn{background:transparent;border:1px solid var(--border);color:var(--text-dim);font-family:var(--mono);font-size:11px;padding:6px 12px;border-radius:4px;cursor:pointer;transition:.15s} .wall-tool-btn:hover{border-color:var(--crimson);color:var(--crimson)} .wall-note{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--text-dim);opacity:.7} /* ========== #9 罗黑赌场 ========== */ .casino-section{border-top:1px solid var(--border)} .casino{padding:28px 24px;background:var(--bg-2);border:1px solid var(--border);border-radius:6px} [data-theme="galactico"] .casino{background:#100c1c;border-color:rgba(142,107,214,.4)} .casino-wallet{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:18px} .casino-balance{font-family:var(--mono);font-size:18px;color:#e8b923;font-weight:700} .casino-balance small{font-size:12px;color:var(--text-dim);font-weight:400} .casino-record{font-family:var(--mono);font-size:12px;color:var(--text-dim)} .casino-record span{color:var(--text)} .casino-reset{margin-left:auto;background:transparent;border:1px solid var(--border);color:var(--text-dim);font-family:var(--mono);font-size:11px;padding:6px 12px;border-radius:4px;cursor:pointer;transition:.18s} .casino-reset:hover{border-color:var(--crimson);color:var(--crimson)} .casino-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px} .casino-card{background:var(--card);border:1px solid var(--border);border-radius:6px;padding:16px;display:flex;flex-direction:column;gap:10px;transition:border-color .2s} .casino-card:hover{border-color:var(--crimson)} .casino-q{font-size:14px;line-height:1.5;color:var(--text-bright);font-weight:600;min-height:42px} .casino-odds-row{display:flex;gap:8px} .casino-pick{ flex:1;padding:10px 8px;border:1px solid var(--border);border-radius:4px;background:transparent; color:var(--text);font-family:var(--mono);font-size:12px;cursor:pointer;transition:.18s;text-align:center; } .casino-pick:hover:not(:disabled){border-color:var(--crimson);color:var(--crimson);transform:translateY(-1px)} .casino-pick small{display:block;font-size:10px;color:#e8b923;margin-top:2px} .casino-pick.selected{background:var(--crimson);color:#fff;border-color:var(--crimson)} .casino-pick.selected small{color:#ffe082} .casino-pick:disabled{opacity:.5;cursor:not-allowed} .casino-bet-row{display:flex;align-items:center;gap:8px} .casino-stake{flex:1;display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--text-dim)} .casino-stake input{width:70px;background:var(--bg);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:var(--mono);font-size:13px;padding:6px 8px} .casino-stake .chip{font-family:var(--mono);font-size:11px;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);padding:4px 8px;border-radius:3px;cursor:pointer;transition:.15s} .casino-stake .chip:hover{border-color:#e8b923;color:#e8b923} .casino-place{padding:8px 14px;border:none;border-radius:4px;background:#e8b923;color:#131316;font-family:var(--mono);font-weight:700;font-size:12px;cursor:pointer;transition:.18s} .casino-place:hover:not(:disabled){background:#f1c40f;transform:translateY(-1px)} .casino-place:disabled{opacity:.4;cursor:not-allowed} .casino-place.disabled{opacity:.4;cursor:not-allowed} .casino-place.disabled:hover{background:#e8b923;transform:none} .casino-card.resolved .casino-q::after{content:"✓ 已开奖";display:inline-block;margin-left:8px;font-size:10px;color:#3ddc84;font-weight:400} .casino-result{font-size:12px;line-height:1.5;padding:8px 10px;border-radius:4px;margin-top:auto} .casino-result.win{background:rgba(61,220,132,.12);color:#3ddc84;border-left:3px solid #3ddc84} .casino-result.lose{background:rgba(255,23,68,.12);color:#ff1744;border-left:3px solid #ff1744} .casino-result small{display:block;color:var(--text-dim);margin-top:4px;font-size:11px;line-height:1.4} .casino-history{margin-top:20px;border-top:1px solid var(--border);padding-top:14px;max-height:180px;overflow-y:auto} .casino-history-title{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-bottom:8px;letter-spacing:1px} .casino-history-empty{font-family:var(--mono);font-size:11px;color:var(--text-dim);opacity:.6} .casino-history-row{font-family:var(--mono);font-size:11px;padding:4px 0;border-bottom:1px dashed var(--border);display:flex;justify-content:space-between;gap:8px} .casino-history-row .win{color:#3ddc84} .casino-history-row .lose{color:#ff1744} /* ========== 人设崩塌编年史 ========== */ .persona-section{border-top:1px solid var(--border)} .persona-scroll{ position:relative;margin-top:30px;padding-left:40px; } .persona-scroll::before{ content:"";position:absolute;left:14px;top:0;bottom:0;width:2px; background:linear-gradient(var(--crimson),transparent); } .persona-item{ position:relative;margin-bottom:36px;opacity:0;transform:translateX(20px); transition:opacity .6s,transform .6s; } .persona-item.in{opacity:1;transform:none} .persona-item::before{ content:"";position:absolute;left:-33px;top:6px; width:14px;height:14px;border-radius:50%; background:var(--crimson);border:3px solid var(--bg); box-shadow:0 0 0 1px var(--crimson); } .persona-year{ font-family:var(--mono);font-size:12px;color:var(--crimson); letter-spacing:1px;margin-bottom:4px; } .persona-card{ background:var(--card);border:1px solid var(--border);border-radius:6px; padding:16px 18px;transition:border-color .25s,transform .25s;cursor:pointer; } .persona-card:hover{border-color:var(--crimson);transform:translateX(4px)} .persona-card h4{ font-family:var(--serif);font-size:18px;font-weight:900; color:var(--text-bright);margin-bottom:6px; } .persona-card p{font-size:13px;line-height:1.65;color:var(--text-dim)} .persona-card .persona-tag{ display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10px; color:var(--crimson);border:1px solid var(--crimson);padding:1px 6px;border-radius:2px; opacity:.8; } /* ========== 成就徽章 ========== */ .badges-section{border-top:1px solid var(--border)} .badges-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:16px;margin-top:30px; } .badge{ background:var(--card);border:1px solid var(--border);border-radius:8px; padding:18px 12px;text-align:center; transition:transform .25s,border-color .25s,opacity .4s; opacity:.35;filter:grayscale(1); } .badge.unlocked{opacity:1;filter:none;border-color:var(--crimson)} .badge.unlocked:hover{transform:translateY(-4px) scale(1.03)} .badge-icon{ font-size:34px;margin-bottom:8px;line-height:1; filter:drop-shadow(0 2px 6px var(--crimson-glow)); } /* 文字型徽章图标（如 OTTOMAN）不是 emoji，需缩小避免撑爆卡片 */ .badge[data-id="ottoman"] .badge-icon{ font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:1px; filter:none; } .badge.unlocked .badge-icon{animation:badgePop .5s ease} @keyframes badgePop{ 0%{transform:scale(0)} 60%{transform:scale(1.3)} 100%{transform:scale(1)} } .badge-name{ font-family:var(--serif);font-size:13px;font-weight:900; color:var(--text-bright);margin-bottom:3px; } .badge-desc{font-size:10px;color:var(--text-dim);line-height:1.4;font-family:var(--mono)} .badges-progress{ margin-top:28px;display:flex;align-items:center;gap:14px; font-family:var(--mono);font-size:12px;color:var(--text-dim); } .badges-bar{flex:1;height:6px;background:var(--card);border-radius:3px;overflow:hidden} .badges-fill{height:100%;width:0;background:linear-gradient(90deg,var(--crimson-dim),var(--crimson));transition:width .6s ease} /* ========== 悬浮：SIU 音效按钮 ========== */ .siu-fab{ position:fixed;right:20px;bottom:80px;z-index:60; width:64px;height:64px;padding:0;overflow:visible; background:var(--crimson);border:3px solid #fff;border-radius:50%;cursor:pointer; box-shadow:0 6px 20px var(--crimson-glow),0 2px 8px rgba(0,0,0,.4); transition:transform .2s,box-shadow .2s; } .siu-fab:hover{transform:translateY(-2px) scale(1.08);box-shadow:0 10px 28px var(--crimson-glow)} .siu-fab:active{transform:scale(.95)} .siu-fab.playing{animation:siuFabShake .4s ease} @keyframes siuFabShake{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-8deg) scale(1.1)} 75%{transform:rotate(8deg) scale(1.1)} } /* 丑照头像：铺满圆形按钮 */ .siu-fab-img{ width:100%;height:100%;object-fit:cover;border-radius:50%;display:block; } .siu-fab-glyph{font-size:16px} /* ========== 徽章解锁 Toast ========== */ .badge-toast{ position:fixed;left:50%;top:24px;transform:translateX(-50%) translateY(-120%); z-index:80;display:flex;align-items:center;gap:14px; background:var(--bg-2);border:1px solid var(--crimson);border-radius:8px; padding:14px 20px;min-width:260px; box-shadow:0 12px 40px rgba(0,0,0,.6),0 0 0 1px var(--crimson-glow); transition:transform .5s cubic-bezier(.2,.8,.2,1); } .badge-toast.show{transform:translateX(-50%) translateY(0)} .badge-toast-icon{font-size:30px} .badge-toast-title{font-family:var(--serif);font-weight:900;color:var(--text-bright);font-size:15px} .badge-toast-desc{font-size:11px;color:var(--text-dim);font-family:var(--mono)} @media (max-width:600px){ .siu-fab{right:14px;bottom:70px;width:54px;height:54px;border-width:2px} .badges-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))} } /* ========== 移动端补丁（≤768px）：新板块响应式适配 ========== 新增的 真假鉴别/赌场/地图时间轴/弹幕墙 在小屏需要换行、缩字号、单列。 */ @media (max-width:768px){ /* —— 真假鉴别 —— */ .tof{padding:24px 14px} .tof-card{padding:32px 16px 20px} .tof-text{min-height:70px;font-size:17px} .tof-actions{flex-direction:column} .tof-btn{width:100%;max-width:none} /* —— 罗黑赌场 —— */ .casino{padding:20px 14px} .casino-board{grid-template-columns:1fr} /* 单列，避免 320 卡在 375 屏溢出 */ .casino-bet-row{flex-wrap:wrap} .casino-stake{flex-wrap:wrap;gap:6px} .casino-stake input{flex:1 1 80px} .casino-stake .chip{flex:0 0 auto;padding:4px 6px} .casino-place{width:100%;margin-top:6px} /* —— 世界地图时间轴 —— */ .wm-timeline{flex-wrap:wrap;gap:8px} .wm-tl-track{order:3;flex:1 1 100%} /* 时间轴换到下一行占满 */ .wm-controls{flex-direction:column;align-items:flex-start;gap:8px} .wm-readout{margin-left:0} /* —— 弹幕墙 + 段子工厂 —— */ .wall{padding:20px 14px;gap:18px} .danmu-stage{height:200px} .wall-input-bar input[type=text]{font-size:14px} /* iOS 防 <16px 缩放 */ .punchline-input-row{flex-wrap:wrap} .punchline-input-row input{flex:1 1 100%} .punchline-submit{width:100%;margin-top:8px} .punchline-item{flex-wrap:wrap} .punchline-item .pl-like{margin-left:0;align-self:flex-start} } @media (max-width:380px){ .tof-hud{gap:14px} .casino-q{min-height:auto} .danmu-stage{height:170px} }