@import"https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&family=Exo+2:wght@400;600;700&display=swap";:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--hit-area-extension: 14px}*{margin:0;padding:0;box-sizing:border-box}body{font-family:"Exo 2",sans-serif}.game-container{min-height:100vh;background:linear-gradient(135deg,#1a1a2e,#4a1a4a,#1a1a2e);display:flex;align-items:center;justify-content:center;padding:20px;position:relative;overflow:hidden}.background-grid{position:absolute;inset:0;opacity:.1;background-image:linear-gradient(#fff 1px,transparent 1px),linear-gradient(90deg,#fff 1px,transparent 1px);background-size:50px 50px;animation:moveGrid 20s linear infinite}@keyframes moveGrid{0%{transform:translate(0)}to{transform:translate(50px,50px)}}.game-content{position:relative;z-index:10;max-width:1200px;width:100%}.header{text-align:center;margin-bottom:40px}.title{font-family:Orbitron,sans-serif;font-size:4rem;font-weight:900;letter-spacing:.1em;background:linear-gradient(to right,#0ff,#f0f,#0ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 0 30px rgba(0,255,255,.5);margin-bottom:10px}.subtitle{color:#0ff;font-size:1.2rem;font-weight:400}.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px}.stat-card{background:#00000080;border:2px solid;border-radius:12px;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stat-score{border-color:#0ff}.stat-level{border-color:#a855f7}.stat-progress{border-color:#f0f}.stat-label{font-size:.9rem;margin-bottom:5px;font-weight:600}.stat-score .stat-label{color:#0ff}.stat-level .stat-label{color:#a855f7}.stat-progress .stat-label{color:#f0f}.stat-value{font-family:Orbitron,sans-serif;font-size:2rem;font-weight:700;color:#fff}.current-word-container{text-align:center;margin-bottom:20px;min-height:56px;display:flex;align-items:center;justify-content:center}.current-word{display:inline-block;padding:12px 24px;border-radius:50px;border:2px solid;animation:slideIn .3s ease-out}.current-word.placeholder{opacity:0;border-color:transparent;animation:none}.current-word.valid{border-color:#22c55e;background:#22c55e33}.current-word.invalid{border-color:#facc15;background:#facc1526}.word-text{font-family:Orbitron,sans-serif;font-size:1.5rem;font-weight:700;color:#fff}.valid-check{margin-left:12px;color:#22c55e;font-size:.9rem}.current-word-container .message{display:inline-block;padding:10px 24px;background:linear-gradient(to right,#0ff,#a855f7);border-radius:50px;font-size:1.2rem;font-weight:700;color:#fff;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.grid-container{position:relative;background:#000000b3;border:4px solid #00ffff;border-radius:16px;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 40px #00ffff4d}.overlay{position:absolute;inset:0;background:#000000e6;z-index:20;border-radius:12px;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.overlay-content{text-align:center}.overlay-title{font-family:Orbitron,sans-serif;font-size:4rem;font-weight:900;color:#0ff;text-shadow:0 0 20px rgba(0,255,255,.8);margin-bottom:30px}.overlay-title.game-over{background:linear-gradient(to right,#ff0080,#ff8c00);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.final-score{font-size:1.5rem;color:#0ff;margin-bottom:30px}.score-highlight{color:#fff;font-weight:700}.grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;user-select:none;-webkit-user-select:none;touch-action:none}.cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;border:2px solid;transition:all .2s cubic-bezier(.4,0,.2,1);padding:4px;position:relative}.cell:before{content:"";position:absolute;top:calc(-1 * var(--hit-area-extension));left:calc(-1 * var(--hit-area-extension));right:calc(-1 * var(--hit-area-extension));bottom:calc(-1 * var(--hit-area-extension));pointer-events:all}.cell:not(.empty):not(.falling){animation:popIn .3s ease-out}.cell.empty{background:#4b55634d;border-color:#374151;cursor:default}.cell:not(.empty):not(.selected){background:linear-gradient(135deg,#9333ea,#db2777);border-color:#9333ea;box-shadow:0 4px 10px #00000080}.cell:not(.empty):not(.selected):hover{border-color:#0ff}.cell.shuffle-block:not(.selected){background:linear-gradient(135deg,#facc15,#f97316);border-color:#facc15;box-shadow:0 0 15px #facc1599;animation:pulseGlow 1.5s ease-in-out infinite}.cell.shuffle-block:hover{border-color:#fbbf24}.cell.selected{background:linear-gradient(135deg,#0ff,#a855f7);border-color:#fff;animation:glow 1s ease-in-out infinite}.cell.selected.valid-word{background:linear-gradient(135deg,#10b981,#059669);border-color:#34d399}.cell.selected.valid-word .letter{color:#ecfdf5}.cell.selected.invalid-word{background:linear-gradient(135deg,#ef4444,#dc2626);border-color:#f87171}.cell.selected.invalid-word .letter{color:#fef2f2}@keyframes pulseGlow{0%,to{box-shadow:0 0 15px #facc1599}50%{box-shadow:0 0 25px #facc15e6,0 0 35px #facc1580}}@keyframes popIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}@keyframes fallDown{0%{transform:translateY(calc(-1 * var(--fall-distance)));opacity:.5}to{transform:translateY(0);opacity:1}}.cell.click-select-last{animation:clickSelectPulse .8s ease-in-out infinite!important}@keyframes clickSelectPulse{0%,to{box-shadow:0 0 #fffc,0 0 10px #0ff,0 0 20px #0ff}50%{box-shadow:0 0 0 5px #fff0,0 0 15px #0ff,0 0 30px #0ff}}.cell-content{position:relative}.letter{font-family:Orbitron,sans-serif;font-size:clamp(1rem,5.5vw,5.5rem);font-weight:900;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.8)}.shuffle-block .letter{font-size:4rem;font-family:system-ui;filter:drop-shadow(0 0 4px rgba(250,204,21,.8))}.selection-number{position:absolute;top:-8px;right:-8px;background:#facc15;color:#000;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700}.controls{display:flex;gap:20px;margin-top:30px;justify-content:center}.btn{padding:12px 24px;border-radius:50px;font-family:"Exo 2",sans-serif;font-weight:700;font-size:1rem;color:#fff;border:2px solid;cursor:pointer;transition:transform .2s;background:linear-gradient(135deg,var(--btn-bg-start),var(--btn-bg-end))}.btn:hover:not(:disabled){transform:scale(1.05)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{--btn-bg-start: #00ffff;--btn-bg-end: #a855f7;border-color:#fff}.btn-pause{--btn-bg-start: #facc15;--btn-bg-end: #f97316;border-color:#facc15}.btn-reset{--btn-bg-start: #ef4444;--btn-bg-end: #db2777;border-color:#ef4444}.btn-clear{--btn-bg-start: #6b7280;--btn-bg-end: #374151;border-color:#9ca3af}.instructions{margin-top:40px;background:#00000080;border:1px solid #00ffff;border-radius:12px;padding:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.instructions-title{color:#0ff;font-weight:700;margin-bottom:10px}.instructions-list{color:#d1d5db;font-size:.9rem;list-style:none;padding:0}.instructions-list li{margin-bottom:5px}@media(max-width:768px){.title{font-size:2.5rem}.subtitle{font-size:1rem}.stats-bar{grid-template-columns:1fr;gap:10px}.stat-card{padding:15px}.stat-value{font-size:1.5rem}.overlay-title{font-size:2.5rem}.letter{font-size:1rem}.controls{flex-wrap:wrap}.btn{font-size:.9rem;padding:10px 20px}}
