/* Vierummy 官网 — 1928 维也纳沙龙风（与游戏内视觉一脉相承：胡桃木 + 黄铜金 + 暖米白）*/
:root{
  --walnut:#332419; --walnut-dark:#241a12; --walnut-light:#4a3626;
  --brass:#c9a872; --brass-bright:#e8c88a; --cream:#f5efde;
  --ink:#26190f; --muted:#b5a68f;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--walnut-dark); color:var(--cream);
  font-family:Georgia,"Times New Roman",serif; line-height:1.75; font-size:17px;
}
a{color:var(--brass-bright); text-decoration:none}
a:hover{text-decoration:underline}

header{
  background:linear-gradient(180deg,var(--walnut) 0%,var(--walnut-dark) 100%);
  border-bottom:2px solid var(--brass); padding:22px 24px;
}
.nav{max-width:920px; margin:0 auto; display:flex; align-items:center; gap:26px; flex-wrap:wrap}
.brand{font-size:26px; letter-spacing:.06em; color:var(--brass-bright); font-weight:700}
.nav a{font-size:15px; letter-spacing:.03em}
.langsel{
  margin-left:auto; background:var(--walnut-light); color:var(--cream);
  border:1px solid var(--brass); border-radius:3px; padding:7px 10px;
  font-family:inherit; font-size:14px; cursor:pointer;
}
.langsel:hover{border-color:var(--brass-bright)}
.legal-notice{
  background:var(--walnut-light); border:1px solid var(--brass);
  border-radius:3px; padding:12px 16px; margin:0 0 26px; font-size:15px; color:var(--brass-bright);
}

main{max-width:920px; margin:0 auto; padding:44px 24px 80px}
h1{font-size:34px; color:var(--brass-bright); margin:0 0 6px; letter-spacing:.02em}
h2{font-size:22px; color:var(--brass); margin:38px 0 12px; border-bottom:1px solid #5a4630; padding-bottom:8px}
h3{font-size:18px; color:var(--brass); margin:24px 0 8px}
.updated{color:var(--muted); font-size:14px; margin-bottom:30px}
p,li{color:#e4dcc8}
ul{padding-left:22px}
li{margin:7px 0}

table{width:100%; border-collapse:collapse; margin:16px 0; font-size:15px; display:block; overflow-x:auto}
th,td{border:1px solid #5a4630; padding:10px 12px; text-align:left; vertical-align:top}
th{background:var(--walnut-light); color:var(--brass-bright)}

.card{
  background:var(--walnut); border:1px solid #5a4630; border-left:3px solid var(--brass);
  padding:18px 20px; margin:22px 0; border-radius:3px;
}
.hero{text-align:center; padding:52px 0 34px}
.hero .tag{font-size:19px; color:var(--muted); margin-top:10px}
.btn{
  display:inline-block; background:linear-gradient(180deg,#d9b87e,#b8945c);
  color:var(--ink); padding:13px 30px; border-radius:3px; font-weight:700;
  margin:8px 6px; border:1px solid #8a6d42; letter-spacing:.03em;
}
.btn:hover{text-decoration:none; filter:brightness(1.07)}
.btn.ghost{background:transparent; color:var(--brass-bright); border:1px solid var(--brass)}
.features{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:34px 0}

footer{
  border-top:1px solid #5a4630; margin-top:56px; padding:26px 24px;
  color:var(--muted); font-size:14px; text-align:center;
}
footer a{margin:0 9px}

@media (max-width:600px){
  body{font-size:16px}
  h1{font-size:27px}
  main{padding:30px 18px 60px}
}


/* ─── [2026-07-25] 视觉升级：让页面有"场景"，不只是色块 ─────────────── */

/* Hero：咖啡馆实景压暗打底 + 上下渐隐融进页面背景（不是硬边框图） */
.hero-shell{
  position:relative; margin:-44px -24px 0; padding:76px 24px 58px; overflow:hidden;
  border-bottom:1px solid #4a3626;
}
.hero-shell::before{
  content:""; position:absolute; inset:0;
  background:url("assets/salon.jpg") center 28% / cover no-repeat;
  filter:brightness(.42) saturate(.9);
}
.hero-shell::after{   /* 上下渐隐，接住 header 与正文，避免生硬切口 */
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(36,26,18,.92) 0%, rgba(36,26,18,.34) 38%, rgba(36,26,18,.97) 100%);
}
.hero-shell > *{position:relative; z-index:1}
.hero h1{
  font-size:52px; letter-spacing:.10em; margin:0 0 14px;
  text-shadow:0 2px 18px rgba(0,0,0,.75);
}
.hero .tag{font-size:20px; color:#e8dcc4; text-shadow:0 1px 10px rgba(0,0,0,.8); line-height:1.85}

/* 黄铜细线分隔（呼应游戏内的金线语言） */
.rule{
  height:1px; margin:34px auto; max-width:340px;
  background:linear-gradient(90deg, transparent, var(--brass), transparent);
}

/* 卡片：加一点悬停呼吸，静态时更沉稳 */
.card{transition:border-color .25s ease, transform .25s ease}
.features .card:hover{border-left-color:var(--brass-bright); transform:translateY(-2px)}

/* 截图画廊 */
.shots{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin:26px 0 8px}
.shots figure{margin:0}
.shots img{
  width:100%; height:auto; display:block; border-radius:3px;
  border:1px solid #5a4630; box-shadow:0 6px 20px rgba(0,0,0,.45);
}
.shots figcaption{margin-top:8px; font-size:14px; color:var(--muted); text-align:center}

@media (max-width:600px){
  .hero-shell{margin:-30px -18px 0; padding:52px 18px 42px}
  .hero h1{font-size:38px}
  .hero .tag{font-size:17px}
}