*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%;background:#05001a;color:#f3e9d2;font-family:"Cairo",system-ui,-apple-system,"Segoe UI",sans-serif;overscroll-behavior:none}
body{overflow:hidden;-webkit-user-select:none;user-select:none;touch-action:manipulation}
button{font-family:inherit;cursor:pointer}
#app{
  position:relative;
  display:flex;flex-direction:column;height:100%;height:100dvh;min-height:0;
  background:radial-gradient(130% 90% at 50% 0%,#1b0744 0%,#05001a 68%);
}
/* ---------- HUD ---------- */
#hud{
  position:relative;z-index:6;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  padding:8px 10px 7px;
  background:linear-gradient(180deg,rgba(12,0,42,.96) 0%,rgba(12,0,42,.72) 70%,rgba(12,0,42,0) 100%);
  border-bottom:1px solid rgba(161,0,255,.22);
}
#hud .pills{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.pill{
  display:flex;align-items:center;gap:5px;
  background:rgba(5,0,26,.82);border:1.5px solid rgba(161,0,255,.72);
  border-radius:999px;padding:5px 10px;font-size:11px;font-weight:800;line-height:1;color:#d8b4ff;
  box-shadow:0 0 12px rgba(161,0,255,.42),inset 0 0 10px rgba(255,0,255,.12);
  white-space:nowrap;min-width:0;
}
.pill b{color:#fff;font-weight:900}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#ff00ff;box-shadow:0 0 8px #ff00ff;flex:0 0 auto}
.pill.brand{color:#ffd9ff;letter-spacing:1.6px;font-size:10px;border-color:rgba(255,0,255,.72);box-shadow:0 0 14px rgba(255,0,255,.45)}
.pill.zone{color:#f3e9d2;border-color:rgba(217,164,65,.55);box-shadow:0 0 12px rgba(217,164,65,.25);max-width:38vw;overflow:hidden;text-overflow:ellipsis;display:block}
.iconbtn{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:rgba(161,0,255,.18);border:1.5px solid rgba(161,0,255,.6);color:#d8b4ff;
  transition:transform .12s,background .12s;
}
.iconbtn:active{transform:scale(.92);background:rgba(161,0,255,.35)}
.timewrap{flex:1 1 100%;display:flex;align-items:center;gap:7px;margin-top:2px}
.timebar{flex:1 1 auto;height:6px;border-radius:999px;background:rgba(216,180,255,.13);overflow:hidden;border:1px solid rgba(161,0,255,.35)}
#timeFill{height:100%;width:100%;border-radius:999px;background:linear-gradient(90deg,#ff00ff,#a100ff);box-shadow:0 0 10px rgba(255,0,255,.8)}
#timeNum{font-size:10px;font-weight:900;color:#d8b4ff;min-width:22px;text-align:center;font-variant-numeric:tabular-nums}
/* ---------- stage ---------- */
#stage{position:relative;flex:1 1 auto;min-height:0;overflow:hidden;background:#05001a}
#game{display:block;width:100%;height:100%;touch-action:none}
#toast{
  position:absolute;left:12px;right:12px;bottom:14px;margin:0 auto;width:fit-content;max-width:min(94%,440px);
  background:rgba(10,0,40,.95);border:1.6px solid rgba(255,0,255,.85);border-radius:16px;
  padding:10px 16px;font-size:13.5px;font-weight:700;line-height:1.55;color:#f0e0ff;text-align:center;
  box-shadow:0 0 26px rgba(255,0,255,.4);pointer-events:none;
  opacity:0;transform:translateY(8px);transition:opacity .22s ease,transform .22s ease;
}
#toast.show{opacity:1;transform:translateY(0)}
/* ---------- overlays ---------- */
.overlay{
  position:absolute;inset:0;z-index:20;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:16px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;
}
.overlay.hidden{display:none}
#startOverlay{background:linear-gradient(180deg,#2a007a 0%,#180048 48%,#05001a 100%)}
#endOverlay{background:radial-gradient(120% 80% at 50% 0%,rgba(42,0,122,.97) 0%,rgba(8,0,30,.98) 70%)}
#pauseOverlay{background:rgba(5,0,26,.93);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.sheet{margin:auto;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:430px;text-align:center}
.hero-eye{width:106px;height:64px;filter:drop-shadow(0 0 22px rgba(255,0,255,.75));animation:eyebob 4.6s ease-in-out infinite}
@keyframes eyebob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.title{
  margin:0;font-size:clamp(30px,10.5vw,50px);font-weight:900;letter-spacing:5px;line-height:1.05;
  color:#f0c4ff;text-shadow:0 0 30px #ff00ff,0 0 64px #a100ff,0 0 6px #ffb3ff;
}
.title2{margin:0;font-size:clamp(21px,6.4vw,30px);font-weight:900;color:#f5d9ff;text-shadow:0 0 22px rgba(255,0,255,.7);line-height:1.25}
.kicker{font-size:11.5px;font-weight:800;letter-spacing:1.4px;color:#d9a441;text-transform:uppercase}
.lead{margin:0;font-size:14.5px;font-weight:600;line-height:1.7;color:#d8b4ff}
.rules{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:start;width:100%}
.rules li{
  display:flex;gap:9px;align-items:flex-start;font-size:12.8px;font-weight:600;line-height:1.65;color:#e2ccff;
  background:rgba(255,255,255,.045);border:1px solid rgba(161,0,255,.24);border-radius:13px;padding:8px 11px;
}
.rules b{color:#fff;font-weight:900}
.bullet{flex:0 0 auto;width:8px;height:8px;margin-top:6px;border-radius:50%;background:#ff00ff;box-shadow:0 0 10px #ff00ff}
.best-line{font-size:12.5px;font-weight:700;color:#d8b4ff}
.best-line b{color:#ffd9ff;font-size:15px}
.hint{margin:0;font-size:11px;font-weight:600;color:rgba(216,180,255,.68);line-height:1.6}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:none;border-radius:999px;padding:14px 30px;min-height:52px;min-width:190px;
  font-size:17px;font-weight:900;color:#fff;letter-spacing:.4px;
  background:linear-gradient(135deg,#d000ff 0%,#8a00d8 55%,#5c00a8 100%);
  box-shadow:0 0 26px rgba(255,0,255,.5),0 6px 0 #3d0069,inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(3px);box-shadow:0 0 18px rgba(255,0,255,.5),0 3px 0 #3d0069}
.btn:focus-visible,.iconbtn:focus-visible,.dbtn:focus-visible,.mini:focus-visible{outline:2.5px solid #ffd9ff;outline-offset:3px}
.btn.ghost{background:rgba(255,255,255,.06);color:#d8b4ff;border:1.5px solid rgba(161,0,255,.6);box-shadow:none}
.btn.ghost:active{transform:translateY(2px);box-shadow:none}
.score-big{display:flex;align-items:baseline;gap:7px;font-weight:900;color:#fff;text-shadow:0 0 22px rgba(255,0,255,.85)}
.score-big span{font-size:clamp(38px,12vw,54px);line-height:1;font-variant-numeric:tabular-nums}
.score-big small{font-size:13px;font-weight:800;color:#d8b4ff}
.stats{display:flex;gap:8px;width:100%;justify-content:center}
.stats>div{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px;align-items:center;
  background:rgba(255,255,255,.05);border:1px solid rgba(161,0,255,.3);border-radius:13px;padding:8px 4px;
}
.stats b{font-size:16px;font-weight:900;color:#ffd9ff;font-variant-numeric:tabular-nums}
.stats span{font-size:10px;font-weight:700;color:#bfa3e8;line-height:1.3}
/* ---------- leaderboard ---------- */
.board{width:100%;background:rgba(255,255,255,.045);border:1px solid rgba(161,0,255,.3);border-radius:15px;padding:10px 12px;text-align:start}
.board.hidden{display:none}
.board-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;font-weight:900;color:#d9a441;margin-bottom:6px}
.mini{background:rgba(161,0,255,.22);border:1px solid rgba(161,0,255,.65);color:#f0d9ff;border-radius:999px;padding:5px 12px;font-size:11px;font-weight:800;min-height:30px}
.mini.hidden{display:none}
.board-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.board-list li{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:#e6d5ff;line-height:1.4}
.board-list li .rk{width:18px;flex:0 0 auto;font-weight:900;color:#d9a441;font-variant-numeric:tabular-nums}
.board-list li .hd{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.board-list li .sc{font-weight:900;color:#fff;font-variant-numeric:tabular-nums}
.board-list li.you .hd{color:#ff9bff}
.board-note{margin:6px 0 0;font-size:10.5px;font-weight:600;color:rgba(216,180,255,.7);line-height:1.5}
/* ---------- controls ---------- */
#controls{
  position:relative;z-index:7;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  padding:8px 10px 12px;
  background:linear-gradient(0deg,rgba(12,0,42,.98) 0%,rgba(12,0,42,.8) 70%,rgba(12,0,42,0) 100%);
}
.dpad{position:relative;width:var(--pad,138px);height:var(--pad,138px);touch-action:none}
.dbtn{
  position:absolute;width:var(--btn,48px);height:var(--btn,48px);
  display:grid;place-items:center;border-radius:15px;
  background:linear-gradient(180deg,rgba(161,0,255,.3),rgba(60,0,110,.55));
  border:1.6px solid rgba(200,120,255,.72);color:#f0d9ff;
  box-shadow:0 0 14px rgba(161,0,255,.35),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .09s ease,background .09s ease,box-shadow .09s ease;
  -webkit-user-select:none;user-select:none;
}
.dbtn:active,.dbtn.pressed{
  transform:scale(.93);background:linear-gradient(180deg,rgba(255,0,255,.55),rgba(120,0,190,.7));
  box-shadow:0 0 22px rgba(255,0,255,.75),inset 0 1px 0 rgba(255,255,255,.3);
}
.dbtn.up{left:calc((var(--pad,138px) - var(--btn,48px))/2);top:0}
.dbtn.down{left:calc((var(--pad,138px) - var(--btn,48px))/2);bottom:0}
.dbtn.left{top:calc((var(--pad,138px) - var(--btn,48px))/2);left:0}
.dbtn.right{top:calc((var(--pad,138px) - var(--btn,48px))/2);right:0}
@media (max-height:600px){
  .dpad{--pad:118px;--btn:44px}
  #controls{padding:4px 10px 8px}
  #hud{padding:5px 8px 4px}
  .title{font-size:clamp(26px,8vw,38px)}
  .hero-eye{width:78px;height:48px}
  .rules li{font-size:12px;padding:7px 10px}
  .sheet{gap:9px}
}
@media (min-width:900px){
  .sheet{max-width:470px}
  #controls{padding:10px 10px 16px}
}
/* شاشات قصيرة (جوال صغير أو أفقي أو معاينة المحرر): منيو مضغوط قابل للتمرير */
@media (max-height:560px){
  .overlay{padding:10px}
  .sheet{gap:8px}
  .hero-eye{width:58px;height:36px;animation:none}
  .title{font-size:clamp(20px,6.5vw,32px);letter-spacing:3px}
  .title2{font-size:clamp(18px,5vw,24px)}
  .kicker{font-size:10px}
  .lead{font-size:12px;line-height:1.5}
  .rules,.hint{display:none}
  .best-line{font-size:11.5px}
  .btn{padding:11px 24px;min-height:46px;min-width:158px;font-size:15px}
  .score-big span{font-size:clamp(28px,9vw,42px)}
  .stats>div{padding:6px 3px}
  .stats b{font-size:14px}
  .stats span{font-size:9px}
}
@media (max-height:380px){
  .hero-eye{display:none}
  .overlay{padding:8px}
  .sheet{gap:6px}
}