/* ========== 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; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

/* Ramp layout */
.kq-ramp {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(0.5rem, 1.2vw, 1rem);
  padding: 12px 8px;
  box-sizing: border-box;
  /* avoid forced wrap that would re-order items; allow natural shrink */
  flex-wrap: nowrap;
  /* allow small horizontal overflow on ultra-narrow devices (no JS slider) */
  overflow-x: visible;
  -webkit-overflow-scrolling: touch;
}

/* card inside ramp */
.kq-ramp .kq-card {
  background: rgba(200,172,250,0.1);
  backdrop-filter: blur(6px);
  border-radius: 14px;
  padding: clamp(8px, 1.2vw, 12px);
  text-align: center;
  /* fluid shrink: clamp(min,max) keeps layout consistent */
  flex: 0 1 clamp(140px, 26%, 320px);
  max-width: 34%;
  position: relative;
  overflow: visible;
  box-shadow: 0 10px 28px rgba(255,255,0,0.3);
  min-width: 120px; /* safety */
}

/* ensure the user label in Top-3 stays single-line and aligned identically */
.kq-ramp .kq-card .user {
  white-space: nowrap;         /* keep it on a single line */
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-size: clamp(14px, 1.7vw, 18px);
  line-height: 1.05;
  margin-top: 6px;
}

/* visual offsets for top positions (use gentle vertical offsets only) */
.kq-ramp .first  { transform: translateY(0);  z-index: 30;  flex-basis: clamp(180px, 36%, 420px); }
.kq-ramp .second { transform: translateY(8px); z-index: 20;  flex-basis: clamp(140px, 26%, 320px); }
.kq-ramp .third  { transform: translateY(14px); z-index: 10;  flex-basis: clamp(140px, 26%, 320px); }

/* small screens: reduce padding & font-sizes but keep layout order & positions */
@media (max-width: 760px) {
  .kq-ramp { gap: 0.6rem; padding: 8px 6px; }
  .kq-ramp .kq-card {
    padding: 8px;
    flex: 0 1 clamp(120px, 32%, 260px);
    max-width: 40%;
    min-width: 110px;
  }
  .kq-ramp .first { flex-basis: clamp(140px, 40%, 320px); transform: translateY(0); }
  .kq-ramp .second, .kq-ramp .third { flex-basis: clamp(120px, 30%, 260px); transform: translateY(6px); }
  .kq-ramp .kq-card .user { font-size: 14px; }
}

/* ultra-narrow devices: preserve exact ordering (no stacking), reduce sizes */
@media (max-width: 420px) {
  .kq-ramp { gap: 0.4rem; padding: 6px 4px; }
  .kq-ramp .kq-card { flex-basis: 140px; max-width: 45%; padding: 8px; }
  .kq-ramp .kq-card .user { font-size: 13px; }
}

/* Crown (above circle for #1) */
.kq-card .kq-crown { font-size:40px; margin:-30px auto 6px; display:block; filter: drop-shadow(0 8px 18px rgba(255,255,0,0.4)); z-index:50; }

/* ------ Medal icon below the circle ------ */
.kq-medal {
  display:block;
  margin: 8px auto 10px;
  border-radius:50%;
  width:56px;
  height:56px;
  line-height:56px;
  text-align:center;
  font-size:22px;
  box-shadow: 0 8px 24px rgba(0,255,255,0.4);
  border:1px solid rgba(0,0,0,0.09);
  background: transparent;
}

/* medal color backgrounds */
.kq-medal.medal-gold { background: linear-gradient(180deg,#fcaf0a,#fcc738); }
.kq-medal.medal-silver { background: linear-gradient(180deg,#f7f9fc,#e9eef6); }
.kq-medal.medal-glass { background: linear-gradient(180deg, rgba(220,240,255,0.5), rgba(247,2,211,0.1)); border:1px solid rgba(180,200,220,0.09); }

/* user / meta text with stronger stroke Top 3 Cards*/
.kq-card .user { font-size:18px; font-weight:900; color:#fff; margin-top:6px; -webkit-text-stroke: 0.7px rgba(0,0,0,0.7); text-shadow:0 1px 0 rgba(255,255,255,0.03); }
.kq-card .meta { color:#ff059b; margin-top:8px; line-height:1.2; -webkit-text-stroke:0.4px rgba(0,0,0,0.5); }

/* list header + cards (transparent, minimal) */
/* Ensure the leaderboard table / top-5 container never overflows awkwardly */
.kq-leader-list, .kq-ramp {
  width: 100%;
  box-sizing: border-box;
  overflow: visible;
}

/* ====== Leader list container: keep order, reduce vertical gaps, allow graceful shrink ====== */
.kq-leader-list {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 0;
  max-height: none;
  overflow-y: visible;  
  overflow-x: auto;     /* allow horizontal scroll if columns cannot fit */
  -webkit-overflow-scrolling: touch;
  padding-right: 6px;
}

/* header row (grid) - responsive columns using minmax so columns shrink proportionally */
.kq-list-header {
  display: grid;
  grid-template-columns: 64px minmax(120px, 1fr) minmax(72px, 10ch) minmax(72px, 9ch);
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  box-sizing: border-box;
  background: rgba(6,10,18,0.40);
  color: #f6fbff;
  border-radius: 8px;
  font-weight: 700;
  font-size: clamp(11px, 1.45vw, 14px);
}

/* each list row (card) */
.kq-list-card {
  display: grid; grid-template-columns: 64px minmax(120px, 1fr) minmax(72px, 10ch) minmax(72px, 9ch);
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  margin-top: 6px;           /* compact vertical spacing */
  box-sizing: border-box;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(251,0,255,0.07));
  color: #fa076c;
  font-size: clamp(11px, 1.4vw, 14px);
  box-shadow: 0 1px 6px rgba(255,0,149,0.4);
}

/* ensure children can shrink properly inside grid cells (prevents forcing new rows) */
.kq-list-card > * {
  min-width: 0;
}

/* keep username in list single-line to preserve column widths */
.kq-list-card .user {
  font-weight: 700;
  color: #04db94;
  -webkit-text-stroke: 0.55px rgba(0,0,0,0.8);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* keep single-line (no wrapping that pushes layout) */
}

/* score/time cell safe shrink */
.kq-list-card .score, .kq-list-card .time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* keep my row highlight subtle and consistent */
.kq-my-row {
  outline: 2px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 18px rgba(255,0,149,0.4);
  background: linear-gradient(180deg, rgba(255,255,255,0.2), rgba(255,255,255,0.4));
}
/* make my-row & rank highly visible on any background */
.kq-my-rank { color: #ffd966; font-weight: 700; margin-top: 10px; }
.kq-my-row .user { color: #ffd966 !important; } /* username on highlighted row */
.kq-my-row .score, .kq-my-row .time { color: #fff !important; } /* optional contrast */

/* Full leaderboard link - compact and flexible */
.kq-full-link { margin-top: 8px; font-size: clamp(12px, 1.6vw, 14px); }
.kq-full-link a {
  display:inline-block; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04);
  text-decoration: none; color: #dbeeff; font-weight:700;
}

/* Responsive behavior — keep positions identical, scale everything down */
@media (max-width: 760px) {
  .kq-list-header, .kq-list-card {
    grid-template-columns: 56px minmax(100px, 1fr) minmax(64px, 9ch) minmax(64px, 8ch);
    gap: 6px;
    padding: 6px;
    font-size: clamp(10px, 2.8vw, 13px);
  }
  .kq-list-card .user { font-size: 13px; }
  .kq-circle { width:60px; height:60px; line-height:60px; font-size:18px; -webkit-text-stroke:0.8px rgba(0,0,0,0.7); }
  .kq-medal { width:44px; height:44px; line-height:44px; font-size:16px; }
  .kq-ramp { gap:0.5rem; padding:8px 6px; }
  .kq-ramp .kq-card { padding: 8px; }
}

/* Very narrow screens: keep ALL four columns but further reduce sizes; allow horizontal panning */
@media (max-width: 420px) {
  .kq-list-header, .kq-list-card {
    grid-template-columns: 52px minmax(80px, 1fr) minmax(56px, 8ch) minmax(56px, 7ch);
    gap: 6px;
    padding: 6px;
    font-size: 12px;
  }
  .kq-list-card .user { font-size: 12px; }
  .kq-circle { width:56px; height:56px; line-height:56px; font-size:16px; }
  .kq-medal { width:40px; height:40px; line-height:40px; font-size:15px; }
}

/* small utility for embedding small scorecards (if you want a tighter look) */
.kq-leaderboard.small .kq-list-header,
.kq-leaderboard.small .kq-list-card {
  padding: 6px;
  font-size: 12px;
}

/* responsive tweaks */
@media (max-width:760px) {
  .kq-circle { width:64px; height:64px; line-height:64px; font-size:20px; -webkit-text-stroke:0.9px rgba(0,0,0,0.7); }
  .kq-medal { width:48px; height:48px; line-height:48px; font-size:18px; }

/* help text / buttons */
.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; }

/* auth modal */
#kq-auth-modal { position: fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(0,0,0,0.45); z-index:1000009; padding:16px; overflow:auto; }
.kq-auth-modal-inner { position: relative; background: #fff; width:90%; max-width:520px; border-radius:12px; padding:18px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }

/* --- Fix: ensure modal shows properly on all screen sizes --- */
#kq-auth-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  z-index: 999999;
  padding: 16px;
  overflow: auto;
}

/* Prevent any desktop override — force consistent behavior */
@media (min-width: 481px) {
  #kq-auth-modal {
    display: none !important; /* stays hidden until JS opens it */
  }
  .kq-auth-modal-inner {
    width: 100%;
    max-width: 520px;
    background: #f6f7f0;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
    margin: auto;
  }
}

/* Keep smaller mobile tweaks intact */
@media (max-width: 480px) {
  .kq-auth-modal-inner { padding: 14px; }
    .kq-auth-tabs .kq-tab { padding: 8px 10px; font-size: 14px; }
}
	
/* 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:#245485; cursor:pointer; font-weight:700; border:1px solid transparent; }
.kq-auth-tabs .kq-tab.active { background: linear-gradient(180deg,#ffffff,#722485); 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; }

/* KQ: remove internal vertical scrollbar and force leaderboard to flow naturally */
.kq-leader-list, .kq-leaderboard, .kq-ramp {
  max-height: none !important;
  overflow-y: visible !important;
}
	.kq-leaderboard-full .kq-lb-search {
  flex: 1;
  padding: 8px;
  border-radius: 8px;
  border: 1px solid #e6eefc;
  font-size: 16px;
}

.kq-leaderboard-full .kq-search-btn {
  padding: 8px 16px;
  font-size: 16px;
  border-radius: 8px;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .kq-leaderboard-full .kq-lb-search {
    padding: 6px;
    font-size: 14px;
  }
  .kq-leaderboard-full .kq-search-btn {
    padding: 6px 12px;
    font-size: 14px;
  }
}