:root{--bg-color: #050505;--grid-bg: #111;--neon-green: #00ff41;--neon-blue: #00f3ff;--neon-red: #ff003c;--text-color: #fff;--font-main: "Courier New", Courier, monospace}*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}body{margin:0;padding:0;background-color:var(--bg-color);color:var(--text-color);font-family:var(--font-main);overflow:hidden;background-image:linear-gradient(rgba(0,255,65,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,255,65,.03) 1px,transparent 1px);background-size:30px 30px}#app{height:100dvh;display:flex;flex-direction:column;align-items:center}header{width:100%;max-width:600px;padding:15px;display:flex;justify-content:space-between;align-items:center;background:#000c;border-bottom:2px solid var(--neon-blue);box-shadow:0 0 15px var(--neon-blue);z-index:10}h1{margin:0;font-size:1.2rem;color:var(--neon-blue);text-shadow:0 0 5px var(--neon-blue)}.stats{display:flex;gap:20px;font-size:1.2rem;font-weight:700}.stat-box span{color:var(--neon-green)}.game-container{flex:1;display:flex;justify-content:center;align-items:center;width:100%;max-width:600px;padding:10px;position:relative}.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:10px;width:100%;height:100%;max-height:700px}.hole{background-color:#222;border:1px solid #333;border-radius:8px;position:relative;overflow:hidden;box-shadow:inset 0 0 10px #000}.popup{position:absolute;top:100%;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:5px;transition:top .1s ease-out;cursor:pointer;border:2px solid transparent}.hole.up .popup{top:0}.popup-icon{font-size:2.5rem;margin-bottom:5px;filter:drop-shadow(0 0 5px rgba(255,255,255,.5))}.popup-text{font-size:.8rem;font-weight:700;line-height:1.2;background:#000000b3;padding:2px 5px;border-radius:4px}.type-bad{background:linear-gradient(135deg,#300,#000);border-color:var(--neon-red);box-shadow:0 0 10px var(--neon-red) inset}.type-bad .popup-text{color:var(--neon-red)}.type-good{background:linear-gradient(135deg,#030,#000);border-color:var(--neon-green);box-shadow:0 0 10px var(--neon-green) inset}.type-good .popup-text{color:var(--neon-green)}.shake{animation:shake-anim .5s cubic-bezier(.36,.07,.19,.97) both}@keyframes shake-anim{10%,90%{transform:translate3d(-1px,0,0);background-color:#32000033}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-4px,0,0)}40%,60%{transform:translate3d(4px,0,0)}}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:100;text-align:center;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.title-screen h1{font-size:2.5rem;color:var(--neon-green);margin-bottom:20px;text-shadow:0 0 20px var(--neon-green)}.btn{background:transparent;color:var(--neon-blue);border:2px solid var(--neon-blue);padding:15px 40px;font-size:1.5rem;font-family:var(--font-main);cursor:pointer;text-transform:uppercase;font-weight:700;box-shadow:0 0 10px var(--neon-blue);transition:all .2s;margin-top:20px}.btn:hover{background:var(--neon-blue);color:#000;transform:scale(1.05);box-shadow:0 0 20px var(--neon-blue)}.btn:active{transform:scale(.95)}.instruction{margin:20px;color:#ccc;line-height:1.6;max-width:80%}.score-summary{font-size:3rem;color:var(--neon-green);margin:20px 0;text-shadow:0 0 10px var(--neon-green)}.rank-badge{font-size:1.5rem;color:#fff;margin-bottom:20px;padding:10px;border:1px dashed #fff}@media(max-width:400px){.grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(6,1fr)}h1{font-size:1rem}.popup-icon{font-size:2rem}}