/* ============================================================
   月夜庭院 · 御神札纸符式日录（同册装帧 · 第三案）
   整页一张竖长纸符：朱框 + 墨字 + 朱印；保存 = 落印「納」
   ============================================================ */

:root{
  --washi:#fbf6e9;
  --paper:#fffaf0;
  --ink:#251d18;
  --vermilion:#a72d22;
  --deep-red:#641f1c;
  --gold:#a27b35;
  --faded-gold:#c6a762;
  --green:#34463a;
}

*{box-sizing:border-box}

body{
  margin:0;
  color:var(--ink);
  font-family:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP","Noto Serif SC",serif;
  line-height:1.75;
  background:var(--washi);
  background-image:
    repeating-linear-gradient(87deg,rgba(74,53,22,.025) 0 1px,transparent 1px 8px),
    radial-gradient(circle at 15% 25%,rgba(255,255,255,.38),transparent 28rem);
}

/* ---------- 同册装帧：海报双层墨框 ---------- */
.poster{
  position:relative;
  width:min(1180px,calc(100% - 2rem));
  min-height:100vh;
  margin:1rem auto;
  padding:1.2rem;
  border:2px solid var(--ink);
  box-shadow:0 14px 36px rgba(52,35,18,.24);
  overflow:hidden;
}
.poster:before,.poster:after{
  content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid var(--gold);
}
.poster:after{inset:17px;border-color:rgba(37,29,24,.55)}

/* ---------- 云纹 ---------- */
.cloud{position:absolute;z-index:1;pointer-events:none;opacity:.55;color:var(--gold);font-size:1.15rem;letter-spacing:.3em;animation:cloud-drift 16s ease-in-out infinite alternate}
.cloud.one{left:6%;top:9.5rem;animation-duration:19s}
.cloud.two{right:5%;top:13rem;animation-duration:23s;animation-direction:alternate-reverse}
@keyframes cloud-drift{0%{translate:-5px 0;opacity:.48}100%{translate:8px -2px;opacity:.7}}

/* ---------- 顶线：朱印与刊号 ---------- */
.topline{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  padding:1.2rem 1.5rem;
  border-bottom:1px solid var(--ink);
}
.seal{
  position:relative;display:grid;place-items:center;
  width:4.4rem;aspect-ratio:1;
  border:2px solid var(--vermilion);border-radius:50%;
  background:rgba(255,250,240,.72);
  color:var(--vermilion);
  transform:rotate(-7deg);
  box-shadow:inset 0 0 0 3px var(--paper),inset 0 0 0 4px rgba(167,45,34,.65);
  font-size:.72rem;line-height:1.1;letter-spacing:.08em;
}
.seal::before{
  content:"";position:absolute;
  width:2.2rem;aspect-ratio:1;border-radius:50%;
  background:var(--vermilion);
  box-shadow:-.72rem 0 0 -.05rem var(--paper);
}
.seal span{
  position:absolute;bottom:.28rem;z-index:1;
  padding:0 .18rem;background:var(--paper);
  font-weight:700;white-space:nowrap;
}
.issue{text-align:right;font-size:.76rem;letter-spacing:.2em}

/* ---------- 庭院导航 ---------- */
.garden-nav{
  position:relative;z-index:3;
  display:flex;justify-content:center;flex-wrap:wrap;
  gap:clamp(.35rem,2vw,1.4rem);
  margin:.7rem 1.5rem 0;padding:.65rem;
  border-bottom:1px solid rgba(162,123,53,.55);
}
.garden-nav a{
  position:relative;display:grid;
  min-width:7rem;padding:.55rem 1rem;
  color:var(--ink);text-align:center;text-decoration:none;letter-spacing:.22em;
  transition:color .2s ease,transform .2s ease,background .2s ease;
}
.garden-nav a::before{
  content:"";position:absolute;inset:0;
  border:1px solid transparent;transform:scaleX(.7);
  transition:border-color .2s ease,transform .2s ease;
}
.garden-nav a:hover,.garden-nav a:focus-visible{
  color:var(--vermilion);background:rgba(198,167,98,.08);transform:translateY(-2px);
}
.garden-nav a:hover::before,.garden-nav a:focus-visible::before{border-color:var(--gold);transform:scaleX(1)}
.garden-nav a[aria-current="page"]{color:var(--deep-red)}
.garden-nav a[aria-current="page"]::before{border-color:rgba(167,45,34,.55);transform:scaleX(1)}
.garden-nav small{margin-top:.18rem;color:var(--gold);font-size:.52rem;letter-spacing:.18em}

/* ---------- 主版：花札 芒に月（非首页复刻） ---------- */
.hanafuda-hero{
  position:relative;z-index:2;isolation:isolate;overflow:hidden;
  display:grid;
  grid-template-columns:1fr minmax(22rem,44rem) 1fr;
  align-items:center;
  gap:0 1.2rem;
  padding:3.2rem 2rem 2.8rem;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(198,167,98,.16),transparent 60%),
    linear-gradient(90deg,rgba(198,167,98,.12),transparent 24%,rgba(167,45,34,.04) 50%,transparent 76%,rgba(198,167,98,.12));
  border-bottom:3px double rgba(162,123,53,.6);
}
/* 边缘伸入弧云（与日历页同法） */
.hana-clouds{position:absolute;inset:0;pointer-events:none;z-index:0}
.hk{position:absolute;border-radius:50%}
.hk.h1{left:-7rem;top:10%;width:15rem;height:15rem;border:5px solid rgba(162,123,53,.4);border-right-color:transparent;border-bottom-color:transparent}
.hk.h2{right:-6rem;top:14%;width:13rem;height:13rem;border:5px solid rgba(162,123,53,.38);border-left-color:transparent;border-bottom-color:transparent}
.hk.h3{left:-5rem;bottom:-2%;width:12rem;height:12rem;border:4px solid rgba(162,123,53,.34);border-right-color:transparent;border-top-color:transparent}
.hk.h4{right:-4.5rem;bottom:4%;width:11rem;height:11rem;border:4px solid rgba(162,123,53,.34);border-left-color:transparent;border-top-color:transparent}
/* 两侧纵排引句（保留面垫 + 平面构成装饰） */
.hana-side{position:relative;z-index:1;display:flex;justify-content:center}
.hana-quote{
  margin:0;color:rgba(37,29,24,.68);font-size:.8rem;line-height:2.5;letter-spacing:.3em;
  writing-mode:vertical-rl;text-orientation:upright;
  background:rgba(251,246,233,.78);padding:1rem .7rem;
  box-shadow:0 0 0 1px rgba(255,253,244,.6),0 4px 18px rgba(52,35,18,.08);
  position:relative;
}
/* 面垫四角：小金折角角饰（平面构成的对比点） */
.hana-quote::before{
  content:"";position:absolute;top:6px;left:6px;
  width:.7rem;height:.7rem;
  border-top:2px solid rgba(162,123,53,.65);
  border-left:2px solid rgba(162,123,53,.65);
}
.hana-quote::after{
  content:"";position:absolute;bottom:6px;right:6px;
  width:.7rem;height:.7rem;
  border-bottom:2px solid rgba(162,123,53,.65);
  border-right:2px solid rgba(162,123,53,.65);
}
/* 印系落点：句尾圆形单字印（朱环 + 中央「月」字） */
.q-drop{
  display:flex;align-items:center;justify-content:center;
  width:1.35rem;height:1.35rem;margin:.95rem auto 0;
  border:2px solid #a72d22;border-radius:50%;
  color:#a72d22;
  font-size:.62rem;font-weight:700;line-height:1;
  background:rgba(167,45,34,.05);
  box-shadow:inset 0 0 0 1px rgba(255,253,244,.5),0 1px 3px rgba(52,35,18,.2);
}
.q-ring{
  display:block;width:.85rem;height:.85rem;margin:.55rem auto 0;
  border-radius:50%;
  border:2px solid rgba(162,123,53,.8);
  background:radial-gradient(circle at 40% 35%,rgba(244,233,200,.65),transparent 62%);
}
.q-ring{
  display:block;width:.85rem;height:.85rem;margin:.55rem auto 0;
  border-radius:50%;
  border:2px solid rgba(162,123,53,.8);
  background:radial-gradient(circle at 40% 35%,rgba(244,233,200,.65),transparent 62%);
}
/* 中央花札组 */
.hana-main{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.fuda-card{position:relative;display:block;background:linear-gradient(165deg,#fffdf4,var(--paper) 55%,#f0e6cf)}
.fuda-card.fuda-big{
  width:min(19rem,80vw);
  aspect-ratio:5/7;
  padding:0;
  border:1px solid rgba(37,29,24,.7);
  box-shadow:0 0 0 4px #fffaf0,0 0 0 5px rgba(162,123,53,.7),0 0 0 11px #fffaf0,0 0 0 12px rgba(37,29,24,.35),0 18px 40px rgba(52,35,18,.28);
  overflow:hidden;
}
/* 卡角双线括弧装饰（金外线 + 朱内线，画报装帧角饰） */
.fuda-big::before,
.fuda-big::after{
  content:"";position:absolute;z-index:5;
  width:1.7rem;height:1.7rem;
  background:
    linear-gradient(rgba(162,123,53,.92),rgba(162,123,53,.92)) left top / 100% 2px,
    linear-gradient(rgba(162,123,53,.92),rgba(162,123,53,.92)) left top / 2px 100%,
    linear-gradient(rgba(167,45,34,.58),rgba(167,45,34,.58)) 3px 3px / calc(100% - 3px) 1.2px,
    linear-gradient(rgba(167,45,34,.58),rgba(167,45,34,.58)) 3px 3px / 1.2px calc(100% - 3px);
  background-repeat:no-repeat;
  pointer-events:none;
}
.fuda-big::before{top:.5rem;left:.5rem}
.fuda-big::after{bottom:.5rem;right:.5rem;transform:rotate(180deg)}
/* 上 3/5：靛蓝月夜空 */
.fuda-sky{
  position:absolute;top:0;left:0;right:0;height:58%;
  background:linear-gradient(172deg,#2c3a5e 0%,#33456e 46%,#4c5d80 74%,#5d6d8a 100%);
  overflow:hidden;
}
/* 望月：云间满月 */
.fuda-moon{
  position:absolute;top:18%;left:50%;transform:translateX(-50%);
  width:6.2rem;height:6.2rem;border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#fff9e8,#f4e9c8 58%,#e3cf9d);
  box-shadow:0 0 2.4rem rgba(244,233,200,.55),0 0 4.5rem rgba(244,233,200,.28),inset -0.3rem -0.4rem 1.2rem rgba(190,166,110,.35);
}
/* 芒草原：金穗细杆剪影（六丛减为四丛、更纤细） */
.fuda-suzu{
  position:absolute;bottom:-1px;
  width:100%;height:3.9rem;
  background:
    radial-gradient(ellipse .8rem 2.9rem at 14% 100%, rgba(232,217,168,.88) 74%, transparent 76%),
    radial-gradient(ellipse 1.1rem 3.7rem at 38% 100%, rgba(198,178,120,.82) 72%, transparent 74%),
    radial-gradient(ellipse .85rem 3rem at 63% 100%, rgba(232,217,168,.85) 73%, transparent 75%),
    radial-gradient(ellipse 1.15rem 3.9rem at 88% 100%, rgba(198,178,120,.86) 72%, transparent 74%),
    linear-gradient(105deg,transparent 92%,rgba(126,109,66,.55) 96%,transparent 100%),
    linear-gradient(78deg,transparent 90%,rgba(126,109,66,.4) 94%,transparent 98%),
    linear-gradient(180deg,transparent 55%,rgba(126,109,66,.35) 100%);
}
.fuda-suzu.s1{transform:scaleX(1)}
/* 下 2/5：宣纸面题字 */
.fuda-gold{
  position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(180deg,rgba(198,167,98,.09),rgba(255,253,244,.4) 30%);
}
.fuda-geecho{
  position:absolute;left:0;right:0;bottom:9%;height:2px;
  background:linear-gradient(90deg,transparent,rgba(162,123,53,.65) 18%,rgba(162,123,53,.65) 82%,transparent);
}
.fuda-title{
  position:absolute;left:0;right:0;top:60%;
  margin:0;text-align:center;
  color:var(--ink);font-size:clamp(1.6rem,3.2vw,2.3rem);
  letter-spacing:.3em;text-indent:.3em;font-weight:800;
  text-shadow:0 1px 0 rgba(255,253,244,.8);
}
.fuda-writing{
  position:absolute;left:0;right:0;top:calc(60% + 3.4rem);
  text-align:center;
  color:rgba(100,31,28,.75);font-size:.72rem;letter-spacing:.3em;text-indent:.3em;
}
/* 花札短册垂（右下小签） */
.fuda-seal{
  position:absolute;right:7%;bottom:6%;
  width:1.8rem;height:1.8rem;
  display:grid;place-items:center;
  border:1.5px solid var(--vermilion);border-radius:4px;
  color:var(--vermilion);font-style:normal;
  font-size:.9rem;font-weight:700;
  transform:rotate(-5deg);
  background:rgba(255,253,244,.88);
  box-shadow:inset 0 0 0 2px rgba(255,253,244,.9),0 2px 5px rgba(52,35,18,.2);
}
/* 散落小札（三枚 · 纹样精修版） */
.fuda-small-slots{
  position:relative;
  display:flex;justify-content:center;gap:1.8rem;
  margin-top:2rem;
  z-index:1;
}
.fuda-sm{
  width:4.6rem;aspect-ratio:5/7;
  border:1px solid rgba(37,29,24,.55);
  box-shadow:0 0 0 3px #fffaf0,0 0 0 4px rgba(162,123,53,.5),0 6px 14px rgba(52,35,18,.2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;
  background:linear-gradient(170deg,#fffdf4,#f5edda 78%);
  position:relative;
}
.fuda-sm::before{
  content:"";position:absolute;inset:2.5px;
  border:1px solid rgba(167,45,34,.34);
  pointer-events:none;
}
.fuda-sm b{font-size:.85rem;color:var(--ink);letter-spacing:.1em}
.sm-art{display:block;width:1.7rem;height:1.7rem;position:relative;border-radius:2px}
/* 桜：五瓣大花（居中含苞不溢出） */
.sm-sakura .sm-art::before{
  content:"";position:absolute;left:50%;top:2%;transform:translateX(-50%);
  width:1.5rem;height:1.5rem;
  background:
    radial-gradient(circle .14rem at 50% 50%,rgba(198,167,98,.95) 96%,transparent),
    radial-gradient(circle .56rem at 50% 6%,rgba(240,196,206,.97) 74%,transparent 76%),
    radial-gradient(circle .56rem at 97% 35%,rgba(236,184,195,.97) 74%,transparent 76%),
    radial-gradient(circle .56rem at 76% 96%,rgba(240,196,206,.97) 74%,transparent 76%),
    radial-gradient(circle .56rem at 24% 96%,rgba(236,184,195,.97) 74%,transparent 76%),
    radial-gradient(circle .56rem at 3% 35%,rgba(240,196,206,.97) 74%,transparent 76%);
}
.sm-sakura .sm-art::after{
  content:"";position:absolute;left:50%;top:1%;transform:translateX(-50%);
  width:.5rem;height:.9rem;
  background:linear-gradient(180deg,rgba(198,167,98,.9),transparent 80%);
  border-radius:50% 50% 0 0;
}
/* 蛍：夜川流萤（蓝夜底 × 大光点两枚） */
.fuda-sm.sm-hotaru .sm-art{background:linear-gradient(172deg,#2c3a5e,#33456e 55%,#4c5d80)}
.sm-hotaru .sm-art::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle .34rem at 36% 30%,rgba(250,244,214,1) 40%,rgba(250,244,214,.45) 60%,transparent 76%),
    radial-gradient(circle .22rem at 66% 60%,rgba(250,244,214,.95) 42%,rgba(250,244,214,.35) 58%,transparent 74%);
}
.sm-hotaru .sm-art::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:24%;
  background:linear-gradient(180deg,transparent,rgba(126,109,66,.4));
}
/* 富士：青峦山形 + 雪顶 */
.sm-kacho .sm-art{background:linear-gradient(180deg,#f2ece0 0 100%)}
.sm-kacho .sm-art::before{
  content:"";position:absolute;left:50%;bottom:10%;transform:translateX(-50%);
  width:1.6rem;height:1rem;
  background:linear-gradient(180deg,#5a7a9e 0%,#4a6488 55%,#3d5273 100%);
  clip-path:polygon(50% 0,72% 34%,60% 30%,54% 40%,44% 32%,34% 38%,26% 30%,12% 36%,100% 100%,0 100%);
}
.sm-kacho .sm-art::after{
  content:"";position:absolute;left:50%;top:26%;transform:translateX(-50%);
  width:.72rem;height:.34rem;
  background:#fdfaf2;
  clip-path:polygon(50% 0,100% 74%,70% 52%,58% 82%,46% 58%,32% 78%,10% 54%,0 76%,26% 0);
}
.sm-sakura{transform:rotate(-6deg)}
.sm-hotaru{transform:translateY(.4rem)}
.sm-kacho{transform:rotate(7deg)}
.fuda-sm:hover{transform:translateY(-4px) rotate(0)}
.hana-caption{
  margin:1.5rem 0 0;text-align:center;
  color:var(--gold);font-size:.7rem;letter-spacing:.32em;text-indent:.32em;
}

.rope{
  height:1px;margin:1.6rem 12%;
  background:linear-gradient(90deg,transparent,rgba(162,123,53,.8),transparent);
  position:relative;z-index:2;
}
.rope::before{
  content:"◆ 祈 願 ◆";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--washi);padding:0 .8rem;
  color:var(--gold);font-size:.66rem;letter-spacing:.5em;
}

/* ---------- 御神札纸符 ---------- */
.ofuda-panel{
  position:relative;z-index:2;
  width:min(560px,100%);
  margin:0 auto 2.4rem;
  padding:3.2rem 2.6rem 2.6rem;
  background:linear-gradient(168deg,#fffdf4 0%,var(--paper) 55%,#f6eddc 100%);
  border:3px solid var(--vermilion);
  outline:1px solid rgba(167,45,34,.35);
  outline-offset:5px;
  box-shadow:0 16px 34px rgba(52,35,18,.22);
}
.cord{position:absolute;top:-1.6rem;left:50%;transform:translateX(-50%);width:9rem;height:2rem;pointer-events:none}
.cord i{position:absolute;top:0;width:2px;height:1.6rem;background:linear-gradient(180deg,rgba(162,123,53,.2),var(--gold))}
.cord .c1{left:calc(50% - 1.6rem);transform:rotate(14deg)}
.cord .c2{left:calc(50% + 1.6rem);transform:rotate(-14deg)}
.cord .knot{
  position:absolute;top:1.45rem;left:50%;transform:translateX(-50%) rotate(45deg);
  width:.85rem;height:.85rem;
  background:linear-gradient(135deg,var(--vermilion),#7c211a);
  box-shadow:inset 0 0 0 2px rgba(255,250,240,.4),0 2px 4px rgba(52,35,18,.3);
}
.ofuda-head{text-align:center;margin-bottom:2rem}
.ofuda-kicker{margin:0 0 .9rem;color:var(--deep-red);font-size:.72rem;letter-spacing:.42em}
.ofuda-title{
  margin:0 0 1rem;
  color:var(--vermilion);
  font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:.5em;
  font-weight:800;
  text-shadow:0 1px 0 rgba(255,250,240,.65);
}
.ofuda-date-row{margin:0 0 .4rem;color:var(--ink);font-size:.9rem;letter-spacing:.24em}
.ofuda-moon{
  display:inline-block;vertical-align:-0.18em;
  width:1.3rem;height:1.3rem;margin-right:.5rem;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#f4e9c8,#c6a762 72%,#a27b35);
  box-shadow:inset 0 0 0 1px rgba(100,31,28,.35);
  position:relative;overflow:hidden;
}
.ofuda-moon::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--paper)}
.ofuda-moon[data-phase="0"]::after{transform:translate(0,0)}
.ofuda-moon[data-phase="1"]::after{transform:translate(78%,0) scale(.9)}
.ofuda-moon[data-phase="2"]::after{transform:translate(46%,0) scale(1.02)}
.ofuda-moon[data-phase="3"]::after{transform:translate(24%,0) scale(.9)}
.ofuda-moon[data-phase="4"]::after{transform:scale(0)}
.ofuda-moon[data-phase="5"]::after{transform:translate(-24%,0) scale(.9)}
.ofuda-moon[data-phase="6"]::after{transform:translate(-46%,0) scale(1.02)}
.ofuda-moon[data-phase="7"]::after{transform:translate(-78%,0) scale(.9)}
.edit-status{
  min-height:1.6rem;margin:.4rem 0 0;
  color:rgba(100,31,28,.75);font-size:.8rem;letter-spacing:.14em;
}

/* ---------- 四个题签分区 ---------- */
.record{margin-bottom:1.8rem;position:relative}
.fuda-tag{
  margin:0 0 .3rem;
  display:inline-block;
  padding:.28rem 1.1rem;
  background:var(--deep-red);
  color:#fffaf0;
  font-size:.88rem;font-weight:700;letter-spacing:.42em;
  box-shadow:.14rem .14rem 0 rgba(162,123,53,.4);
}
.record-note{margin:0 0 .8rem;color:rgba(90,78,60,.7);font-size:.74rem;letter-spacing:.18em}
.record textarea{
  width:100%;height:170px;
  padding:16px 18px;
  background:rgba(255,253,244,.85);
  border:1px solid rgba(162,123,53,.5);
  font-family:inherit;font-size:.88rem;line-height:2.1;
  resize:none;color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.jp-area{height:110px}
.record input{
  width:100%;
  padding:.65rem .8rem;
  background:rgba(255,253,244,.85);
  border:1px solid rgba(162,123,53,.5);
  font-family:inherit;font-size:.88rem;letter-spacing:.06em;
  color:var(--ink);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.record input + input{margin-top:.6rem}
.record input::placeholder,.record textarea::placeholder{color:rgba(120,105,80,.5)}
.record textarea:focus,.record input:focus{
  outline:none;
  border-color:rgba(167,45,34,.65);
  box-shadow:0 0 0 3px rgba(167,45,34,.1);
}
.record textarea[readonly],.record input[readonly]{opacity:.75;cursor:not-allowed}
.music-preview{
  margin-top:.8rem;padding:.8rem;
  border:1px dashed rgba(162,123,53,.55);
  background:rgba(255,253,244,.7);
  font-size:.82rem;color:#4a403a;
}
.music-preview:empty{display:none}
.music-preview iframe{display:block;width:100%;border:0}
.photo{
  height:150px;
  display:flex;justify-content:center;align-items:center;
  background:repeating-linear-gradient(45deg,rgba(198,167,98,.08) 0 12px,transparent 12px 24px),rgba(255,253,244,.6);
  border:1px dashed rgba(162,123,53,.5);
  color:rgba(120,105,80,.65);
  font-size:.8rem;letter-spacing:.3em;
}

/* ---------- 朱印押印式保存按钮 ---------- */
#save{
  display:grid;place-items:center;
  width:5.2rem;height:5.2rem;
  margin:1.6rem auto .3rem;
  border:3px solid var(--vermilion);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fffaf0,#f9e8dc 60%,#f0d9c8);
  color:var(--vermilion);
  font-family:inherit;font-size:1.5rem;font-weight:800;letter-spacing:0;
  cursor:pointer;
  transform:rotate(-6deg);
  box-shadow:inset 0 0 0 3px rgba(255,250,240,.8),inset 0 0 0 5px rgba(167,45,34,.5),0 6px 14px rgba(52,35,18,.2);
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
#save:hover{
  transform:rotate(-6deg) translateY(-3px) scale(1.03);
  box-shadow:inset 0 0 0 3px rgba(255,250,240,.8),inset 0 0 0 5px rgba(167,45,34,.7),0 10px 20px rgba(100,31,28,.28);
}
#save:active{transform:rotate(-6deg) scale(.94)}
#save.is-saved{background:radial-gradient(circle at 35% 30%,#fffaf0,#efc9b4 60%,#e2ab90)}
#save.is-saved{animation:stamp-press .45s ease}
@keyframes stamp-press{
  0%{transform:rotate(-6deg) scale(1)}
  40%{transform:rotate(-6deg) scale(.88) translateY(2px)}
  100%{transform:rotate(-6deg) scale(1)}
}
#save:disabled{opacity:.45;cursor:not-allowed;filter:grayscale(.5)}
.save-note{
  margin:0;text-align:center;
  color:rgba(90,78,60,.65);font-size:.72rem;letter-spacing:.26em;
}

/* ---------- 符尾 ---------- */
.ofuda-foot{
  display:flex;justify-content:center;align-items:center;gap:1rem;
  margin-top:2rem;
  color:var(--gold);font-size:.72rem;letter-spacing:.4em;
}
.ofuda-foot i{position:relative;width:4.5rem;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);overflow:visible}
.ofuda-foot i::before,.ofuda-foot i::after{
  content:"✦";position:absolute;top:50%;color:var(--gold);font-size:.54rem;transform:translateY(-50%);
}
.ofuda-foot i::before{left:-1rem}
.ofuda-foot i::after{right:-1rem}

/* ---------- 页脚 ---------- */
.footer{
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem;
  margin:0 1.5rem 1rem;padding:1rem 1.5rem 0;
  border-top:1px solid rgba(162,123,53,.45);
  color:rgba(37,29,24,.6);font-size:.68rem;letter-spacing:.2em;
}
.footer-stamp{color:var(--gold)}

/* ---------- 响应式 ---------- */
@media(prefers-reduced-motion:reduce){
  .cloud{animation:none}
  #save,#save.is-saved{animation:none;transition:none}
  .record textarea,.record input{transition:none}
}
@media(max-width:900px){
  .hanafuda-hero{padding:2.4rem 1rem 2.2rem}
  .fuda-big{width:min(16rem,70vw)}
}
@media(max-width:760px){
  .poster{width:calc(100% - 1rem);margin:.5rem auto;padding:.8rem}
  .hanafuda-hero{grid-template-columns:1fr;padding:1.9rem .6rem 1.7rem;gap:.8rem}
  .hana-side{display:none}
  .hk.h1,.hk.h2{width:9rem;height:9rem}
  .hk.h3,.hk.h4{width:7rem;height:7rem}
  .fuda-big{width:min(13.5rem,80vw)}
  .fuda-moon{width:5rem;height:5rem}
  .fuda-title{font-size:1.35rem}
  .fuda-writing{font-size:.6rem;top:calc(60% + 2.2rem)}
  .fuda-small-slots{gap:1rem;margin-top:1.1rem}
  .fuda-sm{width:2.9rem}
  .ofuda-panel{padding:2.6rem 1.2rem 2rem;border-width:2.5px}
  .cord{top:-1.4rem}
  .record{margin-bottom:1.4rem}
  .fuda-tag{font-size:.8rem;padding:.24rem .9rem;letter-spacing:.36em}
  .record textarea{height:150px;padding:14px}
  .record input{padding:.55rem .65rem}
  .photo{height:120px}
  #save{width:4.6rem;height:4.6rem;font-size:1.3rem}
  .footer{margin:0 .5rem .6rem;padding:.8rem .8rem 0;justify-content:center;text-align:center}
}