:root{--color-sky-top:#7ad1ff;--color-sky-mid:#aae4ff;--color-sky-low:#d2f2ff;--color-grass:#6bbe3c;--color-grass-dark:#4ea33a;--color-grass-deep:#388724;--color-text:#1a1a1a;--color-pink:#ff6fa5;--color-pink-dark:#c43e7a;--color-yellow:#ffb84a;--color-yellow-dark:#c98612;--color-purple:#7a4adf;--color-purple-dark:#3f1d8a;--color-red:#d13c3c;--font-ui:"Fredoka", system-ui, -apple-system, "Segoe UI", sans-serif;--font-display:"Baloo 2", "Fredoka", system-ui, sans-serif;--stroke-thin:-2px -2px 0 #222, -2px 0 0 #222, -2px 2px 0 #222, 0 -2px 0 #222, 0 2px 0 #222, 2px -2px 0 #222, 2px 0 0 #222, 2px 2px 0 #222;--stroke-thick:-3px -3px 0 #222, -3px 0 0 #222, -3px 3px 0 #222, 0 -3px 0 #222, 0 3px 0 #222, 3px -3px 0 #222, 3px 0 0 #222, 3px 3px 0 #222;--hills-svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 1200 220' preserveAspectRatio='none'%3E%3Cpath d='M0,220 Q200,80 400,140 T800,100 T1200,150 L1200,220 Z' fill='%234ea33a'/%3E%3Cpath d='M0,220 Q300,130 600,170 T1200,150 L1200,220 Z' fill='%23388724' opacity='0.85'/%3E%3C/svg%3E");--safe-bottom:env(safe-area-inset-bottom,0px);--safe-top:env(safe-area-inset-top,0px)}*,:before,:after{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{font-family:var(--font-ui);color:var(--color-text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#000;font-weight:500;overflow:hidden}.app{height:100%;position:relative}.splash{background:linear-gradient(180deg, var(--color-sky-top) 0%, var(--color-sky-mid) 40%, var(--color-sky-low) 60%, var(--color-grass) 60%, var(--color-grass-dark) 100%);grid-template-rows:auto 1fr auto;padding:clamp(28px,6vh,70px) 0 clamp(20px,4vh,40px);display:grid;position:fixed;inset:0;overflow:hidden}.splash__brand{text-align:center;padding:0 16px}.splash__by{font-family:var(--font-ui);letter-spacing:6px;color:#fff;text-shadow:var(--stroke-thin);margin-bottom:2px;font-size:clamp(11px,1.6vw,14px);font-weight:600;display:block}.splash__author{font-family:var(--font-display);color:#fff;text-shadow:var(--stroke-thick), 0 10px 0 #00000038;letter-spacing:3px;font-size:clamp(56px,11vw,104px);font-weight:800;line-height:1;display:block}.splash__version{font-family:var(--font-ui);letter-spacing:3px;color:#fff;text-transform:uppercase;text-shadow:1px 1px #000;background:#00000040;border:2px solid #ffffffb3;border-radius:999px;margin-top:12px;padding:4px 14px;font-size:clamp(11px,1.4vw,14px);font-weight:600;display:inline-block}.splash__scene{align-self:end;width:100%;height:clamp(120px,22vh,200px);position:relative}.splash__runner{width:96px;height:96px;position:absolute;bottom:12px}@media (width<=600px){.splash__runner{width:72px;height:72px}}.splash__runner--gemita{animation:2.8s cubic-bezier(.5,0,.5,1) forwards splashRun;left:-22%}.splash__runner--susana{animation:2.8s cubic-bezier(.5,0,.5,1) .1s forwards splashRun;left:-10%}.splash__runner--jesus{animation:2.6s cubic-bezier(.5,0,.5,1) .35s forwards splashRun;left:-42%}.splash__head{background:var(--bg,#ffd47a);border:4px solid #222;border-radius:50%;place-items:center;width:100%;height:100%;animation:.32s ease-in-out infinite alternate splashBob;display:grid;position:relative;overflow:hidden;box-shadow:0 8px #00000040,inset 0 -8px 16px #00000014}.splash__head img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.splash__head span{font-size:clamp(28px,5vw,44px)}@keyframes splashRun{to{left:110%}}@keyframes splashBob{to{transform:translateY(-12px)rotate(-6deg)}}.splash__loader{padding:0 clamp(20px,6vw,80px)}.splash__bar{background:#ffffffbf;border:3px solid #222;border-radius:14px;width:100%;height:24px;overflow:hidden;box-shadow:0 4px #0003}.splash__bar-fill{background:linear-gradient(90deg, var(--color-pink), var(--color-yellow), var(--color-purple));width:0%;height:100%;animation:2.6s ease-out forwards splashFill}@keyframes splashFill{to{width:100%}}.splash__loading{text-align:center;color:#fff;text-shadow:var(--stroke-thin);letter-spacing:4px;margin:14px 0 0;font-size:clamp(14px,2vw,18px);font-weight:700}.menu{grid-template-rows:auto 1fr auto auto;gap:clamp(12px,2vh,24px);padding:clamp(18px,3.5vh,36px) clamp(14px,3.5vw,36px);display:grid;position:fixed;inset:0;overflow:hidden}.menu__sky{z-index:0;background:linear-gradient(180deg, var(--color-sky-top) 0%, var(--color-sky-mid) 35%, var(--color-sky-low) 58%, var(--color-grass) 62%, var(--color-grass-dark) 100%);position:absolute;inset:0}.menu__hills{z-index:0;background-image:var(--hills-svg);background-position:bottom;background-repeat:no-repeat;background-size:100% 100%;height:38%;position:absolute;bottom:0;left:0;right:0}.menu__field{z-index:0;background:linear-gradient(#0000,#0000000f);height:12%;position:absolute;bottom:0;left:0;right:0}.menu__clouds{pointer-events:none;z-index:1;position:absolute;inset:0}.menu__clouds span{opacity:.9;filter:drop-shadow(0 4px 6px #0000001a);font-size:clamp(26px,4vw,42px);position:absolute}.menu__clouds span:first-child{animation:22s linear infinite cloudDrift;top:8%;left:8%}.menu__clouds span:nth-child(2){animation:28s linear infinite reverse cloudDrift;top:16%;left:68%}.menu__clouds span:nth-child(3){animation:26s linear infinite cloudDrift;top:5%;left:48%}.menu__clouds span:nth-child(4){animation:7s ease-in-out infinite butterfly;top:30%;left:18%}.menu__clouds span:nth-child(5){animation:1.4s ease-in-out infinite alternate bobFlower;top:78%;left:85%}@keyframes cloudDrift{0%{transform:translate(-15vw)}to{transform:translate(40vw)}}@keyframes butterfly{0%,to{transform:translate(0)}50%{transform:translate(20vw,-30px)}}@keyframes bobFlower{to{transform:translateY(-6px)rotate(6deg)}}.menu__header{text-align:center;z-index:2;position:relative}.menu__logo{flex-direction:column;margin:0;line-height:.9;display:flex}.menu__logo-top{font-family:var(--font-display);color:#fff;text-shadow:-3px -3px 0 var(--color-pink-dark), -3px 0 0 var(--color-pink-dark), -3px 3px 0 var(--color-pink-dark), 0 -3px 0 var(--color-pink-dark), 0 3px 0 var(--color-pink-dark), 3px -3px 0 var(--color-pink-dark), 3px 0 0 var(--color-pink-dark), 3px 3px 0 var(--color-pink-dark), 0 8px 0 #0000002e;letter-spacing:2px;font-size:clamp(28px,6vw,56px);font-weight:700}.menu__logo-bottom{font-family:var(--font-display);color:#fff;text-shadow:-4px -4px 0 var(--color-purple-dark), -4px 0 0 var(--color-purple-dark), -4px 4px 0 var(--color-purple-dark), 0 -4px 0 var(--color-purple-dark), 0 4px 0 var(--color-purple-dark), 4px -4px 0 var(--color-purple-dark), 4px 0 0 var(--color-purple-dark), 4px 4px 0 var(--color-purple-dark), 0 12px 0 #00000040;letter-spacing:4px;margin-top:6px;font-size:clamp(68px,14vw,130px);font-weight:800;animation:3s ease-in-out infinite logoBob}@keyframes logoBob{0%,to{transform:translateY(0)rotate(-1deg)}50%{transform:translateY(-6px)rotate(1deg)}}.menu__tagline{color:#fff;text-shadow:var(--stroke-thin);letter-spacing:1px;margin:14px 0 0;font-size:clamp(13px,1.8vw,18px);font-weight:600}.picker{z-index:2;text-align:center;align-self:center;width:100%;max-width:920px;margin:0 auto;position:relative}.picker__label{font-family:var(--font-display);color:#fff;text-shadow:var(--stroke-thin);letter-spacing:3px;margin:0 0 14px;font-size:clamp(16px,2.2vw,22px);font-weight:700}.picker__cards{flex-wrap:wrap;justify-content:center;gap:clamp(14px,3vw,36px);display:flex}.picker__card{appearance:none;border:4px solid var(--card-color,#fff);cursor:pointer;background:#fffffff2;border-radius:24px;outline:none;flex-direction:column;align-items:center;gap:10px;width:clamp(160px,24vw,220px);padding:18px 14px 16px;font-family:inherit;transition:transform .18s,box-shadow .18s;display:flex;box-shadow:0 8px #0000002e}.picker__card:hover{transform:translateY(-4px)}.picker__card:active{transform:translateY(2px);box-shadow:0 3px #0000002e}.picker__card.is-active{box-shadow:0 12px 0 var(--card-color-dark,#222);border-width:5px;transform:scale(1.06)}.picker__avatar{background:var(--card-color,#ffd47a);border:4px solid #222;border-radius:50%;place-items:center;width:clamp(96px,14vw,124px);height:clamp(96px,14vw,124px);display:grid;position:relative;overflow:hidden;box-shadow:inset 0 -10px 16px #0000001a}.picker__avatar img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.picker__emoji{font-size:clamp(34px,5vw,52px)}.picker__name{font-family:var(--font-display);color:#1a1a1a;letter-spacing:.5px;font-size:clamp(16px,1.9vw,20px);font-weight:800}.picker__desc{color:#4a4a4a;text-align:center;font-size:clamp(11px,1.3vw,13px);font-weight:500;line-height:1.3}.menu__actions{z-index:2;flex-direction:column;align-items:center;gap:10px;display:flex;position:relative}.btn{appearance:none;color:#1a1a1a;font-family:var(--font-display);cursor:pointer;letter-spacing:1.2px;background:#fff;border:4px solid #222;border-radius:16px;padding:12px 26px;font-size:clamp(15px,2vw,18px);font-weight:700;transition:transform .12s,box-shadow .12s,filter .12s;box-shadow:0 6px #222}.btn:hover{filter:brightness(1.04);transform:translateY(-2px);box-shadow:0 8px #222}.btn:active{transform:translateY(2px);box-shadow:0 2px #222}.btn--primary{color:#5a3a00;background:linear-gradient(#ffd47a,#ffb84a)}.btn--big{letter-spacing:3px;padding:16px 52px;font-size:clamp(22px,3vw,30px)}.btn--ghost{color:#fff;background:0 0;border-color:#fff;box-shadow:0 6px #ffffff80}.btn--ghost:hover{box-shadow:0 8px #ffffff80}.menu__record{z-index:2;text-align:center;color:#fff;text-shadow:var(--stroke-thin);font-size:clamp(14px,1.8vw,18px);font-weight:700;position:relative}.menu__record strong{font-size:clamp(18px,2.2vw,22px)}.info{background:linear-gradient(180deg, var(--color-sky-top) 0%, var(--color-sky-mid) 50%, var(--color-grass) 60%, var(--color-grass-dark) 100%);place-items:center;padding:20px;display:grid;position:fixed;inset:0;overflow-y:auto}.info__card{text-align:center;background:#fffffff5;border:5px solid #222;border-radius:26px;width:100%;max-width:580px;padding:clamp(22px,4vw,40px);box-shadow:0 12px #0003}.info__title{font-family:var(--font-display);color:#1a1a1a;letter-spacing:1px;margin:0 0 18px;font-size:clamp(28px,4vw,40px);font-weight:800}.rules{text-align:left;margin:0 0 24px;padding:0;list-style:none}.rules li{color:#2a2a2a;border-bottom:1px dashed #0000001f;align-items:flex-start;gap:12px;padding:10px 0;font-size:clamp(14px,1.7vw,16px);display:flex}.rules li:last-child{border-bottom:0}.rules__icon{flex-shrink:0;font-size:22px;line-height:1}kbd{color:#fff;background:#222;border-radius:6px;padding:3px 8px;font-family:ui-monospace,monospace;font-size:.9em}.gameover__newrecord{background:linear-gradient(90deg, var(--color-yellow), var(--color-pink));color:#fff;font-family:var(--font-display);letter-spacing:1px;text-shadow:var(--stroke-thin);border:3px solid #222;border-radius:30px;margin-bottom:12px;padding:8px 22px;font-weight:800;animation:.6s cubic-bezier(.34,1.56,.64,1) pop;display:inline-block}@keyframes pop{0%{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}.gameover__phrase{color:#555;margin:8px 0 22px;font-size:clamp(15px,1.9vw,18px);font-style:italic}.stats{text-align:left;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 24px;display:grid}.stats__row{background:#0000000a;border-radius:12px;padding:10px 14px}.stats__row dt{color:#666;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;font-size:11px}.stats__row dd{font-family:var(--font-display);color:#1a1a1a;margin:0;font-size:clamp(17px,2.1vw,22px);font-weight:800}.gameover__actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.game-canvas{touch-action:none;background:linear-gradient(#7ad1ff 0%,#aae4ff 55% 60%,#6bbe3c 65%,#4ea33a 100%);position:fixed;inset:0}.game-canvas canvas{display:block;width:100%!important;height:100%!important}@media (width<=600px){.stats{grid-template-columns:1fr}.menu{gap:10px;padding:14px}.menu__logo-top{letter-spacing:1px}.menu__logo-bottom{letter-spacing:2px}.menu__tagline{margin-top:8px}.picker__card{width:clamp(140px,42vw,180px);padding:14px 10px 12px}.picker__avatar{width:86px;height:86px}.picker__desc{font-size:11px}.btn{padding:10px 22px}.btn--big{padding:14px 40px}.menu__actions{gap:8px}}@media (orientation:landscape) and (height<=500px){.menu{grid-template-rows:auto auto auto auto;gap:8px;padding:8px 14px}.menu__logo-top{font-size:clamp(18px,3.8vw,32px)}.menu__logo-bottom{font-size:clamp(38px,8vw,70px)}.picker__card{padding:8px 8px 6px}.picker__avatar{width:60px;height:60px}.picker__name{font-size:14px}.picker__desc{font-size:10px;line-height:1.2}.btn--big{padding:10px 30px;font-size:20px}}