:root{
  --bg:#040711;
  --grid:#0c3a4a;
  --cyan:#37e6ff;
  --cyan-dim:#12707f;
  --amber:#ff8a1e;
  --white:#eafcff;
  --panel:#061424cc;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{
  width:100%; height:100%; overflow:hidden;
  background:var(--bg);
  font-family:'Rajdhani', sans-serif;
  color:var(--white);
}
#stage{
  position:relative;
  width:100vw; height:100vh;
  background:radial-gradient(ellipse at 50% 25%, #0d3a55 0%, #071a2e 45%, #040e1a 100%);
  overflow:hidden;
}
/* خلفية 2D مسطّحة بالكامل — بدون منظور 3D */
.floor-grid{
  position:absolute; left:0; right:0; bottom:0; height:40%;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity:.4;
  animation: floorMove 8s linear infinite;
  pointer-events:none;
  border-top:1px solid rgba(55,230,255,.15);
}
@keyframes floorMove{ from{background-position:0 0,0 0;} to{background-position:48px 0,0 0;} }

.sky-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(55,230,255,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55,230,255,.04) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events:none;
}

#landing{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  z-index:20;
  text-align:center;
}
.glitchwrap{ position:relative; }
#title{
  font-family:'Orbitron', sans-serif;
  font-weight:900;
  font-size:clamp(64px, 14vw, 150px);
  letter-spacing:14px;
  color:var(--white);
  text-shadow:0 0 8px var(--cyan),0 0 24px var(--cyan),0 0 60px var(--cyan-dim);
  animation: flicker 3.5s infinite ease-in-out;
}
@keyframes flicker{
  0%,19%,21%,23%,80%,100%{ opacity:1; }
  20%,22%{ opacity:.55; }
}
#subtitle{
  font-family:'Orbitron', sans-serif;
  font-size:clamp(12px,2vw,16px);
  letter-spacing:8px;
  color:var(--cyan);
  margin-top:6px;
  opacity:.85;
}
#subtitle .ver{
  color:var(--amber);
  letter-spacing:3px;
  font-weight:700;
  margin-inline-start:8px;
  text-shadow:0 0 12px rgba(255,138,30,.7);
}
#playBtn{
  margin-top:28px;
  font-family:'Orbitron', sans-serif;
  font-size:clamp(16px, 3vw, 20px);
  letter-spacing:3px;
  padding:14px 40px;
  background:transparent;
  border:2px solid var(--cyan);
  color:var(--cyan);
  cursor:pointer;
  clip-path: polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow: 0 0 12px rgba(55,230,255,.35), inset 0 0 12px rgba(55,230,255,.15);
  transition: all .18s ease;
}
#playBtn:hover{
  background:rgba(55,230,255,.12);
  box-shadow: 0 0 28px rgba(55,230,255,.7), inset 0 0 20px rgba(55,230,255,.3);
  transform: translateY(-2px);
}
#playBtn:active{ transform: translateY(0px) scale(.97); }

#storyLine{
  margin-top:18px;
  max-width:min(560px, 92vw);
  padding:0 16px;
  font-size:clamp(13px, 2.4vw, 15px);
  line-height:1.75;
  letter-spacing:0.5px;
  color:#9ad8e8;
  opacity:.92;
}
#storyLine b{ color:var(--amber); font-weight:700; }
#howto{
  margin-top:16px;
  max-width:min(640px, 94vw);
  padding:0 12px;
  font-size:clamp(11px, 2vw, 13px);
  letter-spacing:1px;
  color:#7fd8e8;
  opacity:.8;
  line-height:1.6;
}
#howto b{ color:var(--amber); }

#social{
  position:relative;
  display:flex; flex-direction:row; align-items:center; justify-content:center;
  gap:18px;
  margin-bottom:18px;
  z-index:25;
}
#social a{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--cyan-dim);
  background:var(--panel);
  color:var(--cyan);
  clip-path: polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition: all .2s ease;
  text-decoration:none;
  -webkit-tap-highlight-color: transparent;
}
#social a:active{
  border-color:var(--cyan);
  box-shadow:0 0 16px rgba(55,230,255,.6);
  color:#fff;
}
#social a:hover{
  border-color:var(--cyan);
  box-shadow:0 0 16px rgba(55,230,255,.6);
  color:#fff;
  transform: translateY(-3px);
}
#social svg{ width:17px; height:17px; fill:currentColor; }

#counter{
  position:absolute; bottom:22px; right:26px;
  z-index:25;
  background:var(--panel);
  border:1px solid var(--cyan-dim);
  padding:10px 18px;
  clip-path: polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);
  font-family:'Orbitron', sans-serif;
  font-size:12px;
  letter-spacing:1.5px;
  color:var(--cyan);
  line-height:1.9;
  text-align:right;
}
#counter .num{ color:var(--amber); font-weight:700; }

#gameWrap{
  position:absolute; inset:0;
  display:none;
  z-index:15;
  align-items:center; justify-content:center;
}
#gameCanvas{
  background:#061428;
  border:1px solid var(--cyan-dim);
  box-shadow:0 0 40px rgba(55,230,255,.2);
  max-width:min(96vw, 100%);
  max-height:min(82vh, 100%);
  width:auto; height:auto;
  display:block;
}
#rotateHint{
  display:none;
  position:absolute; inset:0; z-index:40;
  background:#020509ee;
  align-items:center; justify-content:center;
  flex-direction:column; text-align:center; padding:20px;
  font-family:'Orbitron', sans-serif; color:var(--cyan); letter-spacing:2px;
}
@media (pointer:coarse) and (orientation:portrait){
  #rotateHint{ display:flex; }
}
#hud{
  position:absolute; top:10px; left:0; right:0;
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:8px 14px;
  padding:6px 3vw;
  font-family:'Orbitron', sans-serif;
  font-size:clamp(11px, 2.2vw, 14px);
  letter-spacing:1px;
  color:var(--cyan);
  z-index:16;
  pointer-events:none;
  background:linear-gradient(to bottom, rgba(2,8,16,.65), transparent);
}
#hud > div{
  white-space:nowrap;
  background:rgba(6,20,36,.55);
  border:1px solid rgba(55,230,255,.2);
  padding:4px 10px;
  border-radius:4px;
}
#hud .val{ color:var(--amber); }
#hudExit{
  pointer-events:auto;
  cursor:pointer;
  border:1px solid var(--cyan-dim);
  padding:4px 12px;
  color:var(--cyan);
  background:var(--panel);
}
#hudExit:hover{ border-color:var(--cyan); box-shadow:0 0 10px rgba(55,230,255,.5); }

#overlayMsg{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  flex-direction:column;
  z-index:30;
  background:rgba(2,5,10,.85);
  text-align:center;
}
#overlayMsg h2{
  font-family:'Orbitron', sans-serif;
  font-size:clamp(36px,6vw,60px);
  color:var(--white);
  text-shadow:0 0 20px var(--cyan);
  letter-spacing:6px;
}
#overlayMsg p{ margin-top:14px; color:#7fd8e8; letter-spacing:2px; font-size:16px;}
#overlayMsg button{
  margin-top:30px;
  font-family:'Orbitron', sans-serif;
  padding:12px 36px;
  background:transparent;
  border:2px solid var(--cyan);
  color:var(--cyan);
  letter-spacing:3px;
  cursor:pointer;
}
#overlayMsg button:hover{ background:rgba(55,230,255,.15); }

@media (max-width:700px){
  #social{ gap:12px; margin-bottom:12px; }
  #social a{ width:32px; height:32px; }
  #social svg{ width:14px; height:14px; }
  #title{ letter-spacing:8px; }
  #counter{ font-size:9px; padding:7px 10px; right:8px; }
}

#touchControls{
  display:none;
  position:absolute; inset:0;
  z-index:26;
  pointer-events:none;
}
.touch-btn{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  width:68px; height:68px;
  border:3px solid var(--cyan-dim);
  background:rgba(6,20,36,.72);
  color:var(--cyan);
  font-family:'Orbitron', sans-serif;
  font-size:28px;
  font-weight:700;
  border-radius:50%;
  pointer-events:auto;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action:none;
}
.touch-btn.active{
  border-color:var(--cyan);
  background:rgba(55,230,255,.3);
  box-shadow:0 0 22px rgba(55,230,255,.75);
}
#btnLeft{ left:16px; bottom:24px; }
#btnRight{ left:100px; bottom:24px; }
#btnJump{
  right:16px; bottom:24px; width:78px; height:78px;
  font-size:14px; letter-spacing:1px;
  border-color:var(--amber); color:var(--amber); background:rgba(36,20,6,.72);
}
#btnJump.active{ border-color:var(--amber); background:rgba(255,138,30,.3); box-shadow:0 0 22px rgba(255,138,30,.75); }
#btnMelee{
  right:104px; bottom:28px; width:62px; height:62px;
  font-size:22px; border-color:#aa88ff; color:#ccbbff;
  background:rgba(20,12,40,.75);
}
#btnMelee.active{
  border-color:#ccbbff; background:rgba(140,100,255,.35);
  box-shadow:0 0 22px rgba(160,120,255,.8);
}
#btnFire{
  right:176px; bottom:28px; width:62px; height:62px;
  font-size:22px; border-color:#ff4422; color:#ff6633;
  background:rgba(40,8,4,.75);
}
#btnFire.active{
  border-color:#ff6633; background:rgba(255,80,30,.35);
  box-shadow:0 0 26px rgba(255,80,30,.85);
}

@media (pointer:coarse){
  #touchControls{ display:block; }
}
@media (max-width:600px){
  .touch-btn{ width:56px; height:56px; font-size:20px; border-width:2px; }
  #btnLeft{ left:10px; bottom:16px; }
  #btnRight{ left:78px; bottom:16px; }
  #btnJump{ right:10px; bottom:16px; width:64px; height:64px; font-size:12px; }
  #btnMelee{ right:84px; bottom:20px; width:54px; height:54px; font-size:18px; }
  #btnFire{ right:146px; bottom:20px; width:54px; height:54px; font-size:18px; }
  #hud{ font-size:10px; gap:4px 6px; top:6px; }
  #hud > div{ padding:3px 6px; }
}
#pauseMenu{
  position:absolute; inset:0;
  display:none;
  align-items:center; justify-content:center;
  flex-direction:column;
  z-index:32;
  background:rgba(2,8,16,.88);
  text-align:center;
}
#pauseMenu h2{
  font-family:'Orbitron', sans-serif;
  font-size:clamp(28px,5vw,48px);
  color:var(--white);
  text-shadow:0 0 18px var(--cyan);
  letter-spacing:4px;
}
#pauseMenu p{ margin-top:12px; color:#7fd8e8; letter-spacing:2px; }
.pause-actions{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
  margin-top:28px;
}
#pauseMenu button{
  font-family:'Orbitron', sans-serif;
  padding:12px 28px;
  background:transparent;
  border:2px solid var(--cyan);
  color:var(--cyan);
  letter-spacing:2px;
  cursor:pointer;
}
#pauseMenu button:hover{ background:rgba(55,230,255,.15); }
#pauseMenuBtn{
  border-color:var(--amber) !important;
  color:var(--amber) !important;
}
#pauseMenuBtn:hover{ background:rgba(255,138,30,.15) !important; }