/* ============================================================
   枕星妖楼 · 首页主视觉（暗夜妖楼题榜）
   血月压题 + 墨云掩月 + 朱红匾额 + 双宣纸卡 + 云海红绸
   ============================================================ */
.hero-ink {
    position:relative; margin:-30px -22px 34px; padding:104px 40px 150px; text-align:center; overflow:hidden;
    color:#e8dfd0;
    background:
      radial-gradient(ellipse at 18% 6%, rgba(163,43,38,.16), transparent 40%),
      radial-gradient(ellipse at 84% 90%, rgba(120,40,34,.2), transparent 46%),
      linear-gradient(180deg,#15121b 0%,#0f0d14 46%,#0a090e 100%);
    border-bottom:1px solid rgba(205,74,61,.3); box-shadow:0 14px 44px rgba(0,0,0,.55);
}
/* 血月：悬于题字正上方偏右，盘面斑驳 */
.hero-moon { position:absolute; z-index:0; left:50%; top:-118px; width:330px; height:330px; margin-left:-116px; border-radius:50%;
    background:
      radial-gradient(circle at 30% 32%, rgba(60,8,6,.4) 0 7%, transparent 8%),
      radial-gradient(circle at 62% 48%, rgba(60,8,6,.34) 0 5%, transparent 6%),
      radial-gradient(circle at 44% 66%, rgba(60,8,6,.3) 0 6%, transparent 7%),
      radial-gradient(circle at 70% 24%, rgba(60,8,6,.26) 0 4%, transparent 5%),
      radial-gradient(circle at 24% 52%, rgba(60,8,6,.24) 0 4%, transparent 5%),
      radial-gradient(circle at 38% 36%, #dd6a58 0%, #b2352d 46%, #8f1d1d 74%, #6e1210 100%);
    box-shadow:0 0 90px rgba(195,57,43,.5), 0 0 200px rgba(163,43,38,.28); }
.hero-moon::after { content:""; position:absolute; inset:-16px; border-radius:50%; border:1px solid rgba(205,74,61,.28); opacity:.6; }
/* 墨云掩月 + 底部云海收边（随时间极缓漂移） */
.hero-ink::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.95;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 420' preserveAspectRatio='none'%3E%3Cfilter id='hc' x='-20%25' y='-40%25' width='140%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.007 0.02' numOctaves='4' seed='14' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='140'/%3E%3C/filter%3E%3Cg filter='url(%23hc)'%3E%3Cellipse cx='760' cy='90' rx='430' ry='62' fill='%23100d16' opacity='.78'/%3E%3Cellipse cx='240' cy='50' rx='330' ry='52' fill='%2314111c' opacity='.66'/%3E%3Cellipse cx='1350' cy='110' rx='360' ry='56' fill='%230f0c15' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 40% no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 460' preserveAspectRatio='none'%3E%3Cfilter id='hm' x='-15%25' y='-15%25' width='130%25' height='130%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.028' numOctaves='4' seed='21' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='100'/%3E%3C/filter%3E%3Cg filter='url(%23hm)'%3E%3Cpath d='M-40 300 L170 200 L340 270 L520 160 L700 260 L890 180 L1070 270 L1260 200 L1450 280 L1640 230 V480 H-40 Z' fill='%23171420' opacity='.55'/%3E%3Cpath d='M-40 370 L250 260 L440 340 L660 240 L890 340 L1120 260 L1330 350 L1640 290 V480 H-40 Z' fill='%23100d18' opacity='.68'/%3E%3C/g%3E%3C/svg%3E") bottom 8% right 0 / 74% 46% no-repeat;
    animation:mist-drift 64s ease-in-out infinite alternate;
}
/* 朱红妖楼剪影（右） + 枯枝（左） + 底部白云海与红绸 */
.hero-ink::after { content:""; position:absolute; left:-4%; right:-4%; bottom:-2px; height:44%; pointer-events:none; opacity:.96;
    background:
      linear-gradient(180deg,transparent,rgba(224,218,204,.14) 72%,rgba(228,222,208,.26) 100%),
      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='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='.9'%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='.6'%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 4% bottom 4% / 216px 296px 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%3C/g%3E%3Cg fill='%23cd4a3d' opacity='.55'%3E%3Ccircle cx='150' cy='26' r='2.2'/%3E%3Ccircle cx='26' cy='70' r='1.8'/%3E%3C/g%3E%3C/svg%3E") left 2% bottom 10% / 300px 205px no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 240' preserveAspectRatio='none'%3E%3Cfilter id='hs' x='-15%25' y='-30%25' width='130%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.028' numOctaves='4' seed='23' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='100'/%3E%3C/filter%3E%3Cg filter='url(%23hs)'%3E%3Cellipse cx='300' cy='190' rx='430' ry='76' fill='%23ded7c9' opacity='.62'/%3E%3Cellipse cx='920' cy='215' rx='520' ry='82' fill='%23d4cdc0' opacity='.5'/%3E%3Cellipse cx='1460' cy='185' rx='400' ry='72' fill='%23ded7c9' opacity='.56'/%3E%3C/g%3E%3C/svg%3E") bottom/100% 58% no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 300'%3E%3Cfilter id='hrb' 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(%23hrb)' d='M-20 240 Q160 210 300 230 T720 210' stroke='%23a32b26' stroke-width='5' fill='none' opacity='.42'/%3E%3Cpath filter='url(%23hrb)' d='M-20 272 Q200 246 380 260 T720 250' stroke='%237c1814' stroke-width='3' fill='none' opacity='.36'/%3E%3C/svg%3E") left bottom / 54% 40% no-repeat;
}
.hero-vertical { position:absolute; z-index:2; right:4.5%; top:16%; writing-mode:vertical-rl; text-orientation:upright;
    font:700 20px/1.7 var(--font-gufeng); letter-spacing:.45em; color:rgba(232,223,208,.5); text-shadow:0 0 14px rgba(205,74,61,.35); }
.hero-kicker { position:relative; z-index:2; display:inline-block; padding:6px 20px; border:1px solid rgba(205,74,61,.55);
    border-radius:1px; color:#d8c5a8; background:rgba(10,9,14,.55); font:700 11px/1.3 var(--font-gufeng); letter-spacing:.4em; margin-bottom:26px; }
.hero-title { position:relative; z-index:2; display:inline-block; }
.hero-ink h1 { margin:16px 0 10px; color:#f3ecdc!important; font:900 clamp(46px,8vw,88px)/1.12 var(--font-xingkai);
    letter-spacing:.1em; text-shadow:0 0 34px rgba(195,57,43,.3), 0 4px 0 rgba(4,3,6,.85); }
.hero-ink h1 span { color:var(--seal-hi)!important; background:none!important; filter:none!important; text-shadow:0 0 20px rgba(163,43,38,.55); }
/* 落款朱印（双字竖排小印） */
.hero-seal { position:absolute; z-index:3; right:-60px; top:-12px; width:44px; height:76px; display:grid; place-items:center;
    transform:rotate(-4deg); color:#f9ecd8; background:linear-gradient(160deg,#a32b26,#7c1814); border:1px solid #5c0f0c;
    font:700 21px/1.15 var(--font-gufeng); letter-spacing:0; writing-mode:vertical-rl;
    box-shadow:inset 0 0 0 3px rgba(249,236,216,.2), 0 0 18px rgba(163,43,38,.5); animation:seal-in .6s .2s ease both; }
.hero-sub { position:relative; z-index:2; color:#d6cdb8; font:700 17px/1.4 var(--font-gufeng); letter-spacing:.52em; margin-bottom:24px; text-shadow:0 2px 10px rgba(0,0,0,.6); }
/* 朱红匾额 */
.hero-plaque { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:14px;
    max-width:640px; margin:0 auto 34px; padding:15px 30px; color:#f0dfb9;
    background:linear-gradient(180deg,#4a120e 0%,#33100c 100%);
    border:1px solid rgba(201,162,39,.55); box-shadow:inset 0 0 0 3px rgba(20,6,5,.8), inset 0 0 26px rgba(0,0,0,.45), 0 10px 28px rgba(0,0,0,.5);
    font:700 15px/1.6 var(--font-gufeng); letter-spacing:.2em; }
.hero-plaque::before,.hero-plaque::after { content:""; width:7px; height:7px; flex:none; transform:rotate(45deg);
    background:var(--seal-hi); box-shadow:0 0 8px rgba(205,74,61,.7); }
.hero-cards { position:relative; z-index:2; display:flex; justify-content:center; gap:22px; flex-wrap:wrap; margin-bottom:40px; }
.hcard { position:relative; display:flex; align-items:center; gap:20px; min-width:280px; padding:22px 30px;
    background:linear-gradient(175deg,#f7f0dd 0%,#efe6cd 100%); border:1px solid rgba(58,38,34,.5); border-radius:2px;
    box-shadow:0 14px 34px rgba(0,0,0,.5), inset 0 0 0 1px rgba(249,243,226,.7); color:var(--ink);
    transition:transform var(--dur-card),box-shadow var(--dur-card); }
.hcard:hover { transform:translateY(-4px); box-shadow:0 20px 40px rgba(0,0,0,.55), 0 0 0 1px rgba(163,43,38,.35); color:var(--ink); }
.hcard .hc-cap { position:absolute; left:0; right:0; top:9px; text-align:center; color:#8a2a24; font:700 11px/1 var(--font-gufeng); letter-spacing:.4em; }
.hcard .hc-cap::before,.hcard .hc-cap::after { content:"—"; color:rgba(138,42,36,.6); margin:0 6px; }
.hcard .hc-seal { position:absolute; right:9px; top:9px; width:22px; height:22px; display:grid; place-items:center;
    background:linear-gradient(150deg,#a32b26,#7c1814); color:#f9ecd8; font:700 12px/1 var(--font-gufeng);
    transform:rotate(6deg); box-shadow:inset 0 0 0 2px rgba(249,236,216,.25); }
.hcard .hc-main { display:flex; align-items:center; gap:18px; margin-top:20px; }
.hcard b { font:700 21px/1 var(--font-gufeng); letter-spacing:.18em; color:var(--ink); }
.hcard:hover b { color:var(--seal-dark); }
.hcard i { width:1px; height:26px; background:rgba(58,38,34,.4); }
.hero-actions { position:relative; z-index:2; display:flex; justify-content:center; flex-wrap:wrap; gap:14px; }
.hero-actions .btn { min-width:190px; }
.hero-actions .btn.primary { font-size:16px; padding:12px 34px; letter-spacing:.3em; }
.hero-actions .btn.ghost { background:rgba(246,238,220,.05); color:#e8dfd0; border-color:rgba(236,228,210,.55); }
.hero-actions .btn.ghost:hover { background:var(--paper-light); color:var(--ink); border-color:var(--paper-light); }
.hero-note { position:relative; z-index:2; max-width:680px; margin:26px auto 0; color:#9d9484; font-size:13px; letter-spacing:.14em; line-height:2; }

/* 正文段落（夜幕之上：标题亮色，卡内深字） */
.section { max-width:1200px; margin:32px auto; }
.section-title { text-align:center; margin-bottom:26px; }
.section-title h2 { display:inline-block; position:relative; color:#ece4d2; font:700 27px/1.2 var(--font-gufeng); letter-spacing:.42em; padding:0 28px; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.section-title h2::before,.section-title h2::after { content:""; position:absolute; top:50%; width:55px; height:1px; background:rgba(236,228,210,.55); }
.section-title h2::before { left:-60px; }
.section-title h2::after { right:-60px; }
.section-title .sub { display:block; margin-top:9px; color:#9a9184; font:400 12px/1.4 var(--font-body); letter-spacing:.35em; }

.feature-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.feature { min-height:165px; padding:24px 22px; transition:transform var(--dur-card),border-color var(--dur-card),box-shadow var(--dur-card); }
.feature strong { display:block; margin-bottom:18px; color:#8a2a24; font:700 12px/1.2 var(--font-gufeng); letter-spacing:.28em; }
.feature b { display:block; margin-bottom:9px; color:var(--ink); font:700 18px/1.3 var(--font-gufeng); letter-spacing:.18em; }
.feature span { color:var(--muted); font-size:13px; line-height:1.75; }

.split { display:grid; grid-template-columns:1.3fr .7fr; gap:18px; }
.panel { padding:24px; }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:20px; }
.panel-head h3 { color:var(--ink); font:700 19px/1.2 var(--font-gufeng); letter-spacing:.25em; }
.panel-head a { color:#8a5a2b; font:600 12px/1.2 var(--font-body); letter-spacing:.15em; }
.api-row { display:flex; gap:14px; margin-bottom:18px; }
.api-icon { font-size:32px; color:#8a2a24; filter:grayscale(.15); }
.api-row b { display:block; margin-bottom:5px; color:var(--ink); font:700 16px/1.3 var(--font-gufeng); letter-spacing:.12em; }
.api-row p { color:var(--muted); font-size:13px; line-height:1.7; }
.panel pre { margin:0; padding:16px; border:1px solid rgba(33,29,38,.28); border-left:4px solid #571713; border-radius:0; background:rgba(233,222,202,.8); color:#332e3a; font:12px/1.75 Consolas,monospace; overflow-x:auto; }
.game-list { display:grid; gap:9px; }
.game-list a { display:flex; justify-content:space-between; align-items:center; gap:11px; padding:14px 13px; border:1px solid rgba(33,29,38,.26); background:rgba(249,243,226,.55); color:var(--txt); transition:border-color var(--dur-hover),background var(--dur-hover); }
.game-list a:hover { border-color:#8a2a24; background:rgba(249,243,226,.9); color:#8a2a24; }
.game-list b { font:700 15px/1.2 var(--font-gufeng); letter-spacing:.12em; }
.game-list span { color:var(--muted); font-size:12px; }
.notice { display:flex; align-items:center; gap:18px; padding:20px 24px; border:1px solid rgba(33,29,38,.32); background:rgba(249,243,226,.7); }
.notice-seal { display:grid; place-items:center; width:54px; height:54px; flex:none; border:2px solid var(--seal-hi); color:#f9ecd8; background:linear-gradient(150deg,#a32b26,#7c1814); font:700 26px/1 var(--font-gufeng); transform:rotate(-3deg); box-shadow:inset 0 0 0 4px rgba(249,236,216,.2), 0 0 18px rgba(163,43,38,.4); }
.notice b { display:block; margin-bottom:5px; color:var(--ink); font:700 17px/1.3 var(--font-gufeng); letter-spacing:.15em; }
.notice p { color:var(--muted); font-size:13px; line-height:1.7; }

@media(max-width:860px){
    .hero-ink{margin:-14px -12px 24px;padding:72px 16px 110px}.hero-vertical{display:none}
    .hero-moon{width:220px;height:220px;margin-left:-78px;top:-84px}
    .hero-seal{right:-44px;top:-10px;width:38px;height:64px;font-size:17px}
    .hero-ink h1{font-size:clamp(34px,9.4vw,56px)!important;letter-spacing:.06em}
    .hero-sub{font-size:14px;letter-spacing:.3em}
    .hero-plaque{padding:12px 16px;font-size:12.5px;letter-spacing:.12em;gap:9px;margin-bottom:26px}
    .hero-cards{gap:12px;margin-bottom:30px}
    .hcard{min-width:0;width:100%;max-width:340px;padding:18px 20px}
    .hcard b{font-size:17px}.hcard .hc-main{gap:13px}
    .hero-actions{flex-direction:column;max-width:320px;margin:0 auto}.hero-actions .btn{width:100%}
    .section-title h2{font-size:22px;letter-spacing:.28em;padding:0 22px}.section-title h2::before,.section-title h2::after{width:40px}.section-title h2::before{left:-45px}.section-title h2::after{right:-45px}
    .feature-grid,.split{grid-template-columns:1fr;gap:12px}.feature{min-height:auto;padding:18px}.panel{padding:18px}.game-list a{flex-direction:column;align-items:flex-start;gap:4px}
}
/* 极窄屏：装饰线缩短，印章收起 */
@media(max-width:400px){
    .section-title h2{padding:0 14px;letter-spacing:.18em}
    .section-title h2::before,.section-title h2::after{width:24px}
    .section-title h2::before{left:-28px}
    .section-title h2::after{right:-28px}
    .hero-seal{display:none}
}