:root{--bg: #060b1a;--panel: rgba(10, 18, 36, .74);--cyan: #22d3ee;--teal: #2dd4bf;--lime: #4ade80;--red: #ef4444;--violet: #a855f7;--text: #e8f4ff;--muted: #93a9c7;--border: rgba(148, 197, 255, .16);--radius: 20px;--font-ar: "Cairo", system-ui, -apple-system, sans-serif;--font-display: "Orbitron", "Cairo", system-ui, sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;padding:0}body{background:radial-gradient(120% 90% at 50% 0%,#131f3d,#080e20 45%,#04060f);color:var(--text);font-family:var(--font-ar);overflow:hidden;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}.app{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden}.viewport{position:absolute;top:0;right:0;bottom:0;left:0}.viewport canvas{display:block;width:100%!important;height:100%!important;touch-action:none;cursor:grab}.viewport canvas:active{cursor:grabbing}.vignette{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,#0000 45%,#0409126b);z-index:5}.scanlines{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:6;opacity:.1;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.14) 0 1px,transparent 1px 3px);mix-blend-mode:overlay}.screen{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:clamp(16px,4vw,40px);background:radial-gradient(80% 60% at 50% 10%,rgba(34,211,238,.1),transparent 70%),#060c1842;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);animation:fadeIn .45s ease both}.screen.dim{background:#050b1680}.panel{position:relative;width:min(620px,100%);max-height:92vh;overflow-y:auto;padding:clamp(22px,3.4vw,40px);border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(160deg,#162442f2,#080e1ef2);box-shadow:0 30px 80px #0000008c,inset 0 1px #ffffff0f;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both;text-align:center}.panel.small{width:min(440px,100%)}.panel:before{content:"";position:absolute;inset-inline:12%;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);opacity:.85}.badge{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;border:1px solid rgba(34,211,238,.3);background:#22d3ee17;color:#a5f3fc;font-size:.78rem;letter-spacing:.02em}.title{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,4.2rem);line-height:1.05;margin:18px 0 6px;letter-spacing:-.01em;background:linear-gradient(180deg,#fff 10%,#8be9fd,#2dd4bf);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 6px 24px rgba(34,211,238,.35))}.title span{background:linear-gradient(180deg,#fef9c3,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{margin:0;font-family:var(--font-display);font-size:.72rem;letter-spacing:.42em;color:#93c5fdb8}.lead{margin:18px auto 22px;max-width:46ch;color:var(--muted);font-size:clamp(.95rem,1.5vw,1.02rem);line-height:1.85}.keys{display:grid;gap:8px;margin:0 auto 26px;padding:16px;border-radius:14px;border:1px solid var(--border);background:#ffffff06}.key-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.9rem;color:#c7daf2}.key-row span{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.86rem}.keycaps{display:inline-flex;gap:5px}kbd{font-family:var(--font-display);font-size:.72rem;min-width:30px;padding:6px 9px;border-radius:8px;border:1px solid rgba(148,197,255,.28);border-bottom-width:2px;background:linear-gradient(180deg,#1e3052f2,#0e172af2);color:#dbeafe;box-shadow:0 2px #0006}.actions{display:flex;gap:10px;justify-content:center;align-items:center}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-ar);font-weight:700;font-size:1rem;padding:14px 30px;border-radius:14px;border:1px solid transparent;cursor:pointer;transition:transform .2s ease,box-shadow .25s ease,background .25s ease,border-color .2s ease}.btn.primary{color:#04121a;background:linear-gradient(135deg,#67e8f9,#2dd4bf 55%,#4ade80);box-shadow:0 12px 34px #2dd4bf52,inset 0 1px #ffffff73}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px #2dd4bf73,inset 0 1px #ffffff80}.btn.ghost{padding:14px;color:var(--text);background:#ffffff0d;border-color:var(--border)}.btn.ghost:hover{transform:translateY(-2px);background:#ffffff17;border-color:#22d3ee73}.foot{margin:18px 0 0;font-size:.76rem;color:#93a9c7bf;letter-spacing:.02em}.panel h2{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2rem);margin:14px 0 4px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0 24px}.stats div{display:grid;gap:6px;padding:12px 8px;border-radius:13px;background:#ffffff0a;border:1px solid var(--border)}.stats span{font-size:.72rem;color:var(--muted)}.stats strong{font-family:var(--font-display);font-size:1rem;color:#e9fbff}.panel.lose:before{background:linear-gradient(90deg,transparent,var(--red),transparent)}.panel.win:before{background:linear-gradient(90deg,transparent,var(--lime),transparent)}.icon-cyan{color:var(--cyan)}.icon-lime{color:var(--lime)}.icon-red{color:var(--red)}.loading{gap:14px;background:#04060f;z-index:40}.loading p{color:var(--muted);letter-spacing:.18em;font-size:.8rem}.loader{width:46px;height:46px;border-radius:50%;border:2px solid rgba(34,211,238,.2);border-top-color:var(--cyan);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}.hud{position:absolute;top:0;right:0;bottom:0;left:0;z-index:12;pointer-events:none;padding:clamp(12px,2vw,22px)}.hud-card{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 12px 30px #00000059}.hud-card>div{display:grid;gap:1px}.hud-label{font-size:.66rem;color:var(--muted);letter-spacing:.08em}.hud-card strong{font-family:var(--font-display);font-size:1.02rem;color:#eafaff;direction:ltr}.hud-timer{position:absolute;top:clamp(12px,2vw,22px);left:50%;transform:translate(-50%);display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:999px;border:1px solid rgba(34,211,238,.3);background:#081224c7;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#a5f3fc;transition:color .3s,border-color .3s,box-shadow .3s}.hud-timer strong{font-family:var(--font-display);font-size:1.05rem;letter-spacing:.05em;direction:ltr}.hud-timer[data-low=true]{color:#fecaca;border-color:#ef44448c;box-shadow:0 0 26px #ef444459;animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:.55}}.hud-right{position:absolute;top:clamp(12px,2vw,22px);inset-inline-end:clamp(12px,2vw,22px);display:flex;align-items:center;gap:8px}.hearts{display:inline-flex;gap:5px;padding:9px 12px;border-radius:12px;border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.heart{color:#fb7185;filter:drop-shadow(0 0 6px rgba(251,113,133,.7));transition:opacity .25s ease,transform .25s ease}.heart[data-on=false]{opacity:.16;filter:none;transform:scale(.9)}.icon-btn{pointer-events:auto;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#cfe6ff;cursor:pointer;transition:transform .18s ease,border-color .2s ease,background .2s ease}.icon-btn:hover{transform:translateY(-2px);border-color:#22d3ee80;background:#22d3ee1f}.stamina-wrap{position:absolute;bottom:clamp(16px,3vw,30px);inset-inline-start:clamp(16px,3vw,30px);display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:var(--panel);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.stamina-track{width:clamp(90px,16vw,150px);height:7px;border-radius:99px;background:#ffffff1a;overflow:hidden}.stamina-fill{height:100%;width:100%;border-radius:99px;background:linear-gradient(90deg,#22c55e,#a3e635);box-shadow:0 0 12px #a3e63599;transition:width .12s linear}.touch-layer{position:absolute;top:0;right:0;bottom:0;left:0;z-index:14;pointer-events:none}.joystick{pointer-events:auto;position:absolute;left:24px;bottom:26px;width:128px;height:128px;border-radius:50%;border:1px solid rgba(148,197,255,.24);background:radial-gradient(circle at 50% 50%,#22d3ee1f,#060c188c);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);touch-action:none}.joystick-knob{position:absolute;left:50%;top:50%;width:54px;height:54px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 35% 30%,#a5f3fc,#0e7490);box-shadow:0 6px 18px #22d3ee73,inset 0 1px 2px #ffffff80}.touch-actions{pointer-events:none;position:absolute;right:24px;bottom:34px;display:grid;gap:14px;justify-items:center}.touch-btn{pointer-events:auto;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(148,197,255,.28);background:#0812229e;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#d8f4ff;cursor:pointer;touch-action:none}.touch-jump{width:78px;height:78px;background:radial-gradient(circle at 40% 30%,#22d3ee80,#061e2dcc);box-shadow:0 10px 26px #22d3ee47}.touch-sprint{width:58px;height:58px;color:#d9f99d}.panel::-webkit-scrollbar{width:6px}.panel::-webkit-scrollbar-thumb{background:#22d3ee4d;border-radius:99px}@media (max-width: 640px){.panel{padding:22px 18px}.lead{margin:14px auto 18px;font-size:.92rem;line-height:1.75}.keys{padding:12px;gap:7px}.key-row{font-size:.82rem}kbd{font-size:.66rem;padding:5px 7px;min-width:26px}.btn{padding:13px 22px;font-size:.95rem}.stats{grid-template-columns:1fr;gap:8px}.stats div{grid-template-columns:1fr auto;align-items:center}.hud-card{padding:8px 12px}.hud-card strong{font-size:.9rem}.hearts{padding:7px 9px}.subtitle{letter-spacing:.28em}}@media (max-height: 620px){.title{font-size:clamp(2rem,6vw,2.6rem)}.keys{display:none}.panel{padding:18px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}