:root{
  --bg:#0b0f14; --card:#12161d; --text:#eaeaea; --muted:#9aa3ad; --accent:#f97316;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:rgba(0,0,0,0)}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:"Vazirmatn",Tahoma,system-ui}
button{border:none;padding:14px 18px;border-radius:14px;background:#1d2430;color:#fff;font-weight:700}
button.primary{background:var(--accent);color:#111}
button.ghost{background:transparent;border:1px solid #333;border-radius:12px;padding:8px 10px}
button:active{transform:translateY(1px)}
.muted{color:var(--muted)}
.small{font-size:.9rem}

.screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px}
.hidden{display:none}
.wrap{max-width:420px;width:100%;background:var(--card);padding:22px;border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.4)}
h1,h2{margin:0 0 10px}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.list{list-style:none;padding:0;margin:0}
.list li{display:flex;justify-content:space-between;padding:10px;border-bottom:1px dashed #2a3240}

#game{background:#000}
#canvas{display:block;width:100vw;height:100vh;touch-action:none}
#hud{position:fixed;top:10px;left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
#hud #lives, #hud #score{background:rgba(0,0,0,.4);padding:6px 10px;border-radius:10px;backdrop-filter:blur(6px)}
#hud button{pointer-events:auto}

#touchZone{position:fixed;left:0;right:0;bottom:0;height:40vh; /* ناحیه درگ */ }

.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:center;justify-content:center;padding:16px}
.modal-card{max-width:420px;width:100%;background:var(--card);padding:20px;border-radius:18px}
.modal-card input{width:100%;margin:8px 0;padding:12px;border-radius:12px;border:1px solid #2a3240;background:#0f131a;color:#fff}
.modal-card button{width:100%;margin-top:8px}