/* =========================================================================
   PIDdle — Custom Styles, Tile Feedback & Step Button Gradients (css/styles.css)
   -------------------------------------------------------------------------
   HOW TO CUSTOMIZE:
   - Adjust the background radial gradient in `body` to change the lab theme.
   - Modify `.tile-darkgreen`, `.tile-green`, `.tile-yellow`, etc. to tweak
     the 5-try matrix badge colors and glow effects.
   - Modify `.btn-step-pos-*` and `.btn-step-neg-*` to adjust the green/red
     intensity gradient on the PID step buttons.
   ========================================================================= */

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: radial-gradient(circle at 50% 0%, #0f172a 0%, #090d16 65%, #05070c 100%);
  color: #f8fafc;
  min-height: 100vh;
  overflow-x: hidden;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

/* =========================================================================
   5-TRY MATRIX FEEDBACK TILES
   ========================================================================= */

/* ★ Exact Match (0.00 Normal / 0.000 Hard) — Dark Emerald with Gold Border & Glow */
.tile-darkgreen {
  background: linear-gradient(135deg, #064e3b 0%, #047857 100%);
  border: 2px solid #fbbf24;
  color: #fef3c7;
  box-shadow: 0 0 16px rgba(251, 191, 36, 0.35);
}

/* Within Green Tolerance (≤0.10 Normal | ≤0.05 or ≤0.01 Hard) */
.tile-green {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  border: 2px solid #86efac;
  color: #052e16;
}

/* Close Guess (≤0.50 Normal | ≤0.25 or ≤0.10 Hard) */
.tile-yellow {
  background: linear-gradient(135deg, #ca8a04 0%, #eab308 100%);
  border: 2px solid #fde047;
  color: #1e1b4b;
}

/* Moderately Off (<1.00 Normal | ≤0.50 Hard) */
.tile-gray-near {
  background: linear-gradient(135deg, #334155 0%, #475569 100%);
  border: 2px solid #64748b;
  color: #f1f5f9;
}

/* Far Off (≥1.00 Normal | >0.50 Hard) */
.tile-gray-far {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
  border: 2px solid #334155;
  color: #94a3b8;
}

/* =========================================================================
   STEP ADJUSTMENT BUTTON COLOR SCHEME (Darkest for Largest -> Lighter for Smaller)
   - Positives: Dark Green (+0.1), Lighter Green (+0.05), Even Lighter Green (+0.001 Hard)
   - Negatives: Even Lighter Red (-0.001 Hard), Lighter Red (-0.05), Dark Red (-0.1)
   ========================================================================= */

/* +0.1: Largest Positive -> Dark Green */
.btn-step-pos-lg {
  background: linear-gradient(135deg, #064e3b 0%, #065f46 100%);
  border: 1px solid #10b981;
  color: #ecfdf5;
}
.btn-step-pos-lg:hover {
  background: linear-gradient(135deg, #065f46 0%, #047857 100%);
  border-color: #34d399;
}

/* +0.05: Medium Positive -> Lighter Green */
.btn-step-pos-md {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  border: 1px solid #4ade80;
  color: #f0fdf4;
}
.btn-step-pos-md:hover {
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  border-color: #86efac;
}

/* +0.001 (Hard Mode Only): Smallest Positive -> Even Lighter Green */
.btn-step-pos-sm {
  background: linear-gradient(135deg, #4ade80 0%, #86efac 100%);
  border: 1px solid #bbf7d0;
  color: #052e16;
}
.btn-step-pos-sm:hover {
  background: linear-gradient(135deg, #86efac 0%, #bbf7d0 100%);
  border-color: #dcfce7;
}

/* -0.001 (Hard Mode Only): Smallest Negative -> Even Lighter Red */
.btn-step-neg-sm {
  background: linear-gradient(135deg, #fb7185 0%, #fda4af 100%);
  border: 1px solid #fecdd3;
  color: #4c0519;
}
.btn-step-neg-sm:hover {
  background: linear-gradient(135deg, #fda4af 0%, #fecdd3 100%);
  border-color: #ffe4e6;
}

/* -0.05: Medium Negative -> Lighter Red */
.btn-step-neg-md {
  background: linear-gradient(135deg, #be123c 0%, #e11d48 100%);
  border: 1px solid #fb7185;
  color: #fff1f2;
}
.btn-step-neg-md:hover {
  background: linear-gradient(135deg, #e11d48 0%, #f43f5e 100%);
  border-color: #fda4af;
}

/* -0.1: Largest Negative -> Dark Red */
.btn-step-neg-lg {
  background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%);
  border: 1px solid #ef4444;
  color: #fef2f2;
}
.btn-step-neg-lg:hover {
  background: linear-gradient(135deg, #7f1d1d 0%, #991b1b 100%);
  border-color: #f87171;
}

@keyframes popIn {
  0% { transform: scale(0.88) translateY(8px); opacity: 0; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

.animate-pop {
  animation: popIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.7); }
::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, 0.35); border-radius: 9999px; }