@import url('https://fonts.googleapis.com/css2?family=Satisfy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cinzel&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');

/* ==================== 基础变量 ==================== */
:root{
  --bg:#0b0b0b; --fg:#eae7e1; --muted:#b9b2a6; --gold:#d4af37; --accent:#c49e2d;
  --card:#151515; --border:rgba(255,255,255,.08); --maxw:1200px; --radius:18px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --bgimg: url('images/背景.jpg');
  --bgveil: rgba(11,11,11,.58);
  --logo-scale: 4;
  --logo-shift-x: -3px; --logo-shift-y: 3px;

  /* Specials 高度与箭头位置（可按需调整） */
  --banner-h: 80vh;
  --arrow-y: 50%;
  --arrow-gutter: clamp(10px, 2vw, 24px);

  font: 16px/1.6 'Cinzel','Noto Serif SC',serif;

  /* hero 徽标辅助变量（保留以备后用） */
  --badge-left: 56%;
  --badge-top:  12%;
  --badge-size: clamp(90px, 12vw, 180px);
}

/* ==================== 重置与通用 ==================== */
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; background:var(--bg); color:var(--fg); }
figure{ margin:0 }
h1{ font-size:clamp(36px,6vw,60px); line-height:1.1 }
h2{ font-size:clamp(26px,4vw,36px) }
h3{ font-size:clamp(20px,3vw,26px) }
p{ margin:.4em 0 1em }
a{ color:var(--fg); text-decoration:none }
img{ max-width:100%; display:block; border-radius:12px }
.container{ width:100%; max-width:var(--maxw); margin:auto; padding:0 20px }

/* 文本换行保护 */
.card, .card p, .card h4, .brand-name, .price{
  overflow-wrap:anywhere; word-wrap:break-word; hyphens:auto;
}

/* ==================== 顶部导航 ==================== */
.nav{ position:sticky; top:0; z-index:30; background:rgba(11,11,11,.6);
  backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--border) }
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:68px }
.brand{ display:flex; align-items:center; gap:12px }
.brand-name{ font-weight:700; letter-spacing:.8px; text-transform:capitalize; font-family:'Satisfy' }

.logo{ position:relative; width:70px; height:70px; display:block; overflow:visible; }
.logo-img{
  position:absolute; left:50%; top:50%; transform-origin:center;
  transform: translate(-50%,-50%) translate(var(--logo-shift-x),var(--logo-shift-y)) scale(var(--logo-scale));
  width:46px; height:auto; display:block; z-index:2;
}

.nav ul{ display:flex; gap:20px; list-style:none; margin:0; padding:0 }
.nav a{ opacity:.9 }
.nav a:hover{ opacity:1; color:var(--gold) }
.nav a.active{ color:var(--gold) }
.cta{ background:var(--gold); color:#111; padding:10px 14px; border-radius:999px; font-weight:700; box-shadow:var(--shadow) }
.cta:hover{ background:var(--accent) }
.menu-toggle{ display:none; background:none; border:0; color:var(--fg); font-size:24px }

@media (max-width: 860px){
  .nav ul{ display:none; position:absolute; left:0; right:0; top:68px;
    background:rgba(11,11,11,.96); padding:14px 20px; border-bottom:1px solid var(--border) }
  .nav ul.open{ display:grid; gap:10px }
  .menu-toggle{ display:block }
}

/* ==================== Hero ==================== */
.hero {
  position: relative;
  min-height: calc(100vh - 68px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 0 2.5rem;
  border-top: none;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 60% at 75% 30%, #00000066, transparent 60%),
    radial-gradient(40% 40% at 25% 70%, #00000066, transparent 60%),
    linear-gradient(var(--bgveil), var(--bgveil)),
    var(--bgimg);
  background-size: cover;
  background-position: center;
  filter: saturate(.9);
}

.hero .container { text-align: center; z-index: 1; }
.hero .container > div{
  width:min(92%, 110ch);
  margin:0 auto;
  text-align:center;
  container-type:inline-size;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: clamp(8px, 2vw, 16px);
}

.kicker{ color:var(--gold); margin-top:10px; text-transform:uppercase; letter-spacing:2px; font-weight:700; margin-bottom:2px; font-size:12px }
.hero-title{
  font-size:clamp(1.6rem, 4.5vw, 3.5rem);
  line-height:1.15;
  margin:8px auto 0;
  text-wrap:balance;
  word-break:keep-all;
}
.hero-title .line1,
.hero-title .line2{ white-space: normal; } /* 小屏允许换行，避免溢出 */

@container (max-width: 40em){
  .hero-title .line2{ display:block; margin-top:.2em; }
}
@container (min-width: 52ch){
  .hero-title .line1, .hero-title .line2{ white-space:nowrap; } /* 宽屏再锁定不换行 */
}

/* Hero 顶部徽标（去负 margin，改用轻微上抬） */
.hero-logo {
  display: block;
  margin: 0 auto;
  width: clamp(140px, 32vw, 360px);
  height: auto;
  transform: translateY(clamp(-8px, -1.5vw, -20px));
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.4));
  pointer-events: none;
}
/* 让标题更贴近徽标（可按需微调） */
.hero-title{ margin-top: clamp(-4px, -1vw, -12px); }

/* 引导文字与按钮 */
.hero .lead{ color:var(--muted); max-width:60ch; margin:14px auto 10px; text-align:center; font-size: 10px;}
.hero .actions{ display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.btn{ display:inline-block; padding:10px 14px; border-radius:10px; border:1px solid var(--border) }
.btn:hover{ border-color:var(--gold); color:var(--gold) }
.btn.primary{ background:var(--gold); color:#111; border-color:transparent }
.btn.primary:hover{ background:var(--accent) }

/* 极窄屏保险：再压一丝标题字号 */
@media (max-width: 400px){
  .hero-title{ font-size: clamp(1.25rem, 6.2vw, 2rem); }
}

/* ==================== 通用区块 ==================== */
section{ padding:80px 0; border-top:1px solid var(--border) }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
@media (max-width: 860px){ .grid-3,.grid-2{ grid-template-columns:1fr } }

.card{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px }
.media-cover{ aspect-ratio:16/10; background:#222 center/cover no-repeat; border-radius:12px; border:1px solid var(--border) }

/* ==================== 菜单/价格行 ==================== */
.menu-item{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:10px; padding:10px 0; border-bottom:1px dashed #3a3a3a;
  flex-wrap:wrap;
}
.menu-item h4{
  margin:0;
  flex:1 1 auto;
  min-width:0;
  display:inline-flex; gap:6px; flex-wrap:wrap;
}
.menu-item .price{
  color:var(--gold);
  white-space:nowrap;
  margin-left:10px;
  flex:0 0 auto;
}

/* ==================== Specials：整屏横滑 + 文字覆盖 ==================== */
#specials{
  position: relative;
  padding: 0;
  border-top: 1px solid var(--border);
  height: var(--banner-h);
  overflow: hidden;
}

#specials .specials-overlay{
  position: absolute;
  inset: 0;
  z-index: 3;                 /* 文字层在最上，避免被箭头遮挡 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.10) 100%);
  pointer-events: none;        /* 点击穿透到下面（箭头仍可点） */
}
#specials .specials-overlay h2,
#specials .specials-overlay .kicker{
  text-shadow: 0 0 6px rgba(0,0,0,0.8),
               0 0 12px rgba(0,0,0,0.6),
               0 0 20px rgba(0,0,0,0.4);
}
#specials .kicker{ color: var(--gold); margin-bottom: 6px; font-size: 24px;}
#specials .special-title{ font-size: clamp(28px, 4vw, 44px); margin: 0; }

#specials .specials-banner{
  position: absolute;
  inset: 0;
  z-index: 1;                 /* 图片层在最底 */
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  touch-action: pan-x;
}
#specials .panel{
  flex: 0 0 100%;             /* 手机：每屏 1 张 */
  height: 100%;
  scroll-snap-align: start;
  border: 0;
}
#specials .panel img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
#specials .specials-banner::-webkit-scrollbar{ display: none; }

/* ===== 箭头（在 overlay 下方，可点不挡字；支持视觉中心微调） ===== */
.arrow {
  display: block;
  position: absolute;
  top: var(--arrow-y);
  transform: translateY(-50%);
  z-index: 2;                              /* 介于图片与文字层之间 */
  font-size: 2.5rem;
  color: white;
  background: rgba(0,0,0,0.35);
  border: none;
  border-radius: 50%;
  width: 44px; height: 44px; line-height: 44px;
  text-align: center;
  cursor: pointer; user-select: none;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
  backdrop-filter: blur(2px) saturate(120%);
}
.arrow-left { left: var(--arrow-gutter); }
.arrow-right { right: var(--arrow-gutter); }
.arrow:hover { background: rgba(0,0,0,0.55); }

/* 平板（641–1024px）：隐藏箭头（保留你原逻辑） */
@media (min-width: 641px) and (max-width: 1024px){
  .arrow{ display: none !important; }
}

/* 电脑版（≥1025px）：每屏显示 3 张，分隔线保留 */
@media (min-width: 1025px){
  #specials .panel{ flex-basis: 33.3333%; }
  #specials .panel + .panel{ border-left: 1px solid var(--border); }
}

/* 小屏横幅高度与箭头位置微调 */
@media (max-width: 640px){
  :root{ --banner-h: 44vh; }
  #specials{ --arrow-y: 54%; }  /* 视觉中心略下移，更贴合短屏观感 */
}

/* ==================== 联系/地图 ==================== */
.info{ display:grid; grid-template-columns:1.2fr .8fr; gap:22px }
@media (max-width: 860px){ .info{ grid-template-columns:1fr } }
.map{ border-radius:12px; overflow:hidden; border:1px solid var(--border) }

/* ==================== 页脚 ==================== */
.foot{ padding:30px 0; color:#aaa; background:#0a0a0a; border-top:1px solid var(--border) }
.foot .inner{ display:flex; flex-wrap:wrap; gap:18px; align-items:center; justify-content:space-between }

/* ==================== 桌面/手机补充 ==================== */
@media (min-width:1024px){ .hero-title{ max-width:none } }

@media (max-width:640px){
  .hero-title{ display:inline-flex; flex-wrap:wrap; gap:0 .25ch; justify-content:center; }
  .hero-title .nowrap{ flex-basis:100%; }
}