/* ============================================================
   宗祠 · Ancestral Hall Atlas
   ============================================================ */

:root{
  --ink:#0e0c0a;
  --ink-2:#17130f;
  --ink-3:#231c16;
  --paper:#efe6d3;
  --paper-2:#e3d8c2;
  --paper-dim:#b8ab95;
  --cinnabar:#a5342b;
  --cinnabar-l:#c8503f;
  --gold:#c9a45c;
  --gold-dim:#8f7742;
  --jade:#4a6b5c;
  --line:rgba(201,164,92,.22);
  --serif:"Songti SC","STSong","Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--serif);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
button{font-family:inherit;color:inherit;background:none;border:0;cursor:pointer}
input{font-family:inherit}
::selection{background:rgba(165,52,43,.55);color:#fff}

/* scrollbars */
.gate-scroll::-webkit-scrollbar,.hall-list::-webkit-scrollbar,.panel-scroll::-webkit-scrollbar{width:6px}
.gate-scroll::-webkit-scrollbar-thumb,.hall-list::-webkit-scrollbar-thumb,.panel-scroll::-webkit-scrollbar-thumb{background:rgba(201,164,92,.28);border-radius:6px}
.gate-scroll::-webkit-scrollbar-track,.hall-list::-webkit-scrollbar-track,.panel-scroll::-webkit-scrollbar-track{background:transparent}

/* ============================================================
   GATE · 百家姓
   ============================================================ */
.gate{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:clamp(16px,4vh,48px) 20px;
  transition:opacity .6s ease,visibility .6s;
  overflow:auto;
}
.gate.gone{opacity:0;visibility:hidden;pointer-events:none}

.gate-bg{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(ellipse 90% 60% at 50% 0%,#2a2118 0%,#150f0b 45%,#0b0908 100%);}
.gate-orb{
  position:absolute;left:50%;top:-28vmin;transform:translateX(-50%);
  width:96vmin;height:96vmin;border-radius:50%;
  background:radial-gradient(circle at 50% 45%,rgba(201,164,92,.20),rgba(165,52,43,.10) 42%,transparent 66%);
  filter:blur(8px);
}
.gate-grid-lines{
  position:absolute;inset:0;opacity:.16;
  background-image:
    repeating-linear-gradient(90deg,rgba(201,164,92,.35) 0 1px,transparent 1px 96px),
    repeating-linear-gradient(0deg,rgba(201,164,92,.22) 0 1px,transparent 1px 96px);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 10%,transparent 78%);
}

.gate-inner{position:relative;width:100%;max-width:1040px;z-index:1}

.gate-head{text-align:center;margin-bottom:clamp(18px,3vh,34px)}
.gate-kicker{
  margin:0 0 10px;font-family:var(--sans);font-size:10px;letter-spacing:.42em;
  color:var(--gold-dim);text-transform:uppercase;
}
.gate-title{
  margin:0;font-size:clamp(46px,7.2vh,78px);letter-spacing:.28em;text-indent:.28em;
  font-weight:400;color:#f3ead7;
  text-shadow:0 0 40px rgba(201,164,92,.28),0 2px 0 rgba(0,0,0,.4);
}
.gate-sub{
  margin:14px 0 0;font-size:clamp(12px,1.8vh,15px);letter-spacing:.18em;
  color:rgba(239,230,211,.52);
}

.gate-panel{
  background:linear-gradient(180deg,rgba(28,22,17,.92),rgba(17,13,10,.94));
  border:1px solid var(--line);
  box-shadow:0 40px 100px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(8px);
  padding:clamp(14px,2.2vh,22px);
  position:relative;
}
.gate-panel::before,.gate-panel::after{
  content:"";position:absolute;width:14px;height:14px;border:1px solid rgba(201,164,92,.5);
}
.gate-panel::before{left:-1px;top:-1px;border-right:0;border-bottom:0}
.gate-panel::after{right:-1px;bottom:-1px;border-left:0;border-top:0}

.gate-search{
  display:flex;align-items:center;gap:10px;
  border:1px solid rgba(201,164,92,.22);
  background:rgba(0,0,0,.28);
  padding:0 14px;height:46px;margin-bottom:14px;
  color:rgba(239,230,211,.5);
}
.gate-search:focus-within{border-color:rgba(201,164,92,.6);box-shadow:0 0 0 3px rgba(201,164,92,.06)}
.gate-search input{
  flex:1;background:none;border:0;outline:0;color:var(--paper);
  font-size:15px;letter-spacing:.1em;
}
.gate-search input::placeholder{color:rgba(239,230,211,.32);letter-spacing:.06em;font-size:13.5px}
.gate-search button{font-size:12px;color:var(--gold);letter-spacing:.1em}

.gate-tools{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-2px 0 10px;font-family:var(--sans);font-size:10.5px;
  color:rgba(239,230,211,.36);letter-spacing:.06em;
}
.gate-tools button{
  display:flex;align-items:center;gap:6px;padding:4px 10px;
  border:1px solid rgba(201,164,92,.22);color:rgba(239,230,211,.55);
  font-size:10.5px;letter-spacing:.08em;transition:.2s;
}
.gate-tools button i{
  width:7px;height:7px;border-radius:50%;border:1px solid rgba(201,164,92,.6);
  display:block;transition:.2s;
}
.gate-tools button:hover{border-color:rgba(201,164,92,.5);color:var(--gold)}
.gate-tools button[aria-pressed="true"]{background:rgba(201,164,92,.14);border-color:rgba(201,164,92,.6);color:var(--gold)}
.gate-tools button[aria-pressed="true"] i{background:var(--gold);border-color:var(--gold)}
.gate-scroll{
  max-height:min(46vh,420px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:4px;
}
.surname-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));
  gap:0;background:none;
  border:1px solid rgba(201,164,92,.12);
}
.surname-cell{
  position:relative;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;
  background:#14100c;
  border-right:1px solid rgba(201,164,92,.10);
  border-bottom:1px solid rgba(201,164,92,.10);
  font-size:clamp(17px,2.4vh,21px);
  color:rgba(239,230,211,.86);
  transition:background .18s,color .18s,transform .18s;
  letter-spacing:0;
}
.surname-cell:hover{background:var(--cinnabar);color:#fff;z-index:2}
.surname-cell:active{transform:scale(.94)}
.surname-cell.has-hall::after{
  content:"";position:absolute;bottom:6px;left:50%;transform:translateX(-50%);
  width:3px;height:3px;border-radius:50%;background:var(--gold);
}
.surname-cell.has-hall:hover::after{background:#fff}
.surname-cell.compound{font-size:13px;letter-spacing:-.02em}
.surname-cell.dim{opacity:.28}
.gate-none{text-align:center;padding:26px 10px;color:var(--paper-dim)}
.gate-none p{margin:0 0 12px;font-size:14px;letter-spacing:.08em}
.gate-none button{
  border:1px solid var(--line);padding:9px 18px;font-size:13px;letter-spacing:.1em;
  color:var(--gold);transition:.2s;
}
.gate-none button:hover{background:rgba(201,164,92,.1)}

.gate-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:14px;padding-top:12px;border-top:1px solid rgba(201,164,92,.12);
  font-family:var(--sans);font-size:11px;color:rgba(239,230,211,.38);letter-spacing:.06em;
}
.gate-stats b{color:var(--gold);font-weight:500}
.gate-links{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end}
.gate-hint{color:rgba(201,164,92,.72);font-size:11px;letter-spacing:.06em;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.gate-hint:hover{color:var(--gold)}
.gate-tip{
  margin-top:14px;padding:12px 16px;border-left:2px solid var(--cinnabar);
  background:rgba(165,52,43,.08);font-size:13px;line-height:1.8;color:rgba(239,230,211,.72);
}
.gate-tip p{margin:0}

/* ============================================================
   TOPBAR
   ============================================================ */
.app{height:100%;display:flex;flex-direction:column;background:var(--ink)}
.topbar{
  height:64px;flex:0 0 64px;display:flex;align-items:center;gap:20px;
  padding:0 18px;border-bottom:1px solid rgba(201,164,92,.14);
  background:linear-gradient(180deg,#14100c,#0f0c09);
  position:relative;z-index:20;
}
.brand{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.brand-seal{
  width:34px;height:34px;display:grid;place-items:center;
  background:var(--cinnabar);color:#f7efe0;font-size:19px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-text b{font-size:15px;letter-spacing:.34em;font-weight:400}
.brand-text i{font-style:normal;font-size:9.5px;letter-spacing:.16em;color:rgba(239,230,211,.34);font-family:var(--sans)}

.surname-switch{
  display:flex;align-items:center;gap:8px;padding:7px 14px;
  border:1px solid rgba(201,164,92,.24);font-size:14px;letter-spacing:.1em;
  color:rgba(239,230,211,.9);transition:.2s;background:rgba(201,164,92,.04);
}
.surname-switch:hover{border-color:rgba(201,164,92,.55);background:rgba(201,164,92,.1)}
.surname-switch #curSurname{font-size:17px;color:#fff}
.surname-switch em{font-style:normal;font-family:var(--sans);font-size:10px;color:var(--gold-dim);letter-spacing:.14em}
.surname-switch svg{opacity:.5;margin-left:2px}

.topnav{margin-left:auto;display:flex;gap:6px}
.topnav button{
  padding:8px 12px;font-size:12.5px;letter-spacing:.12em;color:rgba(239,230,211,.55);
  transition:.2s;font-family:var(--sans);
}
.topnav button:hover{color:var(--gold)}

/* ============================================================
   LAYOUT
   ============================================================ */
.layout{flex:1;display:flex;min-height:0}
.sidebar{
  width:404px;flex:0 0 404px;display:flex;flex-direction:column;min-height:0;
  border-right:1px solid rgba(201,164,92,.14);background:#100d0a;
}
.sidebar-head{padding:20px 22px 14px;border-bottom:1px solid rgba(201,164,92,.1)}
.sh-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sidebar-head h2{margin:0;font-size:22px;font-weight:400;letter-spacing:.16em}
.add-hall{
  display:flex;align-items:center;gap:5px;padding:4px 9px;white-space:nowrap;
  border:1px solid rgba(201,164,92,.28);color:rgba(201,164,92,.8);
  font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;transition:.2s;
}
.add-hall:hover{border-color:rgba(201,164,92,.6);background:rgba(201,164,92,.1);color:var(--gold)}
.sidebar-head p{margin:6px 0 0;font-family:var(--sans);font-size:11.5px;letter-spacing:.06em;color:rgba(239,230,211,.38)}

.hall-list{flex:1;overflow-y:auto;padding:12px 14px 20px;display:flex;flex-direction:column;gap:10px}
.hall-card{
  position:relative;display:flex;gap:13px;padding:14px;
  border:1px solid rgba(201,164,92,.13);background:rgba(255,255,255,.015);
  cursor:pointer;transition:border-color .22s,background .22s,transform .22s;
}
.hall-card:hover{border-color:rgba(201,164,92,.42);background:rgba(201,164,92,.055);transform:translateY(-1px)}
.hall-card .c-seal{
  flex:0 0 auto;width:38px;height:38px;display:grid;place-items:center;
  background:rgba(165,52,43,.9);color:#f7efe0;font-size:19px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.hall-card .c-body{min-width:0;flex:1}
.hall-card h3{
  margin:0 0 5px;font-size:16.5px;font-weight:400;letter-spacing:.05em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hall-card .c-meta{font-family:var(--sans);font-size:11px;color:rgba(239,230,211,.42);letter-spacing:.04em;margin:0 0 8px}
.hall-card .c-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.tag{
  font-family:var(--sans);font-size:9.5px;letter-spacing:.08em;
  padding:2px 7px;border:1px solid rgba(201,164,92,.24);color:rgba(201,164,92,.82);
}
.tag.solid{background:rgba(201,164,92,.14)}
.hall-card .c-intro{
  margin:0;font-size:12.5px;line-height:1.75;color:rgba(239,230,211,.52);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.hall-card .c-go{
  position:absolute;right:12px;bottom:10px;font-family:var(--sans);font-size:10.5px;
  color:rgba(201,164,92,.7);letter-spacing:.1em;opacity:0;transform:translateX(-4px);transition:.22s;
}
.hall-card:hover .c-go{opacity:1;transform:none}

.empty-state{padding:40px 24px;text-align:center}
.empty-state .es-mark{
  width:56px;height:56px;margin:0 auto 18px;display:grid;place-items:center;
  border:1px solid rgba(201,164,92,.3);color:var(--gold);font-size:26px;
}
.empty-state h3{margin:0 0 10px;font-size:17px;font-weight:400;letter-spacing:.1em}
.empty-state p{margin:0 0 18px;font-size:13px;line-height:1.9;color:rgba(239,230,211,.45)}
.empty-state button{
  border:1px solid rgba(165,52,43,.7);background:rgba(165,52,43,.16);
  padding:10px 20px;font-size:13px;letter-spacing:.12em;color:#f0dfc9;transition:.2s;
}
.empty-state button:hover{background:rgba(165,52,43,.32)}
.suggest{margin-top:26px;padding-top:18px;border-top:1px solid rgba(201,164,92,.14)}
.suggest h4{
  margin:0 0 12px;font-family:var(--sans);font-size:10px;font-weight:400;
  letter-spacing:.18em;color:rgba(239,230,211,.32);
}
.suggest-item{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 8px;border:1px solid transparent;transition:.2s;
}
.suggest-item:hover{border-color:rgba(201,164,92,.28);background:rgba(201,164,92,.05)}
.suggest-item .s-seal{
  width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(165,52,43,.85);color:#f7efe0;font-size:14px;
}
.suggest-item .s-txt{min-width:0;display:flex;flex-direction:column;gap:2px}
.suggest-item b{font-weight:400;font-size:13.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.suggest-item span{font-family:var(--sans);font-size:10px;color:rgba(239,230,211,.35);letter-spacing:.04em}

.sidebar-foot{
  padding:11px 20px;border-top:1px solid rgba(201,164,92,.1);
  font-family:var(--sans);font-size:10px;color:rgba(239,230,211,.3);letter-spacing:.04em;
  display:flex;align-items:center;gap:7px;
}
.sidebar-foot .dot{width:4px;height:4px;border-radius:50%;background:var(--gold-dim)}

/* ============================================================
   MAP
   ============================================================ */
.mapwrap{flex:1;position:relative;min-width:0;background:#0d0b09;isolation:isolate;z-index:1}
.map{position:absolute;inset:0;background:#12100d}
.map-fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:
    radial-gradient(circle at 50% 40%,rgba(201,164,92,.08),transparent 60%),
    repeating-linear-gradient(45deg,rgba(201,164,92,.05) 0 1px,transparent 1px 14px),
    #12100d;text-align:center;padding:30px;
}
.map-fallback b{font-size:17px;letter-spacing:.16em;font-weight:400;color:var(--gold)}
.map-fallback p{margin:0;font-size:12.5px;line-height:1.8;color:rgba(239,230,211,.45);max-width:320px}

.leaflet-container{background:#12100d!important;font-family:var(--serif)!important;outline:none}
.leaflet-tile-pane{filter:grayscale(.62) sepia(.38) contrast(.92) brightness(.96)}
.leaflet-control-attribution{
  background:rgba(10,8,6,.7)!important;color:rgba(239,230,211,.35)!important;
  font-size:9px!important;font-family:var(--sans)!important;
}
.leaflet-control-attribution a{color:rgba(201,164,92,.6)!important}
.leaflet-control-zoom{border:1px solid rgba(201,164,92,.3)!important;box-shadow:none!important}
.leaflet-control-zoom a{
  background:rgba(16,13,10,.9)!important;color:var(--gold)!important;
  border-bottom-color:rgba(201,164,92,.2)!important;width:30px!important;height:30px!important;
  line-height:28px!important;font-size:16px!important;
}
.leaflet-control-zoom a:hover{background:rgba(201,164,92,.15)!important}

.cluster-seal{
  width:100%;height:100%;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 38% 30%,#c9523f,#8d2a21 58%,#661a13);
  border:1.5px solid rgba(247,232,208,.72);
  box-shadow:0 6px 18px rgba(0,0,0,.55),0 0 0 5px rgba(165,52,43,.14);
  color:#fff3e2;font-family:var(--serif);font-size:15px;letter-spacing:0;
}
.cluster-seal em{font-style:normal;font-size:9px;opacity:.7;margin-left:1px}
.hall-pin{position:relative;width:34px;height:34px}
.hall-pin .pin-body{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,#bf4437,#8f2a22);
  color:#fff3e2;font-size:16px;font-family:var(--serif);
  border:1.5px solid rgba(247,232,208,.8);
  box-shadow:0 4px 14px rgba(0,0,0,.6),0 0 0 4px rgba(165,52,43,.16);
  transition:transform .2s;
}
.hall-pin:hover .pin-body{transform:scale(1.14)}
.hall-pin::after{
  content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:6px solid rgba(247,232,208,.8);
}
.hall-pin.active .pin-body{background:linear-gradient(180deg,#e0b872,#b98a3c);color:#241a0c;transform:scale(1.16)}

.leaflet-popup-content-wrapper{
  background:#16120e!important;color:var(--paper)!important;
  border:1px solid rgba(201,164,92,.35);border-radius:0!important;box-shadow:0 16px 40px rgba(0,0,0,.6)!important;
}
.leaflet-popup-content{margin:12px 14px!important;font-family:var(--serif)!important;font-size:13px!important;line-height:1.7!important}
.leaflet-popup-tip{background:#16120e!important;border:1px solid rgba(201,164,92,.35)}
.leaflet-popup-content b{display:block;font-size:15px;letter-spacing:.06em;margin-bottom:2px;font-weight:400}
.leaflet-popup-content .pp-meta{font-family:var(--sans);font-size:10.5px;color:rgba(239,230,211,.45);margin-bottom:8px}
.leaflet-popup-content button{
  border:1px solid rgba(201,164,92,.4);padding:5px 11px;font-size:11.5px;letter-spacing:.1em;
  color:var(--gold);margin-top:6px;transition:.2s;
}
.leaflet-popup-content button:hover{background:rgba(201,164,92,.14)}
.leaflet-popup-close-button{color:rgba(239,230,211,.5)!important;font-size:18px!important;padding:6px 8px 0 0!important}

.map-empty{
  position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:450;
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:18px 26px;background:rgba(12,10,8,.86);border:1px solid rgba(201,164,92,.26);
  backdrop-filter:blur(4px);
}
.map-empty b{font-size:15px;font-weight:400;letter-spacing:.14em;color:var(--gold)}
.map-empty span{font-family:var(--sans);font-size:10.5px;color:rgba(239,230,211,.42);letter-spacing:.04em}
.map-tools{position:absolute;right:16px;top:16px;z-index:500}
.map-tools button{
  padding:8px 13px;font-family:var(--sans);font-size:11px;letter-spacing:.1em;
  background:rgba(16,13,10,.9);border:1px solid rgba(201,164,92,.3);color:rgba(239,230,211,.75);
  transition:.2s;
}
.map-tools button:hover{border-color:rgba(201,164,92,.6);color:var(--gold)}
.map-legend{
  position:absolute;left:14px;bottom:12px;z-index:400;
  font-family:var(--sans);font-size:9.5px;color:rgba(239,230,211,.28);letter-spacing:.05em;
  background:rgba(10,8,6,.5);padding:3px 8px;
}

/* ============================================================
   DETAIL · 3D
   ============================================================ */
.detail{
  position:fixed;inset:0;z-index:300;display:flex;
  background:#070605;
  animation:fadeIn .45s ease both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.viewer{
  position:relative;flex:1;min-width:0;overflow:hidden;
  background:radial-gradient(ellipse at 50% 46%,#1c1510 0%,#0a0807 72%);
  cursor:grab;touch-action:none;
}
.viewer.grabbing{cursor:grabbing}

.stage{
  position:absolute;inset:0;
  perspective:1000px;
  perspective-origin:50% 50%;
  overflow:hidden;
}
.room{
  position:absolute;left:50%;top:50%;width:0;height:0;
  transform-style:preserve-3d;
  will-change:transform;
}
.room.anim{transition:transform .62s cubic-bezier(.22,.61,.36,1)}
.room.anim .billboard{transition:transform .62s cubic-bezier(.22,.61,.36,1)}
.face{
  position:absolute;transform-style:preserve-3d;
  backface-visibility:hidden;
  left:0;top:0;
  overflow:hidden;
}
.face > svg{display:block;width:100%;height:100%}

/* geometry — set inline from JS */

/* ---- 3D 供桌 ---- */
.table3d{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.tf{position:absolute;left:0;top:0;transform-style:preserve-3d;backface-visibility:hidden}
.tf-top{
  width:760px;height:300px;margin-left:-380px;margin-top:-150px;
  background:
    repeating-linear-gradient(92deg,rgba(0,0,0,.16) 0 2px,transparent 2px 9px),
    linear-gradient(180deg,#6b3524,#48211a 55%,#38170f);
  box-shadow:inset 0 0 60px rgba(0,0,0,.45),inset 0 2px 0 rgba(255,220,170,.12);
}
.tf-front{
  width:760px;height:190px;margin-left:-380px;margin-top:-95px;
  background:linear-gradient(180deg,#7c2418 0%,#5d1a11 46%,#3d100b 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.5),inset 0 -14px 30px rgba(0,0,0,.5);
}
.table-cloth{
  position:absolute;inset:0;display:grid;place-items:center;
  background-image:
    radial-gradient(circle at 50% 46%,rgba(201,164,92,.18),transparent 58%),
    repeating-linear-gradient(45deg,rgba(201,164,92,.045) 0 8px,transparent 8px 16px),
    repeating-linear-gradient(-45deg,rgba(201,164,92,.045) 0 8px,transparent 8px 16px);
}
.table-cloth::before{
  content:"";position:absolute;left:0;right:0;top:0;height:16px;
  background:linear-gradient(180deg,rgba(201,164,92,.4),transparent);
  border-bottom:1px solid rgba(201,164,92,.35);
}
.table-cloth span{
  font-size:76px;color:rgba(201,164,92,.30);letter-spacing:.1em;
  text-shadow:0 0 24px rgba(201,164,92,.18);
}
.tf-left{
  width:300px;height:190px;margin-left:-150px;margin-top:-95px;
  background:linear-gradient(90deg,#3a110c,#571a10);
  box-shadow:inset 0 0 30px rgba(0,0,0,.5);
}
.tf-right{
  width:300px;height:190px;margin-left:-150px;margin-top:-95px;
  background:linear-gradient(270deg,#3a110c,#571a10);
  box-shadow:inset 0 0 30px rgba(0,0,0,.5);
}

/* ---- billboards ---- */
.billboard{
  position:absolute;left:0;top:0;
  transform-style:preserve-3d;
  will-change:transform;
  pointer-events:none;
}
.billboard svg{display:block;width:100%;height:100%;overflow:visible}

.bb-censer{width:150px;height:110px;margin-left:-75px;margin-top:-110px}
.bb-candle{width:56px;height:158px;margin-left:-28px;margin-top:-158px}
.bb-fruit{width:96px;height:54px;margin-left:-48px;margin-top:-54px}
.bb-cushion{width:300px;height:120px;margin-left:-150px;margin-top:-60px}

.flame{transform-origin:50% 100%;animation:flame 2.6s ease-in-out infinite}
.flame.d2{animation-delay:-.9s}
@keyframes flame{
  0%,100%{transform:scaleY(1) scaleX(1);opacity:.95}
  35%{transform:scaleY(1.14) scaleX(.9);opacity:1}
  70%{transform:scaleY(.92) scaleX(1.06);opacity:.86}
}

.smoke{animation:smoke 7s ease-in-out infinite;opacity:.5}
.smoke.s2{animation-delay:-2.4s}
.smoke.s3{animation-delay:-4.8s}
@keyframes smoke{
  0%{transform:translateY(0) translateX(0) scaleY(1);opacity:0}
  18%{opacity:.55}
  60%{opacity:.32}
  100%{transform:translateY(-150px) translateX(14px) scaleY(1.5);opacity:0}
}

.lantern-glow{animation:glowPulse 5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.42}50%{opacity:.72}}

/* ---- atmosphere ---- */
.vignette{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 72% 72% at 50% 48%,transparent 30%,rgba(0,0,0,.55) 88%,rgba(0,0,0,.82) 100%);
  mix-blend-mode:multiply;
}
.grain{
  position:absolute;inset:0;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;
}

/* ---- hot spots ---- */
.hs{
  position:absolute;z-index:5;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:1px solid rgba(201,164,92,.65);
  background:rgba(10,8,6,.35);backdrop-filter:blur(2px);
  display:grid;place-items:center;cursor:help;pointer-events:auto;
  transition:transform .2s,background .2s;
}
.hs::after{content:"";width:5px;height:5px;border-radius:50%;background:rgba(201,164,92,.95)}
.hs::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1px solid rgba(201,164,92,.28);animation:hsPulse 3.4s ease-out infinite;
}
@keyframes hsPulse{0%{transform:scale(.7);opacity:.9}70%{transform:scale(1.25);opacity:0}100%{opacity:0}}
.hs:hover{background:rgba(201,164,92,.3);transform:scale(1.12)}
.hs span{
  position:absolute;left:50%;top:32px;transform:translateX(-50%);
  white-space:nowrap;font-size:10.5px;letter-spacing:.16em;color:rgba(239,230,211,.8);
  background:rgba(10,8,6,.72);padding:3px 8px;border:1px solid rgba(201,164,92,.22);
  opacity:0;transition:.2s;pointer-events:none;
}
.hs:hover span{opacity:1}

.hotspot-tip{
  position:absolute;z-index:30;max-width:290px;pointer-events:none;
  background:rgba(14,11,9,.95);border:1px solid rgba(201,164,92,.36);
  padding:12px 15px;box-shadow:0 18px 44px rgba(0,0,0,.6);
  animation:tipIn .25s ease both;
}
@keyframes tipIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.hotspot-tip b{display:block;font-size:13px;font-weight:400;letter-spacing:.16em;color:var(--gold);margin-bottom:6px}
.hotspot-tip p{margin:0;font-size:12px;line-height:1.85;color:rgba(239,230,211,.68)}

/* ---- viewer chrome ---- */
.viewer-top{
  position:absolute;left:0;right:0;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  background:linear-gradient(180deg,rgba(6,5,4,.82),rgba(6,5,4,0));
}
.vbtn{
  display:flex;align-items:center;gap:7px;padding:8px 13px;
  border:1px solid rgba(201,164,92,.28);background:rgba(12,10,8,.6);
  font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;color:rgba(239,230,211,.75);
  transition:.2s;backdrop-filter:blur(6px);
}
.vbtn:hover{border-color:rgba(201,164,92,.6);color:var(--gold)}
.viewer-title{display:flex;align-items:center;gap:10px;min-width:0}
.v-seal{
  width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;
  background:rgba(165,52,43,.92);color:#fff1dd;font-size:16px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
}
.viewer-title div{display:flex;flex-direction:column;min-width:0;line-height:1.3}
.viewer-title b{font-size:14.5px;font-weight:400;letter-spacing:.08em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.viewer-title i{font-style:normal;font-family:var(--sans);font-size:10px;color:rgba(239,230,211,.4);letter-spacing:.06em}
#soundBtn{margin-left:auto}
#soundBtn[aria-pressed="true"]{border-color:rgba(201,164,92,.7);color:var(--gold);background:rgba(201,164,92,.12)}
#soundBtn span{font-family:var(--sans);font-size:10.5px}

.viewer-hud{
  position:absolute;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:16px 18px 18px;
  background:linear-gradient(0deg,rgba(6,5,4,.85),rgba(6,5,4,0));
}
.hud-drag{
  display:flex;align-items:center;gap:8px;font-family:var(--sans);
  font-size:10.5px;letter-spacing:.1em;color:rgba(239,230,211,.38);
}
.hud-presets{display:flex;gap:4px;flex-wrap:wrap}
.hud-presets button{
  padding:6px 12px;font-size:12px;letter-spacing:.14em;
  border:1px solid rgba(201,164,92,.2);color:rgba(239,230,211,.55);
  transition:.2s;background:rgba(12,10,8,.4);
}
.hud-presets button:hover{border-color:rgba(201,164,92,.5);color:var(--gold)}
.hud-presets button.on{background:rgba(201,164,92,.9);color:#1a1208;border-color:transparent}

/* ============================================================
   DETAIL PANEL
   ============================================================ */
.detail-panel{
  flex:0 0 396px;width:396px;background:#0f0c09;border-left:1px solid rgba(201,164,92,.16);
  display:flex;flex-direction:column;min-height:0;
}
.panel-scroll{flex:1;overflow-y:auto;padding:26px 26px 34px}
.panel-kicker{
  font-family:var(--sans);font-size:10px;letter-spacing:.2em;color:var(--gold-dim);
  margin-bottom:12px;
}
.panel-title{margin:0 0 8px;font-size:25px;font-weight:400;letter-spacing:.06em;line-height:1.4}
.panel-sub{margin:0 0 20px;font-size:12.5px;line-height:1.8;color:rgba(239,230,211,.45)}

.facts{
  margin:0 0 22px;padding:16px 0;border-top:1px solid rgba(201,164,92,.14);
  border-bottom:1px solid rgba(201,164,92,.14);
  display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;
}
.facts div{display:flex;flex-direction:column;gap:4px}
.facts dt{font-family:var(--sans);font-size:9.5px;letter-spacing:.16em;color:rgba(239,230,211,.32)}
.facts dd{margin:0;font-size:13.5px;letter-spacing:.04em;color:rgba(239,230,211,.85);line-height:1.5}

.panel-sec{margin-bottom:24px}
.panel-sec h3{
  margin:0 0 10px;font-size:12px;font-weight:400;letter-spacing:.24em;color:var(--gold);
  display:flex;align-items:baseline;gap:8px;
}
.panel-sec h3 em{
  font-style:normal;font-family:var(--sans);font-size:9px;letter-spacing:.1em;
  color:rgba(239,230,211,.28);border:1px solid rgba(239,230,211,.16);padding:1px 5px;
}
.panel-sec p{margin:0;font-size:13.5px;line-height:2;color:rgba(239,230,211,.66);text-align:justify}

.couplet{
  display:flex;gap:22px;justify-content:center;
  padding:16px 10px;border:1px solid rgba(201,164,92,.16);
  background:linear-gradient(180deg,rgba(165,52,43,.08),transparent);
}
.couplet span{
  writing-mode:vertical-rl;font-size:15px;letter-spacing:.32em;line-height:1.9;
  color:rgba(239,225,199,.82);
}
.couplet span:first-child{color:rgba(239,225,199,.92)}

.legend-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.legend-list li{
  position:relative;padding-left:16px;font-size:12.5px;line-height:1.9;
  color:rgba(239,230,211,.55);
}
.legend-list li::before{
  content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;
  background:rgba(201,164,92,.7);transform:rotate(45deg);
}
.legend-list b{font-weight:400;color:rgba(239,230,211,.85)}

.panel-note{
  padding:12px 14px;border-left:2px solid rgba(201,164,92,.4);
  background:rgba(201,164,92,.045);
}
.panel-note p{font-size:11.5px;line-height:1.9;color:rgba(239,230,211,.4)}

.panel-actions{display:flex;gap:8px;margin-top:4px}
.act{
  flex:1;padding:11px 8px;font-family:var(--sans);font-size:11.5px;letter-spacing:.1em;
  background:var(--cinnabar);color:#f7ead6;transition:.2s;border:1px solid transparent;
}
.act:hover{background:#bd4437}
.act.ghost{background:transparent;border-color:rgba(201,164,92,.3);color:rgba(239,230,211,.7)}
.act.ghost:hover{background:rgba(201,164,92,.1);color:var(--gold)}

/* ============================================================
   MODAL
   ============================================================ */
.modal{
  position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  background:rgba(5,4,3,.78);backdrop-filter:blur(6px);padding:28px;
  animation:fadeIn .3s ease both;
}
.modal-card{
  position:relative;max-width:640px;width:100%;max-height:82vh;overflow-y:auto;
  background:#12100c;border:1px solid rgba(201,164,92,.24);
  padding:34px 38px 38px;box-shadow:0 40px 100px rgba(0,0,0,.7);
}
.modal-card h2{margin:0 0 10px;font-size:22px;font-weight:400;letter-spacing:.14em}
.modal-card .lead{margin:0 0 22px;font-size:14px;line-height:1.9;color:rgba(239,230,211,.6)}
.modal-card h3{margin:22px 0 8px;font-size:12px;font-weight:400;letter-spacing:.22em;color:var(--gold)}
.modal-card p{margin:0 0 10px;font-size:13px;line-height:2;color:rgba(239,230,211,.6);text-align:justify}
.modal-x{
  position:absolute;right:14px;top:10px;font-size:24px;color:rgba(239,230,211,.4);line-height:1;
  width:32px;height:32px;
}
.modal-x:hover{color:var(--gold)}
.src-list{margin:8px 0 0;padding-left:16px;display:flex;flex-direction:column;gap:8px}
.src-list li{font-size:12px;line-height:1.8;color:rgba(239,230,211,.45)}
.src-list a{color:rgba(201,164,92,.85);text-decoration:none;border-bottom:1px solid rgba(201,164,92,.3)}
.src-list a:hover{color:var(--gold)}
.fineprint{font-size:11px!important;color:rgba(239,230,211,.28)!important;margin-top:22px!important}

/* ============================================================
   补录表单
   ============================================================ */
.add-card{max-width:600px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin:4px 0 14px}
.form label{display:flex;flex-direction:column;gap:5px;font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:rgba(239,230,211,.4)}
.form label.wide{grid-column:1/-1}
.form input{
  background:rgba(0,0,0,.3);border:1px solid rgba(201,164,92,.22);color:var(--paper);
  padding:9px 11px;font-family:var(--serif);font-size:13.5px;outline:none;transition:.2s;
}
.form input:focus{border-color:rgba(201,164,92,.6);background:rgba(0,0,0,.45)}
.form input::placeholder{color:rgba(239,230,211,.2);font-size:12px}
.pick{margin-bottom:14px}
.pick-map{height:210px;border:1px solid rgba(201,164,92,.25);background:#12100d;filter:none}
.pick-hint{display:block;margin-top:6px;font-family:var(--sans);font-size:9.5px;color:rgba(239,230,211,.3);letter-spacing:.04em}
.form-err{color:#e08a6a;font-size:12px;line-height:1.6;margin:0 0 10px}
.form-actions{display:flex;gap:8px}
.form-actions .act{flex:1}
.add-foot{display:flex;gap:14px;margin-top:14px;padding-top:12px;border-top:1px solid rgba(201,164,92,.12)}
.add-foot button{
  font-family:var(--sans);font-size:10px;letter-spacing:.08em;color:rgba(201,164,92,.65);
  text-decoration:underline;text-underline-offset:3px;
}
.add-foot button:hover{color:var(--gold)}
.user-pin .pin-body{background:linear-gradient(180deg,#e0b872,#b98a3c);color:#241a0c}
.user-pin::after{border-top-color:rgba(224,184,114,.9)}

/* ============================================================
   日课
   ============================================================ */
.daily-btn{
  position:fixed;right:14px;bottom:44px;z-index:150;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(201,164,92,.16);
  background:rgba(14,11,9,.55);
  color:rgba(201,164,92,.42);
  opacity:.6;transition:.25s;backdrop-filter:blur(4px);
}
.daily-btn:hover{opacity:1;border-color:rgba(201,164,92,.42);color:var(--gold)}
.daily-btn .dot-done{
  position:absolute;right:7px;top:7px;width:5px;height:5px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 6px rgba(201,164,92,.8);
}
.daily-card{max-width:660px}
.daily-body{display:grid;grid-template-columns:1fr 1fr;column-gap:26px;align-items:start}
.dcol{min-width:0}
.daily-card .lead{margin-bottom:14px}
.daily-place{
  margin:0 0 12px;padding:8px 12px;font-size:12px;line-height:1.85;
  color:rgba(239,230,211,.55);background:rgba(201,164,92,.045);
  border-left:2px solid rgba(201,164,92,.4);
}
.daily-place b{font-weight:400;color:var(--gold);letter-spacing:.1em;margin-right:2px}
.daily-set{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 14px}
.daily-set label{
  display:flex;flex-direction:column;gap:5px;
  font-family:var(--sans);font-size:10px;letter-spacing:.1em;color:rgba(239,230,211,.38);
}
.daily-set input{
  background:rgba(0,0,0,.3);border:1px solid rgba(201,164,92,.2);color:var(--paper);
  padding:8px 10px;font-family:var(--serif);font-size:13.5px;outline:none;transition:.2s;
}
.daily-set input:focus{border-color:rgba(201,164,92,.6);background:rgba(0,0,0,.45)}
.dstep{margin-bottom:13px}
.dstep h3{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font-size:12.5px;font-weight:400;letter-spacing:.18em;color:rgba(239,230,211,.85);
}
.dstep h3 span{
  width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto;
  border:1px solid rgba(201,164,92,.35);color:var(--gold);
  font-size:11px;letter-spacing:0;
}
.dlist{margin:0;padding:0;list-style:none;counter-reset:d}
.dlist li{
  position:relative;padding-left:30px;margin-bottom:7px;
  font-size:13.5px;line-height:1.85;color:rgba(239,230,211,.62);
}
.dlist li::before{
  counter-increment:d;content:counter(d);
  position:absolute;left:0;top:4px;
  width:19px;height:19px;display:grid;place-items:center;
  font-family:var(--sans);font-size:9.5px;
  border:1px solid rgba(201,164,92,.3);color:rgba(201,164,92,.8);
  border-radius:50%;
}
.dlist li b{font-weight:400;color:rgba(239,230,211,.9);margin-right:4px}
.chant{
  display:block;width:fit-content;margin-top:5px;padding:4px 11px;
  font-style:normal;font-size:14px;letter-spacing:.12em;color:#e6c983;
  background:rgba(201,164,92,.07);border-left:2px solid rgba(201,164,92,.55);
}
.dstep blockquote{
  margin:6px 0 0;padding:8px 12px;
  border-left:2px solid rgba(165,52,43,.7);
  background:rgba(165,52,43,.06);
  font-size:13px;line-height:1.85;color:rgba(239,230,211,.8);text-align:justify;
}
.dstep blockquote .fill{color:var(--gold);border-bottom:1px dotted rgba(201,164,92,.4)}
.dstep > p{margin:0;font-size:13px;line-height:1.8;color:rgba(239,230,211,.6)}
.dstep > p b{font-weight:400;color:var(--gold);font-size:15px}
.daily-foot{
  display:flex;align-items:center;gap:14px;margin-top:2px;padding-top:12px;
  border-top:1px solid rgba(201,164,92,.14);
}
.daily-foot .act{flex:0 0 auto;padding:9px 16px}
.daily-foot span{font-family:var(--sans);font-size:10.5px;color:rgba(239,230,211,.32);letter-spacing:.05em}
.daily-foot.done .act{background:rgba(201,164,92,.16);border:1px solid rgba(201,164,92,.5);color:var(--gold)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .detail{flex-direction:column}
  .viewer{flex:1 1 56%;min-height:0}
  .detail-panel{
    flex:0 0 44%;width:100%;border-left:0;border-top:1px solid rgba(201,164,92,.16);
    max-height:44%;
  }
  .panel-scroll{padding:18px 18px 26px}
  .panel-title{font-size:20px}
  .sidebar{width:330px;flex-basis:330px}
}
@media (max-width:760px){
  .vbtn{padding:7px 9px;font-size:10.5px;gap:5px;white-space:nowrap}
  #soundBtn span{display:none}
  .viewer-top{padding:10px 10px;gap:8px}
  .viewer-title b{font-size:13px}
  .viewer-title i{font-size:9px}
  .v-seal{width:26px;height:26px;font-size:14px}
  .hud-presets button{padding:5px 9px;font-size:11px;letter-spacing:.08em}
  .viewer{flex:1 1 58%}
  .topbar{height:56px;flex-basis:56px;gap:10px;padding:0 12px}
  .brand-text i{display:none}
  .layout{flex-direction:column;position:relative}
  .mapwrap{position:absolute;inset:0;z-index:0}
  .sidebar{
    position:absolute;left:0;right:0;bottom:0;z-index:10;width:auto;flex-basis:auto;
    height:52%;border-right:0;border-top:1px solid rgba(201,164,92,.2);
    background:linear-gradient(180deg,rgba(16,13,10,.96),#0c0a08 22%);
    box-shadow:0 -20px 50px rgba(0,0,0,.6);border-radius:14px 14px 0 0;
  }
  .sidebar-head{padding:14px 16px 10px}
  .sidebar-head h2{font-size:18px}
  .hall-list{padding:8px 10px 16px}
  .sidebar-foot{display:none}
  .topnav button[data-act="all"]{display:none}
  .daily-btn{bottom:calc(52% + 10px);right:10px;width:34px;height:34px;opacity:.5}
  .daily-set{grid-template-columns:1fr}
  .daily-body{grid-template-columns:1fr;column-gap:0}
  .gate-tools{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-2px 0 10px;font-family:var(--sans);font-size:10.5px;
  color:rgba(239,230,211,.36);letter-spacing:.06em;
}
.gate-tools button{
  display:flex;align-items:center;gap:6px;padding:4px 10px;
  border:1px solid rgba(201,164,92,.22);color:rgba(239,230,211,.55);
  font-size:10.5px;letter-spacing:.08em;transition:.2s;
}
.gate-tools button i{
  width:7px;height:7px;border-radius:50%;border:1px solid rgba(201,164,92,.6);
  display:block;transition:.2s;
}
.gate-tools button:hover{border-color:rgba(201,164,92,.5);color:var(--gold)}
.gate-tools button[aria-pressed="true"]{background:rgba(201,164,92,.14);border-color:rgba(201,164,92,.6);color:var(--gold)}
.gate-tools button[aria-pressed="true"] i{background:var(--gold);border-color:var(--gold)}
.gate-scroll{max-height:44vh}
  .surname-grid{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))}
  .gate-title{letter-spacing:.18em;text-indent:.18em}
  .viewer-hud{padding:12px}
  .hud-drag{display:none}
  .detail-panel{flex-basis:46%;max-height:46%}
  .facts{grid-template-columns:1fr 1fr;gap:10px}
  .modal{padding:14px}
  .modal-card{padding:26px 20px 30px}
}
@media (max-height:560px){
  .gate-tools{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:-2px 0 10px;font-family:var(--sans);font-size:10.5px;
  color:rgba(239,230,211,.36);letter-spacing:.06em;
}
.gate-tools button{
  display:flex;align-items:center;gap:6px;padding:4px 10px;
  border:1px solid rgba(201,164,92,.22);color:rgba(239,230,211,.55);
  font-size:10.5px;letter-spacing:.08em;transition:.2s;
}
.gate-tools button i{
  width:7px;height:7px;border-radius:50%;border:1px solid rgba(201,164,92,.6);
  display:block;transition:.2s;
}
.gate-tools button:hover{border-color:rgba(201,164,92,.5);color:var(--gold)}
.gate-tools button[aria-pressed="true"]{background:rgba(201,164,92,.14);border-color:rgba(201,164,92,.6);color:var(--gold)}
.gate-tools button[aria-pressed="true"] i{background:var(--gold);border-color:var(--gold)}
.gate-scroll{max-height:38vh}
  .gate-head{margin-bottom:12px}
  .gate-title{font-size:40px}
}