:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial; }
body { margin: 0; background: #0f172a; color: #e2e8f0; }
a { color: #93c5fd; text-decoration: none; }
a:hover { text-decoration: underline; }

.app-header {
  display:flex; gap:1rem; align-items:center; padding:12px 16px;
  background:#111827; border-bottom:1px solid #1f2937; flex-wrap:wrap;
}
.app-header h1 { margin:0; font-size:18px; }
.byline { opacity:.85; }
nav { display:flex; gap:.75rem; align-items:center; }
.linklike { background:none; border:1px solid #334155; border-radius:8px; padding:6px 10px; color:#fca5a5; cursor:pointer; }
.linklike:hover { background:#1f2937; }

main { padding:24px; max-width:900px; margin:auto; }
.card { background:#111827; border:1px solid #1f2937; border-radius:12px; padding:20px; }
label { display:block; margin:8px 0; }
input { padding:8px; width:100%; border-radius:8px; border:1px solid #334155; background:#0b1324; color:#e5e7eb; }
button { padding:8px 14px; border-radius:8px; border:1px solid #334155; background:#1e293b; color:#e5e7eb; cursor:pointer; }
button:hover { background:#243447; }

.table { width:100%; border-collapse: collapse; margin-top:10px; }
.table th, .table td { border-bottom:1px solid #1f2937; padding:8px; text-align:left; }
.inline { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.msg { background:#0b1324; padding:10px; border-radius:8px; border:1px solid #243447; max-height:140px; overflow:auto; }
.hint { opacity:.9; }
.center { text-align:center; }
button[disabled] { opacity: .6; cursor: not-allowed; }
.msg.success { border-color: #16a34a; }
.msg.error   { border-color: #dc2626; }

/* Ajuste fino solo para la barra de controles de Puntajes */
#scoresForm {
  display: flex;          /* ya hereda el look de .inline */
  align-items: center;    /* alinea verticalmente input y botón */
  gap: 12px;              /* separación suave */
  flex-wrap: nowrap;      /* evita que el botón baje de renglón */
}

#scoresForm input {
  width: auto;            /* que NO ocupe todo el ancho */
  min-width: 200px;       /* tamaño cómodo del campo */
}

#scoresForm button {
  margin-left: 8px;       /* pequeño desplazamiento a la derecha */
}