@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800;900&family=Coiny&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
:root{--paper:#faf5e9;--ink:#363b2e;--olive:#526344;--lime:#dce9af;--pink:#f4c6d8;--orange:#dc7048;--sans:'Be Vietnam Pro',system-ui,sans-serif;--fun:'Coiny',var(--sans)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:13px;line-height:1.6}button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;font:inherit}button:focus-visible,canvas:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}[hidden]{display:none!important}.game-shell{height:100vh;height:100dvh;width:100%;display:flex;flex-direction:column;overflow:hidden}.game-top{flex-shrink:0;display:flex;align-items:center;padding:calc(6px + env(safe-area-inset-top)) 15px 6px;background:var(--lime);border-bottom:1px solid #84966b;gap:8px}.brand{display:flex;align-items:center;font-size:27px;gap:8px;flex:1;line-height:1}.brand b{font-family:var(--fun);font-size:19px;letter-spacing:-.5px;font-weight:400}.date{font-size:9px;color:#657548;white-space:nowrap;margin-right:4px}.icon-button{border:1px solid #68735855;background:#ffffff50;border-radius:50%;width:44px;height:44px;min-width:44px;padding:0;font-size:22px;position:relative;color:var(--ink);line-height:1}.icon-button:disabled{opacity:.3}.sound-slash{position:absolute;left:18px;top:9px;font-size:23px;transform:rotate(15deg)}.scoreboard{display:flex;flex-shrink:0;align-items:center;justify-content:space-between;padding:10px 18px;background:#fffdf4;gap:24px;border-bottom:1px solid #ded8c2}.score-text>span{font-size:8px;letter-spacing:1px;font-weight:700;display:block}.score-text strong{font-family:var(--fun);font-weight:400;font-size:35px;line-height:1.2}.score-text small{font-family:var(--sans);font-size:14px;color:#9a9c8c;font-weight:600}.score-meta{width:44%;max-width:340px;text-align:right}.life-row{display:flex;align-items:center;justify-content:space-between;gap:8px}.life-row>span{font-size:7px;letter-spacing:1px;font-weight:600}#lives{color:#c67174;font-size:18px;letter-spacing:2px;line-height:1.2}#lives .spent{color:#ded9ca}.progress-track{height:7px;background:#e9e8dc;border-radius:6px;overflow:hidden;margin:5px 0;border:1px solid #d4d5c6}.progress-track>div{height:100%;width:0;background:var(--olive);border-radius:6px;transition:width .2s}#encouragement{font-size:8px;color:#888875;white-space:nowrap}.playfield{position:relative;flex:1;min-height:0;overflow:hidden;background:#f1e9d6;background-image:linear-gradient(90deg,#e2d8bc55 1px,transparent 1px);background-size:50px 100%;isolation:isolate;touch-action:none;user-select:none}.cat-shelf{position:absolute;left:0;right:0;top:3px;z-index:2}.cat-line{display:flex;align-items:flex-end;justify-content:space-around;padding:0 8px;height:94px}.cat{width:19%;height:99px;max-width:135px;position:relative;transform-origin:50% 90%}.cat svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 1px #554e2520)}.cat:nth-child(2){transform:rotate(-4deg)}.cat:nth-child(4){transform:rotate(4deg)}.cat.dropping{animation:catDrop .35s ease}.cat-name{position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);font-size:7px;letter-spacing:.3px;white-space:nowrap;background:#f8edcf;border:1px solid #a69472;border-radius:3px;padding:0 4px;z-index:3}.shelf-edge{height:12px;background:#c68d5d;border-top:3px solid #deab78;border-bottom:3px solid #8c6847;box-shadow:0 8px 0 #78643c12}.wall-decor{position:absolute;color:#b2b993;opacity:.5}.decor-one{font-size:36px;top:31%;left:8%;transform:rotate(15deg)}.decor-two{font-size:43px;top:52%;right:9%;color:#c99991}.decor-three{font-size:25px;top:48%;left:52%}.wall-picture{position:absolute;top:35%;left:50%;transform:translateX(-50%) rotate(-5deg);border:5px solid #c6b38d;padding:16px 20px;background:#faf6e9;text-align:center;box-shadow:3px 4px 0 #9e8d6c20;opacity:.55}.wall-picture span{font-size:9px;line-height:1.8;letter-spacing:1.8px;display:block}.wall-picture i{font-size:24px;line-height:1.3;display:block;color:var(--orange);font-style:normal}.plant{position:absolute;bottom:34px;right:25px;width:32px;height:40px;background:#be8767;border:2px solid #917256;border-radius:2px 2px 10px 10px;opacity:.65}.plant span{position:absolute;width:3px;height:60px;background:#637953;bottom:32px;left:12px}.plant i,.plant b{position:absolute;bottom:53px;left:-8px;width:25px;height:35px;background:#81966a;border-radius:0 100% 0 100%;transform:rotate(-12deg)}.plant b{left:15px;bottom:65px;transform:rotate(80deg);width:22px;height:32px}.floor{position:absolute;bottom:0;height:44px;width:100%;background:repeating-linear-gradient(90deg,transparent 0 70px,#ccc5a955 70px 72px),#d9d6ba;border-top:3px solid #b9baa0}.floor:after{content:'';position:absolute;inset:20px 0 0;border-top:1px solid #b7b89f77;transform:skewX(-35deg)}canvas{position:absolute;inset:0;width:100%;height:100%;z-index:3;touch-action:none;outline:none}.cat-bubble{position:absolute;top:119px;padding:5px 9px;background:#fffbed;border:1px solid var(--ink);border-radius:9px;font-size:10px;z-index:5;opacity:0;transition:opacity .15s;white-space:nowrap;pointer-events:none}.cat-bubble.show{opacity:1}.cat-bubble:before{content:'';position:absolute;top:-5px;left:12px;width:7px;height:7px;background:#fffbed;border-top:1px solid var(--ink);border-left:1px solid var(--ink);transform:rotate(45deg)}.player-tag{position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-size:7px;font-weight:700;letter-spacing:.5px;background:#faf6e9df;border-radius:8px;padding:2px 7px;z-index:4;white-space:nowrap;pointer-events:none}.game-bottom{display:flex;justify-content:space-between;flex-shrink:0;gap:8px;padding:9px 16px calc(9px + env(safe-area-inset-bottom));background:#fffdf5;border-top:1px solid #b7b9a1;font-size:9px;color:#8c8a75}.game-bottom>span:first-child{color:var(--olive)}.game-overlay,.lose-overlay{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:calc(100% - 44px);max-width:400px;background:#fcf8eef5;border:1.5px solid var(--ink);border-radius:17px;box-shadow:5px 6px 0 #353b2d20;z-index:6;text-align:center;padding:28px 18px 22px;backdrop-filter:blur(5px);display:flex;flex-direction:column;align-items:center}.start-sticker{background:var(--pink);font-size:7px;font-weight:700;letter-spacing:.4px;padding:5px 9px;border:1px solid var(--ink);border-radius:20px;transform:rotate(-4deg);position:absolute;top:-15px;left:15px}.poop-sticker{position:absolute;width:55px;height:55px;right:3px;top:-27px;transform:rotate(12deg);filter:drop-shadow(3px 3px 0 #303b2d20)}.poop-sticker svg{width:100%;height:100%}h1,h2{font-family:var(--fun);font-weight:400;font-size:36px;line-height:1.15;letter-spacing:-1.1px;margin:0}h1 em,h2 em{color:var(--olive);font-style:normal}.game-overlay p,.lose-overlay p{font-size:11px;line-height:1.9;margin:16px 0;color:#898776}.rules{display:flex;justify-content:center;gap:7px;flex-wrap:wrap;margin:0 0 9px;font-size:8px}.rules>span{padding:5px 8px;background:#ecebdc;border-radius:6px;white-space:nowrap}.danger-note{font-size:9px;color:#b57562;margin-bottom:20px}.primary-button{display:flex;align-items:center;justify-content:center;gap:25px;min-height:49px;background:var(--olive);border:1.5px solid var(--ink);border-radius:9px;color:#fffcec;padding:13px 24px;font-weight:700;font-size:12px;box-shadow:0 4px 0 #303a2c;transition:transform .15s,box-shadow .15s}.primary-button:active{transform:translateY(3px);box-shadow:0 1px 0 #303a2c}.primary-button>span{font-size:19px}.overlay-hint{font-size:7px;color:#9b9986;margin-top:17px}.pause-overlay{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f9f4e8ef;backdrop-filter:blur(5px);text-align:center;padding:20px}.pause-overlay>span{font-size:55px;color:#a79aca}.pause-overlay h2{font-size:30px}.pause-overlay p{font-size:11px;margin-bottom:25px}.lose-overlay{top:47%;background:#fcf4e9fa}.lose-icon{font-size:45px;margin-bottom:10px}.eyebrow{font-size:8px;letter-spacing:1.5px;color:#a37b64;margin-bottom:18px}.lose-overlay h2 em{color:#b97452}.lose-overlay p{font-size:10px}.final-score{margin:0 0 20px;font-size:11px;background:#f1e7d6;padding:8px 22px;border-radius:30px}.final-score strong{font-size:20px;color:var(--olive);padding:0 4px}.playfield.missed{animation:shake .26s ease}.celebration{position:fixed;inset:0;z-index:30;background:#182326;color:#fff7e9;overflow-y:auto;overscroll-behavior:contain;isolation:isolate;animation:revealScene 1s ease both}.portrait{position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%;animation:portraitReveal 2.4s cubic-bezier(.2,.65,.3,1) both}.photo-shade{position:fixed;inset:0;background:linear-gradient(180deg,#10222705 0%,#10222700 22%,#14262966 40%,#142326e6 65%,#142326fa 100%)}.photo-grain{position:fixed;inset:0;opacity:.13;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.3' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none}.photo-close{position:fixed;right:15px;top:calc(15px + env(safe-area-inset-top));z-index:4;width:44px;height:44px;border:1px solid #fff6da55;background:#15262d55;color:#fff8e8;border-radius:50%;font-size:27px;backdrop-filter:blur(8px)}.photo-caption{position:relative;z-index:2;max-width:520px;margin:auto;min-height:100dvh;padding:40dvh 26px calc(35px + env(safe-area-inset-bottom));text-align:center}.photo-eyebrow{font-size:8px;letter-spacing:2px;color:#e8d2ad;display:block;animation:riseIn 1s .5s both}.photo-caption h2{font-family:'Playfair Display',Georgia,serif;font-size:38px;line-height:1.25;letter-spacing:-1px;margin:15px -5px 0;animation:riseIn 1.2s .75s both;text-shadow:0 2px 20px #0005}.photo-caption h2 em{color:#e8c5ac;font-style:italic}.win-cats{display:flex;justify-content:center;height:50px;margin:18px 0 4px;animation:riseIn 1s 1.1s both}.win-cats svg{width:48px;height:50px;filter:drop-shadow(0 2px 3px #0003)}#greeting{font-size:12px;line-height:1.95;text-align:left;animation:riseIn 1.2s 1.4s both}#greeting p{margin:12px 0}#greeting .salutation{font-weight:700;color:#f5dfbe}#greeting .signoff{color:#e9c7af;font-weight:600}.voucher{padding:12px 8px;border:1px solid #e2ccaa66;background:#eed7b510;font-size:8px;letter-spacing:1px;border-radius:8px;margin:25px 0 18px;animation:riseIn 1s 1.8s both}.replay-button{border:1px solid #f5dfbe88;background:#fff8e910;color:#f5dfbe;padding:13px 22px;min-height:48px;border-radius:30px;font-size:10px;animation:riseIn 1s 2s both}.floating-hearts{position:fixed;inset:0;pointer-events:none;overflow:hidden}.floating-hearts i{position:absolute;color:#f7ddc4aa;font-style:normal;font-size:23px;bottom:-40px;left:12%;animation:floatUp 9s 1s infinite ease-in}.floating-hearts i:nth-child(2){left:78%;animation-delay:2.2s;font-size:14px}.floating-hearts i:nth-child(3){left:88%;animation-delay:4s}.floating-hearts i:nth-child(4){left:34%;animation-delay:5.6s;font-size:17px}.floating-hearts i:nth-child(5){left:61%;animation-delay:7s}#confetti{position:fixed;inset:0;pointer-events:none;z-index:50;overflow:hidden}#confetti i{position:absolute;width:8px;height:13px;animation:confetti 2.6s ease-in forwards;top:-20px}@keyframes confetti{to{transform:translateY(110vh) rotate(540deg);opacity:.1}}@keyframes catDrop{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px) rotate(-6deg)}70%{transform:translateY(3px) rotate(5deg)}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes riseIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes revealScene{from{opacity:0;clip-path:circle(0% at 50% 80%)}to{opacity:1;clip-path:circle(150% at 50% 80%)}}@keyframes portraitReveal{from{transform:scale(1.12);filter:blur(5px)}to{transform:scale(1);filter:blur(0)}}@keyframes floatUp{0%{transform:translateY(0) rotate(-15deg);opacity:0}15%{opacity:.7}100%{transform:translateY(-110vh) rotate(20deg);opacity:0}}
@media(min-width:700px){.game-top{padding-left:30px;padding-right:30px}.scoreboard{padding:12px 30px}.score-meta{width:35%}.game-overlay{top:47%;padding:30px}.wall-picture{padding:20px 35px}.portrait{object-fit:contain;object-position:center top;background:#162325}.photo-shade{background:linear-gradient(180deg,#10222700 10%,#14262988 40%,#142326ed 68%,#142326 100%)}.photo-caption{padding-top:37dvh}.game-bottom{padding-left:30px;padding-right:30px}}
@media(max-width:360px){.brand b{font-size:17px}.brand{gap:4px}.game-top{gap:5px;padding-left:10px;padding-right:10px}.date{font-size:8px}.scoreboard{padding:9px 12px;gap:12px}.score-text>span{font-size:7px}.score-meta{width:48%}.life-row>span{font-size:6px}#encouragement{font-size:7px}.game-bottom{font-size:8px;padding-left:10px;padding-right:10px}.game-overlay{width:calc(100% - 32px);padding:24px 14px 18px}.game-overlay h1{font-size:32px}.game-overlay p{font-size:10px}.rules{gap:4px;font-size:7px}.start-sticker{font-size:6px}.cat-name{font-size:5px}.photo-caption{padding-left:22px;padding-right:22px}.photo-caption h2{font-size:32px}}
@media(max-height:650px){.cat-line{height:76px}.cat{height:81px}.cat-bubble{top:101px}.game-top{padding-top:3px;padding-bottom:3px}.scoreboard{padding-top:6px;padding-bottom:6px}.score-text strong{font-size:29px}.game-overlay{top:45%;padding:19px 14px 16px}.game-overlay h1{font-size:28px}.game-overlay p{margin:9px 0;font-size:9px}.danger-note{margin-bottom:12px;font-size:8px}.overlay-hint{margin-top:12px;font-size:6px}.rules{font-size:7px}.game-bottom{padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}}
.photo-caption{padding-top:55dvh}.photo-caption h2{font-size:33px}@media(min-width:700px){.photo-caption{padding-top:50dvh}.photo-caption h2{font-size:40px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.portrait{transform:none;filter:none}}

.lucky-section{margin:38px 0 28px;padding:28px 12px 24px;border:1px solid #ead6ae55;border-radius:22px;background:linear-gradient(150deg,#f5e3bf14,#f5e3bf04);backdrop-filter:blur(12px);position:relative}.lucky-eyebrow{font-size:7px;letter-spacing:1.6px;color:#dcc4a0}.lucky-section h3{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:29px;margin:10px 0 3px;color:#f8e6c7;letter-spacing:-.5px}.lucky-section>p{font-size:10px;color:#d5c7b0;margin:0 0 26px}.wheel-wrap{position:relative;width:min(100%,300px);aspect-ratio:1;margin:0 auto 25px;filter:drop-shadow(0 10px 18px #0005)}.prize-wheel{width:100%;height:100%;will-change:transform}.prize-wheel svg{width:100%;height:100%;display:block}.wheel-pointer{position:absolute;z-index:3;top:-9px;left:50%;transform:translateX(-50%);width:26px;height:35px;background:#f5e5c0;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 2px #30291c)}.wheel-center{position:absolute;width:76px;height:76px;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:#415444;border:4px solid #f5e5c0;box-shadow:0 3px 8px #0004;color:#f4dcac;font-size:30px;line-height:40px;padding-top:7px}.wheel-center span{display:block;font-size:5px;font-weight:700;letter-spacing:.8px;line-height:12px}.spin-button{min-height:49px;border:1px solid #efd6a1;background:linear-gradient(130deg,#e6bf76,#f5db9b);color:#4b432d;border-radius:30px;padding:12px 20px;font-size:11px;font-weight:700;box-shadow:0 4px 18px #0002;max-width:100%}.spin-button:disabled{cursor:default}.prize-result{padding:24px 6px 0;animation:riseIn .75s both}.prize-result>span{font-size:7px;letter-spacing:2px;color:#d9c6a4}.prize-result strong{display:block;font-family:'Playfair Display',Georgia,serif;font-size:39px;color:#f1d29b;line-height:1.4;margin-top:6px}.prize-result p{font-size:10px;color:#e5d7bf;margin:8px 0 0}@media(max-width:360px){.lucky-section{padding-left:10px;padding-right:10px}.wheel-center{width:65px;height:65px;font-size:25px;line-height:31px;padding-top:5px}.wheel-center span{font-size:4px}.lucky-section h3{font-size:26px}.prize-result strong{font-size:32px}}@media(prefers-reduced-motion:reduce){.prize-wheel{transition-duration:0s!important}}
