/* ========== Snake: Człowiek vs AI — LIGHT THEME ========== */

/* Layout & typography */
* { box-sizing: border-box; }
html, body { height: 100%; }
body{
  margin:0;
  background:#f5f7fb;            /* jasne tło aplikacji */
  color:#1f2937;                  /* ciemny tekst */
  font:15px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.app{ max-width:1200px; margin:0 auto; padding:24px; }

.header{ margin-bottom:12px; }
h1{ margin:0 0 6px; font-weight:800; letter-spacing:.2px; }
.subtitle{ margin:0; color:#64748b; }
.tech-badge{
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:999px;
  background:#e8f0ff; border:1px solid #cddfff; color:#2563eb; font-size:12px;
}

/* Topbar / grid */
.topbar{
  margin:16px 0; display:grid; gap:12px; grid-template-columns:1.2fr .8fr .8fr 1fr; align-items:end;
}

/* Cards */
.card{
  background:#ffffff;             /* białe kafelki */
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.model-selector h3{ margin:0 0 8px 0; }

/* Controls, inputs, selects */
.selector-controls{ display:flex; gap:8px; }
select, input[type="text"]{
  width:100%; background:#ffffff; border:1px solid #d1d5db; color:#111827;
  border-radius:10px; padding:10px; outline:none;
}
select:focus, input[type="text"]:focus{ border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.3); }

button{
  padding:10px 14px; border-radius:10px; border:1px solid #0ea5a5;
  background:linear-gradient(45deg,#7dd3fc,#34d399); /* jasny turkus + miętowy */
  color:#05333a; font-weight:800; cursor:pointer;
}
button:hover{ filter:brightness(1.05); }
button:disabled{ opacity:.6; cursor:not-allowed; }
.speed-control{ display:flex; gap:8px; align-items:center; margin-top:8px; }
input[type="range"]{ width:100%; }

/* Status */
.status{
  padding:10px 12px; border-radius:10px; background:#f3f4f6; border:1px solid #e5e7eb; color:#111827;
}
.status.playing{ background:#ecfdf5; border-color:#a7f3d0; color:#065f46; }
.status.error{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }

/* Versus layout (two boards) */
.versus{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.board-title{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:#64748b; }
.pill{
  padding:2px 8px; border-radius:999px; border:1px solid #d1d5db; background:#ffffff; color:#374151;
}
.legend{ display:flex; gap:8px; align-items:center; }
.dot{ width:10px; height:10px; border-radius:50%; }
.dot.green{ background:#28a745; }
.dot.red{ background:#dc3545; }

/* Canvas wrapper */
.canvas-wrap{
  position:relative; border-radius:16px; overflow:hidden; border:1px solid #e5e7eb; background:#ffffff;
}
canvas{
  display:block; width:100%; height:auto;
  background:#f3f4f6;            /* jasne tło planszy (dodatkowo rysujemy siatkę w rendererze) */
}

/* Stats panels */
.stats-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px;
}
.stat-item{
  display:flex; justify-content:space-between; align-items:center;
  background:#ffffff; border:1px solid #e5e7eb; border-radius:10px; padding:8px;
  color:#111827;
}
.q-values{ grid-column:span 2; }

/* Footer */
.footer{ margin-top:20px; text-align:center; color:#6b7280; }

/* Performance/model info boxes */
#performanceInfo, #modelInfo{
  background:#ffffff; border:1px solid #e5e7eb; border-radius:10px; padding:10px;
}

/* Small helpers */
.hint{ color:#6b7280; font-size:13px; margin-top:6px; }
.start-btn{ box-shadow:0 1px 0 rgba(0,0,0,.05); }

/* Optional: make range slider nicer on WebKit */
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#10b981; border:none;
  margin-top:-6px;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px; border-radius:999px; background:#d1fae5;
}