:root{--ink: #5a3a4e;--glass: rgba(255, 244, 240, .8);--rose: #e8657f;--shadow: 0 2px 12px rgba(150, 60, 100, .25)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;overscroll-behavior:none;background:#f9a4b8;color:var(--ink);font-family:Georgia,Times New Roman,serif}#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none}#ui{position:fixed;inset:0;pointer-events:none}#ui>*{pointer-events:auto}[hidden]{display:none!important}#title{position:absolute;left:18px;top:max(16px,env(safe-area-inset-top));color:#fff;text-shadow:0 1px 10px rgba(180,70,110,.55);pointer-events:none;transition:opacity 2.5s}#title.fade{opacity:0}#title b{display:block;font-size:22px;font-weight:400;letter-spacing:.04em}#title small{font-size:13px;font-style:italic;opacity:.9}.btns{position:absolute;right:18px;top:max(18px,env(safe-area-inset-top));display:flex;gap:16px}.btn{--edge: 3px;width:44px;height:44px;padding:0;border:0;border-radius:0;cursor:pointer;display:grid;place-items:center;color:var(--ink);background:#fff4f0;box-shadow:0 calc(var(--edge) * -1) 0 0 var(--ink),0 var(--edge) 0 0 var(--ink),calc(var(--edge) * -1) 0 0 0 var(--ink),var(--edge) 0 0 0 var(--ink),inset 0 calc(var(--edge) * -1) 0 0 #f2b8c6,inset 0 var(--edge) 0 0 #fff;transition:transform .08s}.btn .ico{display:block;fill:currentColor;image-rendering:pixelated}.btn:active{transform:translateY(2px);box-shadow:0 calc(var(--edge) * -1) 0 0 var(--ink),0 var(--edge) 0 0 var(--ink),calc(var(--edge) * -1) 0 0 0 var(--ink),var(--edge) 0 0 0 var(--ink),inset 0 var(--edge) 0 0 #f2b8c6}.btn:focus-visible{outline:3px dashed #fff;outline-offset:6px}.btn.on{background:var(--rose);color:#fff;box-shadow:0 calc(var(--edge) * -1) 0 0 var(--ink),0 var(--edge) 0 0 var(--ink),calc(var(--edge) * -1) 0 0 0 var(--ink),var(--edge) 0 0 0 var(--ink),inset 0 calc(var(--edge) * -1) 0 0 #bd4468,inset 0 var(--edge) 0 0 #ff9aa8}#count{position:absolute;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%);padding:7px 16px;border-radius:20px;background:var(--glass);box-shadow:var(--shadow);font-size:15px;pointer-events:none;transition:transform .2s}#count.pop{transform:translate(-50%) scale(1.18)}.panel{position:absolute;right:14px;top:calc(max(18px,env(safe-area-inset-top)) + 60px);width:min(270px,calc(100vw - 28px));padding:14px 16px;border-radius:18px;background:var(--glass);box-shadow:0 6px 24px #963c6447;backdrop-filter:blur(8px)}.panel h3{margin:0 0 8px;font-size:15px;font-weight:400;font-style:italic}.row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:14px}.row label{width:88px}.row input{flex:1;min-width:0;accent-color:var(--rose)}#albumGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.slot{aspect-ratio:3 / 2;padding:0;overflow:hidden;display:flex;align-items:center;justify-content:center;border-radius:8px;border:2px dashed rgba(90,58,78,.3);background:transparent;color:inherit;font-size:20px;opacity:.7;cursor:default}.slot.on{border:3px solid #fff;opacity:1;cursor:pointer;box-shadow:0 2px 8px #963c644d}.slot canvas{width:100%;height:100%;display:block;image-rendering:pixelated}#card{position:fixed;inset:0;padding:26px 20px;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 50% 40%,#ffbec859,#461e468c);backdrop-filter:blur(3px);animation:fade .3s}#card.out{animation:fadeOut .26s forwards}#cardBox{position:relative;width:min(400px,100%);padding:16px 16px 18px;border-radius:3px;text-align:center;background:#fffaf2 repeating-linear-gradient(0deg,transparent 0 5px,rgba(232,101,127,.04) 5px 6px);box-shadow:0 0 0 1px #f1dccb,0 2px 0 1px #ead0c0,0 18px 50px #461e4680;transform:rotate(-1.5deg);animation:cardIn .7s cubic-bezier(.2,1.25,.4,1) both}#card.out #cardBox{animation:cardOut .26s ease-in forwards}.tape{position:absolute;z-index:2;left:50%;top:-11px;width:96px;height:24px;margin-left:-48px;transform:rotate(-3deg);background:repeating-linear-gradient(90deg,#ffbed0d9 0 8px,#ffe0e8d9 8px 16px);box-shadow:0 1px 3px #5a284633}.art{position:relative;padding:5px;background:#fff;box-shadow:0 0 0 1px #ecd5c6,0 2px 6px #5a284626}.art canvas{width:100%;aspect-ratio:3 / 2;display:block;image-rendering:pixelated;animation:develop 1.2s steps(7) both}.stamp{position:absolute;right:-9px;top:-9px;width:40px;height:48px;display:grid;place-items:center;background:#fff5f0;color:var(--rose);font-size:22px;line-height:1;outline:2px dotted #e8a5b4;outline-offset:-4px;box-shadow:0 2px 6px #5a28464d;transform:rotate(8deg);animation:stampIn .35s .6s cubic-bezier(.3,1.6,.5,1) both}#cardBox h2{margin:14px 0 6px;padding-bottom:8px;font-size:23px;font-weight:400;color:var(--rose);border-bottom:1px dashed #efc3c9;animation:rise .5s .35s both}#cardBox p{margin:0 0 14px;font-size:16px;line-height:1.5;font-style:italic;animation:rise .5s .5s both}#cardBox button{border:0;border-radius:18px;padding:8px 22px;background:var(--rose);color:#fff;font:inherit;cursor:pointer;box-shadow:0 3px #bd4468;transition:transform .12s,box-shadow .12s;animation:rise .5s .7s both}#cardBox button:hover{transform:translateY(-1px)}#cardBox button:active{transform:translateY(3px);box-shadow:0 0 #bd4468}#card .heart{position:absolute;bottom:-40px;color:#ffd1dc;opacity:0;pointer-events:none;text-shadow:0 0 8px rgba(255,120,160,.6);animation:floatUp linear infinite}#start{position:fixed;inset:0;padding:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;cursor:pointer;color:#fff;text-shadow:0 1px 12px rgba(180,70,110,.6);background:linear-gradient(#f7b2c4cc,#ffd6a8cc);transition:opacity 1s;animation:fade .6s}#start.out{opacity:0;pointer-events:none}#start b{font-size:38px;font-weight:400;letter-spacing:.05em}#start i{font-size:16px}#start:not(.ready) span{visibility:hidden}#start span{margin-top:22px;font-size:15px;animation:pulse 2.4s infinite}@keyframes fade{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{to{opacity:0}}@keyframes cardIn{0%{opacity:0;transform:translateY(60vh) rotate(14deg) scale(.6)}to{opacity:1;transform:rotate(-1.5deg)}}@keyframes cardOut{to{opacity:0;transform:translateY(-36px) rotate(-7deg) scale(.85)}}@keyframes develop{0%{filter:brightness(2.4) saturate(0)}to{filter:none}}@keyframes stampIn{0%{opacity:0;transform:rotate(-20deg) scale(2.4)}to{opacity:1;transform:rotate(8deg)}}@keyframes rise{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes floatUp{0%{transform:translate(0) scale(.6);opacity:0}12%{opacity:.85}to{transform:translate(var(--dx),-115vh) scale(1.1) rotate(20deg);opacity:0}}@keyframes pulse{50%{opacity:.35}}@media (prefers-reduced-motion: reduce){#start span,#cardBox,#cardBox *,#card.out,#card.out #cardBox{animation:none}}