@import url('https://cdn.jsdelivr.net/npm/@fontsource/fira-code@5.0.0/index.css');
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#0a0a1a;--panel:#12122a;--green:#00ff88;--red:#ff4466;--blue:#4488ff;--yellow:#ffcc00;--purple:#aa44ff;--cyan:#00ccff;--text:#e0e0f0;--sec:#8888aa}
body{font-family:'Fira Code',monospace;background:var(--bg);color:var(--text);overflow:hidden;height:100vh;width:100vw;user-select:none}
.screen{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:100;transition:opacity .5s ease,transform .5s ease}
.screen.hidden{opacity:0;pointer-events:none;transform:scale(.95)}
#startScreen{background:linear-gradient(135deg,#0a0a1a,#1a1a3a,#0a0a1a)}
.title{font-size:clamp(2.5rem,6vw,4.5rem);font-weight:900;background:linear-gradient(90deg,var(--green),var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:pulse 3s ease-in-out infinite}
@keyframes pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.3)}}
.sub{color:var(--sec);font-size:clamp(.8rem,2vw,1.1rem);margin-bottom:2rem;text-align:center;max-width:500px;line-height:1.6}
.box{background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1.5rem;max-width:480px;width:90%;margin-bottom:1.5rem}
.box h3{color:var(--yellow);margin-bottom:.8rem}
.box ul{list-style:none;font-size:.85rem;color:var(--sec)}
.box li{padding:.3rem 0 .3rem 1.2rem;position:relative}
.box li::before{content:'▸';position:absolute;left:0;color:var(--green)}
.levels{display:flex;gap:.8rem;margin-bottom:1.5rem;flex-wrap:wrap;justify-content:center}
.lbtn{padding:.8rem 1.8rem;border:2px solid var(--sec);background:transparent;color:var(--sec);font-family:inherit;font-size:.9rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .3s}
.lbtn:hover{border-color:var(--blue);color:var(--blue)}
.lbtn.active{border-color:var(--green);color:var(--green);background:rgba(0,255,136,.1);box-shadow:0 0 15px rgba(0,255,136,.2)}
.start{padding:1rem 3rem;font-family:inherit;font-size:1.2rem;font-weight:700;background:linear-gradient(135deg,var(--green),var(--blue));color:var(--bg);border:none;border-radius:12px;cursor:pointer;transition:all .3s;text-transform:uppercase;letter-spacing:2px}
.start:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,255,136,.4)}
.start:active{transform:translateY(0)}

/* GAME */
#gameScreen{position:fixed;inset:0;display:none;flex-direction:column;background:var(--bg);z-index:100;transition:background .5s}
#gameScreen.active{display:flex}
#gameScreen.fever{background:linear-gradient(180deg,#0a0a1a,#1a0a2a,#0a0a1a)}
#gameScreen.blitz{background:linear-gradient(180deg,#0a0a1a,#1a1a0a,#0a0a1a)}

.hud{position:relative;z-index:50;display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.5rem;background:rgba(10,10,26,.95);border-bottom:1px solid rgba(255,255,255,.05);backdrop-filter:blur(10px);flex-shrink:0}
.hi{display:flex;flex-direction:column;align-items:center;min-width:70px}
.hl{font-size:.65rem;color:var(--sec);text-transform:uppercase;letter-spacing:1px}
.hv{font-size:1.3rem;font-weight:700}
.hv.sc{color:var(--green)}.hv.cm{color:var(--yellow)}.hv.rd{color:var(--cyan)}.hv.lv{color:var(--red)}

#comboFire{position:absolute;top:58px;right:20px;font-size:1.5rem;font-weight:900;color:var(--yellow);opacity:0;z-index:55;text-shadow:0 0 20px rgba(255,204,0,.5);transition:opacity .3s}
#comboFire.vis{opacity:1;animation:cb .5s}
@keyframes cb{0%{transform:scale(.5)}50%{transform:scale(1.2)}100%{transform:scale(1)}}

.area{position:relative;flex:1;overflow:hidden}
.ll{position:absolute;bottom:80px;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.6}
.ll::after{content:'⚠ DANGER LINE ⚠';position:absolute;right:15px;top:-18px;font-size:.65rem;color:var(--red);opacity:.5}

.word-element{position:absolute;font-family:inherit;font-size:clamp(1rem,2.2vw,1.3rem);font-weight:700;color:var(--text);padding:.4rem .8rem;border-radius:6px;background:rgba(18,18,42,.85);border:1px solid rgba(255,255,255,.15);white-space:nowrap;z-index:10;pointer-events:none;transition:border-color .15s,box-shadow .15s}
.word-element.active{border-color:var(--blue);box-shadow:0 0 15px rgba(68,136,255,.3)}
.word-element.gold{border-color:var(--yellow);color:var(--yellow);box-shadow:0 0 12px rgba(255,204,0,.4);animation:goldGlow 1s ease-in-out infinite alternate}
@keyframes goldGlow{from{box-shadow:0 0 12px rgba(255,204,0,.3)}to{box-shadow:0 0 25px rgba(255,204,0,.7)}}
.word-element.zigzag{border-color:var(--purple);box-shadow:0 0 10px rgba(170,68,255,.3)}
.word-element.speed{border-color:var(--red);box-shadow:0 0 15px rgba(255,68,102,.3)}
.word-element.matched{color:var(--green);border-color:var(--green);animation:wmc .4s forwards}
@keyframes wmc{0%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.8}100%{transform:scale(1.5);opacity:0}}
.word-element.shake{animation:ws .3s;border-color:var(--red)!important}
@keyframes ws{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.word-element.frozen{border-color:var(--cyan)!important;opacity:.6}
.word-element.floating{border-color:var(--cyan);box-shadow:0 0 15px rgba(0,204,255,.3);animation:float 2s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(-3px)}to{transform:translateY(3px)}}

/* Power-up */
.powerup{position:absolute;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;z-index:25;animation:puFloat 3s ease-in-out infinite alternate;pointer-events:none}
@keyframes puFloat{from{transform:translateY(-5px)}to{transform:translateY(5px)}}

/* Event banners */
.event-banner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900;color:var(--yellow);text-shadow:0 0 30px rgba(255,204,0,.5);z-index:60;pointer-events:none;animation:bannerIn 1.5s forwards;white-space:nowrap}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1) translateY(-30px)}}

/* Timer bar for special events */
.event-bar{position:fixed;top:55px;left:0;height:4px;background:linear-gradient(90deg,var(--yellow),var(--red));z-index:55;transition:width .1s linear;border-radius:2px}

.particle{position:absolute;border-radius:50%;pointer-events:none;z-index:20}
.popup{position:absolute;font-size:1.1rem;font-weight:700;color:var(--green);pointer-events:none;z-index:30;animation:pf .8s forwards}
.popup.gold{color:var(--yellow)}
@keyframes pf{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-60px) scale(1.3)}}

.ia{position:relative;z-index:50;flex-shrink:0;padding:1rem 1.5rem;background:rgba(10,10,26,.98);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;align-items:center;gap:1rem}
.id{font-family:inherit;font-size:1.3rem;min-height:2.5rem;min-width:250px;padding:.5rem 1rem;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.15);border-radius:8px;color:var(--text);text-align:center;letter-spacing:2px}
.id .cur{display:inline-block;width:2px;height:1.2em;background:var(--green);animation:bl 1s step-end infinite;vertical-align:text-bottom;margin-left:2px}
@keyframes bl{0%,100%{opacity:1}50%{opacity:0}}
.minp{position:absolute;opacity:0;width:1px;height:1px}
.hint{font-size:.7rem;color:var(--sec);opacity:.5}

/* GAME OVER */
#gameOverScreen{background:rgba(10,10,26,.97);backdrop-filter:blur(10px)}
.go-title{font-size:clamp(2rem,5vw,3.5rem);font-weight:900;color:var(--red);margin-bottom:1rem;text-shadow:0 0 30px rgba(255,68,102,.4)}
.go-score{font-size:clamp(1.5rem,4vw,2.5rem);color:var(--green);margin-bottom:.5rem}
.go-stats{display:flex;gap:2rem;margin-bottom:2rem;flex-wrap:wrap;justify-content:center}
.si{text-align:center}.sv{font-size:1.5rem;font-weight:700;color:var(--blue)}.sl{font-size:.75rem;color:var(--sec)}
.bg{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.btn{padding:.8rem 2rem;font-family:inherit;font-size:.9rem;font-weight:600;border:2px solid;border-radius:8px;cursor:pointer;transition:all .3s;background:transparent}
.btn:hover{transform:translateY(-2px)}
.btn.p{border-color:var(--green);color:var(--green)}.btn.p:hover{background:rgba(0,255,136,.1);box-shadow:0 5px 20px rgba(0,255,136,.2)}
.btn.s{border-color:var(--blue);color:var(--blue)}.btn.s:hover{background:rgba(68,136,255,.1);box-shadow:0 5px 20px rgba(68,136,255,.2)}

#reviewModal{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(10,10,26,.95);backdrop-filter:blur(10px);z-index:200;transition:opacity .4s}
#reviewModal.hidden{opacity:0;pointer-events:none}
.rev-title{font-size:1.5rem;font-weight:700;color:var(--yellow);margin-bottom:1rem}
.rev-list{max-height:50vh;overflow-y:auto;width:90%;max-width:500px;background:var(--panel);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:1rem;margin-bottom:1.5rem}
.rev-item{display:flex;justify-content:space-between;align-items:center;padding:.6rem .8rem;border-bottom:1px solid rgba(255,255,255,.05)}
.rev-item:last-child{border-bottom:none}
.rw{font-weight:600;color:var(--red)}.rt{color:var(--sec);font-size:.9rem}
.rev-empty{color:var(--green);text-align:center;padding:2rem}

::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px}
.bg-grid{position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:40px 40px}
@media(max-width:600px){.hud{padding:.5rem .8rem}.hv{font-size:1rem}.hl{font-size:.55rem}.hi{min-width:60px}.id{min-width:180px;font-size:1rem}.box{padding:1rem}}