/* Gorilla Dirt Trail Runner — game.css
   All selectors are prefixed #gdtr- to guarantee zero bleed into theme or other plugins */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* ── Wrapper ─────────────────────────────────────────── */
#gdtr-wrap {
  font-family: 'Press Start 2P', monospace;
  max-width: 720px;
  margin: 0 auto;
}

/* ── Canvas container ────────────────────────────────── */
#gdtr-gc {
  position: relative;
  background: #000;
  image-rendering: pixelated;
  line-height: 0;
}

#gdtr-gc canvas {
  display: block;
  width: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── Scanlines overlay ───────────────────────────────── */
#gdtr-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.07) 3px,
    rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
}

/* ── HUD ─────────────────────────────────────────────── */
#gdtr-ui {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.gdtr-stat {
  font-family: 'Press Start 2P', monospace;
  color: #fff;
  font-size: clamp(7px, 1.5vw, 11px);
  line-height: 1.8;
  text-shadow: 2px 2px 0 #000;
}

/* ── Title / Game-over overlay ───────────────────────── */
#gdtr-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #000;
  text-align: center;
  padding: 20px;
}

#gdtr-overlay h1 {
  font-family: 'Press Start 2P', monospace;
  color: #fff;
  font-size: clamp(13px, 3vw, 24px);
  line-height: 1.6;
  margin: 0 0 14px;
  text-shadow: 3px 3px 0 #555;
}

#gdtr-overlay p {
  font-family: 'Press Start 2P', monospace;
  color: #aaa;
  font-size: clamp(6px, 1.2vw, 9px);
  line-height: 2.2;
  margin: 0 0 16px;
  max-width: 400px;
}

#gdtr-recap {
  font-family: 'Press Start 2P', monospace;
  color: #fff;
  font-size: clamp(8px, 1.8vw, 13px);
  margin-bottom: 18px;
  line-height: 2.2;
}

#gdtr-btn {
  background: #fff;
  color: #000;
  border: none;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.6vw, 12px);
  padding: 12px 28px;
  cursor: pointer;
  outline: 4px solid #888;
  transition: transform .1s, background .1s;
  line-height: 1;
}
#gdtr-btn:hover  { background: #ccc; }
#gdtr-btn:active { transform: scale(.96); }

/* ── Score submit form ───────────────────────────────── */
#gdtr-form-wrap {
  background: #fff;
  border: 2px solid #ccc;
  padding: 20px;
  margin-top: 4px;
}

.gdtr-form-title {
  font-family: 'Press Start 2P', monospace;
  color: #000;
  font-size: clamp(8px, 1.6vw, 13px);
  margin: 0 0 8px;
}

.gdtr-form-note {
  font-family: 'Press Start 2P', monospace;
  color: #444;
  font-size: clamp(6px, 1vw, 9px);
  line-height: 1.8;
  margin: 0 0 16px;
}

#gdtr-score-form label {
  display: block;
  font-family: 'Press Start 2P', monospace;
  color: #222;
  font-size: clamp(6px, 1vw, 9px);
  margin: 0 0 4px;
}

#gdtr-score-form input[type="text"],
#gdtr-score-form input[type="email"] {
  display: block;
  width: 100%;
  max-width: 320px;
  background: #fff;
  border: 2px solid #888;
  color: #000;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.2vw, 10px);
  padding: 8px 10px;
  margin-bottom: 14px;
  outline: none;
}
#gdtr-score-form input:focus { border-color: #000; }

#gdtr-submit-btn {
  background: #000;
  color: #fff;
  border: none;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(7px, 1.2vw, 10px);
  padding: 10px 22px;
  cursor: pointer;
  margin-right: 12px;
  transition: background .1s;
}
#gdtr-submit-btn:hover    { background: #333; }
#gdtr-submit-btn:disabled { opacity: .5; cursor: default; }

#gdtr-form-status {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(6px, 1vw, 9px);
  margin-top: 10px;
  color: #060;
}

.gdtr-skip {
  background: none;
  border: none;
  color: #888;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(5px, 0.9vw, 8px);
  cursor: pointer;
  margin-top: 10px;
  padding: 0;
  display: block;
}
.gdtr-skip:hover { color: #000; }

/* ── Inline mini leaderboard ─────────────────────────── */
.gdtr-lb {
  background: #fff;
  border: 2px solid #ccc;
  padding: 14px;
  margin-top: 4px;
}

.gdtr-lb-title {
  font-family: 'Press Start 2P', monospace;
  color: #000;
  font-size: clamp(7px, 1.3vw, 10px);
  margin: 0 0 12px;
}

.gdtr-lb ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gdtr-lb li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(6px, 1vw, 9px);
  color: #333;
  padding: 5px 0;
  border-bottom: 1px solid #ddd;
}

.gdtr-lb-rank  { color: #999; width: 28px; flex-shrink: 0; }
.gdtr-lb-name  { flex: 1; color: #000; }
.gdtr-lb-score { color: #000; font-weight: bold; }

/* ── Standalone leaderboard shortcode ────────────────── */
.gdtr-lb-standalone {
  font-family: 'Press Start 2P', monospace;
  background: #fff;
  border: 2px solid #ccc;
  padding: 20px;
  max-width: 520px;
}

.gdtr-lb-heading {
  color: #000;
  font-size: clamp(9px, 1.6vw, 14px);
  margin: 0 0 8px;
  line-height: 1.6;
}

.gdtr-lb-date, .gdtr-lb-empty {
  color: #555;
  font-size: clamp(6px, 1vw, 8px);
  margin: 0 0 14px;
  line-height: 2;
}

.gdtr-lb-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gdtr-lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid #ddd;
  font-size: clamp(7px, 1.1vw, 9px);
  color: #333;
}

.gdtr-lb-top { color: #000; }

.gdtr-lb-pos    { width: 30px; flex-shrink: 0; color: #999; }
.gdtr-lb-pname  { flex: 1; color: #000; }
.gdtr-lb-pscore { color: #000; }

/* ── Responsive ─────────────────────────────────────── */
@media (max-width: 480px) {
  #gdtr-score-form input[type="text"],
  #gdtr-score-form input[type="email"] { max-width: 100%; }
}