/* ═══════════════════════════════════════════════════════════
   layout.css —— 展厅骨架 / 顶栏 / 底栏 / 抽屉 / 场景
   ═══════════════════════════════════════════════════════════ */

#app{ position:relative; z-index:1; height:100%; }

/* ══════ 顶栏 ══════ */
#topbar{
  position:fixed; top:0; left:0; right:0; height:var(--h-top); z-index:50;
  display:flex; align-items:center; gap:22px; padding:0 20px;
  background:linear-gradient(180deg, rgba(9,16,29,.97), rgba(9,16,29,.80));
  border-bottom:1px solid rgba(201,162,39,.30);
  backdrop-filter:blur(10px);
}
.tb-brand{ display:flex; align-items:center; gap:11px; flex:none; }
.tb-seal{
  display:grid; place-items:center; width:30px; height:30px;
  font-family:var(--f-serif); font-size:12px; line-height:1; letter-spacing:0;
  color:#fff; background:var(--c-red); border-radius:4px;
  box-shadow:0 0 12px rgba(184,34,28,.6);
}
.tb-title{
  font-family:var(--f-serif); font-size:17px; letter-spacing:.16em;
  color:var(--c-paper); white-space:nowrap;
}

.tb-progress{ flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.tb-dots{ display:flex; gap:6px; align-items:center; justify-content:center; flex-wrap:wrap; }
.tb-dot{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:rgba(255,255,255,.18); border:1px solid transparent;
  cursor:pointer; transition:all .25s var(--ease); padding:0;
}
.tb-dot:hover{ background:var(--c-gold-light); transform:scale(1.35); }
.tb-dot.on{ background:var(--c-gold); box-shadow:0 0 9px var(--c-gold); transform:scale(1.25); }
.tb-track{ height:2px; background:rgba(255,255,255,.10); border-radius:2px; overflow:hidden; }
.tb-fill{
  height:100%; width:0;
  background:linear-gradient(90deg,var(--c-red),var(--c-gold));
  box-shadow:0 0 10px rgba(201,162,39,.7);
  transition:width .5s var(--ease-out);
}

.tb-actions{ display:flex; gap:8px; flex:none; }
.btn-ghost{
  display:flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:var(--r-sm);
  border:1px solid rgba(201,162,39,.34); color:var(--c-gold-pale);
  font-size:13px; letter-spacing:.06em;
  transition:all .22s var(--ease);
}
.btn-ghost:hover{ background:rgba(201,162,39,.14); border-color:var(--c-gold); color:#fff; }
.btn-ghost .lbl{ font-size:12px; }

/* ══════ 主舞台 ══════ */
#stage{
  position:fixed; z-index:10;
  top:var(--h-top); left:0; right:0; bottom:var(--h-bottom);
  outline:none;
}
.scene{
  position:absolute; inset:0; overflow-y:auto; overflow-x:hidden;
  overscroll-behavior:contain;
  padding:34px 30px 56px;
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), transform .6s var(--ease-out), visibility .5s;
  transform:translateY(16px);
}
.scene.on{ opacity:1; visibility:visible; transform:none; }
.scene.leaving{ opacity:0; transform:translateY(-14px); }
/* 演讲模式：更快的转场 */
body.speeding .scene{ transition-duration:.28s,.28s,.28s; transform:none; }

.wrap{ max-width:1240px; margin:0 auto; }
.wrap--narrow{ max-width:880px; }

/* ══════ 底栏 ══════ */
#bottombar{
  position:fixed; bottom:0; left:0; right:0; height:var(--h-bottom); z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:0 20px;
  background:linear-gradient(0deg, rgba(9,16,29,.97), rgba(9,16,29,.78));
  border-top:1px solid rgba(201,162,39,.30);
  backdrop-filter:blur(10px);
}
.nav-btn{
  display:flex; align-items:center; gap:9px;
  padding:11px 20px; border-radius:var(--r-sm);
  border:1px solid rgba(201,162,39,.34);
  color:var(--c-gold-pale); font-size:14px; letter-spacing:.08em;
  transition:all .22s var(--ease);
}
.nav-btn:hover:not(:disabled){ background:rgba(201,162,39,.14); border-color:var(--c-gold); color:#fff; transform:translateY(-1px); }
.nav-btn:disabled{ opacity:.3; cursor:not-allowed; }
.nav-btn .arrow{ font-family:var(--f-num); }

.nav-btn--speech{
  background:linear-gradient(135deg,var(--c-red),var(--c-red-deep));
  border-color:rgba(232,199,102,.6); color:#fff; font-weight:600;
  padding:12px 26px; box-shadow:0 4px 18px rgba(184,34,28,.42);
}
.nav-btn--speech:hover{ box-shadow:0 6px 26px rgba(184,34,28,.62); border-color:var(--c-gold-light); }
.nav-btn--speech .rec{
  width:9px; height:9px; border-radius:50%; background:var(--c-gold-light);
  box-shadow:0 0 0 0 rgba(232,199,102,.8); animation:recPulse 1.8s infinite;
}

/* ══════ 索引抽屉 ══════ */
#drawer{
  position:fixed; z-index:70; top:0; bottom:0; left:0; width:var(--w-drawer);
  background:linear-gradient(180deg,#0E1828,#0A1220);
  border-right:1px solid rgba(201,162,39,.36);
  box-shadow:var(--sh-2);
  transform:translateX(-102%); transition:transform .38s var(--ease-out);
  display:flex; flex-direction:column;
}
#drawer.open{ transform:none; }
.drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 20px 14px; border-bottom:1px solid rgba(201,162,39,.24);
}
.drawer-head h3{ margin:0; font-family:var(--f-serif); font-size:17px; letter-spacing:.2em; color:var(--c-gold-pale); }
.btn-close{
  width:32px; height:32px; border-radius:50%; font-size:22px; line-height:1;
  color:var(--c-text-mute); transition:all .2s var(--ease);
}
.btn-close:hover{ background:rgba(184,34,28,.28); color:#fff; }

.drawer-list{
  flex:1; overflow-y:auto; list-style:none; margin:0; padding:12px 0;
  counter-reset:z;
}
.dl-item{
  display:flex; gap:12px; align-items:flex-start;
  padding:12px 20px; cursor:pointer;
  border-left:3px solid transparent;
  transition:all .2s var(--ease);
}
.dl-item:hover{ background:rgba(201,162,39,.09); border-left-color:var(--c-gold); }
.dl-item.on{ background:rgba(184,34,28,.20); border-left-color:var(--c-red-bright); }
.dl-num{
  font-family:var(--f-num); font-size:13px; color:var(--c-gold); flex:none;
  min-width:20px; padding-top:3px;
}
.dl-txt{ min-width:0; }
.dl-name{ font-family:var(--f-serif); font-size:15px; color:var(--c-paper); letter-spacing:.08em; }
.dl-sub{ font-size:12px; color:var(--c-text-mute); line-height:1.6; }

.drawer-foot{ padding:16px 20px 20px; border-top:1px solid rgba(201,162,39,.24); }
.kbd-tip{ margin:0 0 8px; font-size:12px; letter-spacing:.24em; color:var(--c-gold); }
.drawer-foot ul{ list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:12px; color:var(--c-text-mute); }

/* ══════ 展品解说抽屉 ══════ */
#panel{
  position:fixed; z-index:70; top:0; bottom:0; right:0; width:var(--w-panel); max-width:94vw;
  background:linear-gradient(180deg,#101B2E,#0A1220);
  border-left:1px solid rgba(201,162,39,.36);
  box-shadow:var(--sh-2);
  transform:translateX(102%); transition:transform .4s var(--ease-out);
}
#panel.open{ transform:none; }
#panel .btn-close{ position:absolute; top:14px; right:16px; z-index:2; }
.panel-body{ height:100%; overflow-y:auto; padding:26px 26px 40px; }

/* ══════ 场景：封面 ══════ */
.scene--cover{
  display:grid; place-items:center; text-align:center;
  padding:20px; overflow:hidden;
}
.cover-inner{ max-width:900px; position:relative; z-index:2; }
.cover-theme{
  display:inline-block; padding:6px 20px; margin-bottom:26px;
  border:1px solid rgba(201,162,39,.5); border-radius:999px;
  font-size:12px; letter-spacing:.34em; text-indent:.34em; color:var(--c-gold-light);
  background:rgba(201,162,39,.07);
}
.cover-title{
  font-family:var(--f-serif); font-weight:700;
  font-size:clamp(38px,7.4vw,86px); line-height:1.14; letter-spacing:.06em;
  margin:0 0 6px;
  background:linear-gradient(176deg,#FFF6DC 6%,var(--c-gold-light) 42%,var(--c-gold) 66%,#9A7A18 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 46px rgba(201,162,39,.22);
}
.cover-sub{
  font-family:var(--f-serif); font-size:clamp(14px,2.1vw,22px); letter-spacing:.22em;
  color:var(--c-paper); opacity:.9; margin:0 0 4px;
}
.cover-slogan{
  font-size:clamp(12px,1.5vw,15px); letter-spacing:.12em; color:var(--c-text-mute); margin:0 0 4px;
}
.cover-keys{ display:flex; gap:min(3.2vw,26px); justify-content:center; flex-wrap:wrap; margin:30px 0 6px; }
.cover-foot{
  margin-top:30px; padding-top:20px;
  border-top:1px solid rgba(201,162,39,.24);
  display:flex; flex-direction:column; gap:5px; align-items:center;
}
.cover-foot .who{ font-family:var(--f-serif); font-size:clamp(14px,1.7vw,18px); letter-spacing:.2em; color:var(--c-gold-pale); }
.cover-foot .when{ font-family:var(--f-num); font-size:12px; letter-spacing:.24em; color:var(--c-text-mute); }
.btn-enter{
  margin-top:26px; padding:15px 46px; border-radius:2px;
  font-family:var(--f-serif); font-size:17px; letter-spacing:.34em; text-indent:.34em;
  color:#fff; background:linear-gradient(135deg,var(--c-red),var(--c-red-deep));
  border:1px solid rgba(232,199,102,.66); box-shadow:0 8px 30px rgba(184,34,28,.5);
  transition:all .3s var(--ease);
}
.btn-enter:hover{ transform:translateY(-2px); box-shadow:0 12px 40px rgba(184,34,28,.72); border-color:var(--c-gold-light); }

/* ══════ 场景：总览 / 展区 / 尾厅 通用头部 ══════ */
.scene-head{ margin-bottom:26px; }
.scene-head .eyebrow{ margin-bottom:9px; }
.scene-title{
  font-family:var(--f-serif); font-size:clamp(26px,3.6vw,44px); line-height:1.24;
  letter-spacing:.06em; margin:0 0 10px; color:var(--c-paper);
}
.scene-lede{
  font-size:clamp(14px,1.5vw,17px); color:var(--c-text-mute); margin:0;
  max-width:78ch; line-height:1.95;
}
.scene--zone{ padding-top:30px; }

/* ══════ 响应式 ══════ */
@media (max-width:1080px){
  :root{ --w-panel:460px; }
  .tb-title{ font-size:15px; }
}
@media (max-width:820px){
  :root{ --h-top:54px; --h-bottom:60px; }
  #topbar{ gap:12px; padding:0 12px; }
  .tb-title{ display:none; }
  .btn-ghost .lbl{ display:none; }
  .scene{ padding:22px 16px 44px; }
  .nav-btn{ padding:10px 14px; font-size:13px; }
  .nav-btn--speech{ padding:11px 16px; font-size:13px; }
  #drawer{ width:86vw; }
  #panel{ width:100vw; }
  .tb-dots{ display:none; }
}