: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}html,body,#root{margin:0;min-height:100vh;background:#0f172a;color:#fafafa}#root{display:flex;flex-direction:column;min-height:100vh}.shell{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem;gap:1.5rem}.header{text-align:center}.header h1{margin:0;font-size:2rem;font-weight:700;background:linear-gradient(135deg,#60a5fa,#a78bfa,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header p{margin:.25rem 0 0;color:#ffffff80;font-size:.9rem}.stats-bar{display:flex;gap:2rem;align-items:center;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:.75rem 1.5rem;border-radius:.75rem;font-size:.9rem;flex-wrap:wrap;justify-content:center}.stat{display:flex;align-items:center;gap:.4rem}.stat-label{color:#ffffff80}.stat-value{font-weight:600;color:#60a5fa}.game-area{display:flex;gap:1rem;width:100%;max-width:1100px;justify-content:center;flex-wrap:wrap}.panel{position:relative;flex:1;min-width:300px;max-width:520px;border-radius:.75rem;overflow:hidden;border:2px solid rgba(255,255,255,.1);background:#1e293b;cursor:crosshair;transition:border-color .2s}.panel:hover{border-color:#fff3}.panel svg{display:block;width:100%;height:auto}.panel-label{position:absolute;top:.5rem;left:.5rem;background:#0009;color:#ffffffb3;font-size:.7rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.2rem .5rem;border-radius:.3rem;pointer-events:none}.diff-marker{position:absolute;pointer-events:none;border-radius:50%;border:3px solid #22c55e;background:#22c55e26;transform:translate(-50%,-50%);animation:pulse-ring .6s ease-out}@keyframes pulse-ring{0%{transform:translate(-50%,-50%) scale(.5);opacity:0}50%{opacity:1}to{transform:translate(-50%,-50%) scale(1);opacity:1}}.wrong-click{position:absolute;pointer-events:none;width:30px;height:30px;transform:translate(-50%,-50%);animation:wrong-fade .6s ease-out forwards}.wrong-click:before,.wrong-click:after{content:"";position:absolute;top:50%;left:50%;width:20px;height:3px;background:#ef4444;border-radius:2px}.wrong-click:before{transform:translate(-50%,-50%) rotate(45deg)}.wrong-click:after{transform:translate(-50%,-50%) rotate(-45deg)}@keyframes wrong-fade{0%{opacity:1;transform:translate(-50%,-50%) scale(.5)}to{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}.controls{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.btn{padding:.6rem 1.2rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.15);background:#ffffff14;color:#fafafa;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .15s}.btn:hover{background:#ffffff26;border-color:#ffffff40}.btn-primary{background:linear-gradient(135deg,#3b82f6,#6366f1);border-color:transparent}.btn-primary:hover{background:linear-gradient(135deg,#2563eb,#4f46e5)}.btn-success{background:linear-gradient(135deg,#22c55e,#16a34a);border-color:transparent}.btn-success:hover{background:linear-gradient(135deg,#16a34a,#15803d)}.complete-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:fade-in .3s ease-out}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.complete-card{background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:1rem;padding:2.5rem;text-align:center;max-width:22rem;animation:slide-up .3s ease-out}@keyframes slide-up{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.complete-card h2{margin:0 0 .5rem;font-size:1.5rem;background:linear-gradient(135deg,#22c55e,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.complete-card p{color:#fff9;margin:0 0 1.5rem}.stars{font-size:2rem;margin-bottom:1rem;letter-spacing:.2rem}.hint-flash{position:absolute;pointer-events:none;border-radius:50%;border:3px dashed #f59e0b;background:#f59e0b26;transform:translate(-50%,-50%);animation:hint-pulse 1s ease-in-out infinite}@keyframes hint-pulse{0%,to{transform:translate(-50%,-50%) scale(1);opacity:.8}50%{transform:translate(-50%,-50%) scale(1.15);opacity:.4}}
