@font-face { font-family:FortuneBrush; src:url('assets/fonts/fortune-brush.ttf') format('truetype'); font-display:swap; }
.arched-title { margin:5px auto 0; width:min(340px,100%); line-height:1; }
.arched-title svg { display:block; width:100%; height:auto; overflow:visible; }
.arched-title text { font-family:'Microsoft YaHei',sans-serif; font-size:52px; font-weight:800; letter-spacing:6px; fill:url(#title-color); }
.great-luck { position:absolute; inset:0; pointer-events:none; z-index:3; }
.sui-character,.luck-lettering { position:absolute; top:32%; height:230px; width:125px; border:0; padding:0; background:none; pointer-events:auto; }
.sui-character { left:-57px; }
.sui-character img { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 5px 4px #805a4426); }
.luck-lettering { right:-38px; width:90px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; }
.luck-lettering span { display:block; font-family:FortuneBrush,STKaiti,KaiTi,serif; font-size:76px; line-height:1.1; color:#c93f30; -webkit-text-stroke:.6px #a93225; text-shadow:2px 2px 0 #ffe6a2,3px 3px 0 #dca951,0 4px 12px #ce503322; }
.great-luck[data-side="right"] .sui-character { left:auto; right:-57px; }
.great-luck[data-side="right"] .luck-lettering { right:auto; left:-38px; }
.great-luck.celebrate .sui-character img,.great-luck.celebrate .luck-lettering { animation:luck-wiggle .65s ease-in-out; }
@keyframes luck-wiggle { 0%,100%{transform:rotate(0)} 20%{transform:rotate(-5deg)} 45%{transform:rotate(5deg)} 70%{transform:rotate(-3deg)} }
.festive-particles { position:absolute; inset:0; overflow:visible; pointer-events:none; }
.festive-particles i { position:absolute; font-style:normal; font-size:14px; animation:festive-pop 1s ease-out both; }
@keyframes festive-pop { from { opacity:1; transform:translate(0,0) rotate(0) scale(.5); } to { opacity:0; transform:translate(var(--x),var(--y)) rotate(100deg) scale(1.2); } }
.sui-cover,.no-effect-cover { display:block; position:relative; width:100%; height:268px; border-radius:19px; border:1px solid #e8cbae; overflow:hidden; background:linear-gradient(150deg,#fff0d5,#f6d3be); }
.sui-cover img { width:100%; height:85%; object-fit:contain; padding:22px 8px 0; }
.sui-cover-word { position:absolute; bottom:12px; right:12px; font-family:FortuneBrush,KaiTi,serif; color:#c54d36; font-size:37px; }
.no-effect-cover { display:grid; place-items:center; color:#ad9385; background:#f8eee5; }
#luck-effects-list [aria-pressed="true"] > span:first-child { border:2px solid #df9b87; }
.notes-page { max-width:800px; margin:auto; }
.notes-header { display:flex; align-items:center; gap:15px; margin:16px 0 25px; }
.notes-icon { display:grid; place-items:center; width:53px; height:53px; border-radius:16px; background:#ffe6bd; color:#bc8a44; font-size:28px; }
.notes-header h2 { font-size:28px; color:#705348; }
.notes-header p { margin:4px 0 0; color:#ac8f7f; font-size:14px; }
.notes-empty { padding:28px 20px; margin:22px 0; border:1px dashed #e5cabc; border-radius:18px; color:#aa8d7b; font-size:14px; line-height:1.8; text-align:center; }
.notes-list { display:flex; flex-direction:column; gap:14px; }
.note-row { display:flex; align-items:center; gap:15px; min-height:88px; padding:20px; border:1px solid #efdbcd; border-radius:19px; background:#fffaf5; box-shadow:0 5px 18px #ae80680a; touch-action:pan-y; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
.note-check { flex:none; color:#d4a477; font-size:25px; }
.note-content { flex:1; min-width:0; }
.note-content p { margin:0 0 7px; font-size:17px; line-height:1.6; color:#765a4b; overflow-wrap:anywhere; white-space:pre-wrap; }
.note-content small { font-size:11px; color:#b59784; }
.note-menu { background:none; border:0; padding:0; color:#a4897b; font-size:23px; width:34px; min-height:44px; flex:none; overflow:hidden; }
.note-row.completed { background:#efede9; border-color:#e3dfda; }
.completed .note-content p { color:#a29c94; text-decoration:line-through; }
.completed .note-check,.completed .note-content small,.completed .note-menu { color:#b4ada5; }
.completed-divider { display:flex; align-items:center; gap:15px; color:#b2a195; font-size:12px; margin:30px 0 21px; }
.completed-divider::before,.completed-divider::after { content:''; height:1px; background:#e4d6ca; flex:1; }
.add-note { position:fixed; bottom:calc(95px + env(safe-area-inset-bottom,0px)); right:max(24px,calc((100vw - 780px)/2)); z-index:20; width:64px; height:64px; border-radius:50%; border:0; background:#efb66d; color:#fffaf0; font-size:42px; line-height:1; box-shadow:0 6px 20px #c6934c33; }
.bottom-nav button { width:min(33.333%,240px); }
.note-dialog { width:min(420px,calc(100vw - 32px)); border:1px solid #eed8c8; border-radius:23px; padding:26px; color:#765a4b; background:#fff8f1; box-shadow:0 24px 80px #73523930; max-height:80vh; overflow:auto; }
.note-dialog::backdrop { background:#4c352b55; backdrop-filter:blur(3px); }
.note-dialog h2 { margin:0 0 22px; color:#765a4b; overflow-wrap:anywhere; font-size:20px; }
.note-dialog label { font-size:13px; display:block; margin-bottom:8px; }
.note-dialog textarea { width:100%; resize:vertical; border:1px solid #e5cbb7; border-radius:12px; padding:12px; font:inherit; color:#765a4b; background:#fffdfa; }
.note-dialog textarea:focus { outline:2px solid #efb29c; outline-offset:2px; }
.dialog-actions { display:flex; justify-content:flex-end; gap:12px; }
.note-dialog button { border:0; border-radius:11px; padding:12px 20px; background:#f2e7dc; color:#8f6d59; }
.note-dialog button.primary-action { background:#eb9b88; color:#fff; }
#note-action-buttons { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; }
#note-action-buttons button { width:100%; }
#note-action-buttons .danger-action { color:#bc5b4c; }
#close-note-actions { width:100%; background:transparent; }
#note-editor-error { color:#bc5b4c; font-size:12px; line-height:1.5; }
.unfinished-reminder { background:#fff0dc; border:1px solid #efd4ac; border-radius:16px; padding:16px 18px; margin-bottom:20px; }
.unfinished-reminder > div { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; color:#a07842; }
.unfinished-reminder button { background:none; border:0; color:#ba8052; font-size:12px; padding:6px 0; flex:none; }
.unfinished-reminder ul { padding-left:20px; margin:10px 0 0; color:#a88b6d; font-size:13px; line-height:1.8; max-height:160px; overflow:auto; overflow-wrap:anywhere; }
@media(max-width:600px) {
 .arched-title { width:260px; }
 .fortune-card.has-great-luck:not(.empty) { padding-left:53px; padding-right:53px; min-height:570px; }
 .has-great-luck .result-content h3 { font-size:23px; }
 .has-great-luck .verse { font-size:14px; }
 .sui-character { width:80px; height:185px; left:-24px; top:33%; }
 .luck-lettering { width:52px; height:185px; right:-6px; top:33%; }
 .luck-lettering span { font-size:49px; }
 .great-luck[data-side="right"] .sui-character { right:-24px; }
 .great-luck[data-side="right"] .luck-lettering { left:-6px; }
 .sui-cover,.no-effect-cover { height:230px; }
 .note-row { padding:17px 14px; gap:11px; }
 .note-content p { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { .great-luck.celebrate * { animation:none!important; } }