:root{color-scheme:dark;--bg:#080a15;--panel:#111525;--muted:#969cb7;--line:#272c44;--purple:#a68bff;--cyan:#6ff4e5;--white:#f5f5ff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}.shell{width:min(1180px,calc(100% - 48px));margin:auto}.ambient{position:absolute;pointer-events:none;z-index:-1;filter:blur(85px);opacity:.22;border-radius:50%}.ambient-a{width:480px;height:480px;background:#5338c4;top:10px;right:-120px}.ambient-b{width:330px;height:330px;background:#086b80;top:640px;left:-150px}.topbar{height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff14}.brand{display:flex;gap:12px;align-items:center;font-size:19px;font-weight:900;letter-spacing:.03em;line-height:1}.brand-symbol{font-size:35px;color:var(--purple)}.brand-accent{color:var(--purple)}.brand small{display:block;font-size:9px;letter-spacing:.33em;color:var(--muted);margin-top:6px}.topbar nav{display:flex;gap:34px;font-size:12px;color:#b8bad2;font-weight:700}.topbar nav a:hover{color:white}.live{font-size:10px;letter-spacing:.12em;color:#b5bad1;display:flex;gap:10px;align-items:center}.live-dot,.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#6be7b2;box-shadow:0 0 12px #6be7b2}.version{border:1px solid #41475f;padding:5px 7px;color:#c9c9e0}.hero{min-height:520px;display:grid;grid-template-columns:1.18fr .82fr;align-items:center;position:relative}.eyebrow,.kicker,.card-kicker{font-size:11px;letter-spacing:.22em;font-weight:800;color:var(--purple)}.sparkle{font-size:17px}.divider-dot{color:#4c506a;margin:0 8px}.hero h1{font-size:clamp(43px,5.4vw,76px);line-height:1.05;letter-spacing:-.065em;margin:25px 0 20px;font-weight:950}.hero h1 span,h2 span,.info-card h3 span,.score-card h3 span,.feedback-section h2 span,.game-overlay h3 span{color:var(--purple)}.hero p{color:#a9aec8;line-height:1.75;max-width:520px;font-size:15px}.hero-actions{display:flex;gap:26px;align-items:center;margin-top:30px}.primary-btn{background:var(--purple);color:#111126;padding:16px 22px;display:inline-flex;justify-content:space-between;align-items:center;gap:28px;border:0;border-radius:7px;font-weight:900;font-size:12px;letter-spacing:.05em;box-shadow:0 8px 30px #a68bff26}.primary-btn:hover{background:#c0b0ff}.primary-btn span{font-size:18px}.text-link{font-size:12px;color:#c8cbe1;font-weight:700}.text-link span{color:var(--purple)}.hero-meta{display:flex;gap:32px;margin-top:50px;font-size:9px;letter-spacing:.08em;color:#8b90ac}.hero-meta b{font-size:14px;color:#f5f5ff;margin-right:6px}.hero-art{position:relative;height:430px;display:grid;place-items:center}.orbit{border:1px solid #8d7bd04d;border-radius:50%;position:absolute;transform:rotate(-26deg)}.orbit-1{width:210px;height:210px}.orbit-2{width:310px;height:310px;border-style:dashed;animation:spin 65s linear infinite}.orbit-3{width:410px;height:410px;border-color:#4b426e4d}.hero-art:before{content:'';position:absolute;width:270px;height:270px;border-radius:50%;background:#6d55d9;filter:blur(90px);opacity:.25}.hero-ship{width:95px;height:120px;position:relative;filter:drop-shadow(0 0 40px #9b8fff88);transform:rotate(0)}.hero-ship:before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,#f5edff,#a78dff 60%,#6959bb);clip-path:polygon(50% 0,100% 100%,50% 77%,0 100%)}.hero-ship span{position:absolute;top:36%;left:42%;width:16%;height:33%;background:#15112e;clip-path:polygon(50% 0,100% 100%,0 100%)}.art-cross{position:absolute;color:var(--cyan);font-size:28px}.cross-a{top:60px;right:70px}.cross-b{bottom:75px;left:50px}.art-label{position:absolute;bottom:28px;right:10px;font-size:10px;letter-spacing:.25em;color:#777f9e}@keyframes spin{to{transform:rotate(334deg)}}.game-section,.ranking-section{padding-top:45px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:26px;gap:20px}.section-heading h2,.feedback-section h2{font-size:clamp(32px,4.2vw,51px);letter-spacing:-.05em;line-height:1.1;margin:10px 0}.section-heading p,.feedback-section p{color:#a2a8c2;font-size:14px;line-height:1.7;margin:8px 0}.game-status{border:1px solid #2d4d46;background:#12241f;color:#8ff0c2;padding:10px 12px;border-radius:5px;font-size:10px;font-weight:800;letter-spacing:.1em;white-space:nowrap}.game-status .status-dot{margin-right:6px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:20px}.game-frame{background:#0d1020;border:1px solid #333650;border-radius:11px;overflow:hidden;box-shadow:0 30px 70px #0005}.frame-top,.frame-bottom{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;font-size:10px;letter-spacing:.15em;color:#9297b5;background:#14182a;border-bottom:1px solid #333650}.frame-bottom{border-top:1px solid #333650;border-bottom:0}.red-dot{display:inline-block;background:#ff6a84;width:7px;height:7px;border-radius:50%;margin-right:7px}.frame-star{color:var(--purple);margin-left:8px}.game-hud{display:flex;justify-content:space-between;align-items:center;padding:17px 23px;background:#0c1020}.game-hud small{display:block;color:#7e88a9;font-size:9px;letter-spacing:.16em;margin-bottom:3px}.game-hud strong{font-size:27px;letter-spacing:.07em;font-variant-numeric:tabular-nums}.hud-right{text-align:right}.hud-center{font-size:11px;color:var(--cyan);letter-spacing:.1em}.canvas-wrap{position:relative;aspect-ratio:800/460;background:#090d1d;overflow:hidden;touch-action:none}canvas{width:100%;height:100%;display:block}.game-overlay{position:absolute;inset:0;background:#090c1ac9;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:18px;backdrop-filter:blur(3px)}.game-overlay.hidden{display:none}.overlay-icon{font-size:39px;color:var(--purple);margin-bottom:10px}.overlay-eyebrow{font-size:10px;letter-spacing:.24em;color:var(--cyan);font-weight:800}.game-overlay h3{font-size:clamp(25px,3.4vw,45px);letter-spacing:-.05em;line-height:1.05;margin:12px 0}.game-overlay p{color:#a5acc7;font-size:12px;margin:0 0 24px;max-width:300px}.info-card,.score-card{background:#15192b;border:1px solid #30364e;border-radius:10px;padding:26px}.info-card h3,.score-card h3{font-size:29px;line-height:1.12;letter-spacing:-.04em;margin:20px 0 27px}.control{display:flex;align-items:center;gap:15px;margin-bottom:20px}.keys{min-width:84px;display:flex;gap:5px}.keys kbd,.touch-icon{background:#272d44;border:1px solid #424966;border-bottom:3px solid #424966;border-radius:5px;min-width:34px;text-align:center;padding:9px 7px;font-size:15px}.control strong{display:block;font-size:11px;letter-spacing:.05em}.control small{display:block;color:#9098b3;font-size:11px;margin-top:4px}.side-divider{border-top:1px solid #353a50;margin:23px 0}.info-card p,.score-card p{font-size:12px;color:#a4acc4;line-height:1.8}.tip-card{margin-top:17px;padding:23px;background:#1d1833;border:1px solid #42375f;border-radius:10px}.tip-card span{color:#bca7ff;font-size:10px;font-weight:800;letter-spacing:.15em}.tip-card p{color:#b9b3d2;font-size:12px;line-height:1.7;margin-bottom:0}.mobile-controls{display:flex;justify-content:center;gap:12px;margin-top:15px}.mobile-controls button{background:#1a2036;color:white;border:1px solid #414962;border-radius:8px;padding:12px 24px;min-width:75px;font-weight:800;touch-action:none}.ranking-section{padding-top:110px}.outline-btn{background:transparent;border:1px solid #494c67;color:#c5c7e0;border-radius:6px;padding:12px 17px;font-size:11px;font-weight:800}.outline-btn:hover{border-color:var(--purple)}.ranking-grid{display:grid;grid-template-columns:minmax(0,1fr) 355px;gap:20px}.leaderboard{background:#121626;border:1px solid #2e344b;border-radius:10px;overflow:hidden;min-height:330px}.table-head{display:flex;justify-content:space-between;padding:19px 24px;background:#1a1f32;color:#959cb9;font-size:10px;letter-spacing:.13em;font-weight:800}.score-list{margin:0;padding:0;list-style:none}.score-list li{display:flex;align-items:center;justify-content:space-between;padding:19px 24px;border-top:1px solid #272c40;font-size:13px}.score-list li .place{color:#a28bff;font-weight:900;width:45px}.score-list li .player-name{flex:1;font-weight:700;overflow-wrap:anywhere}.score-list li .points{font-weight:900;font-variant-numeric:tabular-nums}.score-list li.empty{color:#9aa2bd;font-weight:400}.score-card h3{margin:14px 0}.score-card label,.feedback-form label{display:block;font-size:10px;letter-spacing:.14em;color:#b3b9d0;font-weight:800;margin:18px 0 8px}.score-card input,.feedback-form input,.feedback-form textarea{width:100%;background:#0d1121;border:1px solid #3c425e;border-radius:6px;color:#fff;padding:13px 14px;outline:none}.score-card input:focus,.feedback-form input:focus,.feedback-form textarea:focus{border-color:var(--purple)}.score-card input[readonly]{color:#c7b8ff}.full{width:100%;margin-top:22px}.form-status{min-height:1.2em}.form-status.error{color:#ff9ba7}.disclaimer{font-size:10px!important;color:#7d85a2!important}.feedback-section{margin:110px 0 100px;display:grid;grid-template-columns:1fr 1fr;gap:80px;background:linear-gradient(120deg,#19152d,#101827);border:1px solid #34314e;border-radius:14px;padding:55px}.feedback-section h2{font-size:clamp(35px,4.4vw,57px);margin-top:24px}.feedback-section>div>p{max-width:320px}.feedback-tag{margin-top:50px;color:#a995e9;font-size:10px;letter-spacing:.14em}.feedback-form textarea{resize:vertical;min-height:105px}.honeypot{position:absolute;left:-9999px;opacity:0;pointer-events:none}.footer{border-top:1px solid #272c43;padding:28px 0 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;color:#7d849f;font-size:10px;letter-spacing:.13em}.footer-brand{color:#ddd9ff;font-weight:900;font-size:13px}.footer-brand span{color:#8b8fa9;font-size:9px;margin-left:8px}@media(max-width:900px){.hero{grid-template-columns:1fr .6fr}.hero-art{transform:scale(.75)}.game-layout,.ranking-grid{grid-template-columns:1fr}.game-sidebar{display:grid;grid-template-columns:1fr 1fr;gap:16px}.tip-card{margin-top:0}.feedback-section{gap:35px;padding:35px}}@media(max-width:640px){.shell{width:min(100% - 28px,1180px)}.topbar{height:75px}.topbar nav{gap:12px;font-size:11px}.live{display:none}.brand{font-size:14px;gap:7px}.brand-symbol{font-size:25px}.brand small{font-size:7px}.hero{grid-template-columns:1fr;min-height:unset;padding:70px 0 35px}.hero-art{height:230px;transform:scale(.58);margin-top:-20px;margin-bottom:-40px}.hero h1{font-size:clamp(40px,10vw,65px)}.hero-meta{gap:15px;flex-wrap:wrap;margin-top:35px}.game-section{padding-top:25px}.section-heading{align-items:start}.game-status{display:none}.game-hud{padding:12px}.game-hud strong{font-size:20px}.game-hud small{font-size:8px}.hud-center{font-size:9px}.frame-top,.frame-bottom{padding:11px;font-size:8px}.game-sidebar{grid-template-columns:1fr}.info-card h3{margin-bottom:16px}.game-overlay h3{font-size:25px}.game-overlay .overlay-icon{display:none}.game-overlay p{font-size:11px;margin-bottom:10px}.game-overlay .primary-btn{padding:11px 14px}.ranking-section{padding-top:70px}.feedback-section{margin:70px 0;grid-template-columns:1fr;padding:25px}.feedback-tag{margin-top:20px}.footer{flex-wrap:wrap;font-size:9px}}

/* El formulario de ranking aparece sobre el juego al perder */
.game-overlay:has(.overlay-score-form){overflow-y:auto;justify-content:center;padding:12px 18px;gap:5px;background:rgba(8,12,28,.95)}
.game-overlay .overlay-score-form{width:min(330px,100%);display:grid;gap:5px;margin:6px auto 4px;text-align:left}
.game-overlay .overlay-score-form label{font-size:10px;letter-spacing:.12em}
.game-overlay .overlay-score-form input{min-height:34px;padding:7px 10px}
.game-overlay .overlay-score-form #score{display:none}
.game-overlay .overlay-score-form label[for=score]{display:none}
.game-overlay .overlay-score-form button{min-height:38px;padding:9px}
.game-overlay:has(.overlay-score-form) #overlay-title{font-size:clamp(22px,4vw,39px);margin:2px}
.game-overlay:has(.overlay-score-form) #overlay-desc{font-size:12px;margin:2px}
.game-overlay:has(.overlay-score-form) #start-btn{padding:9px 18px;min-height:35px;font-size:11px}
