:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:#0f0f1a;color:#fafafa;overflow-x:hidden}.game-container{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem 1rem;max-width:500px;margin:0 auto;position:relative;user-select:none;-webkit-user-select:none}.game-header{width:100%;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1rem}.title-section h1{font-size:2.2rem;font-weight:800;background:linear-gradient(135deg,#f59e0b,#ef4444,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.03em}.subtitle{font-size:.8rem;color:#ffffff73;margin-top:.15rem}.scores{display:flex;gap:.5rem}.score-box{background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:.5rem;padding:.4rem .8rem;text-align:center;min-width:70px}.score-label{display:block;font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:#fff6;font-weight:600}.score-value{display:block;font-size:1.25rem;font-weight:700;color:#fff}.controls{width:100%;display:flex;justify-content:flex-end;gap:.5rem;margin-bottom:.75rem}.controls button{background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#fff;padding:.5rem 1rem;border-radius:.4rem;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s}.controls button:hover{background:#ffffff24}.board{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;width:100%;max-width:400px;aspect-ratio:1;background:#ffffff08;border:1px solid rgba(255,255,255,.06);border-radius:.75rem;padding:.5rem}.tile{border-radius:.5rem;background:#ffffff08;border:1px solid rgba(255,255,255,.04);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;position:relative;transition:transform .1s ease}.tile-filled{border:1px solid rgba(255,255,255,.15);animation:popIn .2s ease-out}.tile-emoji{font-size:1.8rem;line-height:1}.tile-name{font-size:.55rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.9}.tile-level{font-size:.5rem;opacity:.6;font-weight:600}@keyframes popIn{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.progress-bar{width:100%;max-width:400px;margin-top:.75rem}.progress-labels{display:flex;justify-content:space-between;align-items:center}.progress-dot{font-size:1rem;opacity:.2;transition:opacity .3s,transform .3s;filter:grayscale(1)}.progress-dot.active{opacity:.5;filter:grayscale(.5)}.progress-dot.current{opacity:1;filter:grayscale(0);transform:scale(1.3)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000bf;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:100;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay-content{text-align:center;padding:2rem;border-radius:1rem;max-width:320px;width:90%}.overlay-content.win{background:linear-gradient(135deg,#1a0a2e,#2d1b4e);border:1px solid rgba(168,85,247,.3);box-shadow:0 0 60px #a855f726}.overlay-content.lose{background:#1e1414f2;border:1px solid rgba(239,68,68,.2)}.overlay-content h2{font-size:1.5rem;margin-bottom:.5rem}.overlay-content.win h2{background:linear-gradient(135deg,#f59e0b,#ef4444);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.overlay-content p{color:#fff9;margin-bottom:1rem;font-size:.9rem}.overlay-buttons{display:flex;gap:.5rem;justify-content:center}.overlay-content button{background:linear-gradient(135deg,#a855f7,#6366f1);border:none;color:#fff;padding:.6rem 1.5rem;border-radius:.5rem;font-size:.85rem;font-weight:600;cursor:pointer;transition:opacity .15s}.overlay-content button:hover{opacity:.85}.instructions{margin-top:1rem;text-align:center;color:#ffffff59;font-size:.75rem;max-width:350px}.instructions strong{color:#ffffff8c}.btn-leaderboard{background:#f59e0b26!important;border-color:#f59e0b4d!important;color:#f59e0b!important}.btn-leaderboard:hover{background:#f59e0b40!important}.leaderboard{width:100%;max-width:400px;background:#ffffff08;border:1px solid rgba(255,255,255,.08);border-radius:.75rem;padding:.75rem;margin-top:.75rem;animation:fadeIn .3s ease-out}.leaderboard-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.06)}.leaderboard-header h3{font-size:.85rem;font-weight:700;color:#f59e0b;margin:0}.live-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1;box-shadow:0 0 #22c55e66}50%{opacity:.6;box-shadow:0 0 0 6px #22c55e00}}.leaderboard-list{display:flex;flex-direction:column;gap:.25rem}.leaderboard-entry{display:grid;grid-template-columns:2.2rem 1fr auto auto auto;align-items:center;gap:.4rem;padding:.35rem .5rem;border-radius:.35rem;font-size:.7rem;transition:background .2s}.leaderboard-entry:hover{background:#ffffff0a}.leaderboard-entry.top-three{background:#f59e0b0a}.leaderboard-entry.player-entry{background:#a855f71f;border:1px solid rgba(168,85,247,.25)}.lb-rank{font-size:.75rem;font-weight:700;color:#ffffff80;text-align:center}.lb-name{font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-entry .lb-name{color:#a855f7}.lb-dog{font-size:.65rem;color:#ffffff80;white-space:nowrap}.lb-score{font-weight:700;color:#f59e0b;font-family:ui-monospace,monospace;text-align:right;min-width:3rem}.lb-time{font-size:.55rem;color:#ffffff4d;text-align:right;min-width:3.5rem}@media(max-width:420px){.board{gap:.35rem;padding:.35rem;border-radius:.5rem}.tile-emoji{font-size:1.4rem}.tile-name{font-size:.5rem}.title-section h1{font-size:1.8rem}}