*{margin:0;padding:0;box-sizing:border-box}:root{font-family:Courier New,Courier,monospace;line-height:1.4;font-weight:400;color-scheme:dark;color:#e0e0e0;background-color:#1a1a2e;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;overflow:hidden}#root{width:100vw;height:100vh}button{border-radius:6px;border:2px solid #4a4a6a;padding:.5em 1.2em;font-size:1em;font-weight:600;font-family:inherit;background-color:#2a2a4a;color:#e0e0e0;cursor:pointer;transition:all .2s}button:hover{border-color:#7070ff;background-color:#3a3a5a}button:focus-visible{outline:2px solid #7070ff;outline-offset:2px}button:active{transform:scale(.97)}.app{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden;position:relative}.app.dark{background-color:#1a1a2e;color:#e0e0e0}.github-link{position:fixed;bottom:8px;right:8px;color:#666;opacity:.5;transition:opacity .2s;z-index:1000;line-height:0}.github-link:hover{opacity:1;color:#e0e0e0}.main-menu{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1.5rem}.main-menu h1{font-size:4rem;color:#7070ff;text-shadow:0 0 20px rgba(112,112,255,.5);letter-spacing:.15em}.menu-buttons{display:flex;flex-direction:column;gap:.8rem;min-width:220px}.menu-buttons button{font-size:1.1rem;padding:.8em 2em}[data-testid=hud]{display:flex;flex-direction:column;padding:.5rem 1rem;background:#0a0a1ecc;border-bottom:1px solid #3a3a5a;z-index:100}.hud-top{display:flex;align-items:center;gap:1.2rem;font-size:.9rem;flex-wrap:wrap}.hud-top span:first-child{font-weight:700;color:#7070ff;font-size:1.1rem}.weak-keys{display:flex;align-items:center;gap:.4rem;padding:.3rem 0}.weak-label{color:#a0a0c0;font-size:.85rem;font-weight:600}.weak-key-badge{background:#4a2020;border:1px solid #ff5050;color:#ff8080;padding:.15em .5em;border-radius:4px;font-size:.85rem;font-weight:700}.hud-bottom{display:flex;gap:1.5rem;font-size:.85rem;color:#a0a0c0}.game-board{flex:1;position:relative;overflow:hidden;outline:none}.grape-cluster{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:1px}.grape-leaf{position:relative;z-index:2;margin-bottom:-6px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}.grape-trunk{position:absolute;left:50%;top:0;bottom:0;width:2.5px;background:linear-gradient(to bottom,#4a6a28,#3a2a18);transform:translate(-50%);z-index:0;border-radius:1px}.grape-row{display:flex;justify-content:center;gap:2px;margin-top:-2px;position:relative;z-index:1}.grape-row:first-of-type{margin-top:0}.grape{width:18px;height:20px;border-radius:50%;position:relative;background:radial-gradient(circle at 35% 25%,#ffffffe6,#fff0 20%),radial-gradient(circle at 60% 70%,rgba(60,10,80,.4) 0%,transparent 50%),radial-gradient(ellipse at 50% 45%,#c47be0,#a855d6,#8b3ab8,#6a2a95,#3d1060);box-shadow:inset -2px -3px 5px #00000080,inset 1px 1px 3px #dca0ff66,0 1px 2px #501e7880;transition:all .4s cubic-bezier(.34,1.56,.64,1)}.grape:before{content:"";position:absolute;left:50%;bottom:100%;width:1.5px;height:4px;background:#5a4a30;transform:translate(-50%)}.explosion{z-index:50;transform:translate(-50%,-50%)}.explosion-particle{position:absolute;width:6px;height:6px;border-radius:1px;animation:pixel-scatter .3s ease-out forwards}@keyframes pixel-scatter{0%{opacity:1;background:#ffa;transform:translate(0) scale(1.3)}20%{opacity:1;background:var(--particle-color, currentColor);transform:translate(calc(var(--dx) * .2),calc(var(--dy) * .2)) scale(1)}to{opacity:0;background:var(--particle-color, currentColor);transform:translate(var(--dx),var(--dy)) scale(.3)}}.absorb-effect{z-index:50;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle,#ff3c3ce6,#ff1e1e00 70%);transform:translate(-50%,-50%);animation:absorb-flash .4s ease-out forwards}@keyframes absorb-flash{0%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}40%{opacity:.8;transform:translate(-50%,-50%) scale(.8)}to{opacity:0;transform:translate(-50%,-50%) scale(0)}}.grape-squashing{animation:grape-squash .4s ease-out forwards;pointer-events:none}@keyframes grape-squash{0%{transform:scale(1);opacity:1}30%{transform:scaleX(1.4) scaleY(.5);opacity:.9}60%{transform:scaleX(1.6) scaleY(.3);opacity:.5}to{transform:scaleX(2) scaleY(0);opacity:0}}.grape-burst{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:55}.grape-droplet{position:absolute;width:6px;height:6px;border-radius:50%;background:#9b4dca;animation:grape-spray .5s ease-out forwards}@keyframes grape-spray{0%{opacity:1;transform:translate(0) scale(1)}50%{opacity:.8;transform:translate(calc(var(--dx) * .6),calc(var(--dy) * .4)) scale(1.2)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.4)}}.invader{display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:#fff;border-radius:4px;position:relative;will-change:transform}.invader-char{position:relative;z-index:2;font-size:28px;font-weight:900;font-family:monospace;color:#fff!important;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 4px #000,0 0 8px rgba(0,0,0,.8);line-height:1}.round-summary{display:flex;flex-direction:column;align-items:center;justify-content:center;position:absolute;inset:0;background:#0a0a1ef2;z-index:200;gap:1rem}.round-summary h2{font-size:2rem;color:#7070ff}.round-end{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0a1ee6;z-index:200;cursor:pointer}.round-end h1{font-size:3rem;text-shadow:0 0 30px rgba(112,112,255,.7)}.round-clear-text{animation:celebrate-pulse 1.2s ease-out;color:#4ade80;text-shadow:0 0 30px rgba(74,222,128,.7)}@keyframes celebrate-pulse{0%{opacity:0;transform:scale(.5);filter:brightness(2)}40%{opacity:1;transform:scale(1.15);filter:brightness(1.5)}to{opacity:1;transform:scale(1);filter:brightness(1)}}.game-over-text{animation:game-over-shake .6s ease-out;color:#ef4444;text-shadow:0 0 30px rgba(239,68,68,.7)}@keyframes game-over-shake{0%{transform:scale(1.3);opacity:0}20%{transform:scale(1.05) translate(-4px);opacity:1}40%{transform:scale(1) translate(4px)}60%{transform:translate(-2px)}80%{transform:translate(2px)}to{transform:translate(0)}}.shatter-container{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.shatter-particle{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#c084fc,#9b4dca 50%,#6b2fa0);animation:shatter-scatter 1.2s ease-out forwards}@keyframes shatter-scatter{0%{opacity:1;transform:translate(0) scale(1)}30%{opacity:1;transform:translate(calc(var(--shatter-dx) * .4),calc(var(--shatter-dy) * .4)) scale(.9)}to{opacity:0;transform:translate(var(--shatter-dx),var(--shatter-dy)) scale(.2)}}.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:6rem;font-weight:700;color:#7070ff;text-shadow:0 0 40px rgba(112,112,255,.6);z-index:200}.pause-menu{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0a0a1ef2;z-index:300;gap:1.5rem}.pause-menu h2{font-size:2.5rem;color:#ff7070}.pause-stats{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:#a0a0c0}.pause-stats-row{display:flex;gap:2rem}.pause-buttons{display:flex;flex-direction:column;gap:.8rem;min-width:200px}.confirm-quit{display:flex;flex-direction:column;align-items:center;gap:.8rem}.confirm-quit p{color:#ff8080;font-size:1.1rem}.in-game-settings-overlay{position:absolute;inset:0;background:#0a0a1ef2;z-index:350}.settings-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1.5rem}.settings-screen h2{font-size:2rem;color:#7070ff}.setting-row{display:flex;flex-direction:column;gap:.4rem;min-width:300px}.setting-row label{color:#a0a0c0}.setting-row input[type=range]{width:100%;accent-color:#7070ff}.speed-buttons{display:flex;gap:.5rem}.speed-buttons button[aria-pressed=true]{border-color:#7070ff;background-color:#3a3a6a}.stats-screen{display:flex;flex-direction:column;align-items:center;padding:2rem;height:100%;gap:1rem;overflow-y:auto}.stats-screen h2{font-size:2rem;color:#7070ff}.session-stats{display:flex;gap:1.5rem;color:#a0a0c0;font-size:.9rem}.stats-screen table{border-collapse:collapse;min-width:600px}.stats-screen th{cursor:pointer;padding:.5em 1em;border-bottom:2px solid #3a3a5a;color:#a0a0c0;text-align:left;-webkit-user-select:none;user-select:none}.stats-screen th:hover{color:#7070ff}.stats-screen td{padding:.4em 1em;border-bottom:1px solid #2a2a4a}.onboarding-demo{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:2rem}.demo-prompt{position:absolute;bottom:12%;left:50%;transform:translate(-50%);font-size:1.3rem;color:#a0a0c0;white-space:nowrap;z-index:10}.demo-invader{width:80px;height:80px;display:flex;align-items:center;justify-content:center;font-size:3rem;font-weight:700;color:#fff;background:#32325099;border:3px solid rgba(100,100,200,.5);border-radius:8px;text-shadow:0 0 10px rgba(255,255,255,.6)}.confirm-dialog{text-align:center;padding:1.5rem;background:#321e1e99;border:1px solid #ff5050;border-radius:8px}.confirm-dialog p{color:#ff8080;margin-bottom:.8rem}.new-high-score{font-size:1.3rem;font-weight:700;color:gold;text-shadow:0 0 12px rgba(255,215,0,.6);animation:high-score-pulse .8s ease-out}@keyframes high-score-pulse{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.demo-ready-btn{font-size:1.3rem;padding:.8em 2em;background:#3a3a6a;border:2px solid #7070ff;color:#e0e0e0;border-radius:8px;cursor:pointer}.demo-ready-btn:hover{background:#4a4a8a}.calibration-summary{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1.5rem}.calibration-summary h2{font-size:2rem;color:#7070ff}