@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700&family=Righteous&display=swap";:root{--font-main: "Outfit", sans-serif;--font-display: "Righteous", cursive;--color-bg: #FDF5E6;--color-text: #2C3E50;--color-primary: #FF6B6B;--color-secondary: #4ECDC4;--color-accent: #2C3E50}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;touch-action:none}body{font-family:var(--font-main);background-color:#1a1a1a;color:var(--color-text);overflow:hidden;width:100vw;height:100vh;display:flex;justify-content:center}#root{width:100%;max-width:480px;height:100%;position:relative;background-color:var(--color-bg);box-shadow:0 0 50px #00000080}canvas{display:block}.ui-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}.ui-element{pointer-events:auto}.top-bar{padding:20px;display:flex;justify-content:space-between;align-items:center;background:#fdf5e633;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);position:relative;z-index:15}.title{font-family:var(--font-display);font-size:1.5rem;color:var(--color-accent);text-shadow:1px 1px 0px rgba(0,0,0,.1)}.clickable{cursor:pointer;transition:transform .2s,opacity .2s}.clickable:hover{opacity:.8;transform:scale(1.05)}.clickable:active{transform:scale(.95)}.score-container{display:flex;flex-direction:column;align-items:center;gap:2px}.score{font-family:var(--font-display);font-size:2rem;color:var(--color-text)}.walking-speed{font-family:var(--font-main);font-size:1rem;color:var(--color-text);opacity:.9}.best-score{font-family:var(--font-main);font-size:.85rem;color:var(--color-accent);opacity:.8}.menu-screen{position:absolute;top:0;left:0;width:100%;height:100%;background:#fdf5e6cc;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;pointer-events:auto;z-index:10}.menu-screen.game-over{position:absolute;inset:auto 0 0;transform:none;width:100%;height:auto;max-width:100%;background:#fdf5e699;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:20px 20px 0 0;padding:30px 20px;box-shadow:0 -10px 40px #0003;border:2px solid var(--color-accent);border-bottom:none;z-index:20}.btn{background:var(--color-text);color:var(--color-bg);border:2px solid var(--color-accent);padding:15px 40px;font-family:var(--font-display);font-size:1.5rem;border-radius:50px;cursor:pointer;margin-top:20px;transition:transform .1s,box-shadow .1s;box-shadow:0 4px 0 var(--color-accent)}.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--color-accent)}.instructions{margin-top:20px;font-size:1rem;opacity:.8;max-width:80%}.game-over-score{font-size:4rem;font-family:var(--font-display);color:var(--color-text);margin-bottom:10px}.average-speed{font-size:1.8rem;font-family:var(--font-main);font-weight:600;color:var(--color-text);margin-bottom:10px}.top-speed{font-size:1.1rem;font-family:var(--font-main);color:var(--color-text);margin-bottom:20px;opacity:.7}.high-score-badge{font-size:1.2rem;font-family:var(--font-main);font-weight:600;color:var(--color-secondary);margin:10px 0;animation:bounce .5s ease}.high-score-badge.all-time{color:var(--color-accent);font-size:1.4rem}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.high-scores{display:flex;flex-direction:column;gap:8px;margin:15px 0;font-family:var(--font-main)}.high-score-item{display:flex;justify-content:space-between;align-items:center;padding:8px 15px;background:#ffffff4d;border-radius:8px;font-size:.95rem}.high-score-label{color:var(--color-text);opacity:.8}.high-score-value{font-weight:600;color:var(--color-text)}.settings-btn{background:none;border:none;color:var(--color-accent);cursor:pointer;padding:8px;display:flex;align-items:center;justify-content:center;transition:transform .2s}.settings-btn:active{transform:scale(.9)}.settings-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:100;pointer-events:auto}.settings-modal{background:var(--color-bg);border-radius:20px;padding:30px;width:90%;max-width:400px;box-shadow:0 10px 40px #0000004d;border:2px solid var(--color-accent)}.settings-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.settings-header h2{font-family:var(--font-display);color:var(--color-text);margin:0}.close-btn{background:none;border:none;color:var(--color-text);cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center}.footprint-options{display:flex;flex-direction:column;gap:10px}.footprint-option{display:flex;align-items:center;gap:15px;padding:15px 20px;background:#ffffff80;border:2px solid transparent;border-radius:12px;cursor:pointer;transition:all .2s;font-family:var(--font-main);font-size:1.1rem;color:var(--color-text)}.footprint-option:hover{background:#ffffffb3}.footprint-option.selected{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-bg);font-weight:600}.option-icon{width:32px;height:32px;object-fit:contain}.option-name{flex:1}