﻿/* 江河倚天：墨青暖金主题 */
:root{
  --jh-ink:#041012;
  --jh-deep:#0a1d20;
  --jh-teal:#3f7774;
  --jh-jade:#78aaa0;
  --jh-gold:#d8b76f;
  --jh-gold-soft:#f0d9a2;
  --jh-paper:#efe6d2;
  --jh-line:rgba(216,183,111,.34);
  --jh-glass:rgba(5,18,20,.86);
}

html,
body{
  background-color:var(--jh-ink);
  color:var(--jh-paper);
}

body:not(.home-page){
  background-image:
    linear-gradient(180deg,rgba(2,10,12,.42),rgba(2,10,12,.9)),
    url("../image/jianghe-module.png");
  background-position:center top;
  background-size:cover;
  background-attachment:fixed;
}

.home-bg{
  background-image:url("../image/jianghe-home-inscribed.webp");
  background-position:center center;
}

.module-bg{
  background-image:url("../image/jianghe-module.webp");
  background-position:center top;
}

.overlay{
  position:fixed;
  inset:0;
  z-index:1;
  display:block;
  pointer-events:none;
  background:
    linear-gradient(90deg,rgba(2,10,12,.72) 0%,rgba(2,10,12,.18) 48%,rgba(2,10,12,.34) 100%),
    linear-gradient(180deg,rgba(2,9,11,.48) 0%,transparent 43%,rgba(2,9,11,.76) 100%);
}

.topbar{
  border-bottom:1px solid var(--jh-line);
  background:linear-gradient(180deg,rgba(3,15,17,.94),rgba(3,15,17,.64));
  box-shadow:0 10px 34px rgba(0,0,0,.24),inset 0 -1px 0 rgba(88,151,142,.12);
  backdrop-filter:blur(10px);
}

.brand-main,
.brand{
  color:var(--jh-gold-soft);
  text-shadow:0 2px 8px rgba(0,0,0,.9),0 0 20px rgba(88,151,142,.3);
}

.brand-main{
  background:linear-gradient(180deg,#fff7df 8%,#e8cc8b 54%,#aa7d35 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}

.nav a,
.nav-item > a{
  color:#e9e2d3;
  text-shadow:0 2px 7px rgba(0,0,0,.9);
}

.nav a:hover,
.nav a.active,
.nav-item:hover > a{
  color:#f3d58f;
  text-shadow:0 0 10px rgba(216,183,111,.68),0 0 22px rgba(70,128,122,.48);
}

.nav a.active::after{
  background:var(--jh-gold);
  box-shadow:0 0 12px rgba(216,183,111,.7);
}

.enter-btn,
.download-main-btn,
.shop-buy-btn,
.back-link{
  color:#f5dfaa;
  border-color:rgba(216,183,111,.62);
  background:linear-gradient(180deg,rgba(35,80,77,.78),rgba(8,31,33,.9));
  box-shadow:0 0 18px rgba(57,116,112,.22),inset 0 0 16px rgba(216,183,111,.08);
}

.enter-btn:hover,
.download-main-btn:hover,
.shop-buy-btn:hover,
.back-link:hover{
  border-color:#e5c579;
  box-shadow:0 0 22px rgba(83,153,144,.42),inset 0 0 18px rgba(216,183,111,.14);
}

.sub-menu{
  border-color:rgba(216,183,111,.42);
  background:linear-gradient(180deg,rgba(6,27,29,.98),rgba(3,14,16,.98));
  box-shadow:0 14px 34px rgba(0,0,0,.72),inset 0 0 24px rgba(63,119,116,.13);
}

.sub-menu::before{
  background:linear-gradient(90deg,transparent,var(--jh-gold),transparent);
}

.sub-menu a:hover{
  color:#f1d38d;
  background:linear-gradient(90deg,transparent,rgba(63,119,116,.42),transparent);
  text-shadow:0 0 12px rgba(216,183,111,.48);
}

.left-side{
  color:#dfd5c2;
}

.v-line{
  background:linear-gradient(to bottom,transparent,var(--jh-gold),rgba(74,137,130,.35),transparent);
}

.home-page .hero{
  margin-top:15vh;
}

.home-page .hero-title,
.home-page .hero h1{
  color:#f1eadb;
  text-shadow:0 3px 5px rgba(0,0,0,.96),0 8px 25px rgba(0,0,0,.88),0 0 20px rgba(69,130,124,.28);
}

.home-page .hero-title span,
.home-page .hero h1 span{
  color:#e3c06f;
  text-shadow:0 3px 6px rgba(0,0,0,.9),0 0 14px rgba(216,183,111,.48),0 0 30px rgba(63,119,116,.36);
}

.jianghe-quote-line{
  color:#d9dfd7;
  border-color:rgba(118,174,164,.34);
  background:linear-gradient(90deg,transparent,rgba(4,26,28,.72),transparent);
  text-shadow:0 2px 7px rgba(0,0,0,.9),0 0 14px rgba(88,151,142,.28);
}

.quote-tip-mini{
  color:#c7a85f;
}

.main-btn{
  color:#f5e5bd;
  border-color:rgba(216,183,111,.78);
  background:linear-gradient(180deg,rgba(40,88,83,.92),rgba(8,32,34,.96));
  box-shadow:0 0 26px rgba(54,122,116,.36),inset 0 0 24px rgba(216,183,111,.1);
}

.main-btn::before{
  background:linear-gradient(90deg,transparent,rgba(240,217,162,.72),transparent);
}

.main-btn::after{
  border-color:rgba(216,183,111,.58);
}

.main-btn:hover{
  box-shadow:0 0 34px rgba(78,151,142,.52),inset 0 0 28px rgba(216,183,111,.14);
}

.register-btn{
  color:#dbc995;
  border-color:rgba(126,177,166,.38);
  background:rgba(4,23,25,.72);
}

.register-btn:hover{
  color:#f2db9e;
  border-color:rgba(216,183,111,.64);
  background:rgba(10,42,43,.84);
}

.right-menu a{
  color:#d9d4c6;
}

.right-menu i{
  color:#e1c477;
  border-color:rgba(216,183,111,.42);
  background:rgba(5,24,26,.78);
  box-shadow:0 0 16px rgba(50,111,107,.26);
}

.right-menu a:hover i{
  color:#fff0bd;
  border-color:#d8b76f;
  box-shadow:0 0 22px rgba(75,147,139,.5);
}

.panel,
.history-intro,
.history-box,
.history-note,
.record-intro,
.record-bottom,
.guide-intro,
.guide-section,
.item-intro,
.item-toolbar,
.equipment-intro,
.equipment-toolbar,
.skill-intro,
.skill-toolbar,
.map-intro,
.map-note,
.news-main,
.message-box,
.refine-frame-box,
.external-tool-card,
.event-text-box,
.info-box,
.game-box,
.reward-box{
  border-color:var(--jh-line) !important;
  background:linear-gradient(180deg,rgba(7,28,30,.92),rgba(3,15,17,.94)) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.42),inset 0 0 30px rgba(69,130,124,.08) !important;
}

.record-card,
.game-entry-card,
.download-card,
.shop-card,
.map-card,
.monster-card,
.game-card,
.reward-card,
.modal-card{
  border-color:rgba(216,183,111,.26) !important;
  background:linear-gradient(180deg,rgba(10,37,39,.9),rgba(4,20,22,.94)) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.34),inset 0 0 22px rgba(75,139,132,.06) !important;
}

.record-card:hover,
.game-entry-card:hover,
.download-card:hover,
.shop-card:hover,
.map-card:hover,
.monster-card:hover,
.game-card:hover,
.reward-card:hover{
  border-color:rgba(225,194,121,.64) !important;
  box-shadow:0 16px 38px rgba(0,0,0,.45),0 0 22px rgba(65,132,125,.26) !important;
}

.panel h1,
.panel h2,
.history-page h1,
.record-page h1,
.guide-page h1,
.item-page h1,
.equipment-page h1,
.skill-page h1,
.map-page h1,
.monster-page h1,
.news-page h1{
  color:#f0d89d !important;
  text-shadow:0 2px 7px rgba(0,0,0,.9),0 0 16px rgba(74,137,130,.34) !important;
}

.home-info-panel{
  gap:14px;
}

.home-latest,
.home-quick-links,
.home-contact-panel{
  border-color:var(--jh-line);
  background:linear-gradient(180deg,rgba(5,25,27,.9),rgba(3,16,18,.92));
  box-shadow:0 14px 36px rgba(0,0,0,.38),inset 0 0 22px rgba(69,130,124,.08);
  backdrop-filter:blur(12px);
}

.home-panel-title,
.home-quick-links b,
.contact-title,
.contact-box strong{
  color:#e7cb87;
  text-shadow:0 1px 4px rgba(0,0,0,.9),0 0 12px rgba(74,137,130,.32);
}

.contact-title{
  border-color:rgba(216,183,111,.38);
  background:rgba(5,24,26,.96);
}

.contact-label,
.home-panel-title a,
.home-quick-links span,
.home-news-list time{
  color:#9fb5ad;
}

.home-news-list a{
  color:#ddd5c5;
}

.home-server-status{
  color:#87c8b2;
}

.footer{
  color:#9faeaa;
  border-top-color:rgba(216,183,111,.2);
  background:linear-gradient(180deg,transparent,rgba(2,12,14,.82));
}

.music-btn{
  color:#d8c28f;
  border-color:rgba(216,183,111,.32);
  background:rgba(5,24,26,.8);
}

@media (max-width:900px){
  .home-bg{
    background-position:62% center;
  }

  .overlay{
    background:linear-gradient(180deg,rgba(2,10,12,.54),rgba(2,10,12,.22) 42%,rgba(2,10,12,.84));
  }

  .home-page .hero{
    margin-top:7vh;
  }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* 公告页：防止单行摘要撑宽网格并造成横向滚动 */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

.news-page{
  box-sizing:border-box;
  width:min(1240px,calc(100% - 40px)) !important;
  max-width:1240px;
  margin:clamp(34px,7vh,72px) auto 90px !important;
  overflow:hidden;
}

.news-layout{
  grid-template-columns:minmax(190px,230px) minmax(0,1fr) !important;
  width:100%;
  min-width:0;
}

.news-side,
.news-main,
.news-list,
.news-item,
.news-content{
  box-sizing:border-box;
  min-width:0;
}

.news-main,
.news-list,
.news-item{
  width:100%;
  max-width:100%;
}

.news-main{
  overflow:hidden;
}

.news-content h3,
.news-content p{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}

.news-modal-box{
  box-sizing:border-box;
  width:min(1080px,calc(100vw - 40px)) !important;
  max-width:calc(100vw - 40px) !important;
}

@media (max-width:760px){
  .news-page{
    width:calc(100% - 24px) !important;
    padding:18px 14px !important;
  }

  .news-layout{
    grid-template-columns:minmax(0,1fr) !important;
  }

  .news-item{
    grid-template-columns:64px minmax(0,1fr) !important;
  }
}
