:root{--ink:#382521;--wine:#7d1725;--vermilion:#b72e32;--gold:#d7a450;--gold-light:#f0d791;--muted:#82675e;--paper:#fffaf0}
*{box-sizing:border-box}html{scrollbar-gutter:stable}body{min-width:320px;min-height:100vh;margin:0;color:var(--ink);font-family:"Noto Serif SC","Songti SC",STSong,"Microsoft YaHei",serif;background:#310c16;overflow-x:hidden;isolation:isolate}
.scene-bg{position:fixed;z-index:-2;inset:0;width:100%;height:100%;pointer-events:none;background-color:#310c16;background-image:linear-gradient(110deg,rgba(40,4,12,.59),rgba(91,14,32,.24) 47%,rgba(38,3,11,.57)),radial-gradient(ellipse at 50% 16%,rgba(255,218,142,.13),transparent 32rem),url('/static/assets/wedding-moon.png?v=577a79e5c7237b97');background-repeat:no-repeat;background-size:cover;background-position:center;transform:translateZ(0)}
button,input{font:inherit}button{border:0;cursor:pointer;touch-action:manipulation}button:disabled{cursor:not-allowed;opacity:.4}button:not(:disabled){transition:filter .2s,box-shadow .2s,transform .2s}button:not(:disabled):hover{filter:brightness(1.06);transform:translateY(-1px)}button:focus-visible{outline:3px solid #d7a450;outline-offset:4px}button:not(:disabled):active{transform:translateY(0)}
.page{width:min(calc(100% - 56px),1160px);margin:auto;padding:25px 0 48px}.brand{display:flex;align-items:center;justify-content:center;gap:11px;margin:0 0 17px;color:#ffe8ae;font-size:.85rem;letter-spacing:.2em;text-shadow:0 2px 8px #310c16}.seal{display:grid;width:44px;height:44px;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:1.3rem;letter-spacing:0}
.panel{position:relative;overflow:hidden;border:1px solid rgba(230,192,115,.78);border-radius:7px;background:linear-gradient(135deg,rgba(255,253,244,.98),rgba(246,232,201,.98));box-shadow:0 24px 64px #1a000455,inset 0 0 0 5px #ffffff70}.panel::before{position:absolute;inset:12px;border:1px solid #8f232738;border-radius:2px;content:'';pointer-events:none}.corner{position:absolute;width:64px;height:64px;border-color:var(--gold);border-style:solid;opacity:.7}.corner.top{top:20px;left:20px;border-width:1px 0 0 1px}.corner.bottom{bottom:20px;right:20px;border-width:0 1px 1px 0}.content{position:relative;padding:42px clamp(28px,4vw,54px) 34px}.hidden{display:none!important}.view{animation:arrive .5s ease both}@keyframes arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
h1,h2,p{margin-top:0}h1{margin-bottom:10px;color:var(--wine);font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:.16em;text-align:center;text-indent:.16em}.eyebrow{margin:0;color:var(--muted);font-size:1rem;letter-spacing:.11em;text-align:center}.ornament{display:flex;align-items:center;justify-content:center;gap:13px;margin:22px 0 27px;color:var(--gold)}.ornament::before,.ornament::after{width:95px;height:1px;content:'';background:linear-gradient(90deg,transparent,var(--gold))}.ornament::after{transform:scaleX(-1)}
#login-view{max-width:590px;margin:6px auto 13px}.love-question{margin:0 auto 27px;color:#5e403b;font-size:1.04rem;line-height:2.1;text-align:center}.love-question strong{color:var(--wine)}.days-label{display:block;margin:0 0 14px;color:var(--wine);font-size:1rem;letter-spacing:.15em;text-align:center}.day-code{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;width:min(100%,340px);margin:auto;direction:ltr}.day-digit{width:100%;height:66px;padding:0;color:var(--wine);font-family:Georgia,serif;font-size:2.1rem;text-align:center;border:1px solid #7d172550;border-radius:4px;outline:none;background:#ffffffb3;box-shadow:inset 0 -3px 0 #d7a45030;transition:border .2s,box-shadow .2s}.day-digit:focus{border-color:var(--vermilion);box-shadow:0 0 0 3px #b72e3220,inset 0 -3px 0 #d7a45070}.day-digit.filled{border-color:#b72e3299;background:#fffdf7}.days-note{margin:16px 0 0;color:#896b59;font-size:.88rem;line-height:1.7;text-align:center}.error{min-height:1.5em;margin:10px 0 0;color:#a5222c;font-size:.9rem;text-align:center}.primary{display:block;width:100%;min-height:55px;margin:22px auto 0;padding:14px 20px;color:#ffedbd;font-weight:700;letter-spacing:.16em;background:linear-gradient(135deg,#a52731,#741323);box-shadow:0 6px 14px #5e0f1938}.primary::before,.primary::after{margin:0 10px;color:var(--gold-light);content:'·'}.intro-action{max-width:380px}.opening-copy{max-width:760px;margin:0 auto 29px;color:#5e403b;font-size:1.13rem;letter-spacing:.025em;line-height:2.15;text-align:justify}.opening-copy strong{color:var(--wine);font-weight:700}.copy-lead{display:block;margin-bottom:14px;color:var(--wine);letter-spacing:.1em;text-align:center}
.game-top{text-align:center;scroll-margin-top:25px}.game-kicker{display:inline-block;margin:0 0 11px;padding:5px 14px;color:#9b3030;font-size:.84rem;letter-spacing:.15em;border:1px solid #b72e3245;background:#ffffff40}.game-top h1{margin-bottom:10px;font-size:2.35rem}.game-top .eyebrow{height:3.8em;font-size:1rem;line-height:1.9;letter-spacing:.12em}.progress{display:flex;justify-content:center;max-width:550px;margin:23px auto 26px;padding:0;list-style:none}.step{position:relative;display:flex;flex:1;justify-content:center}.step:not(:last-child)::after{position:absolute;left:calc(50% + 17px);top:17px;width:calc(100% - 34px);height:1px;background:#d9c5a6;content:''}.dot{position:relative;z-index:1;display:grid;width:35px;height:35px;place-items:center;color:#a08473;font-size:.88rem;border:1px solid #d8c3a3;border-radius:50%;background:#fffaed;transition:.3s}.dot.done{color:#fff8e7;border-color:var(--gold);background:var(--gold)}.dot.active{color:#ffefc4;border-color:var(--vermilion);background:var(--vermilion);box-shadow:0 0 0 4px #b72e321b}
.game-card{display:flex;flex-direction:column;align-items:center;justify-content:center;height:284px;margin:0 auto 24px;padding:23px 26px;border-block:1px solid #cda55b80;background:linear-gradient(90deg,#ffffff18,#ffffff80,#ffffff18);text-align:center}.game-card h2{margin:0 0 13px;color:var(--wine);font-size:2.05rem;letter-spacing:.13em;text-indent:.13em}.rule-label{margin:0 0 13px;color:#a22c31;font-size:.8rem;letter-spacing:.2em}.rules{max-width:870px;margin:0;padding:0;color:#5a3d37;font-size:1.1rem;line-height:1.95;list-style:none;text-wrap:pretty}.rules li+li{margin-top:7px}.controls{display:grid;grid-template-columns:1fr 1.4fr 1fr 1fr;gap:12px;align-items:stretch}.control{min-height:53px;padding:12px 9px;color:var(--wine);font-size:1rem;letter-spacing:.05em;border:1px solid #7d172550;border-radius:2px;background:#ffffff50}.control.complete{color:#ffedbf;font-weight:700;letter-spacing:.1em;border-color:transparent;background:linear-gradient(135deg,#a52731,#741323);box-shadow:0 5px 12px #5e0f1933}.control.next:not(:disabled){background:#f1dfb4;border-color:#c99749}.nav-note{height:1.5em;margin:13px 0 0;text-align:center;font-size:.85rem;color:var(--muted)}
.puzzle-section{margin-top:29px;scroll-margin-top:22px}.puzzle-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px}.puzzle-heading h2{margin:0;color:var(--wine);font-size:1.3rem;font-weight:600;letter-spacing:.1em;outline:none}.puzzle-count{margin:0;color:#7d592b;font-size:.95rem;letter-spacing:.08em;font-variant-numeric:tabular-nums}.puzzle-frame{position:relative;padding:8px;border:1px solid #c99b57;background:#eedfbe;box-shadow:0 8px 27px #6943261a;overflow:hidden}.puzzle-board{display:block;width:100%;height:auto;aspect-ratio:1384 / 960;background:#f3e8d1;overflow:hidden}.puzzle-slot{fill:url(#paper-grain);stroke:#bda16a;stroke-width:1.7;vector-effect:non-scaling-stroke;transition:opacity .6s}.slot-label{fill:#a58a63;font-size:25px;letter-spacing:3px;text-anchor:middle;dominant-baseline:middle;transition:opacity .5s}.puzzle-piece{opacity:0;visibility:hidden;transform-box:fill-box;transform-origin:center}.puzzle-piece.is-visible{opacity:1;visibility:visible}.piece-seam{fill:none;stroke:#f9eac6;stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.75;transition:opacity .7s}.full-photo{opacity:0;visibility:hidden;transition:opacity .9s}.puzzle-board.is-complete .full-photo{opacity:1;visibility:visible}.puzzle-board.is-complete .piece-seam{opacity:0}.puzzle-frame.celebrating::after{position:absolute;inset:0;pointer-events:none;content:'';background:linear-gradient(110deg,transparent 25%,#fff4c755 45%,transparent 65%);transform:translateX(-110%);animation:shine 1.2s ease-in-out .2s both}@keyframes shine{to{transform:translateX(110%)}}.puzzle-caption{min-height:3.6em;margin:17px 0 0;color:#866c59;font-size:.95rem;line-height:1.8;text-align:center}.completion{min-height:4.4em;margin:3px 0 0;color:var(--wine);font-size:1.1rem;letter-spacing:.08em;line-height:1.9;text-align:center}.completion:empty{min-height:0;margin:0}.logout{display:block;margin:23px auto 0;padding:6px 10px;color:#957262;font-size:.83rem;text-decoration:underline;text-underline-offset:4px;background:transparent}.toast{position:fixed;z-index:5;bottom:25px;left:50%;max-width:calc(100vw - 30px);padding:12px 22px;color:#fff2d0;font-size:1rem;text-align:center;border:1px solid #e7bd6380;background:#431318ef;box-shadow:0 7px 20px #0003;opacity:0;pointer-events:none;transform:translate(-50%,18px);transition:.28s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:900px){.puzzle-heading h2{font-size:1.42rem}.game-card{height:262px}.rules{font-size:1.14rem}}
@media(max-width:600px){.page{width:calc(100% - 24px)}.content{padding:36px 22px 28px}.game-top h1{font-size:1.9rem}.game-top .eyebrow{font-size:.78rem;letter-spacing:.03em;height:4em}.game-card{height:340px;padding:20px 8px}.game-card h2{font-size:1.7rem}.rules{font-size:1rem}.controls{grid-template-columns:1fr 1fr;gap:9px}.control.complete{grid-column:2;grid-row:1}.puzzle-heading h2{font-size:1.05rem}.puzzle-count{font-size:.8rem}.opening-copy{font-size:1rem}.corner{width:42px;height:42px}.puzzle-frame{padding:4px}.nav-note{font-size:.75rem}}
.game-card{height:400px}.audio-player{width:min(100%,790px);margin-top:18px;padding:13px 16px;border:1px solid #cba76780;border-radius:5px;background:#fffaf0cc;box-shadow:0 3px 12px #7d172509;text-align:left}.audio-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;color:var(--wine);font-size:.88rem;letter-spacing:.04em}.audio-heading #audio-status{color:#836b53;font-size:.8rem}.audio-controls{display:flex;align-items:center;gap:12px}.audio-play,.audio-reset{min-height:43px;padding:10px 16px;border-radius:3px;font-size:.92rem;white-space:nowrap}.audio-play{color:#ffedbf;background:linear-gradient(135deg,#a52731,#741323)}.audio-reset{color:var(--wine);border:1px solid #7d172540;background:#fffdf680}.audio-timeline{flex:1;min-width:70px}.audio-timeline progress{display:block;width:100%;height:6px;border:0;border-radius:9px;overflow:hidden;background:#e4d5b9;accent-color:var(--wine)}.audio-timeline progress::-webkit-progress-bar{background:#e4d5b9}.audio-timeline progress::-webkit-progress-value{background:linear-gradient(90deg,#ab3035,#d4a257)}.audio-timeline progress::-moz-progress-bar{background:#a32b35}.audio-timeline span{display:block;margin-top:6px;text-align:right;font-size:.77rem;color:#82675e;font-variant-numeric:tabular-nums;font-family:Georgia,serif}@media(min-width:900px){.game-card{height:380px}}@media(max-width:600px){.game-card{height:470px}.audio-player{padding:12px}.audio-controls{gap:7px}.audio-play,.audio-reset{padding:10px;font-size:.83rem}.audio-heading{font-size:.77rem}}
.audio-timeline input[type=range]{display:block;width:100%;height:28px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;touch-action:pan-y;outline-offset:2px}.audio-timeline input[type=range]:disabled{cursor:wait;opacity:.45}.audio-timeline input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:9px;background:linear-gradient(to right,#a32b35 0 var(--played,0%),#e4d5b9 var(--played,0%) 100%)}.audio-timeline input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:19px;height:19px;margin-top:-6.5px;border:2px solid #fff1d0;border-radius:50%;background:var(--wine);box-shadow:0 1px 5px #7d172540}.audio-timeline input[type=range]::-moz-range-track{height:6px;border-radius:9px;background:#e4d5b9}.audio-timeline input[type=range]::-moz-range-progress{height:6px;border-radius:9px;background:#a32b35}.audio-timeline input[type=range]::-moz-range-thumb{width:16px;height:16px;border:2px solid #fff1d0;border-radius:50%;background:var(--wine)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}