*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#c9a84c;--gold-b:#e8c870;--cream:#f5efe0;
  --ink:#1a1410;--dark:#04020a;
}
html,body{width:100%;height:100%;overflow:hidden;background:#000;cursor:default;}

/* ── GALLERY SHELL ── */
#gallery{position:fixed;inset:0;display:flex;transition:transform 0.95s cubic-bezier(0.77,0,0.18,1);will-change:transform;}
.poem-panel{position:relative;width:100vw;height:100vh;flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}

/* ── HEADER ── */
#hdr{position:fixed;top:1.6rem;left:50%;transform:translateX(-50%);z-index:200;text-align:center;pointer-events:none;}
#hdr h1{font-family:'Cinzel',serif;font-size:clamp(0.55rem,1.2vw,0.8rem);font-weight:400;letter-spacing:0.32em;text-transform:uppercase;color:rgba(201,168,76,0.6);}
#hdr p{font-family:'Cormorant Garamond',serif;font-size:0.68rem;letter-spacing:0.14em;color:rgba(245,239,224,0.3);margin-top:0.15rem;}

/* ── BADGE ── */
.poem-badge{position:absolute;top:1.6rem;right:2rem;text-align:right;z-index:10;opacity:0;transition:opacity 1.2s ease 0.5s;}
.poem-panel.active .poem-badge{opacity:1;}
.poem-badge .pnum{font-family:'Cinzel',serif;font-size:0.55rem;letter-spacing:0.25em;color:rgba(201,168,76,0.4);text-transform:uppercase;}
.poem-badge .ptitle{font-family:'Cinzel',serif;font-size:clamp(0.75rem,1.5vw,1rem);letter-spacing:0.1em;color:var(--gold);display:block;margin-top:0.12rem;}

/* ── POEM TEXT ── */
.poem-text{position:relative;z-index:5;max-width:min(560px,88vw);text-align:center;padding:2rem 1.5rem 5rem;max-height:90vh;overflow-y:auto;scrollbar-width:none;}
.poem-text::-webkit-scrollbar{display:none;}
.poem-line{display:block;font-family:'IM Fell English',Georgia,serif;font-size:clamp(0.92rem,1.9vw,1.22rem);line-height:1.95;opacity:0;transform:translateY(14px);transition:opacity 0.8s ease,transform 0.8s ease;}
.poem-line.sp{height:0.7em;opacity:1;transform:none;}
.poem-line.em{font-style:italic;}
.poem-panel.active .poem-line{opacity:1;transform:translateY(0);}
/* stagger 50 lines */
.poem-line:nth-child(1){transition-delay:.35s}.poem-line:nth-child(2){transition-delay:.58s}.poem-line:nth-child(3){transition-delay:.79s}.poem-line:nth-child(4){transition-delay:.98s}.poem-line:nth-child(5){transition-delay:1.15s}.poem-line:nth-child(6){transition-delay:1.30s}.poem-line:nth-child(7){transition-delay:1.44s}.poem-line:nth-child(8){transition-delay:1.57s}.poem-line:nth-child(9){transition-delay:1.69s}.poem-line:nth-child(10){transition-delay:1.80s}.poem-line:nth-child(11){transition-delay:1.91s}.poem-line:nth-child(12){transition-delay:2.01s}.poem-line:nth-child(13){transition-delay:2.11s}.poem-line:nth-child(14){transition-delay:2.21s}.poem-line:nth-child(15){transition-delay:2.31s}.poem-line:nth-child(16){transition-delay:2.41s}.poem-line:nth-child(17){transition-delay:2.51s}.poem-line:nth-child(18){transition-delay:2.61s}.poem-line:nth-child(19){transition-delay:2.71s}.poem-line:nth-child(20){transition-delay:2.81s}.poem-line:nth-child(21){transition-delay:2.91s}.poem-line:nth-child(22){transition-delay:3.01s}.poem-line:nth-child(23){transition-delay:3.11s}.poem-line:nth-child(24){transition-delay:3.21s}.poem-line:nth-child(25){transition-delay:3.31s}.poem-line:nth-child(26){transition-delay:3.41s}.poem-line:nth-child(27){transition-delay:3.51s}.poem-line:nth-child(28){transition-delay:3.61s}.poem-line:nth-child(29){transition-delay:3.71s}.poem-line:nth-child(30){transition-delay:3.81s}.poem-line:nth-child(31){transition-delay:3.91s}.poem-line:nth-child(32){transition-delay:4.01s}.poem-line:nth-child(33){transition-delay:4.11s}.poem-line:nth-child(34){transition-delay:4.21s}.poem-line:nth-child(35){transition-delay:4.31s}.poem-line:nth-child(36){transition-delay:4.41s}.poem-line:nth-child(37){transition-delay:4.51s}.poem-line:nth-child(38){transition-delay:4.61s}.poem-line:nth-child(39){transition-delay:4.71s}.poem-line:nth-child(40){transition-delay:4.81s}.poem-line:nth-child(41){transition-delay:4.91s}.poem-line:nth-child(42){transition-delay:5.01s}.poem-line:nth-child(43){transition-delay:5.11s}.poem-line:nth-child(44){transition-delay:5.21s}.poem-line:nth-child(45){transition-delay:5.31s}.poem-line:nth-child(46){transition-delay:5.41s}.poem-line:nth-child(47){transition-delay:5.51s}.poem-line:nth-child(48){transition-delay:5.61s}.poem-line:nth-child(49){transition-delay:5.71s}.poem-line:nth-child(50){transition-delay:5.81s}

/* ── NAV ── */

.ndot{width:6px;height:6px;border-radius:50%;background:rgba(201,168,76,0.22);border:1px solid rgba(201,168,76,0.38);cursor:pointer;transition:all .28s;}
.ndot.active{background:var(--gold);transform:scale(1.55);}
.narr{background:none;border:1px solid rgba(201,168,76,0.32);color:var(--gold);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:0.95rem;display:flex;align-items:center;justify-content:center;transition:all .2s;font-family:sans-serif;}
.narr:hover{background:rgba(201,168,76,0.1);border-color:var(--gold);}

/* ── GRAIN ── */
.grain{position:absolute;inset:0;z-index:4;opacity:0.028;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size:180px;animation:grainSh .4s steps(1) infinite;}
@keyframes grainSh{0%{background-position:0 0}25%{background-position:-40px 20px}50%{background-position:25px -35px}75%{background-position:-15px 45px}}

/* ── CANVAS LAYER ── */
.bg-canvas{position:absolute;inset:0;width:100%;height:100%;}

/* ════════════ PANEL THEMES ════════════ */

/* 1. FLOWERS BLOOM — spring, petals, warm green-gold */
#p-flowers{background:radial-gradient(ellipse at 50% 80%,#0a1a02,#050d01);}
#p-flowers .poem-line{color:rgba(252,248,230,0.96);text-shadow:0 2px 12px rgba(0,0,0,0.7);}
#p-flowers .poem-line.em{color:#c9e87a;text-shadow:0 0 20px rgba(140,200,40,0.4),0 2px 8px rgba(0,0,0,0.7);}

/* 2. WHEN MY HEART BLEEDS — dark storm to light */
#p-heartbleeds{background:#040208;}
#p-heartbleeds .poem-line{color:rgba(240,228,220,0.94);text-shadow:0 2px 16px rgba(0,0,0,0.9);}
#p-heartbleeds .poem-line.em{color:rgba(200,160,220,0.95);text-shadow:0 0 24px rgba(180,100,220,0.3),0 2px 12px rgba(0,0,0,0.8);}

/* 3. BEAUTIFUL LOVE — gold threads on deep warmth */
#p-beaulove{background:radial-gradient(ellipse at 50% 60%,#120804,#060202);}
#p-beaulove .poem-line{color:rgba(250,238,218,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.8);}
#p-beaulove .poem-line.em{color:var(--gold-b);text-shadow:0 0 22px rgba(201,168,76,0.4),0 2px 10px rgba(0,0,0,0.8);}

/* 4. MORN — rebuilt with canvas (see JS) */
#p-morn{background:#040200;}
#p-morn .poem-line{color:rgba(252,244,220,0.97);text-shadow:0 2px 14px rgba(0,0,0,0.85),0 0 40px rgba(0,0,0,0.7);}
#p-morn .poem-line.em{color:var(--gold-b);text-shadow:0 0 22px rgba(201,168,76,0.4),0 2px 14px rgba(0,0,0,0.8);}
#p-morn .poem-text{text-align:left;}

/* 5. LOVE LIKE NO OTHER — heartbeat red */
#p-loveother{background:radial-gradient(ellipse at 50% 50%,#120008,#04000a);}
#p-loveother .poem-line{color:rgba(248,230,235,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.8);}
#p-loveother .poem-line.em{color:rgba(255,130,150,0.95);text-shadow:0 0 24px rgba(255,80,100,0.35),0 2px 10px rgba(0,0,0,0.8);}

/* 6. THE JOURNEY — deep space ship */
#p-journey{background:#000008;}
#p-journey .poem-line{color:rgba(230,228,245,0.96);text-shadow:0 2px 16px rgba(0,0,0,0.9);}
#p-journey .poem-line.em{color:var(--gold-b);text-shadow:0 0 20px rgba(201,168,76,0.4),0 2px 10px rgba(0,0,0,0.8);}

/* 7. SHARED HUMANITY — globe, warm earth */
#p-humanity{background:radial-gradient(ellipse at 50% 40%,#02080e,#010306);}
#p-humanity .poem-line{color:rgba(235,238,248,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.85);}
#p-humanity .poem-line.em{color:rgba(120,200,255,0.95);text-shadow:0 0 22px rgba(80,160,255,0.3),0 2px 10px rgba(0,0,0,0.8);}

/* 8. KINDNESS OF STRANGER — warm doorway amber */
#p-kindness{background:radial-gradient(ellipse at 50% 100%,#180c02,#060200);}
#p-kindness .poem-line{color:rgba(252,242,225,0.97);text-shadow:0 2px 14px rgba(0,0,0,0.8);}
#p-kindness .poem-line.em{color:rgba(255,200,100,0.95);text-shadow:0 0 22px rgba(255,160,50,0.4),0 2px 10px rgba(0,0,0,0.8);}

/* 9. FLUTTER — quantum particles teal/violet */
#p-flutter{background:#010108;}
#p-flutter .poem-line{color:rgba(225,235,248,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.85);}
#p-flutter .poem-line.em{color:rgba(140,220,255,0.95);text-shadow:0 0 22px rgba(80,180,255,0.4),0 2px 10px rgba(0,0,0,0.8);}

/* 10. PRAYER FOR FRIENDS — candlelight warm */
#p-prayer{background:radial-gradient(ellipse at 50% 80%,#100802,#040100);}
#p-prayer .poem-line{color:rgba(252,240,218,0.97);text-shadow:0 2px 14px rgba(0,0,0,0.8);}
#p-prayer .poem-line.em{color:var(--gold-b);text-shadow:0 0 20px rgba(201,168,76,0.45),0 2px 10px rgba(0,0,0,0.8);}

/* 11. WHERE IS MY GOD — morphing nature, deep blue */
#p-wheregod{background:#020508;}
#p-wheregod .poem-line{color:rgba(230,240,250,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.85);}
#p-wheregod .poem-line.em{color:rgba(160,230,200,0.95);text-shadow:0 0 22px rgba(80,200,160,0.35),0 2px 10px rgba(0,0,0,0.8);}

/* 12. DEATH — black water, crack of light */
#p-death{background:#010101;}
#p-death .poem-line{color:rgba(200,195,210,0.92);text-shadow:0 2px 18px rgba(0,0,0,0.95);}
#p-death .poem-line.em{color:rgba(180,160,220,0.9);text-shadow:0 0 24px rgba(140,100,200,0.35),0 2px 12px rgba(0,0,0,0.9);}

/* 13. A NEW DAY — proclamation, dawn gold */
#p-newday{background:radial-gradient(ellipse at 50% 100%,#120a00,#040200);}
#p-newday .poem-line{color:rgba(252,242,220,0.97);text-shadow:0 2px 14px rgba(0,0,0,0.8);}
#p-newday .poem-line.em{color:var(--gold-b);text-shadow:0 0 22px rgba(201,168,76,0.5),0 2px 10px rgba(0,0,0,0.8);}

/* 14. HEART OF HEAVEN — waveform, blue-gold */
#p-heartheavy{background:#010208;}
#p-heartheavy .poem-line{color:rgba(228,235,252,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.85);}
#p-heartheavy .poem-line.em{color:var(--gold-b);text-shadow:0 0 22px rgba(201,168,76,0.45),0 2px 10px rgba(0,0,0,0.8);}

/* 15. SOVEREIGN — already built, star field */
#p-sovereign{background:#00000a;}
#p-sovereign .poem-line{color:rgba(240,230,210,0.94);text-shadow:0 0 30px rgba(0,0,20,.9),0 2px 8px rgba(0,0,0,.8);}
#p-sovereign .poem-line.em{color:var(--gold-b);text-shadow:0 0 20px rgba(201,168,76,.5),0 2px 8px rgba(0,0,0,.8);font-size:clamp(1.0rem,2.2vw,1.38rem);}

/* 16. A BROTHER — lantern warm amber */
#p-brother{background:radial-gradient(ellipse at 50% 70%,#130800,#050100);}
#p-brother .poem-line{color:rgba(252,238,215,0.97);text-shadow:0 2px 14px rgba(0,0,0,0.8);}
#p-brother .poem-line.em{color:rgba(255,195,90,0.96);text-shadow:0 0 22px rgba(255,160,40,0.4),0 2px 10px rgba(0,0,0,0.8);}

/* 17. GOD OF PRESENCE — already built */
#p-presence{background:#020508;}
#p-presence .poem-line{
  color:#ffffff;
  text-shadow:
    0 0 8px rgba(0,0,0,1),
    0 0 16px rgba(0,0,0,0.95),
    0 0 32px rgba(0,0,0,0.85),
    0 2px 4px rgba(0,0,0,1);
}
#p-presence .poem-line.em{
  color:#ffffff;
  font-size:clamp(1.0rem,2.1vw,1.35rem);
  text-shadow:
    0 0 8px rgba(0,0,0,1),
    0 0 20px rgba(0,0,0,0.95),
    0 0 40px rgba(0,0,0,0.85),
    0 2px 4px rgba(0,0,0,1);
  letter-spacing:0.06em;
}

/* 18. VESSEL — water filling with light */
#p-vessel{background:radial-gradient(ellipse at 50% 100%,#020814,#000204);}
#p-vessel .poem-line,#p-vessel-title .poem-line{color:rgba(225,238,252,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.85);}
#p-vessel .poem-line.em,#p-vessel-title .poem-line.em{color:rgba(140,210,255,0.96);text-shadow:0 0 24px rgba(80,160,255,0.4),0 2px 10px rgba(0,0,0,0.8);}

/* 19. GOD SENT YOU — hands through rain, clearing */
#p-godsent{background:#020408;}
#p-godsent .poem-line{color:rgba(232,240,252,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.85);}
#p-godsent .poem-line.em{color:var(--gold-b);text-shadow:0 0 22px rgba(201,168,76,0.4),0 2px 10px rgba(0,0,0,0.8);}

/* 20. GIFT SUPREME — manger star, gold thread */
#p-gift{background:radial-gradient(ellipse at 50% 20%,#0a0602,#020100);}
#p-gift .poem-line{color:rgba(252,240,218,0.97);text-shadow:0 2px 14px rgba(0,0,0,0.8);}
#p-gift .poem-line.em{color:var(--gold-b);text-shadow:0 0 24px rgba(201,168,76,0.5),0 2px 10px rgba(0,0,0,0.8);}

/* 21. PEOPLE LIKE ME — split: cold blue left, warm right */
#p-people{background:#010308;}
#p-people .poem-line{color:rgba(200,220,240,0.95);text-shadow:0 2px 14px rgba(0,0,0,0.9);}
#p-people .poem-line.em{color:rgba(100,180,255,0.96);text-shadow:0 0 20px rgba(50,120,255,0.4),0 2px 10px rgba(0,0,0,0.85);}

/* 22. SOOTHING BALM — rain on water, warmth */
#p-balm{background:#010408;}
#p-balm .poem-line{color:rgba(228,238,248,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.85);}
#p-balm .poem-line.em{color:rgba(180,230,255,0.95);text-shadow:0 0 22px rgba(120,200,255,0.35),0 2px 10px rgba(0,0,0,0.8);}

/* 23. FLOWERS (anniv) — petals, gold-white */
#p-flowers2{background:radial-gradient(ellipse at 50% 60%,#0a0802,#030200);}
#p-flowers2 .poem-line{color:rgba(252,245,228,0.97);text-shadow:0 2px 14px rgba(0,0,0,0.8);}
#p-flowers2 .poem-line.em{color:var(--gold-b);text-shadow:0 0 22px rgba(201,168,76,0.45),0 2px 10px rgba(0,0,0,0.8);}

/* 24. BIRTHDAYS ARE LIKE FLOWERS — angelic light, fireworks */
#p-bdays{background:radial-gradient(ellipse at 50% 30%,#080610,#020106);}
#p-bdays .poem-line{color:rgba(245,240,255,0.97);text-shadow:0 2px 14px rgba(0,0,0,0.8);}
#p-bdays .poem-line.em{color:rgba(220,190,255,0.96);text-shadow:0 0 24px rgba(180,120,255,0.45),0 2px 10px rgba(0,0,0,0.8);}

/* 25. OMOSEDE — regal purple-gold */
#p-omosede{background:radial-gradient(ellipse at 50% 30%,#0c0414,#030008);}
#p-omosede .poem-line{color:rgba(248,235,255,0.97);text-shadow:0 2px 14px rgba(0,0,0,0.8);}
#p-omosede .poem-line.em{color:rgba(255,200,100,0.96);text-shadow:0 0 24px rgba(201,168,76,0.45),0 2px 10px rgba(0,0,0,0.8);}

/* 26. FORTUNE OF KNOWING YOU — two stars converging */
#p-fortune{background:#000006;}
#p-fortune .poem-line{color:rgba(230,235,248,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.85);}
#p-fortune .poem-line.em{color:var(--gold-b);text-shadow:0 0 22px rgba(201,168,76,0.45),0 2px 10px rgba(0,0,0,0.8);}

/* 27. 81 — great tree, deep earth */
#p-81{background:radial-gradient(ellipse at 50% 100%,#030e02,#010400);}
#p-81 .poem-line{color:rgba(235,248,228,0.96);text-shadow:0 2px 14px rgba(0,0,0,0.85);}
#p-81 .poem-line.em{color:rgba(160,230,120,0.96);text-shadow:0 0 22px rgba(100,200,60,0.35),0 2px 10px rgba(0,0,0,0.8);}

/* special overlays */
#supernova{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse at var(--sx,50%) var(--sy,50%),rgba(255,240,180,.95) 0%,rgba(201,168,76,.5) 20%,transparent 60%);opacity:0;pointer-events:none;transition:opacity .08s ease;}
#lightning{position:absolute;inset:0;z-index:8;background:rgba(220,240,255,.9);opacity:0;pointer-events:none;}
.biome-wash{position:absolute;inset:0;opacity:0;transition:opacity 3.5s ease;pointer-events:none;}
.biome-wash.active{opacity:1;}
.biome-hills{background:linear-gradient(180deg,#071407 0%,#0f2a0a 40%,#1a3d10 70%,#0d2008 100%);}
.biome-ocean{background:linear-gradient(180deg,#010610 0%,#030f20 30%,#052035 60%,#031525 100%);}
.biome-desert{background:linear-gradient(180deg,#120b02 0%,#2a1a06 30%,#3d2808 60%,#4a3210 100%);}
.biome-snow{background:linear-gradient(180deg,#06060f 0%,#0e0e1e 30%,#161628 60%,#1e1e32 100%);}
.biome-forest{background:linear-gradient(180deg,#010601 0%,#060f06 30%,#0a180a 60%,#061006 100%);}
.presence-shaft{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2px;height:100%;background:linear-gradient(to bottom,rgba(201,168,76,.9) 0%,rgba(201,168,76,.25) 35%,transparent 80%);filter:blur(1.5px);animation:shaftB 5s ease-in-out infinite alternate;pointer-events:none;z-index:3;}
.presence-shaft::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);width:80px;height:240px;background:radial-gradient(ellipse,rgba(201,168,76,.12) 0%,transparent 100%);filter:blur(12px);}
@keyframes shaftB{from{opacity:.5;width:1px}to{opacity:1;width:3px}}
.god-name{position:absolute;font-family:'Cinzel',serif;font-size:clamp(.55rem,1vw,.75rem);letter-spacing:.22em;color:rgba(201,168,76,.18);pointer-events:none;animation:nameRise linear forwards;white-space:nowrap;z-index:6;}
@keyframes nameRise{0%{opacity:0;transform:translateY(0) scale(.85)}15%{opacity:1}80%{opacity:.7}100%{opacity:0;transform:translateY(-100px) scale(1.08)}}

/* People Like Me — split screen */
#people-cold{position:absolute;inset:0 50% 0 0;background:linear-gradient(180deg,#010a18,#020614);border-right:1px solid rgba(60,120,200,.15);}
#people-warm{position:absolute;inset:0 0 0 50%;background:linear-gradient(180deg,#120600,#080200);opacity:0;transition:opacity 4s ease;}
#people-warm.shown{opacity:1;}
.machine-line{position:absolute;height:1px;left:0;right:50%;background:rgba(40,100,200,.12);animation:machinePulse 2s ease-in-out infinite;}
@keyframes machinePulse{0%,100%{opacity:.3}50%{opacity:.8}}
.ecg{position:absolute;top:50%;left:0;width:50%;pointer-events:none;z-index:2;}

/* Petal floater */
.petal{position:absolute;pointer-events:none;animation:petalFall linear forwards;}
@keyframes petalFall{0%{transform:translateY(-30px) rotate(0deg) translateX(0);opacity:0}10%{opacity:1}90%{opacity:.8}100%{transform:translateY(110vh) rotate(var(--pr,360deg)) translateX(var(--px,30px));opacity:0}}

/* Rain drop */
.raindrop{position:absolute;width:1px;background:rgba(180,210,255,.3);animation:rainFall linear infinite;pointer-events:none;}
@keyframes rainFall{from{transform:translateY(-10px)}to{transform:translateY(110vh)}}

/* Candle flicker */
.candle-flame{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);width:18px;height:36px;background:radial-gradient(ellipse at 50% 80%,#fff8c0,#ffb020 40%,rgba(255,80,0,.6) 70%,transparent 100%);border-radius:50% 50% 20% 20%;animation:flameFl 1.2s ease-in-out infinite alternate;filter:blur(.8px);z-index:3;}
@keyframes flameFl{0%{transform:translateX(-50%) scaleX(1) scaleY(1);opacity:.9}50%{transform:translateX(-52%) scaleX(.85) scaleY(1.1);opacity:1}100%{transform:translateX(-48%) scaleX(1.1) scaleY(.92);opacity:.85}}
.candle-glow{position:absolute;bottom:6%;left:50%;transform:translateX(-50%);width:200px;height:200px;background:radial-gradient(ellipse,rgba(255,180,50,.12) 0%,transparent 70%);pointer-events:none;z-index:2;animation:glowPulse 1.8s ease-in-out infinite alternate;}
@keyframes glowPulse{from{opacity:.6;transform:translateX(-50%) scale(1)}to{opacity:1;transform:translateX(-50%) scale(1.12)}}

/* Heartbeat wave */
.hb-wave{position:absolute;bottom:15%;left:0;width:100%;height:60px;pointer-events:none;z-index:3;}

/* Star connecting line (fortune) */
.star-a,.star-b{position:absolute;border-radius:50%;background:#fff;pointer-events:none;z-index:3;}

/* Tree (81) */
#tree-canvas{position:absolute;inset:0;width:100%;height:100%;}


/* ════════════════════════════════════════
   MOBILE OPTIMISATION
   ════════════════════════════════════════ */

/* ── Core poem text ── */
@media (max-width: 768px) {

  /* Larger base font on small screens */
  .poem-line {
    font-size: clamp(1.05rem, 4.2vw, 1.22rem);
    line-height: 2.0;
  }

  /* More breathing room from nav bar */
  .poem-text {
    padding: 1.4rem 1.2rem 6rem;
    max-height: 85vh;
    max-width: 94vw;
  }

  /* Badge — move below header, away from hamburger */
  .poem-badge {
    top: auto;
    bottom: 5.5rem;
    right: 1rem;
    text-align: right;
  }
  .poem-badge .ptitle {
    font-size: clamp(0.65rem, 3vw, 0.85rem);
  }

  /* Nav bar — tighter padding */
  #nav-bar {
    padding: .7rem 1rem;
  }
  #nav-current-title {
    font-size: clamp(0.6rem, 3.2vw, 0.82rem);
  }
  #nav-fraction {
    font-size: 0.6rem;
  }

  /* Hamburger — slightly smaller */
  #nav-trigger {
    top: 1rem;
    right: 1rem;
    width: 36px;
    height: 36px;
  }

  /* Header title — hide on very small screens to save space */
  #hdr p { display: none; }
  #hdr h1 { font-size: 0.5rem; letter-spacing: 0.2em; }

  /* Drawer items — bigger tap targets */
  .drawer-item {
    padding: .9rem 1.5rem;
    font-size: 1.05rem;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .drawer-item.active {
    padding-left: 1.75rem;
  }
  .drawer-item:hover {
    padding-left: 1.75rem;
  }

  /* Nav arrows — bigger tap targets */
  .nav-step {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
  }

  /* FAB buttons — tighter on mobile */
  #support-fab {
    bottom: 5rem;
    left: 0.8rem;
  }
  .fab-btn {
    font-size: 0.55rem;
    padding: .4rem .7rem .4rem .5rem;
  }
  .fab-icon {
    width: 18px;
    height: 18px;
    font-size: 0.75rem;
  }
}

/* ── Extra small — iPhone SE etc ── */
@media (max-width: 390px) {
  .poem-line {
    font-size: clamp(1.0rem, 4.5vw, 1.15rem);
    line-height: 1.9;
  }
  .poem-text {
    padding: 1rem 1rem 6rem;
  }
  /* Hide FAB labels, show icons only */
  .fab-btn span:not(.fab-icon) {
    display: none;
  }
  .fab-btn {
    padding: .5rem;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    justify-content: center;
  }
}

/* ── Landscape mobile — short viewport ── */
@media (max-width: 768px) and (orientation: landscape) {
  .poem-text {
    max-height: 78vh;
    padding: 0.8rem 1.2rem 5rem;
  }
  .poem-line {
    line-height: 1.7;
  }
  #hdr { display: none; }
}


/* ── HAMBURGER TRIGGER ── */
#nav-trigger{
  position:fixed;top:1.6rem;right:1.8rem;z-index:300;
  background:rgba(13,10,18,.75);
  border:1px solid rgba(201,168,76,.3);
  border-radius:8px;
  width:40px;height:40px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:5px;
  cursor:pointer;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  transition:all .2s;
  padding:0;
}
#nav-trigger:hover{border-color:var(--gold);background:rgba(201,168,76,.1);}
#nav-trigger span{
  display:block;width:18px;height:1.5px;
  background:var(--gold);border-radius:2px;
  transition:all .3s;
}
#nav-trigger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
#nav-trigger.open span:nth-child(2){opacity:0;}
#nav-trigger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}

/* ── BOTTOM BAR ── */
#nav-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem 1.5rem;
  background:rgba(4,2,10,.85);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-top:1px solid rgba(201,168,76,.12);
}
.nav-step{
  background:none;border:1px solid rgba(201,168,76,.28);
  color:var(--gold);width:36px;height:36px;border-radius:50%;
  cursor:pointer;font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;font-family:sans-serif;flex-shrink:0;
}
.nav-step:hover{background:rgba(201,168,76,.1);border-color:var(--gold);}
#nav-position{
  display:flex;flex-direction:column;align-items:center;gap:.18rem;
  flex:1;padding:0 1rem;overflow:hidden;
}
#nav-current-title{
  font-family:'Cinzel',serif;
  font-size:clamp(.6rem,1.4vw,.82rem);
  font-weight:400;letter-spacing:.1em;
  color:var(--gold);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;text-align:center;
}
#nav-fraction{
  font-family:'Cormorant Garamond',serif;
  font-size:.65rem;letter-spacing:.12em;
  color:rgba(245,239,224,.3);
}

/* ── DRAWER OVERLAY ── */
#drawer-overlay{
  position:fixed;inset:0;z-index:400;
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .35s ease;
}
#drawer-overlay.open{opacity:1;pointer-events:all;}

/* ── DRAWER PANEL ── */
#drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:500;
  width:min(340px,88vw);
  background:rgba(8,5,14,.97);
  border-left:1px solid rgba(201,168,76,.18);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .38s cubic-bezier(.4,0,.2,1);
  box-shadow:-20px 0 60px rgba(0,0,0,.7);
}
#drawer.open{transform:translateX(0);}

#drawer-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1.4rem 1.5rem 1rem;
  border-bottom:1px solid rgba(201,168,76,.12);
  flex-shrink:0;
}
#drawer-title{
  font-family:'Cinzel',serif;
  font-size:.78rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);opacity:.7;
}
#drawer-close{
  background:none;border:none;cursor:pointer;
  color:rgba(245,239,224,.4);font-size:1rem;
  display:flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:4px;
  transition:color .2s;font-family:sans-serif;
}
#drawer-close:hover{color:var(--cream);}

#drawer-list{
  list-style:none;overflow-y:auto;flex:1;
  padding:.5rem 0 2rem;
  scrollbar-width:thin;
  scrollbar-color:rgba(201,168,76,.2) transparent;
}
#drawer-list::-webkit-scrollbar{width:4px;}
#drawer-list::-webkit-scrollbar-thumb{background:rgba(201,168,76,.2);border-radius:2px;}

.drawer-item{
  padding:.75rem 1.5rem;
  font-family:'Cormorant Garamond',serif;
  font-size:1rem;font-weight:400;
  color:rgba(245,239,224,.55);
  cursor:pointer;
  transition:all .18s;
  border-left:2px solid transparent;
  letter-spacing:.03em;
  line-height:1.3;
}
.drawer-item:hover{
  color:var(--cream);
  background:rgba(201,168,76,.06);
  border-left-color:rgba(201,168,76,.3);
  padding-left:1.75rem;
}
.drawer-item.active{
  color:var(--gold);
  border-left-color:var(--gold);
  background:rgba(201,168,76,.08);
  padding-left:1.75rem;
  font-weight:600;
}

/* ── TIP & BOOK FLOATING ICON ── */
#support-fab{
  position:fixed;bottom:4.8rem;left:1.2rem;z-index:200;
  display:flex;flex-direction:column;gap:.6rem;
  align-items:flex-start;
}
.fab-btn{
  display:flex;align-items:center;gap:.55rem;
  padding:.5rem .9rem .5rem .6rem;
  border-radius:24px;
  font-family:'Cinzel',serif;
  font-size:.62rem;font-weight:500;letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;border:none;
  transition:all .22s;
  white-space:nowrap;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 20px rgba(0,0,0,.5);
}
.fab-home{
  background:rgba(120,160,255,.12);
  border:1px solid rgba(120,160,255,.32);
  color:rgba(180,210,255,.9);
}
.fab-home:hover{
  background:rgba(120,160,255,.24);
  border-color:rgba(120,160,255,.6);
  color:#fff;transform:translateX(3px);
}
.fab-tip{
  background:rgba(0,210,100,.15);
  border:1px solid rgba(0,210,100,.35);
  color:rgba(180,255,200,.9);
}
.fab-tip:hover{
  background:rgba(0,210,100,.28);
  border-color:rgba(0,210,100,.6);
  color:#fff;transform:translateX(3px);
}
.fab-book{
  background:rgba(201,168,76,.12);
  border:1px solid rgba(201,168,76,.32);
  color:rgba(232,200,112,.9);
}
.fab-book:hover{
  background:rgba(201,168,76,.24);
  border-color:rgba(201,168,76,.6);
  color:#fff;transform:translateX(3px);
}
.fab-icon{
  width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:.85rem;
}

/* ── DRAWER FOOTER ── */
#drawer-footer{
  flex-shrink:0;
  padding:1rem 1.5rem 1.4rem;
  border-top:1px solid rgba(201,168,76,.1);
  display:flex;flex-direction:column;gap:.7rem;
}
#drawer-footer a{
  display:flex;align-items:center;gap:.7rem;
  padding:.65rem 1rem;border-radius:10px;
  text-decoration:none;
  font-family:'Cormorant Garamond',serif;
  font-size:.92rem;font-weight:500;
  transition:all .18s;
}
.dfooter-tip{
  background:rgba(0,210,100,.08);
  border:1px solid rgba(0,210,100,.2);
  color:rgba(180,255,200,.85);
}
.dfooter-tip:hover{background:rgba(0,210,100,.16);color:#fff;}
.dfooter-book{
  background:rgba(201,168,76,.08);
  border:1px solid rgba(201,168,76,.2);
  color:rgba(232,200,112,.85);
}
.dfooter-book:hover{background:rgba(201,168,76,.16);color:#fff;}
.dfooter-icon{
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;font-size:1rem;
}
.dfooter-tip .dfooter-icon{background:rgba(0,210,100,.15);}
.dfooter-book .dfooter-icon{background:rgba(201,168,76,.15);}
.dfooter-home{
  background:rgba(120,160,255,.08);
  border:1px solid rgba(120,160,255,.2);
  color:rgba(180,210,255,.85);
}
.dfooter-home:hover{background:rgba(120,160,255,.16);color:#fff;}
.dfooter-home .dfooter-icon{background:rgba(120,160,255,.15);}
.dfooter-text strong{display:block;font-size:.9rem;}
.dfooter-text span{font-size:.75rem;opacity:.6;font-style:italic;}

/* ── NIOBE ── */
#p-niobe{background:#030202;}
#p-niobe .poem-line{
  color:#ffffff;
  text-shadow:0 0 8px rgba(0,0,0,1),0 0 18px rgba(0,0,0,.98),0 0 36px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,1);
}
#p-niobe .poem-line.em{
  color:#e8c870;
  font-size:clamp(1.0rem,2.1vw,1.32rem);
  letter-spacing:.05em;
  text-shadow:0 0 8px rgba(0,0,0,1),0 0 20px rgba(0,0,0,.98),0 0 40px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,1);
}

/* ── PORTLAND ── */
#p-portland{background:#1a1e1c;}
#p-portland .poem-line{
  color:#f0f4f2;
  text-shadow:0 0 8px rgba(0,0,0,.95),0 0 18px rgba(0,0,0,.88),0 0 36px rgba(0,0,0,.75),0 2px 4px rgba(0,0,0,.95);
}
#p-portland .poem-line.em{
  color:#c8ddd0;
  font-size:clamp(.95rem,2.0vw,1.28rem);
  letter-spacing:.04em;
  text-shadow:0 0 8px rgba(0,0,0,.95),0 0 20px rgba(0,0,0,.88),0 0 40px rgba(0,0,0,.75),0 2px 4px rgba(0,0,0,.95);
}

/* ── A GIFT SUPREME — manger image override ── */
#p-gift .poem-line{
  color:#ffffff;
  text-shadow:0 0 8px rgba(0,0,0,1),0 0 18px rgba(0,0,0,.96),0 0 36px rgba(0,0,0,.88),0 2px 4px rgba(0,0,0,1);
}
#p-gift .poem-line.em{
  color:#f5e4b0;
  font-size:clamp(1.0rem,2.1vw,1.32rem);
  letter-spacing:.05em;
  text-shadow:0 0 8px rgba(0,0,0,1),0 0 20px rgba(0,0,0,.96),0 0 40px rgba(0,0,0,.88),0 2px 4px rgba(0,0,0,1);
}

/* ── SOVEREIGN — cosmos image override ── */
#p-sovereign .poem-line{
  color:#ffffff;
  text-shadow:0 0 8px rgba(0,0,0,1),0 0 20px rgba(0,0,0,.97),0 0 40px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,1);
}
#p-sovereign .poem-line.em{
  color:#f5e4a0;
  font-size:clamp(1.0rem,2.2vw,1.38rem);
  letter-spacing:.06em;
  text-shadow:0 0 8px rgba(0,0,0,1),0 0 24px rgba(0,0,0,.97),0 0 48px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,1);
}

/* ── LIKE A PETAL ON A ROSE ── */
#p-petal .poem-line{
  color:#f0eaff;
  text-shadow:0 0 8px rgba(5,0,15,1),0 0 20px rgba(5,0,15,.97),0 0 40px rgba(5,0,15,.9),0 2px 4px rgba(5,0,15,1);
}
#p-petal .poem-line.em{
  color:#e8d0ff;
  font-size:clamp(1.05rem,2.2vw,1.42rem);
  letter-spacing:.06em;
  text-shadow:0 0 8px rgba(5,0,15,1),0 0 24px rgba(5,0,15,.97),0 0 48px rgba(5,0,15,.9),0 2px 4px rgba(5,0,15,1);
}

/* ── A NEW DAY — descending shaft image override ── */
#p-newday .poem-line{
  color:#ffffff;
  text-shadow:0 0 8px rgba(0,0,0,1),0 0 20px rgba(0,0,0,.97),0 0 40px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,1);
}
#p-newday .poem-line.em{
  color:#f5e8a0;
  font-size:clamp(1.0rem,2.1vw,1.34rem);
  letter-spacing:.05em;
  text-shadow:0 0 8px rgba(0,0,0,1),0 0 22px rgba(0,0,0,.97),0 0 44px rgba(0,0,0,.9),0 2px 4px rgba(0,0,0,1);
}

/* ── WHEN MY HEART BLEEDS — image override ── */
#p-heartbleeds .poem-line{
  color:#e8eeff;
  text-shadow:0 0 8px rgba(0,0,0,1),0 0 20px rgba(0,0,0,.97),0 0 40px rgba(0,0,0,.92),0 2px 4px rgba(0,0,0,1);
}
#p-heartbleeds .poem-line.em{
  color:#c8d8ff;
  font-size:clamp(1.0rem,2.1vw,1.32rem);
  letter-spacing:.04em;
  text-shadow:0 0 8px rgba(0,0,0,1),0 0 22px rgba(0,0,0,.97),0 0 44px rgba(0,0,0,.92),0 2px 4px rgba(0,0,0,1);
}

/* ── BACKGROUND VIDEO ── */
.bg-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:0;
}

/* ── SILENT O — epigraph panel ── */
#p-silento{background:#00050f;}
#p-silento .poem-line{
  color:#ffffff;
  text-shadow:0 0 12px rgba(0,5,20,.6),0 2px 6px rgba(0,0,0,.5);
  font-size:clamp(1.1rem,2.4vw,1.48rem);
  line-height:2.2;
  letter-spacing:.04em;
}
#p-silento .poem-line.em{
  color:#e8d88a;
  font-size:clamp(1.15rem,2.5vw,1.55rem);
  letter-spacing:.1em;
  text-shadow:0 0 14px rgba(0,5,20,.55),0 2px 6px rgba(0,0,0,.45);
}
/* No badge number — this is the threshold, not a numbered poem */
#p-silento .poem-badge .pnum{display:none;}
#p-silento .poem-badge .ptitle{
  font-size:clamp(.8rem,1.8vw,1.1rem);
  letter-spacing:.18em;
  opacity:.6;
}
/* ── VISIT STATS ── */
#visit-stats{
  position:fixed;bottom:.7rem;right:1.2rem;z-index:200;
  font-family:'Cinzel',serif;font-size:.58rem;letter-spacing:.12em;
  color:rgba(201,168,76,.45);
  pointer-events:none;
}