/* ============================================================ 枕星妖楼 · 暗夜妖楼设计系统 v3 参考视觉：黑夜天幕 + 血月 + 朱红匾额 + 宣纸卡 + 底部云海 结构决策：页面天幕为深夜黑（星子/血月/墨云/妖楼剪影）， 内容卡片保持宣纸羊皮纸底（参考图中的纸卡浮于夜色之上）， 以兼容全部页面既有的浅底内联配色。 注意： 1) 不要用 background-attachment:fixed —— 安卓 WebView 上 固定背景会渲染成黑色区域（"屏幕莫名变黑"的元凶） 2) 不要给卡片/容器加 backdrop-filter —— 部分安卓内核会把 它渲染成纯黑 3) .layout/.main-col 绝不能加 z-index —— 会创建层叠上下文 把侧栏锁进去，手机端遮罩反压侧栏 ============================================================ */ :root { /* 夜幕 */ --night: #0e0d11; --night-2: #17151b; --night-3: #211d26; /* 宣纸（内容卡） */ --paper: #f1e9d6; --paper-deep: #e3d8bd; --paper-light: #f9f3e2; --bg: var(--night); --bg2: var(--night-2); --panel: rgba(246,238,220,.96); --panel2: #e9deca; --panel-solid: #faf5e9; /* 墨色（宣纸上的文字） */ --ink: #211d26; --ink-3: #322d38; --ink-soft: #4a4450; --ink-faint: #807a70; --txt-h: var(--ink); --txt: #3a3540; --txt-muted: #746e64; --muted: #746e64; --line: rgba(33,29,38,.42); --line-soft: rgba(33,29,38,.16); /* 朱砂血月 */ --seal: #a32b26; --seal-dark: #7c1814; --seal-hi: #cd4a3d; --red: #a32b26; --green: #3f6b52; --blue: #385c6c; --purple: #65536f; --gold: #8a6d2f; --gold2: #6d5524; --gold-hi: #c9a227; --gold-pale: #e8cf8a; /* 墨色 chrome（导航/侧栏/顶栏） */ --chrome-bg: #131117; --chrome-bg2: #1d1a22; --chrome-line: rgba(205,74,61,.34); --chrome-txt: #ece4d2; --chrome-dim: #a89f90; --grad-gold: linear-gradient(145deg,#b2352d,#8f1f1b); --grad-red: linear-gradient(145deg,#b2352d,#791915); --grad-green: linear-gradient(145deg,#587b65,#355846); --grad-purple: linear-gradient(145deg,#75617e,#51445a); --grad-blue: linear-gradient(145deg,#55788a,#354f5c); --grad-ink: linear-gradient(160deg,#241f2b,#100e14); --grad-gold-text: linear-gradient(135deg,#8a6d1f,#c9a227 55%,#8a6d1f); --shadow-paper: 5px 6px 0 rgba(5,4,8,.35); --shadow-soft: 0 14px 36px rgba(0,0,0,.5); --shadow-gold: var(--shadow-paper); --shadow-red: 4px 5px 0 rgba(124,24,20,.3); --font-gufeng: "KaiTi","STKaiti","楷体","Noto Serif SC","Source Han Serif SC","SimSun","宋体",serif; --font-body: "Noto Serif SC","Source Han Serif SC","Songti SC","SimSun","宋体",serif; --font-xingkai: "Xingkai SC","STXingkai","华文行楷","KaiTi","STKaiti","楷体","Noto Serif SC",serif; --dur-fast: .13s; --dur-hover: .2s; --dur-card: .28s; --ease-out: cubic-bezier(.2,.75,.3,1); --clip: none; } @keyframes ink-breathe { 0%,100%{opacity:.82} 50%{opacity:1} } @keyframes float-up { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} } @keyframes mist-drift { from{transform:translate3d(-2.5%,0,0)} to{transform:translate3d(2.5%,0,0)} } @keyframes seal-in { from{opacity:0;transform:scale(1.15) rotate(-5deg)} to{opacity:1;transform:scale(1) rotate(-2deg)} } * { box-sizing: border-box; } html { min-height:100%; background:var(--night); color-scheme:dark; } body { min-height:100vh; margin:0; color:#d3cabb; font-family:var(--font-body); background: radial-gradient(ellipse at 24% 0%, rgba(64,32,40,.4), transparent 42%), radial-gradient(ellipse at 86% 78%, rgba(44,28,36,.32), transparent 44%), linear-gradient(180deg,#121016 0%,#0e0d11 52%,#0a090c 100%); overflow-x:hidden; } /* ============ 夜幕画层：星子 + 血月 + 墨云 + 妖楼 + 远山 + 红绸 ============ */ .shan-shui { position:fixed; inset:0; z-index:0; pointer-events:none; background: radial-gradient(125% 88% at 50% 44%, transparent 56%, rgba(2,2,5,.55) 100%), radial-gradient(closest-side, rgba(205,74,61,.3), rgba(163,43,38,.12) 46%, transparent 72%) 63% 5% / 620px 620px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cdefs%3E%3CradialGradient id='g' cx='38%25' cy='34%25' r='75%25'%3E%3Cstop offset='0%25' stop-color='%23d95f4f'/%3E%3Cstop offset='52%25' stop-color='%23b2352d'/%3E%3Cstop offset='100%25' stop-color='%23721512'/%3E%3C/radialGradient%3E%3Cfilter id='r' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.05' numOctaves='4' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='13'/%3E%3C/filter%3E%3Cfilter id='b' x='-10%25' y='-10%25' width='120%25' height='120%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.1 0.13' numOctaves='3' seed='4' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0.24 0 0 0 0 0.05 0 0 0 0 0.04 0 0 0 0.55 0' result='sp'/%3E%3CfeComposite in='sp' in2='SourceGraphic' operator='in'/%3E%3C/filter%3E%3Cg filter='url(%23r)'%3E%3Ccircle cx='120' cy='120' r='92' fill='url(%23g)'/%3E%3C/g%3E%3Cg filter='url(%23b)'%3E%3Ccircle cx='120' cy='120' r='90'/%3E%3C/g%3E%3C/svg%3E") 63% 5% / 292px 292px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 420'%3E%3Cg fill='%23efe9dc'%3E%3Ccircle cx='24' cy='60' r='1.2' opacity='.8'/%3E%3Ccircle cx='90' cy='30' r='.9' opacity='.5'/%3E%3Ccircle cx='150' cy='90' r='1.4' opacity='.9'/%3E%3Ccircle cx='210' cy='40' r='.8' opacity='.45'/%3E%3Ccircle cx='280' cy='110' r='1.1' opacity='.7'/%3E%3Ccircle cx='340' cy='60' r='1.5' opacity='.85'/%3E%3Ccircle cx='395' cy='140' r='.9' opacity='.5'/%3E%3Ccircle cx='60' cy='170' r='1' opacity='.6'/%3E%3Ccircle cx='180' cy='200' r='1.2' opacity='.75'/%3E%3Ccircle cx='310' cy='230' r='.8' opacity='.4'/%3E%3Ccircle cx='370' cy='280' r='1.3' opacity='.8'/%3E%3Ccircle cx='40' cy='300' r='.9' opacity='.5'/%3E%3Ccircle cx='130' cy='330' r='1.1' opacity='.65'/%3E%3Ccircle cx='250' cy='350' r='.8' opacity='.4'/%3E%3C/g%3E%3C/svg%3E") 20% 0 / 460px 460px repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 360' preserveAspectRatio='none'%3E%3Cfilter id='c1' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.006 0.02' numOctaves='4' seed='12' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='150'/%3E%3C/filter%3E%3Cg filter='url(%23c1)'%3E%3Cellipse cx='330' cy='120' rx='360' ry='64' fill='%23171420' opacity='.85'/%3E%3Cellipse cx='900' cy='60' rx='420' ry='52' fill='%2314111c' opacity='.7'/%3E%3Cellipse cx='1420' cy='140' rx='330' ry='58' fill='%23191522' opacity='.75'/%3E%3C/g%3E%3C/svg%3E") 0 2% / 100% 30% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 300' preserveAspectRatio='none'%3E%3Cfilter id='c2' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007 0.024' numOctaves='4' seed='29' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='130'/%3E%3C/filter%3E%3Cg filter='url(%23c2)'%3E%3Cellipse cx='520' cy='150' rx='430' ry='60' fill='%2315121e' opacity='.65'/%3E%3Cellipse cx='1180' cy='110' rx='390' ry='54' fill='%23120f1a' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") 0 18% / 100% 26% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 330'%3E%3Cg fill='%23171019'%3E%3Cpath d='M96 330 L96 300 Q60 296 40 306 L52 268 Q40 262 30 268 L58 232 L134 232 L166 270 Q152 262 142 270 L156 308 Q132 296 104 300 L104 330 Z' opacity='.01'/%3E%3Cpath d='M120 24 L126 44 L120 40 L114 44 Z'/%3E%3Cpath d='M118 42 L122 64 L118 60 Z'/%3E%3Cpath d='M64 78 Q120 58 176 78 L188 92 Q120 70 52 92 Z'/%3E%3Cpath d='M92 92 L92 130 L148 130 L148 92 L136 92 L136 118 L104 118 L104 92 Z'/%3E%3Cpath d='M42 146 Q120 120 198 146 L212 162 Q120 132 28 162 Z'/%3E%3Cpath d='M76 162 L76 208 L164 208 L164 162 L150 162 L150 194 L90 194 L90 162 Z'/%3E%3Cpath d='M20 220 Q120 190 220 220 L236 238 Q120 204 4 238 Z'/%3E%3Cpath d='M60 238 L60 292 L180 292 L180 238 L164 238 L164 278 L76 278 L76 238 Z'/%3E%3Cpath d='M108 24 L132 24 L134 34 L106 34 Z'/%3E%3C/g%3E%3Cg fill='%23cd4a3d' opacity='.85'%3E%3Crect x='106' y='100' width='10' height='12'/%3E%3Crect x='128' y='100' width='10' height='12'/%3E%3Crect x='96' y='172' width='11' height='14'/%3E%3Crect x='134' y='172' width='11' height='14'/%3E%3Crect x='84' y='250' width='12' height='16'/%3E%3Crect x='124' y='250' width='12' height='16'/%3E%3C/g%3E%3Cg stroke='%23a32b26' stroke-width='2' fill='none' opacity='.55'%3E%3Cpath d='M64 78 Q120 58 176 78'/%3E%3Cpath d='M42 146 Q120 120 198 146'/%3E%3Cpath d='M20 220 Q120 190 220 220'/%3E%3C/g%3E%3C/svg%3E") right 3% top 30% / 236px 324px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 260'%3E%3Cg fill='%230d0b10'%3E%3Cpath d='M-10 20 Q90 34 150 22 Q230 8 320 26 L330 30 Q240 16 160 30 Q90 42 -10 28 Z'/%3E%3Cpath d='M150 24 Q210 60 260 96 L252 100 Q204 66 144 32 Z'/%3E%3Cpath d='M60 26 Q30 66 14 108 L8 104 Q26 62 54 24 Z'/%3E%3Cpath d='M250 96 Q296 108 340 104 L338 110 Q296 114 246 102 Z'/%3E%3Ccircle cx='14' cy='110' r='3'/%3E%3Ccircle cx='256' cy='100' r='2.5'/%3E%3Ccircle cx='338' cy='106' r='2'/%3E%3C/g%3E%3Cg fill='%23cd4a3d' opacity='.6'%3E%3Ccircle cx='150' cy='26' r='2.2'/%3E%3Ccircle cx='26' cy='70' r='1.8'/%3E%3Ccircle cx='252' cy='98' r='1.6'/%3E%3C/g%3E%3C/svg%3E") left -2% top 4% / 330px 226px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 500' preserveAspectRatio='none'%3E%3Cfilter id='fm' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.03' numOctaves='4' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='110'/%3E%3C/filter%3E%3Cg filter='url(%23fm)'%3E%3Cpath d='M-60 330 L150 210 L320 300 L520 160 L690 270 L870 180 L1060 280 L1250 190 L1450 280 L1660 220 V520 H-60 Z' fill='%23191622' opacity='.6'/%3E%3Cpath d='M-60 400 L240 280 L430 370 L650 260 L880 360 L1120 270 L1330 360 L1660 300 V520 H-60 Z' fill='%23120f19' opacity='.72'/%3E%3C/g%3E%3C/svg%3E") bottom left / 100% 52% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 400'%3E%3Cfilter id='rb' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.05' numOctaves='3' seed='19' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='60'/%3E%3C/filter%3E%3Cpath filter='url(%23rb)' d='M-20 330 Q160 300 300 320 T720 300' stroke='%23a32b26' stroke-width='5' fill='none' opacity='.4'/%3E%3Cpath filter='url(%23rb)' d='M-20 368 Q200 340 380 356 T720 344' stroke='%237c1814' stroke-width='3' fill='none' opacity='.35'/%3E%3C/svg%3E") left bottom / 52% 24% no-repeat; } /* 淡金云雾两带，缓慢漂移（夜色里的流霭） */ .shan-shui::before, .shan-shui::after { content:""; position:absolute; left:-12%; right:-12%; pointer-events:none; } .shan-shui::before { top:40%; height:14%; opacity:.2; animation:mist-drift 56s ease-in-out infinite alternate; background:linear-gradient(90deg,transparent,rgba(226,214,188,.5) 30%,rgba(226,214,188,.2) 62%,transparent); } .shan-shui::after { top:58%; height:10%; opacity:.13; animation:mist-drift 44s ease-in-out infinite alternate-reverse; background:linear-gradient(90deg,transparent 8%,rgba(226,214,188,.45) 44%,transparent 84%); } /* 底部云海：灰白泼墨云涛（参考图下沿的白云） */ body::before { content:""; position:fixed; left:0; right:0; bottom:0; height:21vh; z-index:0; pointer-events:none; background-repeat:no-repeat; background-position:center bottom; background-size:100% 100%; background-image: linear-gradient(180deg,transparent,rgba(224,218,204,.16) 58%,rgba(224,218,204,.3) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 260' preserveAspectRatio='none'%3E%3Cfilter id='w1' x='-15%25' y='-30%25' width='130%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.03' numOctaves='4' seed='23' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='110'/%3E%3C/filter%3E%3Cg filter='url(%23w1)'%3E%3Cellipse cx='260' cy='210' rx='420' ry='86' fill='%23ddd6c8' opacity='.5'/%3E%3Cellipse cx='900' cy='240' rx='520' ry='92' fill='%23d4cdc0' opacity='.42'/%3E%3Cellipse cx='1460' cy='205' rx='400' ry='84' fill='%23ddd6c8' opacity='.46'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 220' preserveAspectRatio='none'%3E%3Cfilter id='w2' x='-15%25' y='-30%25' width='130%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.036' numOctaves='4' seed='37' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='90'/%3E%3C/filter%3E%3Cg filter='url(%23w2)'%3E%3Cellipse cx='480' cy='190' rx='440' ry='70' fill='%23e6e0d2' opacity='.6'/%3E%3Cellipse cx='1180' cy='200' rx='480' ry='74' fill='%23ded7c8' opacity='.55'/%3E%3C/g%3E%3C/svg%3E"); } /* 暗角 + 细粒（罩住整体，统一夜色质感） */ body::after { content:""; position:fixed; left:0; top:0; right:0; bottom:0; z-index:2; pointer-events:none; opacity:.55; background-image: radial-gradient(125% 92% at 50% 40%, transparent 58%, rgba(3,2,6,.42) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); } ::selection { background:rgba(163,43,38,.4); color:#f5eedd; } a { color:#c76a5d; text-decoration:none; transition:color var(--dur-fast),opacity var(--dur-fast); } a:hover { color:var(--seal-hi); } /* 夜幕之上默认亮字；宣纸卡内由下方规则重新变暗 */ h1,h2,h3,h4,.game-title,.section-title { color:#ece4d2; font-family:var(--font-gufeng); font-weight:700; } h1 { font-size:26px; letter-spacing:.18em; } h2 { letter-spacing:.12em; } p,li,td { line-height:1.72; } .muted { color:var(--muted-c,#9a9184)!important; } .accent { color:var(--seal-hi)!important; background:none!important; filter:none!important; } /* ============ 宣纸卡（参考图中的纸卡）：夜色上浮起的羊皮纸 ============ */ .card,.dcard,.stat,.feature,.tile,.key-card,.hint,.round-card,.panel,.section-card,.apanel,.auth-box { position:relative; color:var(--txt); --muted-c:#746e64; background: radial-gradient(130% 90% at 0% 0%, rgba(33,29,38,.05), transparent 42%), rgba(246,238,220,.97); border:1px solid rgba(58,38,34,.5); border-radius:1px; box-shadow:var(--shadow-paper), 0 0 0 1px rgba(0,0,0,.25); } .auth-box { box-shadow:10px 12px 0 rgba(0,0,0,.4), 0 0 40px rgba(163,43,38,.12); background: radial-gradient(130% 80% at 0% 0%, rgba(33,29,38,.06), transparent 40%), rgba(246,238,220,.94); border:1px solid rgba(58,38,34,.65); } /* 卡内标题与表格回到墨色 */ .card h1,.card h2,.card h3,.card h4,.dcard h1,.dcard h2,.dcard h3,.dcard h4, .panel h3,.auth-box h1,.auth-box h2,.tile h1,.tile h2,.stat h1,.stat h2 { color:var(--ink); } .card table,.dcard table,.panel table,.auth-box table { color:var(--txt); } .card :is(input,select,textarea),.dcard :is(input,select,textarea),.panel :is(input,select,textarea) { color:var(--ink); } .card,.dcard { overflow:hidden; } /* 四角朱红墨钉（参考图纸卡的四角红角标） */ .card::before,.dcard::before,.feature::before,.tile::before,.stat::before { content:""; position:absolute; left:7px; top:7px; width:15px; height:15px; border-left:2px solid var(--seal); border-top:2px solid var(--seal); background:none; opacity:.78; pointer-events:none; } .card::after,.dcard::after,.feature::after,.tile::after,.stat::after { content:""; position:absolute; right:7px; bottom:7px; width:15px; height:15px; border-right:2px solid var(--seal); border-bottom:2px solid var(--seal); background:none; opacity:.78; pointer-events:none; } .card:hover,.dcard:hover,.feature:hover,.tile:hover,.stat:hover { border-color:rgba(124,24,20,.72); box-shadow:7px 8px 0 rgba(5,4,8,.4), 0 0 0 1px rgba(0,0,0,.25); } /* 卡片标题：落一枚朱砂短促笔 */ .card h2,.panel h3 { position:relative; padding-bottom:9px; } .card h2::after,.panel h3::after { content:""; position:absolute; left:1px; bottom:0; width:42px; height:3px; background:linear-gradient(90deg,var(--seal) 0 74%,transparent); border-radius:1px; } /* 印章式按钮（默认宣纸底墨字：夜幕与纸卡上都可读） */ button,.btn { appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:.42em; min-height:39px; padding:9px 22px; border:2px solid var(--ink); border-radius:1px; background:rgba(246,238,220,.92); color:var(--ink); font:700 14px/1.2 var(--font-gufeng); letter-spacing:.12em; cursor:pointer; box-shadow:none; animation:none; transition:background var(--dur-fast),color var(--dur-fast),transform var(--dur-fast),box-shadow var(--dur-fast); } button::before,.btn::before { content:none; } button:hover,.btn:hover { background:var(--ink); color:var(--paper-light); transform:translate(-1px,-1px); box-shadow:3px 3px 0 rgba(5,4,8,.35); filter:none; } button:active,.btn:active { transform:translate(0,0); box-shadow:none; } button:disabled,.btn:disabled { opacity:.42; cursor:not-allowed; transform:none; } button.danger,.btn.danger,.btn.primary,.seal-btn { background:linear-gradient(150deg,#b2352d 0%,#a32b26 46%,#7c1814 100%); border-color:#5c0f0c; color:#f9ecd8; box-shadow:inset 0 0 0 1px rgba(232,207,138,.3), 0 0 14px rgba(163,43,38,.28); } button.danger:hover,.btn.danger:hover,.btn.primary:hover,.seal-btn:hover { background:linear-gradient(150deg,#8f211c,#6e1310); color:#fff; box-shadow:3px 3px 0 rgba(92,15,12,.4); } .btn.ghost { background:rgba(246,238,220,.4); color:var(--ink); border-color:var(--ink); } .btn.ghost:hover { background:var(--ink); color:var(--paper-light); } button.small,.btn.small { min-height:31px; padding:6px 13px; font-size:12px; } /* 夜幕之上：hover 反白改为落墨（默认已是纸底） */ /* 书写式表单 */ input,select,textarea { width:100%; padding:10px 12px; border:0; border-bottom:1.5px solid rgba(33,29,38,.58); border-radius:0; outline:none; background:rgba(249,243,226,.55); color:var(--ink); font:14px/1.45 var(--font-body); box-shadow:none; transition:border-color var(--dur-fast),background var(--dur-fast),box-shadow var(--dur-fast); } input:hover,select:hover,textarea:hover { border-color:var(--ink); } input:focus,select:focus,textarea:focus { border-color:var(--seal); background:rgba(249,243,226,.95); box-shadow:0 2px 0 rgba(163,43,38,.16); } input::placeholder,textarea::placeholder { color:#9a927f; } label { color:var(--ink-soft); font-family:var(--font-gufeng); font-weight:700; letter-spacing:.08em; } /* 账簿表格（宣纸账册 + 朱红表头） */ .tbl-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line-soft); } table { width:100%; border-collapse:collapse; color:var(--txt); background:rgba(249,243,226,.4); } th,td { padding:10px 12px; border:1px solid var(--line-soft); text-align:left; } th { color:#f0e3cc; background:linear-gradient(180deg,#571713,#3a0e0b); font-family:var(--font-gufeng); font-size:12px; letter-spacing:.14em; border-bottom:2px solid #2c0907; border-color:#2c0907; } tr:hover td { background:rgba(163,43,38,.05); } code { padding:2px 7px; color:var(--seal-dark); background:rgba(249,243,226,.75); border:1px solid var(--line-soft); border-radius:1px; } pre { padding:17px; color:#332e3a; background:rgba(233,222,202,.8); border:1px solid var(--line); border-left:4px solid var(--seal-dark); border-radius:1px; box-shadow:inset 8px 0 20px rgba(33,29,38,.05); } .stats { display:flex; gap:12px; flex-wrap:wrap; } .stat { flex:1; min-width:150px; padding:17px 18px; } .stat .num,.dcard .kv .v,.dcard .kv .num { color:var(--seal-dark)!important; background:none!important; filter:none!important; font:700 23px/1.2 var(--font-gufeng); } .stat .lbl,.dcard .kv .t { color:var(--muted); font-size:11px; letter-spacing:.15em; margin-top:6px; } .badge,.pill { display:inline-block; padding:3px 10px; border:1px solid var(--line); border-radius:1px; background:rgba(249,243,226,.65); color:var(--ink-soft); font-size:11px; } .badge.ok { color:var(--green); border-color:rgba(63,107,82,.5); } .badge.off { color:var(--seal); border-color:rgba(163,43,38,.5); } .flash { padding:11px 15px; margin-bottom:13px; border:1px solid var(--line); border-left:5px solid var(--ink); border-radius:0; background:rgba(249,243,226,.9); color:var(--ink); } .flash.success { border-left-color:var(--green); color:#315442; background:rgba(63,107,82,.1); } .flash.error { border-left-color:var(--seal); color:var(--seal-dark); background:rgba(163,43,38,.1); } .key-text { color:var(--seal-dark); font-family:Consolas,monospace; } /* ============ 墨色顶栏（黑檀 + 朱砂细线） ============ */ .navbar { position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:22px; min-height:74px; padding:0 max(24px,calc((100vw - 1200px)/2)); background: radial-gradient(130% 170% at 10% 0%, rgba(163,43,38,.14), transparent 44%), linear-gradient(180deg,#18151d 0%,#100e15 60%,#0b0a0f 100%); border-bottom:1px solid rgba(205,74,61,.42); box-shadow:0 4px 20px rgba(0,0,0,.55); } .navbar::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; opacity:.5; background:linear-gradient(90deg,transparent 6%,var(--seal-hi) 30%,rgba(232,207,138,.8) 52%,var(--seal-hi) 74%,transparent 94%); } .navbar .logo { display:flex; align-items:center; font:700 28px/1 var(--font-gufeng); letter-spacing:.2em; white-space:nowrap; } .navbar .logo a { color:var(--chrome-txt); } .navbar .logo .accent { color:var(--seal-hi)!important; } .navbar .logo .skull,.side-logo .mark,.auth-box .brand .mark { display:inline-grid; place-items:center; width:42px; height:42px; margin-right:11px; border:2px solid var(--seal-hi); border-radius:1px; color:#f9ecd8; background:linear-gradient(150deg,#a32b26,#7c1814); font:700 20px/1 var(--font-gufeng); transform:rotate(-2deg); box-shadow:inset 0 0 0 3px rgba(249,236,216,.16), 0 0 16px rgba(163,43,38,.5); animation:seal-in .45s ease both; } .navbar .nav-right { display:flex; align-items:center; gap:3px; flex-wrap:wrap; } .navbar .nav-right a { position:relative; padding:9px 15px; color:var(--chrome-dim); font:700 14px var(--font-gufeng); letter-spacing:.08em; } .navbar .nav-right a:not(.btn)::after { content:""; position:absolute; left:50%; right:50%; bottom:3px; height:2px; background:var(--seal-hi); transition:left var(--dur-hover),right var(--dur-hover); } .navbar .nav-right a:hover { color:#e8dfd0; background:transparent; } .navbar .nav-right a:hover::after { left:28%; right:28%; } .navbar .nav-right .btn.primary { color:#f9ecd8; } .navbar .logo .brand-sub { display:block; color:var(--chrome-dim); font:400 10.5px/1.3 var(--font-body); letter-spacing:.3em; margin-top:3px; } /* ============ 控制台书卷骨架（墨楼侧栏） ============ */ .sidebar { position:relative; color:var(--chrome-txt); background: radial-gradient(150% 120% at 0% 0%, rgba(163,43,38,.1), transparent 42%), linear-gradient(180deg,#1a1720 0%,#121017 62%,#0b0a0f 100%); border-right:1px solid rgba(205,74,61,.36); } .sidebar::before { content:""; position:absolute; left:0; top:0; right:0; bottom:0; pointer-events:none; opacity:.6; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 230 900'%3E%3Cfilter id='s' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.02 0.05' numOctaves='3' seed='9' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='46'/%3E%3C/filter%3E%3Cg filter='url(%23s)'%3E%3Cpath d='M0 760 Q55 660 100 735 T230 650 V900 H0 Z' fill='%2308060b' opacity='.9'/%3E%3Cpath d='M0 815 Q70 755 125 800 T230 745 V900 H0 Z' fill='%23050408' opacity='.92'/%3E%3C/g%3E%3C/svg%3E") bottom/100% 46% no-repeat; } .sidebar::after { content:""; position:absolute; top:0; right:3px; width:1px; height:100%; background:linear-gradient(180deg,rgba(205,74,61,.5),rgba(205,74,61,.1) 60%,rgba(124,24,20,.5)); } .side-logo { position:relative; z-index:1; border-bottom:1px solid rgba(205,74,61,.28); } .side-logo .mark { width:38px; height:38px; margin:0; font-size:17px; } .side-logo b { color:var(--chrome-txt)!important; font:700 17px var(--font-gufeng); letter-spacing:.15em; } .side-logo .accent { color:var(--seal-hi)!important; } .side-group { position:relative; z-index:1; } .side-group .cap { color:#8b8377; letter-spacing:.28em; } .side-group .cap::before { content:"—"; margin-right:5px; color:var(--seal-hi); } .side-group a { color:#c2b9ab!important; border-left:3px solid transparent; border-radius:0!important; } .side-group a .ico { filter:grayscale(.15); } .side-group a:hover { color:#e8dfd0!important; background:rgba(205,74,61,.12)!important; transform:translateX(2px); } .side-group a.on { color:#f0e6d2!important; background:linear-gradient(90deg,rgba(163,43,38,.34),rgba(163,43,38,.08) 70%,transparent)!important; border-left-color:var(--seal-hi); font-weight:700; } .side-foot { position:relative; z-index:1; border-top:1px solid rgba(205,74,61,.24); } .side-foot .btn-logut { color:#d4655f!important; } .side-foot .btn-logut:hover { background:rgba(163,43,38,.2)!important; } .topbar { background:linear-gradient(180deg,rgba(26,23,32,.96),rgba(16,14,21,.94)); border-bottom:1px solid rgba(205,74,61,.32); box-shadow:0 3px 16px rgba(0,0,0,.45); } .page-title { color:var(--chrome-txt)!important; letter-spacing:.18em; } .icon-btn { padding:0; border:1px solid rgba(236,228,210,.42); color:var(--chrome-txt); background:transparent; } .icon-btn:hover { border-color:var(--seal-hi); color:#f0e6d2; } .avatar { color:#f9ecd8!important; background:linear-gradient(150deg,#a32b26,#7c1814)!important; border:2px solid rgba(249,236,216,.85); box-shadow:0 0 0 1px var(--seal-hi); } .uname { color:var(--chrome-txt)!important; } .content,.container { position:relative; z-index:1; background:transparent!important; } .layout,.main-col { background:transparent!important; } /* 游戏大厅：夜色牌匾 + 宣纸牌面 */ .game-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:17px; } .tile { display:block; overflow:hidden; color:var(--ink); } .tile:hover { transform:translateY(-4px); color:var(--ink); } .tile .cover { position:relative; height:118px; display:grid; place-items:center; font-size:48px; filter:grayscale(.12); background:linear-gradient(180deg,#241f2b 0%,#15121a 78%,#100d15 100%)!important; text-shadow:0 4px 14px rgba(0,0,0,.6); } .tile .cover::before { content:""; position:absolute; inset:0; opacity:.85; background: radial-gradient(closest-side, rgba(205,74,61,.5), rgba(163,43,38,.16) 52%, transparent 72%) right -14% top -30% / 110px 110px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 120' preserveAspectRatio='none'%3E%3Cfilter id='t' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.07' numOctaves='3' seed='17' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='34'/%3E%3C/filter%3E%3Cpath filter='url(%23t)' d='M0 92 Q45 50 88 78 T164 66 T235 80 T300 56 V120 H0 Z' fill='%23a32b26' opacity='.22'/%3E%3Cpath filter='url(%23t)' d='M0 104 Q60 76 120 94 T240 86 T300 96 V120 H0 Z' fill='%2308060b' opacity='.8'/%3E%3C/svg%3E") bottom/100% 78% no-repeat; } .tile .body { min-height:112px; padding:16px 18px 20px; border-top:1px solid rgba(58,38,34,.35); background:rgba(249,243,226,.6); } .tile .body b { display:block; margin-bottom:7px; color:var(--ink); font:700 18px var(--font-gufeng); letter-spacing:.16em; } .tile .body p { color:var(--muted); font-size:12px; } .tile .go,.tile .ribbon { position:absolute; z-index:4; padding:5px 10px; color:#f9ecd8; background:linear-gradient(150deg,#a32b26,#7c1814)!important; border:1px solid #5c0f0c; border-radius:0; font:700 10px var(--font-gufeng); letter-spacing:.12em; } .tile .go { top:10px; right:10px; } .tile .ribbon { top:10px; left:10px; } /* 认证卷轴：墨轴宣纸 */ .auth-wrap { min-height:calc(100vh - 74px); display:grid; place-items:center; padding:45px 16px; } .auth-box { width:100%; max-width:440px; padding:42px 38px; position:relative; overflow:visible; background: radial-gradient(130% 80% at 0% 0%, rgba(33,29,38,.06), transparent 40%), rgba(246,238,220,.94); border:1px solid rgba(58,38,34,.65); border-radius:1px; box-shadow:10px 12px 0 rgba(0,0,0,.4), 0 0 40px rgba(163,43,38,.12); } .auth-box::before,.auth-box::after { content:""; position:absolute; left:-14px; right:-14px; height:12px; border:1px solid #060509; background:linear-gradient(180deg,#2c1a22,#120c12); box-shadow:inset 0 0 0 1px rgba(205,74,61,.4); } .auth-box::before { top:-7px; } .auth-box::after { bottom:-7px; } .auth-box .brand { text-align:center; margin-bottom:28px; } .auth-box .brand .mark { width:60px; height:60px; margin:0; font-size:28px; } .auth-box .brand b { display:block; margin-top:14px; color:var(--ink); font:700 23px var(--font-gufeng); letter-spacing:.22em; } .auth-box .brand span:last-child { display:block; margin-top:7px; color:var(--muted); font-size:12px; letter-spacing:.2em; } @media(max-width:860px){ .navbar { position:relative; min-height:64px; padding:8px 13px; flex-wrap:wrap; gap:4px; } .navbar .logo { font-size:19px; letter-spacing:.12em; } .navbar .logo .skull { width:34px; height:34px; font-size:16px; margin-right:7px; } .navbar .nav-right { width:100%; justify-content:center; border-top:1px solid rgba(205,74,61,.24); padding-top:3px; } .navbar .nav-right a { padding:7px 8px; font-size:12px; } .container,.content { padding-left:12px!important; padding-right:12px!important; } .game-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; } .tile .cover { height:82px; font-size:36px; } .tile .body { min-height:0; padding:10px 12px 12px; } .tile .body b { font-size:14px; letter-spacing:.08em; } .tile .body p { display:none; } .stats { gap:9px; } .stat { min-width:calc(50% - 5px); padding:13px; } .auth-wrap { min-height:auto; padding:34px 12px; } .auth-box { padding:30px 20px; } input,select,textarea { font-size:16px; } h1 { font-size:21px!important; } /* 手机端夜幕收敛：血月缩小、妖楼/枯枝淡出、云海压低 */ .shan-shui { background-position: 50% 44%, 66% 3%, 66% 3%, 20% 0, 0 2%, 0 16%, right -8% top 30%, left -6% top 4%, bottom left, left bottom; background-size: 140% 96%, 420px 420px, 200px 200px, 460px 460px, 100% 26%, 100% 22%, 0 0, 0 0, 100% 44%, 52% 18%; } .shan-shui::before { top:34%; } .shan-shui::after { top:50%; } body::before { height:15vh; } } @media(max-width:390px){ .game-grid{grid-template-columns:1fr}.stat{min-width:100%} } /* ============================================================ 手机端窄屏补充适配（≤760px） ============================================================ */ @media (max-width: 760px) { .tbl-wrap table { min-width: 100%; } .tbl-wrap table.tbl-wide { min-width: 560px; } th, td { padding: 8px 9px; font-size: 12px; } .usearch input { width: 100%; } .ubatch-bar select, .lbatch-bar select { width: 100% !important; min-width: 0 !important; } .hero-num { font-size: 30px; } .hero-side { width: 100%; } .hchip { flex: 1 1 calc(50% - 6px); min-width: calc(50% - 6px); } .card input[style*="width:1"] { width: 100% !important; flex: 1 1 100%; } .card select[style*="min-width"] { width: 100% !important; min-width: 0 !important; flex: 1 1 100%; } .key-card { padding: 12px; } .key-card .ops { margin-left: 0; width: 100%; } .key-card .ops .btn, .key-card .ops button { flex: 1; } } @media (max-width: 380px) { .hchip { flex-basis: 100%; min-width: 100%; } } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important} }