:root{--navy:#020817;--cyan:#00f5ff;--pink:#ff3cac;--lime:#9dff00;--yellow:#ffe600}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--navy);color:#fff}body{font-family:Arial,Helvetica,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid var(--yellow);outline-offset:4px}
#app{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(circle at 50% 20%,#102d69 0,#061331 38%,#020817 78%)}
.stars{position:fixed;inset:0;pointer-events:none;opacity:.65;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#00f5ff 1px,transparent 1px);background-size:41px 41px,67px 67px;background-position:0 0,19px 13px;mask-image:linear-gradient(#000,transparent 92%)}
.screen{position:relative;z-index:1;min-height:100svh;display:none}.screen.active{display:flex}.loading-screen,.home-screen,.ranking-screen{flex-direction:column;align-items:center;justify-content:center;padding:28px;text-align:center}
.loading-screen p{color:#8cc8e8;letter-spacing:.14em;font-size:.78rem;text-transform:uppercase}.loader-logo{font-size:clamp(2rem,6vw,4rem);font-weight:1000;font-style:italic;letter-spacing:-.04em;text-shadow:0 0 8px #fff,0 0 24px var(--cyan),0 0 50px #147eff}
.loader-track{width:min(360px,78vw);height:8px;border:1px solid #227098;border-radius:9px;margin-top:36px;overflow:hidden;box-shadow:0 0 12px #00f5ff66}.loader-track span{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink));animation:load 1.3s ease forwards;box-shadow:0 0 14px var(--cyan)}@keyframes load{from{width:0}to{width:100%}}
.top-actions{position:absolute;top:24px;right:26px;display:flex;gap:12px}.icon-button{border:1px solid #2f7ea3;color:var(--cyan);background:#061631cc;width:48px;height:48px;border-radius:50%;font-size:1.45rem;font-weight:900;box-shadow:inset 0 0 12px #00f5ff19,0 0 13px #00f5ff22;transition:.2s}.icon-button:hover{transform:translateY(-2px);color:#fff;border-color:var(--cyan);box-shadow:0 0 18px #00f5ff66}.icon-button.small{width:42px;height:42px;font-size:1.15rem}
.eyebrow{color:#7dc8e8;letter-spacing:.4em;text-transform:uppercase;font-size:.72rem;font-weight:800;margin:0 0 20px}.neon-title{margin:0;line-height:.76;font-size:clamp(4rem,12vw,9rem);font-weight:1000;letter-spacing:-.075em;font-style:italic;transform:skew(-4deg)}.neon-title span{display:block;color:#fff;-webkit-text-stroke:2px #fff;text-shadow:0 0 5px #fff,0 0 14px var(--cyan),0 0 32px #087eff,0 0 70px #0748ff}.neon-title span+span{color:#ffdafa;-webkit-text-stroke-color:#fff;margin-top:.11em;text-shadow:0 0 5px #fff,0 0 14px var(--pink),0 0 34px var(--pink),0 0 72px #b300ff}
.home-intro{width:min(650px,88vw);color:#b9d7eb;font-size:clamp(.95rem,2vw,1.15rem);line-height:1.6;margin:38px auto 24px}.play-button,.mini-button{border:1px solid #a7ffff;border-radius:14px;color:#031022;background:linear-gradient(180deg,#e8ffff,var(--cyan));padding:16px 38px;font-weight:1000;letter-spacing:.1em;box-shadow:0 0 10px #fff,0 0 26px var(--cyan),inset 0 -5px 10px #0088a0;transition:.2s}.play-button{font-size:1.15rem;transform:skew(-4deg)}.play-button:hover,.mini-button:hover:not(:disabled){transform:translateY(-3px) scale(1.02);box-shadow:0 0 12px #fff,0 0 40px var(--cyan)}.play-button.compact{margin-top:24px;padding:12px 28px}.mini-button{padding:12px 22px;font-size:.82rem}.mini-button.secondary{color:#fff;background:#13264a;border-color:#446792;box-shadow:none}.mini-button:disabled{opacity:.4;cursor:not-allowed}
.home-bottom{position:absolute;bottom:30px;left:34px;right:34px;display:flex;align-items:flex-end;gap:14px}.info-card{max-width:360px;text-align:left;color:#8eb4d0;background:#06142caa;border-left:3px solid var(--cyan);padding:13px 16px;font-size:.8rem;line-height:1.45}.info-card strong{color:#fff;text-transform:uppercase;letter-spacing:.1em}.text-button,.back-button{border:0;color:var(--cyan);background:transparent;font-size:.72rem;font-weight:900;letter-spacing:.13em;padding:12px}.text-button:first-of-type{margin-left:auto}.text-button.pink{color:#ff7bc8}
.game-screen{flex-direction:column;padding:14px clamp(10px,3vw,34px) 12px}.game-header{display:grid;grid-template-columns:1fr auto auto auto;gap:clamp(14px,3vw,42px);align-items:center;width:min(1100px,100%);margin:0 auto 12px}.game-actions{display:flex;gap:9px}.stat{display:flex;flex-direction:column;text-align:center;min-width:80px}.stat span{color:#6e9dbc;font-size:.62rem;letter-spacing:.2em;font-weight:800}.stat strong{font-size:1.25rem;text-shadow:0 0 12px var(--cyan)}.lives{color:var(--pink);display:flex;gap:8px;font-size:1.4rem;text-shadow:0 0 12px var(--pink)}.lives .lost{color:#243754;text-shadow:none}
.canvas-wrap{position:relative;width:min(1100px,calc((100svh - 105px) * 1.5),100%);margin:auto;border:1px solid #176b97;border-radius:12px;overflow:hidden;box-shadow:0 0 25px #00f5ff22,inset 0 0 30px #00f5ff11;touch-action:none}canvas{display:block;width:100%;aspect-ratio:3/2}.game-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:18px;background:#020817d9;backdrop-filter:blur(4px)}.game-overlay h2{margin:0 0 14px;font-size:clamp(1.8rem,5vw,4rem);font-style:italic;text-shadow:0 0 10px #fff,0 0 28px var(--pink)}.game-overlay p{color:#b9d7eb}.name-field{display:flex;flex-direction:column;gap:7px;color:#9fc8df;font-size:.72rem;font-weight:bold;letter-spacing:.1em;text-transform:uppercase}.name-field input{width:min(270px,75vw);color:#fff;background:#061631;border:1px solid #2c7198;border-radius:8px;padding:11px 13px;text-align:center;text-transform:none}.overlay-buttons{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center}.controls-hint{margin:8px auto 0;color:#698ca8;font-size:.7rem;text-align:center}
.ranking-screen{justify-content:flex-start;padding-top:7vh}.back-button{position:absolute;top:24px;left:24px}.board-title{margin:0 0 24px;font-size:clamp(3rem,8vw,6rem);line-height:1;font-style:italic;letter-spacing:-.06em;text-shadow:0 0 8px #fff,0 0 25px var(--pink)}.score-board{width:min(620px,92vw);display:flex;flex-direction:column;gap:7px}.score-row{display:grid;grid-template-columns:50px 1fr 80px 110px;align-items:center;text-align:left;color:#aed0e4;background:#071833dc;border:1px solid #173e61;border-radius:10px;padding:10px 14px}.score-row .rank{color:#527b9a;font-weight:1000;font-style:italic;font-size:1.15rem}.score-row b{color:var(--cyan);text-align:right}.rank-1{border-color:#ffe60088;box-shadow:0 0 18px #ffe60022}.rank-1 .rank,.rank-1 b{color:var(--yellow)}.rank-2 .rank{color:#d8ecf6}.rank-3 .rank{color:#ff9c66}.empty-score{color:#8db5cc;border:1px dashed #2c5674;border-radius:12px;padding:30px;line-height:1.6}
.modal-backdrop{position:fixed;z-index:5;inset:0;display:grid;place-items:center;padding:16px;background:#01050ddd;backdrop-filter:blur(8px)}.modal{position:relative;width:min(620px,96vw);max-height:94svh;overflow:auto;background:linear-gradient(145deg,#0b2048,#041025);border:1px solid #2781a9;border-radius:20px;padding:32px;box-shadow:0 0 45px #00f5ff33;text-align:center}.modal h2{margin:0 0 22px;font-size:clamp(1.7rem,4vw,2.7rem);font-style:italic;text-shadow:0 0 16px var(--cyan)}.modal ol{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:11px;text-align:left}.modal li{display:flex;gap:14px;align-items:flex-start;padding:10px;background:#06152d;border-radius:10px}.modal li>span{flex:0 0 34px;height:34px;display:grid;place-items:center;color:#02101f;background:var(--cyan);border-radius:50%;font-weight:1000;box-shadow:0 0 12px var(--cyan)}.modal li p{color:#87abc3;margin:4px 0 0;font-size:.86rem;line-height:1.4}.close{position:absolute;right:15px;top:10px;border:0;background:transparent;color:#75a4c0;font-size:2rem}.hidden{display:none!important}
@media(max-width:700px){.home-screen{justify-content:flex-start;padding-top:15vh}.home-bottom{position:static;width:100%;margin-top:38px;flex-wrap:wrap;justify-content:center}.info-card{max-width:100%;width:100%}.text-button:first-of-type{margin-left:0}.game-header{grid-template-columns:1fr auto auto;gap:8px}.game-actions{grid-column:1/-1;justify-content:center;order:2}.canvas-wrap{width:100%}.controls-hint{display:none}.score-row{grid-template-columns:36px 1fr 55px 80px;padding:9px;font-size:.78rem}}
@media(max-height:650px) and (orientation:landscape){.game-header{margin-bottom:5px}.icon-button.small{width:34px;height:34px;font-size:.9rem}.canvas-wrap{width:min(900px,calc((100svh - 58px) * 1.5))}.controls-hint{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important}}