/* ========== AUTH FIELD / EYE FIX ========== */
.kq-field { position: relative; display: block; margin-bottom: 10px; }
.kq-field input { width:100%; padding:12px 44px 12px 12px; box-sizing: border-box; }
.kq-field .kq-toggle-pass {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  z-index: 3;
}

/* ========== Leaderboard container safety / responsive ========== */
.kq-leaderboard { max-width: 100%; box-sizing: border-box; }
.kq-leader-list { margin-top: 0.8rem; display: block; }
.kq-list-header, .kq-list-card { width: 100%; box-sizing: border-box; overflow: hidden; }

/* make scorecard taller and prevent cropping */
.kq-score-card .kq-leader-list { max-height: 40vh; min-height: 140px; overflow:auto; padding-right:6px; }

/* make the ramp cards translucent so background is visible */
.kq-ramp .kq-card {
  background: rgba(255,255,255,0.06);    /* transparent card */
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  text-align: center;
  min-width:140px;
  max-width: 220px;
  position: relative;
  overflow: visible;
}

/* slightly smaller first — but visually prominent using scale and crown */
.kq-ramp .first { transform: scale(1.18); order:2; z-index:30; padding:16px; min-width:160px; }
.kq-ramp .second { order:1; transform: translateY(6px); z-index:20; }
.kq-ramp .third { order:3; transform: translateY(14px); z-index:10; }

/* grid columns — responsive using minmax */
.kq-list-header, .kq-list-card {
  display: grid;
  grid-template-columns: 80px minmax(150px, 1fr) 140px 140px;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

/* headers aesthetic */
.kq-list-header {
  background: linear-gradient(180deg,#fbfdff,#f3f7fb);
  border-radius: 8px;
  font-weight: 700;
  color: #222;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
}

/* item style */
.kq-list-card {
  background: #fff;
  border-radius: 8px;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  font-size: 14px;
}
.kq-list-card .user { font-weight: 600; }
.kq-list-card .score, .kq-list-card .time { color: #333; }

/* my rank */
.kq-my-rank { margin-top: 1rem; text-align: center; font-weight: 700; color: #2c7be5; }

/* ========== Ramp / Top-3 styling ========== */
.kq-ramp { display:flex; justify-content:center; align-items:flex-end; gap: 1rem; margin:1.5rem 0; }
.kq-ramp .kq-card { background:#fff; border-radius:1rem; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.08); text-align:center; min-width:140px; }
.kq-ramp .first { transform: scale(1.12); order:2; }
.kq-ramp .second { order:1; transform: translateY(8px); }
.kq-ramp .third { order:3; transform: translateY(18px); }

/* rank circle sits above medal visually */
.kq-rank-circle {
  width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  position:absolute; top:-22px; left:50%; transform:translateX(-50%); font-weight:800;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  color:#fff;
  border:2px solid rgba(255,255,255,0.06);
  font-size:18px;
}

/* medal circle under rank */
.kq-medal { width:72px; height:72px; border-radius:50%; line-height:72px; font-weight:800; font-size:20px; margin: 18px auto 8px; display:block; color:#111; }
.kq-medal.medal-gold { background: linear-gradient(180deg,#ffd84a,#ffb300); color:#000; }
.kq-medal.medal-silver { background: linear-gradient(180deg,#e7ecf2,#bfc8d7); color:#111; }
.kq-medal.medal-glass { background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); color:#fff; border:1px solid rgba(255,255,255,0.06); }

/* tiny ramp text */
.kq-card .user { font-size: 18px; font-weight:800; display:block; }
.kq-card .meta { color:#555; font-size:13px; margin-top:6px; }

/* Ensure ramp doesn't overflow container on smaller screens */
@media (max-width:760px) {
  .kq-ramp { flex-direction: column-reverse; gap:0.6rem; padding:6px; }
  .kq-medal { width:56px; height:56px; line-height:56px; font-size:16px; }
  .kq-rank-circle { width:40px; height:40px; top:-16px; font-size:15px; }
}
/* teach the list to adapt with minmax so items won't get cropped heavily */
.kq-list-header, .kq-list-card {
  display: grid;
  grid-template-columns: 70px minmax(140px, 1fr) 110px 110px;
  gap: 10px;
  align-items: center;
  padding: 10px;
}

/* Force list columns to wrap nicely and avoid cropping on small screens */
@media (max-width:600px) {
  .kq-list-header, .kq-list-card { grid-template-columns: 56px 1fr 96px 84px; font-size: 13px; padding:8px; }
  .kq-list-card .user { font-size: 15px; }
}

/* make score/time text wrap and not overflow container boundary */
.kq-list-card .score, .kq-list-card .time { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* smaller space between search / ramp / list */
.kq-leaderboard-full > .kq-ramp-wrap { margin: 8px 0; }
.kq-leaderboard-full > .kq-leader-list { margin-top: 8px; }

/* hide old "Load more" fallback visually; we will rely on automatic loading. keep accessible for no-js */
.kq-load-more-wrap { display:none; }

/* make "my rank" visible with spacing */
.kq-my-rank { margin-top: 10px; font-weight:800; color:#2c7be5; text-align:center; }

/* Crown above first medal */
.kq-ramp .kq-card { position: relative; overflow: visible; }
.kq-ramp .kq-card.first { z-index: 30; margin-top: -12px; }
.kq-ramp .kq-card.second { z-index: 20; margin-top: 6px; }
.kq-ramp .kq-card.third  { z-index: 10; margin-top: 18px; }

/* crown sits above first */
.kq-card .kq-crown { font-size: 36px; line-height:1; margin: -18px auto 6px; display:block; transform:translateY(-6px); }

/* ensure medal sits visually beneath crown (medal is .kq-medal) */
.kq-card .kq-medal { display:block; margin: 6px auto 12px; }

/* enforce that top 3 card content wraps into two lines (prevents cropping) */
.kq-card .user { white-space: normal; word-break: break-word; }
.kq-card .meta { display:block; margin-top:6px; line-height:1.2; color:#666; }

/* make first card larger for grandeur */
.kq-ramp .kq-card.first { transform: scale(1.32); padding: 20px; min-width:180px; }

/* make ramp spacing a little more loose so top1 doesn't cover top2/3 */
.kq-ramp { gap: 1.25rem; padding: 12px 10px; }

/* Auth modal (centered popup with internal scroll) */
#kq-auth-modal {
  position: fixed;
  inset: 0;
  display: none; 
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 99999;
  padding: 16px;
  overflow: auto; }

.kq-auth-modal-inner {
  background: #fff;
  width: 100%;
  max-width: 520px;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  max-height: calc(100vh - 48px);
  overflow: auto;            /* internal scroll for long forms */
  box-sizing: border-box;
  position: relative;
}

/* small niceties */
.kq-auth-close { right:12px; top:12px; position: absolute; z-index: 60; background:#fff; border-radius:6px; padding:6px; box-shadow:0 4px 10px rgba(0,0,0,0.08); }
.kq-auth-card { padding:6px 0 12px; }

/* tabs/buttons styling */
.kq-auth-tabs .kq-tab { display:inline-block; padding:10px 14px; margin-right:6px; border-radius:8px; background:#f3f7fb; cursor:pointer; font-weight:700; border:1px solid transparent; }
.kq-auth-tabs .kq-tab.active { background: linear-gradient(180deg,#ffffff,#eef6ff); border-color:#dfeefd; box-shadow:0 6px 18px rgba(44,123,229,0.06); }
.kq-btn-small { padding:8px 12px; border-radius:8px; background:#2c7be5; color:#fff; border:none; cursor:pointer; font-weight:700; }
.kq-btn-small:hover { opacity:0.95; transform: translateY(-1px); transition:0.15s ease; }

/* make code hint visible nicely */
.kq-forgot-code-hint { font-family: monospace; }