:root{--sky:#8ed2ff;--ink:#2c3a4a;--white:#fff;--sun:#ffd23f;--grass:#6bbf4a;--berry:#ff5d8f;--grape:#8b5cf6;--shadow:#1c2e4247;--font-round:ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Varela Round", "Trebuchet MS", system-ui, sans-serif;--tap:76px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{background:var(--sky);height:100%;font-family:var(--font-round);touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;margin:0;overflow:hidden}#game-canvas{width:100%;height:100%;display:block;position:fixed;inset:0}#ui{pointer-events:none;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));position:fixed;inset:0}.is-hidden{display:none!important}#hud{grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;display:grid}#hearts{filter:drop-shadow(0 3px 0 var(--shadow));gap:6px;font-size:clamp(30px,5vw,46px);line-height:1;display:flex}.heart{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.heart.lost{animation:.55s ease-out forwards heart-pop}@keyframes heart-pop{0%{opacity:1;transform:scale(1)}35%{opacity:1;transform:scale(1.6)rotate(-12deg)}to{opacity:0;transform:scale(.2)translateY(-26px)rotate(20deg)}}#score-box{background:var(--white);border:5px solid var(--ink);box-shadow:0 5px 0 var(--shadow);border-radius:999px;justify-self:end;align-items:center;gap:8px;padding:4px 22px;display:flex}#score-box:before{content:"⭐";font-size:clamp(22px,3.4vw,32px)}#score{color:var(--ink);font-variant-numeric:tabular-nums;text-align:center;min-width:1.4em;font-size:clamp(26px,4.2vw,42px);font-weight:800}#score-box.pulse{animation:.5s cubic-bezier(.34,1.56,.64,1) score-pulse}@keyframes score-pulse{0%{transform:scale(1)}40%{background:var(--sun);transform:scale(1.28)rotate(-3deg)}to{transform:scale(1)}}#jump-hint{filter:drop-shadow(0 3px 0 var(--shadow));will-change:transform;font-size:clamp(34px,5vw,52px);animation:.6s ease-in-out infinite hint-bounce;position:absolute;transform:translate(-50%,-50%)}@keyframes hint-bounce{0%,to{transform:translate(-50%,-50%)}50%{transform:translate(-50%,calc(-50% - 14px))}}.icon-btn,.big-btn{pointer-events:auto;cursor:pointer;border:5px solid var(--ink);background:var(--white);color:var(--ink);box-shadow:0 6px 0 var(--shadow);border-radius:999px;place-items:center;font-family:inherit;line-height:1;transition:transform .12s,box-shadow .12s,background .12s;display:grid}.icon-btn{width:var(--tap);height:var(--tap);font-size:34px}.big-btn{background:var(--grass);width:132px;height:132px;padding-left:8px;font-size:62px}.big-btn.secondary{background:var(--sun);padding-left:0}.icon-btn:hover,.big-btn:hover{box-shadow:0 9px 0 var(--shadow);transform:translateY(-3px)scale(1.04)}.icon-btn:active,.big-btn:active{box-shadow:0 2px 0 var(--shadow);transform:translateY(4px)}.icon-btn:focus-visible,.big-btn:focus-visible{outline:5px solid var(--grape);outline-offset:4px}.btn-row{justify-content:center;gap:22px;display:flex}.screen{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:auto;background:#14283c73;place-items:center;animation:.25s ease-out fade-in;display:grid;position:absolute;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.card{background:var(--white);border:7px solid var(--ink);box-shadow:0 12px 0 var(--shadow);text-align:center;border-radius:40px;max-width:min(90vw,560px);padding:36px 48px 42px;animation:.4s cubic-bezier(.34,1.56,.64,1) card-in}@keyframes card-in{0%{opacity:0;transform:scale(.75)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.title{color:var(--berry);letter-spacing:-.02em;text-shadow:0 4px 0 var(--ink);margin:0 0 6px;font-size:clamp(44px,9vw,78px);font-weight:900}.title.small{color:var(--grape);font-size:clamp(32px,6vw,52px)}.subtitle{color:var(--ink);opacity:.75;margin:0 0 26px;font-size:clamp(17px,2.6vw,22px);font-weight:700}kbd{background:var(--sun);border:3px solid var(--ink);box-shadow:0 3px 0 var(--shadow);border-radius:10px;padding:2px 12px;font-family:inherit}.over-kid{font-size:72px;line-height:1;animation:1.1s ease-in-out infinite kid-hop}@keyframes kid-hop{0%,to{transform:translateY(0)scaleY(1)}30%{transform:translateY(-18px)scaleY(1.1)}55%{transform:translateY(0)scaleY(.9)}}.score-report{justify-content:center;gap:18px;margin:18px 0 28px;display:flex}.stat{background:var(--sky);border:5px solid var(--ink);border-radius:999px;align-items:center;gap:10px;padding:8px 24px;display:flex}.stat.best{background:var(--sun)}.stat-icon{font-size:30px}.stat-value{color:var(--ink);font-variant-numeric:tabular-nums;font-size:clamp(28px,4.6vw,40px);font-weight:900}.mode-row{flex-wrap:wrap;justify-content:center;gap:20px;display:flex}.mode-btn{pointer-events:auto;cursor:pointer;background:var(--grass);border:5px solid var(--ink);width:168px;box-shadow:0 6px 0 var(--shadow);border-radius:32px;flex-direction:column;align-items:center;gap:8px;padding:20px 12px 16px;font-family:inherit;transition:transform .12s,box-shadow .12s;display:flex}.mode-btn.camera{background:var(--sun)}.mode-btn:hover{box-shadow:0 9px 0 var(--shadow);transform:translateY(-3px)scale(1.03)}.mode-btn:active{box-shadow:0 2px 0 var(--shadow);transform:translateY(4px)}.mode-btn:focus-visible{outline:5px solid var(--grape);outline-offset:4px}.mode-icon{font-size:54px;line-height:1}.mode-label{color:var(--ink);font-size:17px;font-weight:800}.settings-row{border-top:3px dashed #2c3a4a33;justify-content:center;align-items:center;gap:12px;margin-top:26px;padding-top:20px;display:flex}.settings-icon{font-size:26px;line-height:1}.chip-row{gap:8px;display:flex}.chip{pointer-events:auto;cursor:pointer;min-width:52px;height:52px;color:var(--ink);background:var(--white);border:4px solid var(--ink);box-shadow:0 4px 0 var(--shadow);border-radius:999px;place-items:center;padding:0 12px;font-family:inherit;font-size:22px;font-weight:800;transition:transform .12s,box-shadow .12s,background .12s;display:grid}.chip:hover{box-shadow:0 6px 0 var(--shadow);transform:translateY(-2px)}.chip:active{box-shadow:0 1px 0 var(--shadow);transform:translateY(3px)}.chip:focus-visible{outline:4px solid var(--grape);outline-offset:3px}.chip[aria-checked=true]{background:var(--berry);color:var(--white)}.heart-infinity{color:var(--white);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;margin-left:2px;font-size:.85em;font-weight:900}.camera-card{padding:28px 32px 32px}#cam-preview{aspect-ratio:4/3;border:5px solid var(--ink);background:#223;border-radius:26px;width:min(70vw,420px);margin:0 auto 16px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 3px #ffffff59}#cam-video,#selfie-video{position:absolute;inset:0}#cam-video video,#selfie-video video{object-fit:cover;width:100%;height:100%;display:block;transform:scaleX(-1)}#cam-skeleton{pointer-events:none;position:absolute;inset:0}#cam-skeleton canvas{width:100%;height:100%;transform:scaleX(-1)}.cam-status{color:var(--ink);min-height:1.5em;margin:0 0 14px;font-size:clamp(17px,2.6vw,21px);font-weight:800}.cam-status.bad{color:var(--berry)}.cam-status.good{color:#2f8a4a}.cam-progress{border:4px solid var(--ink);background:#dfe6ec;border-radius:999px;width:min(70vw,420px);height:16px;margin:0 auto 18px;overflow:hidden}.cam-progress>span{background:var(--grass);width:0%;height:100%;transition:width .12s linear;display:block}.big-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:0 6px 0 var(--shadow);transform:none}#selfie{right:max(16px, env(safe-area-inset-right));bottom:max(16px, env(safe-area-inset-bottom));aspect-ratio:4/3;border:5px solid var(--ink);width:clamp(110px,15vw,180px);box-shadow:0 6px 0 var(--shadow);background:#223;border-radius:20px;position:absolute;overflow:hidden}#selfie-dot{border:3px solid var(--ink);background:var(--berry);border-radius:50%;width:16px;height:16px;transition:background .2s;position:absolute;top:8px;right:8px}#selfie-dot.tracking{background:#46d16b}#selfie.jump-flash{animation:.32s ease-out selfie-flash}@keyframes selfie-flash{0%{box-shadow:0 6px 0 var(--shadow), 0 0 0 0 #46d16be6}to{box-shadow:0 6px 0 var(--shadow), 0 0 0 26px #46d16b00}}#confetti-layer{position:absolute;inset:0;overflow:hidden}.confetti{will-change:transform, opacity;border-radius:3px;width:14px;height:14px;position:absolute}@media (prefers-reduced-motion:reduce){#jump-hint,.over-kid,.card,.screen{animation:none!important}}
