@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
:root{--void:#080619;--panel:#11102d;--purple:#28205c;--violet:#7a52d6;--pink:#ff3f9a;--cyan:#4df5dc;--blue:#4b9dff;--gold:#ffe66d;--muted:#9b9ac6;--white:#f8f7ff}*{box-sizing:border-box}html{background:var(--void)}body{margin:0;min-width:320px;background:radial-gradient(circle at 50% -10%,#29205d 0,#100d2a 38%,#080619 78%);color:var(--white);font-family:Arial,sans-serif;overflow-x:hidden}body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.045;background:repeating-linear-gradient(0deg,transparent 0 4px,#fff 5px 6px);mix-blend-mode:screen;z-index:10}.arcade-shell{width:min(1080px,100%);margin:auto;padding:28px 22px 30px}.topbar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:18px}.eyebrow,.hud-label,.mission-line,.hero-caption,.panel-heading small,footer,.control-hint,.mission-badge{font:9px 'Press Start 2P',monospace;letter-spacing:1px}.eyebrow{display:block;color:var(--cyan);margin-bottom:10px}.brand-lockup h1{font:clamp(22px,4vw,42px) 'Press Start 2P',monospace;line-height:1.25;margin:0;color:var(--gold);text-shadow:4px 4px 0 #b62765,7px 7px 0 #190d35}.brand-lockup h1 em{font-style:normal;color:#ff75be}.mission-line{margin:13px 0 0;color:#aca9d8}.mission-line b{color:var(--pink);margin:0 8px}.signal-dot{display:inline-block;width:7px;height:7px;background:var(--cyan);box-shadow:0 0 12px var(--cyan);margin-right:7px}.scorebox{min-width:180px;padding:14px 16px;text-align:right;background:#0e0b28;border:2px solid var(--violet);box-shadow:4px 4px 0 #080519,0 0 18px #603bb955}.hud-label{color:var(--cyan)}.scorebox b{display:block;font:22px 'Press Start 2P',monospace;color:#fff;margin:10px 0 9px;text-shadow:2px 2px #583eac}.scorebox small{font:9px Arial,sans-serif;color:#b7b3e3;white-space:nowrap}.hero-frame{position:relative;width:100%;min-height:690px;overflow:hidden;border:3px solid #5b47a2;background:#0b0923;box-shadow:0 0 0 5px #080619,0 0 0 7px #302465,0 20px 70px #0009}.hero-frame:before,.hero-frame:after{content:'';position:absolute;inset:10px;border:1px solid #4c4192;pointer-events:none;z-index:2}.hero-frame:after{inset:17px;border-color:#242052}.game-wrap{position:absolute;inset:0;z-index:3;width:480px;height:720px;left:50%;top:50%;transform:translate(-50%,-50%);background:transparent;border:0;box-shadow:none}.game-wrap canvas{display:block;width:100%;height:100%;image-rendering:pixelated;opacity:1}.game-wrap:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.08;background:repeating-linear-gradient(0deg,transparent 0 4px,#fff 5px 6px)}.overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;text-align:center;padding:36px 25px 24px;background:linear-gradient(180deg,#090722d9 0%,#130c35aa 52%,#0b0823e6 100%);overflow:hidden}.mission-badge{color:var(--cyan);border:1px solid #348e9b;padding:8px 10px;background:#0b1730cc}.mission-badge span{color:var(--pink);font-size:14px}.title-stack{position:relative;z-index:4;margin-top:20px}.pixel{font-family:'Press Start 2P',monospace}.title-main{font-size:clamp(24px,6vw,38px);line-height:1.35;color:var(--gold);text-shadow:3px 3px 0 #cf2d72,6px 6px 0 #1a0e3e}.title-main span{color:#ff68b4}.subtitle{display:inline-block;margin-top:12px;padding:8px 12px;background:var(--pink);color:#fff;font:10px 'Press Start 2P',monospace;letter-spacing:2px;box-shadow:4px 4px 0 #8c2468}.hero-scene{position:absolute;inset:190px 0 120px}.elone-hero{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%);width:132px;height:132px;animation:float 3.2s ease-in-out infinite;z-index:3}.elone-hero img{position:relative;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 7px #8c6fff)}.hero-aura{position:absolute;inset:18px;border-radius:50%;background:#52f3d022;box-shadow:0 0 40px 18px #5e4dff33}.scene-platform{position:absolute;width:122px;height:48px;z-index:2;filter:drop-shadow(0 0 7px #703ecb)}.scene-platform img{width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.platform-left{left:12px;top:45px;transform:rotate(-8deg)}.platform-right{right:5px;top:130px;transform:rotate(8deg)}.platform-low{left:50%;bottom:12px;transform:translateX(-50%) scale(.9)}.collectible{position:absolute;z-index:4;animation:shimmer 1.7s ease-in-out infinite alternate}.coin-hero{left:23%;top:10%;width:28px;height:28px;border:3px solid var(--gold);border-radius:50%;color:#8b4b23;font:bold 16px Arial;line-height:22px;background:var(--gold);box-shadow:0 0 16px var(--gold)}.crystal-hero{right:20%;top:30%;width:16px;height:28px;background:var(--cyan);clip-path:polygon(50% 0,100% 35%,70% 100%,25% 82%,0 35%);box-shadow:0 0 14px var(--cyan)}.portal{position:absolute;right:10%;bottom:17%;width:90px;height:90px;border:7px solid #a554ff;border-radius:50%;box-shadow:0 0 15px #c04dff,0 0 40px #8a35b866,inset 0 0 18px #ff64fc;z-index:1;animation:portal 4s linear infinite}.portal span{position:absolute;inset:12px;border:3px solid #48d9ff;border-radius:50%;opacity:.7}.portal b{position:absolute;top:100%;left:-18px;white-space:nowrap;font:7px 'Press Start 2P';color:#d49aff}.planet{position:absolute;border-radius:50%;z-index:1;opacity:.8}.planet-left{width:150px;height:150px;left:-46px;top:125px;background:radial-gradient(circle at 35% 30%,#6f68db,#33277c 58%,#17143d);box-shadow:20px 18px 0 -8px #a95dba44}.planet-left span{position:absolute;width:190px;height:20px;left:-22px;top:63px;border:4px solid #6d5de0;border-radius:50%;transform:rotate(-16deg)}.planet-mars{width:105px;height:105px;right:-30px;top:55px;background:radial-gradient(circle at 35% 30%,#ff9a5a,#c44359 65%,#541e57);box-shadow:0 0 28px #ff694c55}.planet-mars i{position:absolute;width:18px;height:9px;border-radius:50%;background:#932e4e;left:22px;top:35px}.planet-mars i:nth-child(2){left:57px;top:65px;width:13px}.planet-mars i:nth-child(3){left:42px;top:18px}.meteor{position:absolute;width:55px;height:4px;background:linear-gradient(90deg,transparent,var(--pink));transform:rotate(-35deg);opacity:.7}.meteor-a{top:24%;left:15%}.meteor-b{top:42%;right:13%;transform:rotate(145deg);background:linear-gradient(90deg,transparent,var(--cyan))}.tagline{position:absolute;bottom:84px;margin:0;color:#cecaee;font:10px 'Press Start 2P';letter-spacing:1px}.tagline span{color:var(--cyan)}.start-button{position:absolute;bottom:30px;padding:17px 24px;background:var(--pink);color:#fff;border:3px solid #ff9ccf;box-shadow:6px 6px 0 #7e235e,0 0 22px #ff3f9a88;font:11px 'Press Start 2P',monospace;transition:transform .15s,filter .15s}.start-button span{color:var(--gold);margin-right:5px}.start-button:hover{transform:translateY(-3px) scale(1.04);filter:brightness(1.15)}.start-button:active{transform:translate(4px,4px);box-shadow:2px 2px 0 #7e235e}.control-hint{position:absolute;bottom:8px;color:#8d8ab8;font-size:7px}.control-hint span{color:var(--cyan)}.control-hint b{color:var(--pink);margin:0 5px}.hero-caption{position:absolute;z-index:4;bottom:12px;left:28px;right:28px;display:flex;justify-content:space-between;color:#7673ac;font-size:7px}.hero-caption b{color:var(--cyan)}.lower-deck{display:grid;grid-template-columns:1.35fr 1fr;gap:18px;width:100%;margin-top:24px}.board-panel{background:linear-gradient(135deg,#17143b,#0e0c28);border:2px solid #403477;padding:18px 20px;box-shadow:5px 5px 0 #070518}.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #393064;padding-bottom:12px;margin-bottom:5px}.panel-heading h2{margin:0;color:var(--gold);font:12px 'Press Start 2P';letter-spacing:1px}.panel-heading h2 span{color:var(--pink);margin-right:7px}.panel-heading small{color:#68659a;font-size:7px}.leaderboard ol{list-style:none;margin:0;padding:0;counter-reset:rank}.leaderboard li{display:grid;grid-template-columns:34px 1fr auto;gap:10px;padding:11px 4px;border-bottom:1px solid #27234d;color:#dbd9f4;font:10px 'Press Start 2P';counter-increment:rank}.leaderboard li:before{content:counter(rank,decimal-leading-zero);color:var(--pink)}.leaderboard li span{color:var(--cyan);text-align:right}.leaderboard li small{display:block;margin-top:5px;color:#7774a8;font:8px Arial,sans-serif}.leaderboard li.leader-status{grid-template-columns:1fr auto;color:#8d8ab8;font-size:8px}.leaderboard ol[data-state="live"]:after{content:'LIVE';display:block;margin-top:10px;color:var(--cyan);font:7px 'Press Start 2P';text-align:right}.leaderboard ol[data-state="error"]:after{content:'CHECK /api/health';display:block;margin-top:10px;color:var(--pink);font:7px 'Press Start 2P';text-align:right}.briefing p{color:#aaa8cf;font-size:13px;line-height:1.65;margin:18px 0}.brief-stats{display:flex;gap:14px;flex-wrap:wrap;color:#7f7cad;font:8px 'Press Start 2P'}.brief-stats b{display:block;color:var(--cyan);font-size:18px;margin-bottom:8px}.mobile-controls{display:none;justify-content:center;gap:25px;padding:20px}.mobile-controls button{width:100px;height:58px;background:#302566;color:#fff;border:2px solid var(--violet);font:20px 'Press Start 2P';box-shadow:4px 4px #0c0820}footer{display:flex;align-items:center;justify-content:center;gap:14px;padding:24px 0 0;color:#68659b;font-size:7px}footer b{color:#9b98c5;font-weight:normal}footer i{height:1px;width:45px;background:#393265}@keyframes float{0%,100%{transform:translate(-50%,-50%)}50%{transform:translate(-50%,-56%)}}@keyframes shimmer{from{transform:scale(.9);filter:brightness(.85)}to{transform:scale(1.1);filter:brightness(1.3)}}@keyframes portal{to{transform:rotate(360deg)}}@media(max-width:700px){.arcade-shell{padding:18px 10px 24px}.topbar{align-items:flex-start}.eyebrow{font-size:7px}.brand-lockup h1{font-size:18px}.mission-line{font-size:7px}.scorebox{min-width:125px;padding:10px 8px}.scorebox b{font-size:14px}.scorebox small{font-size:7px}.hero-frame{min-height:650px}.game-wrap{transform:translate(-50%,-50%) scale(.88);transform-origin:center}.hero-caption{left:18px;right:18px;font-size:6px}.hero-caption b{display:none}.lower-deck{grid-template-columns:1fr;gap:12px}.briefing{display:none}.mobile-controls{display:flex}.mobile-controls button{font-size:16px}footer{font-size:6px;gap:7px;flex-wrap:wrap}footer i{width:20px}}@media(max-width:430px){.topbar{gap:8px}.brand-lockup h1{font-size:15px}.scorebox{min-width:108px}.scorebox b{font-size:11px}.scorebox small{font-size:6px}.hero-frame{min-height:590px}.game-wrap{transform:translate(-50%,-50%) scale(.77)}.hero-caption{font-size:5px}.title-main{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.game-wrap canvas{touch-action:none;-webkit-user-select:none;user-select:none}.touch-hint{display:none;position:absolute;bottom:54px;color:#8d8ab8;font:7px 'Press Start 2P',monospace;letter-spacing:.5px;pointer-events:none;animation:touchHintFade 4s ease-in forwards}.is-playing .lower-deck{display:none}@keyframes touchHintFade{0%,65%{opacity:.8}100%{opacity:0}}@media(max-width:700px){.touch-hint{display:block}.lower-deck{transition:none}}
.how-to-play{position:absolute;z-index:6;top:148px;left:50%;width:min(440px,calc(100% - 28px));transform:translateX(-50%);color:#d9d5f5;background:#0d0a28e8;border:1px solid #4df5dc88;box-shadow:3px 3px 0 #080519,0 0 18px #4df5dc22;text-align:left;font-family:'Press Start 2P',monospace}.how-to-play summary{padding:9px 11px;color:var(--cyan);font-size:8px;letter-spacing:.5px;cursor:pointer;list-style:none;outline:none}.how-to-play summary::-webkit-details-marker{display:none}.how-to-play summary span{float:right;color:var(--pink);transition:transform .2s}.how-to-play[open] summary{border-bottom:1px solid #393064}.how-to-play[open] summary span{transform:rotate(180deg)}.how-to-content{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 12px;max-height:315px;overflow:auto;background:linear-gradient(180deg,#17143b99,#0b0823cc)}.how-to-column{min-width:0}.how-to-content section{margin:0 0 9px}.how-to-content section:last-child{margin-bottom:0}.how-to-content h3{margin:0 0 4px;color:var(--pink);font-size:7px;line-height:1.45}.how-to-content p{margin:0;color:#aaa8cf;font:10px/1.45 Arial,sans-serif}.how-to-content b{color:var(--cyan);font-weight:normal}.how-to-content strong{color:var(--gold)}@media(max-width:700px){.how-to-play{top:142px;width:calc(100% - 24px)}.how-to-content{grid-template-columns:1fr;gap:0;max-height:285px;padding:9px 10px}.how-to-content section{margin-bottom:8px}.how-to-content p{font-size:9px;line-height:1.4}.how-to-content h3{font-size:6px}.how-to-play summary{font-size:7px;padding:8px 9px}}
.contract-copy{display:inline-flex;align-items:center;gap:7px;margin:0;padding:0;border:0;background:transparent;color:var(--cyan);font:inherit;letter-spacing:inherit;line-height:1.5;cursor:pointer;text-align:left;box-shadow:none;transition:color .15s,text-shadow .15s,transform .15s;max-width:100%;vertical-align:middle}.contract-copy:hover,.contract-copy:focus-visible{color:#fff;text-shadow:0 0 8px var(--cyan);transform:translateY(-1px);outline:none}.contract-copy .signal-dot{flex:0 0 auto}.contract-label{min-width:0;overflow-wrap:anywhere;word-break:break-word}.contract-copy.is-copied{color:var(--gold);text-shadow:0 0 8px var(--gold)}.score-form{display:none;position:absolute;z-index:6;bottom:82px;width:min(330px,calc(100% - 34px));padding:12px;background:#0b0823ee;border:2px solid var(--violet);box-shadow:4px 4px #080519;color:var(--cyan);font:7px 'Press Start 2P',monospace;text-align:left}.score-form.is-visible{display:grid;gap:8px}.score-form label{display:grid;gap:5px}.score-form small{color:#8d8ab8;font-size:6px}.score-form input{width:100%;min-width:0;padding:8px;border:1px solid #5b47a2;background:#171532;color:#fff;font:10px Arial,sans-serif;outline:none}.score-form input:focus{border-color:var(--cyan);box-shadow:0 0 8px #4df5dc66}.score-form button{padding:9px;border:2px solid #ff9ccf;background:var(--pink);color:#fff;cursor:pointer;font:8px 'Press Start 2P',monospace}.score-form button:disabled{opacity:.6;cursor:wait}.score-form span{min-height:10px;color:var(--gold);font-size:6px}.audio-toggle{position:absolute;right:14px;bottom:10px;z-index:5;padding:6px 8px;border:1px solid var(--violet);background:#11102dcc;color:var(--cyan);cursor:pointer;font:7px 'Press Start 2P',monospace}@media(max-width:700px){.mission-line{display:flex;align-items:flex-start;gap:5px;flex-wrap:wrap;line-height:1.7}.contract-copy{font-size:clamp(5px,1.55vw,8px);flex:1 1 100%;max-width:100%}.mission-line>b{display:none}.mission-line>#status{font-size:7px}.score-form{bottom:76px;width:calc(100% - 24px)}.audio-toggle{right:8px;bottom:8px}}
/* HOW TO PLAY stays subordinate to the hero composition and opens upward. */
.how-to-play{top:auto;left:12px;bottom:54px;transform:none;width:170px}
.how-to-play[open]{width:390px;max-width:calc(100% - 24px)}
.how-to-content{position:absolute;left:-1px;bottom:100%;width:100%;max-height:300px;overflow-y:auto;border:1px solid #4df5dc88;border-bottom:0}
@media(max-width:700px){.how-to-play{top:auto;left:12px;bottom:58px;width:174px}.how-to-play[open]{width:calc(100vw - 36px);max-width:390px}.how-to-content{max-height:245px}}
@media(max-width:430px){.how-to-play{left:10px;bottom:58px;width:165px}.how-to-play[open]{width:calc(100vw - 28px)}}
/* Final CTA composition: a small HOW TO PLAY bar directly above START GAME. */
.control-hint,.touch-hint{display:none}
.how-to-play{left:50%;bottom:105px;width:154px;transform:translateX(-50%);background:#0d0a28ee;box-shadow:2px 2px 0 #080519,0 0 12px #4df5dc1c}
.how-to-play summary{padding:7px 9px;font-size:7px;white-space:nowrap}
.how-to-play[open]{width:360px;max-width:calc(100% - 28px)}
.how-to-content{max-height:250px;padding:8px 10px}
@media(max-width:700px){.how-to-play{left:50%;bottom:103px;width:154px}.how-to-play[open]{width:calc(100vw - 30px);max-width:360px}.how-to-content{max-height:220px}}
@media(max-width:430px){.how-to-play{left:50%;bottom:101px;width:150px}.how-to-play[open]{width:calc(100vw - 26px)}}