/* Lantern · 两版皮肤共用的设计变量与组件。
   夜 = 守夜点灯；日 = 米白日光。主人在建站时选一版，访客看到主人选的那版。 */

:root{
  --ground:#1b1f24;--ground-2:#22272d;--ground-3:#2b3138;
  --text:#ede6d8;--text-2:#b9af9d;--text-3:#8c846f;
  --line:#343a42;--line-2:#414851;
  --candle:#e9b45c;--candle-deep:#c98a2e;--glow:233 180 92;--on-candle:#1b1f24;
  --veil:27 31 36;--wax:#efe4cf;--wax-2:#cdbfa6;
  --sage:#9fb39a;--rose:#cf9a92;
  --display:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  --gutter:clamp(1.2rem,5vw,2.4rem);
  --measure:44rem;
  color-scheme:dark;
}
:root[data-skin="day"]{
  --ground:#f7f1e6;--ground-2:#fdf9f1;--ground-3:#efe6d5;
  --text:#463b30;--text-2:#6b5f51;--text-3:#7d705f;
  --line:#e6dbc7;--line-2:#d6c9b1;
  --candle:#d99a3a;--candle-deep:#b0731e;--glow:217 154 58;--on-candle:#2b2118;
  --veil:247 241 230;--wax:#e4d6bb;--wax-2:#b8a686;
  --sage:#5f7d5a;--rose:#b7736a;
  color-scheme:light;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--sage);text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--candle);outline-offset:3px;border-radius:.4rem}
h1,h2{text-wrap:balance;margin:0}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ——— 顶栏 ——— */
.top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem var(--gutter) 0;max-width:var(--measure);margin:0 auto}
.mark{font-family:var(--display);font-weight:400;font-size:1.15rem;letter-spacing:.02em;color:var(--text-2);text-decoration:none}
.top-r{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.music{display:flex;align-items:center;gap:.55rem;border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:.42rem .9rem .42rem .7rem;font-size:.82rem;color:var(--text-2);transition:.2s}
.music:hover{border-color:var(--text-3);color:var(--text)}
.music[aria-pressed="true"]{border-color:var(--candle-deep);color:var(--text)}
.bars{display:inline-flex;align-items:flex-end;gap:2px;height:12px}
.bars i{width:2px;height:4px;background:currentColor;border-radius:1px;transition:.3s}
.music[aria-pressed="true"] .bars i{animation:bar 1.1s ease-in-out infinite alternate}
.music[aria-pressed="true"] .bars i:nth-child(2){animation-delay:.25s}
.music[aria-pressed="true"] .bars i:nth-child(3){animation-delay:.5s}
@keyframes bar{from{height:3px}to{height:12px}}

/* ——— 主图舞台（2.5D 深度视差） ——— */
.hero{text-align:center;padding:1.6rem var(--gutter) 0}
.stage-wrap{position:relative;width:min(76vw,21rem);aspect-ratio:4/5;margin:0 auto;perspective:900px}
.stage-wrap::before{content:"";position:absolute;inset:-18%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(var(--glow),.22),rgba(var(--glow),.06) 55%,transparent 72%);filter:blur(10px);opacity:.85;transition:opacity .9s}
.stage-wrap.is-lit::before{animation:lit 1.6s var(--ease)}
@keyframes lit{0%{opacity:.85}30%{opacity:1.6}100%{opacity:.85}}
.stage{position:relative;width:100%;height:100%;overflow:hidden;background:var(--ground-2);
  border-radius:46% 46% 1.4rem 1.4rem / 30% 30% 1.4rem 1.4rem;
  box-shadow:0 30px 60px -30px rgba(0,0,0,.55),0 0 0 1px rgba(128,128,128,.12);transform-style:preserve-3d}
.ly{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
.ly-veil{background:linear-gradient(to top,rgba(var(--veil),.6),rgba(var(--veil),0) 42%)}
.hint{font-size:.78rem;letter-spacing:.06em;color:var(--text-3);margin:.9rem 0 0;transition:opacity .6s}
.hint.is-gone{opacity:0}
.name{font-family:var(--display);font-weight:300;font-style:italic;font-variation-settings:"opsz" 144;
  font-size:clamp(2.7rem,9vw,4.1rem);line-height:1;letter-spacing:-.01em;margin:1.1rem 0 .45rem}
.span{margin:0;color:var(--text-2);font-size:.95rem;letter-spacing:.05em;font-variant-numeric:tabular-nums}
.span .dot{margin:0 .35rem;color:var(--text-3)}
.line{font-family:var(--display);font-weight:400;font-size:1.15rem;color:var(--text);max-width:26rem;margin:1rem auto 0;line-height:1.5}

/* ——— 供奉 ——— */
.offer{text-align:center;padding:2.4rem var(--gutter) 0;max-width:var(--measure);margin:0 auto}
.candles{display:flex;justify-content:center;align-items:flex-end;gap:.6rem;min-height:2.6rem;flex-wrap:wrap;max-width:22rem;margin:0 auto}
.cndl{position:relative;width:9px;height:22px;border-radius:2px;background:linear-gradient(var(--wax),var(--wax-2));box-shadow:0 1px 0 rgba(0,0,0,.25)}
.cndl::after{content:"";position:absolute;left:50%;top:-13px;width:8px;height:14px;margin-left:-4px;
  border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 70%,#fff3c4 0,var(--candle) 45%,var(--candle-deep) 100%);
  box-shadow:0 0 12px 2px rgba(var(--glow),.45);transform-origin:50% 100%;
  animation:flick 1.7s ease-in-out infinite alternate;animation-delay:var(--d,0s)}
.cndl.is-new{animation:rise .9s var(--ease) both}
@keyframes flick{0%{transform:scaleY(1) scaleX(1)}40%{transform:scaleY(1.12) scaleX(.94) rotate(-2deg)}100%{transform:scaleY(.94) scaleX(1.05) rotate(2deg)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.offer-btns{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin-top:1.4rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid var(--line-2);background:var(--ground-2);
  border-radius:999px;padding:.78rem 1.25rem;font-weight:600;font-size:.92rem;transition:.25s var(--ease)}
.btn:hover{border-color:var(--text-3)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:default;transform:none}
.btn-candle{background:var(--candle);color:var(--on-candle);border-color:transparent}
.btn-candle:hover{border-color:transparent;box-shadow:0 8px 26px -8px rgba(var(--glow),.55)}
.btn-ghost{background:transparent}
.flame-ic{width:9px;height:14px;border-radius:50% 50% 50% 50% / 62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 72%,#fff6d6 0,#c98a2e 55%,#8f5a12 100%);
  transform-origin:50% 100%;animation:flick 1.5s ease-in-out infinite alternate}
.flower-ic{width:16px;height:16px}
.tally{margin:1.1rem 0 0;color:var(--text-2);font-size:.9rem;font-variant-numeric:tabular-nums}
.tally b{color:var(--text);font-weight:600}
.tally-last{color:var(--text-3)}
.petal{position:fixed;width:14px;height:14px;pointer-events:none;z-index:9}

/* ——— 相册 / 留言 ——— */
.days,.wall{max-width:var(--measure);margin:3.4rem auto 0;padding:0 var(--gutter)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.sec-h h2{font-family:var(--display);font-weight:400;font-size:1.45rem}
.count{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}
.strip{display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 var(--gutter) .6rem;
  margin:0 calc(-1 * var(--gutter));scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.strip figure{flex:none;width:min(70vw,17.5rem);margin:0;scroll-snap-align:start}
.strip img{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:.9rem;background:var(--ground-2)}
.strip figcaption{font-family:var(--display);font-style:italic;font-size:.95rem;color:var(--text-2);margin-top:.55rem}
.msgs{list-style:none;margin:0;padding:0}
.msgs li{padding:1.05rem 0;border-top:1px solid var(--line)}
.msgs li:first-child{border-top:0;padding-top:.2rem}
.msgs li.is-new{animation:rise .7s var(--ease) both}
.m-h{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.m-n{font-weight:600;font-size:.92rem}
.m-h time{color:var(--text-3);font-size:.78rem;white-space:nowrap}
.msgs p{margin:.35rem 0 0;font-family:var(--display);font-size:1.05rem;line-height:1.6;max-width:36rem;white-space:pre-wrap;overflow-wrap:anywhere}
.empty{color:var(--text-3);font-family:var(--display);font-style:italic}
.composer{margin-top:1.3rem;display:grid;gap:.6rem;border-top:1px solid var(--line);padding-top:1.3rem}
.composer textarea,.composer input,.f input,.f select{width:100%;background:var(--ground-2);border:1px solid var(--line);
  border-radius:.9rem;padding:.85rem 1rem;color:var(--text);transition:border-color .2s}
.composer textarea{font-family:var(--display);font-size:1.05rem;resize:vertical;min-height:5.2rem}
.composer textarea:focus,.composer input:focus,.f input:focus,.f select:focus{outline:none;border-color:var(--candle-deep)}
.composer-row{display:flex;gap:.6rem}
.composer-row input{flex:1;min-width:0}
.keep{margin:.1rem 0 0;font-size:.8rem;color:var(--text-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.say{margin:.4rem 0 0;font-size:.85rem;min-height:1.2em}
.say.bad{color:var(--rose)}
.foot{text-align:center;padding:3rem var(--gutter) 2.4rem;max-width:var(--measure);margin:0 auto}
.made{color:var(--text-3);font-size:.82rem;margin:1.2rem 0 0}

@media (prefers-reduced-motion:reduce){
  .cndl::after,.flame-ic,.music .bars i,.msgs li.is-new,.cndl.is-new{animation:none}
}

/* ——— 主人面板：只有存着令牌的那台浏览器看得见 ——— */
.top-r-group{display:flex;align-items:center;gap:.5rem}
.owner-open{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:.42rem .95rem;font-size:.82rem;color:var(--text-2);transition:.2s}
.owner-open:hover{border-color:var(--text-3);color:var(--text)}
.owner{max-width:var(--measure);margin:1.2rem auto 0;padding:1.2rem;background:var(--ground-2);border:1px solid var(--line);border-radius:1.2rem;
  display:grid;gap:1rem;animation:rise .5s var(--ease) both}
.owner[hidden]{display:none}
.owner-k{margin:0;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.owner-grid{display:grid;gap:1rem}
.owner .f{display:flex;flex-direction:column;gap:.4rem}
.owner .f>span{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.owner .f-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.owner input{width:100%;background:var(--ground-3);border:1px solid var(--line);border-radius:.9rem;padding:.8rem 1rem;color:var(--text);transition:border-color .2s}
.owner input:focus{outline:none;border-color:var(--candle-deep)}
.owner .chips{display:flex;flex-wrap:wrap;gap:.5rem}
.owner .chip{border:1px solid var(--line-2);background:transparent;border-radius:999px;padding:.5rem .95rem;font-size:.86rem;color:var(--text-2);transition:.2s}
.owner .chip.is-on{background:var(--text);color:var(--ground);border-color:var(--text)}
.owner-btns{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
@media (max-width:520px){.owner{margin-left:var(--gutter);margin-right:var(--gutter)}}