/* ===========================================================
   明燈閣 · 燈海（獨立頁）
   夜空 / 燈籠 / 霧氣 / 燈位詳情
   =========================================================== */

.sea-body{background:#0a0705}
.sea-body::before{opacity:.16;mix-blend-mode:screen}
.sea-body .nav a[aria-current="page"]{color:var(--gold-dim)}
.sea-body .nav a[aria-current="page"]::after{width:100%;background:var(--gold)}

/* ---------- 場景 ---------- */
.sea-scene{
  position:relative;isolation:isolate;overflow:hidden;
  padding:78px 0 0;
  background:
    radial-gradient(90% 64% at 50% 108%,rgba(255,150,60,.14),transparent 62%),
    radial-gradient(120% 92% at 50% -10%,#221713 0%,#140e0b 44%,#0a0705 100%);
  color:var(--paper);
}
.sea-scene::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(120% 100% at 50% 38%,transparent 48%,rgba(0,0,0,.58) 100%),
    linear-gradient(180deg,rgba(0,0,0,.28),transparent 18%,transparent 78%,rgba(0,0,0,.5));
}
.sea-scene::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34%;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(6,4,3,.86));
}
.sea-horizon{
  position:absolute;left:-6%;right:-6%;bottom:24%;height:32%;z-index:0;pointer-events:none;
  background:
    radial-gradient(55% 100% at 50% 100%,rgba(255,160,70,.13),transparent 68%),
    linear-gradient(180deg,transparent,rgba(255,150,60,.035));
  filter:blur(6px);
}
.sea-haze{
  position:absolute;z-index:1;pointer-events:none;border-radius:50%;
  filter:blur(44px);mix-blend-mode:screen;opacity:.5;
}
.sea-haze.h1{left:-14%;top:26%;width:58%;height:24%;background:rgba(200,120,60,.16);animation:seaHaze 22s ease-in-out infinite alternate}
.sea-haze.h2{right:-16%;top:48%;width:64%;height:26%;background:rgba(255,160,70,.10);animation:seaHaze 28s ease-in-out infinite alternate-reverse}

/* ---------- 標題 ---------- */
.sea-head{position:relative;z-index:4;text-align:center;padding:0 24px}
.sea-head .no{
  font-family:var(--sans);font-size:11px;letter-spacing:.56em;color:var(--gold);
  text-indent:.56em;display:block;
}
.sea-head h1{
  margin:12px 0 0;font-size:clamp(54px,9vw,102px);line-height:1.08;font-weight:400;
  letter-spacing:.26em;text-indent:.26em;
  color:#f8f2e4;
  background:linear-gradient(180deg,#fffaf0 0%,#f0dfb9 42%,#d8b46a 74%,#b8893c 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 40px rgba(255,180,100,.16));
}
.sea-head .cnt{
  font-family:var(--sans);font-size:13px;letter-spacing:.18em;color:rgba(247,242,232,.5);
  margin-top:16px;
}
.sea-head .cnt b{color:var(--gold-2);font-size:21px;font-weight:400;margin:0 .2em}
.sea-head .lead{
  max-width:620px;margin:20px auto 0;font-size:15.5px;line-height:2.15;letter-spacing:.08em;
  color:rgba(247,242,232,.56);
}
.sea-head .rule{
  width:52px;height:1px;background:rgba(200,162,83,.6);margin:28px auto 0;position:relative;
}
.sea-head .rule::before,.sea-head .rule::after{
  content:"";position:absolute;top:-2px;width:5px;height:5px;background:var(--gold);
  transform:rotate(45deg);opacity:.8;
}
.sea-head .rule::before{left:-14px}.sea-head .rule::after{right:-14px}

/* ---------- 燈海場地 ---------- */
.sea-field{
  position:relative;z-index:2;height:clamp(440px,58vh,660px);
  max-width:1320px;margin:4px auto 0;
}
.sea-field::before{
  content:"";position:absolute;left:-8%;right:-8%;bottom:4%;height:52%;pointer-events:none;
  background:
    radial-gradient(58% 100% at 50% 100%,rgba(255,150,60,.18),transparent 70%),
    linear-gradient(180deg,transparent,rgba(255,140,50,.035));
  filter:blur(4px);
}
.sea-bokeh{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bokeh{
  position:absolute;border-radius:50%;
  background:radial-gradient(circle,rgba(255,214,150,.9) 0%,rgba(255,160,70,.32) 38%,transparent 70%);
  opacity:var(--o,.2);filter:blur(var(--b,0px));
  animation:bokehFloat var(--dur,12s) ease-in-out infinite alternate;
  animation-delay:var(--delay,0s);
}
.bokeh.big{background:radial-gradient(circle,rgba(255,170,80,.22),rgba(255,130,40,.06) 46%,transparent 72%)}
.sea-empty{
  position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  font-family:var(--sans);font-size:13.5px;letter-spacing:.14em;color:rgba(247,242,232,.34);
  line-height:2;padding:0 24px;
}
.sea-empty a{color:var(--gold-2);border-bottom:1px solid rgba(224,192,120,.45)}

/* ---------- 燈籠 ---------- */
.sea-lantern{
  position:absolute;z-index:var(--z,3);
  width:96px;height:176px;margin:0;padding:0;border:0;background:none;
  color:inherit;cursor:pointer;transform:translate(-50%,-50%);
  -webkit-tap-highlight-color:transparent;
}
.sea-lantern:focus{outline:none}
.sl-scale{
  position:absolute;inset:0;display:block;
  transform:scale(var(--s,1));transform-origin:50% 58%;
  opacity:var(--op,1);filter:blur(var(--blur,0px));
  transition:transform .65s cubic-bezier(.2,.7,.3,1),filter .65s,opacity .65s;
}
.sea-lantern:hover .sl-scale,.sea-lantern:focus-visible .sl-scale{
  transform:scale(calc(var(--s,1) * 1.055));
  filter:blur(0);
}
.sl-float{
  position:absolute;inset:0;display:block;transform-origin:50% 46%;
  animation:slBob var(--dur,8s) ease-in-out infinite;
  animation-delay:var(--delay,0s);
}
.sl-glow{
  position:absolute;left:50%;top:37%;width:200px;height:200px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,182,92,.27) 0%,rgba(255,132,42,.10) 38%,transparent 70%);
  filter:blur(3px);mix-blend-mode:screen;
  animation:slGlowPulse var(--gd,6s) ease-in-out infinite;
}
.sl-lamp{position:absolute;left:50%;top:4px;width:74px;height:112px;transform:translateX(-50%)}
.sl-body{
  position:absolute;left:5px;right:5px;top:8px;bottom:12px;
  border-radius:42% 42% 38% 38% / 15% 15% 22% 22%;
  overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 84%,rgba(255,248,214,.98) 0%,rgba(255,212,128,.92) 17%,rgba(255,158,64,.58) 40%,rgba(196,66,24,.10) 66%,rgba(120,28,10,0) 80%),
    repeating-linear-gradient(90deg,rgba(78,22,8,.32) 0 1px,rgba(255,230,180,.10) 1px 2px,transparent 2px 9.5%),
    repeating-linear-gradient(0deg,rgba(255,225,175,.05) 0 1px,transparent 1px 9px),
    linear-gradient(180deg,#7c2313 0%,#a63419 27%,#c85427 56%,#e88745 81%,#f2ad67 100%);
  box-shadow:
    0 0 26px rgba(255,150,60,.32),
    0 0 74px rgba(255,120,40,.14),
    inset 0 -20px 26px rgba(255,206,130,.38),
    inset 0 12px 22px rgba(72,18,5,.42);
}
.sl-body::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(255,228,170,.22),transparent 16%,transparent 84%,rgba(60,12,3,.36)),
    radial-gradient(ellipse at 50% 100%,rgba(255,244,200,.18),transparent 55%),
    repeating-linear-gradient(0deg,rgba(255,220,160,.06) 0 1px,transparent 1px 8px);
  mix-blend-mode:soft-light;
}
.sl-body::after{
  content:"";position:absolute;left:50%;bottom:-6%;width:54%;height:40%;
  transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(circle,rgba(255,248,210,.9),rgba(255,190,90,.36) 42%,transparent 72%);
  filter:blur(5px);mix-blend-mode:screen;
}
.sl-cap{
  position:absolute;left:50%;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(180deg,#160d08,#332117 45%,#090503);
  box-shadow:inset 0 1px 0 rgba(255,210,140,.24),0 0 0 1px rgba(200,162,83,.16),0 2px 5px rgba(0,0,0,.65);
  z-index:2;
}
.sl-cap.top{top:2px;width:38px;height:8px}
.sl-cap.bottom{
  bottom:7px;width:46px;height:8px;
  background:radial-gradient(ellipse at 50% 30%,#3a1a0e 0%,#1a0c06 48%,#080402 100%);
  box-shadow:inset 0 1px 0 rgba(255,210,140,.3),0 0 0 1px rgba(200,162,83,.22),0 0 16px rgba(255,120,40,.18),0 2px 6px rgba(0,0,0,.6);
}
.sl-ember{
  position:absolute;left:50%;bottom:15px;width:18px;height:30px;transform:translateX(-50%);
  border-radius:50% 50% 46% 46% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%,#fffdea 0%,#ffe8a8 22%,#ffbe59 48%,rgba(255,120,30,0) 74%);
  filter:blur(2.4px);mix-blend-mode:screen;opacity:.95;
  animation:slEmber 2.1s ease-in-out infinite;
}
.sl-tag{
  position:absolute;left:50%;top:120px;transform:translateX(-50%);
  padding:3px 10px 4px;border:1px solid rgba(200,162,83,.72);border-radius:1px;
  background:linear-gradient(180deg,#f8efd8 0%,#e6d3ab 58%,#d3ba8b 100%);
  color:#701c10;font-family:var(--sans);font-size:10.5px;letter-spacing:.08em;
  line-height:1.5;white-space:nowrap;
  box-shadow:0 2px 8px rgba(0,0,0,.55),0 0 14px rgba(255,170,80,.12);
  z-index:3;
}
.sl-tag::before,.sl-tag::after{
  content:"";position:absolute;top:-14px;width:2px;height:14px;
  background:linear-gradient(rgba(255,220,150,1),rgba(180,130,50,.35));
  box-shadow:0 0 4px rgba(255,200,100,.35);
}
.sl-tag::before{left:14px}.sl-tag::after{right:14px}
.sl-tassel{
  position:absolute;left:50%;top:144px;width:2px;height:15px;transform:translateX(-50%);
  background:linear-gradient(#d0a850,#8a5a20);
}
.sl-tassel::before{
  content:"";position:absolute;left:50%;top:-4px;width:6px;height:6px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4dc96,#9a6a28 72%);
  box-shadow:0 0 4px rgba(240,200,120,.5);
}
.sl-tassel::after{
  content:"";position:absolute;left:50%;bottom:-8px;width:15px;height:22px;
  transform:translateX(-50%);
  background:repeating-linear-gradient(90deg,#b33122 0 2px,#7d1a10 2px 4px);
  border-radius:1px 1px 6px 6px;
  clip-path:polygon(12% 0,88% 0,100% 78%,50% 100%,0 78%);
  box-shadow:0 0 7px rgba(166,43,31,.45);
}
.sea-lantern.far .sl-tag,.sea-lantern.far .sl-tassel{opacity:0}
.sea-lantern:hover .sl-tag,.sea-lantern:focus-visible .sl-tag{
  background:linear-gradient(180deg,#fffaf0,#f0dfb9);color:#5a130a;
}
.sea-lantern.is-active .sl-glow{filter:blur(3px) brightness(1.35)}
.sea-lantern.is-active .sl-tag{
  box-shadow:0 0 0 2px rgba(224,192,120,.35),0 4px 14px rgba(0,0,0,.55);
  background:linear-gradient(180deg,#fffaf0,#f0dfb9);color:#5a130a;
}
.sea-lantern.is-new .sl-glow{animation:slBurst 1.9s ease-out 2}
.sea-lantern.is-new .sl-lamp{animation:slBorn 1.4s cubic-bezier(.16,.84,.34,1) both}

/* ---------- 底部說明 ---------- */
.sea-foot{position:relative;z-index:4;text-align:center;padding:2px 24px 82px}
.sea-note{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.1em;line-height:2.05;
  color:rgba(247,242,232,.38);
}
.sea-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:24px}
.sea-body .btn.ghost{border-color:rgba(247,242,232,.28)}

/* ---------- 燈位詳情 ---------- */
.sea-detail{
  position:fixed;right:28px;bottom:28px;z-index:9500;
  width:min(360px,calc(100vw - 40px));
  padding:27px 28px 24px;
  background:rgba(25,18,14,.96);
  border:1px solid rgba(200,162,83,.34);
  box-shadow:0 34px 90px rgba(0,0,0,.72),0 0 60px rgba(255,150,50,.06);
  backdrop-filter:blur(16px);color:var(--paper);
  transform:translateY(18px);opacity:0;
  transition:transform .4s cubic-bezier(.2,.7,.3,1),opacity .4s;
}
.sea-detail[hidden]{display:none}
.sea-detail.on{transform:translateY(0);opacity:1}
.sea-detail .x{
  position:absolute;top:8px;right:10px;width:34px;height:34px;
  border:0;background:none;color:rgba(247,242,232,.45);font-size:22px;line-height:1;
  cursor:pointer;font-family:var(--sans);
}
.sea-detail .x:hover{color:var(--gold-2)}
.sd-no{
  font-family:var(--sans);font-size:10.5px;letter-spacing:.32em;color:var(--gold);
  text-transform:uppercase;
}
.sd-name{
  margin:12px 0 2px;font-size:30px;letter-spacing:.1em;font-weight:500;color:var(--gold-2);
}
.sd-meta{
  margin-top:16px;padding-top:16px;border-top:1px solid rgba(247,242,232,.12);
  font-family:var(--sans);font-size:12.5px;letter-spacing:.08em;line-height:2.1;
  color:rgba(247,242,232,.56);
}
.sd-meta b{color:rgba(247,242,232,.82);font-weight:400}
.sd-quote{
  margin-top:16px;font-size:13.5px;line-height:2;letter-spacing:.06em;
  color:rgba(247,242,232,.5);
}
.sea-detail .btn{margin-top:20px}

/* ---------- 最近點亮 / 說明 ---------- */
.sea-recent{
  position:relative;background:var(--paper);color:var(--ink);
  padding:96px 0 104px;border-top:1px solid rgba(200,162,83,.25);
}
.sea-recent .sec-head{margin-bottom:52px}
.recent-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;
}
.recent-item{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:15px 18px;border:1px solid rgba(23,19,16,.13);background:#fff;
  font:inherit;color:inherit;cursor:pointer;transition:all .3s;
}
.recent-item:hover{border-color:var(--gold);box-shadow:0 14px 30px -22px rgba(23,19,16,.5);transform:translateY(-2px)}
.ri-flame{
  flex:none;width:16px;height:24px;border-radius:50% 50% 48% 48% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 74%,#fff8d0 0%,#ffd36a 34%,#f08a2e 64%,rgba(240,138,46,0) 78%);
  filter:drop-shadow(0 0 7px rgba(240,160,60,.55));
}
.ri-main{min-width:0;flex:1}
.ri-name{display:block;font-size:16px;letter-spacing:.06em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ri-meta{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.06em;color:var(--ink-3);margin-top:2px}
.ri-slot{font-family:var(--sans);font-size:10px;letter-spacing:.04em;color:var(--gold-dim);flex:none}
.recent-empty{
  grid-column:1/-1;padding:44px 24px;text-align:center;border:1px dashed rgba(23,19,16,.16);
  font-family:var(--sans);font-size:13.5px;letter-spacing:.1em;color:var(--ink-3);
}
.sea-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:44px;
  background:rgba(23,19,16,.1);border:1px solid rgba(23,19,16,.1);
}
.sea-stat{background:var(--paper-2);padding:26px 20px;text-align:center}
.sea-stat b{display:block;font-size:32px;font-weight:400;line-height:1.2;color:var(--vermilion)}
.sea-stat span{display:block;margin-top:8px;font-family:var(--sans);font-size:11px;letter-spacing:.18em;color:var(--ink-3)}
.sea-about{max-width:760px;margin:64px auto 0;padding:0 28px}
.sea-about p{font-size:15.5px;line-height:2.2;color:var(--ink-2);margin-top:18px}
.sea-about p a{color:var(--vermilion);border-bottom:1px solid rgba(166,43,31,.32)}

/* ---------- 動畫 ---------- */
@keyframes slBob{
  0%,100%{transform:translateY(0) rotate(-1.2deg)}
  50%{transform:translateY(-15px) rotate(1.2deg)}
}
@keyframes slGlowPulse{
  0%,100%{opacity:.72;transform:translate(-50%,-50%) scale(.96)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.07)}
}
@keyframes slEmber{
  0%,100%{transform:translateX(-50%) scale(1,1);opacity:.9}
  32%{transform:translateX(-50%) scale(.9,1.12);opacity:1}
  66%{transform:translateX(-50%) scale(1.06,.94);opacity:.84}
}
@keyframes slBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}
  40%{opacity:1;transform:translate(-50%,-50%) scale(1.5)}
  100%{opacity:.8;transform:translate(-50%,-50%) scale(1)}
}
@keyframes slBorn{
  0%{opacity:0;transform:translateX(-50%) translateY(80px) scale(.4)}
  60%{opacity:1}
  100%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
}
@keyframes bokehFloat{
  0%{transform:translate3d(0,8px,0) scale(.9);opacity:calc(var(--o,.2) * .65)}
  100%{transform:translate3d(8px,-18px,0) scale(1.15);opacity:var(--o,.2)}
}
@keyframes seaHaze{
  0%{transform:translate3d(-3%,0,0) scale(1)}
  100%{transform:translate3d(4%,-3%,0) scale(1.12)}
}

/* ---------- 響應式 ---------- */
@media(max-width:900px){
  .sea-scene{padding-top:52px}
  .sea-head h1{letter-spacing:.2em;text-indent:.2em}
  .sea-field{height:clamp(400px,54vh,520px)}
  .sea-foot{padding-bottom:62px}
  .sea-detail{left:16px;right:16px;bottom:16px;width:auto;padding:24px 24px 22px}
  .sea-recent{padding:72px 0 80px}
  .sea-stats{grid-template-columns:1fr}
  .sea-about{margin-top:46px}
}
@media(max-width:560px){
  .sea-head .lead{font-size:14px;padding:0 10px}
  .sea-field{height:420px}
  .sea-lantern{width:86px;height:160px}
  .sl-tag{font-size:9.5px;padding:2px 8px 3px}
  .sea-note{font-size:11.5px}
  .recent-grid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .sl-float,.sl-glow,.sl-ember,.bokeh,.sea-haze{animation:none!important}
  .sea-detail,.sl-scale{transition:none!important}
}