@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Cairo:wght@400;700&display=swap');

:root {
  --bg:      #0d0d0d;
  --surface: #1a1a1a;
  --red:     #d50303;
  --grey:    #4c4c4c;
  --greylt:  #888;
  --white:   #efefef;
}

* { margin:0; padding:0; box-sizing:border-box; }

html, body {
  width:100%; height:100%;
  background:var(--bg);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  font-family:'Orbitron', monospace;
  user-select:none; overflow:hidden;
  touch-action:none;
}

body::after {
  content:''; position:fixed; inset:0;
  background:repeating-linear-gradient(
    0deg,transparent,transparent 3px,
    rgba(76,76,76,0.04) 3px,rgba(76,76,76,0.04) 4px
  );
  pointer-events:none; z-index:999;
}

/* ── GAME WRAPPER ── */
.wrap {
  display:flex; flex-direction:column;
  align-items:center; gap:8px;
  width:100%; padding:0 8px;
  position:relative; z-index:1;
}

/* ── TITLE ── */
h1 {
  font-size:clamp(14px, 5vw, 30px);
  font-weight:900; letter-spacing:clamp(4px,1.5vw,10px);
  color:var(--white);
  white-space:nowrap;
}
h1 span { color:var(--red); text-shadow:0 0 22px var(--red),0 0 44px rgba(213,3,3,0.35); }

/* ── HUD ── */
.hud {
  display:flex; gap:clamp(8px,2vw,20px); align-items:center;
  width:100%; max-width:600px;
  padding:8px 12px;
  background:var(--surface);
  border:1px solid var(--grey);
  border-radius:3px;
}
.hud-cell { display:flex; flex-direction:column; gap:2px; min-width:0; }
.lbl { font-size:clamp(6px,1.2vw,8px); letter-spacing:2px; color:var(--greylt); white-space:nowrap; }
.val { font-size:clamp(11px,2.5vw,15px); color:var(--white); white-space:nowrap; }
.val.sc { color:var(--red); text-shadow:0 0 8px var(--red); }

/* pause button in hud */
.pause-btn {
  margin-left:auto;
  background:transparent;
  border:1.5px solid var(--grey);
  color:var(--greylt);
  font-family:'Orbitron',monospace;
  font-size:clamp(9px,2vw,12px);
  letter-spacing:1px;
  padding:5px 12px;
  cursor:pointer;
  border-radius:2px;
  transition:all .15s;
  white-space:nowrap;
  flex-shrink:0;
}
.pause-btn:hover { border-color:var(--white); color:var(--white); }
.pause-btn.active { border-color:var(--red); color:var(--red); }

.status {
  font-family:'Cairo',sans-serif;
  font-size:clamp(10px,2.5vw,13px);
  color:#e8a000;
  text-shadow:0 0 8px rgba(232,160,0,.6);
  text-align:center; flex-shrink:0;
  max-width:120px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}

/* ── CANVAS ── */
canvas {
  display:block;
  border:1.5px solid var(--grey);
  border-radius:3px;
  max-width:100%;
  touch-action:none;
}

/* ── LEGEND ── */
.legend {
  display:flex; gap:clamp(10px,3vw,18px);
  font-size:clamp(7px,1.5vw,9px); letter-spacing:1px;
  color:rgba(255,255,255,0.3);
  flex-wrap:wrap; justify-content:center;
}
.leg { display:flex; align-items:center; gap:4px; }
.dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.dot.g { background:#00e676; box-shadow:0 0 4px #00e676; }
.dot.y { background:#ffc400; box-shadow:0 0 4px #ffc400; }
.dot.r { background:var(--red); box-shadow:0 0 4px var(--red); }
.hint { font-size:clamp(6px,1.2vw,8px); letter-spacing:2px; color:var(--grey); }

/* ── OVERLAYS ── */
.overlay {
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:clamp(12px,3vh,20px);
  background:rgba(5,5,5,0.95);
  backdrop-filter:blur(8px);
  z-index:100;
  padding:20px;
}
.overlay.off { display:none; }

.ov-title {
    color : white;
  font-size:clamp(22px,6vw,46px);
  font-weight:900; letter-spacing:clamp(3px,1.5vw,8px);
  text-align:center; line-height:1.2;
}
.red-txt { color:var(--red); text-shadow:0 0 28px var(--red); }

.ov-desc {
  font-family:'Cairo',sans-serif;
  font-size:clamp(12px,3.5vw,15px); line-height:2;
  color:rgba(255,255,255,0.5);
  text-align:center; direction:rtl;
  max-width:min(370px, 90vw);
}

/* score shown on overlays */
.ov-score-wrap {
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.ov-score-label {
  font-size:clamp(7px,1.5vw,9px); letter-spacing:3px; color:var(--greylt);
}
.ov-score {
  font-size:clamp(32px,8vw,52px);
  font-weight:900; color:var(--red);
  text-shadow:0 0 24px var(--red);
  line-height:1;
}
.ov-lv { font-size:clamp(10px,2vw,13px); letter-spacing:3px; color:var(--greylt); }

/* level-up score (smaller) */
.ov-score-sm {
  font-size:clamp(22px,5vw,34px);
  font-weight:900; color:var(--red);
  text-shadow:0 0 18px var(--red);
}

.btn {
  font-family:'Orbitron',monospace;
  font-size:clamp(9px,2vw,11px); letter-spacing:3px;
  padding:clamp(10px,2vh,14px) clamp(24px,5vw,36px);
  background:transparent; border:2px solid var(--red);
  color:var(--red); cursor:pointer; border-radius:2px;
  text-shadow:0 0 8px var(--red);
  box-shadow:0 0 16px rgba(213,3,3,0.2);
  transition:all .15s; white-space:nowrap;
}
.btn:hover { background:rgba(213,3,3,0.12); box-shadow:0 0 28px rgba(213,3,3,0.4); }

/* pause overlay */
#scPause { background:rgba(5,5,5,0.82); }

#flash { position:fixed; inset:0; pointer-events:none; z-index:200; opacity:0; transition:opacity .08s; }
#flash.on { opacity:1; }

/* ── D-PAD ── */
.dpad {
  display:none;
  grid-template-columns: repeat(3, 56px);
  grid-template-rows:    repeat(3, 56px);
  gap:5px;
  margin-top:4px;
}
body.is-touch .dpad { display:grid; }

.dp {
  display:flex; align-items:center; justify-content:center;
  background:var(--surface);
  border:1.5px solid var(--grey);
  border-radius:8px;
  color:var(--greylt);
  font-size:22px;
  cursor:pointer;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  transition:background .08s, border-color .08s, color .08s;
}
.dp:active, .dp.on {
  background:rgba(213,3,3,0.2);
  border-color:var(--red);
  color:#fff;
}
.dp-mid {
  background:transparent;
  border-color:transparent;
  pointer-events:none;
}
/* grid positions */
.dp-u { grid-column:2; grid-row:1; }
.dp-l { grid-column:1; grid-row:2; }
.dp-m { grid-column:2; grid-row:2; }
.dp-r { grid-column:3; grid-row:2; }
.dp-d { grid-column:2; grid-row:3; }

@media (max-height:620px) {
  .dpad { grid-template-columns:repeat(3,46px); grid-template-rows:repeat(3,46px); gap:4px; }
  .dp { font-size:18px; }
}