/* Rose & Blade v5 — Zero JS animation loops */

:root{
  --fd:'Cinzel Decorative',serif;
  --fs:'Cinzel','Noto Serif SC',serif;
  --fb:'Cormorant Garamond','Noto Serif SC',serif;
  --fz:'Noto Serif SC',serif;
  --fm:'Montserrat','Space Grotesk',sans-serif;
  --fo:'DM Mono',monospace;
  --fp:'Pinyon Script',cursive;
  --ease:cubic-bezier(.16,1,.3,1);
}

[data-theme="crimson"]{--cv:#030000;--ca:#E60012;--cg:rgba(200,30,20,.18);--ct:#F4F4F0;--cm:#7A7A7A;--cb:rgba(244,244,240,.1);--cgl:rgba(3,2,2,.55);--co:#C9A96E;--cr:#8B1A1A;--c1:#6a1515;--c2:#4a3010;--cbase:#120404}
[data-theme="frost"]{--cv:#03050a;--ca:#88C0D0;--cg:rgba(60,120,160,.18);--ct:#E5E9F0;--cm:#708090;--cb:rgba(136,192,208,.1);--cgl:rgba(5,7,12,.55);--co:#88C0D0;--cr:#4C6E8F;--c1:#1a4878;--c2:#2a3a58;--cbase:#060a14}
[data-theme="verdant"]{--cv:#030503;--ca:#D4AF37;--cg:rgba(80,100,30,.18);--ct:#E2DDD2;--cm:#6B705C;--cb:rgba(200,180,80,.1);--cgl:rgba(5,8,5,.55);--co:#D4AF37;--cr:#3A5F3A;--c1:#2a4018;--c2:#403010;--cbase:#080a06}
[data-theme="amethyst"]{--cv:#05020a;--ca:#9d00ff;--cg:rgba(100,20,180,.18);--ct:#d8d8e6;--cm:#5e5e7a;--cb:rgba(157,0,255,.1);--cgl:rgba(8,3,15,.55);--co:#b983ff;--cr:#6B2FA0;--c1:#4a1080;--c2:#201838;--cbase:#0a0410}
[data-theme="aurum"]{--cv:#0a0700;--ca:#D4A030;--cg:rgba(180,140,40,.18);--ct:#F0E8D8;--cm:#8A7A60;--cb:rgba(212,160,48,.1);--cgl:rgba(10,7,0,.55);--co:#D4A030;--cr:#7A5A1A;--c1:#6a4810;--c2:#3a2010;--cbase:#100c04}
[data-theme="sakura"]{--cv:#0a0306;--ca:#F27C9B;--cg:rgba(242,124,155,.18);--ct:#F8EDF0;--cm:#9A7080;--cb:rgba(242,124,155,.1);--cgl:rgba(10,3,6,.55);--co:#E8A0B0;--cr:#A04060;--c1:#6a2040;--c2:#4a1848;--cbase:#100610}
[data-theme="cyan"]{--cv:#020808;--ca:#00CED1;--cg:rgba(0,206,209,.18);--ct:#E0F4F4;--cm:#608888;--cb:rgba(0,206,209,.1);--cgl:rgba(2,8,8,.55);--co:#40E0D0;--cr:#1A6B6B;--c1:#0a4848;--c2:#182838;--cbase:#040e0e}
[data-theme="silver"]{--cv:#060608;--ca:#A8B8C8;--cg:rgba(168,184,200,.22);--ct:#E8ECF0;--cm:#707880;--cb:rgba(168,184,200,.12);--cgl:rgba(6,6,8,.55);--co:#D0B890;--cr:#4A5868;--c1:#2a3848;--c2:#282018;--cbase:#0a0c10}
[data-theme="dawnblue"]{--cv:#06030a;--ca:#A0C4F0;--cg:rgba(160,196,240,.22);--ct:#F0E8F4;--cm:#8878A0;--cb:rgba(180,160,220,.12);--cgl:rgba(6,3,10,.55);--co:#E0A0C0;--cr:#6A4090;--c1:#283878;--c2:#502848;--cbase:#0a0810}
[data-theme="jadecrimson"]{--cv:#040200;--ca:#50C878;--cg:rgba(80,200,120,.15);--ct:#F0EDE8;--cm:#707860;--cb:rgba(80,200,120,.1);--cgl:rgba(4,2,0,.55);--co:#C06040;--cr:#2A5A3A;--c1:#185028;--c2:#482018;--cbase:#080a06}
[data-theme="sunset"]{--cv:#0a0204;--ca:#FF8C42;--cg:rgba(255,140,66,.2);--ct:#FFF0E8;--cm:#A08070;--cb:rgba(255,140,66,.1);--cgl:rgba(10,2,4,.55);--co:#FF5E8A;--cr:#C04060;--c1:#783818;--c2:#581838;--cbase:#140608}
[data-theme="aurora"]{--cv:#020608;--ca:#6EE7B7;--cg:rgba(110,231,183,.18);--ct:#E8F8F4;--cm:#608880;--cb:rgba(110,231,183,.1);--cgl:rgba(2,6,8,.55);--co:#A78BFA;--cr:#1A5A5A;--c1:#104838;--c2:#282060;--cbase:#060a0c}
[data-theme="ocean"]{--cv:#020410;--ca:#38BDF8;--cg:rgba(56,189,248,.18);--ct:#E8F0FA;--cm:#607898;--cb:rgba(56,189,248,.1);--cgl:rgba(2,4,16,.55);--co:#22D3EE;--cr:#1A3A8A;--c1:#184878;--c2:#0a2848;--cbase:#040818}
[data-theme="peach"]{--cv:#0a0506;--ca:#FCA5A5;--cg:rgba(252,165,165,.22);--ct:#FFF5F5;--cm:#A88888;--cb:rgba(252,165,165,.12);--cgl:rgba(10,5,6,.55);--co:#F0C870;--cr:#8A4060;--c1:#6a2830;--c2:#483018;--cbase:#120808}
[data-theme="rosequartz"]{--cv:#0a0508;--ca:#ff64ad;--cg:rgba(255,100,173,.18);--ct:#ffeab2;--cm:#9A7890;--cb:rgba(255,100,173,.1);--cgl:rgba(10,5,8,.55);--co:#79b4cf;--cr:#8A3068;--c1:#6a1848;--c2:#183858;--cbase:#0c060a}
[data-theme="saltea"]{--cv:#0a0608;--ca:#EB9FAA;--cg:rgba(235,159,170,.18);--ct:#FCEFF0;--cm:#988088;--cb:rgba(235,159,170,.1);--cgl:rgba(10,6,8,.55);--co:#C0CEE4;--cr:#8A4858;--c1:#583040;--c2:#283848;--cbase:#100a0e}
[data-theme="coralmint"]{--cv:#080504;--ca:#FF8D95;--cg:rgba(255,141,149,.25);--ct:#F4F8F6;--cm:#90807A;--cb:rgba(255,141,149,.12);--cgl:rgba(8,5,4,.55);--co:#ACEADE;--cr:#A04048;--c1:#783028;--c2:#104838;--cbase:#0a0808}
[data-theme="meadow"]{--cv:#030608;--ca:#86E0FF;--cg:rgba(134,224,255,.25);--ct:#F0F4E8;--cm:#688878;--cb:rgba(134,224,255,.12);--cgl:rgba(3,6,8,.55);--co:#EAD960;--cr:#3A6848;--c1:#184878;--c2:#185838;--cbase:#060e10}
[data-theme="honey"]{--cv:#0a0800;--ca:#F0C040;--cg:rgba(240,192,64,.25);--ct:#FFF8E0;--cm:#A09060;--cb:rgba(240,192,64,.12);--cgl:rgba(10,8,0,.55);--co:#FF9060;--cr:#8A6010;--c1:#785018;--c2:#6a3010;--cbase:#140e04}
[data-theme="skyfire"]{--cv:#04040a;--ca:#F9906F;--cg:rgba(249,144,111,.25);--ct:#FFF0E0;--cm:#8888A0;--cb:rgba(249,144,111,.12);--cgl:rgba(4,4,10,.55);--co:#98BDEA;--cr:#2468A2;--c1:#783818;--c2:#183868;--cbase:#080808}
[data-theme="flamingo"]{--cv:#0a0404;--ca:#FF6090;--cg:rgba(255,96,144,.28);--ct:#FFF0E8;--cm:#A07878;--cb:rgba(255,96,144,.12);--cgl:rgba(10,4,4,.55);--co:#FFD040;--cr:#C03060;--c1:#7a1838;--c2:#6a3018;--cbase:#140608}
[data-theme="matcha"]{--cv:#040804;--ca:#CAFF96;--cg:rgba(202,255,150,.22);--ct:#F8FFF0;--cm:#78A068;--cb:rgba(202,255,150,.1);--cgl:rgba(4,8,4,.55);--co:#FDD5CE;--cr:#4A8830;--c1:#2a5818;--c2:#583028;--cbase:#080c08}
[data-theme="bubblegum"]{--cv:#08040a;--ca:#FF4491;--cg:rgba(255,68,145,.25);--ct:#FFF0F8;--cm:#A070A0;--cb:rgba(255,68,145,.12);--cgl:rgba(8,4,10,.55);--co:#B1EBFE;--cr:#C02868;--c1:#781838;--c2:#184878;--cbase:#0c060c}
[data-theme="lychee"]{--cv:#060806;--ca:#E0FFEA;--cg:rgba(224,255,234,.2);--ct:#F8FFF8;--cm:#80A888;--cb:rgba(224,255,234,.1);--cgl:rgba(6,8,6,.55);--co:#FDE5F0;--cr:#40884A;--c1:#1a4828;--c2:#482038;--cbase:#080c08}
[data-theme="grape"]{--cv:#080408;--ca:#B880E0;--cg:rgba(184,128,224,.25);--ct:#F0E8D8;--cm:#8878A0;--cb:rgba(184,128,224,.12);--cgl:rgba(8,4,8,.55);--co:#E0A020;--cr:#5A2880;--c1:#481878;--c2:#685018;--cbase:#0a060a}
[data-theme="seafoam"]{--cv:#020808;--ca:#40E8D0;--cg:rgba(64,232,208,.25);--ct:#F0FFF8;--cm:#60A898;--cb:rgba(64,232,208,.12);--cgl:rgba(2,8,8,.55);--co:#FFB8E0;--cr:#188878;--c1:#105848;--c2:#381838;--cbase:#060c0c}
[data-theme="blueice"]{--cv:#020410;--ca:#60A0FE;--cg:rgba(96,160,254,.28);--ct:#E8F0FF;--cm:#6080B0;--cb:rgba(96,160,254,.12);--cgl:rgba(2,4,16,.55);--co:#99D2FE;--cr:#1840A0;--c1:#1848a0;--c2:#103058;--cbase:#040818}
[data-theme="mango"]{--cv:#0a0604;--ca:#FFB060;--cg:rgba(255,176,96,.25);--ct:#FFF8E8;--cm:#A88868;--cb:rgba(255,176,96,.12);--cgl:rgba(10,6,4,.55);--co:#FF7088;--cr:#A06020;--c1:#784818;--c2:#581828;--cbase:#100a06}
[data-theme="candysky"]{--cv:#080408;--ca:#FF9CD8;--cg:rgba(255,156,216,.25);--ct:#FFF8F0;--cm:#A080A0;--cb:rgba(255,156,216,.12);--cgl:rgba(8,4,8,.55);--co:#80D8FF;--cr:#C05090;--c1:#6a2858;--c2:#184868;--cbase:#0c060c}
[data-theme="caramel"]{--cv:#080604;--ca:#D2A878;--cg:rgba(210,168,120,.25);--ct:#F8F0E8;--cm:#A09078;--cb:rgba(210,168,120,.12);--cgl:rgba(8,6,4,.55);--co:#90B8D0;--cr:#7A5828;--c1:#584018;--c2:#283040;--cbase:#0e0a06}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;font-family:var(--fb);color:var(--ct);background:var(--cv);-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;cursor:none}
button,a{cursor:none}
::selection{background:var(--ca);color:var(--cv)}

/* static noise — no animation */
.noise-layer{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='turbulence' baseFrequency='4' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix type='saturate' values='0' in='t'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");background-size:200px}

/* Nav */
#topNav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:14px 24px;background:linear-gradient(to bottom,rgba(0,0,0,.15),transparent)}
.nav-brand{font-family:var(--fd);font-size:.7rem;color:var(--ca);letter-spacing:.15em}
.nav-links{display:flex;gap:2px;align-items:center}
.nav-skin-btn{background:0;border:0;cursor:pointer;padding:6px 12px;color:var(--cm);opacity:.65;transition:all .35s;display:flex;align-items:center;justify-content:center}
.nav-skin-btn:hover{opacity:1;color:var(--ca);transform:rotate(15deg) scale(1.15)}
.nav-skin-btn .skin-petal-icon{filter:drop-shadow(0 0 4px var(--ca));transition:transform .4s ease}
.nav-skin-btn:hover .skin-petal-icon{transform:rotate(20deg) scale(1.1)}
.nav-skin-btn.hidden{display:none}
.nav-btn{background:0;border:0;cursor:pointer;padding:8px 14px;position:relative}
.nav-btn span{font-family:var(--fz);font-size:.9rem;color:var(--cm);font-weight:300;transition:color .3s}
.nav-btn::after{content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);width:0;height:1px;background:var(--ca);transition:width .3s}
.nav-btn.active span{color:var(--ca)}
.nav-btn.active::after{width:70%}
.nav-btn:hover span{color:var(--ca)}

/* Screens */
.screen{position:fixed;inset:0;z-index:10;display:none;opacity:0;transition:opacity .4s;overflow:hidden;background:var(--cbase)}
.screen.active{display:flex;opacity:1}

/* ========== HOME ========== */
.home-bg{position:absolute;inset:0;z-index:0;background:var(--cv);overflow:hidden}
.home-bg canvas{width:100%!important;height:100%!important}

/* Floating petals (pure CSS) */
.petal{position:absolute;width:6px;height:10px;background:var(--cr);border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;opacity:.12;pointer-events:none;z-index:1;animation:petalFall linear infinite}
.p1{left:15%;top:-10px;animation-duration:18s;animation-delay:0s;transform:rotate(25deg)}
.p2{left:40%;top:-10px;animation-duration:22s;animation-delay:3s;width:5px;height:8px;transform:rotate(-15deg);opacity:.1}
.p3{left:65%;top:-10px;animation-duration:20s;animation-delay:7s;transform:rotate(40deg);opacity:.08}
.p4{left:85%;top:-10px;animation-duration:25s;animation-delay:2s;width:4px;height:7px;transform:rotate(-30deg);opacity:.1}
.p5{left:30%;top:-10px;animation-duration:19s;animation-delay:10s;transform:rotate(10deg);opacity:.09}
.p6{left:55%;top:-10px;animation-duration:23s;animation-delay:5s;width:5px;height:9px;transform:rotate(-20deg);opacity:.11}
.p7{left:75%;top:-10px;animation-duration:21s;animation-delay:8s;transform:rotate(35deg);opacity:.07}
.p8{left:10%;top:-10px;animation-duration:24s;animation-delay:12s;width:7px;height:11px;transform:rotate(-10deg);opacity:.1}
@keyframes petalFall{0%{transform:translateY(0) rotate(0deg);opacity:.12}100%{transform:translateY(105vh) rotate(360deg);opacity:.04}}

.home-ui{position:relative;z-index:10;width:100%;height:100%;display:grid;grid-template-rows:auto 1fr auto;padding:60px 2.5rem 1.5rem}

.home-hdr{display:flex;justify-content:space-between;align-items:center;font-family:var(--fm);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cm);border-bottom:1px solid var(--cb);padding-bottom:.8rem}
.hdr-hl{color:var(--ct);margin-right:.8rem}
.hdr-r{display:flex;align-items:center;gap:10px}
.theme-btn{background:0;border:1px solid var(--cb);border-radius:50%;width:28px;height:28px;color:var(--cm);cursor:pointer;font-size:.9rem;display:flex;align-items:center;justify-content:center;transition:all .3s}
.theme-btn:hover{border-color:var(--ca);color:var(--ca)}

.home-body{display:grid;grid-template-columns:1fr 360px;gap:3rem;height:100%;align-items:center}
.home-left{padding-left:1.5rem}

.logo{font-family:var(--fd);font-size:clamp(4rem,9vw,7.5rem);line-height:.82;text-transform:uppercase}
.logo span{display:block}
.l-rose{margin-left:-.3rem}
.l-amp{font-family:var(--fb);font-style:italic;font-size:clamp(2rem,4.5vw,3.8rem);color:var(--ca);margin-left:3.5rem}
.l-blade{margin-left:5rem;text-shadow:0 0 20px var(--cg)}

.home-nav-btns{display:flex;gap:14px;margin-top:3.5rem;margin-left:5rem;flex-wrap:wrap}
.home-nav-btns2{display:flex;gap:14px;margin-top:12px;margin-left:5rem;flex-wrap:wrap}
/* Bloom menu (flower button) */
.bloom-menu-wrap{position:relative;display:flex;justify-content:center;margin:30px auto 10px;width:fit-content}
.bloom-trigger{background:none;border:none;font-size:2rem;color:var(--co);cursor:pointer;transition:all .4s var(--ease);opacity:.5;filter:drop-shadow(0 0 0 transparent)}
.bloom-trigger:hover{opacity:1;transform:scale(1.2) rotate(30deg);filter:drop-shadow(0 0 8px var(--ca))}
.bloom-trigger.open{opacity:1;transform:scale(1.1) rotate(180deg)}
.bloom-menu{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) scale(.9);opacity:0;pointer-events:none;background:var(--cv);border:1px solid var(--cb);border-radius:14px;padding:10px 6px;display:flex;flex-direction:column;gap:4px;min-width:180px;box-shadow:0 8px 30px rgba(0,0,0,.25);transition:all .3s var(--ease);z-index:100}
.bloom-menu.show{opacity:1;transform:translateX(-50%) scale(1);pointer-events:auto}
.bloom-opt{background:none;border:none;color:var(--ct);font-family:var(--fz);font-size:.75rem;padding:8px 16px;cursor:pointer;text-align:left;border-radius:8px;transition:all .2s;letter-spacing:.06em;white-space:nowrap}
.bloom-opt:hover{background:rgba(var(--cr),.08);color:var(--ca)}
.bloom-div{height:1px;background:var(--cb);margin:2px 10px}
.entry-btn{background:0;border:1px solid var(--ct);color:var(--ct);font-family:var(--fd);font-size:.85rem;padding:.8rem 1.8rem;cursor:pointer;position:relative;overflow:hidden;transition:all .4s var(--ease);letter-spacing:.08em;display:flex;flex-direction:column;align-items:center;gap:3px}
.entry-btn small{font-family:var(--fm);font-size:.46rem;letter-spacing:.12em;text-transform:uppercase;opacity:.5}
.entry-btn::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:var(--ca);transition:transform .4s var(--ease);z-index:-1}
.entry-btn:hover{color:var(--cv);border-color:var(--ca)}
.entry-btn:hover::before{transform:translateX(100%)}

/* ===== Vine UI (new home layout) ===== */
.home-vine{position:absolute;inset:0;z-index:10;width:100%;height:100%}
#vineCanvas{width:100%;height:100%}
.hv-logo{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:15;text-align:center;pointer-events:none}
.hv-logo .logo{font-size:clamp(3.5rem,8vw,7rem)}
.hv-logo-glow{position:absolute;inset:-60px;border-radius:50%;background:radial-gradient(circle,var(--ca),transparent 65%);opacity:.06;z-index:-1;animation:hvGlow 4s ease-in-out infinite}
@keyframes hvGlow{0%,100%{opacity:.04;transform:scale(1)}50%{opacity:.09;transform:scale(1.06)}}
#vineCanvas{position:absolute;inset:0;z-index:12;pointer-events:none}
.hv-nav{position:absolute;inset:0;z-index:20}
.hv-item{position:absolute;cursor:pointer;transition:opacity .5s;text-align:center}
.hv-zh{font-family:var(--fb);font-size:1.7rem;letter-spacing:.2em;color:rgba(255,255,255,.7);transition:all .5s}
.hv-en{font-size:.5rem;letter-spacing:.25em;text-transform:uppercase;color:var(--cm);transition:all .5s;margin-top:3px}
.hv-item:hover .hv-zh{color:var(--ca);text-shadow:0 0 18px var(--ca)}
.hv-item:hover .hv-en{color:var(--ca);opacity:.8}
.hv-nav:hover .hv-item{opacity:.3}
.hv-nav:hover .hv-item:hover{opacity:1}
/* Positions: left 3, right 3 */
.hv-i0{top:28%;left:18%;text-align:right}.hv-i0 .hv-en{text-align:right}
.hv-i1{top:50%;left:12%;transform:translateY(-50%);text-align:right}.hv-i1 .hv-en{text-align:right}
.hv-i2{top:68%;left:18%;text-align:right}.hv-i2 .hv-en{text-align:right}
.hv-i3{top:28%;right:18%;text-align:left}
.hv-i4{top:50%;right:12%;transform:translateY(-50%);text-align:left}
.hv-i5{top:68%;right:18%;text-align:left}
/* Float */
.hv-i0{animation:hvF1 8s infinite ease-in-out}
.hv-i1{animation:hvF2 9s infinite ease-in-out}
.hv-i2{animation:hvF3 10s infinite ease-in-out}
.hv-i3{animation:hvF1 8.5s infinite ease-in-out reverse}
.hv-i4{animation:hvF2 9.5s infinite ease-in-out reverse}
.hv-i5{animation:hvF3 10.5s infinite ease-in-out reverse}
@keyframes hvF1{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-8px) translateX(3px)}}
@keyframes hvF2{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(calc(-50% - 5px)) translateX(-4px)}}
@keyframes hvF3{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-10px) translateX(2px)}}
.hv-ftr{position:absolute;bottom:0;left:0;right:0;z-index:30;text-align:center;padding:16px;font-family:var(--fb);font-style:italic;font-size:.82rem;color:var(--cm)}
.hv-ftr-line{width:60%;max-width:500px;height:1px;background:linear-gradient(90deg,transparent,var(--cb),transparent);margin:0 auto 10px}
/* Toggle button */
.home-mode-btn{position:absolute;bottom:16px;right:16px;z-index:40;background:none;border:1px solid var(--cb);color:var(--cm);width:36px;height:36px;border-radius:50%;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease-in-out;opacity:.5;overflow:visible}
.home-mode-btn:hover{opacity:1;border-color:var(--ca);color:var(--ca);box-shadow:0 0 18px rgba(207,168,94,.3);background:transparent}
.home-mode-btn .home-mode-sword{pointer-events:none;transition:transform .35s ease}
.home-mode-btn:hover .home-mode-sword{transform:rotate(-20deg) scale(1.1)}
/* Sword stars */
.sword-star{position:absolute;width:6px;height:auto;filter:drop-shadow(0 0 0 var(--ca));z-index:-1;opacity:0;transition:all .8s cubic-bezier(.05,.83,.43,.96);pointer-events:none}
.ss1{top:45%;left:45%;width:7px}
.ss2{top:40%;left:40%;width:4px}
.ss3{top:50%;left:50%;width:5px}
.ss4{top:35%;left:50%;width:3px}
.ss5{top:45%;left:35%;width:6px}
.home-mode-btn:hover .ss1{top:-70%;left:-40%;opacity:1;filter:drop-shadow(0 0 6px var(--ca))}
.home-mode-btn:hover .ss2{top:-30%;left:90%;opacity:1;filter:drop-shadow(0 0 6px var(--ca));transition-duration:.6s}
.home-mode-btn:hover .ss3{top:80%;left:-30%;opacity:.8;filter:drop-shadow(0 0 4px var(--ca));transition-duration:1s}
.home-mode-btn:hover .ss4{top:-50%;left:70%;opacity:.7;filter:drop-shadow(0 0 5px var(--ca));transition-duration:.7s}
.home-mode-btn:hover .ss5{top:70%;left:100%;opacity:1;filter:drop-shadow(0 0 6px var(--ca));transition-duration:.9s}

/* Right ledger */
.home-right{border-left:1px solid transparent;border-image:linear-gradient(to bottom,transparent,var(--cb),transparent) 1;padding-left:2.5rem;height:80%;display:flex;flex-direction:column;justify-content:center}
.ldg-label{font-family:var(--fm);font-size:.55rem;letter-spacing:.3em;color:var(--ca);text-transform:uppercase;margin-bottom:.8rem}
.ldg-task{margin-bottom:2.5rem}
.ldg-task h2{font-family:var(--fb);font-size:2.2rem;line-height:1.1;font-weight:400;margin-bottom:.5rem}
.ldg-en{font-family:var(--fb);font-style:italic;font-size:1rem;color:var(--cm);margin-bottom:1rem}
.ldg-desc{font-family:var(--fb);font-style:italic;font-size:.95rem;color:var(--cm);line-height:1.6;max-width:90%}
.ldg-row{display:grid;grid-template-columns:auto 1fr auto;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(255,255,255,.04);font-family:var(--fm);font-size:.63rem;letter-spacing:.05em}
.ldg-date{color:var(--cm)}.ldg-s{color:var(--ca)}

.home-ftr{display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--fb);font-style:italic;font-size:.82rem;color:var(--cm);border-top:1px solid var(--cb);padding-top:.8rem}
.ftr-logo{font-family:var(--fm);font-style:normal;font-size:.5rem;letter-spacing:.2em;text-transform:uppercase}

/* ========== ALTAR ========== */
.altar-bg{position:absolute;inset:0;z-index:0;background:var(--cv);overflow:hidden}
.altar-bg canvas{width:100%!important;height:100%!important}

/* Custom cursor */
.cur-dot,.cur-ring{position:fixed;top:0;left:0;border-radius:50%;z-index:9999;pointer-events:none;transform:translate(-50%,-50%)}
.cur-dot{width:4px;height:4px;background:var(--ct);transition:background .3s}
.cur-ring{width:30px;height:30px;border:1px solid rgba(242,235,225,.3);transition:width .3s,height .3s,border-color .3s,background-color .3s}
.cur-ring.hover{width:45px;height:45px;border-color:var(--ca);background:rgba(201,75,38,.08)}

.altar-ui{position:relative;z-index:10;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}

.altar-top{position:absolute;top:80px;text-align:center;pointer-events:none}
.a-sub{font-family:var(--fs);font-size:.65rem;letter-spacing:.5em;color:var(--ca);text-transform:uppercase;display:block;margin-bottom:.5rem}
.a-title{font-family:var(--fz);font-size:1.6rem;font-weight:300;letter-spacing:.3em;text-shadow:0 0 20px var(--cg)}
.a-en{font-family:var(--fm);font-size:.48rem;letter-spacing:.3em;color:var(--cm);text-transform:uppercase;display:block;margin-top:5px}

.a-stars{pointer-events:none}
.a-star{position:absolute;color:var(--ct);text-shadow:0 0 10px var(--ct);animation:tw 3s ease-in-out infinite}
@keyframes tw{0%,100%{opacity:.2}50%{opacity:.8}}

/* Watermark text behind draw area */
.altar-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--fp);font-size:14vw;color:rgba(242,235,225,.025);white-space:nowrap;pointer-events:none;z-index:1}

.draw-zone{position:relative;width:min(400px,82vw);height:min(400px,82vw);display:flex;align-items:center;justify-content:center;z-index:2}
.ring{position:absolute;border-radius:50%}
.ring-o{width:100%;height:100%;border:1px solid var(--cb);animation:sp 40s linear infinite}
.ring-i{width:85%;height:85%;border:1px dashed var(--cg);animation:sp 30s linear infinite reverse}
@keyframes sp{to{transform:rotate(360deg)}}

.draw-btn{background:0;border:0;cursor:pointer;position:relative;z-index:5;padding:2rem 3rem;transition:all .5s var(--ease);text-align:center}
.draw-btn::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(.8);width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,var(--cg),transparent 70%);opacity:0;transition:opacity .5s,transform .5s var(--ease);z-index:-1}
.draw-reveal{font-family:var(--fd);font-size:clamp(1.5rem,4vw,2.2rem);color:var(--ct);letter-spacing:.1em;display:block;transition:color .4s,text-shadow .4s}
.draw-cn{font-family:var(--fz);font-size:.68rem;letter-spacing:.35em;color:var(--cm);display:block;margin-top:.5rem;transition:color .3s}
.draw-btn:hover .draw-reveal{color:var(--ca);text-shadow:0 0 20px var(--cg)}
.draw-btn:hover .draw-cn{color:var(--ct)}
.draw-btn:hover::before{opacity:1;transform:translate(-50%,-50%) scale(1.2)}
.draw-btn:active{transform:scale(.95)}

/* Slash cut line */
.cut-line{position:absolute;width:0;height:2px;background:linear-gradient(90deg,transparent,var(--ca),var(--ct),var(--ca),transparent);z-index:30;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-15deg);transition:width .35s cubic-bezier(.25,1,.5,1);filter:drop-shadow(0 0 10px var(--ca));pointer-events:none}

/* Split halves */
.draw-top,.draw-bot{transition:all .5s .25s cubic-bezier(.25,1,.5,1)}

/* Activating state: slash + split */
.draw-zone.slashing .cut-line{width:120%}
.draw-zone.slashing .draw-reveal{color:var(--ca);text-shadow:0 0 30px var(--ca);transition:color .3s}
.draw-zone.slashing .draw-top{transform:translateY(-18px) rotate(-1.5deg);opacity:0}
.draw-zone.slashing .draw-bot{transform:translateY(18px) rotate(1.5deg);opacity:0}
.draw-zone.slashing .draw-btn::before{opacity:1;transform:translate(-50%,-50%) scale(1.5);transition:all .5s}

.a-hint{position:absolute;bottom:80px;font-family:var(--fz);font-size:.65rem;color:var(--cm);letter-spacing:.15em;opacity:.4;pointer-events:none}

/* Card overlay */
.card-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:all .5s}
.card-overlay.show{opacity:1;visibility:visible}

.card{position:relative;width:85%;max-width:310px;background:var(--card-bg,var(--cgl));border-radius:18px;padding:28px;transform:scale(.8) translateY(40px);opacity:0;transition:all .8s cubic-bezier(.175,.885,.32,1.275);box-shadow:0 20px 50px rgba(0,0,0,.5)}
.card-overlay.show .card{transform:scale(1) translateY(0);opacity:1}
/* Edge light — cursor-tracking multi-color glow */
.card{--cursor-angle:180deg;--edge-proximity:0}
.edge-light{position:absolute;inset:-3px;border-radius:21px;padding:3px;pointer-events:none;z-index:7;opacity:calc(var(--edge-proximity)/100);transition:opacity .2s ease-out;
  background:conic-gradient(
    from calc(var(--cursor-angle) - 45deg),
    transparent 0deg,
    #c084fc 20deg,
    #f472b6 40deg,
    #38bdf8 60deg,
    #c084fc 80deg,
    transparent 90deg
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:blur(2px);
}
/* Outer soft halo */
.edge-light::before{content:'';position:absolute;inset:-4px;border-radius:25px;padding:6px;
  background:conic-gradient(
    from calc(var(--cursor-angle) - 45deg),
    transparent 0deg,
    rgba(192,132,252,.4) 20deg,
    rgba(244,114,182,.3) 40deg,
    rgba(56,189,248,.3) 60deg,
    rgba(192,132,252,.4) 80deg,
    transparent 90deg
  );
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  filter:blur(8px);
}

/* Inner border glow — static gradient */
.card::before{content:'';position:absolute;inset:3px;border-radius:14px;border:1.5px solid transparent;background:linear-gradient(135deg,var(--card-c1,#ff6b6b),var(--card-c2,#ffd93d)) border-box;-webkit-mask:linear-gradient(transparent 0 0) padding-box,linear-gradient(#fff 0 0) border-box;mask:linear-gradient(transparent 0 0) padding-box,linear-gradient(#fff 0 0) border-box;z-index:6;pointer-events:none}
/* Inner glow blur layer */
.card-glow-wrap{position:absolute;inset:2px;border-radius:15px;border:2px solid transparent;background:linear-gradient(135deg,var(--card-c1,#ff6b6b),var(--card-c2,#ffd93d)) border-box;-webkit-mask:linear-gradient(transparent 0 0) padding-box,linear-gradient(#fff 0 0) border-box;mask:linear-gradient(transparent 0 0) padding-box,linear-gradient(#fff 0 0) border-box;filter:blur(6px);opacity:.6;z-index:5;pointer-events:none}
/* Dark overlay so text stays readable on gradient bg */
.card::after{content:'';position:absolute;inset:0;border-radius:18px;background:rgba(0,0,0,.45);z-index:5}
.card-inner{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center}
.card-tag{font-family:var(--fm);font-size:.48rem;letter-spacing:.3em;text-transform:uppercase;color:var(--co);opacity:.8;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.card-line{width:16px;height:1px;background:var(--co);opacity:.5}
.card-icon{font-size:2.2rem;margin-bottom:8px}
.card-zh{font-family:var(--fz);font-size:1.6rem;font-weight:300;text-align:center;margin-bottom:6px;text-shadow:0 0 15px var(--cg)}
.card-en{font-family:var(--fs);font-size:1.05rem;letter-spacing:.06em;color:var(--co);margin-bottom:18px;font-style:italic;text-align:center}

.card-hint-box{width:100%;padding:12px 0;border-top:1px solid rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.05);margin-bottom:18px}
.card-hint-lbl{font-family:var(--fz);font-size:.55rem;color:var(--co);opacity:1;display:block;margin-bottom:5px}
.card-hint{font-family:var(--fz);font-size:.82rem;color:#fff;opacity:1;text-align:center;line-height:1.8;font-weight:400;text-shadow:0 1px 3px rgba(0,0,0,.4)}

.card-btns{display:flex;gap:10px;width:100%}
.cbtn{flex:1;background:0;border:1px solid var(--cb);color:var(--ct);font-family:var(--fz);font-size:.78rem;padding:11px;border-radius:28px;cursor:pointer;transition:all .4s var(--ease);position:relative;overflow:hidden;text-align:center}
.cbtn::before{content:'';position:absolute;inset:0;border-radius:28px;transform:scaleX(0);transform-origin:left;transition:transform .4s;z-index:-1}
.cb-again{border-color:var(--co);color:var(--co)}.cb-again::before{background:rgba(201,169,110,.1)}.cb-again:hover::before{transform:scaleX(1)}
.cb-go{border-color:var(--ca);color:var(--ca)}.cb-go::before{background:var(--ca)}.cb-go:hover{color:var(--cv)}.cb-go:hover::before{transform:scaleX(1)}

/* ========== Shared ========== */
.page-scroll{width:100%;height:100%;overflow-y:auto;touch-action:pan-y;padding:72px 20px 50px;position:relative;z-index:10;background:radial-gradient(ellipse 160% 120% at 10% 15%,var(--c1),transparent 50%),radial-gradient(ellipse 160% 120% at 90% 85%,var(--c2),transparent 50%),var(--cbase)}
.page-scroll::-webkit-scrollbar{width:3px}.page-scroll::-webkit-scrollbar-thumb{background:var(--cb);border-radius:3px}
.sec-sub-r{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:8px}
.sec-ln{width:25px;height:1px;background:var(--cm);opacity:.5}
.sec-sub{font-family:var(--fm);font-size:.5rem;letter-spacing:.3em;text-transform:uppercase;color:var(--co)}
.sec-end{text-align:center;padding:25px 0;color:var(--co);opacity:.3}

/* ========== Ambient glow for inner pages ========== */
@keyframes glowDrift1{
  0%{transform:translate(-30%,-20%) scale(1)}
  33%{transform:translate(10%,-10%) scale(1.15)}
  66%{transform:translate(-10%,15%) scale(.95)}
  100%{transform:translate(-30%,-20%) scale(1)}
}
@keyframes glowDrift2{
  0%{transform:translate(20%,30%) scale(1.1)}
  33%{transform:translate(-15%,10%) scale(.9)}
  66%{transform:translate(15%,-20%) scale(1.05)}
  100%{transform:translate(20%,30%) scale(1.1)}
}
#screen-bouquet::before,#screen-bouquet::after,
#screen-garden::before,#screen-garden::after,
#screen-weekrev::before,#screen-weekrev::after,
#screen-monthrev::before,#screen-monthrev::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:15;
  filter:blur(100px);mix-blend-mode:screen;
}
#screen-bouquet::before,#screen-garden::before,
#screen-weekrev::before,#screen-monthrev::before{
  width:45vw;height:45vw;max-width:420px;max-height:420px;
  top:5%;left:8%;opacity:.45;
  background:radial-gradient(circle,var(--cr),transparent 70%);
  animation:glowDrift1 18s ease-in-out infinite;
}
#screen-bouquet::after,#screen-garden::after,
#screen-weekrev::after,#screen-monthrev::after{
  width:38vw;height:38vw;max-width:360px;max-height:360px;
  bottom:10%;right:5%;opacity:.3;
  background:radial-gradient(circle,var(--ca),transparent 70%);
  animation:glowDrift2 22s ease-in-out infinite;
}

/* ========== Falling petals ========== */
.petal-box{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden}
.fall-petal{
  position:absolute;top:-20px;
  background:var(--cr);
  border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;
  pointer-events:none;
  animation:petalDrift linear forwards;
  will-change:transform,opacity;
}
@keyframes petalDrift{
  0%{transform:translateY(0) translateX(0) rotate(var(--r0))}
  50%{transform:translateY(50vh) translateX(var(--drift)) rotate(var(--r1))}
  100%{transform:translateY(108vh) translateX(var(--drift)) rotate(var(--r1));opacity:.01}
}

/* ========== BOUQUET — magazine grid ========== */
.bq-scroll{width:100%;height:100%;overflow-y:auto;touch-action:pan-y;padding:70px 14px 50px;position:relative;z-index:10;background:radial-gradient(ellipse 160% 120% at 10% 15%,var(--c1),transparent 50%),radial-gradient(ellipse 160% 120% at 90% 85%,var(--c2),transparent 50%),var(--cbase)}
.bq-scroll::-webkit-scrollbar{width:3px}.bq-scroll::-webkit-scrollbar-thumb{background:var(--cb);border-radius:3px}
.bq-hdr{text-align:center;margin-bottom:18px}
.bq-title{font-family:var(--fz);font-size:1.3rem;font-weight:300;letter-spacing:.15em;margin-bottom:4px}
.bq-prog{font-family:var(--fo);font-size:.58rem;color:var(--cm);margin-top:4px}

/* Date separator — only shown at pattern row boundaries */
.bq-date-sep{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:18px 0 8px}
.bq-date-line{flex:1;height:1px;background:var(--cb)}
.bq-date-text{font-family:var(--fm);font-size:.5rem;color:var(--cm);letter-spacing:.15em;white-space:nowrap}
/* Date tag on first card of each day — top left corner */
.bq-date-tag{position:absolute;top:6px;left:8px;font-family:var(--fm);font-size:.5rem;color:#fff;letter-spacing:.12em;z-index:3;text-shadow:0 1px 4px rgba(0,0,0,.8);background:rgba(0,0,0,.45);padding:2px 6px;border-radius:4px;backdrop-filter:blur(4px)}

.bq-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;max-width:500px;margin:0 auto}
.bq-card{position:relative;border-radius:10px;overflow:hidden;cursor:pointer;animation:si .5s ease-out both;transition:transform .3s;grid-column:span 1;aspect-ratio:1/1.2}
.bq-card:hover{transform:scale(1.02)}
.bq-card:active{transform:scale(.98)}
@keyframes si{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

.bq-bg{position:absolute;inset:0}
/* 2-col row cards: use wrapper to handle layout */
.bq-row2{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.bq-row2 .bq-card{aspect-ratio:1/1}

/* Soft theme-tinted fog overlay for cohesion */
.bq-ov{position:absolute;inset:0;background:var(--fb2);opacity:.15}
.bq-ct{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:8px 10px}
.bq-ico{font-size:1rem;position:absolute;top:7px;right:8px;opacity:.45}
.bq-en{font-family:var(--fd);font-size:.38rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:2px}
.bq-nm{font-family:var(--fz);font-size:.78rem;font-weight:400;line-height:1.2}
/* Note centered on card */
.bq-note-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:85%;font-family:var(--fb);font-style:italic;font-size:.7rem;color:rgba(255,255,255,.8);text-align:center;line-height:1.6;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;pointer-events:none}
.bq-st{font-family:var(--fm);font-size:.38rem;letter-spacing:.06em;margin-top:3px;color:var(--ca)}
.bq-card.done .bq-st{color:var(--co)}

/* ========== REVIEW PAGES (Week + Month) ========== */
.rv-scroll{width:100%;height:100%;overflow-y:auto;touch-action:pan-y;position:relative;z-index:10;background:radial-gradient(ellipse 160% 120% at 10% 15%,var(--c1),transparent 50%),radial-gradient(ellipse 160% 120% at 90% 85%,var(--c2),transparent 50%),var(--cbase)}
.rv-scroll::-webkit-scrollbar{width:3px}.rv-scroll::-webkit-scrollbar-thumb{background:var(--cb);border-radius:3px}
.rv-wrap{max-width:720px;margin:0 auto;padding:0 24px 40px}

.pg-hdr{text-align:center;margin-bottom:16px}.pg-hdr::after{content:'';display:block;width:40px;height:1px;background:var(--co);opacity:.5;margin:12px auto 0}
.pg-title{font-family:var(--fz);font-size:1.4rem;font-weight:300;letter-spacing:.12em;margin-bottom:4px}
.pg-sub{font-family:var(--fm);font-size:.48rem;letter-spacing:.35em;text-transform:uppercase;color:var(--co);opacity:.7}

/* Week hero */
.wk-hero{height:220px;overflow:hidden;position:relative}
.wk-hero-bg{position:absolute;inset:0;background:url(assets/IMG_3361.JPG) center/cover;filter:brightness(.6)}
.wk-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to bottom,transparent,var(--cbase));pointer-events:none}

/* Dagger */
.dagger-wrap{width:100%;max-width:560px;margin:0 auto 20px;filter:drop-shadow(0 6px 12px rgba(0,0,0,.5))}
.dagger-wrap svg{width:100%;height:auto;display:block}

/* Week nav */
.wk-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-bottom:20px}
.wk-arrow{background:none;border:1px solid var(--cb);color:var(--cm);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:1rem;transition:all .3s}
.wk-arrow:hover{border-color:var(--co);color:var(--co)}
.wk-range{font-family:var(--fo);font-size:.72rem;letter-spacing:.1em}

/* Petal row */
.petal-row{display:flex;gap:14px;justify-content:center;margin-bottom:30px}
.pt-col{display:flex;flex-direction:column;align-items:center;gap:5px}
.pt-svg{width:22px;height:34px}
.pt-svg.full path{fill:var(--cr);stroke:var(--ca);stroke-width:1}
.pt-svg.half path{fill:var(--cr);opacity:.35;stroke:var(--cb);stroke-width:1}
.pt-svg.empty path{fill:transparent;stroke:var(--cb);stroke-width:1}
.pt-day{font-family:var(--fm);font-size:.42rem;color:var(--cm);letter-spacing:.05em;text-transform:uppercase}

/* Section titles */
.rv-sec-t{font-size:1rem;color:var(--co);margin-bottom:1.2rem;display:flex;align-items:center;gap:10px;font-family:var(--fz);font-weight:300;letter-spacing:.1em}
.rv-sec-t::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--cb),transparent)}

/* Film strip */
.film-wrap{overflow:hidden;margin:0 -24px;padding:0 24px}
.film-strip{display:flex;gap:18px;padding:20px 0;cursor:grab;touch-action:none;user-select:none;will-change:transform}
.film-strip::-webkit-scrollbar{display:none}
.film-card{min-width:200px;max-width:200px;background:var(--fa);border:1px solid var(--cb);flex-shrink:0;position:relative;transition:transform .3s ease-out,opacity .3s ease-out;cursor:pointer;transform-origin:center bottom}
.film-card::before{content:'';position:absolute;top:3px;left:3px;right:3px;bottom:3px;border:1px solid rgba(255,255,255,.03);pointer-events:none}
.film-img{width:100%;height:110px;object-fit:cover;filter:grayscale(80%) sepia(30%) hue-rotate(330deg) contrast(1.2);border-bottom:1px solid var(--cb);transition:filter .4s}
.film-card:hover .film-img{filter:grayscale(0%) sepia(10%) contrast(1.05)}
.film-body{padding:12px}
.film-date{font-family:var(--fm);font-size:.55rem;color:var(--co);opacity:.7;letter-spacing:.1em;margin-bottom:4px}
.film-task{font-family:var(--fz);font-size:.75rem;margin-bottom:4px}
.film-text{font-family:var(--fb);font-size:.78rem;color:var(--cm);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.film-empty{min-width:200px;display:flex;align-items:center;justify-content:center;color:var(--cm);opacity:.3;font-size:.75rem}

/* Dagger divider */
.dagger-div{display:flex;align-items:center;justify-content:center;gap:12px;margin:28px 0;opacity:.35}
.dagger-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--co),transparent)}
.dagger-icon{font-family:var(--fd);font-size:.75rem;color:var(--co)}

/* Review textarea */
.rv-ta{width:100%;min-height:80px;background:rgba(255,255,255,.03);border:1px solid var(--cb);color:var(--ct);font-family:var(--fz);font-size:.8rem;line-height:1.8;padding:14px;resize:vertical;outline:none;transition:border-color .3s;margin-bottom:10px}
.rv-ta::placeholder{color:var(--cm);font-style:italic}.rv-ta:focus{border-color:var(--co)}

/* Letter */
.rv-letter{background:var(--fa);padding:30px;border:1px solid var(--cb);position:relative;box-shadow:inset 0 0 30px rgba(0,0,0,.4)}
.rv-letter::before{content:'';position:absolute;top:4px;left:4px;right:4px;bottom:4px;border:1px solid rgba(255,255,255,.03);pointer-events:none}
.rv-letter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px dashed var(--cb)}
.rv-letter-from{font-family:var(--fm);font-size:.55rem;color:var(--co);opacity:.7;letter-spacing:.2em;text-transform:uppercase}
.rv-letter-date{font-family:var(--fo);font-size:.5rem;color:var(--cm)}
.rv-letter-ta{width:100%;min-height:70px;background:transparent;border:none;color:#d1c7bc;font-family:var(--fb);font-style:italic;font-size:.9rem;line-height:1.9;resize:vertical;outline:none}
.rv-letter-ta::placeholder{color:rgba(201,169,110,.3)}
.rv-letter-sig{text-align:right;margin-top:12px;font-family:var(--fp);font-style:italic;color:var(--co);opacity:.6;font-size:.8rem}
.rv-wax{width:46px;height:46px;margin:10px auto;background:radial-gradient(circle,var(--cr) 35%,rgba(139,26,26,.3) 60%,transparent 80%);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--fd);font-size:.45rem;color:var(--co);box-shadow:0 0 12px rgba(139,26,26,.25)}
.rv-export-btns{display:flex;gap:16px;justify-content:center;margin:20px auto;max-width:400px}
.rv-save-btn{display:block;flex:1;max-width:180px;padding:12px;border:1px solid var(--co);border-radius:30px;background:none;color:var(--co);font-family:var(--fz);font-size:.8rem;cursor:pointer;transition:all .3s;letter-spacing:.1em}
.rv-save-btn:hover{background:rgba(201,169,110,.1)}


/* ===== Month Review ===== */
.mo-flowers{display:flex;justify-content:center;gap:24px;margin-bottom:28px;flex-wrap:wrap}
.mo-fl{display:flex;flex-direction:column;align-items:center;gap:6px}
.mo-fl-wrap{width:48px;height:48px;animation:moBreath 4s infinite alternate ease-in-out}
@keyframes moBreath{0%{filter:drop-shadow(0 0 2px rgba(139,26,26,.2))}100%{filter:drop-shadow(0 0 8px rgba(139,26,26,.5))}}
.mo-fl-lbl{font-family:var(--fm);font-size:.42rem;color:var(--cm);letter-spacing:.1em;text-transform:uppercase}

.mo-dash{display:grid;grid-template-columns:160px 1fr;gap:30px;align-items:center;margin-bottom:30px;padding:24px;background:linear-gradient(90deg,var(--fa),transparent);border-left:2px solid var(--cr)}
.mo-prog-wrap{position:relative;width:120px;height:120px;margin:0 auto}
.mo-prog-wrap svg{transform:rotate(-90deg);width:100%;height:100%}
.mo-prog-bg{fill:none;stroke:var(--cb);stroke-width:3}
.mo-prog-val{fill:none;stroke:var(--ca);stroke-width:5;stroke-linecap:round;stroke-dasharray:377;stroke-dashoffset:377;filter:drop-shadow(0 0 5px var(--cr));transition:stroke-dashoffset .8s}
.mo-prog-text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mo-prog-num{font-family:var(--fp);font-size:1.8rem;color:var(--co);line-height:1}
.mo-prog-lbl{font-size:.5rem;color:var(--cm);letter-spacing:.12em}

.mo-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.mo-stat{text-align:center;padding:12px;border:1px solid var(--cb);background:rgba(0,0,0,.2);position:relative}
.mo-stat::before{content:'';position:absolute;top:0;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--cb),transparent)}
.mo-stat-ico{font-size:1.1rem;display:block;margin-bottom:3px}
.mo-stat-v{font-family:var(--fz);font-size:.68rem;color:var(--ct);margin-bottom:2px}
.mo-stat-l{font-size:.45rem;color:var(--cm)}
.mo-streak{text-align:center;margin-top:12px}
.mo-streak-num{font-family:var(--fp);font-size:2rem;color:var(--co)}
.mo-streak-lbl{font-size:.65rem;color:var(--cm);margin-left:6px}

/* Mid insert: two images */
.mo-img-duo{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:28px -24px;position:relative}
.mo-img-duo img{width:100%;height:140px;object-fit:cover;filter:grayscale(40%) sepia(15%) contrast(1.1);border-top:1px solid var(--cb);border-bottom:1px solid var(--cb);transition:filter .4s}
.mo-img-duo img:hover{filter:grayscale(0%)}
.mo-img-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.mo-img-overlay span{font-family:var(--fd);font-size:.85rem;letter-spacing:.3em;color:var(--co);text-shadow:0 0 20px rgba(0,0,0,.8)}

/* Dual monologue */
.mo-mono{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--cb);background:var(--fa);margin-bottom:20px}
.mo-mono-pane{padding:28px 22px}
.mo-mono-pane:first-child{border-right:1px solid var(--cb)}
.mo-mono-right{background:rgba(0,0,0,.15)}
.mo-mono-label{font-family:var(--fm);font-size:.5rem;color:var(--cb);letter-spacing:.2em;text-transform:uppercase;margin-bottom:8px}
.mo-mono-ta{width:100%;min-height:90px;background:transparent;border:none;color:var(--ct);font-family:var(--fb);font-size:.85rem;line-height:1.9;resize:vertical;outline:none}
.mo-mono-ta::placeholder{color:rgba(156,147,134,.35)}

/* End GIF */
.mo-end-gif{position:relative;margin:30px -24px 0;overflow:hidden;border-top:1px solid var(--cb)}
.mo-end-gif img{width:100%;height:180px;object-fit:cover;opacity:.5;filter:sepia(20%) hue-rotate(330deg)}
.mo-end-fade{position:absolute;inset:0;background:linear-gradient(180deg,var(--cv) 0%,transparent 30%,transparent 70%,var(--cv) 100%)}
.mo-end-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fp);font-style:italic;font-size:.9rem;color:var(--co);opacity:.6;letter-spacing:.1em;text-shadow:0 0 15px rgba(0,0,0,.8)}

@media(max-width:600px){.mo-dash{grid-template-columns:1fr}.mo-stats{grid-template-columns:1fr 1fr}.mo-mono{grid-template-columns:1fr}.mo-mono-pane:first-child{border-right:none;border-bottom:1px solid var(--cb)}.mo-img-duo{grid-template-columns:1fr}}

/* ========== Task Detail overlay ========== */
.td-overlay{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);opacity:0;visibility:hidden;transition:all .4s;overflow-y:auto;touch-action:pan-y}
.td-overlay.show{opacity:1;visibility:visible}
.td-card{max-width:420px;margin:60px auto 40px;padding:20px;position:relative}
.td-close{position:fixed;top:16px;right:16px;background:none;border:none;color:var(--cm);font-size:1.2rem;cursor:pointer;padding:8px;z-index:410;transition:color .3s}
.td-close:hover{color:var(--ct)}
.td-info{text-align:center;margin-bottom:24px}
.td-icon{font-size:2rem;display:block;margin-bottom:6px}
.td-name{font-family:var(--fz);font-size:1.3rem;font-weight:300;margin-bottom:4px}
.td-en{font-family:var(--fs);font-size:.8rem;font-style:italic;color:var(--co);margin-bottom:14px}
.td-hint{padding:10px 14px;border-left:2px solid var(--ca);margin:0 auto;max-width:320px}
.td-hint-lbl{font-family:var(--fz);font-size:.55rem;color:var(--co);display:block;margin-bottom:4px}
.td-hint p{font-family:var(--fz);font-size:.78rem;color:var(--ct);opacity:.85;line-height:1.7;font-weight:300}
.td-section{margin-bottom:18px}
.td-sec-title{font-family:var(--fz);font-size:.82rem;font-weight:400;margin-bottom:8px;color:var(--co);letter-spacing:.1em}
.td-ta{width:100%;min-height:80px;background:rgba(255,255,255,.05);border:1px solid var(--cb);border-radius:10px;color:var(--ct);font-family:var(--fz);font-size:.8rem;line-height:1.7;padding:12px;resize:vertical;outline:none;transition:border-color .3s}
.td-ta::placeholder{color:var(--cm);font-style:italic}
.td-ta:focus{border-color:var(--co)}
.td-ta-sm{min-height:55px}
.td-img-area{margin-top:8px}
.td-img-btn{display:inline-block;padding:5px 12px;border:1px dashed var(--cb);border-radius:8px;font-family:var(--fz);font-size:.65rem;color:var(--cm);cursor:pointer;transition:all .3s}
.td-img-btn:hover{border-color:var(--co);color:var(--co)}
.td-img-preview{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.td-img-preview img{width:70px;height:70px;object-fit:cover;border-radius:8px;border:1px solid var(--cb)}
.td-bloom-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;border:none;border-radius:30px;background:linear-gradient(135deg,var(--ca),var(--co));color:#fff;font-family:var(--fz);font-size:.9rem;cursor:pointer;transition:all .4s var(--ease);margin-top:8px}
.td-bloom-btn:hover{transform:scale(1.02);box-shadow:0 0 20px var(--cg)}
.td-bloom-btn:active{transform:scale(.97)}
.td-bloom-icon{font-size:1.1rem;transition:transform .5s}
.td-bloom-btn.bloomed{background:var(--co)}
.td-bloom-btn.bloomed .td-bloom-icon{transform:rotate(360deg) scale(1.3)}

/* Garden */
.gd-flowers{display:flex;flex-direction:column;align-items:center;gap:55px;padding-bottom:55px}
.fl-w{position:relative;width:170px;height:170px;display:flex;align-items:center;justify-content:center}
.fl-c{position:absolute;width:10px;height:10px;border-radius:50%;z-index:10}
.fl-c.full{background:var(--co);box-shadow:0 0 12px var(--cg)}.fl-c.part{background:var(--co);opacity:.6}.fl-c.none{background:var(--cm);opacity:.3}
.fl-p{position:absolute;width:45px;height:45px;transform-origin:bottom center}
.fl-p svg{width:100%;height:100%;transition:all .5s}
.fl-p.fill svg{color:var(--cr);filter:drop-shadow(0 0 4px var(--cg))}.fl-p.part svg{color:var(--cr);opacity:.5}.fl-p.today svg{color:var(--co);opacity:.8;animation:pp 2s ease-in-out infinite}.fl-p.empty svg{color:var(--cm);opacity:.1}
@keyframes pp{0%,100%{transform:scale(1);opacity:.8}50%{transform:scale(1.06);opacity:1}}
.fl-lb{position:absolute;bottom:-24px;font-family:var(--fm);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cm)}

/* Check-in */
.overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;visibility:hidden;transition:all .4s}
.overlay.show{opacity:1;visibility:visible}
.ov-card{width:90%;max-width:350px;background:var(--cgl);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--cb);border-radius:14px;padding:24px;transform:translateY(20px);transition:transform .4s}
.overlay.show .ov-card{transform:translateY(0)}
.ov-hdr{text-align:center;margin-bottom:16px}.ov-icon{font-size:1.8rem;display:block;margin-bottom:6px}
.ov-hdr h2{font-family:var(--fz);font-size:1.2rem;font-weight:300;margin-bottom:3px}
.ov-en{font-family:var(--fm);font-size:.5rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cm)}
.ov-hint{padding:10px;border-left:1px solid rgba(201,169,110,.2);margin-bottom:14px}
.ov-hl{font-family:var(--fz);font-size:.55rem;color:var(--co);opacity:.8}
.ov-hint p{font-family:var(--fz);font-size:.75rem;color:var(--ct);opacity:.7;line-height:1.6;font-weight:300;margin-top:3px}
.ov-ta{width:100%;min-height:90px;background:rgba(0,0,0,.3);border:1px solid var(--cb);border-radius:8px;color:var(--ct);font-family:var(--fz);font-size:.82rem;line-height:1.7;padding:12px;resize:vertical;outline:none;transition:border-color .3s}
.ov-ta::placeholder{color:var(--cm);font-style:italic}.ov-ta:focus{border-color:var(--co)}
.ov-btns{display:flex;gap:10px;margin-top:14px;justify-content:flex-end}
.ov-btn{font-family:var(--fz);font-size:.82rem;padding:9px 22px;border-radius:8px;border:1px solid var(--cb);background:var(--cgl);color:var(--ct);cursor:pointer;transition:all .3s}
.ov-btn:hover{border-color:var(--co)}.ov-save{border-color:var(--co);color:var(--co)}.ov-save:hover{background:rgba(201,169,110,.15)}

@media(max-width:900px){.home-body{grid-template-columns:1fr;gap:0}.home-right{display:none}}
@media(max-width:480px){
  #topNav{padding:10px 14px;justify-content:flex-start}
  .nav-links{gap:2px}
  .nav-btn{padding:8px 12px}
  .home-ui{padding:50px .8rem .8rem}
  .home-body{margin-top:30px}
  .home-body{align-items:start}
  .home-left{padding-left:0;display:flex;flex-direction:column;align-items:center;text-align:center}
  .logo{font-size:clamp(2.4rem,10vw,3.5rem)}
  .l-amp{margin-left:0;display:inline}
  .l-blade{margin-left:0}
  .l-rose{margin-left:0}
  /* Entry buttons: 2-column grid on mobile */
  .home-nav-btns,.home-nav-btns2{margin-left:0;display:contents}
  .home-left{padding-left:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;justify-items:center;text-align:center}
  .home-left .logo{grid-column:1/-1;margin-bottom:3rem}
  .home-left .entry-btn{width:100%}
  .home-left>input{grid-column:1/-1}
  .entry-btn{padding:.6rem .5rem;font-size:.85rem;border-color:var(--cb);letter-spacing:.1em;text-align:center;justify-content:center}
  .entry-btn small{font-size:.35rem;letter-spacing:.06em}
  .home-hdr{font-size:.45rem;flex-wrap:wrap;gap:4px}
  .home-ftr{font-size:.65rem;flex-direction:column;align-items:center;gap:4px;text-align:center}
  /* Wk hero: half height on mobile */
  .wk-hero{height:110px}
  /* Hide custom cursor on touch devices */
  .cur-dot,.cur-ring{display:none!important}
  html,body,button,a{cursor:auto!important}

  /* ===== Vine UI mobile layout ===== */
  .hv-logo{top:16%!important}
  .hv-logo .logo{font-size:clamp(2rem,8vw,2.8rem)}
  .hv-zh{font-size:1.05rem}
  .hv-en{font-size:.38rem}
  /* Reposition items: 3 left, 3 right, tighter for mobile */
  .hv-i0{top:35%!important;left:6%!important;right:auto!important}
  .hv-i1{top:50%!important;left:3%!important;right:auto!important}
  .hv-i2{top:65%!important;left:6%!important;right:auto!important}
  .hv-i3{top:35%!important;right:6%!important;left:auto!important}
  .hv-i4{top:50%!important;right:3%!important;left:auto!important}
  .hv-i5{top:65%!important;right:6%!important;left:auto!important}
  .hv-ftr{font-size:.65rem;padding:10px}
}
/* ========== CHEST (荆棘之礼) ========== */
#screen-chest{background:var(--cv)}
.ch-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}

.ch-ground{position:absolute;bottom:0;left:0;right:0;height:50%;pointer-events:none}
.ch-crack{position:absolute;top:0;left:50%;transform:translateX(-50%);width:0;height:100%;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.ch-crack-inner{position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 50% 0%,var(--ch-crack,rgba(160,140,180,.3)) 0%,transparent 100%);filter:blur(12px);opacity:.8}
.ch-crack-line{position:absolute;top:0;left:50%;width:2px;height:70%;background:linear-gradient(to bottom,var(--ch-accent,#9a8aaa),transparent);transform:translateX(-50%);filter:blur(1px);opacity:.6}
.ch-stage.ch-opened .ch-crack{width:240px}

.ch-rose{position:relative;width:200px;height:200px;cursor:pointer;z-index:10}
.ch-rose-glow{position:absolute;inset:-50px;border-radius:50%;opacity:0;transition:opacity .6s}
.ch-glow-anim{background:radial-gradient(circle,var(--ch-glow,rgba(160,140,180,.5)) 0%,transparent 70%);animation:chGlowPulse 3s ease-in-out infinite}
.ch-rose:hover .ch-rose-glow{opacity:1}
.ch-stage.ch-opened .ch-rose-glow{opacity:1}
@keyframes chGlowPulse{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.15);opacity:1}}

.ch-petal-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .8s}
.ch-ps{position:absolute;border-radius:50% 50% 50% 50% / 60% 60% 40% 40%;background:var(--ch-petal,#6a5a7a);transition:background .4s}

.ch-pl1 .ch-ps{width:70px;height:100px}.ch-pl2 .ch-ps{width:62px;height:88px}.ch-pl3 .ch-ps{width:54px;height:78px}.ch-pl4 .ch-ps{width:44px;height:66px}.ch-pl5 .ch-ps{width:34px;height:50px}

.ch-pl1 .ch-ps1{transform:rotate(0deg) translateY(-20px)}.ch-pl1 .ch-ps2{transform:rotate(72deg) translateY(-20px)}.ch-pl1 .ch-ps3{transform:rotate(144deg) translateY(-20px)}.ch-pl1 .ch-ps4{transform:rotate(216deg) translateY(-20px)}.ch-pl1 .ch-ps5{transform:rotate(288deg) translateY(-20px)}
.ch-pl2 .ch-ps1{transform:rotate(36deg) translateY(-16px)}.ch-pl2 .ch-ps2{transform:rotate(108deg) translateY(-16px)}.ch-pl2 .ch-ps3{transform:rotate(180deg) translateY(-16px)}.ch-pl2 .ch-ps4{transform:rotate(252deg) translateY(-16px)}.ch-pl2 .ch-ps5{transform:rotate(324deg) translateY(-16px)}
.ch-pl3 .ch-ps1{transform:rotate(15deg) translateY(-12px)}.ch-pl3 .ch-ps2{transform:rotate(87deg) translateY(-12px)}.ch-pl3 .ch-ps3{transform:rotate(159deg) translateY(-12px)}.ch-pl3 .ch-ps4{transform:rotate(231deg) translateY(-12px)}.ch-pl3 .ch-ps5{transform:rotate(303deg) translateY(-12px)}
.ch-pl4 .ch-ps1{transform:rotate(50deg) translateY(-8px)}.ch-pl4 .ch-ps2{transform:rotate(122deg) translateY(-8px)}.ch-pl4 .ch-ps3{transform:rotate(194deg) translateY(-8px)}.ch-pl4 .ch-ps4{transform:rotate(266deg) translateY(-8px)}.ch-pl4 .ch-ps5{transform:rotate(338deg) translateY(-8px)}
.ch-pl5 .ch-ps1{transform:rotate(0deg) translateY(-4px)}.ch-pl5 .ch-ps2{transform:rotate(90deg) translateY(-4px)}.ch-pl5 .ch-ps3{transform:rotate(180deg) translateY(-4px)}.ch-pl5 .ch-ps4{transform:rotate(270deg) translateY(-4px)}

/* idle purple */
.ch-rose.idle-petals .ch-pl1 .ch-ps{background:#4a3a5a}.ch-rose.idle-petals .ch-pl2 .ch-ps{background:#5a4a6a}.ch-rose.idle-petals .ch-pl3 .ch-ps{background:#6a5a7a}.ch-rose.idle-petals .ch-pl4 .ch-ps{background:#7a6a8a}.ch-rose.idle-petals .ch-pl5 .ch-ps{background:#9a8aaa}

/* pool overrides */
.ch-rose.ch-pool-silver .ch-pl1 .ch-ps,.ch-rose.ch-pool-silver .ch-pl2 .ch-ps,.ch-rose.ch-pool-silver .ch-pl3 .ch-ps,.ch-rose.ch-pool-silver .ch-pl4 .ch-ps,.ch-rose.ch-pool-silver .ch-pl5 .ch-ps{background:var(--ch-petal)}
.ch-rose.ch-pool-gold .ch-pl1 .ch-ps,.ch-rose.ch-pool-gold .ch-pl2 .ch-ps,.ch-rose.ch-pool-gold .ch-pl3 .ch-ps,.ch-rose.ch-pool-gold .ch-pl4 .ch-ps,.ch-rose.ch-pool-gold .ch-pl5 .ch-ps{background:var(--ch-petal)}
.ch-rose.ch-pool-red .ch-pl1 .ch-ps,.ch-rose.ch-pool-red .ch-pl2 .ch-ps,.ch-rose.ch-pool-red .ch-pl3 .ch-ps,.ch-rose.ch-pool-red .ch-pl4 .ch-ps,.ch-rose.ch-pool-red .ch-pl5 .ch-ps{background:var(--ch-petal)}

.ch-pool-silver{--ch-petal:#9aabb8;--ch-glow:rgba(180,200,220,.5);--ch-crack:rgba(180,200,220,.3);--ch-accent:#9ab0c4;--ch-c1:#8ab0d0;--ch-c2:#6090b0;--ch-c3:#667799}
.ch-pool-gold{--ch-petal:#b89a50;--ch-glow:rgba(207,169,110,.6);--ch-crack:rgba(207,169,110,.3);--ch-accent:#C9A96E;--ch-c1:#d4b878;--ch-c2:#a08040;--ch-c3:#8a7030}
.ch-pool-red{--ch-petal:#a82030;--ch-glow:rgba(200,40,30,.5);--ch-crack:rgba(200,40,30,.3);--ch-accent:#c04040;--ch-c1:#dd4444;--ch-c2:#aa2233;--ch-c3:#881122}

.ch-stage.ch-opened .ch-pl1{transform:scale(1.8) rotate(25deg);opacity:0;transition-delay:.1s}
.ch-stage.ch-opened .ch-pl2{transform:scale(1.6) rotate(-20deg);opacity:0;transition-delay:.2s}
.ch-stage.ch-opened .ch-pl3{transform:scale(1.4) rotate(15deg);opacity:0;transition-delay:.3s}
.ch-stage.ch-opened .ch-pl4{transform:scale(1.2) rotate(-10deg);opacity:0;transition-delay:.4s}
.ch-stage.ch-opened .ch-pl5{transform:scale(1.1) rotate(5deg);opacity:.2;transition-delay:.5s}

.ch-red-flash{position:absolute;inset:0;background:radial-gradient(circle,rgba(200,30,20,.3),transparent 70%);opacity:0;pointer-events:none;z-index:50;transition:opacity .15s}
.ch-red-flash.active{opacity:1}

.ch-reward-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:20;opacity:0;transform:scale(.85) translateY(30px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.ch-stage.ch-opened .ch-reward-wrap{opacity:1;transform:scale(1) translateY(0);transition-delay:.6s;pointer-events:auto}

.ch-card-outer{width:340px;height:480px;position:relative;overflow:visible}

.ch-card-border{position:absolute;inset:-2px;border-radius:8px;overflow:hidden;opacity:0;transition:opacity 1s;transition-delay:1s}
.ch-stage.ch-opened .ch-card-border{opacity:1}
.ch-card-border::before{content:'';position:absolute;width:260px;height:200%;top:-50%;left:calc(50% - 130px);background:linear-gradient(90deg,transparent 0%,#4A90C0 10%,#CC4466 50%,#4A90C0 90%,transparent 100%);animation:chSpin1 12s linear infinite;opacity:.7}
.ch-card-border::after{content:'';position:absolute;width:260px;height:200%;top:-50%;left:calc(50% - 130px);background:linear-gradient(90deg,transparent 0%,#CC4466 10%,#4A90C0 50%,#CC4466 90%,transparent 100%);animation:chSpin2 12s linear infinite;opacity:.7}
@keyframes chSpin1{0%{transform:rotateZ(0deg)}100%{transform:rotateZ(360deg)}}
@keyframes chSpin2{0%{transform:rotateZ(180deg)}100%{transform:rotateZ(540deg)}}

.ch-card-body{position:absolute;inset:1px;background:var(--cv);border-radius:7px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}

.ch-orb{position:absolute;border-radius:50%;filter:blur(20px);opacity:.6}
.ch-orb1{width:120px;height:120px;background:var(--ch-c1,#8ab0d0);left:15%;top:10%;animation:chOrb1 5s ease-in-out infinite}
.ch-orb2{width:80px;height:80px;background:var(--ch-c2,#6090b0);right:10%;top:50%;animation:chOrb2 6s ease-in-out infinite}
.ch-orb3{width:55px;height:55px;background:var(--ch-c3,#667799);left:45%;bottom:10%;animation:chOrb3 5.5s ease-in-out infinite}
@keyframes chOrb1{0%,100%{transform:translate(0,0)}25%{transform:translate(35px,20px)}50%{transform:translate(-15px,40px)}75%{transform:translate(-30px,-10px)}}
@keyframes chOrb2{0%,100%{transform:translate(0,0)}25%{transform:translate(-25px,-18px)}50%{transform:translate(20px,-35px)}75%{transform:translate(35px,15px)}}
@keyframes chOrb3{0%,100%{transform:translate(0,0)}33%{transform:translate(-25px,28px)}66%{transform:translate(28px,-22px)}}

.ch-card-content{position:relative;z-index:2;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 28px;text-align:center}
.ch-card-pool{font-family:var(--fs);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;color:var(--ch-accent);margin-bottom:20px;opacity:.9}
.ch-pool-line{display:block;width:50px;height:1px;background:var(--ch-accent);margin:8px auto 0;opacity:.3}
.ch-card-type{display:inline-block;background:rgba(255,255,255,.06);padding:3px 14px;border-radius:20px;font-size:.65rem;color:rgba(244,244,240,.5);letter-spacing:.1em;margin-bottom:16px;backdrop-filter:blur(2px)}
.ch-card-name{font-family:var(--fz);font-size:1.3rem;font-weight:400;letter-spacing:.12em;margin-bottom:6px;color:var(--ct)}
.ch-card-name-en{font-family:var(--fs);font-size:.65rem;letter-spacing:.2em;color:var(--cm);margin-bottom:24px}
.ch-card-divider{width:30px;height:1px;background:var(--ch-accent);margin:0 auto 24px;opacity:.3}
.ch-card-teaser{font-family:var(--fb);font-size:.88rem;line-height:1.9;color:rgba(244,244,240,.7);font-style:italic;font-weight:300;max-width:280px;white-space:pre-line}
.ch-card-accept{margin-top:24px;background:transparent;border:1px solid var(--ch-accent);color:var(--ch-accent);font-family:var(--fz);font-size:.8rem;letter-spacing:.15em;padding:10px 32px;cursor:pointer;transition:all .4s;position:relative;overflow:hidden}
.ch-card-accept::before{content:'';position:absolute;inset:0;background:var(--ch-accent);opacity:0;transition:opacity .4s}
.ch-card-accept:hover::before{opacity:.1}
.ch-card-accept:hover{box-shadow:0 0 16px var(--ch-crack)}
.ch-card-accept span{position:relative;z-index:1}
.ch-card-footer{margin-top:auto;padding-top:12px;font-family:var(--fs);font-size:.5rem;letter-spacing:.2em;color:rgba(244,244,240,.15)}

.ch-stage.ch-closing .ch-reward-wrap{opacity:0;transform:scale(.9) translateY(-20px);transition:opacity .6s,transform .6s;pointer-events:none}
.ch-stage.ch-closing .ch-crack{width:0}
.ch-stage.ch-closing .ch-rose-glow{opacity:0}

.ch-title{position:absolute;top:15%;left:50%;transform:translateX(-50%);text-align:center;z-index:5;transition:opacity .6s;pointer-events:none}
.ch-stage.ch-opened .ch-title{opacity:0}
.ch-title-zh{font-family:var(--fz);font-size:1.6rem;letter-spacing:.2em;font-weight:400;margin-bottom:6px}
.ch-title-en{font-family:var(--fs);font-size:.7rem;letter-spacing:.25em;color:var(--cm)}
.ch-title-hint{font-family:var(--fz);font-size:.8rem;color:rgba(244,244,240,.3);margin-top:24px;animation:chHint 2.5s ease-in-out infinite}
@keyframes chHint{0%,100%{opacity:.4}50%{opacity:.8}}

.ch-thorn{position:absolute;width:1px;background:linear-gradient(to top,transparent,#7a6a8a,transparent);opacity:.1;z-index:2;pointer-events:none}
.ch-t1{height:120px;left:20%;top:30%;transform:rotate(15deg);animation:chThorn 12s ease-in-out infinite}
.ch-t2{height:80px;right:25%;top:25%;transform:rotate(-20deg);animation:chThorn 15s ease-in-out infinite;animation-delay:3s}
.ch-t3{height:100px;left:35%;bottom:20%;transform:rotate(8deg);animation:chThorn 18s ease-in-out infinite;animation-delay:6s}
.ch-t4{height:60px;right:15%;bottom:30%;transform:rotate(-12deg);animation:chThorn 14s ease-in-out infinite;animation-delay:2s}
@keyframes chThorn{0%,100%{transform:translateY(0);opacity:.1}50%{transform:translateY(-10px);opacity:.2}}

.ch-particles{position:absolute;inset:0;pointer-events:none;z-index:15}
.ch-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--ch-accent,#9a8aaa);opacity:0}
.ch-stage.ch-opened .ch-particle{animation:chBurst 1.2s cubic-bezier(.16,1,.3,1) forwards}
@keyframes chBurst{0%{opacity:1;transform:translate(0,0) scale(1)}100%{opacity:0;transform:translate(var(--px),var(--py)) scale(0)}}

/* — chest history — */
.ch-hist-toggle{
  position:absolute;top:60px;right:24px;z-index:120;
  background:rgba(10,5,8,.6);border:1px solid rgba(244,244,240,.12);
  color:rgba(244,244,240,.5);font-family:var(--fz);font-size:.75rem;
  letter-spacing:.1em;padding:6px 16px;cursor:pointer;transition:all .3s;
  white-space:nowrap;
}
.ch-hist-toggle:hover{color:var(--ct);border-color:rgba(244,244,240,.3)}

.ch-hist-panel{
  position:absolute;top:0;right:-380px;width:360px;height:100%;z-index:130;
  background:rgba(10,5,8,.95);border-left:1px solid rgba(244,244,240,.06);
  backdrop-filter:blur(20px);
  transition:right .5s cubic-bezier(.16,1,.3,1);
  display:flex;flex-direction:column;
  overflow:hidden;
}
.ch-hist-panel.open{right:0}

.ch-hist-header{padding:60px 20px 16px;border-bottom:1px solid rgba(244,244,240,.06);position:relative}
.ch-hist-title{font-family:var(--fz);font-size:1rem;font-weight:400;letter-spacing:.15em}
.ch-hist-sub{font-family:var(--fs);font-size:.6rem;letter-spacing:.2em;color:var(--cm);display:block;margin-top:4px}
.ch-hist-close{position:absolute;top:56px;right:16px;background:0;border:0;color:var(--cm);font-size:1.2rem;cursor:pointer;transition:color .3s;padding:8px;z-index:10}
.ch-hist-close:hover{color:var(--ct)}

.ch-hist-list{flex:1;overflow-y:auto;padding:12px 16px;scrollbar-width:thin;scrollbar-color:rgba(244,244,240,.1) transparent}
.ch-hist-empty{text-align:center;color:rgba(244,244,240,.2);font-size:.8rem;padding:40px 0}

.ch-hist-row{
  padding:14px 16px;margin-bottom:8px;
  background:rgba(244,244,240,.03);
  border:1px solid rgba(244,244,240,.04);
  cursor:pointer;transition:all .3s;
}
.ch-hist-row:hover{background:rgba(244,244,240,.06);border-color:rgba(244,244,240,.08)}
.ch-hist-row-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.ch-hist-row-pool{font-family:var(--fs);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase}
.ch-hist-row-pool.pool-silver{color:#9ab0c4}.ch-hist-row-pool.pool-gold{color:#C9A96E}.ch-hist-row-pool.pool-red{color:#c04040}
.ch-hist-row-date{font-family:var(--fo);font-size:.6rem;color:rgba(244,244,240,.25)}
.ch-hist-row-name{font-family:var(--fz);font-size:.85rem;font-weight:400;letter-spacing:.05em}
.ch-hist-row-type{font-size:.6rem;color:rgba(244,244,240,.3);margin-top:4px}
.ch-hist-row-note{font-size:.6rem;color:var(--ca);margin-top:4px;opacity:.6}

/* history detail */
.ch-hist-detail{
  position:absolute;inset:0;z-index:140;
  background:rgba(5,2,5,.92);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .4s;
}
.ch-hist-detail.open{opacity:1;pointer-events:auto}

.ch-hist-detail-inner{
  width:380px;max-height:80vh;overflow-y:auto;
  padding:36px 32px;position:relative;text-align:center;
  scrollbar-width:thin;scrollbar-color:rgba(244,244,240,.1) transparent;
}
.ch-hist-detail-close{position:absolute;top:0;right:0;background:0;border:0;color:var(--cm);font-size:1rem;cursor:pointer;transition:color .3s}
.ch-hist-detail-close:hover{color:var(--ct)}
.ch-hist-detail-pool{font-family:var(--fs);font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;margin-bottom:12px}
.ch-hist-detail-name{font-family:var(--fz);font-size:1.2rem;letter-spacing:.1em;margin-bottom:6px}
.ch-hist-detail-date{font-family:var(--fo);font-size:.65rem;color:rgba(244,244,240,.25);margin-bottom:20px}
.ch-hist-detail-teaser{font-family:var(--fb);font-size:.85rem;line-height:1.8;color:rgba(244,244,240,.6);font-style:italic;font-weight:300;white-space:pre-line;margin-bottom:20px}
.ch-hist-detail-divider{width:30px;height:1px;background:rgba(244,244,240,.1);margin:0 auto 20px}
.ch-hist-detail-label{display:block;font-family:var(--fz);font-size:.7rem;color:rgba(244,244,240,.3);letter-spacing:.1em;margin-bottom:10px;text-align:left}
.ch-hist-detail-ta{
  width:100%;min-height:100px;
  background:rgba(244,244,240,.03);border:1px solid rgba(244,244,240,.06);
  color:var(--ct);font-family:var(--fb);font-size:.85rem;line-height:1.7;
  padding:14px;resize:vertical;outline:none;
  transition:border-color .3s;
}
.ch-hist-detail-ta:focus{border-color:rgba(244,244,240,.15)}
.ch-hist-detail-ta::placeholder{color:rgba(244,244,240,.15)}
.ch-hist-detail-save{
  margin-top:16px;
  background:transparent;border:1px solid rgba(244,244,240,.12);
  color:rgba(244,244,240,.5);font-family:var(--fz);font-size:.75rem;
  letter-spacing:.1em;padding:8px 28px;cursor:pointer;transition:all .3s;
}
.ch-hist-detail-save:hover{color:var(--ct);border-color:rgba(244,244,240,.3)}

/* ===== Image wrap & lightbox ===== */
.td-img-wrap{position:relative;display:inline-block}
.td-img-wrap img{cursor:pointer;transition:opacity .2s}
.td-img-wrap:hover img{opacity:.85}
.td-img-del{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;border:none;font-size:.7rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.td-img-wrap:hover .td-img-del{opacity:1}
.td-img-del:hover{background:rgba(200,50,50,.8)}
.img-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;cursor:zoom-out;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.img-lightbox.show{opacity:1;pointer-events:all}
.lb-img{max-width:90vw;max-height:90vh;object-fit:contain;border-radius:4px;box-shadow:0 0 40px rgba(0,0,0,.5)}

/* ===== Fullscreen text reader/editor ===== */
.text-fs{position:fixed;inset:0;z-index:9998;background:rgba(10,5,8,.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:none;flex-direction:column;padding:env(safe-area-inset-top,20px) 20px 20px}
.text-fs.show{display:flex}
.text-fs-head{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 16px;border-bottom:1px solid rgba(244,244,240,.08);margin-bottom:16px}
.text-fs-title{font-family:var(--fz);font-size:.85rem;letter-spacing:.15em;color:var(--cm)}
.text-fs-close{background:none;border:1px solid rgba(244,244,240,.15);color:var(--ct);font-size:.95rem;padding:6px 14px;border-radius:18px;cursor:pointer;font-family:var(--fm);letter-spacing:.1em}
.text-fs-close:hover{border-color:var(--co);color:var(--co)}
.text-fs-ta{flex:1;width:100%;background:transparent;border:none;color:var(--ct);font-family:var(--fb);font-size:1rem;line-height:2;padding:8px 4px;outline:none;resize:none;overflow-y:auto}
.text-fs-ta::placeholder{color:var(--cm);font-style:italic}
/* Expand button on textareas */
.ta-wrap{position:relative}
.ta-expand{position:absolute;top:6px;right:6px;width:24px;height:24px;background:rgba(0,0,0,.35);border:1px solid rgba(244,244,240,.12);border-radius:6px;color:rgba(244,244,240,.55);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;line-height:1;z-index:10;backdrop-filter:blur(4px);transition:all .25s;padding:0}
.ta-expand:hover{background:rgba(0,0,0,.55);border-color:var(--co);color:var(--co)}
.ta-expand:hover{background:rgba(0,0,0,.6);border-color:var(--co);color:var(--co)}

/* ===== Heartbeat Widget ===== */
.heartbeat-widget{position:absolute;bottom:72px;left:32px;z-index:40;display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.5;transition:opacity .4s}
.heartbeat-widget:hover{opacity:.9}
.hb-pair{display:flex;gap:14px;align-items:flex-end}
.hb-btn{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 6px;border-radius:8px;transition:background .3s,box-shadow .3s}
.hb-btn:hover{box-shadow:0 0 10px rgba(255,255,255,.05)}
.hb-btn:hover{background:rgba(255,255,255,.04)}
.hb-icon{display:flex;align-items:center;justify-content:center;line-height:1;transition:filter .3s,transform .3s cubic-bezier(.2,.8,.3,1.4)}
.hb-cat .hb-icon{opacity:.7;transition:opacity .3s,filter .3s,transform .3s}
.hb-fish .hb-icon{opacity:.7;transition:opacity .3s,filter .3s,transform .3s}
.hb-fish .hb-icon svg{transform:scaleX(-1)}
/* hover & tap glow */
.hb-cat:hover .hb-icon{opacity:1;filter:drop-shadow(0 0 6px rgba(180,150,220,.6))}
.hb-fish:hover .hb-icon{opacity:1;filter:drop-shadow(0 0 6px rgba(40,90,180,.6))}
.hb-cat.hb-tap .hb-icon{opacity:1;filter:drop-shadow(0 0 10px rgba(200,160,240,.8)) drop-shadow(0 0 4px rgba(180,150,220,.5))}
.hb-fish.hb-tap .hb-icon{opacity:1;filter:drop-shadow(0 0 10px rgba(40,100,220,.8)) drop-shadow(0 0 4px rgba(40,90,180,.5))}
.hb-count{display:flex;align-items:center;gap:3px;font-family:var(--fm);font-size:.55rem;letter-spacing:.05em;transition:color .3s}
.hb-cat .hb-heart{color:rgba(180,150,210,.7)}
.hb-cat .hb-num{color:rgba(180,150,210,.6)}
.hb-fish .hb-heart{color:rgba(80,130,200,.7)}
.hb-fish .hb-num{color:rgba(80,130,200,.6)}
.hb-cat:hover .hb-heart,.hb-cat:hover .hb-num{color:rgba(200,160,240,.95)}
.hb-fish:hover .hb-heart,.hb-fish:hover .hb-num{color:rgba(80,140,220,.95)}
.hb-whisper{font-family:var(--fz);font-size:.42rem;color:rgba(200,200,200,.25);letter-spacing:.1em;white-space:nowrap;margin-top:1px}
/* bounce anim for cat */
@keyframes hbBounce{0%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}60%{transform:translateY(1px)}}
.hb-cat.hb-tap .hb-icon{animation:hbBounce .45s ease}
/* wiggle anim for fish */
@keyframes hbWiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(12deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}
.hb-fish.hb-tap .hb-icon{animation:hbWiggle .5s ease}
/* floating heart particle */
@keyframes hbFloat{0%{opacity:.9;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-22px) scale(.5)}}
.hb-particle{position:absolute;font-size:.6rem;pointer-events:none;animation:hbFloat .55s ease-out forwards}
.hb-cat .hb-particle{color:rgba(200,160,240,.85)}
.hb-fish .hb-particle{color:rgba(60,120,210,.85)}

/* Also hide cursor on any touch device */
@media(pointer:coarse){
  .cur-dot,.cur-ring{display:none!important}
  html,body,button,a{cursor:auto!important}
}