:root{
  --bg:#1C1512; --raise:#241A15; --mat:#20170F;
  --gold:#C9A227; --gold-hi:#E8C468; --gold-dim:#8B6F2E;
  --ink:#EDE4D3; --ink-2:#BDAE96;
  --serif-cn:"Songti TC","Noto Serif CJK TC","Noto Serif TC","Source Han Serif TC","MingLiU",serif;
  --sans-cn:"PingFang TC","Noto Sans TC","Microsoft JhengHei","Heiti TC",sans-serif;
  --display:"Cormorant Garamond",var(--serif-cn);
  --roman:"Cinzel",var(--display);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{touch-action:manipulation}
body{
  margin:0; min-height:100svh; background:var(--bg); color:var(--ink);
  font-family:var(--sans-cn); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ---------- 木頭底：程序式生成的深色胡桃木紋（可無縫拼貼） ---------- */
.ground{position:fixed; inset:0; z-index:0; pointer-events:none; background:#140E0B}
.ground::before{
  content:""; position:absolute; inset:0;
  background-image:url('img/wood-dark.jpg');
  background-size:384px auto; background-repeat:repeat;
}
.ground::after{           /* 上方一點吧檯燈的落光，不要死板 */
  content:""; position:absolute; inset:0;
  background:radial-gradient(135% 70% at 50% -8%, rgba(92,70,48,.30) 0%, rgba(20,14,11,0) 60%);
}

.vig{position:fixed; inset:0; z-index:2; pointer-events:none;
  background:radial-gradient(105% 75% at 50% 42%, transparent 40%, rgba(0,0,0,.5) 100%)}

/* ==========================================================
   鍍金畫框（img/frame.png：程序式算光的立體線板）
   外唇 → 麻繩紋大圓線 → 凹槽 → 珠串 → 內小圓線 → 斜面落進襯布
   → 襯布（亞麻、被畫框壓出的陰影）→ 內金條 → 畫面
   ========================================================== */
.artframe{
  --fw:19px; --mould:6px; --matpad:15px;
  position:relative;
  border:var(--fw) solid #6B5226;
  border-image:url('img/frame.png') 60 round;
  background:#1A120C;
  box-shadow:
    0 0 0 1px rgba(0,0,0,.7),
    0 2px 3px rgba(0,0,0,.55),
    0 12px 22px -6px rgba(0,0,0,.7),
    0 34px 60px -24px rgba(0,0,0,.95);
}
.artframe::after{           /* 畫框頂部受光，一道很淡的反光 */
  content:""; position:absolute; inset:calc(var(--fw) * -1); pointer-events:none; z-index:1;
  background:linear-gradient(170deg, rgba(255,236,190,.10) 0%, rgba(255,236,190,0) 28%,
                                      rgba(0,0,0,0) 70%, rgba(0,0,0,.16) 100%);
  mix-blend-mode:soft-light;
}
.artframe .bevel{padding:0}
.artframe .mould{                       /* 襯布：深色亞麻，框在上左投下陰影 */
  padding:var(--matpad);
  background-color:#231A13;
  background-image:
    radial-gradient(120% 90% at 50% 40%, rgba(255,235,200,.035), rgba(0,0,0,.18)),
    repeating-linear-gradient(90deg, rgba(255,240,215,.028) 0 1px, transparent 1px 2px, rgba(0,0,0,.05) 2px 3px),
    repeating-linear-gradient(0deg,  rgba(255,240,215,.022) 0 1px, transparent 1px 2px, rgba(0,0,0,.05) 2px 3px);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.85),
    inset 5px 6px 10px -2px rgba(0,0,0,.78),
    inset -2px -2px 5px rgba(0,0,0,.35);
}
.artframe .recess{                      /* 內金條：細窄的鍍金斜邊 */
  padding:3px;
  background:linear-gradient(135deg,#F2DC9C 0%,#C9A24A 22%,#7A5C22 48%,#A98636 70%,#E3C77C 100%);
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    2px 3px 5px rgba(0,0,0,.6);
}
.artframe .window{
  position:relative; aspect-ratio:1.32; overflow:hidden; background:#120C0A;
  box-shadow:0 0 0 1px rgba(0,0,0,.7), inset 0 0 0 1px rgba(0,0,0,.35);
}
.artframe .window::after{               /* 畫面上緣被金條壓出的一點陰影、像裱在玻璃後面 */
  content:""; position:absolute; inset:0; pointer-events:none; z-index:8;
  box-shadow:inset 2px 3px 7px rgba(0,0,0,.55);
  background:linear-gradient(125deg, rgba(255,250,235,.05) 0%, rgba(255,250,235,0) 34%);
}
.artframe .window img{display:block; width:100%; height:100%; object-fit:cover}

.gilt-edge{
  padding:2px;
  background:conic-gradient(from 218deg,
    #B89A4E 0deg, #8B6F2E 60deg, #5E4C22 126deg, #3E3214 186deg,
    #57471C 240deg, #8B6F2E 302deg, #B89A4E 360deg);
  box-shadow:0 0 0 1px rgba(0,0,0,.5), 0 14px 32px -18px rgba(0,0,0,.8);
}

/* ---------- 內頁外殼 ---------- */
.page{
  position:relative; z-index:3; max-width:460px; margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 24px calc(env(safe-area-inset-bottom,0px) + 46px);
}
.topbar{
  display:flex; align-items:center; gap:14px;
  padding-bottom:13px; margin-bottom:28px;
  border-bottom:1px solid transparent;
  border-image:linear-gradient(90deg,rgba(139,111,46,.55),rgba(139,111,46,.12)) 1;
}
.back{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-left:-14px; flex:none;
  color:var(--gold); text-decoration:none; font-size:20px;
  -webkit-tap-highlight-color:transparent; transition:color .3s ease;
}
.back:active{color:var(--gold)}
.topbar h1{margin:0; font-family:var(--serif-cn); font-weight:400;
  font-size:18px; letter-spacing:.1em; color:var(--ink)}

/* 置中版：左右箭頭貼邊，標題與 logo 置中 */
.topbar.center{position:relative; justify-content:center; gap:0}
.topbar.center .back:not(.fwd){position:absolute; left:-14px; top:50%; margin:0; transform:translateY(-50%)}
.topbar.center .fwd{position:absolute; right:-14px; top:50%; margin:0; transform:translateY(-50%)}
.topbar.center .tmid{display:flex; align-items:center; gap:11px}

/* logo 當成一盞燈：飽和金黃的暈光 */
.lampmark{position:relative; display:flex; align-items:center}
.lampmark::before{
  content:""; position:absolute; left:50%; top:50%; width:104px; height:104px;
  transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,
    rgba(255,198,66,.17) 0%, rgba(255,176,40,.07) 38%, rgba(255,160,30,.02) 58%, transparent 74%);
}
.lampmark img{display:block; height:22px; width:auto; position:relative;
  filter:drop-shadow(0 0 8px rgba(255,204,80,.32)) drop-shadow(0 0 20px rgba(255,170,40,.15))}

.footmark{
  margin-top:44px; padding-top:20px; border-top:1px solid rgba(139,111,46,.2);
  display:flex; align-items:center; justify-content:space-between;
  font-size:12px; letter-spacing:.24em; color:var(--ink-2);
}
.footmark .wm{font-family:var(--roman); letter-spacing:.3em; font-size:12px}
.footmark a{color:var(--gold-dim); text-decoration:none}

/* ---------- 換頁：同文件置換 #app，交給 View Transitions ---------- */
@keyframes vtOut{to{opacity:0; transform:translateY(-10px) scale(.994)}}
@keyframes vtIn{from{opacity:0; transform:translateY(14px) scale(.996)}}
::view-transition-old(root){animation:vtOut .3s cubic-bezier(.4,0,1,1) both}
::view-transition-new(root){animation:vtIn .46s .1s cubic-bezier(.16,.84,.34,1) both}
::view-transition-group(root){animation-duration:.46s}

/* 往前（右箭頭）新頁從右邊翻進來；往回（左箭頭）從左邊 */
@keyframes pgOutL{to{opacity:0; transform:translateX(-16%) scale(.97)}}
@keyframes pgInR {from{opacity:0; transform:translateX(22%) scale(.98)}}
@keyframes pgOutR{to{opacity:0; transform:translateX(16%) scale(.97)}}
@keyframes pgInL {from{opacity:0; transform:translateX(-22%) scale(.98)}}
html[data-vt="fwd"]::view-transition-old(root){animation:pgOutL .34s cubic-bezier(.5,0,1,1) both}
html[data-vt="fwd"]::view-transition-new(root){animation:pgInR .5s .06s cubic-bezier(.16,.84,.34,1) both}
html[data-vt="back"]::view-transition-old(root){animation:pgOutR .34s cubic-bezier(.5,0,1,1) both}
html[data-vt="back"]::view-transition-new(root){animation:pgInL .5s .06s cubic-bezier(.16,.84,.34,1) both}

/* ---------- 原作檢視器：放大縮小、沒有任何互動元素 ---------- */
.viewbtn{
  position:absolute; right:8px; top:8px; z-index:9;
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  background:rgba(14,9,7,.55); border:1px solid rgba(232,196,104,.35);
  color:rgba(255,239,200,.8); cursor:pointer; padding:0;
  -webkit-tap-highlight-color:transparent; transition:background .3s ease, color .3s ease;
}
.viewbtn:active{background:rgba(14,9,7,.85); color:var(--gold-hi)}
.viewbtn svg{width:15px; height:15px; display:block}

.viewer{
  position:fixed; inset:0; z-index:60; background:rgba(8,5,4,.96);
  display:none; align-items:center; justify-content:center; overflow:hidden;
  touch-action:none;
}
.viewer.open{display:flex}
.viewer img{
  max-width:100%; max-height:100%; display:block; transform-origin:center center;
  will-change:transform; -webkit-user-drag:none; user-select:none;
}
.viewer .close{
  position:absolute; right:14px; top:calc(env(safe-area-inset-top,0px) + 14px); z-index:2;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  background:rgba(20,13,10,.8); border:1px solid rgba(232,196,104,.35);
  color:var(--gold-hi); font-size:16px; cursor:pointer; padding:0;
  -webkit-tap-highlight-color:transparent;
}
.viewer .tipbar{
  position:absolute; left:0; right:0; bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  text-align:center; font-size:12px; letter-spacing:.2em; color:rgba(255,239,200,.5);
  pointer-events:none; transition:opacity .5s ease;
}

@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}