@import url("https://fonts.googleapis.com/css?family=Press+Start+2P");

:root{
  --bg-1:#fff8fc;
  --bg-2:#f6f4ff;
  --text:#ffffff;
  --muted:#efe7ff;
  --pink:#ff78b2;
  --pink-dark:#e05597;
  --purple:#9f7dff;
  --blue:#79d0ff;
  --mint:#7adbc7;
  --glass:rgba(255,255,255,.18);
  --glass-strong:rgba(255,255,255,.26);
  --shadow:0 18px 46px rgba(86,53,116,.18);
  --shadow-soft:0 10px 24px rgba(86,53,116,.14);
}

*{
  box-sizing:border-box;
}

html{
  direction:rtl;
}

body{
  margin:0;
  min-height:100vh;
  overflow:hidden;
  font-family:"Press Start 2P", cursive;
  color:var(--text);
  background:
    radial-gradient(circle at top right, rgba(255,203,227,.45), transparent 28%),
    radial-gradient(circle at bottom left, rgba(215,223,255,.58), transparent 34%),
    linear-gradient(135deg, #41345e, #2b2948 50%, #22344f);
}

/* واجهة عليا */
.hud-top{
  position:fixed;
  top:14px;
  left:14px;
  right:14px;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  pointer-events:none;
}

.back-link,
.brand-badge{
  pointer-events:auto;
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  border-radius:999px;
  box-shadow:var(--shadow-soft);
  font-size:12px;
}

.back-link{
  background:rgba(255,255,255,.88);
  color:#5b4e73;
  text-decoration:none;
}

.brand-badge{
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;
}

/* عنوان اللعبة */
.game-header{
  position:fixed;
  top:74px;
  left:14px;
  right:14px;
  z-index:20;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  pointer-events:none;
}

.title-wrap,
.score-card{
  pointer-events:auto;
}

.title-wrap{
  max-width:min(62vw, 560px);
  padding:14px 16px;
  border-radius:22px;
  background:var(--glass);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-soft);
}

.game-kicker{
  margin:0 0 8px;
  color:#ffd6ea;
  font-size:11px;
}

h1{
  margin:0 0 10px;
  font-size:clamp(20px, 3vw, 34px);
  line-height:1.35;
}

.game-desc{
  margin:0;
  color:var(--muted);
  line-height:1.9;
  font-size:11px;
}

.score-card{
  min-width:130px;
  padding:14px 16px;
  border-radius:22px;
  text-align:center;
  background:var(--glass-strong);
  backdrop-filter:blur(12px);
  box-shadow:var(--shadow-soft);
}

.score-label{
  display:block;
  margin-bottom:8px;
  color:#ffdff0;
  font-size:11px;
}

#counter{
  font-size:22px;
  line-height:1.4;
}

/* رسالة النهاية */
#end{
  position:fixed;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  visibility:hidden;
  background:rgba(34, 28, 47, .45);
}

.end-box{
  width:min(92vw, 420px);
  padding:26px 20px;
  border-radius:28px;
  background:rgba(255,255,255,.94);
  color:#413654;
  text-align:center;
  box-shadow:var(--shadow);
}

.end-box h2{
  margin:0 0 12px;
  font-size:24px;
  line-height:1.5;
}

.end-box p{
  margin:0 0 18px;
  color:#746887;
  line-height:1.9;
  font-size:12px;
}

#end button{
  outline:none;
  cursor:pointer;
  border:none;
  background:linear-gradient(135deg,var(--pink),var(--purple));
  color:#fff;
  padding:16px 28px;
  border-radius:16px;
  font-family:inherit;
  font-size:14px;
  box-shadow:var(--shadow-soft);
}

/* أزرار التحكم */
#controlls{
  position:fixed;
  left:0;
  right:0;
  bottom:18px;
  z-index:25;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  pointer-events:none;
}

#controlls div{
  pointer-events:auto;
  display:grid;
  grid-template-columns:60px 60px 60px;
  grid-template-rows:auto auto;
  grid-column-gap:10px;
  grid-row-gap:10px;
}

#controlls button{
  width:100%;
  height:56px;
  outline:none;
  cursor:pointer;
  border:none;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  color:#4c4561;
  box-shadow:3px 5px 0 rgba(0,0,0,.22);
  display:flex;
  align-items:center;
  justify-content:center;
}

#controlls button svg{
  display:block;
}

#controlls button path{
  fill:#5a4c73;
}

#controlls button:first-of-type{
  grid-column:1/-1;
}

canvas{
  display:block;
  position:fixed;
  inset:0;
  z-index:1;
}

@media (max-width: 700px){
  .game-header{
    top:68px;
    flex-direction:column;
    align-items:stretch;
  }

  .title-wrap{
    max-width:100%;
  }

  .score-card{
    align-self:flex-start;
    min-width:120px;
  }

  h1{
    font-size:22px;
  }

  #counter{
    font-size:18px;
  }
}

@media (max-width: 480px){
  .hud-top{
    top:10px;
    left:10px;
    right:10px;
  }

  .game-header{
    top:58px;
    left:10px;
    right:10px;
    gap:10px;
  }

  .title-wrap,
  .score-card{
    padding:12px 12px;
    border-radius:18px;
  }

  .game-kicker,
  .score-label,
  .game-desc{
    font-size:10px;
  }

  h1{
    font-size:18px;
    margin-bottom:8px;
  }

  #controlls{
    bottom:12px;
  }

  #controlls div{
    grid-template-columns:54px 54px 54px;
    grid-column-gap:8px;
    grid-row-gap:8px;
  }

  #controlls button{
    height:50px;
    border-radius:14px;
  }

  #end button{
    padding:14px 22px;
    font-size:12px;
  }

  .end-box h2{
    font-size:20px;
  }
}