/* ───────────────────────── palette ───────────────────────── */
:root{
  --paper:#e7dfc1;
  --paper-light:#efe8cf;
  --paper-dark:#d9cfab;
  --ink:#4a4636;
  --ink-soft:#857e66;
  --green:#5e7d45;
  --green-2:#41602f;
  --green-3:#7d9c5f;
  --gold:#f2ab2c;
  --gold-2:#c67a0b;
  --cream:#fffbf0;
  --env:#f4ecd7;
  --env-2:#e8dec3;
  --env-3:#dfd4b5;
  --shadow:0 30px 50px -22px rgba(70,55,20,.4), 0 8px 18px -8px rgba(70,55,20,.2);
  --size:min(76vmin, 600px);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Fraunces",Georgia,"Times New Roman",serif;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

/* ───────────────────────── paper ───────────────────────── */
.paper{
  position:fixed; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 50% 42%, var(--paper-light) 0%, var(--paper) 52%, var(--paper-dark) 100%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  mix-blend-mode:multiply; opacity:.9;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32  0 0 0 0 .26  0 0 0 0 .14  0 0 0 4 -2.55'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .15  0 0 0 .16 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ───────────────────────── decor ───────────────────────── */
.decor{position:fixed; inset:0; z-index:2; pointer-events:none; overflow:hidden}
.decor .cluster{
  position:absolute; transform-origin:center;
  animation:sway 7s ease-in-out infinite alternate;
}
.decor .cluster svg{position:absolute; overflow:visible}
.decor .cluster.sm{display:none}
@keyframes sway{
  from{transform:rotate(var(--r,0deg)) translateY(0)}
  to{transform:rotate(calc(var(--r,0deg) + 1.6deg)) translateY(-4px)}
}

.drift{position:fixed; inset:0; z-index:3; pointer-events:none; overflow:hidden}
.drift span{
  position:absolute; top:-8vh; width:22px; height:46px; opacity:0;
  animation:fall var(--d,24s) linear infinite;
  animation-delay:var(--delay,0s);
}
.drift span svg{width:100%; height:100%; overflow:visible}
@keyframes fall{
  0%{transform:translate(0,0) rotate(0deg) scale(var(--s,.8)); opacity:0}
  6%{opacity:.75}
  50%{transform:translate(var(--x1,30px),52vh) rotate(160deg) scale(var(--s,.8))}
  94%{opacity:.65}
  100%{transform:translate(var(--x2,-20px),112vh) rotate(340deg) scale(var(--s,.8)); opacity:0}
}

/* ───────────────────────── chrome ───────────────────────── */
.top,.bottom{
  position:fixed; left:0; right:0; z-index:4; text-align:center; pointer-events:none;
}
.top{top:clamp(18px, 4vh, 40px)}
.bottom{bottom:clamp(16px, 3.5vh, 34px)}
h1{
  margin:0; font-weight:300; font-style:italic;
  font-size:clamp(1.35rem, 2.6vw, 1.9rem);
  letter-spacing:.02em; color:var(--ink);
  animation:rise 1.2s .3s cubic-bezier(.2,.8,.2,1) both;
}
h1 em{font-style:italic; font-weight:400; color:#6b6547}
.hint,.count{margin:0; font-family:"Caveat",cursive; color:var(--ink-soft)}
.hint{font-size:clamp(1.15rem, 2.2vw, 1.45rem); animation:rise 1.2s .6s cubic-bezier(.2,.8,.2,1) both}
.count{font-size:clamp(1rem, 1.8vw, 1.2rem); opacity:.85; min-height:1.4em; transition:opacity .4s}
.count:empty{opacity:0}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ───────────────────────── stage ───────────────────────── */
.stage{
  position:relative; z-index:3;
  height:100%; display:grid; place-items:center;
  touch-action:none; cursor:grab; user-select:none; -webkit-user-select:none;
}
.stage.dragging{cursor:grabbing}
.stage>*{grid-area:1/1}

.greens{
  width:calc(var(--size) * 1.0667); height:calc(var(--size) * 1.0667);
  animation:greens-sway 9s ease-in-out infinite alternate, bloom 1.6s cubic-bezier(.2,.8,.2,1) both;
  transform-origin:center;
}
.greens svg{width:100%; height:100%; overflow:visible; display:block}
@keyframes greens-sway{from{rotate:-1.3deg} to{rotate:1.3deg}}

.daisy-shadow{
  width:var(--size); height:var(--size); border-radius:50%;
  translate:2% 5%;
  background:radial-gradient(circle at 50% 50%, rgba(60,48,14,.30) 0%, rgba(60,48,14,.16) 42%, rgba(60,48,14,0) 66%);
  animation:bloom 1.6s cubic-bezier(.2,.8,.2,1) both;
}

.daisy-wrap{
  width:var(--size); height:var(--size);
  animation:bloom 1.6s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes bloom{from{opacity:0; scale:.72; rotate:-22deg} to{opacity:1; scale:1; rotate:0deg}}

.daisy{
  width:100%; height:100%; display:block; overflow:visible;
  transform:rotate(var(--rot, 0deg));
  will-change:transform;
}

/* petals */
.petal{cursor:pointer; outline:none}
.petal .lift{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.petal:focus-visible .lift{transform:translateY(-10px)}
.petal .blade{fill:url(#petalGrad); transition:fill .35s}
.petal:focus-visible .blade{fill:url(#petalHover)}
@media (hover:hover){
  .petal:hover .lift{transform:translateY(-10px)}
  .petal:hover .blade{fill:url(#petalHover)}
}
.petal.opened .blade{fill:url(#petalOpened)}
.petal .shade{fill:none; stroke:#d3d2ca; stroke-width:3.2; opacity:.55; stroke-linecap:round}
.petal .vein{fill:none; stroke:#cdccc4; stroke-width:1.3; opacity:.75; stroke-linecap:round}
.petal .hi{fill:none; stroke:#fff; stroke-width:2.2; opacity:.8; stroke-linecap:round}
.petal.opened .vein{stroke:#e0cf9f}
.petal.nudge .lift{animation:nudge 1.5s ease-in-out}
@keyframes nudge{0%,100%{transform:none} 40%{transform:translateY(-12px)}}

/* new (unread) petals shine */
.petal .glow{fill:none; stroke:#f6c34a; stroke-width:0; opacity:0; filter:url(#softer); transition:opacity .5s}
.petal.new .glow{stroke-width:14; opacity:.55; animation:glow 2.4s ease-in-out infinite}
.petal.new .blade{fill:url(#petalNew)}
.petal.new .vein{stroke:#e8cf8a}
.petal .twinkle{fill:#fff3b0; opacity:0; transform-origin:center; transform-box:fill-box}
.petal.new .twinkle{animation:twinkle 1.8s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.35} 50%{opacity:.8}}
@keyframes twinkle{0%,100%{opacity:0; transform:scale(.4)} 50%{opacity:1; transform:scale(1.3)}}
.petal.growing{cursor:default}
.petal.growing .blade{fill:url(#petalGrad)}

/* ───────────────────────── "a new note" tag ───────────────────────── */
.newnote{
  position:fixed; z-index:5; right:clamp(12px, 3vw, 34px); top:clamp(12px, 3vh, 30px);
  display:flex; align-items:center; gap:10px;
  padding:9px 16px 9px 10px; border:0; border-radius:4px;
  background:var(--cream); color:var(--ink); text-align:left;
  font-family:"Caveat",cursive; cursor:pointer;
  box-shadow:0 12px 24px -10px rgba(70,55,20,.35), 0 2px 5px rgba(70,55,20,.12);
  rotate:-2.5deg; transform-origin:top right;
  animation:tag-in .9s .9s cubic-bezier(.2,.9,.3,1.2) both, tag-bob 3.2s 1.8s ease-in-out infinite;
  transition:rotate .25s, box-shadow .25s;
}
.newnote[hidden]{display:none}
.newnote:hover{rotate:0deg; box-shadow:0 16px 28px -10px rgba(70,55,20,.4), 0 2px 5px rgba(70,55,20,.12)}
.newnote:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.newnote::before{ /* pin */
  content:""; position:absolute; left:50%; top:-6px; width:11px; height:11px; margin-left:-5px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffb3b3, #d45f5f 60%, #a83f3f);
  box-shadow:0 2px 3px rgba(60,20,20,.3);
}
.newnote-daisy{width:34px; height:34px; flex:none; animation:tag-spin 9s linear infinite}
.newnote-daisy svg{width:100%; height:100%; overflow:visible; display:block}
.newnote b{display:block; font-weight:600; font-size:1.2rem; line-height:1.1}
.newnote small{display:block; font-size:.95rem; color:var(--ink-soft); line-height:1.2}
@keyframes tag-in{from{opacity:0; transform:translateY(-14px) scale(.8)} to{opacity:1; transform:none}}
@keyframes tag-bob{0%,100%{translate:0 0} 50%{translate:0 -3px}}
@keyframes tag-spin{to{rotate:360deg}}

/* ───────────────────────── toast ───────────────────────── */
.toast{
  position:fixed; z-index:6; left:50%; bottom:clamp(70px, 11vh, 110px);
  translate:-50% 8px; opacity:0; pointer-events:none;
  padding:6px 16px; border-radius:20px;
  background:var(--cream); color:var(--ink); font-family:"Caveat",cursive; font-size:1.25rem;
  box-shadow:0 8px 18px -8px rgba(70,55,20,.35);
  transition:opacity .3s, translate .3s;
}
.toast.show{opacity:1; translate:-50% 0}

/* ───────────────────────── sparks ───────────────────────── */
.sparks{position:fixed; inset:0; z-index:60; pointer-events:none}
.sparks span{
  position:absolute; width:6px; height:6px; margin:-3px 0 0 -3px; border-radius:50%;
  background:radial-gradient(circle, #ffe08a 0%, var(--gold) 60%, transparent 70%);
  animation:spark 1s cubic-bezier(.1,.7,.3,1) both;
}
@keyframes spark{
  from{transform:translate(0,0) scale(.6); opacity:1}
  to{transform:translate(var(--dx), var(--dy)) scale(1.1); opacity:0}
}

/* ───────────────────────── veil + envelope ───────────────────────── */
.veil{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  background:rgba(214,200,158,.55);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  opacity:0; transition:opacity .4s ease;
}
.veil.show{opacity:1}
.veil>*{grid-area:1/1}
.veil[hidden]{display:none}

.env{
  position:relative;
  width:min(340px, 82vw); aspect-ratio:1.5;
  perspective:900px;
  opacity:0;
  transform:translate(var(--sx,0px), var(--sy,0px)) scale(.22) rotate(var(--sr,0deg));
  transition:transform .6s cubic-bezier(.2,.9,.3,1.08), opacity .3s;
  filter:drop-shadow(0 22px 26px rgba(70,55,20,.28));
}
.veil.in .env{opacity:1; transform:translate(0,0) scale(1) rotate(0deg)}

.env-back{
  position:absolute; inset:0; z-index:1;
  background:var(--env-2); border-radius:7px;
}
.stub{
  position:absolute; z-index:2;
  left:7%; right:7%; top:9%; bottom:7%;
  background:var(--cream); border-radius:4px;
  box-shadow:0 3px 10px rgba(60,45,10,.15);
  padding:14% 12% 0;
  transition:transform .75s cubic-bezier(.3,.8,.3,1);
}
.stub i{display:block; height:2px; margin:0 0 13px; border-radius:2px; background:rgba(120,100,60,.16)}
.stub i:nth-child(1){width:46%; height:3px; background:rgba(120,100,60,.24)}
.stub i:nth-child(3){width:88%}
.stub i:nth-child(4){width:64%}
.veil.out .stub{transform:translateY(-82%)}

.env-front{
  position:absolute; inset:0; z-index:3;
  background:linear-gradient(180deg, var(--env) 0%, #ece2c9 100%);
  clip-path:polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
  border-radius:0 0 7px 7px;
}
.env-front::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(120,95,40,.14), transparent 22%);
  clip-path:polygon(0 0, 50% 54%, 100% 0, 100% 3%, 50% 57%, 0 3%);
}
.env-flap{
  position:absolute; left:0; right:0; top:0; height:55%; z-index:4;
  background:linear-gradient(180deg, #f8f1de 0%, #e9dfc3 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  transform-origin:top center;
  transition:transform .65s cubic-bezier(.45,0,.2,1);
}
.env-flap::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 84%, rgba(120,95,40,.16));
}
.veil.open .env-flap{transform:rotateX(180deg)}
.veil.flapped .env-flap{z-index:0}

.seal{
  position:absolute; z-index:5; left:50%; top:55%;
  width:52px; height:52px; margin:-26px 0 0 -26px;
  display:grid; place-items:center;
  filter:drop-shadow(0 2px 3px rgba(60,45,10,.25));
  transition:transform .35s cubic-bezier(.6,-.3,.7,1), opacity .3s;
}
.seal svg{width:100%; height:100%; overflow:visible}
.veil.open .seal{transform:scale(0) rotate(40deg); opacity:0}

/* ───────────────────────── letter ───────────────────────── */
.letter{
  position:relative;
  width:min(470px, 91vw);
  max-height:min(80vh, 680px);
  display:flex; flex-direction:column;
  background:var(--cream);
  border-radius:3px;
  box-shadow:var(--shadow);
  rotate:-.8deg;
  opacity:0; transform:translateY(26px) scale(.9);
  transition:opacity .5s ease, transform .55s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.veil.read .letter{opacity:1; transform:none; pointer-events:auto}
.veil.read .env{opacity:0; transform:translateY(46px) scale(.88); transition:transform .5s ease-in, opacity .4s}

.letter-scroll{
  overflow:auto; overscroll-behavior:contain;
  padding:44px 38px 30px 40px;
  line-height:32px;
  background-image:repeating-linear-gradient(transparent 0 31px, rgba(120,100,60,.14) 31px 32px);
  background-position:0 44px; background-attachment:local;
  border-radius:3px;
  scrollbar-width:thin; scrollbar-color:rgba(120,100,60,.25) transparent;
}
.letter-scroll::before{ /* margin line */
  content:""; position:absolute; top:0; bottom:0; left:32px; width:1px;
  background:rgba(200,110,110,.35); pointer-events:none;
}
.no{
  margin:0 0 0; font-family:"Caveat",cursive; font-size:1.05rem;
  color:var(--ink-soft); letter-spacing:.04em;
}
.letter h2{
  margin:0 0 32px; font-family:"Caveat",cursive; font-weight:600;
  font-size:2rem; line-height:32px; color:var(--ink);
}
.body{font-family:"Caveat",cursive; font-size:1.5rem; font-weight:400; color:#3d3a2c; word-wrap:break-word}
.body p{margin:0 0 32px}
.body p:last-child{margin-bottom:0}
.photo{
  position:relative; margin:8px auto 32px; width:min(100%, 360px);
  padding:10px 10px 14px; background:#fff; rotate:-1.2deg;
  box-shadow:0 10px 22px -10px rgba(70,55,20,.45), 0 1px 3px rgba(70,55,20,.15);
}
.photo img{display:block; width:100%; height:auto; max-height:60vh; object-fit:cover; cursor:zoom-in}
.photo figcaption{
  margin:8px 0 -4px; text-align:center; font-family:"Caveat",cursive; font-size:1rem; color:var(--ink-soft);
}
.photo::before{ /* tape */
  content:""; position:absolute; left:50%; top:-11px; width:84px; height:24px;
  transform:translateX(-50%) rotate(2deg);
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px), rgba(246,206,120,.62);
}
.body .photo:last-child{margin-bottom:8px}
.sign{
  margin:32px 0 0; font-family:"Caveat",cursive; font-size:1.55rem; font-weight:500;
  color:var(--ink); text-align:right;
}
.sign b{font-weight:600; display:block}

.tape{
  position:absolute; z-index:2; left:50%; top:-13px;
  width:118px; height:30px; transform:translateX(-50%) rotate(-3deg);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 6px, transparent 6px 12px),
    rgba(246,206,120,.62);
  box-shadow:0 1px 2px rgba(60,45,10,.12);
  -webkit-mask:linear-gradient(90deg, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%);
          mask:linear-gradient(90deg, transparent 0, #000 3px, #000 calc(100% - 3px), transparent 100%);
}
.close{
  position:absolute; z-index:3; top:8px; right:10px;
  width:34px; height:34px; border:0; border-radius:50%;
  background:transparent; color:var(--ink-soft);
  font:400 26px/34px "Fraunces",serif; cursor:pointer;
  transition:background .2s, color .2s, transform .2s;
}
.close:hover{background:rgba(120,100,60,.1); color:var(--ink); transform:rotate(90deg)}
.close:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.doodle{
  position:absolute; left:14px; bottom:12px; width:36px; height:36px; opacity:.85;
  rotate:-14deg; pointer-events:none;
}
.doodle svg{width:100%; height:100%; overflow:visible}

.veil.closing{opacity:0}
.veil.closing .letter{opacity:0; transform:translateY(18px) scale(.96); pointer-events:none}
.veil.closing .env{opacity:0}

/* ───────────────────────── photo lightbox ───────────────────────── */
.lightbox{
  position:fixed; inset:0; z-index:70;
  background:rgba(58,50,30,.72);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .3s;
}
.lightbox[hidden]{display:none}
.lightbox.show{opacity:1}
.lb-stage{
  position:absolute; inset:0; display:grid; place-items:center;
  touch-action:none; overflow:hidden; cursor:grab; user-select:none; -webkit-user-select:none;
}
.lb-stage.panning{cursor:grabbing}
.lb-stage img{
  max-width:calc(100vw - 32px); max-height:calc(100vh - 32px);
  padding:8px; background:#fff; box-sizing:border-box;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transform:translate(var(--tx,0px), var(--ty,0px)) scale(var(--s,1));
  will-change:transform;
  animation:lb-in .35s cubic-bezier(.2,.8,.2,1) both;
}
.lb-stage.panning img, .lb-stage.pinching img{animation:none}
@keyframes lb-in{from{opacity:0; transform:translate(0,0) scale(.86)} to{opacity:1; transform:translate(0,0) scale(1)}}
.lb-close{
  position:absolute; z-index:2; top:14px; right:14px;
  width:42px; height:42px; border:0; border-radius:50%;
  background:rgba(255,251,240,.92); color:var(--ink);
  font:400 30px/42px "Fraunces",serif; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.25); transition:transform .2s;
}
.lb-close:hover{transform:rotate(90deg)}
.lb-hint{
  position:absolute; left:0; right:0; bottom:18px; margin:0; text-align:center; pointer-events:none;
  font-family:"Caveat",cursive; font-size:1.15rem; color:rgba(255,251,240,.85);
  text-shadow:0 1px 3px rgba(0,0,0,.4);
  transition:opacity .4s;
}
.lightbox.zoomed .lb-hint{opacity:0}
@media (max-width:640px){
  .lb-hint{font-size:1rem; bottom:14px; padding:0 20px}
}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width:640px){
  :root{--size:min(88vw, 58vh)}
  .newnote{right:10px; top:auto; bottom:clamp(60px, 9vh, 90px); rotate:-1.5deg; padding:7px 12px 7px 8px}
  .newnote b{font-size:1.05rem}
  .newnote small{font-size:.85rem}
  .toast{bottom:clamp(120px, 18vh, 160px)}
  .decor .cluster.lg{display:none}
  .decor .cluster.sm{display:block}
  .letter-scroll{padding:40px 24px 26px 30px}
  .letter-scroll::before{left:22px}
  .body{font-size:1.4rem}
  .letter h2{font-size:1.8rem}
}
@media (max-height:520px){
  :root{--size:min(60vh, 80vw)}
}

@media (prefers-reduced-motion:reduce){
  .decor .cluster, .greens, .drift span, .newnote, .newnote-daisy, .petal.new .glow, .petal.new .twinkle{animation:none}
  .petal.new .glow{opacity:.6}
  .drift{display:none}
  .daisy-wrap,.daisy-shadow{animation:none}
  .env,.stub,.env-flap,.letter,.seal{transition-duration:.01s}
}

/* ───────────────────────── board link (footer) ───────────────────────── */
.to-board{
  pointer-events:auto;
  margin:6px auto 0; display:inline-flex; align-items:center; gap:7px;
  padding:5px 14px; border:0; border-radius:18px;
  background:rgba(255,251,240,.75); color:var(--ink-soft);
  font-family:"Caveat",cursive; font-size:1.05rem; cursor:pointer;
  box-shadow:0 6px 14px -8px rgba(70,55,20,.4);
  animation:rise .9s .9s cubic-bezier(.2,.8,.2,1) both;
  transition:color .2s, background .2s, transform .2s;
}
.to-board[hidden]{display:none}
.to-board:hover{color:var(--ink); background:var(--cream); transform:translateY(-1px)}
.to-board:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
.to-board span{width:16px; height:16px; display:block}
.to-board svg{width:100%; height:100%; overflow:visible; display:block}

/* ───────────────────────── the bloom (all petals opened) ───────────────────────── */
.bloom{
  position:fixed; inset:0; z-index:80;
  display:grid; place-items:center;
  background:radial-gradient(120% 90% at 50% 45%, rgba(255,250,235,.72), rgba(221,208,170,.82));
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  opacity:0; transition:opacity .6s ease;
}
.bloom[hidden]{display:none}
.bloom.show{opacity:1}
.bloom-rain{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.bloom-rain span{position:absolute; top:-10vh; width:26px; height:52px; opacity:0}
.bloom-rain svg{width:100%; height:100%; overflow:visible; display:block}
.bloom.show .bloom-rain span{animation:bloom-fall var(--d,7s) var(--delay,0s) cubic-bezier(.35,.1,.6,1) forwards}
@keyframes bloom-fall{
  0%{transform:translate(0,0) rotate(0) scale(var(--s,.9)); opacity:0}
  8%{opacity:.95}
  100%{transform:translate(var(--x,40px),115vh) rotate(var(--r,420deg)) scale(var(--s,.9)); opacity:0}
}
.bloom-card{
  position:relative; z-index:2; text-align:center;
  width:min(420px, 88vw); padding:30px 30px 26px;
  background:var(--cream); border-radius:4px; rotate:-1deg;
  box-shadow:var(--shadow);
  animation:bloom-card-in .9s .35s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes bloom-card-in{from{opacity:0; transform:translateY(22px) scale(.9)} to{opacity:1; transform:none}}
.bloom-daisy{
  display:block; width:84px; height:84px; margin:0 auto 10px;
  animation:bloom-spin 16s linear infinite, bloom-pop 1.1s .35s cubic-bezier(.2,.9,.3,1.3) both;
}
.bloom-daisy svg{width:100%; height:100%; overflow:visible; display:block}
@keyframes bloom-spin{to{rotate:360deg}}
@keyframes bloom-pop{from{scale:0; opacity:0} to{scale:1; opacity:1}}
.bloom-eyebrow{
  margin:0; font-family:"Caveat",cursive; font-size:1.05rem; color:var(--ink-soft); letter-spacing:.06em;
}
.bloom-card h2{
  margin:2px 0 8px; font-family:"Caveat",cursive; font-weight:600;
  font-size:2.2rem; line-height:1.1; color:var(--ink);
}
.bloom-sub{margin:0 0 20px; font-family:"Caveat",cursive; font-size:1.3rem; color:#54503d; line-height:1.35}
.bloom-acts{display:flex; flex-direction:column; gap:9px; align-items:center}
.btn-primary,.btn-ghost,.btn-back{
  font-family:"Caveat",cursive; cursor:pointer; border:0; border-radius:22px;
  transition:transform .2s, background .2s, color .2s, box-shadow .2s;
}
.btn-primary{
  padding:9px 22px; font-size:1.25rem; color:#4a3c12;
  background:linear-gradient(180deg, #fbd45c, var(--gold));
  box-shadow:0 8px 16px -8px rgba(150,110,10,.6);
}
.btn-primary:hover{transform:translateY(-2px)}
.btn-ghost{padding:7px 18px; font-size:1.1rem; color:var(--ink-soft); background:transparent}
.btn-ghost:hover{color:var(--ink); background:rgba(120,100,60,.08)}
.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-back:focus-visible{outline:2px solid var(--gold); outline-offset:3px}

/* ───────────────────────── the board ───────────────────────── */
.board{
  position:fixed; inset:0; z-index:40; overflow:auto; overscroll-behavior:contain;
  padding:clamp(18px,4vh,40px) clamp(14px,4vw,40px) 40px;
  background:
    linear-gradient(rgba(190,160,105,.10), rgba(150,120,70,.16)),
    radial-gradient(120% 90% at 50% 30%, var(--paper-light), var(--paper) 55%, #cdc098 100%);
  opacity:0; transition:opacity .45s ease;
}
.board[hidden]{display:none}
.board.show{opacity:1}
.board-top{text-align:center; margin:0 0 clamp(18px,3vh,30px); position:relative}
.btn-back{
  position:absolute; left:0; top:2px; padding:6px 14px; font-size:1.1rem;
  color:var(--ink-soft); background:rgba(255,251,240,.75);
  box-shadow:0 6px 14px -8px rgba(70,55,20,.4);
}
.btn-back:hover{color:var(--ink); background:var(--cream)}
.board-top h2{
  margin:0; font-family:"Fraunces",serif; font-weight:300; font-style:italic;
  font-size:clamp(1.3rem,3vw,1.8rem); color:var(--ink);
}
.board-sub{margin:4px 0 0; font-family:"Caveat",cursive; font-size:1.1rem; color:var(--ink-soft)}
.board-grid{
  display:grid; gap:clamp(16px,2.6vw,30px);
  grid-template-columns:repeat(auto-fill, minmax(190px, 1fr));
  max-width:1100px; margin:0 auto;
}
.pin{
  position:relative; text-align:left; cursor:pointer;
  padding:26px 16px 16px; border:0; border-radius:2px;
  background:var(--cream); color:var(--ink);
  min-height:160px; display:flex; flex-direction:column;
  box-shadow:0 14px 26px -14px rgba(70,55,20,.55), 0 2px 4px rgba(70,55,20,.12);
  rotate:var(--tilt,-1deg); transform-origin:50% 0;
  animation:pin-in .55s cubic-bezier(.2,.9,.3,1.1) both; animation-delay:var(--i,0s);
  transition:transform .25s, box-shadow .25s, rotate .25s;
}
.pin:hover{rotate:0deg; transform:translateY(-4px); box-shadow:0 20px 30px -14px rgba(70,55,20,.6)}
.pin:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
@keyframes pin-in{from{opacity:0; transform:translateY(16px) scale(.94)} to{opacity:1; transform:none}}
.pin::before{ /* pin head */
  content:""; position:absolute; left:50%; top:-7px; width:14px; height:14px; margin-left:-7px; border-radius:50%;
  background:radial-gradient(circle at 34% 32%, #ffc0c0, #d45f5f 58%, #a83f3f);
  box-shadow:0 3px 5px rgba(60,20,20,.35);
}
.pin.washi::before{
  width:62px; height:20px; margin-left:-31px; top:-9px; border-radius:2px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 5px, transparent 5px 10px), rgba(246,206,120,.75);
  box-shadow:0 1px 2px rgba(60,45,10,.18); rotate:-3deg;
}
.pin-no{margin:0; font-family:"Caveat",cursive; font-size:.95rem; color:var(--ink-soft); letter-spacing:.04em}
.pin h3{margin:1px 0 7px; font-family:"Caveat",cursive; font-weight:600; font-size:1.42rem; line-height:1.15}
.pin p{
  margin:0; font-family:"Caveat",cursive; font-size:1.1rem; line-height:1.35; color:#5c583f;
  display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}
.pin .thumb{
  width:100%; aspect-ratio:1; object-fit:cover; display:block; margin:0 0 8px;
  padding:5px; background:#fff; box-shadow:0 2px 6px rgba(70,55,20,.2);
}
.pin .pin-date{margin-top:auto; padding-top:10px; font-family:"Caveat",cursive; font-size:.95rem; color:var(--ink-soft)}
.pin.unread{background:linear-gradient(180deg, #fffdf5, #fdf4de)}
.pin.unread .pin-no::after{content:" · new"; color:var(--gold-2); font-weight:600}
.board-bottom{text-align:center; margin:clamp(26px,5vh,46px) 0 0}
.board-note{margin:6px 0 0; font-family:"Caveat",cursive; font-size:1rem; color:var(--ink-soft); opacity:.9}

@media (max-width:640px){
  .board-grid{grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px}
  .btn-back{position:static; display:inline-block; margin:0 0 12px}
  .pin{min-height:140px; padding:24px 13px 13px}
  .pin h3{font-size:1.28rem}
  .pin p{font-size:1rem; -webkit-line-clamp:3; line-clamp:3}
}
@media (prefers-reduced-motion:reduce){
  .bloom-rain{display:none}
  .bloom-card,.bloom-daisy,.pin{animation:none}
  .bloom-daisy{animation:none}
}

/* ───────────────────────── switching daisies ───────────────────────── */
.daisy-nav{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:6px 0 0; animation:rise 1.2s .45s cubic-bezier(.2,.8,.2,1) both;
}
.daisy-nav[hidden]{display:none}
.daisy-name{font-family:"Caveat",cursive; font-size:1.1rem; color:var(--ink-soft); letter-spacing:.03em}
.dots{display:inline-flex; gap:7px; pointer-events:auto}
.dot{
  width:8px; height:8px; border-radius:50%; cursor:pointer; display:block;
  background:rgba(120,100,60,.26); transition:background .25s, transform .25s;
}
.dot:hover{transform:scale(1.25)}
.dot.on{background:var(--ink-soft)}
.dot.has-new{background:var(--gold); box-shadow:0 0 0 3px rgba(242,171,44,.22)}

.arrow{
  position:fixed; z-index:5; top:50%; margin-top:-23px;
  width:46px; height:46px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,251,240,.7); color:var(--ink-soft);
  box-shadow:0 10px 20px -12px rgba(70,55,20,.5);
  opacity:.65; transition:opacity .25s, transform .25s, background .25s, color .25s;
  animation:rise 1s 1.1s cubic-bezier(.2,.8,.2,1) both;
}
.arrow[hidden]{display:none}
.arrow svg{width:22px; height:22px}
.arrow:hover{opacity:1; background:var(--cream); color:var(--ink)}
.arrow-l{left:clamp(8px,2.2vw,26px)} .arrow-l:hover{transform:translateX(-2px)}
.arrow-r{right:clamp(8px,2.2vw,26px)} .arrow-r:hover{transform:translateX(2px)}
.arrow:focus-visible{outline:2px solid var(--gold); outline-offset:3px; opacity:1}

.fade-out{animation:daisy-out .3s cubic-bezier(.4,0,1,1) forwards !important}
@keyframes daisy-out{
  to{opacity:0; scale:.8; rotate:calc(var(--dir,1) * 14deg)}
}

/* ───────────────────────── daisy two: gold engraving ───────────────────────── */
.petal .emboss{fill:none; stroke:none}
.petal .engrave{fill:none; stroke:none}
.gold-ring{transition:opacity .5s}

.daisy[data-style="gold"] .petal .blade{fill:url(#petalGold)}
.daisy[data-style="gold"] .petal.opened .blade{fill:url(#petalGoldOpened)}
.daisy[data-style="gold"] .petal .emboss{
  stroke:url(#goldEdge); stroke-width:1.6; opacity:.85;
}
.daisy[data-style="gold"] .petal .engrave{
  stroke:#c49a3e; stroke-width:1.1; opacity:.5; stroke-linecap:round;
}
.daisy[data-style="gold"] .petal .vein{stroke:#d9c08a; opacity:.85}
.daisy[data-style="gold"] .petal .shade{stroke:#ded5bd}
.daisy[data-style="gold"] #disc > circle:nth-of-type(2){fill:url(#discGold)}
.daisy[data-style="gold"] .gold-ring{opacity:.5}
.daisy[data-style="gold"] .petal:hover .emboss{opacity:1; stroke-width:2}

/* gold cards on the board */
.pin.gold{background:linear-gradient(180deg,#fffdf6,#f7f0dd); box-shadow:0 14px 26px -14px rgba(90,70,20,.55), 0 0 0 1px rgba(196,154,62,.25) inset}
.pin.gold .pin-no{color:#a3812f}
.board-group{
  grid-column:1/-1; margin:8px 0 -4px; text-align:center;
  font-family:"Caveat",cursive; font-weight:500; font-size:1.3rem; color:var(--ink-soft);
}
.board-group.gold{color:#a3812f}
.board-group::before,.board-group::after{content:" · "; opacity:.5}
@media (max-width:640px){
  .arrow{width:40px; height:40px; margin-top:-20px; opacity:.8}
  .arrow svg{width:19px; height:19px}
}
@media (prefers-reduced-motion:reduce){
  .arrow,.daisy-nav{animation:none}
  .fade-out{animation:none !important; opacity:0}
}