/* ==========================================================================
   Colordle — stil de instrument de masurare a culorii (colorimetru)
   ========================================================================== */

.colordle-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
  align-items: start;
}

@media (max-width: 880px) {
  .colordle-layout { grid-template-columns: 1fr; }
}

.panel {
  background: var(--surface-booth);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 22px;
}

.panel + .panel { margin-top: 16px; }

.panel-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}

/* --- Dots pentru incercari ramase --- */
.attempts-dots { display: flex; gap: 6px; margin-bottom: 18px; }
.attempts-dots .dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--line);
  transition: background 0.25s var(--ease-out);
}
.attempts-dots .dot.used { background: var(--ink-dim); }
.attempts-dots .dot.current { background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }

/* --- Rand de input --- */
.guess-input-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.hex-input-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0 4px 0 14px;
  transition: border-color 0.2s;
}
.hex-input-wrap:focus-within { border-color: var(--accent); }

.hex-input-wrap .hash { color: var(--ink-faint); font-family: var(--font-mono); }

.hex-input-wrap input[type="text"] {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 17px;
  letter-spacing: 0.03em;
  padding: 13px 6px;
  text-transform: uppercase;
  min-width: 0;
}

.color-picker-swatch {
  width: 40px; height: 40px;
  border-radius: 8px;
  border: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  background: none;
}
.color-picker-swatch input[type="color"] {
  width: 150%; height: 150%;
  border: none;
  margin: -25%;
  cursor: pointer;
}

.btn {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 20px;
  cursor: pointer;
  transition: transform 0.15s var(--ease-out), opacity 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--accent); color: #10151F; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.btn-ghost { background: var(--surface-raised); color: var(--ink); border: 1px solid var(--line); }
.btn-ghost:hover:not(:disabled) { border-color: var(--ink-dim); }

.input-error {
  margin-top: 10px;
  color: var(--danger);
  font-size: 13px;
  min-height: 18px;
}

/* --- Istoric incercari (banda de instrument) --- */
.attempts-list { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.attempt-row {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 14px;
  align-items: center;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  animation: rowIn 0.4s var(--ease-out);
}

@keyframes rowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.attempt-swatch {
  width: 44px; height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.attempt-gauges {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 12px;
}

.gauge { display: flex; align-items: center; gap: 5px; color: var(--ink-dim); }
.gauge .gauge-label { color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.gauge .arrow { display: inline-block; font-size: 13px; }
.gauge[data-bucket="exact"] { color: var(--success); }
.gauge[data-bucket="close"] { color: var(--accent); }
.gauge[data-bucket="medium"] { color: var(--warning); }
.gauge[data-bucket="far"] { color: var(--ink-faint); }

.attempt-match {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  min-width: 52px;
}

.attempt-hex {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  margin-top: 2px;
}

/* --- Reveal final --- */
.reveal-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: var(--radius-sm);
  margin-top: 18px;
  background: var(--surface-raised);
  border: 1px solid var(--line-on-card, var(--line));
}

.reveal-swatch {
  width: 64px; height: 64px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid var(--line);
}

.reveal-info h3 { font-size: 18px; margin-bottom: 2px; }
.reveal-info p { margin: 0; color: var(--ink-dim); font-size: 13.5px; font-family: var(--font-mono); }

/* --- Panou lateral: streak + leaderboard --- */
.stat-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); }
.stat-row:last-child { border-bottom: none; }
.stat-row .label { color: var(--ink-dim); font-size: 13.5px; }
.stat-row .value { font-family: var(--font-mono); font-size: 18px; }

.leaderboard-list { list-style: none; margin: 0; padding: 0; }
.leaderboard-list li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.leaderboard-list li:last-child { border-bottom: none; }
.leaderboard-list .rank { color: var(--ink-faint); font-family: var(--font-mono); width: 22px; flex-shrink: 0; }
.leaderboard-list .name { flex: 1; color: var(--ink-dim); }
.leaderboard-list .score { font-family: var(--font-mono); }

.empty-note { color: var(--ink-faint); font-size: 13px; }