:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--surface: #141418;--surface2: #1c1c22;--border: rgba(255, 255, 255, .1);--text: #fafafa;--text-dim: rgba(255, 255, 255, .6);--accent: #6366f1;--accent-glow: rgba(99, 102, 241, .3);--success: #4ade80;--danger: #f87171;--warning: #fbbf24}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:.5rem;gap:.5rem;max-width:1400px;margin:0 auto}.menu-container{min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem;padding:2rem;max-width:600px;width:100%}.menu-title{text-align:center}.menu-icon{font-size:4rem;display:block;margin-bottom:.5rem;filter:drop-shadow(0 0 20px var(--accent-glow))}.menu-title h1{font-size:2.5rem;font-weight:800;letter-spacing:-.03em;background:linear-gradient(135deg,#fafafa,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.menu-subtitle{color:var(--text-dim);font-size:1.05rem;margin-top:.25rem}.level-select{display:flex;flex-direction:column;gap:.75rem;width:100%}.level-card{display:flex;align-items:center;gap:1.25rem;padding:1.25rem 1.5rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem;cursor:pointer;transition:all .2s;text-align:left;color:inherit;font:inherit;width:100%}.level-card:hover{border-color:var(--accent);background:var(--surface2);transform:translateY(-2px);box-shadow:0 4px 24px var(--accent-glow)}.level-number{display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.5rem;background:var(--accent);color:#fff;font-weight:700;font-size:1.2rem;flex-shrink:0}.level-info h3{font-size:1.1rem;font-weight:600;margin-bottom:.15rem}.level-info p{font-size:.85rem;color:var(--text-dim)}.level-meta{font-size:.75rem;color:#fff6;font-family:ui-monospace,monospace}.btn-start{padding:1rem 3rem;font-size:1.15rem;font-weight:700;color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:.75rem;cursor:pointer;transition:all .2s;letter-spacing:.02em}.btn-start:hover{transform:translateY(-2px);box-shadow:0 8px 30px var(--accent-glow)}.hud{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.6rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:.5rem;flex-shrink:0}.hud-left,.hud-right{display:flex;align-items:center;gap:1rem}.hud-level{font-weight:700;font-size:.95rem}.hud-score{font-family:ui-monospace,monospace;font-size:.85rem;color:var(--warning)}.hud-found{font-size:.85rem;color:var(--text-dim)}.timer{font-family:ui-monospace,monospace;font-size:1.3rem;font-weight:700;letter-spacing:.05em;transition:color .3s}.timer.warning{color:var(--warning)}.timer.critical{color:var(--danger);animation:pulse .5s infinite alternate}@keyframes pulse{0%{opacity:1}to{opacity:.5}}.btn-hint{padding:.35rem .8rem;font-size:.8rem;font-weight:600;color:#fff;background:#fbbf2426;border:1px solid rgba(251,191,36,.3);border-radius:.4rem;cursor:pointer;transition:all .2s}.btn-hint:hover:not(.disabled){background:#fbbf2440}.btn-hint.disabled{opacity:.4;cursor:not-allowed}.object-list{display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;padding:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:.5rem;width:100%;flex-shrink:0}.object-item{display:flex;align-items:center;gap:.35rem;padding:.3rem .6rem;border-radius:.35rem;border:1px solid var(--border);background:var(--surface2);font-size:.8rem;transition:all .3s;position:relative}.object-item.found{border-color:var(--success);background:#4ade801a;opacity:.6}.object-item.hinted{border-color:var(--warning);background:#fbbf2426;animation:hintGlow .8s infinite alternate;box-shadow:0 0 12px #fbbf244d}@keyframes hintGlow{0%{box-shadow:0 0 8px #fbbf2433}to{box-shadow:0 0 20px #fbbf2480}}.object-emoji{font-size:1.1rem}.object-name{font-size:.75rem;white-space:nowrap}.check{color:var(--success);font-weight:700;font-size:.9rem}.scene-wrapper{flex:1;width:100%;min-height:0;display:flex;align-items:stretch}.scene{position:relative;width:100%;border-radius:.75rem;overflow:hidden;cursor:crosshair;border:1px solid var(--border);min-height:450px;-webkit-user-select:none;user-select:none}.scene-element{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .3s}.hidden-object{position:absolute;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .4s,filter .4s,transform .4s;filter:blur(.5px)}.hidden-object.found{filter:none!important;opacity:1!important;animation:foundPop .4s ease-out}.hidden-object.hint-pulse{filter:none!important;animation:hintObjectPulse .6s infinite alternate;z-index:100!important}@keyframes foundPop{0%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.6)}to{transform:translate(-50%,-50%) scale(1)}}@keyframes hintObjectPulse{0%{filter:drop-shadow(0 0 6px rgba(251,191,36,.4)) blur(.5px)}to{filter:drop-shadow(0 0 18px rgba(251,191,36,.9)) blur(0px)}}.click-effect{position:absolute;width:30px;height:30px;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;animation:clickRipple .6s ease-out forwards;z-index:200}.click-effect.hit{border:3px solid var(--success);box-shadow:0 0 15px #4ade8080}.click-effect.miss{border:3px solid var(--danger);box-shadow:0 0 10px #f8717166}@keyframes clickRipple{0%{width:0;height:0;opacity:1}to{width:60px;height:60px;opacity:0}}.feedback-text{position:absolute;transform:translate(-50%,-50%);font-weight:800;font-size:1.1rem;pointer-events:none;animation:floatUp 1.2s ease-out forwards;z-index:300;text-shadow:0 2px 8px rgba(0,0,0,.8);white-space:nowrap}@keyframes floatUp{0%{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}to{opacity:0;transform:translate(-50%,-50%) translateY(-50px) scale(.8)}}.result-screen{min-height:90vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;padding:2rem;text-align:center;max-width:500px;width:100%}.result-icon{font-size:5rem}.result-screen h1{font-size:2.2rem;font-weight:800;letter-spacing:-.03em}.result-screen.win h1{background:linear-gradient(135deg,#4ade80,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.result-screen.lose h1{background:linear-gradient(135deg,#f87171,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.result-level{color:var(--text-dim);font-size:1.05rem}.result-stats{display:flex;gap:2.5rem;padding:1.5rem 2rem;background:var(--surface);border:1px solid var(--border);border-radius:.75rem}.stat{display:flex;flex-direction:column;align-items:center}.stat-value{font-size:1.8rem;font-weight:800;font-family:ui-monospace,monospace}.stat-label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.result-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.result-actions button{padding:.75rem 1.75rem;font-size:1rem;font-weight:600;border:none;border-radius:.5rem;cursor:pointer;transition:all .2s;color:#fff}.btn-next{background:linear-gradient(135deg,#6366f1,#8b5cf6)}.btn-next:hover{transform:translateY(-2px);box-shadow:0 6px 24px var(--accent-glow)}.btn-replay{background:var(--surface2);border:1px solid var(--border)!important;color:var(--text)!important}.btn-replay:hover{background:#ffffff1a}.btn-menu{background:transparent;border:1px solid var(--border)!important;color:var(--text-dim)!important}.btn-menu:hover{border-color:var(--text-dim)!important}.all-clear{margin-top:.5rem;color:var(--success);font-weight:600;font-size:1.1rem}.missed-objects{background:var(--surface);border:1px solid var(--border);border-radius:.75rem;padding:1.25rem;width:100%}.missed-objects h3{font-size:.9rem;color:var(--text-dim);margin-bottom:.75rem}.missed-list{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}.missed-item{display:flex;align-items:center;gap:.35rem;padding:.35rem .7rem;background:var(--surface2);border:1px solid rgba(248,113,113,.2);border-radius:.35rem;font-size:.85rem;color:var(--danger)}@media(max-width:640px){.app{padding:.25rem;gap:.35rem}.hud{flex-wrap:wrap;gap:.35rem;padding:.4rem .6rem}.hud-left,.hud-right{gap:.5rem}.object-list{gap:.3rem;padding:.35rem}.object-item{padding:.2rem .4rem;font-size:.7rem}.scene{min-height:350px}.menu-title h1{font-size:1.8rem}.result-stats{gap:1.5rem;padding:1rem}.stat-value{font-size:1.4rem}}
