:root{--navy: #2d3250;--teal: #2fbfae;--cream: #f4f1ec;--coffee: #8a5a38;--red: #e4504b;--corridor: #b9b4d6}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{background:var(--cream);font-family:Segoe UI,-apple-system,BlinkMacSystemFont,Nunito,sans-serif;color:var(--navy);overscroll-behavior:none}.page{height:100%;display:flex;align-items:center;justify-content:center;padding:12px}.game-frame{position:relative;width:100%;max-width:420px;height:min(100%,780px);min-height:520px;border-radius:28px;overflow:hidden;background:var(--navy);box-shadow:0 18px 50px #2d325047;touch-action:none;user-select:none;-webkit-user-select:none}.track{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#a49ecb 0%,var(--corridor) 45%,#cfcadf 100%);transition:filter .4s}.tier-bg-2{box-shadow:inset 0 0 60px #2fbfae40}.tier-bg-3{box-shadow:inset 0 0 80px #2fbfae73}.lane-line{position:absolute;top:0;bottom:0;width:3px;background:repeating-linear-gradient(180deg,rgba(255,255,255,.55) 0 26px,transparent 26px 52px)}.lane-line.l1{left:33.33%}.lane-line.l2{left:66.66%}.office-blur{position:absolute;top:0;bottom:0;width:12%;filter:blur(2px);opacity:.55;background:radial-gradient(circle at 50% 18%,#6f9f6a 0 14px,transparent 15px),radial-gradient(circle at 50% 48%,#e0b25f 0 16px,transparent 17px),radial-gradient(circle at 50% 78%,#6f9f6a 0 14px,transparent 15px),linear-gradient(180deg,#948dbb,#b6b0d4)}.office-blur.left{left:0;border-right:2px solid rgba(255,255,255,.25)}.office-blur.right{right:0;border-left:2px solid rgba(255,255,255,.25)}.entity{position:absolute;transform:translate(-50%,-50%);font-size:40px;line-height:1;filter:drop-shadow(0 4px 6px rgba(45,50,80,.3));will-change:top,left}.entity.k-coffee{animation:coffeeGlow 1s ease-in-out infinite alternate}@keyframes coffeeGlow{0%{filter:drop-shadow(0 0 4px rgba(255,214,120,.7))}to{filter:drop-shadow(0 0 12px rgba(255,214,120,1));transform:translate(-50%,-50%) scale(1.08)}}.entity.k-deadline{animation:pulse .5s ease-in-out infinite alternate}@keyframes pulse{0%{transform:translate(-50%,-50%) scale(1)}to{transform:translate(-50%,-50%) scale(1.15)}}.entity.k-client{transition:left .15s ease}.entity.k-client.wobble{animation:wobble .25s ease-in-out infinite alternate}@keyframes wobble{0%{transform:translate(-50%,-50%) rotate(-9deg)}to{transform:translate(-50%,-50%) rotate(9deg)}}.entity.warning{animation:warnFlash .12s linear infinite alternate;font-size:32px}@keyframes warnFlash{0%{opacity:1}to{opacity:.25}}.player{position:absolute;width:82px;height:102px;transform:translate(-50%,-50%);transition:left .12s ease-out;z-index:5}.player.sparkle:after{content:"✨";position:absolute;top:-14px;right:-10px;font-size:22px;animation:sparklePop .25s ease-out}@keyframes sparklePop{0%{transform:scale(.3);opacity:0}to{transform:scale(1.15);opacity:1}}.mascot{position:relative;width:100%;height:100%}.mascot.m-idle .body{animation:bob 1.6s ease-in-out infinite;transform-origin:60px 120px}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.mascot.m-run .body{animation:runLean .4s ease-in-out infinite alternate}@keyframes runLean{0%{transform:translateY(0) rotate(-1.5deg)}to{transform:translateY(-3px) rotate(1.5deg)}}.mascot.m-run .leg-l{animation:stepL .28s linear infinite;transform-origin:44px 112px}.mascot.m-run .leg-r{animation:stepR .28s linear infinite;transform-origin:76px 112px}@keyframes stepL{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes stepR{0%,to{transform:translateY(-9px)}50%{transform:translateY(0)}}.mascot.m-crash{animation:crashTip .6s ease-out forwards}@keyframes crashTip{0%{transform:rotate(0)}40%{transform:rotate(-14deg) translateY(2px)}to{transform:rotate(78deg) translateY(14px)}}.mascot .cup-spilled{animation:spill .5s ease-out forwards;transform-origin:12px 88px}@keyframes spill{to{transform:rotate(-120deg) translate(-14px,6px)}}.dizzy{position:absolute;top:-26px;left:50%;transform:translate(-50%);font-size:24px;animation:dizzySpin 1.2s linear infinite;z-index:6}@keyframes dizzySpin{0%{transform:translate(-50%) rotate(0)}to{transform:translate(-50%) rotate(360deg)}}.speed-lines{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1}.speed-lines span{position:absolute;left:50%;width:4px;height:26px;border-radius:3px;background:#2fbfaebf;animation:lineFly .35s linear infinite}.speed-lines span:nth-child(1){margin-left:-34px;animation-delay:0s}.speed-lines span:nth-child(2){margin-left:0;animation-delay:.12s}.speed-lines span:nth-child(3){margin-left:30px;animation-delay:.22s}@keyframes lineFly{0%{top:60%;opacity:1}to{top:118%;opacity:0}}.tier-2 .speed-lines span{background:var(--teal);height:36px}.tier-3 .speed-lines span{background:#ffd678;height:44px}.rocket-trail{position:absolute;bottom:-22px;left:50%;transform:translate(-50%);width:26px;height:34px;border-radius:50% 50% 60% 60%;background:linear-gradient(180deg,#ffd678,#f1862b,transparent);filter:blur(2px);animation:flame .16s ease-in-out infinite alternate;z-index:-1}@keyframes flame{0%{transform:translate(-50%) scaleY(1)}to{transform:translate(-50%) scaleY(1.35)}}.shake{animation:shake .35s linear infinite}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(1.5px,-1px)}50%{transform:translate(-1.5px,1px)}75%{transform:translate(1px,1.5px)}}.hud{position:absolute;top:0;left:0;right:0;padding:14px 14px 0;z-index:10;pointer-events:none}.hud-top{display:flex;justify-content:space-between;align-items:center}.pill{background:#2d3250d1;color:#fff;border:none;border-radius:14px;padding:8px 14px;font-size:16px;font-weight:700}.pause-btn{pointer-events:auto;cursor:pointer;font-size:15px;line-height:1}.distance{text-align:center;font-size:42px;font-weight:800;color:#fff;text-shadow:0 3px 10px rgba(45,50,80,.45);margin-top:-6px}.speed-wrap{width:62%;margin:2px auto 0;text-align:center}.speed-bar{height:12px;border-radius:8px;background:#2d3250b3;overflow:hidden}.speed-fill{height:100%;border-radius:8px;background:linear-gradient(90deg,var(--teal),#7fe3d6);transition:width .2s}.speed-label{margin-top:3px;font-size:13px;font-weight:800;letter-spacing:.05em;color:#fff;text-shadow:0 2px 6px rgba(45,50,80,.5)}.screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center;background:color-mix(in srgb,var(--cream) 94%,transparent)}.gameover-screen{background:#f4f1ece6;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.logo{display:flex;flex-direction:column;line-height:.95;font-weight:900;letter-spacing:.01em}.logo-coffee{font-size:52px;color:var(--navy)}.logo-run{font-size:52px;color:var(--teal);font-style:italic}.tagline{background:var(--navy);color:#fff;border-radius:999px;padding:6px 16px;font-size:12px;font-weight:800;letter-spacing:.12em}.start-mascot{width:110px;height:136px}.go-mascot{width:96px;height:120px}.howto{max-width:280px;font-size:15px}.avoid-row{font-size:24px;letter-spacing:8px}.btn{border:none;border-radius:16px;padding:14px 30px;font-size:18px;font-weight:800;cursor:pointer;transition:transform .08s}.btn:active{transform:scale(.96)}.btn-primary{background:var(--teal);color:#fff;box-shadow:0 6px #219b8c}.btn-secondary{background:#fff;color:var(--navy);border:2px solid var(--navy);padding:10px 24px;font-size:15px}.stats-footer{display:flex;gap:18px;font-weight:700;font-size:14px;opacity:.85}.brand-badge{margin-top:6px;font-size:11.5px;color:var(--navy);text-decoration:none;background:#fff;border-radius:12px;padding:8px 14px;box-shadow:0 3px 10px #2d32501f}.brand-badge b{color:var(--teal)}.quip{font-size:24px;font-weight:900}.new-best{font-size:20px;font-weight:900;color:var(--teal);animation:bestPop .6s ease-out}@keyframes bestPop{0%{transform:scale(.4);opacity:0}70%{transform:scale(1.15)}to{transform:scale(1);opacity:1}}.stats-card{background:#fff;border-radius:18px;padding:14px 20px;min-width:240px;box-shadow:0 6px 20px #2d32501f;display:flex;flex-direction:column;gap:8px}.stat{display:flex;justify-content:space-between;font-size:15px}.stat-label{font-weight:600;opacity:.8}.stat-value{font-weight:900}.share-toast{font-size:13px;font-weight:700;color:var(--teal)}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:30;background:#2d32508c;display:flex;align-items:center;justify-content:center}.overlay-card{background:var(--cream);border-radius:22px;padding:26px 30px;display:flex;flex-direction:column;gap:10px;min-width:220px;text-align:center}.overlay-card h2{margin-bottom:6px}@media (prefers-reduced-motion: reduce){.shake,.entity.k-coffee,.entity.k-deadline{animation:none}}