:root{--ink:#373047;--muted:#7f758c;--cream:#fff8ec;--peach:#ff8e72;--peach-dark:#ed6f57;--blue:#63aee9;--pink:#f28bb1;--mint:#75c9aa;--yellow:#ffd670;--shadow:0 18px 50px rgba(96,70,61,.16)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:hidden}body{font-family:"Nunito",sans-serif;color:var(--ink);background:#f7e9d4}.app-shell{min-height:100dvh;position:relative}.screen{display:none;min-height:100dvh}.screen.is-active{display:flex}
button{font:inherit;color:inherit}.home-screen{position:relative;overflow:hidden;flex-direction:column;align-items:center;padding:32px 22px 20px;background:radial-gradient(circle at 50% -10%,#fff 0,#fff9ed 33%,#f8e8cd 100%)}
.home-screen:before,.home-screen:after{content:"";position:absolute;z-index:0;border-radius:50%;filter:blur(1px)}.home-screen:before{width:430px;height:430px;left:-210px;top:40%;background:#dff1d4aa}.home-screen:after{width:380px;height:380px;right:-190px;top:15%;background:#dfeff7aa}.cloud{position:absolute;width:140px;height:38px;background:#fff9;border-radius:99px}.cloud:before,.cloud:after{content:"";position:absolute;border-radius:50%;background:inherit}.cloud:before{width:54px;height:54px;left:24px;bottom:5px}.cloud:after{width:70px;height:70px;right:20px;bottom:2px}.cloud-a{left:6%;top:12%;transform:scale(.8)}.cloud-b{right:4%;top:55%;transform:scale(.55)}
.brand{position:relative;z-index:1;text-align:center}.brand-paw{width:47px;height:42px;margin:0 auto 4px;position:relative;transform:rotate(-6deg)}.brand-paw i,.brand-paw b{position:absolute;background:var(--peach);border-radius:50%}.brand-paw i:nth-child(1){width:12px;height:16px;left:1px;top:8px;transform:rotate(-25deg)}.brand-paw i:nth-child(2){width:13px;height:17px;left:12px;top:0}.brand-paw i:nth-child(3){width:13px;height:17px;right:10px;top:0}.brand-paw i:nth-child(4){width:12px;height:16px;right:0;top:9px;transform:rotate(25deg)}.brand-paw b{width:31px;height:25px;left:8px;bottom:0}
.eyebrow{margin:0;text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:800;color:var(--peach-dark)}h1{font-family:"Baloo 2",sans-serif;text-transform:uppercase;letter-spacing:.035em;font-size:clamp(45px,7vw,72px);line-height:.82;margin:8px 0 12px;color:var(--peach);text-shadow:0 4px 0 #fff,0 7px 0 #e7b48b}h1 span{display:block;font-size:.63em;color:var(--blue);text-shadow:0 3px 0 #fff,0 6px 0 #a9cde2}.subtitle{margin:0 0 17px;color:var(--muted);font-size:14px;font-weight:700}
.setup-card{position:relative;z-index:2;width:min(820px,100%);padding:20px 28px 19px;background:#fffdf8eF;border:1px solid #fff;border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(8px)}.setup-section h2{font-family:"Baloo 2";font-size:17px;text-align:center;margin:0 0 11px}.avatar-options{display:flex;justify-content:center;gap:16px}.avatar-card{position:relative;width:190px;height:116px;padding:8px 22px 8px 99px;border:2px solid #eee6dd;border-radius:18px;background:#fff;cursor:pointer;text-align:left;overflow:hidden;transition:.2s transform,.2s border-color,.2s box-shadow}.avatar-card:hover{transform:translateY(-2px)}.avatar-card.is-selected{border-color:var(--peach);box-shadow:0 7px 18px #f29a7e2c;background:#fffaf7}.avatar-card canvas{position:absolute;width:91px;height:91px;left:5px;bottom:-1px}.avatar-card span{display:block;font-family:"Baloo 2";font-weight:800;font-size:19px;line-height:1}.avatar-card em{display:block;margin-top:4px;font-style:normal;font-size:9px;color:var(--muted);white-space:nowrap}.avatar-card .check{display:none;position:absolute;right:7px;top:7px;background:var(--peach);color:#fff;border-radius:50%;width:19px;height:19px;text-align:center;font-size:12px;font-style:normal}.avatar-card.is-selected .check{display:block}
.mode-section{border-top:1px dashed #e9ddd2;margin-top:15px;padding-top:13px}.mode-options{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.mode-card{min-height:67px;border:2px solid #eee6dd;background:#fff;border-radius:15px;cursor:pointer;padding:7px 5px;transition:.2s}.mode-card:hover{transform:translateY(-2px)}.mode-card.is-selected{border-color:var(--blue);background:#f5fbff;box-shadow:0 6px 15px #63aee924}.mode-card span{font-size:20px;display:block}.mode-card b{display:block;font-family:"Baloo 2";font-size:13px;line-height:1.1}.mode-card small{font-size:9px;color:var(--muted)}
.home-actions{display:flex;align-items:center;justify-content:space-between;border-top:1px dashed #e9ddd2;margin-top:15px;padding-top:15px}.best-score{display:flex;align-items:center;gap:8px}.best-score>span{font-size:26px}.best-score small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.best-score b{font-family:"Baloo 2";font-size:22px;line-height:.8}.primary-button,.secondary-button{border:0;border-radius:999px;font-weight:800;cursor:pointer;padding:13px 24px;transition:.16s transform,.16s box-shadow}.primary-button{background:linear-gradient(#ff9c7f,#f27c62);color:#fff;box-shadow:0 5px 0 #d9634d,0 9px 18px #e9755d43}.primary-button:hover{transform:translateY(-2px);box-shadow:0 7px 0 #d9634d,0 11px 21px #e9755d43}.primary-button:active{transform:translateY(3px);box-shadow:0 2px 0 #d9634d}.primary-button i{font-style:normal;margin-left:13px}.secondary-button{background:#f4eee8;color:var(--ink);box-shadow:0 4px 0 #dfd4ca}.text-button{border:0;background:none;color:var(--muted);font-weight:800;cursor:pointer;padding:10px}.home-hint{position:relative;z-index:1;font-size:10px;color:#998d91;margin:13px 0 0}.home-hint kbd{background:#fff;border:1px solid #e6dcd3;border-bottom-width:2px;border-radius:5px;padding:2px 5px;font:700 9px Nunito}.home-hint span{margin:0 6px}
.game-screen{background:#efe1cb;flex-direction:column;align-items:center;padding:12px 18px 18px}.game-hud{height:54px;width:min(960px,100%);display:flex;gap:10px;align-items:center;justify-content:center}.icon-button{border:0;background:#fff8;border-radius:12px;width:39px;height:39px;font-weight:900;font-size:18px;cursor:pointer;box-shadow:0 3px 10px #6a59431a}.control-mode-button{display:none;border:0;background:#fff;border-radius:12px;height:39px;padding:0 10px;font-size:10px;font-weight:900;cursor:pointer;box-shadow:0 3px 10px #6a59431a;white-space:nowrap}.control-mode-button span{font-size:13px}.score-pill{background:#fff;border-radius:13px;padding:4px 16px;min-width:94px;box-shadow:0 4px 14px #6a59431a}.score-pill span{font-size:8px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);display:block}.score-pill b{font-family:"Baloo 2";font-size:20px;line-height:1}.score-pill.best b{color:#e79c32}.mode-pill{margin:auto;background:#fff9;border-radius:999px;padding:7px 18px;font-family:"Baloo 2";font-size:13px;font-weight:700}.canvas-wrap{position:relative;width:min(960px,calc((100dvh - 84px)*1.5),100%);aspect-ratio:3/2;max-height:calc(100dvh - 84px);border:7px solid #fff9;border-radius:25px;overflow:hidden;box-shadow:0 18px 45px #68523b36;background:#b9d99b}.canvas-wrap canvas{display:block;width:100%;height:100%;touch-action:none}.countdown{position:absolute;inset:0;display:grid;place-items:center;font:800 clamp(60px,14vw,130px) "Baloo 2";color:#fff;text-shadow:0 8px 0 #6da25d;pointer-events:none}.collection-toast{position:absolute;top:15px;left:50%;transform:translate(-50%,-90px);opacity:0;display:flex;align-items:center;gap:8px;background:#fff;border-radius:999px;padding:6px 14px 6px 7px;box-shadow:0 8px 25px #3f493f39;transition:.24s}.collection-toast.show{transform:translate(-50%,0);opacity:1}.collection-toast>span{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:#fff2dd;font-size:19px}.collection-toast b,.collection-toast small{display:block}.collection-toast b{font-family:"Baloo 2";font-size:12px;line-height:1}.collection-toast small{font-size:8px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}.mobile-controls{display:none;grid-template-columns:repeat(3,46px);grid-template-rows:repeat(2,46px);gap:5px;margin-top:10px}.mobile-controls button{border:0;border-radius:13px;background:#fff9;box-shadow:0 3px 0 #d3c2ab;font-size:15px}.mobile-controls button[data-dir=up]{grid-column:2}.mobile-controls button[data-dir=left]{grid-row:2;grid-column:1}.mobile-controls button[data-dir=down]{grid-row:2;grid-column:2}.mobile-controls button[data-dir=right]{grid-row:2;grid-column:3}
.modal{position:fixed;z-index:10;inset:0;background:#3d354d8c;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(7px)}.modal.is-open{display:flex}.modal-card{position:relative;width:min(410px,100%);border:5px solid #fff;background:#fffaf2;border-radius:28px;box-shadow:0 25px 70px #2e243453;text-align:center;padding:35px 30px 28px;animation:modal-in .3s ease-out}.modal-card h2{font:800 30px/1 "Baloo 2";margin:7px 0 8px}.modal-card>p:not(.eyebrow){color:var(--muted);font-size:12px;margin:0 0 14px}.pause-card{display:flex;flex-direction:column;gap:10px}.pause-card .modal-icon{font-size:45px}.pause-card .eyebrow{margin-bottom:-4px}.gameover-card{width:min(520px,100%);padding-top:42px}.ribbon{position:absolute;top:-16px;left:50%;transform:translateX(-50%) rotate(-2deg);background:var(--blue);color:#fff;border-radius:8px;padding:8px 24px;font:800 13px "Baloo 2";box-shadow:0 4px 0 #4388bd;white-space:nowrap}.final-score{position:relative;display:inline-flex;flex-direction:column;min-width:165px;background:#fff;border-radius:18px;padding:9px 25px;box-shadow:0 5px 16px #6f5b4113}.final-score span{font-size:9px;text-transform:uppercase;color:var(--muted);letter-spacing:.12em}.final-score b{font:800 38px/1 "Baloo 2";color:var(--peach)}.final-score em{display:none;position:absolute;right:-40px;top:10px;background:#ffd45f;padding:3px 7px;border-radius:7px;font-size:9px;font-style:normal;transform:rotate(8deg)}.final-score em.show{display:block}.result-stats{display:flex;justify-content:center;gap:10px;margin:12px 0}.result-stats div{display:grid;grid-template-columns:auto auto;gap:0 7px;align-items:center;background:#f3ede6;border-radius:12px;padding:6px 14px}.result-stats span{grid-row:span 2}.result-stats b{font:800 17px/1 "Baloo 2"}.result-stats small{font-size:8px;color:var(--muted)}.breed-breakdown{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;min-height:32px}.breed-chip{background:#fff;border:1px solid #ebe1d7;border-radius:999px;font-size:9px;padding:4px 8px}.breed-chip b{margin-left:3px}.result-actions{display:flex;justify-content:center;gap:10px;margin-top:17px}.result-actions button{min-width:130px}@keyframes modal-in{from{opacity:0;transform:translateY(20px) scale(.94)}}
@media(max-width:650px),(pointer:coarse){.home-screen{padding:20px 13px 12px}.brand h1{font-size:45px}.subtitle{font-size:11px;margin-bottom:10px}.setup-card{padding:15px;border-radius:22px}.avatar-options{gap:8px}.avatar-card{width:calc(50% - 4px);min-width:0;height:101px;padding:8px 12px 8px 76px}.avatar-card canvas{width:72px;height:72px}.avatar-card span{font-size:17px}.avatar-card em{font-size:7.5px;letter-spacing:-.015em}.mode-options{grid-template-columns:repeat(2,1fr)}.mode-card{min-height:55px;display:grid;grid-template-columns:30px 1fr;grid-template-rows:1fr 1fr;text-align:left;padding:5px 10px}.mode-card span{grid-row:span 2;align-self:center}.mode-card b{align-self:end}.home-hint{display:none}.home-actions{margin-top:12px;padding-top:12px}.game-screen{padding:5px 7px 8px;justify-content:flex-start}.game-hud{height:48px;gap:5px}.mode-pill{display:none}.score-pill{min-width:0;flex:1;padding:3px 9px}.control-mode-button{display:block}.canvas-wrap{width:100%;max-height:none;aspect-ratio:3/2;border-width:4px;border-radius:18px}.mobile-controls{display:grid}.collection-toast{top:8px}.modal-card{padding-left:20px;padding-right:20px}}
.swipe-controls{overflow:hidden;background:#182113}.swipe-controls .game-screen{position:fixed;inset:0;width:100vw;height:100dvh;min-height:0;padding:0;justify-content:center;background:#182113}.swipe-controls .canvas-wrap{width:min(100vw,150dvh);height:min(100dvh,66.667vw);max-height:none;aspect-ratio:3/2;border:0;border-radius:0;box-shadow:none}.swipe-controls .game-hud{position:absolute;z-index:4;top:max(5px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(96vw,920px);height:44px;padding:0 5px;pointer-events:none}.swipe-controls .game-hud>*{pointer-events:auto}.swipe-controls .score-pill{background:#26321dcc;color:#fff}.swipe-controls .score-pill span{color:#dbe7cc}.swipe-controls .mode-pill{background:#26321dcc;color:#fff}.swipe-controls .icon-button,.swipe-controls .control-mode-button{background:#fffde9e8}.swipe-controls .mobile-controls{display:none!important}
.swipe-controls.portrait-board .canvas-wrap{width:100vw;height:100dvh;aspect-ratio:2/3}.swipe-controls.portrait-board .game-hud{width:96vw}.swipe-controls.portrait-board .score-pill{padding-inline:8px}.swipe-controls.portrait-board .icon-button{width:36px}.swipe-controls.portrait-board .control-mode-button{padding-inline:7px}
@media(max-height:720px) and (min-width:651px){.home-screen{padding-top:15px}.brand-paw{display:none}.brand h1{font-size:48px;margin-top:2px}.subtitle{margin-bottom:10px}.setup-card{padding-top:14px;padding-bottom:13px}.avatar-card{height:99px}.avatar-card canvas{height:74px;width:74px}.mode-section{margin-top:10px;padding-top:9px}.mode-card{min-height:58px}.home-actions{margin-top:10px;padding-top:10px}}