:root{--panel-left: 17%;--panel-top: 35%;--panel-width: 66%;--panel-height: 39%;--card-aspect-w: 768;--card-aspect-h: 1376;--reveal-bg: linear-gradient(135deg, #ffd6c8 0%, #ffe5d0 50%, #ffd8d8 100%);--reveal-fg: #3d8a7a}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;background:#fff;overflow:hidden;font-family:Fredoka,system-ui,sans-serif;font-weight:500;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:none;position:fixed;top:0;right:0;bottom:0;left:0;user-select:none;-webkit-user-select:none}#app,.card-stage{touch-action:none}#app{width:100vw;height:100vh;height:100dvh;display:flex;align-items:center;justify-content:center;position:relative}.card-stage{position:relative;aspect-ratio:var(--card-aspect-w) / var(--card-aspect-h);width:calc(100dvh * var(--card-aspect-w) / var(--card-aspect-h));height:auto;user-select:none;-webkit-user-select:none;background:var(--reveal-bg)}.card-bg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;pointer-events:none;-webkit-user-drag:none;image-rendering:pixelated;image-rendering:crisp-edges;z-index:1;transform-origin:50% 54.5%;transition:transform 1.6s cubic-bezier(.55,0,.55,1),opacity 1.6s ease-out}.card-bg.zoomed{transform:scale(5);opacity:.25}.reveal-content{position:absolute;left:var(--panel-left);top:var(--panel-top);width:var(--panel-width);height:var(--panel-height);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4%;color:var(--reveal-fg);z-index:2;overflow:hidden;filter:blur(22px);transition:filter .5s ease,left .6s ease,top .6s ease,width .6s ease,height .6s ease}.reveal-content.unblurred{left:0;top:0;width:100%;height:100%;padding:0;overflow:visible;filter:none}.reveal-content h1{font-family:Fredoka,system-ui,sans-serif;font-weight:700;font-size:clamp(.9rem,4.2cqw,2.5rem);font-size:clamp(.9rem,4.2vw,2.5rem);line-height:1.5;letter-spacing:.04em;text-shadow:2px 2px 0 rgba(255,255,255,.7);position:relative;z-index:2}.kiss-text{position:absolute;top:16dvh;left:50%;transform:translate(-50%);font-family:Fredoka,system-ui,sans-serif;font-weight:700;color:#fff;font-size:clamp(2.75rem,11.5vw,6.5rem);line-height:1.4;text-align:center;width:90vw;max-width:1000px;overflow-wrap:break-word;word-break:break-word;opacity:0;transition:opacity .6s ease;z-index:70;text-shadow:3px 3px 0 rgba(204,100,142,.85);pointer-events:none}.kiss-text.shown{opacity:1}.kiss-subtext{font-size:.6em}.love-text{position:absolute;bottom:6dvh;left:50%;transform:translate(-50%);font-family:Fredoka,system-ui,sans-serif;font-weight:700;color:#fff;font-size:clamp(1.4rem,min(8.32vw,calc(100dvh * 768 / 1376 * .085)),4.4rem);line-height:1.4;text-align:center;width:min(90vw,calc(100dvh * 768 / 1376 * .95));max-width:1000px;overflow-wrap:break-word;word-break:break-word;opacity:0;transition:opacity .6s ease;z-index:70;text-shadow:3px 3px 0 rgba(204,100,142,.85);pointer-events:none}.love-text.shown{opacity:1}.love-subtext{display:inline-block;margin-top:.6em;font-size:.6em}.baldy,.carl{position:absolute;top:50%;width:60%;max-width:42vmin;height:auto;max-height:60%;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;transform:translate(-50%,-50%);transform-origin:center;z-index:2}.baldy{left:72%;image-rendering:pixelated;image-rendering:crisp-edges;animation:baldy-tilt 4.5s ease-in-out infinite}.carl{left:28%;animation:carl-tilt 4.5s ease-in-out infinite}@keyframes baldy-tilt{0%,to{transform:translate(-50%,-50%) rotate(-10deg)}50%{transform:translate(-50%,-50%) rotate(10deg)}}@keyframes carl-tilt{0%,to{transform:translate(-50%,-50%) rotate(10deg)}50%{transform:translate(-50%,-50%) rotate(-10deg)}}.baldy.spin{animation:baldy-spin 1.2s cubic-bezier(.4,0,.2,1)}@keyframes baldy-spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}.carl.spin{animation:carl-spin 1.2s cubic-bezier(.4,0,.2,1)}@keyframes carl-spin{0%{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(-360deg)}}.critter{position:absolute;height:auto;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;z-index:1}.critter.outer{z-index:0;filter:blur(8px);transition:filter .8s ease}.card-stage.revealed .critter.outer{filter:none}.greeting{position:absolute;left:50%;top:54.5%;transform:translate(-50%,-50%) scale(0);font-family:Fredoka,system-ui,sans-serif;font-weight:700;color:#ffb3c6;text-shadow:.12em .12em 0 rgba(157,74,109,.5);font-size:clamp(1rem,4vw,3rem);letter-spacing:.04em;white-space:nowrap;pointer-events:none;opacity:0;z-index:50}.greeting.flying{animation:greeting-fly 1.6s cubic-bezier(.4,.05,.7,.2) forwards}@keyframes greeting-fly{0%{transform:translate(-50%,-50%) scale(.05);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translate(-50%,-50%) scale(15);opacity:0}}.scratch-layer{position:absolute;left:var(--panel-left);top:var(--panel-top);width:var(--panel-width);height:var(--panel-height);z-index:3;cursor:none;touch-action:none}.tap-prompt{position:absolute;left:50%;top:78%;transform:translate(-50%);background:#fff8e3;padding:.85rem 1.1rem;border:3px solid var(--reveal-fg);border-radius:4px;color:var(--reveal-fg);font-family:Fredoka,system-ui,sans-serif;font-weight:700;font-size:clamp(1.2rem,4.2vw,1.9rem);white-space:nowrap;pointer-events:none;z-index:10;box-shadow:4px 4px 0 var(--reveal-fg);animation:bounce 1.2s ease-in-out infinite}.tap-prompt.hidden{display:none}.use-coin-prompt{position:absolute;left:50%;bottom:calc(100% - var(--panel-top) + .6rem);transform:translate(-50%);background:#fff8e3;padding:.7rem 1rem;border:3px solid var(--reveal-fg);border-radius:4px;color:var(--reveal-fg);font-family:Fredoka,system-ui,sans-serif;font-weight:700;font-size:clamp(1.1rem,3.8vw,1.7rem);white-space:nowrap;pointer-events:none;z-index:10;box-shadow:4px 4px 0 var(--reveal-fg);opacity:0;transition:opacity .3s ease}.use-coin-prompt.visible{opacity:1;animation:bounce 1.2s ease-in-out infinite,coin-prompt-flash .6s steps(1,end) infinite}@keyframes coin-prompt-flash{0%,to{color:var(--reveal-fg);border-color:var(--reveal-fg);box-shadow:4px 4px 0 var(--reveal-fg)}50%{color:#cc648e;border-color:#cc648e;box-shadow:4px 4px #cc648e}}.use-coin-prompt.hidden{display:none}.keep-scratching-prompt{position:absolute;left:50%;top:80%;transform:translate(-50%);background:#fff8e3;padding:.7rem 1rem;border:3px solid var(--reveal-fg);border-radius:4px;color:var(--reveal-fg);font-family:Fredoka,system-ui,sans-serif;font-weight:700;font-size:clamp(1.1rem,3.8vw,1.7rem);white-space:nowrap;pointer-events:none;z-index:10;box-shadow:4px 4px 0 var(--reveal-fg);opacity:0;transition:opacity .3s ease}.keep-scratching-prompt.visible{opacity:1;animation:bounce 1.2s ease-in-out infinite}@keyframes bounce{0%,to{transform:translate(-50%)}50%{transform:translate(-50%,-8px)}}.coin{position:fixed;left:0;top:0;width:80px;height:80px;pointer-events:none;image-rendering:pixelated;image-rendering:crisp-edges;display:none;z-index:100;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 8px rgba(0,0,0,.5)) drop-shadow(0 2px 3px rgba(0,0,0,.35));will-change:left,top}.coin.active{display:block}.coin.popping{animation:coin-pop .45s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes coin-pop{0%{transform:translate(-50%,-50%) scale(0) rotate(-30deg)}55%{transform:translate(-50%,-50%) scale(1.5) rotate(15deg)}78%{transform:translate(-50%,-50%) scale(.9) rotate(-6deg)}to{transform:translate(-50%,-50%) scale(1) rotate(0)}}.coin-burst{position:fixed;left:0;top:0;width:80px;height:80px;border-radius:50%;border:4px solid #ffd76b;pointer-events:none;z-index:99;will-change:transform,opacity;animation:coin-burst .55s ease-out forwards}@keyframes coin-burst{0%{transform:translate(-50%,-50%) translate(var(--bx),var(--by)) scale(.3);opacity:1}to{transform:translate(-50%,-50%) translate(var(--bx),var(--by)) scale(2.8);opacity:0}}.coin.fading{animation:coin-fade .6s ease-out forwards}@keyframes coin-fade{0%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:0}}body.coin-active,body.coin-active *{cursor:none!important}
